/* Pages en style A (octobre 2026) : les trois accueils et les pages intérieures.
 * S'ajoute à versions.css et version-a.css. Préfixes : pa- (commun), a- (blocs partagés des accueils),
 * m- (accueil 1, maquette), p- (accueil 2, porte), t- (accueil 3, triptyque).
 */

/* ================= commun ================= */
.pa main { display: block; }
.pa-surtitre { font: 500 13px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu); }
.pa-surtitre span { margin: 0 0.25em; }
.pa-surtitre--clair { color: var(--color-bleu-sur-nuit); }
.pa-accent { color: var(--color-bleu); }
.pa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-top: 34px; }
.pa-fleche { display: inline-flex; align-items: center; gap: 12px; font: 500 17px/1 var(--font-body); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% + 6px) / 0 1px no-repeat; padding-bottom: 6px; margin-bottom: -6px; transition: background-size 400ms var(--ease-cub); }
.pa-fleche svg { width: 18px; height: 18px; fill: none; stroke: var(--color-bleu); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms var(--ease-cub); }
.pa-fleche:hover { background-size: 100% 1px; }
.pa-fleche:hover svg { transform: translate(2px, -2px); }
.pa-mention { margin-top: 36px; font: 500 12px/1.5 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-v2); }

/* ================= blocs partagés des accueils ================= */
.a-hero__titre { margin-top: 22px; font: 600 clamp(2.6rem, 0.9rem + 4.4vw, 4.75rem)/0.98 var(--font-display); letter-spacing: -0.04em; text-wrap: balance; }
.a-hero__phrase { margin-top: 28px; max-width: 30em; font: 400 var(--va-phrase)/1.4 var(--font-body); }
.a-hero__detail { margin-top: 8px; max-width: 30em; font: 400 clamp(1rem, 0.95rem + 0.2vw, 1.125rem)/1.55 var(--font-body); color: var(--color-texte-v2); text-wrap: pretty; }

/* la fiche dessinée : une carte, un repère, le panneau de la fiche */
.a-fiche { position: relative; aspect-ratio: 16 / 11; border-radius: var(--va-rayon); overflow: hidden; background: var(--color-gris-media); }
.a-fiche__carte { position: absolute; inset: 0; overflow: hidden; background:
  repeating-linear-gradient(0deg, transparent 0 46px, oklch(100% 0 0 / 0.55) 46px 48px),
  repeating-linear-gradient(90deg, transparent 0 62px, oklch(100% 0 0 / 0.55) 62px 64px),
  oklch(93.5% 0.012 250); }
.a-fiche__route { position: absolute; display: block; height: 14px; border-radius: 7px; background: var(--color-blanc); box-shadow: 0 0 0 1px oklch(18% 0.01 266 / 0.06); }
.a-fiche__route--1 { left: -10%; right: -10%; top: 58%; transform: rotate(-9deg); }
.a-fiche__route--2 { left: 22%; width: 12px; height: auto; top: -10%; bottom: -10%; transform: rotate(14deg); }
.a-fiche__route--3 { left: 40%; right: -20%; top: 26%; height: 10px; transform: rotate(21deg); opacity: 0.8; }
.a-fiche__repere { position: absolute; left: 27%; top: 46%; width: 34px; height: 34px; margin: -34px 0 0 -17px; border-radius: 50% 50% 50% 0; background: var(--color-bleu); transform: rotate(-45deg); box-shadow: 0 10px 20px -6px oklch(45% 0.29 266 / 0.6); }
.a-fiche__repere::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--color-blanc); }
.a-fiche__panneau { position: absolute; top: 50%; right: 5%; width: min(48%, 300px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 9px; padding: clamp(14px, 1.6vw, 22px); border-radius: 14px; background: var(--color-blanc); box-shadow: 0 30px 60px -24px var(--color-ombre-menu), 0 0 0 1px var(--color-filet-v); }
.a-fiche__nom { font: 600 clamp(15px, 0.8rem + 0.4vw, 18px)/1.2 var(--font-display); letter-spacing: -0.01em; margin-bottom: 4px; }
.a-fiche__ligne { display: flex; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px solid var(--color-filet-v); font-size: 14px; }
.a-fiche__ligne i { font-style: normal; color: var(--color-texte-v2); }
.a-fiche__ligne b { font-weight: 500; color: var(--color-bleu); }
.a-fiche__lien { margin-top: 12px; align-self: flex-start; padding: 8px 14px; border-radius: 999px; font: 500 13px/1 var(--font-body); color: var(--color-blanc); background: var(--color-bleu); }
.a-fiche__etiquette { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; font: 500 12px/1 var(--font-body); color: var(--color-blanc); background: var(--color-encre-v); }

/* le fondateur, en citation signée */
.a-fondateur blockquote { margin: 0; }
.a-fondateur__signe { margin-top: 18px; font: 500 13px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-v2); }
.a-fondateur__suite { margin-top: 32px; max-width: 38em; font: 400 var(--va-phrase)/1.5 var(--font-body); color: var(--color-texte-v2); }
.a-contact__phrase { max-width: 34em; margin: 24px auto 0; font: 400 var(--va-phrase)/1.5 var(--font-body); color: var(--color-texte-v2); text-wrap: balance; }

/* le nom de la pièce traversée, posé sur la vidéo */
.m-visite__piece { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 7px 11px; border-radius: 999px; font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-blanc); background: var(--color-verre-nuit); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: opacity 400ms var(--ease-sortie); }
.m-visite__piece:empty { opacity: 0; }

/* ================= accueil 1 · maquette ================= */
.m-visite__ecran { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-nuit-bleue); }
.m-visite__ecran img, .m-visite__ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-visite__barre { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 10px 11px; font: 500 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.m-visite__barre svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms var(--ease-cub); }
.m-visite__progres { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--color-bleu-sur-nuit); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.m-titre--moyen { font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.75rem); }

.m-insta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 32px; text-decoration: none; }
.m-insta img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: 8px; transition: transform 700ms var(--ease-cub); }
.m-insta:hover img:nth-child(1) { transform: rotate(-2deg) translateY(-4px); }
.m-insta:hover img:nth-child(2) { transform: translateY(-8px); }
.m-insta:hover img:nth-child(3) { transform: rotate(2deg) translateY(-4px); }

/* ================= accueil 2 · porte ================= */
.p-hero { padding-top: clamp(116px, 6rem + 3vw, 156px); }
.p-hero__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: 48px clamp(40px, 6vw, 112px); align-items: center; }
.p-porte { position: relative; }
.p-porte__cadre { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--va-rayon); background: var(--color-nuit-bleue); box-shadow: 0 0 0 1px var(--color-filet-v); isolation: isolate; }
.p-porte__cabinet { position: absolute; inset: 0; }
.p-porte__cabinet img, .p-porte__cabinet video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-porte__cabinet video { opacity: 0; transition: opacity 500ms var(--ease-sortie); }
.p-porte__cabinet video.est-lue { opacity: 1; }
.p-porte__piece { opacity: 0; transition: opacity 400ms var(--ease-sortie) 900ms; }
.p-porte.est-ouverte .p-porte__piece { opacity: 1; }
/* le battant : la vitre où la femme est imprimée, avec la bande dépolie de la vraie porte */
.p-porte__battant { position: absolute; inset: 0; z-index: 2; background: var(--color-blanc-casse); box-shadow: -1px 0 0 var(--color-filet-v-fort), -30px 0 60px -10px oklch(12% 0.05 266 / 0); transition: transform 1500ms var(--ease-cub), box-shadow 1500ms var(--ease-cub); }
.p-porte__battant img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.p-porte__givre { position: absolute; left: 0; right: 0; top: 66%; height: 22%; background: repeating-linear-gradient(180deg, oklch(100% 0 0 / 0.6) 0 9px, oklch(100% 0 0 / 0.12) 9px 15px); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.p-porte__poignee { position: absolute; left: 16px; top: 42%; width: 7px; height: 22%; border-radius: 4px; background: linear-gradient(90deg, oklch(70% 0.01 266), oklch(92% 0.004 266) 45%, oklch(64% 0.01 266)); box-shadow: 2px 3px 8px oklch(18% 0.01 266 / 0.3); }
.p-porte__plaque { position: absolute; right: 16px; bottom: 16px; padding: 7px 11px; border-radius: 999px; font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-encre-v); background: var(--color-verre-blanc); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.p-porte.est-ouverte .p-porte__battant { transform: translateX(91%); box-shadow: -1px 0 0 var(--color-filet-v-fort), -30px 0 60px -10px oklch(12% 0.05 266 / 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .p-porte.est-invite:not(.est-ouverte) .p-porte__battant { animation: p-entrouvre 2600ms var(--ease-cub) 1; }
}
@keyframes p-entrouvre { 0%, 100% { transform: translateX(0); } 35%, 60% { transform: translateX(10%); } }
.p-porte__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 16px; }
.p-porte__bouton { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 8px; border: 0; border-radius: 999px; font: 500 16px/1 var(--font-body); color: var(--color-blanc); background: var(--color-encre-v); cursor: pointer; transition: background-color 300ms var(--ease-sortie); }
.p-porte__icone { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--color-blanc); }
.p-porte__icone::before, .p-porte__icone::after { content: ""; position: absolute; top: 10px; width: 7px; height: 16px; border-radius: 1px; background: var(--color-encre-v); transition: transform 500ms var(--ease-cub); }
.p-porte__icone::before { left: 10px; }
.p-porte__icone::after { right: 10px; background: var(--color-bleu); }
.p-porte.est-ouverte .p-porte__icone::after { transform: translateX(4px); opacity: 0.4; }
.p-porte__plein { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--font-body); text-decoration: none; }
.p-porte__plein svg { width: 16px; height: 16px; fill: none; stroke: var(--color-bleu); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.va-offre .pa-surtitre { margin-bottom: -6px; }
.va-offre__media--fiche { background: none; aspect-ratio: auto; }
.va-offre__media--fiche .a-fiche { aspect-ratio: 16 / 10; }
.m-insta--carte { display: grid; gap: 8px; padding: 8px; background: var(--color-gris-media); }
.m-insta--carte img { position: static; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 8px; }

/* ================= accueil 3 · triptyque ================= */
.t-hero { padding-top: clamp(92px, 5rem + 1vw, 104px); }
.t-hero__grille { width: min(100% - 2 * var(--va-marge), 1440px); margin-inline: auto; height: clamp(560px, calc(100svh - 128px), 840px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr) minmax(0, 1fr); gap: clamp(14px, 1.4vw, 22px); }
.t-panneau { position: relative; display: block; margin: 0; overflow: hidden; border-radius: var(--va-rayon); background: var(--color-gris-media); color: var(--color-blanc); text-decoration: none; }
.t-panneau img, .t-panneau video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-cub); }
.t-panneau--femme img { object-position: 50% 20%; }
.t-panneau figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; border-radius: 999px; font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-encre-v); background: var(--color-verre-blanc); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.t-panneau--visite::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-voile-haut), transparent 26%, transparent 52%, var(--color-voile-film)); pointer-events: none; }
.t-panneau--visite:hover img, .t-panneau--visite:hover video { transform: scale(1.03); }
.t-hero__texte { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 clamp(8px, 1.6vw, 28px); text-align: center; }
.t-hero__texte .a-hero__titre { font-size: clamp(2.4rem, 0.6rem + 3.4vw, 4.3rem); }
.t-hero__texte .a-hero__phrase, .t-hero__texte .a-hero__detail { margin-inline: auto; }
.t-hero__texte .pa-actions { justify-content: center; }
.t-visite__haut { position: absolute; z-index: 2; left: 16px; right: 16px; top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 12px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.t-visite__haut svg { flex: none; width: 40px; height: 40px; padding: 11px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: var(--color-verre-nuit); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 500ms var(--ease-cub); }
.t-panneau--visite:hover .t-visite__haut svg { transform: rotate(45deg); }
.t-pieces { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 2px; counter-reset: piece; }
.t-pieces li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px; font: 500 14px/1 var(--font-body); color: oklch(100% 0 0 / 0.6); transition: color 400ms var(--ease-sortie), background-color 400ms var(--ease-sortie); }
.t-pieces li::before { counter-increment: piece; content: "0" counter(piece); font-size: 11px; letter-spacing: 0.04em; }
.t-pieces li.est-active { color: var(--color-blanc); background: var(--color-verre-nuit); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.t-offres__titre { max-width: 14em; font: 500 var(--va-titre-section)/1 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.t-volets { display: flex; gap: 12px; height: clamp(440px, 36vw, 560px); margin-top: clamp(40px, 4vw, 64px); }
.t-volet { flex: 1 1 0; min-width: 0; transition: flex-grow 800ms var(--ease-cub); }
.t-volet.est-ouvert { flex-grow: 2.6; }
.t-volet__lien { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--va-rayon); color: var(--color-blanc); text-decoration: none; background: var(--color-bleu-profond); isolation: isolate; }
.t-volet__image { position: absolute; inset: 0; z-index: -2; }
.t-volet__image img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; transition: transform 1200ms var(--ease-cub); }
.t-volet__lien::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(12% 0.05 266 / 0.4), oklch(12% 0.05 266 / 0.2) 30%, oklch(12% 0.05 266 / 0.75) 62%, oklch(12% 0.05 266 / 0.95)); }
.t-volet__lien:hover .t-volet__image img { transform: scale(1.04); }
.t-volet__image--fiche .a-fiche__carte { position: absolute; inset: 0; }
.t-volet__nom { position: absolute; left: 22px; right: 22px; bottom: 22px; font: 500 clamp(1.25rem, 0.9rem + 0.8vw, 1.75rem)/1.1 var(--font-display); letter-spacing: -0.02em; transition: transform 700ms var(--ease-cub); }
.t-volet__corps { position: absolute; left: 22px; right: 22px; bottom: 22px; max-width: 30em; font: 400 16px/1.5 var(--font-body); color: var(--color-texte-nuit-v2); opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-sortie), transform 700ms var(--ease-cub); pointer-events: none; }
.t-volet__corps b { display: block; margin-bottom: 8px; font: 500 clamp(1.4rem, 1rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--color-blanc); }
.t-volet.est-ouvert .t-volet__nom { transform: translateY(-12px); opacity: 0; }
.t-volet.est-ouvert .t-volet__corps { opacity: 1; transform: none; transition-delay: 250ms; }
.t-volet--fiche .t-volet__lien::after { background: linear-gradient(180deg, transparent 40%, oklch(12% 0.05 266 / 0.88)); }
.t-offres__note { margin-top: 18px; font: 400 13px/1.5 var(--font-body); color: var(--color-texte-v2); }

/* ================= tablette ================= */
@media (max-width: 1100px) {
  .t-hero__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: auto; }
  .t-hero__texte { grid-column: 1 / -1; order: -1; align-items: flex-start; text-align: left; padding: 24px 0 32px; }
  .t-hero__texte .a-hero__phrase, .t-hero__texte .a-hero__detail { margin-inline: 0; }
  .t-hero__texte .pa-actions { justify-content: flex-start; }
  .t-panneau { aspect-ratio: 3 / 4; }
  .t-volets { flex-direction: column; height: auto; }
  .t-volet, .t-volet.est-ouvert { flex: none; }
  .t-volet__lien { height: auto; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 72px 22px 22px; }
  .t-volet__nom { display: none; }
  .t-volet__corps { position: static; opacity: 1; transform: none; }
}

