/* Charte graphique DoctoClic (version 3, 27/09/2026 ; bleu nuit #070730 et sa famille, 28/09/2026) : jetons et composants dc-.
   Fichier généré depuis la charte (tokens.json + components/bundle.css) : ne pas le modifier à la main,
   ajouter les règles propres dans les autres feuilles. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --vert-logo: #0DB6A2;
  --turquoise: #14B8B0;
  --vert-moyen: #0D958F;
  --vert-action: #0B7A75;
  --vert-action-survol: #08615D;
  --vert-clair: #E6F7F6;
  --vert-brume: #EEF9F8;
  --nuit: #070730;
  --nuit-profonde: #040522;
  --nuit-2: #080932;
  --nuit-3: #07062F;
  --nuit-abysse: #020310;
  --encre-favicon: var(--nuit);
  --blanc: #FFFFFF;
  --gris-100: #F3F6F9;
  --gris-150: #EEF2F6;
  --gris-200: #E2E8EF;
  --gris-300: #CBD5E1;
  --gris-500: #6B7A8D;
  --gris-600: #4B5A6E;
  --texte-sur-nuit: #E8EEF5;
  --texte-sur-nuit-2: #A9B7C9;
  --fond: #FFFFFF;
  --fond-alt: #F3F6F9;
  --fond-carte: #FFFFFF;
  --ligne: #E2E8EF;
  --texte: var(--nuit);
  --texte-2: var(--gris-600);
  --accent: var(--vert-action);
  --action: var(--vert-action);
  --action-survol: var(--vert-action-survol);
  --sur-action: #FFFFFF;
  --teinte: var(--vert-clair);
  --focus: var(--vert-action);
  --font-titre: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-texte: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 20px;
  --espace-6: 24px;
  --espace-7: 32px;
  --espace-8: 44px;
  --espace-9: 64px;
  --espace-10: 88px;
  --rayon-petit: 8px;
  --rayon-bouton-sm: 10px;
  --rayon-bouton: 12px;
  --rayon-carte: 14px;
  --rayon-panneau: 20px;
  --rayon-grand: 26px;
  --rayon-telephone: 40px;
  --rayon-pilule: 999px;
  --ombre-bouton: 0 12px 30px -12px rgba(11,122,117,0.75);
  --ombre-carte: 0 18px 40px -30px rgba(7,7,48,0.35);
  --ombre-flottante: 0 40px 80px -46px rgba(7,7,48,0.45);
  --ombre-entete: 0 10px 30px -22px rgba(7,7,48,0.4);
  --ombre-nuit: 0 30px 60px -40px rgba(0,0,0,0.9);
  --anneau-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #0B7A75;
  --largeur-texte: 680px;
  --largeur-contenu: 1140px;
  --largeur-entete: 1180px;
  --hauteur-entete: 72px;
  --largeur-menu-app: 264px;
}
[data-theme="nuit"] {
  --fond: #040522;
  --fond-alt: #080932;
  --fond-carte: #07062F;
  --ligne: rgba(255,255,255,0.12);
  --texte: #FFFFFF;
  --texte-2: var(--texte-sur-nuit-2);
  --accent: var(--turquoise);
  --teinte: rgba(20,184,176,0.14);
  --focus: var(--turquoise);
  --anneau-focus: 0 0 0 2px #040522, 0 0 0 4px #14B8B0;
  color-scheme: dark;
}

/* DoctoClic · composants de la charte (classes dc-). Les variables viennent de tokens.css. */

/* ── Bouton ── */
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font: 700 16px/1 var(--font-titre); border-radius: var(--rayon-bouton); padding: 17px 24px; white-space: nowrap; text-decoration: none; transition: background-color .2s ease-out, transform .2s ease-out, box-shadow .2s ease-out; }
.dc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--anneau-focus); }
.dc-btn-principal { background: var(--action); color: var(--sur-action); box-shadow: var(--ombre-bouton); }
.dc-btn-principal:hover { background: var(--action-survol); transform: translateY(-1px); }
.dc-btn-secondaire { background: transparent; color: var(--texte); box-shadow: inset 0 0 0 2px var(--gris-200); }
[data-theme="nuit"] .dc-btn-secondaire { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); }
.dc-btn-secondaire:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.dc-btn-lien { background: none; padding: 6px 0; color: var(--accent); }
.dc-btn-sm { padding: 12px 16px; font-size: 14.5px; border-radius: var(--rayon-bouton-sm); }

/* ── Surtitre et bloc titre ── */
.dc-surtitre { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.dc-surtitre::before { content: ""; width: 28px; height: 2px; background: linear-gradient(95deg, var(--vert-moyen), var(--turquoise)); }
.dc-sh { max-width: var(--largeur-texte); display: grid; gap: 14px; }
.dc-sh h2 { margin: 0; font: 800 40px/1.12 var(--font-titre); letter-spacing: -.02em; color: var(--texte); text-wrap: balance; }
.dc-sh h2 em { font-style: normal; color: var(--accent); }
.dc-sh p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texte-2); }

/* ── Réassurance ── */
.dc-rass { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--texte-2); }
.dc-rass li::before { content: "✓ "; color: var(--accent); font-weight: 700; }

/* ── Pastille ── */
.dc-pastille { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--rayon-pilule); font: 600 12.5px/1 var(--font-texte); white-space: nowrap; }
.dc-pastille svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dc-pastille-verte { background: var(--teinte); color: var(--accent); }
.dc-pastille-neutre { background: var(--gris-150); color: var(--nuit); }
.dc-pastille-urgente { background: var(--nuit); color: #FFFFFF; }
[data-theme="nuit"] .dc-pastille-urgente { background: #FFFFFF; color: var(--nuit); }
.dc-pastille-point::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dc-pouls-point 1.8s ease-out infinite; }
@keyframes dc-pouls-point { 0% { box-shadow: 0 0 0 0 rgba(13,149,143,.45); } 100% { box-shadow: 0 0 0 7px rgba(13,149,143,0); } }

/* ── Carte ── */
.dc-carte { position: relative; background: var(--fond-carte); border: 1px solid var(--ligne); border-radius: var(--rayon-panneau); padding: var(--espace-6); box-shadow: var(--ombre-carte); display: grid; gap: 10px; align-content: start; max-width: 300px; }
[data-theme="nuit"] .dc-carte { box-shadow: var(--ombre-nuit); }
.dc-carte h3 { margin: 0; font: 800 22px/1.25 var(--font-titre); letter-spacing: -.01em; color: var(--texte); }
.dc-carte p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--texte-2); }
.dc-carte-avant { border: 1.5px solid var(--vert-action); }
[data-theme="nuit"] .dc-carte-avant { border-color: var(--turquoise); }
.dc-carte-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--vert-action); color: #FFFFFF; font: 500 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 11px; border-radius: var(--rayon-pilule); }
.dc-carte-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--teinte); color: var(--accent); }
.dc-carte-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Champ ── */
.dc-champ { display: grid; gap: 7px; width: 320px; }
.dc-champ label { font: 600 13px/1.2 var(--font-texte); color: var(--texte); }
.dc-champ input { height: 48px; border-radius: var(--rayon-bouton); border: 1.5px solid var(--gris-300); padding: 0 14px; font: 400 15.5px var(--font-texte); color: var(--texte); background: var(--fond-carte); }
.dc-champ input::placeholder { color: var(--gris-500); }
.dc-champ input:focus { outline: none; border-color: var(--focus); box-shadow: var(--anneau-focus); }
.dc-champ-focus input { border-color: var(--focus); box-shadow: var(--anneau-focus); }
.dc-champ-erreur input { border: 2px solid var(--texte); }
.dc-champ-msg { display: flex; gap: 6px; align-items: flex-start; font: 600 13px/1.4 var(--font-texte); color: var(--texte); }
.dc-champ-msg svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-champ-aide { font-size: 12.5px; line-height: 1.45; color: var(--texte-2); }

