/* ==========================================================================
   JustiComm · page « Audit de visibilité » (refonte du 23/10/2026)
   Même esprit que Réseaux sociaux, Référencement local et Publicité en ligne :
   bandeau pétrole pleine largeur, texte clair dessous, sections claires et sombres en alternance.
   Visuels propres à la page (CSS et SVG) : aperçu de rapport animé, chemin du futur client,
   sept domaines, points de vigilance soulignés comme sur une épreuve relue, page de rapport.
   Trois photos ChatGPT (bandeau du haut, bande du milieu, appel final).
   Animations jouées une fois (moins de 5 s) ; état final fixe si « moins d’animations ».
   Préfixe : av-
   ========================================================================== */

.av-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .av-or, .surface-nuit .av-or { color: var(--or-clair); }

/* Repères de couleur du rapport (non textuels, toujours doublés d’un libellé) */
.av-pastille { display: inline-block; flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
.av-pastille--ok { background: #2E7D4F; }
.av-pastille--moyen { background: #9E6116; }
.av-pastille--frein { background: #B03A2E; }

.av-picto { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--or-texte); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.surface-sombre .av-picto, .surface-nuit .av-picto { stroke: var(--or); }

/* Sections : espacement modeste, titres et chapeaux sur toute la largeur */
.av-s { padding-block: clamp(3.5rem, 2rem + 3.5vw, 5.5rem); }
.av-s .titre-section, .av-final .titre-section, .faq5 .faq5__titre { max-width: none; text-wrap: pretty; }
.av-s .titre-section, .av-final .titre-section { margin-top: var(--e-4); font-size: clamp(1.875rem, 1.6rem + 0.75vw, 2.375rem); line-height: 1.15; }
.av-tete { max-width: none; }
.av-chapo { margin-top: var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.4 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.av-texte { margin-top: var(--e-4); font-size: var(--t-corps); line-height: 1.65; color: var(--texte); text-wrap: pretty; }
.av-texte--centre { text-align: center; }
.surface-sombre .av-texte, .surface-nuit .av-texte { color: var(--creme-doux); }

.av-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.av-actions--centre { justify-content: center; }
.av-actions .btn-cartouche { min-height: 60px; }

/* Encadré fort : centré, pleine largeur, 22 → 32 px */
.av-encadre {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 4vw, 3rem);
  border-block: 1px solid var(--filet-couleur);
  text-align: center; text-wrap: balance;
  font: 500 clamp(1.375rem, 1.1rem + 1.1vw, 2rem) / 1.3 var(--f-titre); color: var(--titre);
}
.av-encadre--sombre { border-color: rgba(224, 189, 142, 0.28); color: var(--creme); }

@keyframes av-apparait { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes av-pop { 0% { opacity: 0; scale: 0.3; } 70% { opacity: 1; scale: 1.25; } 100% { opacity: 1; scale: 1; } }
@keyframes av-balaye { 0% { opacity: 0; top: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; top: 100%; } }
@keyframes av-tampon { 0% { opacity: 0; scale: 1.6; rotate: -16deg; } 60% { opacity: 1; scale: 0.94; rotate: -7deg; } 100% { opacity: 1; scale: 1; rotate: -8deg; } }

/* --------------------------------------------------------------------------
   1. Haut de page : fil d’Ariane, bandeau pétrole avec l’aperçu du rapport,
      puis texte et formulaire sur fond clair
   -------------------------------------------------------------------------- */
body:has(.av-haut) .entete__fond { opacity: 1; }   /* barre du haut lisible sur fond clair */
.av-haut { position: relative; padding: var(--h-entete) 0 clamp(2rem, 4vw, 3rem); background: var(--papier); }
.av-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding-block: 0.25rem; font-size: 0.875rem; color: var(--taupe); }
.av-ariane a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-underline-offset: 3px; }
.av-ariane [aria-current] { color: var(--encre); }

.av-bandeau { position: relative; isolation: isolate; overflow: hidden; background: var(--petrole-profond); }
.av-bandeau__photo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 55% 70% at 22% 55%, rgba(224, 189, 142, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 60% at 85% 20%, rgba(32, 80, 81, 0.7), transparent 70%),
    linear-gradient(115deg, var(--petrole-900) 0%, var(--petrole-profond) 35%, var(--petrole) 70%, var(--halo) 100%);
}
/* Filets dorés discrets (masqués depuis l’arrivée de la photo) */
.av-bandeau__photo::after {
  content: ""; position: absolute; inset: 12% auto 12% 6%; width: 38%;
  background: repeating-linear-gradient(180deg, rgba(224, 189, 142, 0.12) 0 1px, transparent 1px 2.6rem);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent);
}
.av-bandeau__scene { display: flex; justify-content: flex-end; padding-block: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 59.99em) { .av-bandeau__scene { justify-content: center; } }

.av-apercu {
  position: relative; width: min(100%, 27rem); margin: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: #FFFDF8; border-top: 3px solid var(--or);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
  color: var(--encre);
}
.av-apercu__tete { display: grid; gap: 0.2rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--lin); }
.av-apercu__logo img { display: block; width: 6.5rem; height: auto; margin-bottom: 0.5rem; }
.av-apercu__titre { font: 500 1.5rem / 1.1 var(--f-titre); color: var(--petrole); }
.av-apercu__sous { font-size: 0.8125rem; color: var(--taupe); }
.av-apercu__liste { position: relative; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.av-apercu__liste li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid #EFEAE0; font-size: 0.9375rem; }
.av-apercu__nom { color: var(--encre); }
.av-apercu__priorite { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin: 1rem 0 0; padding: 0.75rem 1rem; background: var(--petrole); color: var(--creme); font: 500 1.125rem / 1.3 var(--f-titre); }
.av-apercu__priorite span { font: 500 0.75rem / 1.3 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }
.av-apercu__sceau {
  position: absolute; right: 1rem; top: 1rem; display: grid; place-content: center; justify-items: center;
  width: 5.75rem; height: 5.75rem; padding: 0.5rem; border-radius: 50%;
  border: 1.5px solid var(--cuivre); box-shadow: inset 0 0 0 3px #FFFDF8, inset 0 0 0 4px rgba(176, 99, 57, 0.5);
  text-align: center; color: #8A4A28; rotate: -8deg;
}
.av-apercu__sceau b { font: italic 600 1.5rem / 1 var(--f-titre); }
.av-apercu__sceau small { margin-top: 0.15rem; font-size: 0.5625rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.av-apercu__balayage { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--or) 20%, var(--or) 80%, transparent); box-shadow: 0 0 14px 2px rgba(224, 189, 142, 0.6); }
@media (prefers-reduced-motion: no-preference) {
  .av-apercu__liste .av-pastille { animation: av-pop 0.45s var(--ease-sortie) calc(0.7s + var(--i) * 0.3s) both; }
  .av-apercu__balayage { animation: av-balaye 2.6s var(--ease-douce) 0.5s both; }
  .av-apercu__priorite { animation: av-apparait 0.6s var(--ease-sortie) 3s both; }
  .av-apercu__sceau { animation: av-tampon 0.6s var(--ease-sortie) 3.5s both; }
}