/* ================= téléphone ================= */
@media (max-width: 767px) {
  .p-hero__grille { grid-template-columns: minmax(0, 1fr); }
  .m-visite__barre { padding: 10px 6px 8px; font-size: 10px; }
  .m-visite__barre svg { width: 16px; height: 16px; }
  .pa-actions .va-pilule { width: 100%; }
  .p-porte__cadre { aspect-ratio: 4 / 4.6; }
  .p-porte__plaque { right: 10px; bottom: 10px; max-width: calc(100% - 20px); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-hero { padding-top: 92px; }
  .p-hero__grille { gap: 32px; }
  .pa-actions { margin-top: 26px; }
  .pa-mention { margin-top: 22px; }
  .t-volet__lien::after { background: linear-gradient(180deg, oklch(12% 0.05 266 / 0.5), oklch(12% 0.05 266 / 0.7) 45%, oklch(12% 0.05 266 / 0.95)); }
  .p-porte__bouton { flex: 1 1 100%; justify-content: flex-start; }
  .t-hero__grille { gap: 10px; }
  .t-pieces { left: 8px; right: 8px; bottom: 8px; }
  .t-pieces li { display: none; padding: 7px 10px; font-size: 12px; }
  .t-pieces li.est-active { display: flex; }
  .t-visite__haut { left: 10px; right: 10px; top: 10px; font-size: 10px; }
  .t-visite__haut span { display: none; }
  .t-visite__haut { justify-content: flex-end; }
  .t-visite__haut svg { width: 34px; height: 34px; padding: 9px; }
  .t-panneau figcaption { left: 8px; right: 8px; bottom: 8px; font-size: 10px; text-align: center; }
  .a-fiche { aspect-ratio: 4 / 3.4; }
  .a-fiche__panneau { width: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  .p-porte__battant { transition: none; }
}

/* ================= pages intérieures ================= */
.pa-tete { padding-top: clamp(128px, 6.5rem + 4vw, 184px); }
.pa-tete__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 5vw, 96px); align-items: center; }
.pa-tete__grille--haut { align-items: start; }
.pa-titre { margin-top: 20px; max-width: 14em; font: 500 var(--va-titre)/1 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; }
.pa-titre--long { max-width: 18em; font-size: clamp(2.3rem, 1rem + 3.6vw, 4.25rem); }
.pa-chapo { margin-top: 24px; max-width: 36em; font: 400 var(--va-phrase)/1.45 var(--font-body); color: var(--color-texte-v2); text-wrap: pretty; }
.pa-tete__texte .pa-chapo { color: var(--color-encre-v); }
.pa-tete .pa-note { margin-top: 20px; }
.pa-tete__media { margin: 0; min-width: 0; }
.pa-legende { margin-top: 12px; font: 400 13px/1.45 var(--font-body); color: var(--color-texte-v2); }
.pa-note { margin-top: 20px; max-width: 62ch; font: 400 15px/1.55 var(--font-body); color: var(--color-texte-v2); }
.pa-note a, .pa-chapo a { color: inherit; text-underline-offset: 0.2em; }
.pa-note strong { color: var(--color-encre-v); font-weight: 600; }
.pa-h2 { font: 500 var(--va-titre-section)/1 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.pa-h3 { font: 500 clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.pa-num { display: inline-block; margin-right: 0.5em; font: 500 0.4em/1 var(--font-body); letter-spacing: 0; vertical-align: 0.9em; color: var(--color-bleu); }
.pa-entete-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.pa-entete-section + .pa-chapo { margin-top: 18px; }
.pa-entete-section + .revele, .pa-chapo + .revele { margin-top: clamp(32px, 3vw, 48px); }
.pa-feuille { margin-top: var(--va-section); padding: var(--va-section) 0; background: var(--color-blanc-casse); border-radius: clamp(28px, 4.5vw, 72px); }
.pa-feuille + .va-section, .pa-bleu + .pa-feuille { margin-top: var(--va-section); }
.pa-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 4vw, 72px); margin-top: clamp(48px, 4vw, 64px); }
.pa-deux p { margin-top: 12px; font: 400 17px/1.55 var(--font-body); color: var(--color-texte-v2); }
.va-pilule--clair { color: var(--color-bleu-profond); background: var(--color-blanc); }
.va-pilule--clair::before { background: var(--color-bleu-sur-nuit); }

/* le site qui défile, dans un cadre de navigateur */
.pa-defile .defile { aspect-ratio: 4 / 3.3; border-radius: var(--va-rayon); overflow: hidden; box-shadow: 0 0 0 1px var(--color-filet-v), 0 40px 80px -40px var(--color-ombre-menu); background: var(--color-blanc); }

/* une image et un texte côte à côte */
.pa-cote { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px clamp(40px, 5vw, 88px); align-items: center; }
.pa-cote--inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pa-cote__media { margin: 0; }
.pa-cote__media a { display: block; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--color-filet-v); }
.pa-cote__media img { width: 100%; height: auto; transition: transform 900ms var(--ease-cub); }
.pa-cote__media a:hover img { transform: scale(1.025); }
.pa-cote__texte { display: flex; flex-direction: column; gap: 18px; }
.pa-cote__texte .pa-h2 { font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); }
.pa-cote__texte p:not(.pa-surtitre) { max-width: 30em; font: 400 17px/1.55 var(--font-body); color: var(--color-texte-v2); }

/* liste cochée */
.pa-coches { display: grid; gap: 0; }
.pa-coches li { position: relative; padding: 18px 0 18px 44px; border-top: 1px solid var(--color-filet-v); font: 400 var(--va-phrase)/1.4 var(--font-body); }
.pa-coches li:last-child { border-bottom: 1px solid var(--color-filet-v); }
.pa-coches li::before { content: ""; position: absolute; left: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--color-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 16px no-repeat; }

/* trois modèles de sites, chacun avec sa palette */
.pa-modeles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(48px, 5vw, 80px); }
.pa-modeles figure { margin: 0; }
.pa-modeles img { width: 100%; height: auto; aspect-ratio: 720 / 500; object-fit: cover; border-radius: 12px; box-shadow: 0 0 0 1px var(--color-filet-v); }
.pa-modeles figcaption { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 400 13px/1.3 var(--font-body); color: var(--color-texte-v2); }
.pa-modeles figcaption span { margin-right: auto; }
.pa-modeles figcaption i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--color-filet-v); }

/* étapes */
.pa-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 3vw, 48px); counter-reset: none; }
.pa-etapes li { display: flex; flex-direction: column; gap: 48px; padding: clamp(22px, 2.2vw, 32px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.pa-etapes span { font: 500 15px/1 var(--font-body); color: var(--color-bleu); }
.pa-etapes p { font: 400 var(--va-phrase)/1.35 var(--font-body); }
.pa-etapes--mini { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
.pa-etapes--mini li { flex-direction: row; align-items: baseline; gap: 16px; padding: 14px 0; border-radius: 0; background: none; border-top: 1px solid var(--color-filet-v); }
.pa-etapes--mini p { font-size: 17px; }

/* section bleu profond, coins arrondis */
.pa-bleu { margin-top: var(--va-section); padding: var(--va-section) 0; color: var(--color-blanc); background: var(--color-bleu-profond); border-radius: clamp(28px, 4.5vw, 72px); }
.pa-bleu .pa-chapo, .pa-bleu .pa-note, .pa-bleu figcaption { color: var(--color-texte-nuit-v2); }
.pa-bleu .pa-h2 { margin-top: 16px; }
.pa-mesure { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px clamp(40px, 5vw, 96px); align-items: start; margin-top: clamp(40px, 4vw, 64px); }
.pa-notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pa-notes div { padding: 20px 18px; border-radius: 14px; background: var(--color-bleu-profond-2); }
.pa-notes dt { font: 400 14px/1.3 var(--font-body); color: var(--color-texte-nuit-v2); }
.pa-notes dd { margin: 14px 0 0; font: 500 clamp(2.2rem, 1.6rem + 1.6vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.04em; }
.pa-tableau { margin-top: 28px; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--color-filet-nuit-v); }
.pa-tableau table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 15px/1.3 var(--font-body); }
.pa-tableau th, .pa-tableau td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--color-filet-nuit-v); }
.pa-tableau thead th { font-weight: 500; font-size: 13px; color: var(--color-texte-nuit-v2); }
.pa-tableau tbody tr:first-child { background: var(--color-bleu-profond-2); }
.pa-tableau tbody tr:last-child th, .pa-tableau tbody tr:last-child td { border-bottom: 0; }
.pa-tableau a { color: inherit; text-underline-offset: 0.2em; }
.pa-capture { margin: 0; }
.pa-capture__ecran { max-width: 300px; margin-inline: auto; padding: 8px; border-radius: 36px; background: var(--color-nuit-bleue); box-shadow: 0 0 0 1px var(--color-filet-nuit-v-fort); }
.pa-capture__ecran img { width: 100%; height: auto; border-radius: 28px; }
.pa-capture figcaption { margin-top: 16px; font: 400 14px/1.5 var(--font-body); }

/* prix */
.pa-prix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pa-prix--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pa-prix__carte { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--va-rayon); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v); }
.va-section .pa-prix__carte { background: var(--color-blanc-casse); box-shadow: none; }
.pa-prix__rythme { font: 500 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu); }
.pa-prix__nom { font: 500 clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.pa-prix__montant { margin-top: 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font: 500 clamp(2.6rem, 1.8rem + 2.2vw, 4rem)/1 var(--font-display); letter-spacing: -0.045em; }
.pa-prix__montant small { font: 400 15px/1.2 var(--font-body); letter-spacing: 0; color: var(--color-texte-v2); }
.pa-prix__contenu { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--color-filet-v); font: 400 15px/1.5 var(--font-body); color: var(--color-texte-v2); }
.pa-prix__carte--bleue, .va-section .pa-prix__carte--bleue { color: var(--color-blanc); background: var(--color-bleu-profond); box-shadow: none; }
.pa-prix__carte--bleue .pa-prix__rythme { color: var(--color-bleu-sur-nuit); }
.pa-prix__carte--bleue .pa-prix__montant small, .pa-prix__carte--bleue .pa-prix__contenu { color: var(--color-texte-nuit-v2); border-color: var(--color-filet-nuit-v); }
.pa-prix__cle { margin-top: 24px; font: 500 17px/1.45 var(--font-body); }

/* conditions et questions */
.pa-conditions-bloc, .pa-questions-bloc { margin-top: clamp(48px, 5vw, 80px); }
.pa-feuille > .va-duo:first-child { margin-top: 0; }
.pa-conditions { display: grid; }
.pa-conditions li { padding: 16px 0; border-top: 1px solid var(--color-filet-v-fort); font: 400 16px/1.55 var(--font-body); color: var(--color-texte-v2); }
.pa-questions { display: grid; }
.pa-question { border-top: 1px solid var(--color-filet-v-fort); }
.pa-question:last-child { border-bottom: 1px solid var(--color-filet-v-fort); }
.pa-question summary { position: relative; display: block; padding: 22px 56px 22px 0; font: 500 clamp(1.1rem, 1rem + 0.4vw, 1.35rem)/1.3 var(--font-body); cursor: pointer; list-style: none; }
.pa-question summary::-webkit-details-marker { display: none; }
.pa-question__plus { position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); transition: transform 500ms var(--ease-cub), background-color 300ms var(--ease-sortie); }
.pa-question__plus::before, .pa-question__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -0.8px 0 0 -7px; background: var(--color-encre-v); }
.pa-question__plus::after { transform: rotate(90deg); transition: transform 500ms var(--ease-cub); }
.pa-question[open] .pa-question__plus { transform: rotate(180deg); background: var(--color-bleu); }
.pa-question[open] .pa-question__plus::before, .pa-question[open] .pa-question__plus::after { background: var(--color-blanc); }
.pa-question[open] .pa-question__plus::after { transform: rotate(0); }
.pa-question p { max-width: 44em; padding: 0 56px 24px 0; font: 400 17px/1.55 var(--font-body); color: var(--color-texte-v2); }

/* sommaire des tarifs */
.pa-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.pa-sommaire a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; font: 500 15px/1 var(--font-body); text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); transition: background-color 300ms var(--ease-sortie), color 300ms var(--ease-sortie); }
.pa-sommaire a:hover { color: var(--color-blanc); background: var(--color-encre-v); }

/* demande, formulaire */
.pa-appel { margin-top: var(--va-section); }
.pa-appel__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 5vw, 96px); align-items: start; }
.pa-appel__formulaire { padding: clamp(24px, 2.6vw, 40px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.pa-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pa-form label, .pa-form fieldset { display: grid; gap: 8px; min-width: 0; }
.pa-form label > span, .pa-form legend { font: 500 14px/1.2 var(--font-body); }
.pa-form input:not([type="radio"]):not([type="checkbox"]), .pa-form select, .pa-form textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 0; border-radius: 12px; font: 400 16px/1.3 var(--font-body); color: var(--color-encre-v); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); transition: box-shadow 200ms var(--ease-sortie); }
.pa-form textarea { resize: vertical; min-height: 140px; }
.pa-form input:focus-visible, .pa-form select:focus-visible, .pa-form textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--color-bleu); }
.pa-form input::placeholder, .pa-form textarea::placeholder { color: var(--color-texte-v2); opacity: 0.7; }
.pa-form__large, .pa-form fieldset, .pa-form__envoi { grid-column: 1 / -1; }
.pa-form fieldset { margin: 0; padding: 0; border: 0; }
.pa-form legend { margin-bottom: 8px; padding: 0; }
.pa-choix label { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-radius: 12px; font: 400 16px/1.3 var(--font-body); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); cursor: pointer; }
.pa-choix label + label { margin-top: 8px; }
.pa-choix input { width: 18px; height: 18px; accent-color: var(--color-bleu); }
.pa-form__envoi { margin-top: 8px; }
.pa-form__envoi .va-pilule { border: 0; cursor: pointer; }
.pa-form__suite { margin-top: 16px; padding: 16px 18px; border-radius: 12px; font: 500 16px/1.45 var(--font-body); color: var(--color-encre-v); background: oklch(94% 0.05 160); }
.pa-form__suite.est-erreur { background: oklch(94% 0.05 30); }
.pa-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pa-appel__formulaire > .pa-note { font-size: 13px; }

/* la visite : photos d'origine, formats */
.pa-origine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 4vw, 64px); margin-top: clamp(32px, 3vw, 48px); }
.pa-origine__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.pa-origine__video { position: relative; margin-top: 16px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--color-gris-media); }
.pa-origine__video img, .pa-origine__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pa-formats { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); align-items: end; margin-top: clamp(32px, 3vw, 48px); }
.pa-formats figure { margin: 0; }
.pa-formats__image { overflow: hidden; border-radius: 12px; background: var(--color-gris-media); }
.pa-formats__image img { width: 100%; height: auto; }
.pa-formats figcaption { margin-top: 14px; font: 400 16px/1.5 var(--font-body); color: var(--color-texte-v2); }
.pa-formats figcaption b { display: block; font-weight: 500; color: var(--color-encre-v); }