/* ── Frise d'étapes ── */
.dc-frise { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 860px; }
.dc-frise-rail { position: absolute; left: 12.5%; right: 12.5%; top: 8px; height: 2px; border-radius: 2px; background: var(--gris-200); }
[data-theme="nuit"] .dc-frise-rail { background: rgba(203,213,225,0.16); }
.dc-frise-rail i { position: absolute; left: 0; top: 0; bottom: 0; width: 33.33%; border-radius: 2px; background: linear-gradient(90deg, var(--vert-action), var(--vert-moyen)); transition: width .9s cubic-bezier(.6,0,.2,1); }
.dc-etape { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.dc-etape i { position: relative; z-index: 1; width: 18px; height: 18px; margin-bottom: 6px; border-radius: 50%; border: 2px solid var(--gris-300); background: var(--fond); }
.dc-etape-fait i, .dc-etape-actif i { background: var(--vert-moyen); border-color: var(--vert-moyen); }
.dc-etape-fait i::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 8px; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dc-etape-actif i { animation: dc-pouls 1.8s ease-out infinite; }
.dc-etape small { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); }
.dc-etape b { font: 700 15px/1.3 var(--font-titre); color: var(--texte); }
.dc-etape em { font: 500 12px/1 var(--font-mono); font-style: normal; letter-spacing: .04em; color: var(--accent); }
@keyframes dc-pouls { 0% { box-shadow: 0 0 0 0 rgba(13,149,143,.4); } 100% { box-shadow: 0 0 0 14px rgba(13,149,143,0); } }

/* ── Interlocuteur ── */
.dc-interloc { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 18px 20px; border-radius: var(--rayon-panneau); background: var(--fond-carte); border: 1px solid var(--ligne); box-shadow: var(--ombre-carte); width: 360px; }
.dc-interloc img { width: 52px; height: 52px; border-radius: var(--rayon-carte); object-fit: cover; display: block; }
.dc-interloc b { display: block; font: 800 16px/1.3 var(--font-titre); color: var(--texte); }
.dc-interloc span { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 13.5px; color: var(--texte-2); }
.dc-interloc span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vert-logo); box-shadow: 0 0 0 3px rgba(13,182,162,0.2); }
.dc-interloc-canaux { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }

/* ── En-tête du site (toujours clair) ── */
.dc-entete { position: relative; background: #FFFFFF; border-bottom: 1px solid var(--gris-200); box-shadow: var(--ombre-entete); }
.dc-entete-in { display: flex; align-items: center; gap: 18px; height: var(--hauteur-entete); padding: 0 20px; }
.dc-logo { display: flex; align-items: center; gap: 10px; }
.dc-logo .fav { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 6px 16px -6px rgba(20,184,176,0.7); display: block; }
.dc-logo .mot { height: 24px; display: block; }
/* menu sans fond ni pastille (07/10/2026) : la page en cours en nuit, soulignée d'un trait vert de 2 px */
.dc-nav { display: flex; gap: 2px; margin-left: 14px; }
.dc-nav a { position: relative; white-space: nowrap; padding: 8px 13px; border-radius: 8px; font: 500 14.5px/1.2 var(--font-texte); color: var(--gris-600); text-decoration: none; }
.dc-nav a:hover, .dc-nav a.on { color: var(--nuit); }
.dc-nav a.on::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--vert-logo); }
.dc-entete .sp { flex: 1; }
.dc-login { white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--gris-600); text-decoration: none; }
.dc-login svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-prog { position: absolute; left: 0; bottom: -1px; height: 3px; width: 38%; background: var(--vert-logo); }

/* ── Pied de page (toujours nuit) ── */
.dc-pied { position: relative; overflow: hidden; background: var(--nuit-abysse); color: #8FA0B6; padding: 36px 28px 18px; font-size: 14px; }
.dc-pied::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; background: radial-gradient(520px 180px at 30% 0, rgba(20,184,176,0.18), rgba(20,184,176,0) 70%); pointer-events: none; }
.dc-pied > * { position: relative; }
.dc-pied-cartes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.dc-pied-vert { display: grid; gap: 10px; align-content: start; padding: 22px 24px; border-radius: var(--rayon-grand); background: linear-gradient(135deg, var(--vert-action), var(--vert-moyen) 55%, var(--turquoise)); color: #FFFFFF; }
.dc-pied-vert b, .dc-pied-vitre b { font: 800 20px/1.25 var(--font-titre); letter-spacing: -.01em; }
.dc-pied-vert p { margin: 0; color: rgba(255,255,255,0.9); font-size: 14px; }
.dc-pied-vert .dc-btn { justify-self: start; background: #FFFFFF; color: var(--vert-action-survol); box-shadow: none; }
.dc-pied-vitre { display: grid; gap: 10px; align-content: start; padding: 22px 24px; border-radius: var(--rayon-grand); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: var(--texte-sur-nuit); }
.dc-pied-vitre p { margin: 0; color: var(--texte-sur-nuit-2); font-size: 14px; }
.dc-pied-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding: 30px 0 20px; }
.dc-pied-cols h5 { margin: 0 0 12px; font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; }
.dc-pied-cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dc-pied-bas { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 13px; color: #8FA0B6; }

/* ── Navigation d'application (espace client, direction A) ── */
.dc-navapp { width: var(--largeur-menu-app); background: #FFFFFF; border-right: 1px solid var(--gris-200); padding: 18px 14px; display: grid; gap: 3px; align-content: start; }
.dc-navapp small { margin: 14px 12px 6px; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gris-600); }
.dc-navapp a { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px; font: 500 14.5px/1 var(--font-texte); color: var(--gris-600); text-decoration: none; }
.dc-navapp a svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-navapp a:hover { background: var(--gris-100); color: var(--nuit); }
.dc-navapp a.on { background: var(--vert-clair); color: var(--vert-action); font-weight: 600; }
.dc-navapp a.on::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vert-action); }
.dc-compteur { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--rayon-pilule); background: var(--nuit); color: #FFFFFF; font: 700 11px/20px var(--font-texte); text-align: center; }

