/* ==========================================================================
   JustiComm · page « Référencement dans les IA (AEO, GEO) »
   v4, 23/10/2026 (Raoudha) : en-tête = une personne (photo à venir) et la fenêtre « Mode IA » qui s'anime ;
   la démonstration « Faites le test » descend dans sa propre section, après « Une question, une réponse ».
   v3, 23/10/2026 (Raoudha : « quelque chose de waouh ») : « la réponse se construit sous vos yeux ».
   Haut de page : démonstration à manipuler (métier, informations dispersées ou cohérentes, réponse écrite mot à mot) ;
   réponse aux rayons X (chaque passage ouvre sa source) ; cinq chantiers racontés au défilement, avec un téléphone fixe
   dont la réponse se répare d'un cran à chaque chantier, et le livrable de chaque chantier.
   Texte 2.1 validé inchangé (site-conception/contenus-v4/visibilite-ia.md). Même esprit que les pages
   Réseaux sociaux, Référencement local et Publicité en ligne ; aucun visuel de l'accueil.
   Animations jouées une fois (la plus longue : 4,6 s), aucune boucle ; état final fixe si « moins d'animations »
   ou sans JavaScript (le sélecteur affiche alors les six professions à la suite).
   Préfixe : via-
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Communs à la page
   -------------------------------------------------------------------------- */
.via .titre-section { max-width: none; font-size: clamp(1.875rem, 1.5rem + 1.1vw, 2.375rem); line-height: 1.12; color: var(--titre); text-wrap: pretty; }
.via-or { font-style: italic; color: var(--or-texte); }
.surface-sombre .via-or, .surface-nuit .via-or { color: var(--or-clair); }
.via.section { padding-block: clamp(3rem, 1.75rem + 3.5vw, 5rem); }   /* plus serré que la valeur commune */
.via-tete { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); text-align: left; }
.via-tete .surtitre { margin-bottom: var(--e-4); }
.via-chapo { margin-top: var(--e-5); font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem) / 1.45 var(--f-titre); color: var(--titre); text-wrap: pretty; }
.surface-nuit .via-chapo, .surface-sombre .via-chapo { color: var(--creme); }
.via-texte { margin: var(--e-4) 0 0; font-size: var(--t-corps); line-height: 1.65; color: var(--encre); text-wrap: pretty; }
.surface-nuit .via-texte, .surface-sombre .via-texte { color: var(--creme-doux); }
.via-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.via-actions .lien-suite { margin-top: 0; }
.via-actions--centre { justify-content: center; }
.via-exergue { margin: clamp(2rem, 4vw, 2.75rem) 0 0; text-align: center; font: italic 500 clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem) / 1.35 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.via-exergue::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto var(--e-4); background: var(--bronze); }
.via mark { padding: 0 2px; border-radius: 3px; background: rgba(224, 189, 142, 0.38); color: inherit; }

@keyframes via-monte { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes via-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes via-pastille { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes via-trace { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes via-frappe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes via-surligne { from { background-color: transparent; } to { background-color: rgba(224, 189, 142, 0.38); } }
@keyframes via-attente { 0% { opacity: 0; height: 0; } 15% { opacity: 1; height: 28px; } 85% { opacity: 1; height: 28px; } 100% { opacity: 0; height: 0; } }
@keyframes via-allume { from { border-color: #E3DED4; box-shadow: 0 1rem 1.6rem -1.1rem rgba(2, 24, 24, 0.45); } to { border-color: var(--or); box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.22), 0 1rem 1.6rem -1.1rem rgba(2, 24, 24, 0.45); } }
@keyframes via-tampon { from { opacity: 0; scale: 1.7; } to { opacity: 1; scale: 1; } }

/* Téléphone (assistant IA générique : ni logo ni écran de marque) */
.via-tel { width: 15rem; padding: 8px; border-radius: 36px; background: linear-gradient(180deg, #263837, #0E1B1B); box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, 0.65), inset 0 0 0 1px #3B4B4A, inset 0 0 0 2px rgba(224, 189, 142, 0.18); }
.via-tel__ecran { position: relative; display: flex; flex-direction: column; min-height: 27rem; overflow: hidden; border-radius: 29px; background: #F7F4EE; }
.via-tel__etat { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 20px 4px; font-size: 0.75rem; color: var(--encre); }
.via-tel__etat b { font-weight: 600; }
.via-tel__etat span { display: flex; gap: 3px; align-items: flex-end; }
.via-tel__etat i { display: block; width: 3px; border-radius: 1px; background: var(--encre); }
.via-tel__etat i:nth-child(1) { height: 5px; } .via-tel__etat i:nth-child(2) { height: 7px; } .via-tel__etat i:nth-child(3) { height: 9px; }
.via-tel__appli { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-bottom: 1px solid #E9E4DA; font-size: 0.875rem; font-weight: 600; color: var(--encre); background: #fff; }
.via-tel__logo { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--petrole); }
.via-tel__logo svg { width: 13px; height: 13px; fill: var(--or); }
.via-tel__fil { flex: 1; display: grid; align-content: start; gap: 10px; padding: 14px 12px; }
.via-tel__saisie { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 12px; padding: 7px 7px 7px 14px; border: 1px solid #E3DED4; border-radius: 999px; background: #fff; font-size: 0.75rem; color: var(--taupe); }
.via-tel__saisie span { width: 24px; height: 24px; border-radius: 50%; background: var(--petrole); }

.via-msg { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--encre); }
.via-msg--moi { justify-self: end; max-width: 86%; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: var(--petrole); color: var(--creme); }
.via-msg--ia { display: grid; gap: 8px; padding: 10px 11px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 0.5rem 1rem -0.75rem rgba(2, 24, 24, 0.4); }
.via-msg--ia > p { margin: 0; }
.via-msg__attente { display: flex; align-items: center; gap: 4px; height: 0; margin: 0; padding-left: 8px; overflow: hidden; opacity: 0; }
.via-msg__attente i { width: 6px; height: 6px; border-radius: 50%; background: var(--taupe); }
.via-msg__lignes { display: grid; gap: 5px; margin: 0; }
.via-msg__lignes i { display: block; height: 6px; border-radius: 3px; background: #E6E1D8; }
.via-msg__lignes i:nth-child(2) { width: 86%; } .via-msg__lignes i:nth-child(3) { width: 64%; }
.via-msg__sources { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.via-msg__sources span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--papier); font-size: 0.6875rem; font-weight: 500; color: var(--encre); }
.via-msg__sources span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or-400); }
.via-fiche { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border: 1.5px solid var(--or); border-radius: 10px; background: #FFFDF8; }
.via-fiche__mono { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--petrole), var(--petrole-600)); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--creme); box-shadow: inset 0 0 0 2px rgba(224, 189, 142, 0.55); }
.via-fiche p { display: grid; margin: 0; line-height: 1.3; }
.via-fiche b { font-size: 0.875rem; font-weight: 600; color: var(--petrole); }
.via-fiche p span { font-size: 0.75rem; color: var(--encre); }

/* Fenêtre de navigateur (pages du site) */
.via-nav__points { display: flex; gap: 5px; }
.via-nav__points i { width: 8px; height: 8px; border-radius: 50%; background: #DDD6CA; }

/* --------------------------------------------------------------------------
   1. Haut de page : fil d'Ariane clair, bandeau pétrole avec ordinateur et téléphone, texte dessous
   -------------------------------------------------------------------------- */
body:has(.via-haut) .entete__fond { opacity: 1; }   /* barre du haut avec son fond dès le départ */
.via-haut { position: relative; padding: var(--h-entete) 0 clamp(2.5rem, 5vw, 4rem); background: var(--papier); }
.via-haut__ariane .via-ariane { margin: 0; padding-block: 0.9rem; }
.via-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--taupe); }
.via-ariane a { color: inherit; text-underline-offset: 3px; }
.via-ariane [aria-current] { color: var(--encre); }

.via-haut__bandeau {
  position: relative; overflow: hidden; padding: clamp(2.5rem, 5vw, 4rem) var(--marge) clamp(2.5rem, 4.5vw, 3.5rem);
  background:
    radial-gradient(ellipse 50% 80% at 70% 20%, rgba(224, 189, 142, 0.18), transparent 70%),
    radial-gradient(ellipse 40% 60% at 10% 100%, rgba(161, 191, 182, 0.12), transparent 70%),
    var(--petrole-900);
}
.via-haut__bandeau::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(224, 189, 142, 0.15) 1px, transparent 1.5px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 55% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 55% 40%, #000, transparent 75%);
}

/* En-tête : photo d'une personne (à venir) et fenêtre « Mode IA » animée une fois (4,8 s) */
.via-haut__scene { position: relative; display: flex; align-items: center; justify-content: center; max-width: 75rem; min-height: clamp(26rem, 36vw, 33rem); margin: 0 auto; }
.via-haut__photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 28%; }
.via-haut__bandeau:has(.via-haut__photo) { padding: 0; }
.via-haut__bandeau:has(.via-haut__photo)::before { z-index: 1; background: linear-gradient(90deg, rgba(2, 24, 24, 0.92) 0%, rgba(2, 24, 24, 0.7) 34%, rgba(2, 24, 24, 0.1) 62%, transparent 75%); -webkit-mask-image: none; mask-image: none; }
.via-haut__bandeau:has(.via-haut__photo) .via-haut__scene { justify-content: flex-start; min-height: clamp(30rem, 40vw, 38rem); max-width: none; padding: clamp(2rem, 4vw, 3rem) max(var(--marge), calc((100% - 75rem) / 2 + var(--marge))); }
.via-modeia { position: relative; z-index: 2; width: min(100%, 31rem); margin: 0; }
.via-modeia__fenetre { overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 2.5rem 4rem -1.5rem rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(224, 189, 142, 0.3); }
.via-modeia__barre { display: flex; align-items: center; gap: 10px; margin: 14px 14px 0; padding: 10px 14px; border: 1px solid #E1DCD2; border-radius: 999px; box-shadow: 0 1px 6px rgba(2, 24, 24, 0.08); font-size: 0.9375rem; color: var(--encre); }
.via-modeia__barre > svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--taupe); stroke-width: 2.2; stroke-linecap: round; }
.via-modeia__requete { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.via-modeia__micro svg { display: block; width: 18px; height: 18px; fill: none; stroke: var(--petrole); stroke-width: 1.8; stroke-linecap: round; }
.via-modeia__onglets { display: flex; gap: 6px; margin: 0; padding: 12px 16px 10px; border-bottom: 1px solid #EEE9E0; font-size: 0.8125rem; color: var(--taupe); }
.via-modeia__onglets span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; }
.via-modeia__onglets .est-actif { background: var(--petrole); font-weight: 600; color: var(--creme); }
.via-modeia__onglets svg { width: 13px; height: 13px; fill: var(--or); }
.via-modeia__fil { display: grid; gap: 10px; padding: 14px 16px 16px; background: #FBF9F5; }
.via-modeia__fil .via-msg--moi { font-size: 0.875rem; }
.via-modeia__reponse { display: grid; gap: 8px; padding: 11px 13px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 0.6rem 1.2rem -0.9rem rgba(2, 24, 24, 0.45); }
.via-modeia__reponse p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--encre); }
.via-modeia__liens { display: flex; flex-wrap: wrap; gap: 6px; }
.via-modeia__liens span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid #E1DCD2; border-radius: 999px; font-size: 0.75rem !important; color: var(--encre); }
.via-modeia__liens i { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--petrole), var(--petrole-600)); }
.via-modeia.est-visible .via-modeia__fenetre { animation: via-monte 0.6s var(--ease-sortie) 0.1s both; }
.via-modeia.est-visible .via-modeia__requete { animation: via-frappe 0.9s steps(28, end) 0.5s both; }
.via-modeia.est-visible .via-modeia__onglets .est-actif { animation: via-pastille 0.35s var(--ease-sortie) 1.4s both; }
.via-modeia.est-visible .via-modeia__q1 { animation: via-monte 0.4s var(--ease-sortie) 1.6s both; }
.via-modeia.est-visible .via-modeia__r1 { animation: via-monte 0.45s var(--ease-sortie) 2.1s both; }
.via-modeia.est-visible .via-modeia__r1 mark { animation: via-surligne 0.5s ease 2.6s both; }
.via-modeia.est-visible .via-modeia__liens { animation: via-apparait 0.35s ease 2.8s both; }
.via-modeia.est-visible .via-modeia__q2 { animation: via-monte 0.4s var(--ease-sortie) 3.4s both; }
.via-modeia.est-visible .via-modeia__r2 { animation: via-monte 0.45s var(--ease-sortie) 4s both; }
@media (max-width: 39.99em) {
  .via-haut__scene { min-height: 0; }
  .via-haut__bandeau:has(.via-haut__photo) .via-haut__scene { display: block; padding: 0; }
  .via-haut__bandeau:has(.via-haut__photo) .via-haut__photo { position: relative; height: auto; aspect-ratio: 4 / 3; object-position: 78% 40%; }
  .via-haut__bandeau:has(.via-haut__photo)::before { display: none; }
  .via-haut__bandeau:has(.via-haut__photo) .via-modeia { width: auto; margin: -3.5rem var(--marge) 1.5rem; }
  .via-modeia__onglets span:nth-child(n+3) { display: none; }
  .via-modeia__q2, .via-modeia__r2 { display: none; }   /* au téléphone : une seule question, le titre arrive plus vite */
  .via-modeia__reponse p { font-size: 0.875rem; }
}