/* Instagram */
.pa-tete--insta .pa-tete__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pa-tete--insta .tels { height: min(80svh, 52rem); }
.pa-compte .iphone { margin: 0; }
.page--instagram .type__nom { font: 500 clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.page--instagram .types { margin-top: clamp(32px, 3vw, 48px); }
.page--instagram .composeur { margin-top: clamp(32px, 3vw, 48px); }

/* fiche Google : trois chiffres */
.pa-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 3vw, 48px); }
.pa-chiffres li { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.pa-chiffres__nombre { font: 500 clamp(3rem, 2rem + 3vw, 5rem)/0.95 var(--font-display); letter-spacing: -0.05em; color: var(--color-bleu); }
.pa-chiffres li > p:not([class]) { font: 400 16px/1.55 var(--font-body); color: var(--color-texte-v2); }
.pa-chiffres .va-source { margin-top: auto; }

/* contact */
.pa-contact-wa { padding: clamp(28px, 3vw, 48px); border-radius: var(--va-rayon); color: var(--color-blanc); background: var(--color-bleu-profond); }
.pa-contact-wa__texte { margin-top: 12px; font: 400 var(--va-phrase)/1.4 var(--font-body); }
.pa-exemples { display: grid; gap: 8px; margin: 28px 0; }
.pa-exemples li { justify-self: start; max-width: 100%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; font: 400 15px/1.4 var(--font-body); background: var(--color-bleu-profond-2); }
.pa-exemples li:nth-child(even) { justify-self: end; border-radius: 18px 18px 4px 18px; }
.pa-contact-wa .va-pilule { white-space: normal; text-align: center; height: auto; min-height: 60px; }
.pa-cartes-contact { display: grid; gap: 0; margin-top: 32px; }
.pa-cartes-contact article { display: grid; gap: 8px; padding: 22px 0; border-top: 1px solid var(--color-filet-v); }
.pa-cartes-contact__val { font: 500 clamp(1.3rem, 1rem + 0.8vw, 1.75rem)/1.2 var(--font-display); letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; }
.pa-cartes-contact article p:last-child { font: 400 15px/1.5 var(--font-body); color: var(--color-texte-v2); }
.pa-contact-fin { margin-top: clamp(48px, 5vw, 80px); }

/* fin de page */
.pa-fin { margin-top: var(--va-section); padding: var(--va-section) 0; text-align: center; }
.pa-fin__titre { font: 500 var(--va-titre-section)/1 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.pa-fin__phrase { max-width: 32em; margin: 22px auto 0; font: 400 var(--va-phrase)/1.45 var(--font-body); color: var(--color-texte-v2); }
.pa-fin__action { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }

/* mentions légales */
.pa-legal-page .va-etroit { max-width: 820px; }
.pa-legal__titre { margin-top: 56px; }
.pa-legal__titre:first-child { margin-top: 0; }
.pa-legal { display: grid; margin-top: 20px; }
.pa-legal div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 24px; padding: 14px 0; border-top: 1px solid var(--color-filet-v); font: 400 16px/1.5 var(--font-body); }
.pa-legal dt { color: var(--color-texte-v2); }
.pa-legal dd { margin: 0; }
.pa-legal__texte { margin-top: 16px; font: 400 17px/1.6 var(--font-body); color: var(--color-texte-v2); }
.pa-legal__texte a, .pa-legal a { color: var(--color-encre-v); text-underline-offset: 0.2em; }
.pa-404 { padding-bottom: var(--va-section); }

/* ================= Comprendre : la pyramide et le cercle des chiffres ================= */
.pa-pyramide .pa-cote { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.pa-pyramide .pyramide { display: grid; gap: 8px; justify-items: center; }
.pa-pyramide .etage { --l: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; width: var(--l); min-height: 64px; padding: 12px 20px; border-radius: 14px; color: var(--color-blanc); background: var(--fond); }
.pa-pyramide .etage--5 { --l: 44%; --fond: oklch(62% 0.17 266); }
.pa-pyramide .etage--4 { --l: 58%; --fond: oklch(52% 0.22 266); }
.pa-pyramide .etage--3 { --l: 72%; --fond: oklch(45% 0.29 266); }
.pa-pyramide .etage--2 { --l: 86%; --fond: oklch(35% 0.2 266); }
.pa-pyramide .etage--1 { --l: 100%; --fond: oklch(27% 0.15 266); }
.pa-pyramide .etage__num { grid-row: span 2; font: 500 13px/1 var(--font-body); opacity: 0.75; }
.pa-pyramide .etage__titre { font: 500 clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem)/1.15 var(--font-display); }
.pa-pyramide .etage__detail { font: 400 13px/1.35 var(--font-body); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .js .pa-pyramide [data-pyramide] .etage { opacity: 0; transform: translateY(18px) scaleX(0.92); transition: opacity 700ms var(--ease-sortie), transform 900ms var(--ease-cub); }
  .js .pa-pyramide [data-pyramide].est-pose .etage { opacity: 1; transform: none; }
  .js .pa-pyramide [data-pyramide].est-pose .etage--1 { transition-delay: 0ms; }
  .js .pa-pyramide [data-pyramide].est-pose .etage--2 { transition-delay: 120ms; }
  .js .pa-pyramide [data-pyramide].est-pose .etage--3 { transition-delay: 240ms; }
  .js .pa-pyramide [data-pyramide].est-pose .etage--4 { transition-delay: 360ms; }
  .js .pa-pyramide [data-pyramide].est-pose .etage--5 { transition-delay: 480ms; }
}

.pa-usages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 3vw, 48px); }
.pa-usage { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.pa-usage__chiffre { font: 500 clamp(2.8rem, 2rem + 2.4vw, 4.4rem)/0.95 var(--font-display); letter-spacing: -0.05em; color: var(--color-bleu); }
.pa-usage b { font: 500 clamp(1.2rem, 1rem + 0.5vw, 1.5rem)/1.15 var(--font-display); letter-spacing: -0.015em; }
.pa-usage p { font: 400 16px/1.55 var(--font-body); color: var(--color-texte-v2); }
.pa-usages + .pa-actions { margin-top: 40px; }

/* le cercle : sans JavaScript, une liste où tout est lisible ; avec, les chiffres font le tour et le texte choisi s'affiche au centre */
.cc-cercle { position: relative; margin-top: clamp(32px, 3vw, 48px); }
.cc-liste { display: grid; gap: 12px; }
.cc-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding: 20px 0; border-top: 1px solid var(--color-filet-v); }
.cc-chiffre { display: grid; place-items: center; align-content: center; gap: 4px; width: 112px; height: 112px; padding: 8px; border: 0; border-radius: 50%; font: inherit; color: var(--color-encre-v); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); cursor: pointer; text-align: center; transition: background-color 300ms var(--ease-sortie), color 300ms var(--ease-sortie), box-shadow 300ms var(--ease-sortie), transform 500ms var(--ease-cub); }
.cc-chiffre__num { font: 500 19px/1.05 var(--font-display); letter-spacing: -0.03em; }
.cc-chiffre__num i { font-style: normal; }
.cc-chiffre__idx { font: 500 11px/1 var(--font-body); color: var(--color-texte-v2); }
.cc-detail__titre { font: 500 clamp(1.15rem, 1rem + 0.5vw, 1.5rem)/1.25 var(--font-display); letter-spacing: -0.015em; }
.cc-detail__num { color: var(--color-bleu); }
.cc-detail__num i { font-style: normal; }
.cc-detail__texte { margin-top: 12px; font: 400 16px/1.55 var(--font-body); color: var(--color-texte-v2); }
.cc-detail__source { margin-top: 14px; font: 400 13px/1.5 var(--font-body); color: var(--color-texte-v2); }
.cc-detail__source a { color: var(--color-encre-v); text-underline-offset: 0.2em; }
.cc-cercle__anneau { display: none; }

@media (min-width: 900px) {
  .cc-cercle.est-actif { container-type: inline-size; width: min(100%, 900px); aspect-ratio: 1; margin-inline: auto; }
  .cc-cercle.est-actif .cc-cercle__anneau { display: block; position: absolute; inset: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); }
  .cc-cercle.est-actif .cc-cercle__anneau::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--color-blanc-casse); }
  .cc-cercle.est-actif .cc-liste { position: absolute; inset: 0; display: block; }
  .cc-cercle.est-actif .cc-item { display: block; padding: 0; border: 0; }
  .cc-cercle.est-actif .cc-chiffre { position: absolute; left: 50%; top: 50%; z-index: 4; margin: -56px 0 0 -56px;
    transform: rotate(calc(var(--i) * 360deg / var(--n, 13))) translateY(calc(-50cqi + 64px)) rotate(calc(var(--i) * -360deg / var(--n, 13))) scale(var(--s, 1)); }
  .cc-cercle.est-actif .est-choisi .cc-chiffre { color: var(--color-blanc); background: var(--color-bleu); box-shadow: 0 16px 30px -12px oklch(45% 0.29 266 / 0.6); }
  .cc-cercle.est-actif .est-choisi .cc-chiffre__idx { color: var(--color-bleu-sur-nuit); }
  .cc-cercle.est-actif .cc-detail { position: absolute; left: 50%; top: 50%; z-index: 1; width: 48cqi; max-height: 54cqi; overflow: auto; text-align: center; transform: translate(-50%, -46%); opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-sortie), transform 600ms var(--ease-cub), visibility 0s 400ms; }
  .cc-cercle.est-actif .est-choisi .cc-detail { opacity: 1; visibility: visible; transform: translate(-50%, -50%); transition-delay: 0s; }
}
/* sur téléphone et tablette : une simple liste, chaque chiffre visible avec son texte et sa source, rien à toucher */
@media (max-width: 899px) {
  .cc-cercle .cc-liste { display: grid; gap: 0; }
  .cc-cercle .cc-item { display: block; padding: 22px 0; border-top: 1px solid var(--color-filet-v); }
  .cc-cercle .cc-item:last-child { border-bottom: 1px solid var(--color-filet-v); }
  .cc-cercle .cc-chiffre { display: none; }
  .cc-cercle .cc-detail { display: block; }
  .cc-cercle .cc-detail__titre { font-size: 1.15rem; }
  .cc-cercle .cc-detail__num { font-size: 1.6rem; letter-spacing: -0.03em; }
}

/* ================= pages intérieures · tablette et téléphone ================= */
@media (max-width: 1100px) {
  .pa-mesure { grid-template-columns: minmax(0, 1fr); }
  .pa-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-tete--insta .pa-tete__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .pa-tete { padding-top: 104px; }
  .pa-tete__grille, .pa-cote, .pa-cote--inverse, .pa-appel__grille, .pa-origine, .pa-deux, .pa-pyramide .pa-cote { grid-template-columns: minmax(0, 1fr); }
  .pa-titre { font-size: clamp(2.3rem, 1.2rem + 5.6vw, 2.9rem); line-height: 1.02; }
  .pa-modeles { grid-template-columns: minmax(0, 1fr); }
  .pa-etapes, .pa-prix, .pa-prix--deux, .pa-chiffres, .pa-usages { grid-template-columns: minmax(0, 1fr); }
  .pa-etapes li { gap: 24px; }
  .pa-form { grid-template-columns: minmax(0, 1fr); }
  .pa-form label, .pa-form__envoi { grid-column: 1; }
  .pa-form__envoi .va-pilule { width: 100%; }
  .pa-formats { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .pa-feuille, .pa-bleu { border-radius: 28px; }
  .pa-legal div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pa-fin__action .va-pilule, .pa-actions .va-pilule { width: 100%; }
  .pa-pyramide .etage { min-height: 56px; padding: 10px 14px; }
  .pa-pyramide .etage--5 { --l: 56%; } .pa-pyramide .etage--4 { --l: 68%; } .pa-pyramide .etage--3 { --l: 80%; } .pa-pyramide .etage--2 { --l: 90%; }
  .pa-tete--insta .tels { height: min(72svh, 36rem); }
}

/* ================= retouches après relecture ================= */
.vp-pied__contact { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.vp-pied__contact a { text-underline-offset: 0.2em; }
.pa main > section:last-child:not(.pa-fin):not(.va-contact):not(.pa-404) { padding-bottom: var(--va-section); }
.page--realisations .note__chiffre { font: 500 clamp(2.2rem, 1.6rem + 1.6vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.045em; }
.pa-compte .iphone figcaption { font: 400 13px/1.45 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--color-texte-v2); }
.t-volet__num { position: absolute; left: 18px; top: 18px; font: 500 15px/1 var(--font-body); padding: 7px 10px; border-radius: 999px; color: var(--color-blanc); background: var(--color-verre-nuit); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }


/* ================= accueil 1, d'après Cuberto (16 octobre, deuxième passe) ================= */
:root {
  --color-fond-femme: oklch(97.2% 0 0);              /* le fond de la photo de la femme, pour une carte sans bord visible */
  --color-anneau-carte: oklch(100% 0 0 / 0.05);
  --color-lueur-carte: oklch(45% 0.29 266 / 0.5);
}
.mh { padding-top: clamp(120px, 6rem + 4vw, 168px); }
.mh-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 5vw, 96px); align-items: center; }
.mh-texte { padding-bottom: clamp(0px, 4vw, 64px); }
.mh-visuel { position: relative; }
.mh-femme { position: relative; margin: 0; aspect-ratio: 5 / 5.6; overflow: hidden; border-radius: 28px; background: var(--color-fond-femme); }
.mh-femme img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 12%; transform: scale(1.001); transition: transform 1400ms var(--ease-cub); }
.mh-femme figcaption { position: absolute; right: 18px; bottom: 18px; padding: 8px 12px; border-radius: 999px; font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-encre-v); background: var(--color-verre-blanc); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--color-filet-v); }
.mh-visite { position: absolute; z-index: 2; left: clamp(-120px, -8.5vw, -40px); bottom: clamp(24px, 3.2vw, 48px); width: 48%; display: block; padding: 6px; border-radius: 22px; color: var(--color-blanc); text-decoration: none; background: var(--color-blanc); box-shadow: 0 50px 90px -40px var(--color-ombre-menu), 0 0 0 1px var(--color-filet-v); transition: transform 700ms var(--ease-cub); }
.mh-visite__ecran { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--color-nuit-bleue); }
.mh-visite__ecran img, .mh-visite__ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh-visite__voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, var(--color-voile-film)); }
.mh-visite__legende { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 500 11px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.mh-visite__legende b { font-weight: 500; opacity: 0.72; }
.mh-visite__progres { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--color-bleu-sur-nuit); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* les services : quatre cartes sombres qui s'empilent au défilement, comme chez Cuberto */
.c-cartes { display: grid; gap: 24px; }
.c-carte { position: sticky; top: calc(100px + var(--i) * 18px); }
.c-carte__in { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px clamp(32px, 4vw, 72px); align-items: center; min-height: clamp(440px, 36vw, 540px); padding: clamp(28px, 3vw, 48px); border-radius: 28px; color: var(--color-blanc); background: var(--color-nuit-bleue); transform-origin: 50% 0; transform: scale(calc(1 - var(--recul, 0) * 0.05)); }
.c-carte__in::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--color-nuit-bleue); opacity: calc(var(--recul, 0) * 0.55); pointer-events: none; }
.c-carte__motif { position: absolute; inset: 0; z-index: -1; background:
  repeating-radial-gradient(circle at calc(70% + var(--i) * 8%) 125%, transparent 0 46px, var(--color-anneau-carte) 46px 47px),
  radial-gradient(60% 80% at calc(70% + var(--i) * 8%) 120%, var(--color-lueur-carte), transparent 70%),
  linear-gradient(160deg, var(--color-nuit-bleue-2), var(--color-nuit-bleue)); }
.c-carte__num { position: absolute; top: clamp(28px, 3vw, 48px); right: clamp(28px, 3vw, 48px); font: 500 15px/1 var(--font-body); color: var(--color-bleu-sur-nuit); }
.c-carte__texte { display: flex; flex-direction: column; gap: 20px; }
.c-carte__titre { font: 500 clamp(2rem, 1.3rem + 2vw, 3.2rem)/1.02 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.c-carte__texte p:not(.pa-surtitre) { max-width: 30em; font: 400 17px/1.55 var(--font-body); color: var(--color-texte-nuit-v2); }
.c-carte .va-decouvrir { margin-top: 8px; }
.c-carte .va-decouvrir__rond { background: var(--color-blanc); }
.c-carte .va-decouvrir__rond svg { stroke: var(--color-bleu-profond); }
.c-carte__media { position: relative; margin: 0; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 18px; background: var(--color-nuit-bleue-2); }
.c-carte__media > img, .c-carte__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.c-carte__media--insta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: center; padding: 12px; }
.c-carte__media--insta > img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; }
.c-carte__media--fiche { background: none; aspect-ratio: auto; overflow: visible; }
.c-carte__media--fiche .a-fiche { aspect-ratio: 16 / 11; }

/* le curseur prend un mot, comme sur Cuberto : « Explorer » sur la visite */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .va-curseur { transition: background-color 300ms var(--ease-sortie), opacity 300ms var(--ease-sortie), width 450ms var(--ease-cub), height 450ms var(--ease-cub), margin 450ms var(--ease-cub); }
  .js .va-curseur::after { content: attr(data-texte); position: absolute; inset: 0; display: grid; place-items: center; font: 500 14px/1 var(--font-body); color: var(--color-blanc); opacity: 0; transition: opacity 250ms var(--ease-sortie); }
  .js .va-curseur.est-texte, .js .va-curseur.est-texte.est-lien, .js .va-curseur.est-texte.est-sombre { --cs: 1; width: 104px; height: 104px; margin: -52px 0 0 -52px; opacity: 1; background: var(--color-bleu); }
  .js .va-curseur.est-texte::after { opacity: 1; transition-delay: 150ms; }
  [data-curseur-texte], [data-curseur-texte] * { cursor: none; }
}

@media (max-width: 1100px) {
  .c-carte__in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
@media (max-width: 767px) {
  .mh-grille { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mh { padding-top: 92px; }
  .mh-texte { padding-bottom: 0; }
  .mh-femme { aspect-ratio: 4 / 4.3; border-radius: 22px; }
  .mh-visite { left: 12px; bottom: 12px; width: 52%; padding: 4px; border-radius: 16px; }
  .mh-visite__ecran { border-radius: 12px; }
  .mh-visite__legende { left: 10px; right: 10px; bottom: 10px; font-size: 9px; }
  .mh-visite__legende b { display: none; }
  .c-carte { position: static; }
  .c-carte__in { padding: 24px 20px 20px; border-radius: 22px; transform: none; }
  .c-carte__in::after { display: none; }
}

/* ================= la visite interactive ================= */
:root {
  --color-verre-ex: oklch(100% 0 0 / 0.14);
  --color-verre-ex-fort: oklch(100% 0 0 / 0.26);
  --color-bord-ex: oklch(100% 0 0 / 0.42);
  --color-rail-ex: oklch(100% 0 0 / 0.22);
  --color-voile-ex: oklch(12% 0.05 266 / 0.6);
  --color-voile-ex-0: oklch(12% 0.05 266 / 0);
}
html.ex-ouvert { overflow: hidden; }
html.ex-ouvert .va-curseur { opacity: 0 !important; }
.ex { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; color: var(--color-blanc); background: transparent; }
.ex::backdrop { background: var(--color-voile-ex-0); transition: background-color 600ms var(--ease-sortie); }
.ex.est-ouvert::backdrop { background: var(--color-voile-ex); }
.ex__scene { position: absolute; inset: 0; overflow: hidden; outline: none; background: var(--color-nuit-bleue); clip-path: var(--depart, inset(0)); transition: clip-path 800ms var(--ease-cub); touch-action: none; cursor: grab; }
.ex.est-tenu .ex__scene { cursor: grabbing; }
.ex.est-ouvert .ex__scene { clip-path: inset(0 0 0 0 round 0); }
.ex.se-ferme .ex__scene { clip-path: var(--depart, inset(0)); transition-duration: 500ms; }
.ex__scene:focus-visible { box-shadow: inset 0 0 0 2px var(--color-blanc); }
/* l'ambiance : la pièce traversée, floutée, remplit les bords que l'image entière laisse libres */
.ex__ambiance { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(56px) saturate(1.2) brightness(0.42); pointer-events: none; }
/* l'image entière, jamais rognée ni agrandie : le cabinet se voit d'un bord à l'autre, à la définition du film */
.ex__cadre { position: absolute; inset: 0; }
.ex__affiche, .ex__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* porte 1 : la vidéo n'apparaît qu'une fois une image décodée ; porte 2 : l'image d'attente s'efface après la première image peinte */
.ex__video { opacity: 0; }
.ex.video-prete .ex__video { opacity: 1; }
.ex.video-peinte .ex__affiche { visibility: hidden; }
.ex__voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--color-voile-ex) 0%, var(--color-voile-ex-0) 16%, var(--color-voile-ex-0) 78%, var(--color-voile-ex) 100%); }
.ex__haut, .ex__bas { opacity: 0; transition: opacity 400ms var(--ease-sortie); }
.ex.est-ouvert .ex__haut, .ex.est-ouvert .ex__bas { opacity: 1; transition-delay: 450ms; }
.ex__haut { position: absolute; left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px); top: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-top)); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; pointer-events: none; }
.ex__titre { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.ex__titre .logo-n { grid-row: span 2; width: 44px; height: 44px; }
.ex__titre span { display: block; font: 500 12px/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.ex__titre b { display: block; margin-top: 8px; font: 500 clamp(1.6rem, 1rem + 1.8vw, 2.75rem)/1 var(--font-display); letter-spacing: -0.03em; }
.ex__fermer { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 8px 0 22px; border: 0; border-radius: 999px; font: 500 15px/1 var(--font-body); color: var(--color-blanc); background: var(--color-verre-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); cursor: pointer; transition: background-color 300ms var(--ease-sortie); }
.ex__fermer:hover { background: var(--color-verre-ex-fort); }
.ex__fermer i { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--color-blanc); }
.ex__fermer i::before, .ex__fermer i::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; border-radius: 1px; background: var(--color-nuit-bleue); transform: rotate(45deg); transition: transform 400ms var(--ease-cub); }
.ex__fermer i::after { transform: rotate(-45deg); }
.ex__fermer:hover i::before { transform: rotate(135deg); }
.ex__fermer:hover i::after { transform: rotate(45deg); }
.ex__fermer:focus-visible { outline: 2px solid var(--color-blanc); outline-offset: 3px; }