/* ── Carte d'action (espace client, direction A) ── */
.dc-action { position: relative; overflow: hidden; display: grid; gap: 14px; max-width: 700px; padding: 30px 32px; border-radius: var(--rayon-grand); background: var(--nuit); color: #FFFFFF; box-shadow: var(--ombre-flottante); }
.dc-action::before { content: ""; position: absolute; right: -140px; top: -170px; width: 560px; height: 380px; background: radial-gradient(closest-side, rgba(13,182,162,0.42), rgba(13,182,162,0)); animation: dc-derive 18s ease-in-out infinite alternate; }
.dc-action > * { position: relative; }
.dc-action-etat { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--rayon-pilule); border: 1px solid rgba(20,184,176,0.5); font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise); }
.dc-action h3 { margin: 0; font: 800 30px/1.15 var(--font-titre); letter-spacing: -.02em; }
.dc-action p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--texte-sur-nuit-2); }
.dc-action-barre { display: flex; align-items: center; gap: 6px; font: 500 12px var(--font-mono); color: var(--turquoise); }
.dc-action-barre i { flex: 1; max-width: 56px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.dc-action-barre i.ok { background: var(--vert-logo); }
.dc-action-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.dc-action .dc-btn-secondaire { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.25); }
@keyframes dc-derive { from { transform: translate(0, 0); } to { transform: translate(-60px, 30px); } }