/* Section « Faites le test » : la démonstration, sur fond nuit */
.via-test { background: radial-gradient(ellipse 50% 70% at 80% 30%, rgba(224, 189, 142, 0.14), transparent 70%), var(--petrole-profond); }
.via-test .via-demo { max-width: none; }

/* Démonstration interactive : le métier, la qualité des informations, la réponse de l'assistant */
.via-demo { position: relative; display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; max-width: 64rem; margin: 0 auto; }
@media (min-width: 56em) { .via-demo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.via-demo__commandes { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); align-content: center; }
.via-demo__groupe { min-width: 0; margin: 0; padding: 0; border: 0; }
.via-demo__legende { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; font: italic 500 clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem) / 1.25 var(--f-titre); color: var(--creme); }
.via-demo__legende span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--or); border-radius: 50%; font: 600 0.875rem / 1 var(--f-texte); font-style: normal; color: var(--or-clair); }
.via-demo__metiers { display: flex; flex-wrap: wrap; gap: 8px; }
.via-puce, .via-bascule__choix { position: relative; cursor: pointer; }
.via-puce input, .via-bascule__choix input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.via-puce span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid rgba(224, 189, 142, 0.45); border-radius: 999px; font-size: 0.9375rem; color: var(--creme); transition: background-color 200ms var(--ease-sortie), border-color 200ms var(--ease-sortie), color 200ms var(--ease-sortie), transform 150ms var(--ease-sortie); }
.via-puce:hover span { border-color: var(--or); }
.via-puce:active span { transform: scale(0.97); }
.via-puce input:checked + span { background: var(--or); border-color: var(--or); font-weight: 500; color: var(--petrole-900); }
.via-puce input:focus-visible + span, .via-bascule__choix input:focus-visible + span { outline: 2px solid var(--or-clair); outline-offset: 3px; }
.via-bascule { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid rgba(224, 189, 142, 0.4); border-radius: 999px; background: rgba(238, 234, 225, 0.07); }
.via-bascule__choix span { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 22px; border-radius: 999px; font-size: 1rem; font-weight: 500; color: var(--creme-doux); transition: color 250ms var(--ease-sortie); }
.via-bascule__choix svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.via-bascule__choix input:checked + span { color: #FFF6EC; }
.via-bascule__choix--oui input:checked + span { color: var(--petrole-900); }
.via-bascule__curseur { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: #8A4A28; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5); transition: translate 320ms var(--ease-sortie), background-color 320ms var(--ease-sortie); }
.via-bascule:has(.via-bascule__choix--oui input:checked) .via-bascule__curseur { translate: 100% 0; background: var(--or); }
.via-demo__note { margin: 0; font-size: 0.875rem; font-style: italic; color: var(--creme-doux); }

.via-tel--demo { justify-self: center; width: 18rem; rotate: 2deg; }
.via-tel--demo .via-tel__ecran { min-height: 31rem; }
.via-demo__fil { min-height: 22rem; }
.via-rep { display: none; gap: 10px; }
.via-rep__texte { margin: 0; }
.via-rep__alerte { display: grid; gap: 2px; margin: 0; padding: 7px 10px; border-left: 3px solid #8A4A28; background: #FBF3EE; font-size: 0.8125rem; color: var(--encre); }
.via-rep__alerte s { text-decoration-color: #8A4A28; text-decoration-thickness: 1.5px; }
.via-rep__alerte span { font-size: 0.75rem; font-weight: 600; color: #8A4A28; }
.via-rep__alerte--absent { border: 1.5px dashed #8A4A28; border-radius: 8px; font-size: 0.8125rem; font-style: italic; font-weight: 600; color: #8A4A28; }
/* la réponse affichée suit les deux choix (sans JavaScript : :has() ; avec : attributs posés par le script) */
.via-demo:has([value="av"]:checked):has([value="disperse"]:checked) .via-rep[data-metier="av"][data-etat="disperse"],
.via-demo:has([value="av"]:checked):has([value="coherent"]:checked) .via-rep[data-metier="av"][data-etat="coherent"],
.via-demo:has([value="no"]:checked):has([value="disperse"]:checked) .via-rep[data-metier="no"][data-etat="disperse"],
.via-demo:has([value="no"]:checked):has([value="coherent"]:checked) .via-rep[data-metier="no"][data-etat="coherent"],
.via-demo:has([value="cj"]:checked):has([value="disperse"]:checked) .via-rep[data-metier="cj"][data-etat="disperse"],
.via-demo:has([value="cj"]:checked):has([value="coherent"]:checked) .via-rep[data-metier="cj"][data-etat="coherent"],
.via-demo:has([value="cpi"]:checked):has([value="disperse"]:checked) .via-rep[data-metier="cpi"][data-etat="disperse"],
.via-demo:has([value="cpi"]:checked):has([value="coherent"]:checked) .via-rep[data-metier="cpi"][data-etat="coherent"],
.via-demo:has([value="ec"]:checked):has([value="disperse"]:checked) .via-rep[data-metier="ec"][data-etat="disperse"],
.via-demo:has([value="ec"]:checked):has([value="coherent"]:checked) .via-rep[data-metier="ec"][data-etat="coherent"],
.via-demo:has([value="sy"]:checked):has([value="disperse"]:checked) .via-rep[data-metier="sy"][data-etat="disperse"],
.via-demo:has([value="sy"]:checked):has([value="coherent"]:checked) .via-rep[data-metier="sy"][data-etat="coherent"],
.via-rep.est-active { display: grid; }
@supports not selector(:has(*)) { .via-demo:not(.est-pilote) .via-rep[data-metier="av"][data-etat="disperse"] { display: grid; } }
/* écriture de la réponse (script) : la question, puis les mots un à un, puis la fiche et les sources */
@keyframes via-mot { from { opacity: 0; } to { opacity: 1; } }
.via-mot { animation: via-mot 0.22s ease both; animation-delay: calc(0.55s + var(--i) * 38ms); }
.via-rep.est-ecrit .via-msg--moi { animation: via-monte 0.35s var(--ease-sortie) both; }
.via-rep.est-ecrit .via-msg--ia { animation: via-monte 0.35s var(--ease-sortie) 0.3s both; }
.via-rep.est-ecrit .via-fiche, .via-rep.est-ecrit .via-rep__alerte { animation: via-pastille 0.4s var(--ease-sortie) var(--fin, 1.4s) both; }
.via-rep.est-ecrit .via-msg__sources { animation: via-apparait 0.35s ease calc(var(--fin, 1.4s) + 0.25s) both; }

@media (max-width: 55.99em) {
  .via-demo__commandes { text-align: left; }
  .via-tel--demo { rotate: none; }
}
@media (max-width: 39.99em) {   /* téléphone : démonstration compacte, le titre de la page arrive vite */
  .via-haut__bandeau { padding-block: 1.25rem 1.5rem; }
  .via-demo { gap: 1.25rem; }
  .via-demo__commandes { gap: 0.9rem; }
  .via-demo__legende { margin-bottom: 8px; font-size: 1.0625rem; }
  .via-demo__legende span { width: 24px; height: 24px; font-size: 0.75rem; }
  .via-demo__metiers { gap: 6px; }
  .via-puce span { padding: 6px 12px; font-size: 0.8125rem; }
  .via-bascule { display: grid; }
  .via-bascule__choix span { min-height: 44px; padding: 6px 10px; font-size: 0.9375rem; }
  .via-demo__note { font-size: 0.8125rem; }
  .via-tel--demo { width: 100%; padding: 6px; border-radius: 26px; }
  .via-tel--demo .via-tel__ecran { min-height: 0; border-radius: 21px; }
  .via-tel--demo :is(.via-tel__etat, .via-tel__saisie) { display: none; }
  .via-tel--demo .via-tel__appli { padding: 8px 12px; }
  .via-demo__fil { min-height: 13.5rem; padding: 10px; }
}

/* Texte du haut */
.via-haut__texte { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.via-haut__sur { display: block; font-size: 1rem; letter-spacing: 0.2em; line-height: 1.5; color: var(--texte-doux); }
.via-haut__titre { margin: 0; font: 500 clamp(2rem, 1.4rem + 1.9vw, 3rem) / 1.08 var(--f-titre); color: var(--petrole); text-wrap: pretty; }
.via-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; }
.via-haut__intro { margin-top: var(--e-3); font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.via-engagements { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: clamp(1.75rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--encre); }
.via-engagements li { display: inline-flex; align-items: center; gap: 0.55rem; }
.via-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); }
.via-professions { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: var(--e-3) 0 0; list-style: none; border-top: 1px solid var(--lin); font-size: 0.9375rem; }
.via-professions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--taupe); text-decoration: none; }
.via-professions a:hover, .via-professions a:focus-visible { color: var(--petrole); }

/* En bref : bande légère, cinq réponses côte à côte */
.via-bref { margin-top: clamp(2rem, 4vw, 2.75rem); padding: clamp(1.25rem, 2.5vw, 1.5rem) 0 0; border-top: 1px solid var(--lin); }
.via-bref__titre { margin: 0 0 var(--e-4); font-family: var(--f-texte); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--or-texte); }
.via-bref__liste { display: grid; gap: var(--e-4) var(--gouttiere); margin: 0; }
@media (min-width: 48em) { .via-bref__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .via-bref__liste { grid-template-columns: 1fr 1.25fr 1.5fr 0.7fr 1.3fr; } }
.via-bref__liste > div { padding-left: 14px; border-left: 2px solid var(--or-400); }
.via-bref__liste dt { font: 600 1.125rem / 1.2 var(--f-titre); color: var(--petrole); }
.via-bref__liste dd { margin: 4px 0 0; font-size: 1rem; line-height: 1.5; color: var(--encre); }

/* --------------------------------------------------------------------------
   2. Une question, une réponse, quelques sources
   -------------------------------------------------------------------------- */
.via-bulles { display: grid; gap: 12px var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .via-bulles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .via-bulles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.via-bulle { position: relative; display: flex; align-items: center; gap: 12px; min-height: 3.5rem; padding: 10px 18px 10px 48px; border: 1px solid #DDD5C7; border-radius: 999px; background: #fff; box-shadow: 0 0.75rem 1.5rem -1.25rem rgba(2, 24, 24, 0.45); transition: border-color 200ms var(--ease-sortie), box-shadow 200ms var(--ease-sortie); }
.via-bulle::before {   /* loupe */
  content: ""; position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--or-texte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.via-bulle:hover { border-color: var(--or); box-shadow: 0 0 0 3px rgba(224, 189, 142, 0.25), 0 0.75rem 1.5rem -1.25rem rgba(2, 24, 24, 0.45); }
.via-bulle__texte { font: italic 500 clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem) / 1.35 var(--f-titre); color: var(--petrole); }
@keyframes via-tape-question { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.via-bulles.est-visible .via-bulle { animation: via-monte 0.45s var(--ease-sortie) both; }
.via-bulles.est-visible .via-bulle__texte { animation: via-tape-question 0.8s steps(30, end) both; }
.via-bulles.est-visible .via-bulle:nth-child(1) .via-bulle__texte { animation-delay: 0.25s; }
.via-bulles.est-visible .via-bulle:nth-child(2) { animation-delay: 0.1s; } .via-bulles.est-visible .via-bulle:nth-child(2) .via-bulle__texte { animation-delay: 0.45s; }
.via-bulles.est-visible .via-bulle:nth-child(3) { animation-delay: 0.2s; } .via-bulles.est-visible .via-bulle:nth-child(3) .via-bulle__texte { animation-delay: 0.65s; }
.via-bulles.est-visible .via-bulle:nth-child(4) { animation-delay: 0.3s; } .via-bulles.est-visible .via-bulle:nth-child(4) .via-bulle__texte { animation-delay: 0.85s; }
.via-bulles.est-visible .via-bulle:nth-child(5) { animation-delay: 0.4s; } .via-bulles.est-visible .via-bulle:nth-child(5) .via-bulle__texte { animation-delay: 1.05s; }
.via-bulles.est-visible .via-bulle:nth-child(6) { animation-delay: 0.5s; } .via-bulles.est-visible .via-bulle:nth-child(6) .via-bulle__texte { animation-delay: 1.25s; }

/* Le mécanisme : une réponse, quatre sources numérotées */
.via-meca { margin-top: clamp(2rem, 4vw, 2.75rem); }
.via-meca__texte { margin: 0; font-size: var(--t-corps); line-height: 1.65; color: var(--encre); text-wrap: pretty; }
.via-meca__scene { display: grid; gap: 0; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: 0; border-radius: 18px; background: none; box-shadow: 0 2.5rem 4rem -2.5rem rgba(2, 24, 24, 0.45), 0 0 0 1px #E3DCCF; }

.via-meca__reponse { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); border-radius: 18px 18px 0 0; background: #fff; }
.via-meca__reponse > p:last-child { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem) !important; line-height: 1.8 !important; }
.via-meca__appli { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); }
.via-meca__reponse > p:last-child { margin: 0; font-size: 1.0625rem; line-height: 1.75; color: var(--encre); }
.via-meca__reponse sup { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-left: 2px; border-radius: 50%; background: var(--petrole); font-size: 0.6875rem; font-weight: 600; line-height: 1; vertical-align: super; color: var(--or-clair); }
.via-meca__sources { display: grid; gap: 12px; margin: 0; padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem); border-top: 1px solid #EEE9E0; border-radius: 0 0 18px 18px; background: #FBF9F5; list-style: none; }
.via-meca__sources::before { content: "Sources citées"; grid-column: 1 / -1; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--taupe); }
@media (min-width: 40em) { .via-meca__sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .via-meca__sources { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.via-meca__sources .via-src { align-items: stretch; }
.via-meca__sources .via-src__num { align-self: flex-start; }
.via-src { position: relative; display: flex; align-items: flex-start; gap: 10px; }
.via-src__num { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; margin-top: 10px; border-radius: 50%; background: var(--petrole); font-size: 0.8125rem; font-weight: 600; color: var(--or-clair); }
.via-src__carte { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--or); border-radius: 10px; background: #fff; box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.22), 0 1rem 1.6rem -1.1rem rgba(2, 24, 24, 0.45); }
.via-src__url { margin: 0; font-size: 0.75rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.via-src__titre { margin: 3px 0 0; font-size: 0.9375rem; font-weight: 600; color: var(--petrole); }
.via-src__info { margin: 3px 0 0; font-size: 0.8125rem; color: var(--encre); }
.via-src__info b { font-weight: 600; color: #2F6B4F; }
.via-src__lignes { display: grid; gap: 5px; margin: 7px 0 0; }
.via-src__lignes i { display: block; height: 6px; border-radius: 3px; background: #E6E1D8; }
.via-src__lignes i:nth-child(2) { width: 70%; }
.via-src__carte-plan { position: relative; height: 2.5rem; margin: -2px -4px 6px; border-radius: 6px; background: repeating-linear-gradient(35deg, #E8E2D6 0 2px, transparent 2px 14px), repeating-linear-gradient(-55deg, #E8E2D6 0 2px, transparent 2px 18px), #F3EFE6; }
.via-src__carte-plan i { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -12px 0 0 -7px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--cuivre); }
.via-src__profil { display: flex; align-items: center; gap: 9px; margin: 0; }
.via-src__profil i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #D9CFC0 30%, transparent 32%), radial-gradient(ellipse 60% 45% at 50% 100%, #D9CFC0 60%, transparent 62%), var(--petrole-600); }
.via-src__profil span { display: grid; line-height: 1.25; }
.via-src__profil b { font-size: 0.9375rem; font-weight: 600; color: var(--petrole); }
.via-src__profil small { font-size: 0.75rem; color: var(--taupe); }
/* animation : chaque passage se surligne, sa source s'allume */
.via-meca__scene.est-visible .via-meca__reponse { animation: via-monte 0.6s var(--ease-sortie) 0.1s both; }
.via-meca__scene.est-visible .via-meca__reponse mark { animation: via-surligne 0.5s ease both; }
.via-meca__scene.est-visible .via-meca__reponse mark:nth-of-type(1), .via-meca__scene.est-visible .via-meca__reponse mark:nth-of-type(3) { animation-delay: 0.8s; }
.via-meca__scene.est-visible .via-meca__reponse mark:nth-of-type(2) { animation-delay: 1.4s; }
.via-meca__scene.est-visible .via-meca__reponse mark:nth-of-type(4) { animation-delay: 2s; }
.via-meca__scene.est-visible .via-meca__reponse mark:nth-of-type(5) { animation-delay: 2.6s; }
.via-meca__scene.est-visible .via-src { animation: via-monte 0.5s var(--ease-sortie) both; }
.via-meca__scene.est-visible .via-src__carte { animation: via-allume 0.5s ease both; }
.via-meca__scene.est-visible .via-src:nth-child(1), .via-meca__scene.est-visible .via-src:nth-child(1) .via-src__carte { animation-delay: 0.7s; }
.via-meca__scene.est-visible .via-src:nth-child(2), .via-meca__scene.est-visible .via-src:nth-child(2) .via-src__carte { animation-delay: 1.3s; }
.via-meca__scene.est-visible .via-src:nth-child(3), .via-meca__scene.est-visible .via-src:nth-child(3) .via-src__carte { animation-delay: 1.9s; }
.via-meca__scene.est-visible .via-src:nth-child(4), .via-meca__scene.est-visible .via-src:nth-child(4) .via-src__carte { animation-delay: 2.5s; }

/* La réponse aux rayons X : chaque passage ouvre sa source (script ; sans lui, tout reste visible) */
.via-meca__consigne { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px clamp(1.25rem, 3vw, 2rem); border-radius: 18px 18px 0 0; background: var(--petrole); font-size: 0.9375rem; color: var(--creme); }
.via-meca__consigne + .via-meca__reponse { border-radius: 0; }
.via-meca__consigne svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--or); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.via-passage { padding: 1px 3px; border-radius: 4px; background: rgba(224, 189, 142, 0.38); color: inherit; transition: background-color 200ms var(--ease-sortie), color 200ms var(--ease-sortie), box-shadow 200ms var(--ease-sortie); }
.via-passage[role="button"] { cursor: pointer; }
.via-passage[role="button"]:hover { background: rgba(224, 189, 142, 0.6); color: var(--encre); }
.via-passage[role="button"]:focus-visible { outline: 2px solid var(--petrole); outline-offset: 2px; }
.via-passage[aria-pressed="true"] { background: var(--petrole); color: var(--creme); box-shadow: 0 0 0 3px rgba(224, 189, 142, 0.45); }
.via-passage[aria-pressed="true"] sup { background: var(--or); color: var(--petrole-900); }
.via-src__type { margin: 0 0 4px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-texte); }
.via-src { transition: opacity 250ms var(--ease-sortie), transform 250ms var(--ease-sortie); }
.via-meca__scene[data-actif="1"] .via-src[data-source="1"], .via-meca__scene[data-actif="2"] .via-src[data-source="2"],
.via-meca__scene[data-actif="3"] .via-src[data-source="3"], .via-meca__scene[data-actif="4"] .via-src[data-source="4"] { transform: translateY(-4px); }
.via-meca__scene[data-actif="1"] .via-src[data-source="1"] .via-src__carte, .via-meca__scene[data-actif="2"] .via-src[data-source="2"] .via-src__carte,
.via-meca__scene[data-actif="3"] .via-src[data-source="3"] .via-src__carte, .via-meca__scene[data-actif="4"] .via-src[data-source="4"] .via-src__carte { border-color: var(--petrole); box-shadow: 0 0 0 4px rgba(224, 189, 142, 0.55), 0 1.5rem 2.25rem -1.1rem rgba(2, 24, 24, 0.55); }
.via-meca__scene[data-actif="1"] .via-src[data-source="1"] .via-src__num, .via-meca__scene[data-actif="2"] .via-src[data-source="2"] .via-src__num,
.via-meca__scene[data-actif="3"] .via-src[data-source="3"] .via-src__num, .via-meca__scene[data-actif="4"] .via-src[data-source="4"] .via-src__num { background: var(--or); color: var(--petrole-900); }

/* Absent, mal décrit : deux réponses */
.via-cas { display: grid; gap: var(--gouttiere); margin-top: clamp(2rem, 4vw, 2.75rem); }
@media (min-width: 48em) { .via-cas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.via-cas__carte { padding: 12px 12px clamp(1.25rem, 2.5vw, 1.5rem); background: #fff; border: 1px solid var(--lin); border-radius: 10px; box-shadow: 0 1.5rem 2.5rem -2rem rgba(2, 24, 24, 0.4); }
.via-cas__scene { display: grid; place-items: center; min-height: 15rem; padding: 1.25rem; border-radius: 6px; background: linear-gradient(180deg, #ECE7DD, #E2DBCE); }
.via-mini { display: grid; gap: 10px; width: min(100%, 20rem); }
.via-mini__q { justify-self: end; max-width: 90%; margin: 0; padding: 8px 13px; border-radius: 16px 16px 4px 16px; background: var(--petrole); font-size: 0.875rem; color: var(--creme); }
.via-mini__r { display: grid; gap: 8px; padding: 12px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 1rem 1.5rem -1rem rgba(2, 24, 24, 0.5); }
.via-mini__nom { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--petrole); }
.via-mini__nom i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; background: #E9E4DA; font-size: 0.6875rem; font-style: normal; font-weight: 600; color: var(--encre); }
.via-mini__absent { margin: 0; padding: 8px 10px; border: 1.5px dashed var(--taupe); border-radius: 8px; background: #FAF8F4; font-size: 0.875rem; font-style: italic; color: #57514B; }
.via-mini__faux { display: grid; gap: 2px; margin: 0; padding: 6px 10px; border-left: 3px solid #8A4A28; background: #FBF3EE; font-size: 0.875rem; color: var(--encre); }
.via-mini__faux s { text-decoration-color: #8A4A28; text-decoration-thickness: 1.5px; }
.via-mini__faux span { font-size: 0.75rem; font-weight: 600; color: #8A4A28; }
.via-cas__texte { margin: var(--e-4) clamp(0.25rem, 1vw, 0.75rem) 0; font-size: var(--t-corps); line-height: 1.6; color: var(--encre); }
.via-cas__texte b { display: block; margin-bottom: 4px; font: 600 1.375rem / 1.25 var(--f-titre); color: var(--petrole); }
.via-cas.est-visible .via-mini__q { animation: via-monte 0.45s var(--ease-sortie) 0.1s both; }
.via-cas.est-visible .via-mini__r { animation: via-monte 0.5s var(--ease-sortie) 0.5s both; }
.via-cas.est-visible .via-mini__absent, .via-cas.est-visible .via-mini__faux { animation: via-pastille 0.45s var(--ease-sortie) 1.1s both; }
.via-cas.est-visible .via-mini__faux + .via-mini__faux { animation-delay: 1.4s; }

/* --------------------------------------------------------------------------
   3. Cinq chantiers, en récit : un téléphone fixe, la réponse se répare d'un cran à chaque chantier
   (script : data-etat 0 à 5 selon le défilement ; sans script ni « moins d'animations » : état final)
   -------------------------------------------------------------------------- */
.via-recit { display: grid; gap: 2rem; }
@media (min-width: 60em) {
  .via-recit { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .via-recit__scene { position: sticky; top: calc(var(--h-entete) + 2.5rem); }
}
.via-tel--recit { width: 17.5rem; margin: 0 auto; }
.via-tel--recit .via-tel__ecran { min-height: 32rem; }
.via-recit__statut { margin: 12px 12px 0; }
.via-st { display: none; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--petrole); font-size: 0.8125rem; font-weight: 600; color: var(--or-clair); }
.via-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.via-st--0 { background: #FBF3EE; color: #8A4A28; box-shadow: inset 0 0 0 1px #E4C3AE; }
.via-recit:not([data-etat]) .via-st--5, .via-recit[data-etat="0"] .via-st--0, .via-recit[data-etat="1"] .via-st--1, .via-recit[data-etat="2"] .via-st--2,
.via-recit[data-etat="3"] .via-st--3, .via-recit[data-etat="4"] .via-st--4, .via-recit[data-etat="5"] .via-st--5 { display: inline-flex; animation: via-pastille 0.35s var(--ease-sortie) both; }
.via-r0, .via-r1-faux { display: none; }
.via-recit[data-etat="0"] .via-r0 { display: block; }
.via-recit[data-etat="1"] .via-r1-faux { display: grid; }
.via-recit[data-etat="0"] :is(.via-r1, .via-r2, .via-r3, .via-r4, .via-r5),
.via-recit[data-etat="1"] :is(.via-r2, .via-r3, .via-r4, .via-r5),
.via-recit[data-etat="2"] :is(.via-r3, .via-r4, .via-r5),
.via-recit[data-etat="3"] :is(.via-r4, .via-r5),
.via-recit[data-etat="4"] .via-r5 { display: none; }
.via-recit[data-etat] .via-r { animation: via-monte 0.45s var(--ease-sortie) both; }
.via-r1-faux { gap: 2px; margin: 0; padding: 6px 10px; border-left: 3px solid #8A4A28; background: #FBF3EE; font-size: 0.8125rem; }
.via-r1-faux s { text-decoration-color: #8A4A28; }
.via-r1-faux span { font-size: 0.75rem; font-weight: 600; color: #8A4A28; }
.via-recit__robot { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 11px; border-radius: 8px; background: #EAF3EE; font-size: 0.75rem; font-weight: 600; color: #2F6B4F; }
.via-recit__robot i { width: 8px; height: 8px; border-radius: 50%; background: #2F6B4F; box-shadow: 0 0 0 3px rgba(47, 107, 79, 0.2); }
.via-recit__releve { position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 11px 13px; border: 1.5px solid var(--or); border-radius: 12px; background: #FFFDF8; box-shadow: 0 1rem 1.75rem -1rem rgba(2, 24, 24, 0.55); }
.via-recit__releve-titre { margin: 0 0 7px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or-texte); }
.via-recit__releve-cas { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.via-recit__releve-cas span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--papier); font-size: 0.75rem; color: var(--encre); }
.via-recit__releve-cas .oui { background: var(--petrole); color: var(--creme); }
.via-recit__releve-cas .oui::before { content: "✓"; font-size: 0.6875rem; color: var(--or); }

.via-recit__etapes { display: grid; gap: clamp(2.5rem, 6vw, 4rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 60em) { .via-etape-r { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; } }
.via-chantier__num { display: block; font: 600 2.5rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: transparent; -webkit-text-stroke: 1px var(--or-texte); transition: color 300ms var(--ease-sortie); }
.via-etape-r.est-courante .via-chantier__num { color: var(--or-texte); }
.via-chantier__titre { margin: var(--e-3) 0 0; font: 500 clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem) / 1.2 var(--f-titre); color: var(--petrole); }
.via-etape-r__texte p { margin: var(--e-4) 0 0; font-size: var(--t-corps); line-height: 1.65; color: var(--encre); text-wrap: pretty; }
.via-livrable {
  display: grid; place-items: center; margin: clamp(1.5rem, 3vw, 2rem) 0 0; padding: clamp(1.25rem, 3.5vw, 2.25rem); overflow: hidden; border-radius: 10px;
  background: radial-gradient(ellipse 65% 70% at 50% 40%, rgba(255, 255, 255, 0.75), transparent 70%), linear-gradient(180deg, #ECE7DD, #E0D9CC);
}
.via-livrable.est-visible > * { animation: via-monte 0.7s var(--ease-sortie) 0.15s both; }

@media (max-width: 59.99em) {   /* téléphone et tablette : la réponse devient une carte collée en haut de l'écran */
  .via-recit__scene { position: sticky; top: calc(var(--h-entete) + 8px); z-index: 5; }
  .via-tel--recit { width: 100%; max-width: 30rem; padding: 0; border-radius: 16px; background: none; box-shadow: 0 1rem 2rem -1rem rgba(2, 24, 24, 0.55); }
  .via-tel--recit .via-tel__ecran { min-height: 0; border: 1px solid var(--lin); border-radius: 16px; }
  .via-tel--recit :is(.via-tel__etat, .via-tel__appli, .via-msg--moi) { display: none; }
  .via-tel--recit .via-tel__fil { gap: 8px; padding: 10px 12px 12px; }
  .via-tel--recit .via-fiche p span:last-child { display: none; }
  .via-recit__statut { margin: 10px 12px 0; }
  .via-recit__releve { position: static; margin: 0 12px 12px; }
}

/* 01 : la page du site qui répond */
.via-nav { width: min(100%, 31rem); overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 2rem 3rem -1.75rem rgba(2, 24, 24, 0.55); }
.via-nav__barre { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 12px; border-bottom: 1px solid #EEE9E0; background: #F7F4EE; }
.via-nav__url { flex: 1; min-width: 0; padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 0.75rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.via-nav__page { padding: 14px 18px 16px; }
.via-nav__site { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #EEE9E0; font-size: 0.75rem; color: var(--taupe); }
.via-nav__site b { margin-right: auto; font: 600 1rem / 1 var(--f-titre); color: var(--petrole); }
.via-nav__ariane { margin: 0; font-size: 0.75rem; color: var(--taupe); }
.via-nav__h { margin: 4px 0 10px; font: 600 1.25rem / 1.2 var(--f-titre); color: var(--petrole); }
.via-nav__essentiel, .via-nav__detail { display: grid; gap: 5px; }
.via-nav__essentiel { padding: 9px 11px; border-left: 3px solid var(--or-400); border-radius: 0 6px 6px 0; background: #FBF7EF; }
.via-nav__detail { margin-top: 10px; padding: 0 11px; }
.via-nav__essentiel small, .via-nav__detail small { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-texte); }
.via-nav__detail small { color: var(--taupe); }
.via-nav__essentiel i, .via-nav__detail i { display: block; height: 7px; border-radius: 4px; background: #E3DDD2; transform-origin: left center; }
.via-nav__essentiel i:nth-of-type(2), .via-nav__detail i:nth-of-type(3) { width: 72%; }
.via-nav__pied { display: flex; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding-top: 9px; border-top: 1px solid #EEE9E0; font-size: 0.6875rem; color: var(--taupe); }
.via-livrable.est-visible .via-nav__essentiel i { animation: via-trace 0.5s var(--ease-sortie) 0.8s both; }
.via-livrable.est-visible .via-nav__detail i { animation: via-trace 0.5s var(--ease-sortie) 1.1s both; }

/* 02 : les mêmes informations partout */
.via-ident { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 31rem); }
.via-ident__carte { position: relative; min-width: 0; padding: 12px 36px 12px 13px; border-radius: 10px; background: #fff; box-shadow: 0 1.25rem 2rem -1.25rem rgba(2, 24, 24, 0.5); }
.via-ident__ou { margin: 0 0 4px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }
.via-ident__nom { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--petrole); }
.via-ident__info { margin: 3px 0 0; font-size: 0.75rem; line-height: 1.4; color: var(--encre); }
.via-ident__ban { height: 1.6rem; margin: -12px -36px 8px -13px; border-radius: 10px 10px 0 0; background: linear-gradient(120deg, var(--petrole), var(--petrole-600) 60%, var(--or-400)); }
.via-ident__carte--code { background: #13201F; }
.via-ident__carte--code .via-ident__ou { color: var(--or-clair); }
.via-ident__carte--code pre { margin: 0; font: 0.75rem / 1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; color: #CFE0DA; }
.via-ident__ok { position: absolute; right: 11px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--petrole); }
.via-ident__carte--code .via-ident__ok { background: var(--or); }
.via-ident__ok::after { content: ""; position: absolute; left: 6px; top: 3.5px; width: 4px; height: 8px; border: solid var(--or); border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
.via-ident__carte--code .via-ident__ok::after { border-color: var(--petrole-900); }
.via-livrable.est-visible .via-ident { animation: none; }
.via-livrable.est-visible .via-ident__carte { animation: via-monte 0.5s var(--ease-sortie) both; }
.via-livrable.est-visible .via-ident__carte:nth-child(2) { animation-delay: 0.15s; }
.via-livrable.est-visible .via-ident__carte:nth-child(3) { animation-delay: 0.3s; }
.via-livrable.est-visible .via-ident__carte:nth-child(4) { animation-delay: 0.45s; }
.via-livrable.est-visible .via-ident__ok { animation: via-pastille 0.4s var(--ease-sortie) both; }
.via-livrable.est-visible .via-ident__carte:nth-child(1) .via-ident__ok { animation-delay: 1s; }
.via-livrable.est-visible .via-ident__carte:nth-child(2) .via-ident__ok { animation-delay: 1.2s; }
.via-livrable.est-visible .via-ident__carte:nth-child(3) .via-ident__ok { animation-delay: 1.4s; }
.via-livrable.est-visible .via-ident__carte:nth-child(4) .via-ident__ok { animation-delay: 1.6s; }

/* 03 : une tribune et deux mentions */
.via-presse { position: relative; width: min(100%, 31rem); padding-bottom: 6rem; }
.via-presse__article { padding: 16px 18px 18px; border-radius: 4px; background: #FFFDF8; box-shadow: 0 2rem 3rem -1.75rem rgba(2, 24, 24, 0.55); rotate: -1deg; }
.via-presse__titre-journal { margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--encre); font: 700 1.0625rem / 1 var(--f-titre); letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre); }
.via-presse__rubrique { margin: 9px 0 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8A4A28; }
.via-presse__h { margin: 4px 0 0; font: 600 1.25rem / 1.2 var(--f-titre); color: var(--encre); }
.via-presse__auteur { margin: 8px 0 0; font-size: 0.8125rem; color: var(--encre); }
.via-presse__lignes { display: grid; gap: 5px; margin: 10px 0 0; }
.via-presse__lignes i { display: block; height: 6px; border-radius: 3px; background: #E6E1D8; }
.via-presse__lignes i:nth-child(3) { width: 60%; }
.via-presse__carte { position: absolute; bottom: 0; width: 58%; padding: 10px 13px; border-radius: 10px; background: #fff; box-shadow: 0 1.25rem 2rem -1.1rem rgba(2, 24, 24, 0.55); }
.via-presse__carte p { margin: 0; font-size: 0.8125rem; color: var(--encre); }
.via-presse__carte .via-presse__ou { margin-bottom: 3px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); }
.via-presse__carte--partenaire { left: -0.5rem; rotate: -2deg; }
.via-presse__carte--annuaire { right: -0.5rem; bottom: 2.75rem; rotate: 2deg; }
.via-livrable.est-visible .via-presse { animation: none; }
.via-livrable.est-visible .via-presse__article { animation: via-monte 0.6s var(--ease-sortie) 0.1s both; }
.via-livrable.est-visible .via-presse__carte { animation: via-monte 0.5s var(--ease-sortie) 0.6s both; }
.via-livrable.est-visible .via-presse__carte--annuaire { animation-delay: 0.85s; }
.via-livrable.est-visible .via-presse mark { animation: via-surligne 0.5s ease 1.3s both; }

/* 04 : le fichier robots.txt */
.via-code { width: min(100%, 31rem); overflow: hidden; border-radius: 10px; background: #13201F; box-shadow: 0 2rem 3rem -1.75rem rgba(2, 24, 24, 0.7); }
.via-code__barre { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 12px; background: #1C2C2B; font-size: 0.75rem; color: #A8B8B3; }
.via-code__barre .via-nav__points i { background: #3A4D4B; }
.via-code__texte { margin: 0; padding: 14px 18px; font: 0.8125rem / 1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; color: #E6ECE9; }
.via-code__com { color: #9DB3AD; }
.via-code__cle { color: var(--or-clair); }
.via-code__oui { color: #9FD9B8; }
.via-code__choix { color: #F0B48C; }
.via-code__etats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0 18px 16px; }
.via-code__etat { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px dashed #F0B48C; border-radius: 999px; font-size: 0.75rem; color: #F0B48C; }
.via-code__etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.via-code__etat--ouvert { border-style: solid; border-color: #9FD9B8; color: #9FD9B8; }

/* 05 : le relevé mensuel */
.via-releve { width: min(100%, 30rem); padding: clamp(1.1rem, 2.5vw, 1.5rem); border-radius: 4px; background: #fff; box-shadow: 0 2rem 3rem -1.75rem rgba(2, 24, 24, 0.5), 0 0 0 1px var(--lin); rotate: 1deg; }
.via-releve__entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-bottom: 10px; border-bottom: 2px solid var(--petrole); }
.via-releve__logo { width: 8.5rem; height: auto; }
.via-releve__titre { display: grid; margin: 0; text-align: right; line-height: 1.2; }
.via-releve__titre span { font: 600 1.125rem / 1.1 var(--f-titre); color: var(--petrole); }
.via-releve__titre small { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or-texte); }
.via-releve__table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 0.8125rem; }
.via-releve__table thead th { padding: 6px 6px; border-bottom: 1px solid var(--lin); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--taupe); }
.via-releve__table thead th:first-child, .via-releve__table tbody th { text-align: left; }
.via-releve__table tbody th { padding: 6px; border-top: 1px solid #F1EDE5; font-weight: 500; color: var(--encre); }
.via-releve__table td { position: relative; height: 1.75rem; border-top: 1px solid #F1EDE5; }
.via-releve__table td::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #CFC7B8; }
.via-releve__table td.o::after { background: var(--petrole); box-shadow: inset 0 0 0 2px var(--or-400); }
.via-releve__alerte { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 7px 10px; border-left: 3px solid #8A4A28; background: #FBF3EE; font-size: 0.8125rem; color: var(--encre); }
.via-releve__alerte b { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8A4A28; }
.via-releve__pied { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--lin); font-size: 0.6875rem; color: var(--taupe); }
.via-livrable.est-visible .via-releve__table td.o::after { animation: via-pastille 0.35s var(--ease-sortie) both; }
.via-livrable.est-visible .via-releve__table tr:nth-child(1) td.o::after { animation-delay: 0.7s; }
.via-livrable.est-visible .via-releve__table tr:nth-child(2) td.o::after { animation-delay: 0.85s; }
.via-livrable.est-visible .via-releve__table tr:nth-child(3) td.o::after { animation-delay: 1s; }
.via-livrable.est-visible .via-releve__table tr:nth-child(5) td.o::after { animation-delay: 1.15s; }
.via-livrable.est-visible .via-releve__table tr:nth-child(6) td.o::after { animation-delay: 1.3s; }
.via-livrable.est-visible .via-releve__alerte { animation: via-monte 0.45s var(--ease-sortie) 1.6s both; }

/* --------------------------------------------------------------------------
   4. Par profession : six cartes, la question de chaque public
   -------------------------------------------------------------------------- */
.via-metiers__grille { display: grid; gap: var(--gouttiere); }
@media (min-width: 40em) { .via-metiers__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .via-metiers__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.via-metier { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: #fff; border: 1px solid var(--lin); border-top: 2px solid var(--or-400); border-radius: 4px 4px 8px 8px; transition: translate 200ms var(--ease-sortie), box-shadow 200ms var(--ease-sortie); }
.via-metier:hover { translate: 0 -3px; box-shadow: 0 1.5rem 2.25rem -1.75rem rgba(2, 24, 24, 0.45); }
.via-metier__nom { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); }
.via-metier__nom a { color: var(--petrole); text-decoration: none; }
.via-metier__nom a:hover, .via-metier__nom a:focus-visible { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }
.via-metier__question { align-self: flex-start; margin: var(--e-4) 0 0; padding: 9px 14px; border-radius: 14px 14px 14px 4px; background: var(--papier); font: italic 500 1.1875rem / 1.35 var(--f-titre); color: var(--petrole); }
.via-metier__texte { margin: var(--e-4) 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--encre); }

/* --------------------------------------------------------------------------
   5. Mesurer, ne pas promettre (fond nuit)
   -------------------------------------------------------------------------- */
.via-mesure { background: radial-gradient(ellipse 60% 60% at 85% 10%, rgba(224, 189, 142, 0.12), transparent 70%), var(--petrole-profond); }
.via-mesure__grille { display: grid; gap: var(--gouttiere); }
@media (min-width: 48em) { .via-mesure__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.via-colonne { padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 8px; }
.via-colonne--oui { border: 1px solid rgba(224, 189, 142, 0.35); border-top: 2px solid var(--or); background: rgba(238, 234, 225, 0.05); }
.via-colonne--non { border: 1px dashed rgba(192, 199, 192, 0.45); }
.via-colonne__titre { margin: 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem) / 1.2 var(--f-titre); color: var(--creme); }
.via-colonne__liste { display: grid; gap: var(--e-4); margin: var(--e-5) 0 0; padding: 0; list-style: none; }
.via-colonne__liste li { position: relative; padding-left: 2.25rem; font-size: var(--t-corps); line-height: 1.55; color: var(--creme); }
.via-colonne__liste li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.4rem; height: 1.4rem; border-radius: 50%; }
.via-colonne__liste li::after { content: ""; position: absolute; }
.via-colonne--oui li::before { background: var(--or); }
.via-colonne--oui li::after { left: 0.5rem; top: calc(0.15em + 0.3rem); width: 0.35rem; height: 0.65rem; border: solid var(--petrole-profond); border-width: 0 2px 2px 0; rotate: 45deg; }
.via-colonne--non li { color: var(--creme-doux); }
.via-colonne--non li::before { box-shadow: inset 0 0 0 1.5px var(--creme-doux); }
.via-colonne--non li::after { left: 0.35rem; top: calc(0.15em + 0.65rem); width: 0.7rem; height: 1.5px; background: var(--creme-doux); }
.via-encadre { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem); text-align: center; border: 1px solid var(--or); outline: 1px solid rgba(224, 189, 142, 0.35); outline-offset: 6px; }
.via-encadre__texte { margin: 0 0 var(--e-5); font: 500 clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem) / 1.35 var(--f-titre); color: var(--creme); text-wrap: pretty; }
.via-encadre__texte em { display: block; margin-top: 4px; color: var(--or-clair); }

/* --------------------------------------------------------------------------
   6. Trois portes, chacune avec son écran
   -------------------------------------------------------------------------- */
.via-portes__liste { display: grid; gap: var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 56em) { .via-portes__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.via-porte { display: flex; flex-direction: column; padding: 12px 12px clamp(1.25rem, 2.5vw, 1.75rem); background: #fff; border: 1px solid var(--lin); border-radius: 10px; box-shadow: 0 1.5rem 2.5rem -2rem rgba(2, 24, 24, 0.4); }
.via-porte__visuel { position: relative; display: grid; place-items: center; height: 10rem; padding: 1rem; overflow: hidden; border-radius: 6px; background: linear-gradient(180deg, #ECE7DD, #E2DBCE); }
.via-porte__resultat { width: 100%; max-width: 17rem; padding: 10px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1rem 1.5rem -1rem rgba(2, 24, 24, 0.5); }
.via-porte__url { margin: 0; font-size: 0.75rem; color: var(--taupe); }
.via-porte__lien-bleu { margin: 3px 0 6px; font-size: 0.875rem; font-weight: 600; color: #1F4E8C; }
.via-porte__lignes { display: grid; gap: 5px; margin: 0; }
.via-porte__lignes i { display: block; height: 6px; border-radius: 3px; background: #E6E1D8; }
.via-porte__lignes i:nth-child(2) { width: 70%; }
.via-porte__visuel--carte { background: repeating-linear-gradient(35deg, #E3DCCF 0 3px, transparent 3px 26px), repeating-linear-gradient(-55deg, #E3DCCF 0 3px, transparent 3px 34px), #EFEAE0; }
.via-porte__repere { position: absolute; left: 38%; top: 30%; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--cuivre); box-shadow: 0 0 0 6px rgba(176, 99, 57, 0.18); }
.via-porte__fiche { position: absolute; right: 1rem; bottom: 1rem; display: grid; padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1rem 1.5rem -1rem rgba(2, 24, 24, 0.5); line-height: 1.3; }
.via-porte__fiche b { font-size: 0.875rem; color: var(--petrole); }
.via-porte__fiche span { font-size: 0.75rem; color: var(--encre); }
.via-porte__visuel--ia { align-content: center; gap: 8px; place-items: stretch; background: #F7F4EE; }
.via-porte__visuel--ia .via-msg { font-size: 0.8125rem; }
.via-msg--court { display: block; justify-self: start; max-width: 90%; }
.via-porte__quoi { flex: 1; margin: var(--e-4) clamp(0.25rem, 1vw, 0.75rem) 0; font: 500 clamp(1.25rem, 1.15rem + 0.35vw, 1.4375rem) / 1.3 var(--f-titre); color: var(--petrole); }
.via-porte__lien { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: var(--e-3) clamp(0.25rem, 1vw, 0.75rem) 0; font-size: 1rem; font-weight: 500; color: var(--petrole); text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: 4px; }
.via-porte__lien svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--d) var(--ease-sortie); }
.via-porte__lien:hover svg { translate: 4px 0; }
.via-porte--ici { background: var(--petrole); border-color: var(--petrole); }
.via-porte--ici .via-porte__quoi { color: var(--creme); }
.via-porte__lien--ici { color: var(--or-clair); text-decoration: none; }
.via-porte__lien--ici span { margin-left: 4px; font-style: italic; color: var(--creme-doux); }

/* --------------------------------------------------------------------------
   7. De l'audit au relevé : quatre étapes reliées
   -------------------------------------------------------------------------- */
.via-etapes__liste { position: relative; display: grid; gap: clamp(1.75rem, 3vw, 2.25rem) var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .via-etapes__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) {
  .via-etapes__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .via-etapes__liste::before { content: ""; position: absolute; left: 1.5rem; right: calc((100% - 3 * var(--gouttiere)) / 4 - 1.5rem); top: 1.5rem; height: 1px; background: var(--or-400); transform-origin: left center; }
  .via-etapes__liste.est-visible::before { animation: via-trace 1.2s var(--ease-douce) 0.2s both; }
}
.via-etape { position: relative; }
.via-etape__num { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--petrole); font: 600 1.25rem / 1 var(--f-titre); font-variant-numeric: lining-nums; color: var(--or-clair); box-shadow: 0 0 0 6px var(--fond, var(--creme)); }
.via-etape__titre { margin: var(--e-4) 0 0; font: 500 clamp(1.375rem, 1.25rem + 0.4vw, 1.5625rem) / 1.2 var(--f-titre); color: var(--petrole); }
.via-etape p { margin: var(--e-3) 0 0; font-size: 1.0625rem; line-height: 1.65; color: var(--encre); text-wrap: pretty; }
.via-etapes__liste.est-visible .via-etape { animation: via-monte 0.6s var(--ease-sortie) both; }
.via-etapes__liste.est-visible .via-etape:nth-child(2) { animation-delay: 0.3s; }
.via-etapes__liste.est-visible .via-etape:nth-child(3) { animation-delay: 0.6s; }
.via-etapes__liste.est-visible .via-etape:nth-child(4) { animation-delay: 0.9s; }

/* --------------------------------------------------------------------------
   8. Tarif (fond sombre) : texte et deux billets
   -------------------------------------------------------------------------- */
.via-tarif__grille { display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: center; }
@media (min-width: 60em) { .via-tarif__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.via-tarif .via-texte { color: var(--creme); }
.via-billets { position: relative; display: grid; gap: var(--e-5); justify-items: center; }
.via-billet { position: relative; width: min(100%, 23rem); padding: 1.4rem 1.6rem 1.5rem; border-radius: 10px; background: #FFFDF8; box-shadow: 0 2rem 3rem -1.5rem rgba(0, 0, 0, 0.55); color: var(--encre); }
.via-billet::before, .via-billet::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--petrole); }
.via-billet::before { left: -11px; }
.via-billet::after { right: -11px; }
.via-billet--audit { rotate: -2deg; border-top: 4px solid var(--or-400); }
.via-billet + .via-billet { rotate: 1.5deg; }
.via-billet__quoi { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-texte); }
.via-billet__prix { margin: 6px 0 0; font: italic 600 clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem) / 1.1 var(--f-titre); color: var(--petrole); }
.via-billet__detail { margin: 8px 0 0; font-size: 0.9375rem; color: var(--taupe); }
.via-billet__tampon { position: absolute; right: 1.1rem; top: 1.1rem; padding: 5px 10px; rotate: 8deg; border: 2.5px solid #8A4A28; border-radius: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8A4A28; }
.via-billet__facteurs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.via-billet__facteurs li { padding: 4px 11px; border-radius: 999px; background: var(--papier); font-size: 0.8125rem; color: var(--encre); }
.via-billets__trio { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: var(--e-2) 0 0; font-size: 0.875rem; color: var(--creme); }
.via-billets__trio span { padding: 4px 12px; border: 1px solid var(--or); border-radius: 999px; }
.via-billets__trio b { flex-basis: 100%; margin-top: 4px; font: italic 500 1.125rem / 1.3 var(--f-titre); text-align: center; color: var(--or-clair); }
.via-billets.est-visible .via-billet { animation: via-monte 0.6s var(--ease-sortie) both; }
.via-billets.est-visible .via-billet + .via-billet { animation-delay: 0.25s; }
.via-billets.est-visible .via-billet__tampon { animation: via-tampon 0.45s var(--ease-sortie) 1s both; }
.via-billets.est-visible .via-billets__trio { animation: via-apparait 0.6s ease 1.3s both; }

/* --------------------------------------------------------------------------
   9. FAQ (faq-v5.css)
   -------------------------------------------------------------------------- */
.via.faq5 .faq5__reponse a { color: var(--petrole); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. L'agence : trois engagements
   -------------------------------------------------------------------------- */
.via-promesses { display: grid; gap: var(--gouttiere); margin: 0; padding: 0; list-style: none; }
@media (min-width: 56em) { .via-promesses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.via-promesse { padding: clamp(1.5rem, 3vw, 2rem); background: #fff; border: 1px solid var(--lin); border-top: 2px solid var(--or-400); border-radius: 2px 2px 8px 8px; box-shadow: 0 1.25rem 2rem -1.75rem rgba(2, 24, 24, 0.35); }
.via-promesse__picto { width: 44px; height: 44px; fill: none; stroke: var(--petrole); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.via-promesse p { margin: var(--e-4) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--encre); text-wrap: pretty; }
.via-maj { margin: clamp(2rem, 4vw, 2.75rem) 0 0; font-size: 0.875rem; font-style: italic; color: var(--taupe); }

/* --------------------------------------------------------------------------
   Respirations : deux photos pleine largeur entre les sections (léger dézoom à l'arrivée)
   -------------------------------------------------------------------------- */
.via-respiration { position: relative; height: clamp(15rem, 34vw, 30rem); margin: 0; overflow: hidden; background: var(--petrole-900); }
.via-respiration__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease-sortie); }
.via-respiration--cabinet .via-respiration__img { object-position: 62% 32%; }
.via-respiration--terrasse .via-respiration__img { object-position: 66% 34%; }
.js .via-respiration[data-reveal]:not(.est-visible) .via-respiration__img { scale: 1.06; }

/* --------------------------------------------------------------------------
   11. Appel final (fond nuit, téléphone à droite ; emplacement photo prévu)
   -------------------------------------------------------------------------- */
.via-final { position: relative; overflow: hidden; padding-block: clamp(5rem, 10vw, 7.5rem); background: radial-gradient(ellipse 45% 70% at 80% 50%, rgba(224, 189, 142, 0.16), transparent 70%), var(--petrole-profond); }
.via-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(224, 189, 142, 0.2) 1.2px, transparent 1.8px) 0 0 / 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 40% 75% at 80% 50%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 40% 75% at 80% 50%, #000, transparent 80%);
}
.via-final__contenu { position: relative; z-index: 1; }
.via-final__repere { display: block; width: 22px; height: 22px; margin: 0 0 var(--e-5); background: var(--or); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 12px rgba(224, 189, 142, 0.7)); }
.via-final .titre-section { color: var(--creme); }
.via-final__texte { margin: var(--e-4) 0 0; font-size: var(--t-corps); line-height: 1.6; color: var(--creme-doux); }
.via-final__fond { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.via-final:has(.via-final__fond)::before { z-index: 1; background: linear-gradient(90deg, rgba(2, 24, 24, 0.94) 0%, rgba(2, 24, 24, 0.8) 34%, rgba(2, 24, 24, 0.2) 60%, transparent 74%); -webkit-mask-image: none; mask-image: none; }
.via-final:has(.via-final__fond) .via-final__contenu { z-index: 2; }
@media (min-width: 60em) {
  .via-final:has(.via-final__fond) { display: flex; align-items: center; min-height: clamp(30rem, 40vw, 38rem); }
  .via-final:has(.via-final__fond) .via-final__contenu { width: 100%; padding-right: 45%; }
}
@media (max-width: 59.99em) {   /* téléphone et tablette : la photo en bandeau, le texte dessous */
  .via-final:has(.via-final__fond) { padding-top: 0; }
  .via-final__fond { position: relative; height: clamp(14rem, 52vw, 24rem); object-position: 78% 60%; }
  .via-final:has(.via-final__fond)::before { display: none; }
  .via-final:has(.via-final__fond) .via-final__contenu { margin-top: var(--e-6); }
}

/* --------------------------------------------------------------------------
   12. Téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 39.99em) {
  .via-actions .btn--grand, .via-actions .btn-cartouche { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .via-haut__sur { font-size: 0.8125rem; letter-spacing: 0.14em; }
  .via-bulle { min-height: 3.25rem; padding: 8px 16px 8px 44px; border-radius: 26px; }
  .via-ident { grid-template-columns: 1fr; }
  .via-livrable { padding: 1rem; }
  .via-presse { padding-bottom: 0; }
  .via-presse__carte { position: relative; width: auto; margin-top: 10px; left: auto; right: auto; bottom: auto; rotate: none; }
  .via-code__texte { font-size: 0.75rem; padding-inline: 14px; }
}

/* --------------------------------------------------------------------------
   13. Moins d'animations : état final immédiat
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .via *, .via *::before, .via *::after { animation: none !important; transition: none !important; }
  .via-metier:hover { translate: none; }
  .js .via-respiration[data-reveal]:not(.est-visible) .via-respiration__img { scale: 1; }
}