/* la cinématique d'aide, 1 : la carte du geste, au centre */
.ex__tuto { position: absolute; left: 50%; top: 50%; width: min(700px, calc(100% - 32px)); padding: 28px 28px 24px; border-radius: 28px; text-align: center; background: var(--color-voile-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); -webkit-backdrop-filter: blur(24px) saturate(1.2); backdrop-filter: blur(24px) saturate(1.2); opacity: 0; transform: translate(-50%, -44%) scale(0.96); pointer-events: none; transition: opacity 500ms var(--ease-sortie), transform 800ms var(--ease-cub); }
.ex.tuto-carte:not(.a-touche) .ex__tuto { opacity: 1; transform: translate(-50%, -50%); }
.ex__gestes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 460px; margin-inline: auto; }
.ex__geste { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 16px 10px 14px; border-radius: 18px; background: var(--color-verre-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); }
.ex__geste .geste { width: 100%; max-width: 150px; }
.ex__geste figcaption { font: 400 14px/1.35 var(--font-body); opacity: 0.86; }
.ex__geste figcaption b { display: block; margin-bottom: 2px; font-weight: 600; font-size: 16px; opacity: 1; }
.ex__geste--doigt { display: none; }
.mode-doigt .ex__gestes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mode-doigt .ex__geste--bureau { display: none; }
.mode-doigt .ex__geste--doigt { display: grid; }
.mode-fixe .ex__gestes { display: none; }

.ex__tuto-titre { margin-top: 24px; font: 500 clamp(1.6rem, 1.25rem + 1vw, 2.2rem)/1.1 var(--font-display); letter-spacing: -0.03em; text-wrap: balance; }
.ex__tuto-texte { margin: 12px auto 0; max-width: 32em; font: 400 17px/1.5 var(--font-body); opacity: 0.9; text-wrap: pretty; }
.ex__jauge { height: 3px; margin-top: 22px; overflow: hidden; border-radius: 2px; background: var(--color-rail-ex); transition: opacity 500ms var(--ease-sortie); }
.ex__jauge i { display: block; height: 100%; background: var(--color-blanc); transform-origin: 0 50%; transform: scaleX(0); transition: transform 240ms linear; }
.ex.est-chargee .ex__jauge { opacity: 0; }

/* les gestes dessinés (carte d'aide et page Vidéo 3D) : un trait, des doigts transparents, une flèche */
.geste { display: block; height: auto; overflow: hidden; color: inherit; }
.geste .g-trait, .geste .g-fleche { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.geste .g-fleche { opacity: 0.7; }
.geste .g-plein, .geste .g-appui { fill: currentColor; }
.geste .g-doigt { fill: currentColor; fill-opacity: 0.16; stroke: currentColor; stroke-width: 2; }
.geste .g-onde { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.geste .g-touche__fond { fill: currentColor; fill-opacity: 0; }
.geste .g-doigts { animation: g-glisse-haut 2200ms var(--ease-cub) infinite; }
.geste .g-doigts--molette { animation-name: g-roule; }
.geste .g-doigts--glisse { animation-name: g-glisse-gauche; }
.geste .g-doigts--touche { animation-name: g-tape; }
.geste .g-onde { animation: g-onde 2200ms var(--ease-sortie) infinite; }
.geste .g-touche { animation: g-appuie 2200ms var(--ease-cub) infinite; }
.geste .g-touche .g-touche__fond { animation: g-allume 2200ms var(--ease-cub) infinite; }
.geste .g-molette { animation: g-molette 2200ms var(--ease-cub) infinite; }
@keyframes g-glisse-haut { 0% { transform: translateY(18px); opacity: 0; } 15% { opacity: 1; } 62% { transform: translateY(-14px); opacity: 1; } 80%, 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes g-roule { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(7px); } }
@keyframes g-molette { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes g-glisse-gauche { 0% { transform: translateX(14px); opacity: 0; } 15% { opacity: 1; } 62% { transform: translateX(-34px); opacity: 1; } 80%, 100% { transform: translateX(-34px); opacity: 0; } }
@keyframes g-tape { 0%, 30%, 100% { transform: translateY(0); } 40% { transform: translateY(5px); } 50% { transform: translateY(0); } }
@keyframes g-onde { 0%, 38% { opacity: 0; transform: scale(0.6); } 45% { opacity: 0.9; } 80%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes g-appuie { 0%, 30%, 70%, 100% { transform: translateY(0); } 40%, 60% { transform: translateY(2px); } }
@keyframes g-allume { 0%, 30%, 70%, 100% { fill-opacity: 0; } 40%, 60% { fill-opacity: 0.35; } }

/* la petite souris du rappel : la molette roule vers le bas, encore et encore */
.ex__souris { --course: 16px; position: relative; flex: none; width: 46px; height: 72px; border-radius: 23px; box-shadow: inset 0 0 0 2px var(--color-blanc); }
.ex__souris i { position: absolute; left: 50%; top: 13px; width: 6px; height: 13px; margin-left: -3px; border-radius: 3px; background: var(--color-blanc); animation: ex-molette 1500ms var(--ease-cub) infinite; }
@keyframes ex-molette { 0% { transform: translateY(0); opacity: 0; } 18% { opacity: 1; } 70% { transform: translateY(var(--course)); opacity: 0; } 100% { transform: translateY(var(--course)); opacity: 0; } }
/* la cinématique, 2 et 3 : la visite avance seule, puis un rappel attend le premier geste */
.ex__rappel { position: absolute; left: 50%; bottom: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-bottom) + 92px); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 20px 10px 12px; border-radius: 999px; font: 500 15px/1.3 var(--font-body); white-space: nowrap; background: var(--color-voile-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity 500ms var(--ease-sortie), transform 700ms var(--ease-cub); }
.ex.tuto-rappel:not(.a-touche) .ex__rappel { opacity: 1; transform: translate(-50%, 0); }
.ex__souris--mini { --course: 8px; width: 22px; height: 34px; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--color-blanc); }
.ex__souris--mini i { top: 6px; width: 4px; height: 7px; margin-left: -2px; border-radius: 2px; }
.mode-doigt .ex__souris--mini, .mode-fixe .ex__souris--mini { display: none; }
.mode-doigt .ex__rappel, .mode-fixe .ex__rappel { padding-left: 20px; }

.ex__bas { position: absolute; left: clamp(16px, 3vw, 40px); right: clamp(16px, 3vw, 40px); bottom: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-bottom)); }
.ex__ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ex__pieces { display: flex; flex-wrap: wrap; gap: 8px; }
.ex__pieces li { flex: none; }
.ex__pieces button, .ex__lecture { height: 40px; padding: 0 16px; white-space: nowrap; border: 0; border-radius: 999px; font: 500 14px/1 var(--font-body); color: var(--color-blanc); background: var(--color-verre-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); cursor: pointer; transition: background-color 300ms var(--ease-sortie), color 300ms var(--ease-sortie); }
.ex__pieces button:hover, .ex__lecture:hover { background: var(--color-verre-ex-fort); }
.ex__pieces button[aria-current="true"] { color: var(--color-nuit-bleue); background: var(--color-blanc); }
.ex__pieces button:focus-visible, .ex__lecture:focus-visible { outline: 2px solid var(--color-blanc); outline-offset: 3px; }
.ex__lecture { flex: none; display: inline-flex; align-items: center; gap: 10px; padding-left: 8px; }
.ex__lecture i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--color-blanc); }
.ex__lecture i::before { content: ""; position: absolute; left: 10px; top: 8px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--color-nuit-bleue); }
.ex__lecture[aria-pressed="true"] i::before { left: 9px; top: 8px; width: 3px; height: 10px; border: 0; border-left: 3px solid var(--color-nuit-bleue); border-right: 3px solid var(--color-nuit-bleue); width: 8px; box-sizing: border-box; }
.mode-fixe .ex__lecture { display: none; }
.ex__rail { position: relative; height: 3px; margin-top: 16px; overflow: hidden; border-radius: 2px; background: var(--color-rail-ex); }
.ex__rail i { position: absolute; inset: 0; background: var(--color-blanc); transform-origin: 0 50%; transform: scaleX(0); }
.ex__charge { position: absolute; right: 0; bottom: calc(100% + 12px); font: 500 12px/1 var(--font-body); opacity: 0.75; }
.mode-doigt .ex__scene { cursor: auto; }
/* le curseur : un rond qui dit le geste */
.ex__curseur { position: fixed; left: 0; top: 0; z-index: 5; display: none; width: 104px; height: 104px; margin: -52px 0 0 -52px; pointer-events: none; transform: translate3d(-200px, -200px, 0); }
.ex__curseur span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font: 500 14px/1 var(--font-body); background: var(--color-verre-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 300ms var(--ease-cub); }
.ex__curseur span::before, .ex__curseur span::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -4px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; }
.ex__curseur span::before { top: 16px; transform: rotate(45deg); }
.ex__curseur span::after { bottom: 16px; transform: rotate(-135deg); }
.ex.est-tenu .ex__curseur span { transform: scale(0.82); }
@media (hover: hover) and (pointer: fine) {
  .ex__scene { cursor: none; }
  .ex__curseur { display: block; }
}
.ex__court { display: none; }
@media (max-width: 767px) {
  .ex__ligne { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .ex__lecture { align-self: flex-start; height: 36px; font-size: 13px; }
  .ex__pieces { display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 6px; }
  .ex__pieces button { height: 36px; padding: 0 11px; font-size: 13px; }
  .ex__long { display: none; }
  .ex__court { display: inline; }
  .ex__charge { bottom: auto; top: 6px; }
  .ex__rappel { bottom: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-bottom) + 112px); font-size: 14px; }
  .ex__tuto { padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex__scene, .ex::backdrop, .ex__tuto, .ex__rappel { transition: none; }
  .ex__souris i, .geste .g-doigts, .geste .g-onde, .geste .g-touche, .geste .g-touche__fond, .geste .g-molette { animation: none; opacity: 1; }
}

/* ================= la page Vidéo 3D ================= */
/* le premier écran : la visite en grand, dans un cadre presque bord à bord sous l'en-tête */
.vz { padding: 96px clamp(10px, 1.4vw, 24px) 0; }
.vz__scene { position: relative; display: flex; align-items: flex-end; height: max(560px, calc(100svh - 112px)); overflow: hidden; border-radius: clamp(18px, 2vw, 32px); color: var(--color-blanc); background: var(--color-nuit-bleue); isolation: isolate; }
.vz__fond { position: absolute; inset: 0; z-index: -1; display: block; }
.vz__fond img, .vz__fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1600ms var(--ease-cub); }
.vz__fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-voile-ex-0) 34%, var(--color-voile-ex) 100%), linear-gradient(90deg, var(--color-voile-ex) 0%, var(--color-voile-ex-0) 62%); }
.vz__contenu { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; width: 100%; padding: clamp(24px, 4vw, 64px); pointer-events: none; }
.vz__contenu a, .vz__contenu button { pointer-events: auto; }
.vz__surtitre { color: var(--color-blanc); opacity: 0.86; }
.vz__titre { max-width: 13em; margin-top: 18px; font: 500 clamp(2.5rem, 1.4rem + 4.2vw, 6.25rem)/0.96 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; }
.vz__chapo { max-width: 34em; margin-top: 22px; font: 400 clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem)/1.45 var(--font-body); opacity: 0.9; text-wrap: pretty; }
.vz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
/* le bouton principal : il montre le geste qu'on fera dans la visite */
.vz__explorer { display: inline-flex; align-items: center; gap: 16px; height: 68px; padding: 0 30px 0 10px; border-radius: 999px; font: 500 18px/1 var(--font-body); color: var(--color-nuit-bleue); text-decoration: none; background: var(--color-blanc); transition: transform 500ms var(--ease-cub), box-shadow 500ms var(--ease-cub); }
.vz__explorer:hover { transform: scale(1.03); box-shadow: 0 18px 50px -18px var(--color-ombre-menu); }
.vz__explorer:focus-visible { outline: 2px solid var(--color-blanc); outline-offset: 4px; }
.vz__souris { --course: 9px; position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-bleu); }
.vz__souris::before { content: ""; width: 18px; height: 28px; border-radius: 9px; box-shadow: inset 0 0 0 1.5px var(--color-blanc); }
.vz__souris i { position: absolute; left: 50%; top: 15px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: var(--color-blanc); animation: ex-molette 1500ms var(--ease-cub) infinite; }
.vz__explorer small { display: block; margin-top: 6px; font: 400 13px/1 var(--font-body); color: var(--color-texte-v2); }
.vz .va-pilule--contour { color: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-bord-ex); }
.vz .va-pilule--contour::before { background: var(--color-blanc); }
.vz .va-pilule--contour:hover, .vz .va-pilule--contour:focus-visible { color: var(--color-nuit-bleue); }
.vz__prix { color: var(--color-blanc); }
.vz__prix svg { stroke: currentColor; }
.vz__piece { display: grid; gap: 10px; min-width: 200px; padding: 16px 18px; border-radius: 18px; font: 500 15px/1 var(--font-body); background: var(--color-verre-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.vz__piece small { font: 500 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; }
.vz__progres { display: block; height: 2px; overflow: hidden; border-radius: 1px; background: var(--color-rail-ex); }
.vz__progres::after { content: ""; display: block; height: 100%; background: var(--color-blanc); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
@media (hover: hover) and (pointer: fine) { .vz__scene:hover .vz__fond img, .vz__scene:hover .vz__fond video { transform: scale(1.02); } }

/* les pièces : un clic ouvre la visite à cet endroit */
.vz-pieces__liste { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: 16 / 7.4; margin-top: clamp(32px, 3vw, 48px); }
.vz-pieces__liste li { min-height: 0; }
.vz-pieces__liste li:first-child { grid-row: span 2; }
.vz-piece { position: relative; display: block; height: 100%; overflow: hidden; border-radius: 20px; color: var(--color-blanc); text-decoration: none; background: var(--color-nuit-bleue); isolation: isolate; }
.vz-piece img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-cub); }
.vz-piece::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--color-voile-ex-0) 50%, var(--color-voile-ex) 100%); }
.vz-piece__num { position: absolute; left: 18px; top: 16px; font: 500 13px/1 var(--font-body); letter-spacing: 0.06em; opacity: 0.86; }
.vz-piece__nom { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.vz-piece__nom i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-verre-ex); box-shadow: inset 0 0 0 1px var(--color-bord-ex); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color 300ms var(--ease-sortie); }
.vz-piece__nom i::before { content: ""; position: absolute; left: 16px; top: 14px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--color-blanc); }
.vz-pieces__liste li:first-child .vz-piece__nom { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.25rem); }
@media (hover: hover) and (pointer: fine) {
  .vz-piece:hover img { transform: scale(1.05); }
  .vz-piece:hover .vz-piece__nom i { background: var(--color-bleu); }
}
.vz-piece:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 3px; }