/* ── Tuile de chiffre (admin, direction A) ── */
.dc-tuile { display: grid; gap: 8px; width: 220px; padding: 16px 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--gris-200); }
.dc-tuile small { font: 500 13px/1.3 var(--font-texte); color: var(--gris-600); }
.dc-tuile-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dc-tuile b { font: 800 30px/1 var(--font-titre); color: var(--nuit); font-variant-numeric: tabular-nums; }
.dc-tuile svg { width: 84px; height: 30px; overflow: visible; }
.dc-tuile .courbe { fill: none; stroke: var(--vert-moyen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dc-tuile .aire { fill: rgba(13,149,143,0.12); }
.dc-tuile em { font: 500 12px/1 var(--font-mono); font-style: normal; color: var(--vert-action); }
.dc-tuile-nuit { background: var(--nuit); border-color: var(--nuit); }
.dc-tuile-nuit small { color: var(--texte-sur-nuit-2); }
.dc-tuile-nuit b { color: #FFFFFF; }
.dc-tuile-nuit em { color: var(--turquoise); }
.dc-tuile-nuit .courbe { stroke: var(--vert-logo); }

@media (prefers-reduced-motion: reduce) {
  .dc-action::before, .dc-etape-actif i, .dc-pastille-point::before { animation: none; }
  .dc-btn, .dc-frise-rail i { transition: none; }
}

/* doctoclic.fr · socle commun du site (maquette optimale v10 du 06/10/2026, validée par Bertrand), chargé après charte.css
   sur toutes les pages. Couleurs de la charte (charte.css : --nuit, --vert-action…) ; polices --font-titre (Plus Jakarta
   Sans), --font-texte (Inter), --font-mono (JetBrains Mono). Les pages ajoutent leurs classes dans css/p-*.css.

   ─ Mise en page   .wrap (1180 px au plus, gouttière 20 px) ; .sect (section, 72 à 120 px), .sect-gris (fond gris-100) ;
                    .pg-sect / .pg-gris / .pg-tete (sections des pages intérieures) ; body.sans-rv : pas d'apparitions
   ─ Titres         .eyebrow (sur-titre : trait vert, petites capitales) ; h2 em = fin du titre en dégradé vert (le point
                    final reste hors du <em>) ; .sect-tete (+ .centre) : sur-titre, titre, chapeau
   ─ Boutons        .btn + .btn-p (principal), .btn-s (contour), .btn-g et .btn-sm (p-tarifs.css) ; .lien (lien souligné)
   ─ En-tête        .ent (collant, ombre dès qu'on défile : html.defile) : .logo (.logo-f + nom), .nav (pastille vert pâle
                    sur la page en cours, aria-current posé par build.py), .espace, .ent-demo, .burger, #menu-mob, .prog
   ─ Hauts de page  .hero (accueil), .p-tete (+ .tx : centré, .tx-chips, .tx-liens) : fond nuit, halo, trame de points
   ─ Cartes         .dc-cartes > .dc-carte (B · Picto en ligne) : .dc-ic (pastille ronde), h3, p
   ─ Questions      .ab-acc (+ .ac-acc) : details > summary (span + i) + p, une seule réponse ouverte ([data-un-seul])
   ─ Votre démo     .fin (parts/fin.html, {{fin}} dans une page) : carte fine, barre d'adresse ; fond opposé à la section
                    du dessus (socle.js pose --fin-fond)
   ─ Pied           .pied.pf5 : marque et phrase, cinq colonnes, bas de page
   ─ Bulle          .bulle (#uq, parts/question.html) ; téléphone : .barre-bas (parts/mbar.html), visible avec body.mbar-vu
   ─ Aperçus        .navig (navigateur), .cab (site d'un cabinet : --c couleur, --f police, --rr arrondi), .tel (téléphone)
   ─ Apparitions    .rv (+ .rv-h, .rv-t, .rv-c, .rv-b, .rv-vg, .rv-vd), .rv-vu : posées et retirées par socle.js */

/* contraste (10/10/2026) : le gris des petits textes (#6B7A8D dans la charte) passe à #5F6E82, au moins 4,5:1 sur le blanc,
   le gris clair et le vert brume des sections */
:root{--r:14px;--r-grand:22px;--pilule:999px;--largeur:1180px;--gris-500:#5F6E82;
  --ombre:0 1px 2px rgba(7,7,48,.06),0 12px 32px -14px rgba(7,7,48,.18);
  --ombre-forte:0 30px 70px -30px rgba(7,7,48,.45)}

/* ── base ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hauteur-entete) + 16px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--nuit);font:400 17px/1.65 var(--font-texte);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:var(--vert-action)}
h1,h2,h3{font-family:var(--font-titre);color:var(--nuit);margin:0;letter-spacing:-.02em}
h1{text-wrap:balance;font-size:clamp(2.1rem,1.3rem + 2.2vw,3.05rem);line-height:1.06;font-weight:800}
h2{text-wrap:balance;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.12;font-weight:800}
h3{font-size:1.12rem;line-height:1.3;font-weight:700;letter-spacing:-.01em}
p{margin:0}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* case anti-robots des formulaires (pot de miel, 15/10/2026) : hors de l'écran, libellé neutre que la saisie
   automatique ne reconnaît pas (le 14/10, elle remplissait l'ancienne case, sans libellé, collée au champ e-mail) */
.pm{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--nuit);color:#fff;font:600 14px var(--font-texte);padding:12px 16px;border-radius:10px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.a-trancher{background:var(--gris-150);color:var(--nuit);border:2px dashed var(--nuit);border-radius:6px;padding:0 6px;font-weight:700}
.wrap{width:min(var(--largeur),100% - 40px);margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vert-action)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--vert-logo)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:12px;
  font:700 16px/1 var(--font-titre);text-decoration:none;cursor:pointer;transition:background-color .2s,box-shadow .2s,transform .2s}
.btn-p{background:var(--vert-action);color:#fff;box-shadow:0 10px 24px -12px rgba(11,122,117,.8)}
.btn-p:hover{background:var(--vert-action-survol)}
.btn-s{background:#fff;color:var(--nuit);box-shadow:inset 0 0 0 1.5px var(--gris-200)}
.btn-s:hover{box-shadow:inset 0 0 0 1.5px var(--nuit)}
.lien{font-weight:600;color:var(--vert-action);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.lien:hover{color:var(--vert-action-survol)}
:focus-visible{outline:3px solid var(--vert-logo);outline-offset:3px;border-radius:6px}
.sect{padding:clamp(72px,9vw,120px) 0}
.sect-gris{background:var(--gris-100)}
.sect-tete{display:grid;gap:14px;max-width:720px;margin-bottom:48px}
.sect-tete p{color:var(--gris-600);font-size:18px}
.centre{text-align:center;margin-inline:auto;justify-items:center}
.lead{font-size:19px;color:var(--gris-600);max-width:34em}
.lead strong{color:var(--nuit);font-weight:600}
@keyframes monte{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes pouls{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@keyframes ct-battre{50%{transform:scale(1.6);opacity:.5}}
@keyframes ct-coche{from{transform:scale(.4)}}

/* ── en-tête (A · Affiné, 06/10) : le favicon à côté du logo, le menu centré, la page en cours en pastille vert pâle,
   une ombre légère dès qu'on défile ; barre de lecture verte ── */
.ent{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s}
html.defile .ent{border-bottom-color:var(--gris-200);box-shadow:0 10px 30px -22px rgba(7,7,48,.45)}
.ent-in{height:var(--hauteur-entete);display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo .logo-f{width:30px;height:30px;border-radius:8px}
.ent .logo img:not(.logo-f){height:26px;width:auto}
.nav{display:flex}
.ent .nav{margin-inline:auto;gap:2px}
.nav a{position:relative;padding:10px 14px;border-radius:999px;font:500 15px/1 var(--font-texte);color:var(--gris-600);text-decoration:none;transition:background-color .2s,color .2s}
.nav a:hover{background:var(--gris-100);color:var(--nuit)}
.nav a[aria-current]{background:var(--vert-brume);color:var(--vert-action);font-weight:600}
.ent .sp{display:none}
.espace{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--gris-600);text-decoration:none;white-space:nowrap}
.espace:hover{color:var(--nuit)}
.ent .btn{min-height:44px;padding:0 18px;font-size:15px}
.prog{position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--vert-logo)}
.burger{display:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--gris-100);color:var(--nuit);place-items:center;cursor:pointer}
.burger .b-x,.burger[aria-expanded="true"] .b-l{display:none}
.burger[aria-expanded="true"] .b-x{display:block}
/* menu du téléphone */
.menu-mob{display:grid;gap:4px;padding:10px 20px 20px;border-top:1px solid var(--gris-200);background:#fff}
.menu-mob[hidden]{display:none}
.menu-mob a{padding:12px 4px;font:600 17px var(--font-titre);color:var(--nuit);text-decoration:none;border-bottom:1px solid var(--gris-150)}
.menu-mob a[aria-current]{color:var(--vert-action)}
.menu-mob .btn{margin-top:10px;border:0;color:#fff;justify-content:center}
.ent .menu-mob .btn{display:flex}

/* ── hauts de page : nuit, léger dégradé (toutes les pages) ; même famille que l'espace et la connexion : nuit profonde
   #040522 → #07062F, halo vert, trame de points (pleine en haut, effacée vers le bas) ── */
.p-tete{padding:clamp(48px,6vw,80px) 0 clamp(56px,7vw,96px)}
.p-tete h1{max-width:18em}
:root :is(.hero,.p-tete){position:relative;isolation:isolate;
  background:radial-gradient(640px 420px at 78% 45%,rgba(20,184,176,.18),rgba(20,184,176,0) 65%),
    radial-gradient(700px 320px at 0% 100%,rgba(13,149,143,.12),rgba(13,149,143,0) 70%),
    linear-gradient(160deg,var(--nuit-profonde) 0%,var(--nuit-profonde) 45%,#07062F 100%);color:var(--texte-sur-nuit)}
:root :is(.hero,.p-tete)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(203,213,225,.13) 1px,rgba(203,213,225,0) 1.6px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%)}
:root :is(.hero,.p-tete) h1 em{background:linear-gradient(95deg,var(--vert-logo),var(--turquoise));-webkit-background-clip:text;background-clip:text;color:transparent}
:root :is(.hero,.p-tete) h1{color:#fff}
:root :is(.hero,.p-tete) .eyebrow{color:var(--vert-logo)}
:root :is(.hero,.p-tete) .lead{color:var(--texte-sur-nuit-2)}
:root .hero .lead strong{color:#fff}
:root .hero .tel{box-shadow:0 0 0 1px rgba(255,255,255,.16),var(--ombre-forte)}
:root :is(.hero,.p-tete) .btn-s{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
:root :is(.hero,.p-tete) .btn-s:hover{box-shadow:inset 0 0 0 1.5px #fff}
/* haut centré, comme Guides (Tarifs, Contact, À propos, pages légales) : sur-titre, titre, chapeau, puces, liens fléchés */
.tx.p-tete{padding:72px 0 80px}
.tx-in{display:grid;justify-items:center;gap:20px;text-align:center}
.tx h1{max-width:18ch;margin:0;font-size:clamp(2.1rem,4.4vw,3.375rem);line-height:1.06;letter-spacing:-.035em}
.tx .lead{max-width:640px;margin:0;font-size:19px;line-height:1.6}
.tx h1 em{font-style:normal}
.tx-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
.tx-chips li{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--font-texte);border-radius:99px;padding:8px 13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--texte-sur-nuit)}
.tx-chips svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--turquoise);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tx-chips .tx-vert{background:rgba(20,184,176,.16);border-color:transparent;color:#C8F1EB}
.tx-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 36px;margin-top:12px}
.tx-liens a{display:inline-flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1.5px solid rgba(20,184,176,.5);font:700 17px var(--font-titre);color:#fff;text-decoration:none;transition:border-color .2s,color .2s}
.tx-liens a:hover{border-color:var(--turquoise);color:var(--turquoise)}
.tx-liens small{font:500 12px var(--font-mono);color:var(--texte-sur-nuit-2)}
.tx-liens span{color:var(--turquoise);transition:transform .2s}
.tx-liens a:hover span{transform:translateX(3px)}
.tx :focus-visible{outline:3px solid var(--turquoise);outline-offset:3px}

/* ── titres de section (06/10) : partout comme « Mon engagement » : un sur-titre, le même corps, la fin du titre en
   dégradé vert (les titres numérotés des guides et des pages légales restent des titres de texte) ── */
/* dégradé du vert action au vert moyen (10/10/2026) : sa fin claire tient 3,4:1 sur le gris clair (grand texte : 3:1) ; le
   vert du logo ne restait qu'à 2,4:1 */
h2 em{font-style:normal;background:linear-gradient(95deg,var(--vert-action),var(--vert-moyen));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── sections des pages intérieures (À propos, Contact, pages légales) ── */
.pg-sect{padding:clamp(72px,8vw,104px) 0;background:#fff}
.pg-gris{background:var(--gris-100)}
.pg-tete{display:grid;gap:12px;max-width:720px;margin-bottom:44px}
.pg-tete.pg-c{justify-items:center;text-align:center;margin-inline:auto}
.pg-tete p{margin:0;font-size:18px;line-height:1.65;color:var(--gris-600)}
.pg-corps p{margin:0 0 18px;font-size:18px;line-height:1.75;color:var(--gris-600)}
.pg-corps p:last-child{margin-bottom:0}
.pg-corps mark{background:linear-gradient(transparent 58%,rgba(13,182,162,.28) 58%);color:var(--nuit);font-weight:600}
.pg-lettre{max-width:720px}
.pg-auteur{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:28px;text-align:left}
.pg-auteur img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4.5px var(--vert-logo)}
.pg-auteur b{display:block;font:800 16px var(--font-titre);color:var(--nuit)}
.pg-auteur small{display:block;font-size:13.5px;color:var(--gris-600)}
.pg-lettre .pg-tete{margin-bottom:28px}
.pg-sect svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pg-sect svg .plein{fill:currentColor;stroke:none}
.pg-sect .tx-liens a{color:var(--nuit);border-bottom-color:rgba(13,182,162,.45)}
.pg-sect .tx-liens a:hover{color:var(--vert-action);border-color:var(--vert-action)}
.pg-sect .tx-liens small{color:var(--gris-600)}
.pg-sect .tx-liens span{color:var(--vert-action)}

/* ── cartes (B · Picto en ligne, 06/10) : pastille ronde à gauche du titre, texte dessous ── */
.dc-cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;counter-reset:dcc}
.dc-carte{position:relative;counter-increment:dcc;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:8px;align-items:center;align-content:start;
  max-width:none;padding:24px 24px 26px;border-radius:18px;background:#fff;border:1px solid var(--gris-200);box-shadow:0 1px 2px rgba(7,7,48,.04)}
.dc-carte h3{margin:0;font:800 18px/1.3 var(--font-titre);letter-spacing:-.01em;color:var(--nuit)}
.dc-carte p{grid-column:2;margin:0;font-size:15px;line-height:1.6;color:var(--gris-600)}
.dc-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--vert-clair);color:var(--vert-action)}
.dc-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:980px){.dc-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.dc-cartes{grid-template-columns:minmax(0,1fr)}}

/* ── questions fréquentes (le dessin de Tarifs, 06/10) : cartes blanches, pastille claire, une seule réponse ouverte ── */
.ab-acc{display:grid;gap:10px}
.ab-acc details{border-radius:16px;background:#fff;border:1px solid var(--gris-200);transition:border-color .25s,box-shadow .25s}
.ab-acc details[open]{border-color:rgba(13,182,162,.35);box-shadow:0 18px 40px -30px rgba(7,7,48,.35)}
.ab-acc summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px 18px 24px;list-style:none;cursor:pointer;font:700 17px/1.4 var(--font-titre);color:var(--nuit)}
.ab-acc summary::-webkit-details-marker{display:none}
.ab-acc summary span{transition:color .2s}
.ab-acc summary:hover span,.ab-acc details[open] summary span{color:var(--vert-action)}
.ab-acc summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--gris-300);transition:background-color .3s,border-color .3s}
.ab-acc summary i::before,.ab-acc summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;border-radius:2px;background:var(--nuit);transition:transform .3s,background-color .3s}
.ab-acc summary i::after{transform:rotate(90deg)}
.ab-acc details[open] summary i{border-color:transparent;background:var(--vert-clair)}
.ab-acc details[open] summary i::before,.ab-acc details[open] summary i::after{background:var(--vert-action)}
.ab-acc details[open] summary i::after{transform:rotate(0)}
.ab-acc details p{padding:0 70px 22px 24px;font-size:16px;line-height:1.65;color:var(--gris-600);animation:monte .35s ease both}
.ac-acc{width:min(820px,100%);margin-top:52px}
.ac-acc summary{padding:20px 20px 20px 26px;font-size:18px}
.ac-acc details p{padding-left:26px}
.faq-acc{margin:0 auto}
.faq-pied{text-align:center;margin-top:28px;color:var(--gris-600)}
@media (max-width:620px){
  .ab-acc details p{padding-right:20px}
  .ab-acc summary,.ac-acc summary{padding:16px 16px 16px 18px;font-size:16px}
  .ab-acc details p,.ac-acc details p{padding-left:18px}
}

/* ── aperçus : le site d'un cabinet dans un navigateur ou un téléphone (accueil, Exemples, Créer mon site, Votre démo) ── */
.apercu{position:relative;padding:8px 40px 56px 0}
.navig{border-radius:16px;background:#fff;box-shadow:var(--ombre-forte);border:1px solid var(--gris-200);overflow:hidden;transition:border-radius .3s}
.navig-barre{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:var(--gris-100);border-bottom:1px solid var(--gris-200)}
.navig-barre i{width:9px;height:9px;border-radius:50%;background:var(--gris-300)}
.navig-url{margin-left:12px;padding:4px 12px;border-radius:999px;background:#fff;font:500 12px var(--font-mono);color:var(--gris-600);max-width:70%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cab{--c:#1D5C68;--f:var(--font-titre);--rr:10px;font-family:var(--font-texte)}
.cab-ent{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--gris-150)}
.cab-logo{width:26px;height:26px;border-radius:8px;background:var(--c);flex:none}
.cab-nom{font:700 14px/1.2 var(--f);color:var(--nuit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.cab-nav{display:flex;gap:12px;font-size:12px;color:var(--gris-600);white-space:nowrap;flex:none}
.cab-rdv{padding:8px 12px;border-radius:var(--rr);background:var(--c);color:#fff;font:600 12px/1 var(--font-texte);white-space:nowrap}
.cab-heros{display:grid;grid-template-columns:1.05fr .95fr;min-height:260px}
.cab-txt{display:grid;align-content:center;gap:10px;padding:26px 22px}
.cab-sur{font:500 10px/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.cab-titre{font:800 26px/1.08 var(--f);color:var(--nuit);letter-spacing:-.02em;overflow-wrap:anywhere}
.cab-p{font-size:13px;color:var(--gris-600)}
.cab-btn{justify-self:start;margin-top:4px;padding:10px 14px;border-radius:var(--rr);background:var(--c);color:#fff;font:600 12px/1 var(--font-texte)}
.cab-photo{background:var(--gris-150) center/cover no-repeat;transition:background-image .3s}
.cab-soins{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 18px;border-top:1px solid var(--gris-150)}
.cab-soins span{padding:6px 10px;border-radius:999px;background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--c);font:600 11px/1 var(--font-texte)}
.tel{position:absolute;right:0;bottom:0;width:172px;border-radius:32px;padding:7px;background:#0A1322;box-shadow:inset 0 0 0 1.5px #2A3A52,0 0 0 1px rgba(255,255,255,.06),var(--ombre-forte)}
.tel-ecran{position:relative;display:flex;flex-direction:column;aspect-ratio:9/19;border-radius:26px;overflow:hidden;background:#fff}
.tel-ecran::before{content:"";position:absolute;z-index:3;top:7px;left:50%;width:46px;height:13px;margin-left:-23px;border-radius:99px;background:#0A1322}
.tel-ecran::after{content:"";position:absolute;z-index:3;bottom:6px;left:50%;width:58px;height:4px;margin-left:-29px;border-radius:99px;background:var(--gris-300)}
.tel .cab-ent{padding:28px 12px 10px}
.tel .cab-nom{font-size:11px;max-width:110px}
.tel .cab-logo{width:18px;height:18px;border-radius:6px}
.tel-photo{height:112px;flex:none;background:var(--gris-150) center/cover no-repeat}
.tel .cab-txt{flex:1;align-content:start;padding:14px 12px 18px;gap:7px}
.tel .cab-titre{font-size:16px}
.tel .cab-p{font-size:10.5px}
.tel .cab-btn{font-size:10px;padding:8px 10px}
/* petite photo ronde de Bertrand, favicon blanc posé dessus (Votre interlocuteur, Votre démo) */
.qz-photo{position:relative;display:inline-block;flex:none;width:var(--t);height:var(--t)}
.qz-photo>img:first-child{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 10px 24px -12px rgba(7,7,48,.45)}
.qz-fav{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:6px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}

/* champs de formulaire (Créer mon site) */
.champ{display:block;font:600 14px var(--font-texte);color:var(--nuit)}
.champ small{font-weight:400;color:var(--gris-500)}
.champ input,.champ select,.champ textarea{display:block;margin-top:6px;width:100%;min-height:50px;padding:12px 14px;border:1.5px solid var(--gris-200);border-radius:12px;background:var(--gris-100);
  font:400 16px/1.4 var(--font-texte);color:var(--nuit)}
.champ textarea{resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--vert-action);background:#fff}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── Votre démo (bas des pages) : E · Carte fine, 06/10. Une carte à filet fin sur le fond clair de la section (gris
   clair ou blanc, à l'opposé de la section du dessus) ; le titre et l'adresse à gauche, la barre à droite ── */
.fin{padding:0;background:none}
.fa-liens{margin:0;font-size:14.5px;color:var(--gris-500)}
.fa-liens a{font-weight:600;white-space:nowrap}
.fin-a{padding:clamp(80px,10vw,128px) 0;background:var(--fin-fond,var(--gris-100))}
.fa-barre{display:flex;align-items:center;gap:10px;width:min(760px,100%);margin-top:14px;padding:10px 10px 10px 18px;border-radius:20px;background:#fff;
  border:1.5px solid var(--gris-200);box-shadow:0 30px 60px -36px rgba(7,7,48,.45);transition:border-color .25s,box-shadow .25s}
.fa-barre:focus-within{border-color:var(--vert-action);box-shadow:0 0 0 5px rgba(13,182,162,.15),0 30px 60px -36px rgba(7,7,48,.45)}
.fa-cadenas{display:grid;place-items:center;flex:none;width:30px;height:30px;margin-left:8px;border-radius:9px;background:var(--vert-clair);color:var(--vert-action)}
.fa-barre input{flex:1;min-width:0;height:52px;border:0;background:none;font:600 19px var(--font-titre);color:var(--nuit)}
.fa-barre input:focus{outline:none}
.fa-barre input::placeholder{color:var(--gris-300)}
.fa-url{margin:0;font:500 14px var(--font-mono);color:var(--gris-500)}
.fa-url b{color:var(--vert-action);font-weight:600}
.fa-url b.change{animation:pop .35s ease}
.fv-carte{padding:clamp(64px,7vw,96px) 0}
.fve2-carte{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px 48px;align-items:center;padding:36px 40px;border-radius:24px;background:#fff;border:1px solid var(--gris-200)}
.fin[style*="#fff"] .fve2-carte{background:var(--gris-100);border-color:transparent}
.fve2-carte>div{display:grid;gap:10px}
.fve2-carte h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem)}
.fve2-carte .fa-barre{width:100%;margin:0;padding-left:14px;box-shadow:none}
.fve2-carte .fa-cadenas{margin-left:0}
.fv-carte .fa-liens{margin-top:22px;text-align:center}
@media (max-width:1000px){.fve2-carte{grid-template-columns:minmax(0,1fr);padding:28px 24px}}

/* ── pied de page : F5 · Le plan du site, fond abysse (06/10) : la marque et sa phrase, cinq colonnes (Le site, Formules,
   Guides, Informations, Me joindre, avec de petits pictos), puis le bas de page ── */
.pied{background:var(--nuit-abysse);color:var(--texte-sur-nuit-2);padding:56px 0 28px;font-size:14px}
.pied h2{margin:0 0 12px;font:500 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--turquoise)}
.pied ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pied a{color:var(--texte-sur-nuit-2);text-decoration:none}
.pied a:hover{color:#fff}
.pied :focus-visible{outline-color:var(--turquoise)}
.pied ul small{margin-left:6px;font:500 11.5px var(--font-mono);color:rgba(169,183,201,.7)}
.pied .pied-tous{color:var(--turquoise);font-weight:600}
.pied-marque{display:inline-flex;align-items:center;gap:10px}
.pied-marque .pied-fav{width:30px;height:30px;border-radius:8px}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.07);font-size:13px}
.pf5{padding-top:64px}
.pf5 .pied-bas{margin-top:56px}
.pfh{display:grid;margin-bottom:48px}
.pfh-id{display:grid;gap:14px;align-content:start}
.pfh-id p{margin:0;font-size:14.5px;line-height:1.6;color:var(--texte-sur-nuit-2)}
.pfh-id .pied-marque img:not(.pied-fav){height:26px;width:auto}
.pfh-a{gap:28px}
.pfh-a .pfh-id{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:28px}
.pfh-a .pfh-id p{padding-left:28px;border-left:1px solid rgba(255,255,255,.12)}
.pf5-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.pied .pf-ic a{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%}
.pf-ic svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--turquoise);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.pf-ic svg .plein{fill:var(--turquoise);stroke:none}
@media (max-width:980px){.pf5-cols{grid-template-columns:1fr 1fr}}
@media (max-width:620px){
  .pf5{padding-top:48px}
  .pfh{margin-bottom:40px}
  .pfh-a .pfh-id{grid-template-columns:minmax(0,1fr);gap:14px}
  .pfh-a .pfh-id p{padding-left:0;border-left:0}
}

/* ── bulle « Une question ? » (AB1, 06/10) : fermée, le bouton nuit avec le favicon blanc ; ouverte, un en-tête nuit
   dégradé (photo cerclée de blanc, favicon blanc posé dessus), trois lignes détaillées, l'appel dessous ── */
.bulle{position:fixed;right:20px;bottom:20px;z-index:200}
.bulle>button{display:block;padding:0;border:0;background:none;cursor:pointer;font:700 15px var(--font-titre);color:#fff;border-radius:999px}
.bulle>button:focus-visible{outline:3px solid var(--vert-logo);outline-offset:3px}
.bu-l{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 20px 0 12px;border-radius:999px;background:linear-gradient(135deg,#070730,#0B1747);
  box-shadow:0 14px 30px -12px rgba(7,7,48,.8),inset 0 0 0 1px rgba(255,255,255,.12);transition:transform .2s}
.bulle>button:hover .bu-l{transform:translateY(-2px)}
.bulle>.bulle-bt{transition:opacity .25s,visibility .25s}
.bulle:is(.bulle-cache,.bulle-evite):not(.ouverte)>.bulle-bt{opacity:0;visibility:hidden}   /* pied de page à l'écran, ou bloc à ne pas couvrir (socle.js) */
.bu-l img{width:28px;height:28px;border-radius:8px}
.bulle-panneau{position:absolute;right:0;bottom:calc(100% + 14px);width:344px;max-height:calc(100vh - 140px);overflow:auto;border-radius:22px;background:#fff;box-shadow:var(--ombre-forte);border:1px solid var(--gris-200);display:none;font-size:14px}
.bulle.ouverte .bulle-panneau{display:block;animation:bu-ouvre .28s cubic-bezier(.2,.8,.2,1)}
@keyframes bu-ouvre{from{opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom right}}
.bulle-panneau a{text-decoration:none;color:var(--nuit)}
.bulle-panneau a:focus-visible{outline:3px solid var(--vert-logo);outline-offset:2px}
.bu-ic,.bu-ic-p{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bu-ic .bu-plein{fill:currentColor;stroke:none}
.bu-ic-p{width:14px;height:14px;vertical-align:-2px;margin-right:6px}
.bu-fl{margin-left:auto;font-weight:700;transition:transform .2s}
.bulle-panneau a:hover .bu-fl{transform:translateX(3px)}
.bu-tete-nuit{background:linear-gradient(165deg,#12124A 0%,#070730 55%,#040522 100%);color:#fff}
.bu-tete{display:flex;align-items:center;gap:14px;padding:20px}
.bu-av{position:relative;flex:none}
.bu-av>img:first-child{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff}
.bu-av .bu-fav{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;border-radius:6px;box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.bu-tete b{display:block;font:800 16px var(--font-titre);color:#fff}
.bu-tete b small{font:inherit;color:var(--turquoise)}
.bu-tete>span>span{display:block;font-size:13px;line-height:1.45;color:var(--texte-sur-nuit-2)}
.bu-tete .bu-ic-p{color:var(--turquoise)}
.bu-corps{display:grid;gap:10px;padding:20px}
.bu-ligne{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--gris-100);transition:background .2s}
.bu-ligne:hover{background:var(--vert-clair)}
.bu-ligne i{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--vert-action);box-shadow:inset 0 0 0 1px rgba(13,182,162,.3)}
.bu-ligne b{display:block;font:700 14.5px var(--font-titre)}
.bu-ligne small{display:block;font-size:12.5px;color:var(--gris-600)}
.bu-appel{display:flex;gap:23px;align-items:center;margin:6px 0 0;padding:0 0 0 21px;font-size:13px;line-height:1.45;color:var(--gris-600)}
.bu-appel .bu-ic{width:18px;height:18px;color:var(--vert-action)}
.bulle-panneau .bu-appel a{color:var(--vert-action);font-weight:700;white-space:nowrap}
.bulle-panneau .bu-appel a:hover{text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.bulle.ouverte .bulle-panneau{animation:none}.bu-l,.bu-fl{transition:none}}

/* ── barre du bas (téléphone) : « Voir ma démo » et le bouton « ? » qui ouvre la bulle. Elle ne recouvre pas ce qu'on lit
   (05/10/2026) : absente tant que le haut de la page est à l'écran, effacée quand on descend, de retour dès qu'on remonte
   et en bas de la page (socle.js : body.mbar-vu) ── */
.barre-bas{display:none}

/* ── téléphone et tablette ── */
@media (max-width:860px){
  .menu-mob:not([hidden]){display:grid}
  .nav,.espace,.ent .btn{display:none}
  .burger{display:grid;margin-left:auto}
  .logo .logo-f,.pied-marque .pied-fav{width:28px;height:28px}
}
@media (max-width:640px){
  .tx.p-tete{padding:48px 0 56px}
  .tx .lead{font-size:17px}
  .tx-liens{flex-direction:column;align-items:center}
}
@media (max-width:620px){
  body{font-size:16px}
  .champs-2{grid-template-columns:1fr}
  .menu-mob{position:fixed;inset:var(--hauteur-entete) 0 auto 0;max-height:calc(100vh - var(--hauteur-entete));overflow:auto;box-shadow:0 20px 40px -20px rgba(7,7,48,.4)}
  .cab-heros{grid-template-columns:1fr}
  .cab-photo{height:150px}
  .cab-nav{display:none}
  .tel{display:none}
  .navig .cab-rdv{display:none}
  .pg-corps p{font-size:16.5px}
  .pg-auteur{justify-content:flex-start}
  .fa-barre{flex-wrap:wrap;padding:10px}
  .fa-cadenas{margin-left:0}
  .fa-barre .btn{width:100%}
  .fa-barre input{font-size:17px}
  .pied{padding-bottom:calc(28px + 74px)}
  /* la bulle : plus de bouton flottant ; son panneau s'ouvre au-dessus de la barre, depuis le bouton « ? » */
  .bulle-bt{display:none!important}
  .bulle{left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom))}
  .bulle-panneau{left:0;right:0;bottom:0;width:auto;max-height:calc(100vh - var(--hauteur-entete) - 110px)}
  .barre-bas{position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;gap:10px;align-items:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--gris-200);box-shadow:0 -10px 30px -18px rgba(7,7,48,.35);
    transform:translateY(110%);visibility:hidden;transition:transform .3s ease,visibility 0s .3s}
  body:is(.mbar-vu,.bulle-ouverte) .barre-bas{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
  .barre-bas .btn{flex:1;min-height:48px}
  .barre-bas .barre-q{width:48px;height:48px;flex:none;border-radius:12px;border:0;background:var(--vert-clair);color:var(--vert-action);display:grid;place-items:center;cursor:pointer}
  .barre-bas .barre-q[aria-expanded="true"]{background:var(--vert-action);color:#fff}
}

/* ── apparitions au défilement (06/10, socle.js) : translate / rotate / scale et opacité seulement, classes retirées une fois
   l'apparition finie ; rien en mouvement réduit, rien à l'impression ── */
.js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js [data-rv].vu{opacity:1;transform:none}
.rv{transition:opacity .8s ease,translate .8s cubic-bezier(.2,.7,.2,1),rotate .8s cubic-bezier(.2,.7,.2,1)!important;transition-delay:calc(var(--rv-i,0) * 90ms)!important}
.rv:not(.rv-vu){opacity:0!important;translate:0 24px}
.rv-h:not(.rv-vu){translate:0 16px}
.rv-t{transition-duration:.7s!important}
.rv-vg:not(.rv-vu){translate:-48px 0;rotate:-1.2deg}
.rv-vd:not(.rv-vu){translate:48px 0;rotate:1.2deg}
.rv-h{transition-delay:calc(80ms + var(--rv-i,0) * 90ms)!important}
.cab-photo.rv-zoom{scale:1.07;transition:scale 7s ease-out}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js [data-rv]{opacity:1;transform:none}
  .rv:not(.rv-vu){opacity:1!important;translate:none;rotate:none}
}
@media print{.rv{opacity:1!important;translate:none!important;rotate:none!important}.bulle,.barre-bas{display:none!important}}
body>main{overflow-x:clip}

/* ═════════ Téléphone : version courte (B, choisie le 07/10/2026) ═════════
   640 px de large au plus ; rien ne change au-delà. Ce qui redit autre chose est masqué sur téléphone seulement (le code
   reste), le reste est resserré. Ici ce qui est commun ; le propre de chaque page est dans sa feuille, sous le même titre.
   Audit, mesures et captures : « 04 Site doctoclic.fr/Version mobile 2026-10-07/LISEZ-MOI.md ». */
.hx-nav{display:none}
@media (max-width:640px){
  .sect,.pg-sect{padding-top:44px;padding-bottom:44px}
  .sect-tete{gap:10px;margin-bottom:26px}
  .sect-tete p{font-size:16px;line-height:1.55}
  .p-tete.tx{padding-top:32px;padding-bottom:36px}
  .tx-in{gap:16px}
  /* liens fléchés des hauts de page côte à côte, à 44 px de haut (au lieu de 35) */
  .tx-liens{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 24px;margin-top:4px}
  .tx-liens a{min-height:44px;align-items:center;padding:0}
  /* pas de « Votre démo » en fin de page : « Voir ma démo » reste dans le menu, dans la barre du bas (qui revient quand
     on remonte et en bas de la page) et, sur l'accueil, dans le haut */
  .fin{display:none}
  /* pied : sans « Le site » (= le menu) ni « Formules » (= Tarifs) ; guides, liens légaux, contact et mentions gardés */
  .pf5{padding-top:36px}
  .pf5-cols{gap:22px 16px}
  .pf5 .pied-bas{margin-top:28px}
  .pf5-cols>div:nth-child(1),.pf5-cols>div:nth-child(2){display:none}
  /* sections « pg » (À propos, Contact) ; le chapeau des sections grises redit la 1re carte (À propos) ou les sujets (Contact) */
  .pg-auteur{margin-bottom:16px}
  .pg-lettre .pg-tete{margin-bottom:16px}
  .pg-corps p{margin-bottom:14px;line-height:1.6}
  .pg-gris .pg-tete{margin-bottom:24px}
  .pg-gris .pg-tete p{display:none}
  .pg-gris .dc-cartes{gap:10px}
  .pg-gris .dc-carte{padding:18px}
  /* questions (accueil, Tarifs, Votre espace client) : toutes fermées sur téléphone (socle.js), plus serrées */
  .ab-acc{gap:8px}
  .ab-acc summary{min-height:56px;padding:12px 14px 12px 16px;font-size:15.5px}
  .ab-acc details p{padding:0 16px 16px;font-size:15px}
  .ac-acc{margin-top:26px}
  .faq-pied{margin-top:18px;font-size:14.5px}
  .faq-pied a{white-space:nowrap}
  /* rangées qui défilent à l'horizontale (exemples de l'accueil, guides liés) : « 2 / 5 » et flèches de 44 px (socle.js) */
  .hx-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
  .hx-nav button{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--gris-300);border-radius:50%;background:#fff;
    color:var(--nuit);font:700 18px/1 var(--font-titre);cursor:pointer}
  .hx-nav button:disabled{opacity:.35;cursor:default}
  .hx-pos{min-width:64px;text-align:center;font:600 14px var(--font-mono);color:var(--gris-600)}
  .hx-pos b{color:var(--nuit)}
}

/* ── Téléphone (mission du 16/10/2026) : cibles tactiles de 44 px au moins (logo, liens du pied, liens fléchés seuls) ── */
@media (max-width:640px){
  .logo,.pied-marque{padding-block:8px;margin-block:-8px}
  .pied ul{gap:0}
  .pied ul a,.pf-ic a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  p + .lien,.qz-liens .lien{display:inline-flex;align-items:center;min-height:44px}
}