.av-haut__grille { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60em) { .av-haut__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.av-haut__titre { margin-top: var(--e-4); font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.1 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.av-haut__accroche { margin-top: var(--e-5); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.38 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.av-haut__intro { margin-top: var(--e-3); font-size: var(--t-legende); line-height: 1.65; color: var(--encre); }
.av-haut .av-actions { margin-top: var(--e-5); }
.av-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: var(--e-5) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--encre); }
.av-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.av-engagements li::before { content: "✓"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
.av-haut__tel { margin-top: var(--e-5); font-size: 0.9375rem; color: var(--taupe); }
.av-haut__tel a { color: var(--petrole); font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 30em) { .av-haut .surtitre { font-size: 0.8125rem; letter-spacing: 0.14em; } }

/* Formulaire : carte claire à filet doré (balise et champs inchangés, styles des champs : contact.css) */
.av-form {
  scroll-margin-top: calc(var(--h-entete) + 1rem);
  padding: clamp(1.5rem, 3vw, 2.25rem); background: #FFFDF8;
  border: 1px solid var(--lin); border-top: 3px solid var(--or);
  box-shadow: 0 24px 48px -28px rgba(6, 42, 43, 0.35);
}
.av-form__titre { font: 500 clamp(1.5rem, 1.35rem + 0.5vw, 1.875rem) / 1.15 var(--f-titre); color: var(--petrole); }
.av-form__sous { margin-top: var(--e-2); font: italic 500 1.1875rem / 1.4 var(--f-titre); color: var(--or-texte); }
.av-form .ct-formulaire { margin-top: var(--e-5); }
.av-plus { margin-top: var(--e-4); border-top: 1px solid var(--lin); border-bottom: 1px solid var(--lin); }
.av-plus > summary { display: flex; align-items: center; gap: 0.6rem; min-height: 48px; cursor: pointer; list-style: none; font-weight: 500; color: var(--petrole); }
.av-plus > summary::-webkit-details-marker { display: none; }
.av-plus > summary::after { content: ""; width: 0.55rem; height: 0.55rem; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -0.15rem; transition: rotate var(--d) var(--ease-sortie); }
.av-plus[open] > summary::after { rotate: -135deg; translate: 0 0.15rem; }
.av-plus > summary:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.av-plus__contenu { display: grid; gap: var(--e-4); padding-bottom: var(--e-5); }

.av-professions { position: relative; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: var(--e-3); list-style: none; font-size: 0.9375rem; }
.av-professions::before { content: ""; position: absolute; top: 0; left: var(--marge); right: var(--marge); height: 1px; background: var(--lin); }
.av-professions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe); text-decoration: none; }
.av-professions a:hover, .av-professions a:focus-visible { color: var(--petrole); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Les sept domaines (fond pétrole)
   -------------------------------------------------------------------------- */
.av-cartes { display: grid; gap: clamp(1rem, 2vw, 1.25rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .av-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .av-cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.av-cartes > li {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem); background: rgba(238, 234, 225, 0.04);
  border: 1px solid rgba(224, 189, 142, 0.22); border-top: 2px solid var(--or);
  transition: translate var(--d) var(--ease-sortie), background-color var(--d) var(--ease-sortie);
}
.av-cartes > li:hover { translate: 0 -4px; background: rgba(238, 234, 225, 0.08); }
.av-carte__titre { font: 500 1.375rem / 1.2 var(--f-titre); color: var(--creme); }
.av-cartes p { font-size: var(--t-legende); line-height: 1.6; color: var(--creme-doux); }
.av-cartes .av-carte--plus { border-style: dashed; border-top-style: solid; }
.av-carte__liens { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: auto; }
.av-carte__lien { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: auto; font-size: 0.9375rem; font-weight: 500; color: var(--or-clair); text-decoration: underline; text-decoration-color: rgba(242, 217, 172, 0.45); text-underline-offset: 4px; }
.av-carte__liens .av-carte__lien { margin-top: 0; }
.av-carte__lien svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; transition: translate var(--d) var(--ease-sortie); }
.av-carte__lien:hover { color: var(--creme); text-decoration-color: currentColor; }
.av-carte__lien:hover svg { translate: 3px 0; }
.av-carte__lien:focus-visible { outline: 2px solid var(--or-clair); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .js .av-cartes:not(.est-visible) > li { opacity: 0; }
  .js .av-cartes.est-visible > li { animation: av-apparait 0.6s var(--ease-sortie) calc(var(--i) * 0.08s) both; }
}

/* --------------------------------------------------------------------------
   4. Règles de la profession : quatre points de vigilance, soulignés comme sur une épreuve relue
   -------------------------------------------------------------------------- */
.av-regles__intro { margin-top: clamp(2rem, 4vw, 2.75rem); font: italic 500 clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem) / 1.35 var(--f-titre); color: var(--petrole); }
.av-vigilances { display: grid; gap: clamp(1rem, 2vw, 1.25rem); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .av-vigilances { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .av-vigilances { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.av-vigilances > li {
  display: flex; flex-direction: column; gap: var(--e-3);
  padding: clamp(1.25rem, 2.5vw, 1.75rem); background: #FFFDF8;
  border: 1px solid var(--lin); border-left: 4px solid #B03A2E;
  box-shadow: 0 18px 36px -26px rgba(6, 42, 43, 0.35);
}
.av-vigilance__qui { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
.av-vigilance__titre { font: 500 1.375rem / 1.2 var(--f-titre); color: var(--petrole); }
.av-vigilances p:last-child { font-size: var(--t-legende); line-height: 1.6; color: var(--encre); }
.av-vigilance__ex { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; background: var(--papier); border: 1px dashed var(--lin); }
.av-url, .av-mot, .av-annonce, .av-etoiles { text-decoration: underline wavy #B03A2E; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.av-url { padding: 0.2rem 0.6rem; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--lin); font: 400 0.875rem / 1.4 ui-monospace, "SF Mono", Menlo, monospace; color: var(--encre); }
.av-annonce { font-size: 0.875rem; color: var(--encre); }
.av-annonce b { margin-right: 0.5rem; font-weight: 600; }
.av-mot { font: italic 500 1.375rem / 1.2 var(--f-titre); color: var(--petrole); }
.av-etoiles { font-size: 1.125rem; letter-spacing: 0.1em; color: #9E6116; }
.av-regles__note { margin-top: var(--e-5); font-size: var(--t-legende); color: var(--taupe); }
@media (prefers-reduced-motion: no-preference) {
  .js .av-vigilances:not(.est-visible) > li { opacity: 0; }
  .js .av-vigilances.est-visible > li { animation: av-apparait 0.6s var(--ease-sortie) calc(var(--i) * 0.12s) both; }
}

/* --------------------------------------------------------------------------
   5. Le rapport : liste à gauche, page de rapport type à droite
   -------------------------------------------------------------------------- */
.av-rapport__grille { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 60em) { .av-rapport__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.av-recu { display: grid; gap: var(--e-3); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.av-recu li { position: relative; padding-left: 2rem; font-size: var(--t-corps); line-height: 1.55; color: var(--encre); }
.av-recu li::before { content: "✓"; position: absolute; left: 0; top: 0.2rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; color: var(--or); }
.av-recu strong { font-weight: 500; color: var(--petrole); }

.av-extrait { position: relative; margin: 0; }
.av-extrait__legende { margin-bottom: var(--e-4); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe); }
.av-doc { position: relative; padding: clamp(1.25rem, 3vw, 2rem); background: #FFFFFF; border: 1px solid var(--lin); box-shadow: 0 30px 60px -30px rgba(6, 42, 43, 0.45); }
/* Deux feuilles en dessous, légèrement décalées */
.av-doc::before, .av-doc::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #FBF8F2; border: 1px solid var(--lin); }
.av-doc::before { translate: 10px 10px; rotate: 1.2deg; }
.av-doc::after { translate: 20px 18px; rotate: 2.4deg; background: #F4EFE5; }
.av-extrait { isolation: isolate; }
.av-doc__tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--lin); font-size: 0.8125rem; color: var(--taupe); }
.av-doc__tete img { width: 7.5rem; height: auto; }
.av-doc__partie { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 1.25rem; font: 500 1.5rem / 1.2 var(--f-titre); color: var(--petrole); }
.av-doc__partie span { font-size: 1rem; color: var(--or-texte); }
.av-doc__table { width: 100%; margin-top: 0.75rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.av-doc__table thead th { padding: 0.5rem 0; border-bottom: 1px solid var(--lin); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; color: var(--taupe); }
.av-doc__table tbody th, .av-doc__table tbody td { padding: 0.75rem 0; border-bottom: 1px solid #EFEAE0; vertical-align: top; text-align: left; }
.av-doc__table tbody th { width: 40%; padding-right: 1rem; font-weight: 500; color: var(--petrole); }
.av-doc__table tbody th .av-pastille { margin: 0 0.6rem 0.1rem 0.15rem; vertical-align: middle; }
.av-doc__table td { color: var(--encre); }
.av-doc__priorite { margin-top: 1.25rem; padding: 0.9rem 1.1rem; background: var(--petrole); font: 500 1.1875rem / 1.35 var(--f-titre); color: var(--creme); }
.av-doc__priorite span { display: block; margin-bottom: 0.25rem; font: 500 0.75rem / 1.3 var(--f-texte); letter-spacing: 0.14em; text-transform: uppercase; color: var(--or); }
.av-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--encre); }
.av-legende li { display: inline-flex; align-items: center; gap: 0.5rem; }
@media (max-width: 34.99em) {
  .av-doc__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .av-doc__table tr, .av-doc__table tbody th, .av-doc__table td { display: block; width: auto; }
  .av-doc__table tbody th { padding: 0.75rem 0 0.2rem; border-bottom: 0; }
  .av-doc__table td { padding: 0 0 0.75rem 1.55rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .av-extrait:not(.est-visible) .av-doc__table tbody tr, .js .av-extrait:not(.est-visible) .av-doc__priorite { opacity: 0; }
  .js .av-extrait.est-visible .av-doc__table tbody tr { animation: av-apparait 0.5s var(--ease-sortie) calc(0.3s + var(--i) * 0.35s) both; }
  .js .av-extrait.est-visible .av-doc__table .av-pastille { animation: av-pop 0.45s var(--ease-sortie) calc(0.45s + var(--i) * 0.35s) both; }
  .js .av-extrait.est-visible .av-doc__priorite { animation: av-apparait 0.6s var(--ease-sortie) 1.9s both; }
}

/* --------------------------------------------------------------------------
   6. Notre façon de faire : quatre points en rangée (fond nuit)
   -------------------------------------------------------------------------- */
.av-points { display: grid; gap: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(224, 189, 142, 0.3); }
@media (min-width: 40em) { .av-points { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gouttiere); } }
@media (min-width: 64em) { .av-points { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; } }
.av-points > li { display: grid; align-content: start; gap: var(--e-3); padding: 1.5rem 0; border-bottom: 1px solid rgba(224, 189, 142, 0.18); }
@media (min-width: 64em) {
  .av-points > li { padding: 1.75rem 1.75rem 0.5rem; border-bottom: 0; border-left: 1px solid rgba(224, 189, 142, 0.3); }
  .av-points > li:first-child { padding-left: 0; border-left: 0; }
}
.av-point__titre { font: 500 1.375rem / 1.2 var(--f-titre); color: var(--creme); }
.av-points p { font-size: var(--t-legende); line-height: 1.6; color: var(--creme-doux); }
@media (prefers-reduced-motion: no-preference) {
  .js .av-points:not(.est-visible) > li { opacity: 0; }
  .js .av-points.est-visible > li { animation: av-apparait 0.6s var(--ease-sortie) calc(var(--i) * 0.12s) both; }
}

/* --------------------------------------------------------------------------
   7. Comment se passe votre audit : trois étapes reliées
   -------------------------------------------------------------------------- */
.av-fil { position: relative; display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
@media (min-width: 48em) {
  .av-fil { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
  .av-fil::before { content: ""; position: absolute; left: 2rem; right: 16%; top: 2rem; height: 1px; background: linear-gradient(90deg, var(--or-400), var(--cuivre)); transform-origin: left; }
}
.av-fil > li { position: relative; display: grid; align-content: start; gap: var(--e-3); }
.av-fil__rond { position: relative; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--petrole); box-shadow: 0 0 0 6px var(--papier); }
.av-fil__rond svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--or); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.av-fil__num { margin-top: var(--e-2); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.16em; color: var(--or-texte); }
.av-fil__titre { font: 500 1.5rem / 1.2 var(--f-titre); color: var(--petrole); }
.av-fil p { font-size: var(--t-corps); line-height: 1.6; color: var(--encre); }
.av-etapes .av-texte--centre { margin-top: clamp(2rem, 4vw, 3rem); }
@media (prefers-reduced-motion: no-preference) {
  .js .av-fil:not(.est-visible) > li { opacity: 0; }
  .js .av-fil.est-visible > li { animation: av-apparait 0.6s var(--ease-sortie) calc(var(--i) * 0.2s) both; }
  .js .av-fil:not(.est-visible)::before { transform: scaleX(0); }
  .js .av-fil.est-visible::before { transition: transform 1.2s var(--ease-douce) 0.2s; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   8. Questions : composant commun (faq-v5.css)
   9. Appel final : texte à gauche sur fond pétrole, photo à droite
   -------------------------------------------------------------------------- */
.av-final { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(4.5rem, 3rem + 5vw, 7rem); background: var(--petrole-profond); }
.av-final__fond {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 45% 80% at 85% 50%, rgba(224, 189, 142, 0.14), transparent 70%),
    linear-gradient(90deg, var(--petrole-profond) 0%, var(--petrole-profond) 40%, var(--petrole) 100%);
}
.av-final .titre-section { color: var(--creme); }
.av-final__texte { margin-top: var(--e-4); font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.35 var(--f-titre); color: var(--creme-doux); }
.av-final__lien { margin-top: var(--e-5); font-size: var(--t-legende); }
.av-final__lien a { display: inline-flex; align-items: center; min-height: 44px; color: var(--or-clair); text-underline-offset: 4px; }
.av-final__lien a:hover { color: var(--creme); }

/* Moins d’animations : tout est fixe et visible */
@media (prefers-reduced-motion: reduce) {
  .av-cartes > li, .av-carte__lien svg, .av-plus > summary::after { transition: none; }
  .av-cartes > li:hover { translate: none; }
}
.av-apercu__tete { padding-right: 6.25rem; }

/* Bandeau plus compact : le titre et le formulaire remontent dans le premier écran */
.av-bandeau__scene { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.av-apercu { padding: 1.1rem 1.4rem 1.25rem; }
.av-apercu__logo img { margin-bottom: 0.35rem; }
.av-apercu__titre { font-size: 1.375rem; }
.av-apercu__tete { padding-bottom: 0.7rem; }
.av-apercu__liste li { padding: 0.45rem 0; font-size: 0.875rem; }
.av-apercu__priorite { margin-top: 0.8rem; padding: 0.6rem 0.9rem; }
.av-apercu__sceau { top: 0.75rem; right: 0.9rem; width: 5.25rem; height: 5.25rem; }
/* Le cadre de la carte suffit : pas de second cadre autour des champs */
.av-form .ct-formulaire { padding: 0; border: 0; background: none; box-shadow: none; clip-path: none; }
@media (min-width: 48em) { .av-fil::before { right: calc((100% - 2 * var(--gouttiere)) / 3 - 2rem); } }   /* le fil s’arrête au troisième rond */
/* Téléphone : colonne unique sans débordement, grands boutons sur toute la largeur (comme dans les sections) */
.av-haut__grille { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .av-haut__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
@media (max-width: 479px) {
  .av-haut .btn-plaque.btn--grand, .av-final .btn--grand { width: 100%; max-width: 26rem; padding-inline: 20px; padding-block: 12px; white-space: normal; text-align: center; line-height: 1.35; }
  .av-final .btn-cartouche.btn--grand { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Photos (24/10/2026, générées par Raoudha avec ChatGPT)
   -------------------------------------------------------------------------- */
/* Bandeau du haut : l'avocate à gauche, l'aperçu du rapport à droite */
.av-bandeau__photo::after { content: none; }
.av-bandeau__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 30%; }
@media (min-width: 60em) {
  .av-bandeau { display: flex; align-items: center; min-height: clamp(30rem, 38vw, 44rem); }
  .av-bandeau__scene { width: 100%; }
}
/* Téléphone et tablette : la photo d'abord, l'aperçu du rapport la chevauche */
@media (max-width: 59.99em) {
  .av-bandeau__photo { position: relative; inset: auto; z-index: auto; display: block; }
  .av-bandeau__photo img { height: auto; aspect-ratio: 4 / 3; max-height: 30rem; object-position: 20% 30%; }
  .av-bandeau__scene { position: relative; z-index: 1; justify-content: center; margin-top: -4.5rem; padding-top: 0; }
}

/* Appel final : la photo à droite, le texte à gauche sur la partie sombre */
.av-final__fond { z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 75% 40%; }
.av-final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 42, 43, 0.92) 0%, rgba(6, 42, 43, 0.78) 38%, rgba(6, 42, 43, 0.15) 70%, rgba(6, 42, 43, 0) 100%); }
@media (max-width: 47.99em) {
  .av-final { padding-block: clamp(13rem, 58vw, 17rem) clamp(3rem, 8vw, 4rem); }
  .av-final__fond { height: 62%; object-position: 85% 40%; }
  .av-final::before { background: linear-gradient(180deg, rgba(6, 42, 43, 0) 0%, rgba(6, 42, 43, 0.35) 35%, var(--petrole-profond) 60%); }
}
@media (max-width: 47.99em) {   /* téléphone : le titre de l'appel final commence sous les visages, sur la partie sombre */
  .av-final { padding-top: clamp(16rem, 72vw, 19rem); }
  .av-final__fond { height: 58%; }
  .av-final::before { background: linear-gradient(180deg, rgba(6, 42, 43, 0) 0%, rgba(6, 42, 43, 0.4) 28%, var(--petrole-profond) 50%); }
}

/* ==========================================================================
   Améliorations du 24/10/2026 (note 7/10 → objectif 8,5/10, accord de Raoudha) :
   1. chemin du client en liste légère + fiche à manipuler (« Ce que voit votre client » / « Ce que relève l’audit ») ;
   2. « Notre façon de faire » sans pictogrammes ;
   3. bande photo entre les domaines et les règles.
   ========================================================================== */
.av-parcours__grille { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60em) { .av-parcours__grille { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }

/* Les cinq étapes, en liste légère à filets */
.av-client { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--filet-couleur); }
.av-client > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--filet-couleur); }
.av-client__num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--petrole); font: 500 1.125rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--or); }
.av-client__titre { font: 500 1.375rem / 1.2 var(--f-titre); color: var(--petrole); }
.av-client p { margin-top: 0.3rem; font-size: var(--t-legende); line-height: 1.55; color: var(--encre); }
.av-client__label { margin-right: 0.5rem; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--succes); }
@media (prefers-reduced-motion: no-preference) {
  .js .av-client:not(.est-visible) > li { opacity: 0; }
  .js .av-client.est-visible > li { animation: av-apparait 0.6s var(--ease-sortie) calc(var(--i) * 0.12s) both; }
}

/* La fiche à manipuler, dans un panneau pétrole */
.av-demo {
  display: grid; justify-items: center; gap: 1.25rem; margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem); background: var(--petrole);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--pan)), calc(100% - var(--pan)) 100%, 0 100%);
  box-shadow: var(--ombre-panneau);
}
.av-demo__choix { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 1.6rem; background: rgba(238, 234, 225, 0.1); }
.av-demo__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.av-demo__onglet { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.9375rem; font-weight: 500; color: var(--creme); cursor: pointer; transition: background-color var(--d) var(--ease-sortie), color var(--d) var(--ease-sortie); }
.av-demo__onglet:hover { background: rgba(224, 189, 142, 0.14); }
.av-demo__radio:checked + .av-demo__onglet { background: var(--or); color: var(--petrole-profond); }
.av-demo__radio:focus-visible + .av-demo__onglet { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.av-demo__signal { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 0 rgba(224, 189, 142, 0.7); }
.av-demo__radio:checked + .av-demo__onglet .av-demo__signal { display: none; }
@keyframes av-signal { 0% { box-shadow: 0 0 0 0 rgba(224, 189, 142, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(224, 189, 142, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .av-demo.est-visible .av-demo__signal { animation: av-signal 1.2s ease-out 0.6s 3; }   /* trois battements, puis immobile */
}

.av-fiche {
  width: min(100%, 23rem); overflow: hidden; border-radius: 0.8rem; background: #FFFFFF;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
  font-family: -apple-system, "Helvetica Neue", Arial, var(--f-texte); color: #202124; text-align: left;
}
.av-fiche__photos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2px; height: 7.5rem; }
.av-fiche__photo { background: url("../img/photos/fiche-google-avocat-nice-justicomm-nice.webp") 50% 45% / cover, var(--petrole-600); }
.av-fiche__logo { display: grid; place-items: center; background: var(--petrole-profond); font: 500 2rem / 1 var(--f-titre); letter-spacing: 0.06em; color: var(--or); }
.av-fiche__corps { display: grid; gap: 0.45rem; padding: 0.9rem 1rem 1rem; font-size: 0.8125rem; line-height: 1.4; }
.av-fiche__nom { font-size: 1.25rem; line-height: 1.25; color: #202124; }
.av-fiche__note { display: flex; align-items: center; gap: 0.35rem; color: #4D5156; }
.av-fiche__note b { font-weight: 400; color: #202124; }
.av-fiche__etoiles { letter-spacing: 0.02em; color: #E7A33E; }
.av-fiche__cat { display: flex; align-items: center; color: #4D5156; }
.av-fiche__boutons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; margin: 0.25rem 0; padding: 0.55rem 0; border-block: 1px solid #E8EAED; list-style: none; text-align: center; font-size: 0.6875rem; color: #1A5DAB; }
.av-fiche__boutons li { display: grid; justify-items: center; gap: 0.3rem; }
.av-fiche__boutons span { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #DADCE0; background: radial-gradient(circle, #1A5DAB 0 3px, transparent 4px); }
.av-fiche__ligne { display: flex; align-items: flex-start; gap: 0.6rem; color: #202124; }
.av-fiche__ligne svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; fill: none; stroke: #5F6368; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.av-fiche__ligne small, .av-fiche__avis small { display: block; color: #4D5156; font-size: 0.75rem; }
.av-fiche__ouvert { font-weight: 500; color: #188038; }
.av-fiche__avis { margin-top: 0.2rem; padding-top: 0.6rem; border-top: 1px solid #E8EAED; }
.av-fiche__avis-tete { display: flex; align-items: center; gap: 0.55rem; }
.av-fiche__avatar { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cuivre); font-size: 0.8125rem; font-weight: 600; color: #FFFFFF; }
.av-fiche__lignes { margin-top: 0.45rem; }
.av-fiche__lignes i { display: block; height: 0.45rem; margin-top: 0.35rem; border-radius: 3px; background: #E8EAED; }
.av-fiche__lignes i:last-child { width: 60%; }

/* Repères de l’audit : visibles seulement avec « Ce que relève l’audit » */
.av-cible { margin-inline: -0.4rem; padding: 0.2rem 0.4rem; border-radius: 0.4rem; transition: background-color var(--d) var(--ease-sortie), box-shadow var(--d) var(--ease-sortie); }
.av-repere { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; margin-left: auto; border-radius: 50%; font: 600 0.75rem / 1 var(--f-texte); color: #FFFFFF; transition: opacity 0.3s ease, scale 0.45s var(--ease-sortie); transition-delay: calc(var(--i) * 0.15s); }
.av-repere--ok, .av-demo__n--ok { background: #2E7D4F; }
.av-repere--moyen, .av-demo__n--moyen { background: #9E6116; }
.av-repere--frein, .av-demo__n--frein { background: #B03A2E; }
.av-demo:has(#av-vue-client:checked) .av-repere { opacity: 0; scale: 0.3; transition-delay: 0s; }
.av-demo:has(#av-vue-audit:checked) .av-cible--ok { background: rgba(46, 125, 79, 0.1); box-shadow: inset 3px 0 0 #2E7D4F; }
.av-demo:has(#av-vue-audit:checked) .av-cible--moyen { background: rgba(158, 97, 22, 0.12); box-shadow: inset 3px 0 0 #9E6116; }
.av-demo:has(#av-vue-audit:checked) .av-cible--frein { background: rgba(176, 58, 46, 0.1); box-shadow: inset 3px 0 0 #B03A2E; }

/* Les constats, sous la fiche : flous tant qu’on regarde « comme le client » */
.av-demo__constats { display: grid; gap: 0.7rem; width: min(100%, 30rem); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.5; color: var(--creme-doux); transition: filter 0.4s ease, opacity 0.4s ease; }
.av-demo__constats li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.av-demo__constats b { font-weight: 500; color: var(--creme); }
.av-demo__n { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-top: 0.05rem; border-radius: 50%; font-size: 0.75rem; font-weight: 600; color: #FFFFFF; }
.av-demo:has(#av-vue-client:checked) .av-demo__constats { filter: blur(5px); opacity: 0.45; user-select: none; }
.av-demo__legende { font: italic 500 0.9375rem / 1.3 var(--f-titre); color: var(--creme-doux); }
@media (prefers-reduced-motion: reduce) {
  .av-demo__onglet, .av-cible, .av-repere, .av-demo__constats { transition: none; }
}

/* 2. Notre façon de faire : quatre phrases sur une ligne, sans pictogrammes */
.av-points > li { gap: var(--e-2); }
.av-point__titre { color: var(--or-clair); }

/* 3. Bande photo du milieu (dégradé pendant le chargement) */
.av-respiration {
  position: relative; height: clamp(14rem, 34vw, 30rem); overflow: hidden;
  background:
    radial-gradient(ellipse 50% 80% at 70% 50%, rgba(224, 189, 142, 0.14), transparent 70%),
    linear-gradient(180deg, var(--petrole-profond), var(--petrole));
}
.av-respiration img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
/* Bande photo du milieu : le futur client qui cherche (photo du 24/10/2026) */
.av-respiration { display: block; }
.av-respiration img { object-position: 62% 40%; }
@media (max-width: 47.99em) { .av-respiration { height: clamp(14rem, 60vw, 20rem); } .av-respiration img { object-position: 50% 35%; } }

/* ==========================================================================
   Retouches de Raoudha (24/10/2026) : sa photo au formulaire, appel final sur la partie verte, WhatsApp
   ========================================================================== */
.av-repond { display: flex; align-items: center; gap: 0.9rem; margin-top: var(--e-4); padding: 0.85rem 1rem; background: var(--papier); border-left: 3px solid var(--or); }
.av-repond img { flex: none; width: 3.75rem; height: 3.75rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #FFFDF8, 0 0 0 3px var(--or-400); }
.av-repond__texte { font: italic 500 1.125rem / 1.35 var(--f-titre); color: var(--petrole); }
.av-repond__nom { display: block; margin-top: 0.25rem; font: normal 500 0.8125rem / 1.3 var(--f-texte); letter-spacing: 0.02em; color: var(--taupe); }
.av-haut__tel a + a, .av-haut__tel a[href^="https://wa.me"] { white-space: nowrap; }

/* Appel final : boutons empilés, de même largeur, tous sur la partie verte */
.av-final__actions { flex-direction: column; align-items: stretch; width: min(100%, 23rem); }
.av-final__actions > a { justify-content: center; text-align: center; }
.av-final__actions .btn-direct svg { flex: none; }
@media (min-width: 64em) {
  /* la photo n'occupe que la droite ; le texte et les boutons restent sur le vert */
  .av-final__fond { left: auto; right: 0; width: 58%; object-position: 70% 40%; }
  .av-final::before { background: linear-gradient(90deg, var(--petrole-profond) 0%, var(--petrole-profond) 42%, rgba(6, 42, 43, 0.55) 50%, rgba(6, 42, 43, 0) 64%); }
  .av-final .titre-section { max-width: 13em; }
  .av-final__texte { max-width: 24rem; }
}
@media (max-width: 63.99em) {
  /* téléphone et tablette : la photo en haut, le texte et les boutons dessous, sur le vert */
  .av-final { --h-photo: clamp(18rem, 62vw, 28rem); padding-top: calc(var(--h-photo) - 3rem); padding-bottom: clamp(3rem, 8vw, 4rem); }
  .av-final__fond { left: 0; width: 100%; height: var(--h-photo); object-position: 85% 40%; }
  .av-final::before { background: linear-gradient(180deg, rgba(6, 42, 43, 0) 0, rgba(6, 42, 43, 0.45) calc(var(--h-photo) - 9rem), var(--petrole-profond) calc(var(--h-photo) - 2.5rem)); }
}
.av-form .ct-form { padding: 0; }   /* les champs prennent toute la largeur de la carte */
/* L’encadré « Je vous réponds personnellement » sort du formulaire (Raoudha, 24/10/2026) : il clôt la colonne de texte, à côté du formulaire */
.av-haut__texte .av-repond { margin-top: var(--e-6); background: #FFFDF8; box-shadow: 0 12px 28px -20px rgba(6, 42, 43, 0.35); }

/* ==========================================================================
   Contrôle final par les agents (24/10/2026) : corrections de Pauline, Octave, Capucine
   ========================================================================== */
/* Formulaire : case « Je n’ai pas de site » à sa taille, contour de focus visible ; exemples des champs lisibles (4,92:1) */
.av-form .ct-case input { min-height: 0; }
.av-form .ct-case input:focus-visible { outline: 2px solid var(--petrole); outline-offset: 2px; }
.av-form ::placeholder { color: var(--taupe); opacity: 1; }
/* Trait de balayage animé en translate (plus de décalage de mise en page) */
.av-apercu__balayage { top: 0; bottom: 0; height: auto; background: linear-gradient(180deg, var(--or) 0 2px, transparent 2px); box-shadow: none; }
@keyframes av-balaye { 0% { opacity: 0; translate: 0 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; translate: 0 100%; } }
/* Sceau « Lu » : texte qui ne touche plus le cercle aux petites largeurs */
@media (max-width: 59.99em) { .av-apercu__sceau { width: 5.75rem; height: 5.75rem; padding: 0.7rem; } .av-apercu__sceau small { font-size: 0.5rem; } }
/* Bande du milieu : têtes entières jusqu’à 1 920 px */
@media (min-width: 48em) { .av-respiration img { object-position: 62% 15%; } }
/* Tableau du rapport au téléphone : constat aligné sous son libellé */
@media (max-width: 34.99em) { .av-doc__table tbody td { padding: 0 0 0.75rem 1.55rem; } }
/* Titres de section à 38 px, titre de la FAQ compris ; FAQ aussi espacée que les autres sections */
.av-s .titre-section, .av-final .titre-section, .faq5 .faq5__titre { font-size: clamp(1.875rem, 1.5rem + 0.97vw, 2.375rem); line-height: 1.15; }
.faq5 { padding-block: clamp(3.5rem, 2rem + 3.5vw, 5.5rem); }
/* Appel final : la phrase tient sur une ligne */
@media (min-width: 64em) { .av-final__texte { max-width: min(34rem, 38vw); } }
/* Onglets de la fiche au téléphone : empilés proprement */
@media (max-width: 30em) {
  .av-demo__choix { display: grid; width: 100%; border-radius: 1rem; }
  .av-demo__onglet { justify-content: center; }
}
/* Points de vigilance : exemples et textes alignés d’une carte à l’autre */
@media (min-width: 72em) { .av-vigilances > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; } }
/* Fiche : « Ouvert » lisible sur le fond surligné ; note 4,6 = quatre étoiles et une partielle */
.av-fiche__ouvert { color: #137333; }
.av-fiche__partielle { background: linear-gradient(90deg, #E7A33E 60%, #DADCE0 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ==========================================================================
   Décision de Raoudha (25/10/2026) : sur téléphone et tablette, le titre dès le premier écran.
   Photo réduite en haut ; l’aperçu du rapport passe sous le bouton (copie décorative, une seule visible à la fois).
   ========================================================================== */
.av-apercu--mobile { display: none; }
@media (max-width: 59.99em) {
  .av-bandeau__scene { display: none; }
  .av-bandeau__photo img { aspect-ratio: 16 / 9; max-height: 22rem; object-position: 20% 28%; }
  .av-apercu--mobile { display: block; width: 100%; margin-top: var(--e-6); }
  /* animation lancée quand l’aperçu arrive à l’écran */
  .js .av-apercu--mobile:not(.est-visible) .av-pastille,
  .js .av-apercu--mobile:not(.est-visible) .av-apercu__balayage,
  .js .av-apercu--mobile:not(.est-visible) .av-apercu__priorite,
  .js .av-apercu--mobile:not(.est-visible) .av-apercu__sceau { animation-play-state: paused; }
}
.av-apercu { overflow: hidden; }   /* le sceau agrandi au début de son animation ne déborde jamais (téléphone) */