/* comment se passe une visite 3D : trois grands blocs, une image chacun */
.vz-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 3vw, 56px); counter-reset: etape; }
.vz-etapes li { display: flex; flex-direction: column; padding: 14px 14px clamp(28px, 2.4vw, 40px); border-radius: 28px; background: var(--color-blanc-casse); }
.vz-etapes__image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: var(--color-nuit-bleue); }
.vz-etapes__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vz-etapes__image span { position: absolute; left: 12px; bottom: 12px; padding: 8px 12px; border-radius: 999px; font: 500 14px/1 var(--font-body); color: var(--color-encre-v); background: var(--color-verre-blanc); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.vz-etapes__image--formats { background: var(--color-bleu-profond-2); }
.vz-etapes__image--formats img.is-paysage { inset: 16% auto auto 7%; width: 62%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; box-shadow: 0 24px 40px -24px var(--color-ombre-menu); }
.vz-etapes__image--formats img.is-portrait { inset: 9% 8% auto auto; width: 30%; height: auto; aspect-ratio: 4 / 5; border-radius: 10px; box-shadow: 0 24px 40px -24px var(--color-ombre-menu); }
.vz-etapes h3 { display: flex; align-items: baseline; gap: 14px; margin: 28px 14px 0; font: 500 clamp(1.75rem, 1.3rem + 1.1vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -0.03em; }
.vz-etapes h3::before { counter-increment: etape; content: "0" counter(etape); font: 500 15px/1 var(--font-body); letter-spacing: 0.06em; color: var(--color-bleu); transform: translateY(-0.6em); }
.vz-etapes p { margin: 16px 14px 0; font: 400 clamp(1.1rem, 1rem + 0.3vw, 1.3rem)/1.5 var(--font-body); color: var(--color-texte-v2); text-wrap: pretty; }

/* les gestes, montés avant d'entrer dans la visite */
.vz-gestes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 2.4vw, 40px); }
.vz-gestes li { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 18px 14px 10px; border-radius: 20px; color: var(--color-encre-v); background: var(--color-blanc-casse); }
.vz-gestes .geste { width: 88px; }
.vz-gestes p { font: 400 15px/1.4 var(--font-body); color: var(--color-texte-v2); }
.vz-gestes b { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 600; color: var(--color-encre-v); }

/* deux formats : la visite paysage en grand, la version portrait dans un téléphone, telle qu'elle paraît sur Instagram */
.vz-formats { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 96px); margin-top: clamp(32px, 3vw, 56px); padding: clamp(20px, 4vw, 72px); border-radius: 32px; background: var(--color-blanc-casse); }
.vz-formats figure { margin: 0; }
.vz-formats__ecran { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: var(--color-nuit-bleue); box-shadow: 0 40px 80px -40px var(--color-ombre-menu); }
.vz-formats__ecran img, .vz-formats__ecran video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vz-formats figcaption { margin-top: 22px; font: 400 clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem)/1.45 var(--font-body); color: var(--color-texte-v2); }
.vz-formats figcaption b { display: block; margin-bottom: 4px; font: 500 clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.025em; color: var(--color-encre-v); }
.vz-formats__portrait { position: relative; width: clamp(240px, 22vw, 320px); }
.vz-formats__portrait figcaption { text-align: left; }
/* telephones-bleu.css est chargé après : on reprend la main par la spécificité */
.vz-formats .vz-tel { position: relative; left: auto; top: auto; width: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); --tranche: clamp(7px, 0.7vw, 10px); }
.vz-formats .vz-tel .tel__ecran { min-height: 0; font-size: clamp(9px, 0.72vw, 11px); }
.vz-tel .ig__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vz-tel__avatar { display: grid; place-items: center; font: 600 1em/1 var(--font-display); color: var(--color-blanc); background: var(--color-bleu); }
.vz-formats .vz-formats__exemple { top: 18px; left: auto; right: -12px; z-index: 6; }

@media (max-width: 1100px) {
  .vz-gestes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vz-etapes { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .vz__contenu { grid-template-columns: minmax(0, 1fr); }
  .vz__piece { justify-self: start; }
}
@media (max-width: 767px) {
  .vz { padding-top: 84px; }
  .vz__scene { height: auto; min-height: calc(100svh - 96px); }
  .vz__fond::after { background: linear-gradient(180deg, var(--color-voile-ex-0) 18%, var(--color-voile-ex) 62%); }
  .vz__contenu { padding: 22px 18px 20px; gap: 18px; }
  .vz__explorer { height: 60px; padding-right: 22px; font-size: 16px; }
  .vz__explorer small { display: none; }
  .vz__piece { display: none; }
  .vz-pieces__liste { display: flex; aspect-ratio: auto; gap: 10px; margin-inline: calc(-1 * var(--va-marge)); padding-inline: var(--va-marge); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .vz-pieces__liste::-webkit-scrollbar { display: none; }
  .vz-pieces__liste li { flex: none; width: 78%; aspect-ratio: 4 / 3; scroll-snap-align: center; }
  .vz-etapes { grid-template-columns: minmax(0, 1fr); }
  .vz-gestes { grid-template-columns: minmax(0, 1fr); }
  .vz-formats { grid-template-columns: minmax(0, 1fr); justify-items: center; border-radius: 24px; }
  .vz-formats__portrait { width: min(270px, 72vw); }
}
@media (prefers-reduced-motion: reduce) { .vz__souris i { animation: none; } }
@media (max-width: 767px) { .mh-femme figcaption { top: 14px; bottom: auto; right: 14px; } }

/* ================= accueil 1 · textes de l'agent vente ================= */
.f-nielia__grille { display: grid; grid-template-columns: 282px minmax(0, 1fr) minmax(0, 260px); gap: 32px clamp(32px, 4vw, 72px); align-items: start; width: min(100% - 2 * var(--va-marge), 1180px); }
.f-nielia .va-libelle { padding-top: 0.55em; }
.f-nielia__texte blockquote { margin: 0; }
.f-video { margin: 0; }
.f-video__cadre { position: relative; aspect-ratio: 9 / 14; overflow: hidden; border-radius: 22px; background: var(--color-nuit-bleue); }
.f-video__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.f-video__lancer { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 8px; border: 0; border-radius: 999px; font: 500 15px/1 var(--font-body); color: var(--color-encre-v); background: var(--color-verre-blanc); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); cursor: pointer; transition: background-color 300ms var(--ease-sortie); }
.f-video__lancer:hover { background: var(--color-blanc); }
.f-video__icone { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--color-bleu); }
.f-video__icone::after { content: ""; position: absolute; left: 14px; top: 11px; border-left: 11px solid var(--color-blanc); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.f-video.est-lancee .f-video__lancer { display: none; }
.f-video figcaption { margin-top: 10px; font: 400 13px/1.4 var(--font-body); color: var(--color-texte-v2); }
.c-services__tete { margin-bottom: clamp(40px, 4vw, 64px); }
.r-preuve { max-width: 40em; margin-top: clamp(28px, 3vw, 40px); }
.r-preuve__titre { font: 500 clamp(1.4rem, 1.1rem + 0.9vw, 2rem)/1.2 var(--font-display); letter-spacing: -0.02em; }
.r-preuve p:not(.r-preuve__titre) { margin-top: 14px; font: 400 17px/1.55 var(--font-body); color: var(--color-texte-nuit-v2); }
.va-cas__ligne b { display: block; margin-bottom: 4px; font: 500 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu-sur-nuit); }
.va-travaux--seul { padding-bottom: clamp(80px, 5rem + 2vw, 108px); }
.va-travaux--seul .va-travaux__fond { border-radius: clamp(28px, 4.5vw, 72px); }
.z-maquette { margin-top: var(--va-section); padding: 0 0 var(--va-section); }
.z-maquette__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px clamp(40px, 5vw, 96px); align-items: center; padding: clamp(28px, 4vw, 64px); border-radius: clamp(28px, 4.5vw, 56px); background: var(--color-blanc-casse); }
.z-maquette__titre { font: 500 var(--va-titre-section)/1 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.z-maquette .a-contact__phrase { margin: 24px 0 0; text-wrap: pretty; }
.z-maquette__contact { margin-top: 28px; font: 400 15px/1.5 var(--font-body); color: var(--color-texte-v2); }
.z-maquette__contact a { color: var(--color-encre-v); text-underline-offset: 0.2em; }
.z-maquette__formulaire { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--va-rayon); background: var(--color-blanc); box-shadow: 0 30px 60px -40px var(--color-ombre-menu); }
.z-maquette .pa-form__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.z-maquette__gratuit { font: 500 14px/1.3 var(--font-body); color: var(--color-texte-v2); }
@media (max-width: 1100px) {
  .f-nielia__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
  .f-nielia .va-libelle { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 767px) {
  .f-nielia__grille { grid-template-columns: minmax(0, 1fr); }
  .f-video { max-width: 240px; }
  .z-maquette__in { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; border-radius: 28px; }
  .z-maquette .pa-form__envoi .va-pilule { width: 100%; }
}

/* au doigt, pas d'état de survol : le premier toucher ouvre la visite au lieu de seulement « survoler » la carte */
@media (hover: hover) and (pointer: fine) {
  .mh-visuel:hover .mh-femme img { transform: scale(1.025); }
  .mh-visite:hover { transform: translateY(-6px) rotate(-1deg); }
}
/* les publications d'Instagram sont des exemples : une étiquette posée sur les téléphones */
.pa-exemple { position: absolute; left: 0; top: 0; z-index: 5; padding: 8px 12px; border-radius: 999px; font: 500 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-blanc); background: var(--color-encre-v); }

/* ================= le logo « n. » (l'icône de Nielia) ================= */
.logo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-n { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.28em; }
.pa-surtitre--logo { display: flex; align-items: center; gap: 10px; }
.pa-surtitre--logo .logo-n { width: 22px; height: 22px; }
.pa-surtitre--logo span { margin: 0 -0.15em; }
.mh-femme figcaption { display: inline-flex; align-items: center; gap: 8px; padding-left: 8px; }
.mh-femme figcaption .logo-n { width: 18px; height: 18px; vertical-align: 0; }
.a-fondateur__signe--logo { display: flex; align-items: center; gap: 12px; }
.a-fondateur__signe--logo .logo-n { width: 32px; height: 32px; }
.z-maquette__logo { display: block; margin-bottom: 24px; }
.z-maquette__logo .logo-n { width: 56px; height: 56px; }
.vp-pied__icone { display: block; margin-bottom: 20px; }
.vp-pied__icone .logo-n { width: 64px; height: 64px; --logo-fond: var(--color-blanc); --logo-trait: var(--color-bleu-profond); }

/* ================= les photos du cabinet ================= */
.a-fiche__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: -2px; }
.a-fiche__photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.f-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 32px 0 0; }
.f-photos img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; }
.f-photos figcaption { grid-column: 1 / -1; font: 400 13px/1.4 var(--font-body); color: var(--color-texte-v2); }
.pa-origine__photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }

/* ================= la fiche Google réelle du Dr Fejes-Raluy (capture) ================= */
.pa-capture-google { margin: 0; justify-self: center; width: min(100%, 380px); }
.pa-capture-google img { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 0 0 1px var(--color-filet-v), 0 50px 90px -50px var(--color-ombre-menu); }
.pa-capture-google figcaption { margin-top: 14px; font: 400 13px/1.45 var(--font-body); color: var(--color-texte-v2); }
.c-carte__media--capture { background: var(--color-blanc); }
.c-carte__media--capture > img { object-position: 50% 0; }
.va-cas__image--capture { background: var(--color-blanc); }

/* survols réservés à la souris : au doigt, ils restaient collés après le toucher */
@media (hover: hover) and (pointer: fine) {
  .p-porte__bouton:hover { background: var(--color-bleu); }
  .cc-chiffre:hover { box-shadow: inset 0 0 0 2px var(--color-bleu); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .cc-cercle.est-actif .cc-chiffre:hover { --s: 1.06; }
}
/* le message des formulaires : la zone d'annonce existe toujours, vide et sans place tant qu'il n'y a rien à dire */
.pa-form__suite:empty { display: block; margin: 0; padding: 0; background: none; }
/* réalisations : la liste des sites reste lisible au lecteur d'écran, et visible quand un lien prend le focus clavier */
.ruban__cartes.lecteur-seul:focus-within { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ruban__cartes.lecteur-seul:focus-within a { padding: 8px 14px; border-radius: 999px; color: var(--color-blanc); background: var(--color-encre-v); }

/* ================= pleine largeur (16 octobre, demande de Niel) =================
   Le contenu occupe toute la largeur de l'écran, bordé seulement par les marges latérales.
   Les textes gardent une longueur de ligne lisible, alignés à gauche, jamais recentrés dans une colonne. */
.va-duo { grid-template-columns: minmax(180px, 20%) minmax(0, 1fr); }
.va-duo > :not(.va-libelle) { max-width: 980px; }
.f-nielia__grille { width: calc(100% - 2 * var(--va-marge)); grid-template-columns: minmax(180px, 20%) minmax(0, 980px) minmax(0, 260px); justify-content: start; }
.t-hero__grille { width: calc(100% - 2 * var(--va-marge)); }
.a-hero__titre { font-size: clamp(2.6rem, 0.9rem + 4.4vw, 6.5rem); }
.va-travaux__titre, .pa-h2, .z-maquette__titre, .va-contact__titre, .pa-fin__titre, .t-offres__titre { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 5.5rem); }

/* le premier écran de l'accueil 1 : la photo remplit toute la hauteur et va jusqu'au bord droit de l'écran */
.mh { padding-top: 0; }
.mh .mh-grille { width: auto; margin: 0 0 0 var(--va-marge); min-height: 100svh; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(32px, 4vw, 96px); align-items: stretch; }
.mh-texte { align-self: center; padding: 128px 0 72px; }
.mh-visuel { position: relative; min-height: 100svh; padding-bottom: 0; }
.mh-femme { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0 0 0 clamp(28px, 3vw, 48px); }
.mh-femme img { object-position: 50% 20%; }
.mh-femme figcaption { right: clamp(16px, 2vw, 32px); bottom: clamp(16px, 2vw, 32px); }
.mh-visite { left: clamp(-160px, -8vw, -48px); bottom: clamp(32px, 6vh, 72px); width: clamp(260px, 22vw, 420px); }
@media (max-width: 767px) {
  .mh .mh-grille { margin: 0; min-height: 0; gap: 28px; grid-template-columns: minmax(0, 1fr); }
  .mh-texte { padding: 92px var(--va-marge) 0; }
  .mh-visuel { min-height: 0; aspect-ratio: 4 / 4.6; }
  .mh-femme { border-radius: 0; }
  .mh-femme figcaption { top: 14px; bottom: auto; right: 14px; }
  .mh-visite { left: 12px; bottom: 12px; width: 52%; }
  .va-duo { grid-template-columns: minmax(0, 1fr); }
  .f-nielia__grille { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .f-nielia__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
}

/* ================= accueil 1, brief du 16 octobre : un accueil simple ================= */
:root {
  /* l'identité du modèle Roussel (cabinet fictif), relevée sur son site */
  --roussel-encre: oklch(13% 0 0);          /* #010101 */
  --roussel-papier: oklch(100% 0 0);        /* #ffffff */
  --roussel-gris: oklch(96.5% 0.002 160);   /* #f4f5f4 */
  --roussel-rouge: oklch(58% 0.23 18);      /* #e60e37, le rouge des lèvres */
}
.h-tete { max-width: 760px; }
.h-tete--ligne { max-width: none; }
.h-titre { margin-top: 16px; font: 500 clamp(2.2rem, 1.1rem + 2.8vw, 4.4rem)/1.02 var(--font-display); letter-spacing: -0.035em; text-wrap: balance; }
.h-chapo { margin-top: 22px; max-width: 34em; font: 400 var(--va-phrase)/1.5 var(--font-body); color: var(--color-texte-v2); text-wrap: pretty; }
.h-note { margin-top: 18px; font: 400 13px/1.45 var(--font-body); color: var(--color-texte-v2); }

/* 01 · identité : A le logo, B le site, C les publications */
.h-chaine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-areas: "logo site" "insta site"; gap: 20px clamp(20px, 2.4vw, 40px); margin-top: clamp(36px, 4vw, 64px); }
.h-chaine__etape--logo { grid-area: logo; }
.h-chaine__etape--site { grid-area: site; align-self: center; }
.h-chaine__etape--insta { grid-area: insta; }
.h-chaine__nom { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 500 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texte-v2); }
.h-chaine__nom span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; letter-spacing: 0; color: var(--color-blanc); background: var(--color-bleu); }
.h-marque { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 24px; align-items: start; padding: clamp(20px, 2vw, 28px); border-radius: var(--va-rayon); background: var(--roussel-papier); box-shadow: 0 0 0 1px var(--color-filet-v); }
.h-marque__mot { font: 800 clamp(1.7rem, 1.2rem + 1.2vw, 2.5rem)/0.88 var(--font-display); font-stretch: 78%; letter-spacing: -0.01em; text-transform: uppercase; color: var(--roussel-encre); }
.h-marque__lieu { grid-column: 1; margin-top: -8px; font: 500 13px/1.3 var(--font-body); color: var(--roussel-encre); }
.h-marque__couleurs { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(2, auto); gap: 12px 14px; }
.h-marque__couleurs li { display: grid; justify-items: center; gap: 6px; font: 500 11px/1 var(--font-body); color: var(--color-texte-v2); }
.h-marque__couleurs li::before { content: ""; width: 40px; height: 40px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); }
.h-marque__formes { grid-column: 1; display: flex; align-items: center; gap: 10px; font: 400 13px/1.3 var(--font-body); color: var(--color-texte-v2); }
.h-forme { display: inline-block; flex: none; border: 1.5px solid var(--roussel-encre); }
.h-forme--carte { width: 30px; height: 22px; border-radius: 7px; }
.h-forme--pilule { width: 34px; height: 16px; border-radius: 999px; background: var(--roussel-encre); }
.h-chaine__site { display: block; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px var(--color-filet-v), 0 50px 90px -50px var(--color-ombre-menu); }
.h-chaine__site img { width: 100%; height: auto; transition: transform 900ms var(--ease-cub); }
.h-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.h-post { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--roussel-gris); }
.h-post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h-post figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 3px; padding: 10px 10px 9px; background: var(--roussel-papier); }
.h-post figcaption b { font: 700 clamp(11px, 0.55rem + 0.35vw, 14px)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--roussel-encre); }
.h-post figcaption span { font: 800 8px/1 var(--font-display); font-stretch: 78%; letter-spacing: 0.02em; text-transform: uppercase; color: var(--roussel-encre); }
.h-post--encre { display: grid; place-items: center; background: var(--roussel-encre); }
.h-post--encre p { padding: 0 12px; font: 800 clamp(1.1rem, 0.7rem + 0.9vw, 1.7rem)/0.95 var(--font-display); font-stretch: 78%; text-transform: uppercase; color: var(--roussel-papier); }
.h-post--encre p i { display: inline-block; width: 0.24em; height: 0.24em; margin-left: 0.06em; background: var(--roussel-rouge); }
.h-post--encre figcaption { background: none; }
.h-post--encre figcaption span { color: var(--roussel-papier); }

/* 02 et 03 · un texte, un visuel, côte à côte */
.h-deux { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px clamp(40px, 6vw, 120px); align-items: center; }
.h-deux--inverse > :first-child { order: 2; }
.h-methode { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--color-filet-v-fort); }
.h-methode__titre { font: 500 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu); }
.h-methode ol { display: grid; gap: 12px; margin-top: 14px; counter-reset: etape; }
.h-methode li { position: relative; padding-left: 40px; font: 400 16px/1.5 var(--font-body); counter-increment: etape; }
.h-methode li::before { content: "0" counter(etape); position: absolute; left: 0; top: 1px; font: 500 14px/1.5 var(--font-body); color: var(--color-bleu); }
.h-extrait { position: relative; margin: 0; padding-bottom: clamp(56px, 7vw, 110px); }
.h-extrait__page { display: block; overflow: hidden; border-radius: 16px; box-shadow: 0 0 0 1px var(--color-filet-v), 0 50px 90px -50px var(--color-ombre-menu); }
.h-extrait__page img { width: 100%; height: auto; }
.h-extrait__zoom { position: absolute; right: -2%; bottom: clamp(36px, 4vw, 64px); width: 64%; height: auto; border-radius: 12px; border: 6px solid var(--color-blanc); box-shadow: 0 40px 80px -30px var(--color-ombre-menu); }
.h-extrait figcaption { position: absolute; left: 0; bottom: 0; max-width: 32%; font: 400 13px/1.45 var(--font-body); color: var(--color-texte-v2); }
.h-extrait figcaption a { color: var(--color-encre-v); text-underline-offset: 0.2em; }

/* 04 · les offres, en lignes */
.h-liste { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--color-filet-v-fort); }
.h-ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--color-filet-v-fort); transition: background-color 400ms var(--ease-sortie); }
.h-ligne__num { font: 500 15px/1 var(--font-body); color: var(--color-bleu); }
.h-ligne__lien { display: grid; gap: 6px; text-decoration: none; }
.h-ligne__lien b { font: 500 clamp(1.5rem, 1rem + 1.3vw, 2.4rem)/1.05 var(--font-display); letter-spacing: -0.025em; }
.h-ligne__lien span { max-width: 44em; font: 400 16px/1.45 var(--font-body); color: var(--color-texte-v2); }
.h-ligne__actions { display: flex; align-items: center; gap: 10px; }
.h-rond { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--color-encre-v); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); transition: background-color 300ms var(--ease-sortie), color 300ms var(--ease-sortie), transform 400ms var(--ease-cub); }
.h-rond svg { width: 18px; height: 18px; }
.h-rond--wa svg { fill: currentColor; }
.h-rond--plus svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.h-ligne .va-decouvrir { margin-left: 8px; }
.h-part { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; margin-top: 28px; }
.h-part > p:first-child { max-width: 44em; font: 400 16px/1.5 var(--font-body); color: var(--color-texte-v2); }
.h-part b { color: var(--color-encre-v); font-weight: 500; }
.h-part__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (hover: hover) and (pointer: fine) {
  .h-ligne:hover { background: var(--color-blanc-casse); }
  .h-rond:hover { color: var(--color-blanc); background: var(--color-encre-v); }
  .h-rond--plus:hover { background: var(--color-bleu); }
  .h-chaine__site:hover img { transform: scale(1.02); }
}

@media (max-width: 1100px) {
  .h-chaine { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "site" "insta"; }
  .h-deux { grid-template-columns: minmax(0, 1fr); }
  .h-deux--inverse > :first-child { order: 0; }
}
@media (max-width: 767px) {
  .h-ligne { grid-template-columns: 36px minmax(0, 1fr); }
  .h-ligne__actions { grid-column: 2; }
  .h-ligne .va-decouvrir { margin-left: auto; }
  .h-extrait { padding-bottom: 0; }
  .h-extrait__zoom { position: static; width: 88%; margin: -28px 0 0 auto; display: block; }
  .h-extrait figcaption { position: static; max-width: none; margin-top: 14px; }
  .h-marque { grid-template-columns: minmax(0, 1fr); }
  .h-marque__couleurs { grid-column: 1; grid-row: auto; grid-template-columns: repeat(4, auto); justify-content: start; }
}

/* ================= Comprendre : le cercle animé =================
   Le trait du cercle se dessine à l'arrivée, un pointillé tourne lentement autour, les chiffres se posent
   un à un, et une aiguille partie du centre pointe le chiffre choisi. */
.cc-anneau, .cc-aiguille, .cc-disque { display: none; }
@media (min-width: 900px) {
  .cc-cercle.est-actif .cc-anneau { display: block; position: absolute; inset: 64px; width: calc(100% - 128px); height: calc(100% - 128px); overflow: visible; z-index: 0; }
  .cc-anneau circle { fill: none; }
  .cc-anneau__trait { stroke: var(--color-filet-v-fort); stroke-width: 0.18; stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: 50% 50%; transform: rotate(-90deg); }
  .cc-anneau__pointille { stroke: var(--color-bleu); stroke-opacity: 0.4; stroke-width: 0.35; stroke-dasharray: 0.5 2.6; stroke-linecap: round; transform-origin: 50% 50%; opacity: 0; }
  .cc-cercle.est-vu .cc-anneau__trait { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--ease-cub); }
  .cc-cercle.est-vu .cc-anneau__pointille { opacity: 1; transition: opacity 800ms var(--ease-sortie) 1200ms; }
  .cc-cercle.est-actif .cc-aiguille { display: block; position: absolute; left: 50%; bottom: 50%; z-index: 1; width: 2px; height: calc(50cqi - 64px - 56px); margin-left: -1px; border-radius: 1px; background: linear-gradient(to top, var(--color-bleu-0), var(--color-bleu)); transform-origin: 50% 100%; transform: rotate(var(--angle, 0deg)); opacity: 0; transition: transform 900ms var(--ease-cub), opacity 600ms var(--ease-sortie); }
  .cc-cercle.est-vu .cc-aiguille { opacity: 1; transition-delay: 0ms, 1300ms; }
  .cc-cercle.est-actif .cc-disque { display: block; position: absolute; left: 50%; top: 50%; z-index: 2; width: calc((100cqi - 128px) * 0.56); aspect-ratio: 1; border-radius: 50%; background: var(--color-blanc-casse); transform: translate(-50%, -50%) scale(0.6); opacity: 0; transition: transform 1000ms var(--ease-cub) 300ms, opacity 600ms var(--ease-sortie) 300ms; }
  .cc-cercle.est-vu .cc-disque { transform: translate(-50%, -50%); opacity: 1; }
  .cc-cercle.est-actif .cc-detail { z-index: 3; }
  .cc-cercle.est-actif:not(.est-vu) .cc-chiffre { --s: 0.4; opacity: 0; }
  .cc-cercle.est-vu .cc-chiffre { transition: transform 700ms var(--ease-cub) calc(300ms + var(--i) * 70ms), opacity 500ms var(--ease-sortie) calc(300ms + var(--i) * 70ms), background-color 300ms var(--ease-sortie), color 300ms var(--ease-sortie), box-shadow 300ms var(--ease-sortie); }
  .cc-cercle.est-vu.est-touche .cc-chiffre { transition: transform 400ms var(--ease-cub), opacity 300ms var(--ease-sortie), background-color 300ms var(--ease-sortie), color 300ms var(--ease-sortie), box-shadow 300ms var(--ease-sortie); }
  .cc-cercle.est-actif .est-choisi .cc-chiffre { --s: 1.08; }
  .cc-cercle.est-actif:not(.est-vu) .cc-detail { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .cc-cercle.est-vu .cc-anneau__pointille { animation: cc-tourne 120s linear infinite; }
}
@keyframes cc-tourne { to { transform: rotate(360deg); } }
:root { --color-bleu-0: oklch(45% 0.29 266 / 0); }
.pa-cote--videos { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); justify-content: space-between; }
@media (max-width: 767px) { .pa-cote--videos .f-video { max-width: 260px; } }

/* accueil 1 : l'en-tête reste celui d'origine. La photo commence sous lui et s'arrête avant le bas de l'écran,
   un peu plus petite, bordée à gauche par des coins arrondis */
@media (min-width: 768px) {
  .mh .mh-grille { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
  .mh-femme { inset: 96px 0 28px 0; border-radius: clamp(24px, 2.4vw, 36px) 0 0 clamp(24px, 2.4vw, 36px); }
  .mh-visite { bottom: clamp(56px, 8vh, 96px); }
}

/* la ligne (sept liens, Contact compris, et les deux boutons) ne tient plus en dessous de 1 386 px : les liens passent dans le menu */
@media (max-width: 1385px) {
  .va-nav { display: none; }
  .va-burger { display: inline-grid; place-items: center; align-content: center; gap: 6px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--color-blanc-casse); cursor: pointer; }
  .va-burger i { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--color-encre-v); transition: transform 400ms var(--ease-cub); }
  .va-burger[aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }
  .va-burger[aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }
  .va-nav.est-ouvert { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: fixed; top: 84px; left: var(--va-marge); right: var(--va-marge); padding: 12px 24px 20px; border-radius: var(--va-rayon); background: var(--color-blanc); box-shadow: 0 30px 60px -20px var(--color-ombre-menu); }
  .va-nav.est-ouvert a { width: 100%; padding: 16px 0; font-size: 22px; border-bottom: 1px solid var(--color-filet-v); }
  .va-nav.est-ouvert a::after { display: none; }
  .va-nav__mobile { display: block; }
}
/* les cartes bleues des offres : Découvrir, WhatsApp et « + » sur le fond sombre */
.c-carte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.c-carte__actions .va-decouvrir { margin: 0 8px 0 0; color: var(--color-blanc); }
.c-carte .h-rond { color: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-nuit-v-fort); }
@media (hover: hover) and (pointer: fine) {
  .c-carte .h-rond:hover { color: var(--color-bleu-profond); background: var(--color-blanc); }
  .c-carte .h-rond--plus:hover { color: var(--color-blanc); background: var(--color-bleu); }
}
.h-offres .c-cartes { margin-top: clamp(28px, 3vw, 44px); }

/* ================= le site et son abonnement : ce qui est compris, et ce que la Visibilité ajoute ================= */
.pa-formule { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 12px; align-items: start; }
.pa-formule__site { height: 100%; }
.pa-formule__abonnements { display: grid; gap: 12px; }
.pa-formule__regle, .pa-formule__plus { padding: 18px 22px; border-radius: var(--va-rayon); font: 400 16px/1.5 var(--font-body); color: var(--color-texte-v2); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v); }
.va-section .pa-formule__regle, .va-section .pa-formule__plus { background: var(--color-blanc-casse); box-shadow: none; }
.pa-formule__regle b, .pa-formule__plus b { color: var(--color-encre-v); font-weight: 600; }
.pa-formule__plus a { margin-left: 6px; font-weight: 600; color: var(--color-bleu); text-underline-offset: 0.2em; }
.pa-formule__deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pa-formule__liste { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--color-filet-v); }
.pa-formule__liste li { position: relative; padding-left: 26px; font: 400 15px/1.45 var(--font-body); color: var(--color-texte-v2); }
.pa-formule__liste li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 6.9 10.6 11.5 5.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 12px no-repeat; }
.pa-formule__liste li b { color: var(--color-encre-v); font-weight: 600; }
.pa-prix__carte--bleue .pa-formule__liste { border-color: var(--color-filet-nuit-v); }
.pa-prix__carte--bleue .pa-formule__liste li { color: var(--color-texte-nuit-v2); }
.pa-prix__carte--bleue .pa-formule__liste li b { color: var(--color-blanc); }
.pa-prix__carte--bleue .pa-formule__liste li::before { background-color: var(--color-blanc); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 6.9 10.6 11.5 5.6' fill='none' stroke='%2306156e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 1100px) { .pa-formule { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .pa-formule__deux { grid-template-columns: minmax(0, 1fr); } }

/* page Site : la page « Le cabinet » du modèle Roussel défile dans le cadre (fenêtre = 82,5 % de la largeur, moins l'en-tête de 9,6 %) */
.pa-defile .defile--roussel { display: flex; color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .pa-defile .defile--roussel .defile__page { animation-name: defile-roussel; animation-duration: 42s; }
}
@keyframes defile-roussel { 0%, 5% { transform: translateY(0); } 95%, 100% { transform: translateY(calc(-100% + 72.9cqw)); } }

/* accueil, carte du site : le concept Dentalign se montre en entier, à son format (16:9), l'étiquette dessous */
.c-carte__media:has(> .c-carte__concept) { aspect-ratio: auto; overflow: visible; background: none; border-radius: 0; }
.c-carte__media > img.c-carte__concept { position: static; display: block; width: 100%; height: auto; border-radius: 18px; }
.c-carte__media:has(> .c-carte__concept) .va-modele { position: static; display: inline-block; margin-top: 12px; }
.h-chaine__site { position: relative; }

/* accueil, bloc identité : le concept Clairdent (logo, couleurs, site, publications) */
:root {
  --clairdent-ciel: #7497db;
  --clairdent-blouse: #2a55c0;
  --clairdent-citron: #d8ec5c;
}
.h-marque--clairdent { background: var(--clairdent-ciel); box-shadow: none; }
.h-marque--clairdent .h-marque__mot { display: flex; align-items: center; gap: 12px; font: 600 clamp(1.3rem, 1rem + 0.8vw, 1.75rem)/1.02 var(--font-body); font-stretch: normal; letter-spacing: -0.01em; text-transform: none; color: var(--color-blanc); }
.h-marque__icone { flex: none; width: clamp(40px, 3.4vw, 52px); height: auto; }
.h-marque--clairdent .h-marque__lieu { margin-top: -4px; color: var(--color-blanc); }
.h-marque--clairdent .h-marque__couleurs li { color: var(--color-blanc); }
.h-marque--clairdent .h-marque__couleurs li::before { box-shadow: inset 0 0 0 1.5px var(--color-blanc); }
.h-marque--clairdent .h-marque__formes { color: var(--color-blanc); }
.h-marque--clairdent .h-forme { border-color: var(--color-blanc); }
.h-marque--clairdent .h-forme--pilule { background: var(--clairdent-citron); border-color: var(--clairdent-citron); }
.h-post--visuel { background: var(--clairdent-ciel); }

/* ================= la fiche Google, dessinée comme sur un téléphone (accueil 03, page Fiche Google) ================= */
:root {
  --gf-carte: oklch(96.5% 0.012 255);
  --gf-ilot: oklch(93.5% 0.018 255);
  --gf-eau: oklch(86% 0.06 250);
  --gf-parc: oklch(91% 0.035 235);
  --gf-point: oklch(68% 0.02 260);
}
.gf { position: relative; aspect-ratio: 5 / 4.3; overflow: hidden; border-radius: 28px; background: var(--gf-carte); box-shadow: 0 0 0 1px var(--color-filet-v), 0 50px 90px -50px var(--color-ombre-menu); }
.gf__carte { position: absolute; inset: 0; }
.gf__carte > i, .gf__carte > b, .gf__carte > span { position: absolute; display: block; }
.gf__eau { left: -10%; right: -10%; bottom: -6%; height: 22%; background: var(--gf-eau); transform: rotate(-6deg); border-radius: 40%; }
.gf__parc { left: 6%; top: 8%; width: 24%; height: 26%; border-radius: 26px; background: var(--gf-parc); }
.gf__ilot { border-radius: 10px; background: var(--gf-ilot); }
.gf__ilot--1 { left: 34%; top: 6%; width: 18%; height: 20%; }
.gf__ilot--2 { left: 4%; top: 42%; width: 22%; height: 24%; }
.gf__ilot--3 { left: 30%; top: 46%; width: 14%; height: 18%; }
.gf__ilot--4 { left: 8%; top: 70%; width: 30%; height: 10%; }
.gf__rue { height: 12px; border-radius: 6px; background: var(--color-blanc); box-shadow: 0 0 0 1px var(--color-filet-v); }
.gf__rue--1 { left: -10%; width: 80%; top: 36%; transform: rotate(-4deg); }
.gf__rue--2 { left: 27%; top: -10%; width: 12px; height: 120%; transform: rotate(8deg); }
.gf__rue--3 { left: -5%; width: 60%; top: 67%; height: 9px; transform: rotate(3deg); }
.gf__rue--4 { left: 50%; top: -10%; width: 9px; height: 120%; transform: rotate(-12deg); }
.gf__nomrue { font: 500 10px/1 var(--font-body); letter-spacing: 0.02em; color: var(--color-texte-v2); white-space: nowrap; }
.gf__nomrue--1 { left: 4%; top: 31%; transform: rotate(-4deg); }
.gf__nomrue--2 { left: 30.5%; top: 6%; transform: rotate(98deg); transform-origin: 0 0; }
.gf__point { width: 14px; height: 14px; margin: -14px 0 0 -7px; border-radius: 50% 50% 50% 0; background: var(--gf-point); transform: rotate(-45deg); box-shadow: 0 0 0 2px var(--color-blanc); }
.gf__point--1 { left: 14%; top: 56%; }
.gf__point--2 { left: 40%; top: 28%; }
.gf__point--3 { left: 22%; top: 82%; }
.gf__repere { left: 30%; top: 41%; display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translate(-50%, -100%); }
.gf__goutte { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50% 50% 50% 0; background: var(--color-bleu); transform: rotate(-45deg); box-shadow: 0 0 0 3px var(--color-blanc), 0 14px 26px -8px var(--color-bleu); }
.gf__goutte svg { width: 22px; height: 22px; fill: var(--color-blanc); transform: rotate(45deg); }
.gf__repere em { position: relative; z-index: 1; order: 2; padding: 6px 10px; border-radius: 999px; font: 600 12px/1 var(--font-body); font-style: normal; color: var(--color-bleu); background: var(--color-blanc); box-shadow: 0 6px 16px -8px var(--color-ombre-menu); white-space: nowrap; }
/* la fiche : le panneau qui monte sur la carte, comme dans l'application */
.gf__fiche { position: absolute; top: 5%; right: 4%; bottom: 5%; width: min(56%, 360px); display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 16px; overflow: hidden; border-radius: 22px; color: var(--color-encre-v); background: var(--color-blanc); box-shadow: 0 30px 60px -24px var(--color-ombre-menu), 0 0 0 1px var(--color-filet-v); }
.gf__fiche p { margin: 0; }
.gf__poignee { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--color-filet-v-fort); }
.gf__nom { font: 600 clamp(17px, 0.9rem + 0.45vw, 21px)/1.15 var(--font-display); letter-spacing: -0.015em; }
.gf__note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: -4px; font: 400 13px/1.2 var(--font-body); color: var(--color-texte-v2); }
.gf__note b { font-weight: 600; color: var(--color-encre-v); }
.gf__etoiles svg { display: block; width: 62px; height: 12px; fill: var(--color-bleu); }
.gf__cat { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.gf__cat::before { content: "·"; margin-right: 2px; }
.gf__ouvert { display: flex; align-items: center; gap: 6px; margin-top: -4px; font: 400 13px/1.2 var(--font-body); color: var(--color-texte-v2); }
.gf__ouvert b { font-weight: 600; color: var(--color-bleu); }
.gf__actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.gf__iti { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; font: 500 13px/1 var(--font-body); color: var(--color-blanc); background: var(--color-bleu); }
.gf__iti svg { width: 16px; height: 16px; fill: var(--color-blanc); }
.gf__rond { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); }
.gf__rond svg { width: 16px; height: 16px; fill: var(--color-bleu); stroke: var(--color-bleu); }
.gf__photos { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 4px; }
.gf__photos img { width: 100%; height: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 8px; }
.gf__photos img:first-child { border-radius: 12px 8px 8px 12px; }
.gf__soins { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.gf__soins span { padding: 6px 10px; border-radius: 999px; font: 500 12px/1 var(--font-body); color: var(--color-bleu); background: var(--color-blanc-casse); box-shadow: inset 0 0 0 1px var(--color-filet-v); }
.gf__avis { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--color-filet-v); }
.gf__avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; font: 600 13px/1 var(--font-body); color: var(--color-blanc); background: var(--color-bleu-profond-2); }
.gf__avis-texte { display: grid; gap: 3px; font: 400 12px/1.2 var(--font-body); color: var(--color-texte-v2); }
.gf__avis-texte b { font-weight: 600; font-size: 13px; color: var(--color-encre-v); }
/* les numéros renvoient à la liste « Sur la fiche Google » */
.gf__num { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; font: 600 11px/1 var(--font-body); font-style: normal; color: var(--color-blanc); background: var(--color-bleu); box-shadow: 0 0 0 3px var(--color-blanc); }
.gf__photos .gf__num, .gf__soins .gf__num { position: absolute; top: -8px; right: -6px; }
.gf__avis .gf__num { margin-left: auto; }
.gf__etiquette { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; font: 500 12px/1 var(--font-body); color: var(--color-blanc); background: var(--color-encre-v); }

/* accueil 03 : ce que nous faisons, en trois blocs sous la fiche */
.h-travail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 64px); }
.h-travail__bloc { padding: clamp(22px, 2.2vw, 32px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.h-travail__bloc h3 { font: 500 clamp(1.3rem, 1.05rem + 0.6vw, 1.7rem)/1.1 var(--font-display); letter-spacing: -0.025em; }
.h-travail__liste { display: grid; gap: 14px; margin-top: 18px; padding: 0; list-style: none; counter-reset: gf; }
.h-travail__liste li { position: relative; padding-left: 30px; font: 400 16px/1.5 var(--font-body); color: var(--color-texte-v2); }
.h-travail__liste li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-bleu); }
.h-travail__liste--num li::before { counter-increment: gf; content: counter(gf); left: 0; top: 2px; display: grid; place-items: center; width: 20px; height: 20px; font: 600 11px/1 var(--font-body); color: var(--color-blanc); }
.h-travail__note { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; font: 400 16px/1.5 var(--font-body); color: var(--color-texte-v2); }
@media (max-width: 1100px) { .h-travail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .gf { aspect-ratio: auto; display: flex; flex-direction: column; }
  .gf__carte { position: relative; height: 210px; }
  .gf__repere { left: 46%; top: 58%; }
  .gf__fiche { position: relative; top: auto; right: auto; bottom: auto; width: auto; margin: -36px 10px 10px; }
  .gf__etiquette { top: 14px; bottom: auto; }
}

/* page Fiche Google : la fiche à gauche, sa légende numérotée à droite */
.pa-fiche__grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
.pa-fiche__visuel .gf { max-width: 640px; }
.pa-fiche__texte { display: grid; gap: 28px; align-content: start; }
.pa-fiche__texte .pa-h2 { font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); }
.pa-fiche__liste { margin-top: 0; gap: 20px; }
.pa-fiche__liste li { font-size: 17px; color: var(--color-encre-v); }
.pa-fiche__plus { padding-top: 22px; border-top: 1px solid var(--color-filet-v); font: 400 15px/1.55 var(--font-body); color: var(--color-texte-v2); }
@media (max-width: 1100px) {
  .pa-fiche__grille { grid-template-columns: minmax(0, 1fr); }
  .pa-fiche__visuel .gf { max-width: 560px; margin-inline: auto; }
}
/* page Fiche Google : pourquoi la tenir à jour, en trois cartes */
.pa-entretien__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 3vw, 48px); padding: 0; list-style: none; }
.pa-entretien__liste li { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.pa-entretien__liste b { font: 500 clamp(1.2rem, 1rem + 0.5vw, 1.5rem)/1.15 var(--font-display); letter-spacing: -0.015em; }
.pa-entretien__liste p { font: 400 16px/1.55 var(--font-body); color: var(--color-texte-v2); }
.pa-entretien__liste .va-source { margin-top: auto; }
@media (max-width: 1100px) { .pa-entretien__liste { grid-template-columns: minmax(0, 1fr); } }

/* accueil 02 : l’Ordre, mis en avant dans « Notre méthode » */
.h-methode__ordre { font-weight: 600; color: var(--color-bleu); }

/* page Site : les conditions se déplient au besoin (elles restent ouvertes sur la page Tarifs) */
.pa-conditions-repli { margin-top: clamp(28px, 3vw, 44px); }
.pa-conditions-repli > ul, .pa-conditions-repli > ol { padding-bottom: 18px; }

/* ================= page Pourquoi la Visibilité : schémas et graphiques sourcés ================= */
.vb .pa-h2 { margin-top: 16px; max-width: 18em; }
.vb .pa-h2 sup { font-size: 0.42em; line-height: 0; vertical-align: 1.1em; letter-spacing: 0; }
.vb-source { margin-top: 18px; }
.vb-trait { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vb-plein { fill: var(--color-bleu); }
.vb-pointilles { stroke-dasharray: 2 6; }
/* 01 · les trois critères */
.vb-criteres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 3vw, 48px); padding: 0; list-style: none; }
.vb-critere { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.vb-critere--travaille { box-shadow: inset 0 0 0 2px var(--color-bleu); }
.vb-critere__dessin { width: 120px; height: 72px; margin-bottom: 8px; color: var(--color-encre-v); fill: var(--color-filet-v-fort); }
.vb-critere__nom { font: 500 13px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu); }
.vb-critere b { font: 500 clamp(1.2rem, 1rem + 0.5vw, 1.5rem)/1.15 var(--font-display); letter-spacing: -0.015em; }
.vb-critere p:not(.vb-critere__nom):not(.vb-etiquette) { font: 400 16px/1.55 var(--font-body); color: var(--color-texte-v2); }
.vb-etiquette { align-self: flex-start; margin-top: auto; padding: 8px 12px; border-radius: 999px; font: 500 13px/1 var(--font-body); color: var(--color-encre-v); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); }
.vb-etiquette--bleue { color: var(--color-blanc); background: var(--color-bleu); box-shadow: none; }
/* 01 · le tiers en anneau */
.vb-tiers { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 5vw, 80px); max-width: 920px; }
.vb-donut { position: relative; width: clamp(180px, 20vw, 240px); margin: 0; }
.vb-donut svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.vb-donut__fond { fill: none; stroke: var(--color-filet-v); stroke-width: 16; }
.vb-donut__part { fill: none; stroke: var(--color-bleu); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 32 100; }
.vb-donut figcaption { position: absolute; inset: 0; display: grid; place-items: center; }
.vb-donut__valeur { font: 500 clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem)/1 var(--font-display); letter-spacing: -0.04em; color: var(--color-bleu); }
.vb-tiers__texte { display: grid; gap: 12px; }
.vb-tiers__texte > p:not(.vb-legende):not(.va-source) { margin-top: 8px; max-width: 34em; font: 400 17px/1.55 var(--font-body); color: var(--color-texte-v2); }
.vb-legende { display: flex; align-items: center; gap: 12px; font: 500 16px/1.4 var(--font-body); }
.vb-puce { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--color-filet-v); }
.vb-puce--bleue { background: var(--color-bleu); }
/* 02 · deux fiches face à face */
.vb-duel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 3vw, 48px); }
.vb-mini { margin: 0; padding: clamp(22px, 2.4vw, 32px); border-radius: 22px; background: var(--color-blanc); box-shadow: 0 0 0 1px var(--color-filet-v); }
.vb-mini figcaption { display: inline-block; padding: 7px 12px; border-radius: 999px; font: 500 13px/1 var(--font-body); color: var(--color-texte-v2); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); }
.vb-mini--tenue figcaption { color: var(--color-blanc); background: var(--color-bleu); box-shadow: none; }
.vb-mini__nom { margin-top: 18px; font: 600 20px/1.2 var(--font-display); letter-spacing: -0.015em; }
.vb-mini ul { display: grid; gap: 0; margin-top: 10px; padding: 0; list-style: none; }
.vb-mini li { display: grid; gap: 4px; padding: 14px 0 14px 30px; border-top: 1px solid var(--color-filet-v); position: relative; font: 400 16px/1.35 var(--font-body); color: var(--color-encre-v); }
.vb-mini li b { font-weight: 600; }
.vb-mini li em { font-style: normal; font-size: 14px; color: var(--color-texte-v2); }
.vb-mini li::before { content: ""; position: absolute; left: 0; top: 16px; width: 18px; height: 18px; border-radius: 50%; }
.vb-mini--laissee li::before { box-shadow: inset 0 0 0 2px var(--color-texte-v2); background: linear-gradient(var(--color-texte-v2), var(--color-texte-v2)) 50% 30% / 2px 7px no-repeat, radial-gradient(circle, var(--color-texte-v2) 1.2px, transparent 1.6px) 50% 75% / 4px 4px no-repeat; }
.vb-mini--laissee .vb-mini__nom, .vb-mini--laissee li b { color: var(--color-texte-v2); }
.vb-mini--tenue li::before { background: var(--color-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4 6.8 11 12 5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 12px no-repeat; }
.vb-mini--tenue li b { color: var(--color-bleu); }
.vb-illustration { margin-top: 12px; font: 500 12px/1 var(--font-body); color: var(--color-texte-v2); }
.vb-faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(28px, 3vw, 48px); margin-top: clamp(32px, 3vw, 48px); padding: 0; list-style: none; }
.vb-faits li { display: flex; flex-direction: column; gap: 10px; }
.vb-faits b { font: 500 clamp(1.1rem, 1rem + 0.35vw, 1.3rem)/1.2 var(--font-display); letter-spacing: -0.01em; }
.vb-faits p:not(.va-source) { font: 400 16px/1.55 var(--font-body); color: var(--color-texte-v2); }
/* 03 · le chemin d'une question, en quatre temps */
.vb-flux { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 3vw, 48px); padding: 0; list-style: none; counter-reset: none; }
.vb-etape { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.vb-etape:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 36px; right: -15px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50% 50% / 12px no-repeat; box-shadow: 0 0 0 4px var(--color-blanc); }
.vb-etape__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 600 13px/1 var(--font-body); color: var(--color-blanc); background: var(--color-encre-v); }
.vb-etape__titre { font: 500 clamp(1.15rem, 1rem + 0.4vw, 1.4rem)/1.15 var(--font-display); letter-spacing: -0.015em; }
.vb-etape p:not(.vb-etape__titre):not(.vb-bulle):not(.vb-puces) { font: 400 15px/1.5 var(--font-body); color: var(--color-texte-v2); }
.vb-bulle { padding: 12px 14px; border-radius: 16px 16px 16px 4px; font: 500 15px/1.4 var(--font-body); color: var(--color-encre-v); background: var(--color-blanc); box-shadow: 0 0 0 1px var(--color-filet-v); }
.vb-bulle--reponse { border-radius: 16px 16px 4px 16px; color: var(--color-blanc); background: var(--color-bleu); box-shadow: none; }
.vb-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.vb-puces span { padding: 6px 10px; border-radius: 999px; font: 500 13px/1 var(--font-body); color: var(--color-bleu); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v); }
.vb-page { width: 100%; max-width: 180px; height: auto; color: var(--color-texte-v2); }
/* 03 · deux graphiques */
.vb-graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(48px, 5vw, 80px); }
.vb-graphe { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: clamp(24px, 2.4vw, 36px); border-radius: var(--va-rayon); box-shadow: inset 0 0 0 1px var(--color-filet-v); }
.vb-graphe figcaption b { font: 500 clamp(1.1rem, 1rem + 0.35vw, 1.3rem)/1.25 var(--font-display); letter-spacing: -0.01em; }
.vb-graphe > p:not(.va-source) { font: 400 15px/1.55 var(--font-body); color: var(--color-texte-v2); }
.vb-graphe .va-source { margin-top: auto; }
.vb-colonnes { display: flex; align-items: flex-end; gap: clamp(24px, 4vw, 56px); height: 220px; padding: 12px 0 0; border-bottom: 1px solid var(--color-filet-v-fort); }
.vb-colonne { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; width: 88px; height: 100%; }
.vb-colonne__valeur { font: 500 22px/1 var(--font-display); letter-spacing: -0.02em; }
.vb-colonne__barre { width: 100%; height: calc(var(--h) / 50 * 160px); border-radius: 10px 10px 0 0; background: var(--color-filet-v-fort); transform-origin: bottom; }
.vb-colonne--bleue .vb-colonne__barre { background: var(--color-bleu); }
.vb-colonne--bleue .vb-colonne__valeur { color: var(--color-bleu); }
.vb-colonne__nom { position: relative; top: 30px; height: 0; font: 500 14px/1 var(--font-body); color: var(--color-texte-v2); }
.vb-colonnes + p { margin-top: 48px; }
.vb-lignes { display: grid; gap: 14px; padding: 8px 0; }
.vb-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom valeur" "barre barre"; gap: 6px 12px; align-items: center; }
.vb-ligne__nom { grid-area: nom; font: 500 15px/1.3 var(--font-body); }
.vb-ligne__valeur { grid-area: valeur; font: 500 18px/1 var(--font-display); letter-spacing: -0.02em; }
.vb-ligne__barre { grid-area: barre; height: 14px; width: calc(var(--l) / 4 * 100%); border-radius: 7px; background: var(--color-filet-v-fort); transform-origin: left; }
.vb-ligne--bleue .vb-ligne__barre { background: var(--color-bleu); }
.vb-ligne--bleue .vb-ligne__valeur, .vb-ligne--bleue .vb-ligne__nom { color: var(--color-bleu); }
/* 04 · la courbe des pages de soins */
.vb-courbe { margin: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--va-rayon); background: var(--color-blanc); box-shadow: 0 0 0 1px var(--color-filet-v); }
.vb-courbe svg { display: block; width: 100%; height: auto; overflow: visible; }
.vb-courbe__grille path { fill: none; stroke: var(--color-filet-v); stroke-width: 1; }
.vb-courbe__axe text { font: 500 12px var(--font-body); fill: var(--color-texte-v2); text-anchor: end; }
.vb-courbe__axe text:nth-last-child(-n+2) { text-anchor: start; }
.vb-courbe__axe text:last-child { text-anchor: end; }
.vb-courbe__entretien { fill: none; stroke: var(--color-texte-v2); stroke-width: 3; stroke-dasharray: 6 6; }
.vb-courbe__visibilite { fill: none; stroke: var(--color-bleu); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 0; }
.vb-courbe__etiquette { font: 600 14px var(--font-body); fill: var(--color-texte-v2); }
.vb-courbe__etiquette--bleue { fill: var(--color-bleu); }
.pa-cote__texte p.vb-mois__titre { margin-top: 8px; font: 500 13px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu); }
.vb-mois { display: grid; gap: 10px; padding: 0; list-style: none; }
.vb-mois li { position: relative; padding-left: 22px; font: 400 16px/1.45 var(--font-body); color: var(--color-encre-v); }
.vb-mois li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-bleu); }
/* le mouvement : les graphiques se dessinent à l'arrivée, rien ne bouge si l'utilisateur l'a demandé */
@media (prefers-reduced-motion: no-preference) {
  .js .vb-donut__part { stroke-dasharray: 0 100; transition: stroke-dasharray 1400ms var(--ease-cub) 200ms; }
  .js .revele.est-vu .vb-donut__part { stroke-dasharray: 32 100; }
  .js .vb-colonne__barre, .js .vb-ligne__barre { transform: scale(1, 0); transition: transform 1100ms var(--ease-cub) 250ms; }
  .js .vb-ligne__barre { transform: scale(0, 1); }
  .js .revele.est-vu .vb-colonne__barre, .js .revele.est-vu .vb-ligne__barre { transform: none; }
  .js .vb-colonne + .vb-colonne .vb-colonne__barre, .js .vb-ligne + .vb-ligne .vb-ligne__barre { transition-delay: 450ms; }
  .js .vb-ligne + .vb-ligne + .vb-ligne .vb-ligne__barre { transition-delay: 650ms; }
  .js .vb-courbe__visibilite { stroke-dasharray: 0 1; transition: stroke-dasharray 1800ms var(--ease-sortie) 300ms; }
  .js .revele.est-vu .vb-courbe__visibilite { stroke-dasharray: 1 0; }
}
@media (max-width: 1100px) {
  .vb-criteres, .vb-faits { grid-template-columns: minmax(0, 1fr); }
  .vb-flux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-etape:nth-child(2)::after { display: none; }
  .vb-graphes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .vb-duel, .vb-flux { grid-template-columns: minmax(0, 1fr); }
  .vb-etape:not(:last-child)::after { display: block; top: auto; right: auto; bottom: -15px; left: 50%; margin-left: -9px; transform: rotate(90deg); }
  .vb-tiers { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .vb-tiers__texte { justify-items: start; }
  .vb-critere__dessin { width: 96px; height: 58px; }
  .vb-courbe__axe text { font-size: 16px; }
  .vb-courbe__etiquette { font-size: 19px; }
}
.vb-insecable { white-space: nowrap; }

/* ================= page Instagram : les trois comptes ================= */
.fils-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fils-onglets button { display: grid; gap: 4px; min-height: 52px; padding: 10px 18px; border: 0; border-radius: 16px; font: inherit; text-align: left; color: var(--color-encre-v); background: var(--color-blanc-casse); box-shadow: inset 0 0 0 1px var(--color-filet-v); cursor: pointer; transition: background-color 250ms var(--ease-sortie), color 250ms var(--ease-sortie); }
.fils-onglets button b { font: 500 16px/1.1 var(--font-body); }
.fils-onglets button small { font: 400 13px/1 var(--font-body); color: var(--color-texte-v2); }
.fils-onglets button[aria-selected="true"] { color: var(--color-blanc); background: var(--color-bleu); box-shadow: none; }
.fils-onglets button[aria-selected="true"] small { color: var(--color-blanc); opacity: 0.8; }
.fils-onglets button:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 3px; }
.profil__qui { display: grid; gap: 0.8cqw; margin: 0; line-height: 1.25; }
.profil__qui b { font-size: 4.4cqw; font-weight: 600; }
.profil__qui span { font-size: 3.4cqw; color: var(--ip-gris); }
.profil__vue[hidden] { display: none; }
.profil__chiffres .a-confirmer { font-size: inherit; }
/* page Instagram : quatre exemples (visuel, deux carrousels, réel) */
.page--instagram .types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1199px) { .page--instagram .types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .page--instagram .types { grid-template-columns: minmax(0, 1fr); } }
/* le pack : chaque case montre un interrupteur, éteint en visuel, allumé en carrousel */
.case-pack__ligne { display: flex; align-items: center; gap: 6px; }
/* le composeur : trois tailles de pack (6, 9, 12), la remise et le prix avant remise barré */
.composeur__tailles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.composeur__taille { display: inline-flex; align-items: baseline; gap: 8px; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; font: 500 15px/1.2 var(--font-body); color: var(--color-encre-v); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v-fort); cursor: pointer; transition: background-color 200ms var(--ease-sortie), color 200ms var(--ease-sortie); }
.composeur__taille small { font: 600 13px/1 var(--font-body); color: var(--color-bleu); }
.composeur__taille[aria-pressed="true"] { color: var(--color-blanc); background: var(--color-bleu); box-shadow: none; }
.composeur__taille[aria-pressed="true"] small { color: var(--color-blanc); }
.composeur__taille:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 2px; }
.composeur[data-taille] .composeur__cases { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.composeur__cases li[hidden] { display: none; }
.composeur__prix { display: inline-flex; align-items: baseline; gap: 12px; }
.composeur__avant { font: 400 18px/1 var(--font-body); color: var(--color-texte-v2); }
.composeur__avant[hidden] { display: none; }
@media (min-width: 992px) { .composeur[data-taille="9"] .composeur__cases { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 767px) { .composeur[data-taille] .composeur__cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* le réel qui joue (page Instagram) */
.type__visuel--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-vignette); box-shadow: 0 0 30px -6px var(--color-ombre); background: var(--color-teinte-papier); }
/* notre logiciel : trois feeds côte à côte, un carrousel aimanté au téléphone */
.pa-logiciel__texte { max-width: 52rem; }
.pa-feeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); margin-top: clamp(32px, 3vw, 48px); }
.pa-feed { margin: 0; padding: 14px; border-radius: var(--va-rayon); background: var(--color-blanc); box-shadow: inset 0 0 0 1px var(--color-filet-v); }
.pa-feed__qui { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 600 15px/1.2 var(--font-body); color: var(--color-encre-v); }
.pa-feed__qui img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.pa-feed__qui small { margin-left: auto; font: 500 12px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu); }
.pa-feed__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; overflow: hidden; border-radius: 6px; }
.pa-feed__grille img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 767px) {
  .pa-feeds { display: flex; gap: 12px; margin-inline: calc(-1 * var(--va-marge)); padding-inline: var(--va-marge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--va-marge); scrollbar-width: none; }
  .pa-feed { flex: 0 0 82%; scroll-snap-align: start; }
}
/* les prix d'Instagram : la règle de l'abonnement mensuel entre les deux rangées de cartes */
.pa-prix__regle { margin: 12px 0; }
.case-pack__interrupteur { position: relative; flex: none; width: 24px; height: 14px; border-radius: 999px; background: var(--color-filet-v-fort); transition: background-color 200ms var(--ease-sortie); }
.case-pack__interrupteur::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-blanc); transition: transform 200ms var(--ease-sortie); }
.case-pack[aria-pressed="true"] .case-pack__interrupteur { background: var(--color-bleu); }
.case-pack[aria-pressed="true"] .case-pack__interrupteur::after { transform: translateX(10px); }
.case-pack[aria-pressed="true"] .case-pack__type { color: var(--color-bleu); }
@media (max-width: 899px) { .cc-consigne { display: none; } }

/* ================= retours des testeurs : corrections de design ================= */
/* une seule famille de lettres : les étiquettes et les chiffres reprennent les polices du site */
body.va { --font-mono: var(--font-body); }
.va .site__nom, .va .ruban__nom, .va .pile__compte, .va .note__chiffre, .va .type__nom, .va .composeur__montant { font-stretch: normal; font-weight: 500; }
/* un seul écart entre un surtitre et son titre */
.pa-surtitre + .pa-h2, .pa-surtitre + .pa-titre, .pa-surtitre + h2 { margin-top: 16px; }
.pa-cote__texte > .pa-surtitre + .pa-h2 { margin-top: 0; }
/* les boutons ronds des cartes portent leur mot */
.c-carte .h-rond:has(.h-rond__texte) { display: inline-flex; gap: 8px; width: auto; padding: 0 18px 0 14px; border-radius: 999px; }
.h-rond__texte { font: 500 15px/1 var(--font-body); white-space: nowrap; }
.h-rond { text-decoration: none; }
/* Instagram : l'étiquette du visuel laisse lire le haut de l'image ; prix du pack lisibles */
.va .type__badge--droite { left: auto; right: 12px; }
.va .case-pack__prix { font: 600 14px/1.2 var(--font-body); color: var(--color-encre-v); }
.va .case-pack__num { font: 500 12px/1 var(--font-body); }
@media (max-width: 767px) {
  /* chaque exemple Instagram s'annonce avant son image */
  .page--instagram .type { display: flex; flex-direction: column; }
  .page--instagram .type figcaption { order: -2; margin: 0 0 14px; }
  .page--instagram .type--carrousel > .type__badge { position: static; align-self: flex-start; order: -1; margin-bottom: 12px; }
  .page--instagram .pa-tete--insta .tels { margin-top: 40px; }
  /* l'extrait de page s'efface vers le bas au lieu d'être coupé net */
  .h-extrait__page { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
}
/* page Fiche Google : le texte à gauche, le tiers à droite */
.pa-fiche-decide .pa-chiffres { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
.pa-form__envoi { display: flex; flex-wrap: wrap; gap: 12px; }

/* les pages de texte long (guides, À propos, site pour orthodontiste) : paragraphes et intertitres lisibles */
:is(.page--guide, .page--apropos) .va-etroit > p:not([class]),
:is(.page--guide, .page--apropos) .va-etroit > .pa-h2 + p,
.page--guide .pa-feuille .va-etroit > p:not([class]) { margin-top: 16px; max-width: 68ch; font: 400 17px/1.65 var(--font-body); color: var(--color-texte-v2); }
:is(.page--guide, .page--apropos) .va-etroit > p:not([class]) strong { color: var(--color-encre-v); font-weight: 600; }
:is(.page--guide, .page--apropos) .va-etroit > .pa-h2 { margin-bottom: 8px; }
.page--apropos .va-etroit > .pa-h3 { margin-top: 40px; }
.page--apropos .va-etroit > .pa-h2 + .pa-h3 { margin-top: 24px; }
:is(.page--guide, .page--apropos) .va-etroit > .va-source { display: block; margin-top: 14px; font: 400 13px/1.5 var(--font-body); color: var(--color-texte-v2); }
:is(.page--guide, .page--apropos) .va-etroit > .pa-coches { margin-top: 20px; }
.page--guide .pa-tableau { margin-top: 24px; }
/* les tableaux des guides, sur fond clair : filets clairs, aucune ligne surlignée */
.page--guide .pa-tableau { box-shadow: inset 0 0 0 1px var(--color-filet-v); }
.page--guide .pa-tableau th, .page--guide .pa-tableau td { border-bottom-color: var(--color-filet-v); vertical-align: top; }
.page--guide .pa-tableau thead th { color: var(--color-texte-v2); }
.page--guide .pa-tableau tbody tr:first-child { background: transparent; }
.page--guide .pa-tableau tbody th { font-weight: 600; color: var(--color-encre-v); }
.page--guide .pa-tableau tbody td { color: var(--color-texte-v2); }
.page--guide .va-etroit > h3 { margin-top: 36px; }

/* la page Guides : une carte par guide */
.pa-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pa-guide__lien { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--va-rayon); color: var(--color-encre-v); text-decoration: none; background: var(--color-blanc-casse); transition: background-color 200ms var(--ease-sortie); }
.pa-guide__lien:hover { background: var(--color-filet-v); }
.pa-guide__lien:focus-visible { outline: 2px solid var(--color-bleu); outline-offset: 3px; }
.pa-guide__date { font: 500 12px/1.3 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-bleu); }
.pa-guide__titre { font: 500 clamp(1.3rem, 1.05rem + 0.7vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -0.02em; }
.pa-guide__resume { font: 400 16px/1.5 var(--font-body); color: var(--color-texte-v2); }
.page--guides .pa-note { margin-top: 28px; }
@media (max-width: 767px) { .pa-guides { grid-template-columns: minmax(0, 1fr); } }
/* page orthodontiste : le texte du titre du praticien respire sous son intertitre */
.page--orthodontiste #qualification .pa-cote__texte { margin-top: 20px; max-width: 62ch; }

/* le bloc fondateur (bas des guides, page orthodontiste) */
.pa-auteur { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; max-width: 900px; padding: clamp(24px, 3vw, 40px); border-radius: var(--va-rayon); background: var(--color-blanc-casse); }
.pa-auteur__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
.pa-auteur__nom { margin-top: 6px; font: 500 clamp(1.3rem, 1.05rem + 0.7vw, 1.75rem)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--color-encre-v); }
.pa-auteur__texte > p:not([class]) { margin-top: 12px; max-width: 60ch; font: 400 17px/1.6 var(--font-body); color: var(--color-texte-v2); }
.pa-auteur .pa-actions { margin-top: 20px; }
.pa-feuille .pa-auteur { background: var(--color-blanc); }
@media (max-width: 767px) {
  .pa-auteur { grid-template-columns: minmax(0, 1fr); }
  .pa-auteur__photo { width: 88px; height: 88px; }
}

/* page orthodontiste, section des traitements : les titres de groupe respirent */
#traitements .pa-chapo + .pa-h3 { margin-top: clamp(40px, 4vw, 64px); }
#traitements .vb-faits + .pa-h3 { margin-top: clamp(56px, 6vw, 96px); }
#traitements .vb-faits { margin-top: clamp(20px, 2vw, 28px); }