/* Vitrine publique — Connexion Diagnostique (charte Connexion Coaching) */

body.vitrine{background:var(--creme)}

/* ------------------------------------------------------------ en-tête */
.v-entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 5vw;background:color-mix(in srgb,var(--creme) 95%,transparent);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--bordure)}
.v-marque{display:flex;align-items:center;gap:12px;text-decoration:none}
.v-marque:hover{text-decoration:none}
/* Image de fond : le symbole suit --logo-symbole, redéfini par chaque thème. */
.v-symbole{width:42px;height:44px;display:block;flex:0 0 auto;
  background:var(--logo-symbole) center/contain no-repeat}
/* Le nom reprend le lockup du kit : Barlow Condensed, bleu puis rouge en thème
   crème ; marine puis olive en thème olive (--nom-1 / --nom-2). */
.v-nom{font-family:'Barlow Condensed',Arial,sans-serif;font-size:21px;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:var(--nom-1);white-space:nowrap}
.v-nom em{font-style:normal;font-weight:500;color:var(--or)}

/* ------------------------------------------------------ sélecteur de thème */
.sel-theme{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--bordure);
  border-radius:20px;background:var(--surface)}
.st-bouton{display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer;
  background:transparent;color:var(--gris);font-family:inherit;font-size:12.5px;
  font-weight:600;padding:5px 11px;border-radius:16px;white-space:nowrap}
.st-bouton:hover{background:var(--creme-2);color:var(--encre)}
.st-bouton.actif{background:var(--creme-2);color:var(--encre)}
.st-pastille{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);
  flex:0 0 auto}
/* Les pastilles montrent la couleur du thème, pas celle du thème courant :
   elles sont donc écrites en dur, à dessein. */
.st-creme{background:linear-gradient(135deg,#F8F4EA 50%,#C89038 50%)}
.st-olive{background:linear-gradient(135deg,#F2F3EC 50%,#6F7F4F 50%)}
@media(max-width:900px){.st-nom{display:none}.st-bouton{padding:5px 8px}}
.v-nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:22px}
.v-lien{color:var(--encre);font-weight:600;font-size:14px}
.v-lien:hover{color:var(--or-fonce);text-decoration:none}
.v-connexion{color:var(--vert-fonce)}
.v-cta{padding:9px 20px}
@media(max-width:720px){.v-nav{gap:12px}.v-lien:not(.v-connexion){display:none}}
/* Le nom est en capitales espacées et ne peut pas se couper : à pleine taille
   il mesure à lui seul plus qu'un écran de téléphone, et poussait toute la
   barre hors cadre. On le réduit, puis on le retire — le symbole suffit à
   identifier le site, et il reste cliquable. */
@media(max-width:820px){.v-nom{font-size:17px;letter-spacing:.10em}}
@media(max-width:600px){.v-nom{display:none}}

.v-contenu{min-height:70vh}

/* --------------------------------------------------------------- héros */
/* Grille de la maquette : la colonne texte respire (1.42fr), la carte
   s'aligne par son bord HAUT sur le sur-titre — pas par son centre. */
.v-heros{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:start;
  max-width:1120px;margin:0 auto;padding:64px 5vw 48px}
@media(max-width:860px){.v-heros{grid-template-columns:1fr}}
.v-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--or);margin-bottom:12px}
/* Titre en vedette (maquette hero-radar) : Playfair 700, interligne 0,98,
   deux lignes fixes — l'em en bloc empêche tout recassage. */
.v-heros h1{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(48px,6vw,72px);line-height:.98;margin:0 0 24px;
  letter-spacing:-.015em}
.v-heros h1 em{display:block;font-style:italic;font-weight:700;
  color:var(--or-fonce)}
.v-sous{font-size:17px;line-height:1.65;color:var(--texte-doux);margin:0 0 26px}
.v-heros-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.v-cta-grand{padding:13px 28px;font-size:15px}
.v-lien-secondaire{font-weight:600;color:var(--or-fonce)}
.v-lien-clair{color:var(--creme-2)}

/* --------------------------------------------------- médias (logo, vidéo) */
/* Le logo animé du héros, sur une carte discrète pour l'asseoir dans la page. */
.v-heros-logo{display:flex;align-items:center;justify-content:center;
  min-height:280px;padding:28px;background:var(--surface);border:1px solid var(--bordure);
  border-radius:14px;box-shadow:0 10px 34px rgba(31,35,40,.07)}
.v-heros-logo .logo-anime{width:min(320px,100%)}

/* Vidéo centrée et large : 880 px sur grand écran, toute la largeur en dessous.
   max-height empêche une vidéo verticale de dépasser la hauteur d'écran. */
.v-video-cadre{position:relative;width:100%;max-width:880px;margin:26px auto 0}
.v-video{display:block;width:100%;max-height:78vh;
  border-radius:14px;background:var(--sombre);
  box-shadow:0 14px 40px color-mix(in srgb,var(--encre) 16%,transparent)}

/* L'aperçu au survol est muet, et rien à l'écran ne le dit. Sans cette
   mention, un visiteur peut croire la vidéo sans bande son. Elle disparaît
   dès qu'il a cliqué : l'information n'a plus lieu d'être. */
.v-video-indice{position:absolute;right:14px;bottom:56px;
  background:color-mix(in srgb,var(--encre) 78%,transparent);color:var(--creme);
  font-size:12px;letter-spacing:.04em;padding:5px 11px;border-radius:14px;
  pointer-events:none;opacity:0;transition:opacity .25s ease}
.v-video-cadre:hover .v-video-indice{opacity:1}
.v-video-cadre.engagee .v-video-indice{display:none}
@media (prefers-reduced-motion: reduce){.v-video-indice{transition:none}}
/* Sans curseur, le survol n'existe pas : la mention resterait invisible. */
@media(hover:none){.v-video-indice{opacity:1;bottom:52px}}

/* ------------------------------------------------------------ sections */
.v-section{max-width:1120px;margin:0 auto;padding:56px 5vw}
.v-section h2{font-family:Georgia,serif;font-size:30px;margin:0 0 26px}
.v-section-creme{max-width:none;background:var(--creme-bande)}
/* Bloc vidéo : tout centré, la vidéo en vedette sous le texte. */
.v-bloc-video{max-width:1120px;margin:0 auto;text-align:center}
.v-tete-page{text-align:center;padding-bottom:32px}
.v-tete-page h1{font-family:Georgia,serif;font-size:38px;margin:0 0 14px}

/* ------------------------------------------------------------- piliers */
/* Grille de cartes claires, dans l'esprit de la référence : icône en trait
   fin, surtitre discret, titre serif, mots-clés en gris. */
.v-section-piliers{padding-top:34px}
.v-tete-centree{text-align:center;margin-bottom:30px}
.v-sous-centre{max-width:560px;margin:0 auto;font-size:15.5px;line-height:1.6;
  color:var(--gris)}

.v-piliers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.v-piliers{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.v-piliers{grid-template-columns:1fr}}

.v-pilier{background:var(--surface);border:1px solid var(--bordure);border-radius:14px;
  padding:26px 24px 24px;box-shadow:0 2px 10px rgba(31,35,40,.04);
  transition:transform .18s ease,box-shadow .18s ease}
.v-pilier:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,35,40,.09)}
.v-pilier-ico{display:block;width:28px;height:28px;margin-bottom:16px}
.v-pilier-ico svg{width:100%;height:100%;display:block}
.v-pilier-num{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.20em;margin-bottom:8px}
.v-pilier h3{font-family:Georgia,serif;font-size:20px;font-weight:700;margin:0 0 8px;
  color:var(--encre);line-height:1.25}
.v-pilier p{margin:0;font-size:13.5px;line-height:1.55;color:var(--gris)}

/* Une couleur par pilier : l'icône et le surtitre la portent, le reste
   reste sobre — comme sur la référence. */
.c1{--teinte:var(--p1)} .c2{--teinte:var(--p2)} .c3{--teinte:var(--p3)}
.c4{--teinte:var(--p4)} .c5{--teinte:var(--p5)} .c6{--teinte:var(--p6)}
.v-pilier .v-pilier-ico,.v-pilier .v-pilier-num{color:var(--teinte)}


/* ------------------------------------- comment ça fonctionne (7 étapes) */
/* Liste verticale numérotée : pastille dorée, titre serif comme les piliers,
   badge discret pour les étapes propres à un forfait. */
.v-etapes{list-style:none;margin:34px auto 0;padding:0;max-width:680px}
.v-etapes li{display:flex;gap:18px;align-items:flex-start;padding:18px 2px;
  border-bottom:1px solid var(--bordure)}
.v-etapes li:last-child{border-bottom:none}
.v-etape-num{flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
  background:var(--creme-2);border:1px solid var(--or);color:var(--or-fonce);
  font-weight:700;font-size:14.5px}
.v-etapes h3{font-family:Georgia,serif;font-size:18px;font-weight:700;
  margin:2px 0 5px;color:var(--encre);line-height:1.3}
.v-etapes p{margin:0;font-size:14px;line-height:1.6;color:var(--gris)}
/* ------------------------------- carte radar du héros (maquette hifi) */
.v-radar-carte{background:#fff;border:1px solid #e3ddcc;border-radius:8px;
  padding:28px 30px 26px;display:flex;flex-direction:column;gap:22px;
  box-shadow:0 18px 40px -28px rgba(28,32,26,.4)}
.vr-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.vr-titres{display:flex;flex-direction:column;gap:8px}
.vr-kicker{font:600 11px/1 'Inter Tight','Public Sans',sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:#96793c}
.vr-titre{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:18px;color:#1a1f18}
.vr-score{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.vr-score b{font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:34px;line-height:.9;color:#1c6b45}
.vr-score span{font:400 14px/1 'Inter Tight','Public Sans',sans-serif;color:#8d8878}
.vr-radar{display:flex;justify-content:center}
.vr-radar svg{width:100%;max-width:424px;height:auto;display:block}
/* Séquence du radar : fondu, tracé du contour, pop des points. */
@keyframes dcDraw{from{stroke-dashoffset:var(--dcL)}to{stroke-dashoffset:0}}
@keyframes dcFade{from{opacity:0}to{opacity:1}}
@keyframes dcPop{0%{opacity:0;transform:scale(.2)}
  60%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion: reduce){
  #radar *{animation:none!important;stroke-dashoffset:0!important;
    opacity:1!important;transform:none!important}}

/* ------------------------------------------ apparition au défilement */
/* Les éléments glissent du bas vers leur place quand ils entrent dans la
   fenêtre. La classe .rev n'est posée QUE par le script (base_public) : sans
   JavaScript, tout est visible d'emblée. */
.rev{opacity:0;transform:translateY(26px);
  transition:opacity .55s ease-out,transform .55s ease-out}
.rev.vu{opacity:1;transform:none}
@media(prefers-reduced-motion: reduce){
  .rev{opacity:1;transform:none;transition:none}}


/* ------------------------------------------------- page forfaits (cartes) */
.pf-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  align-items:start;padding-top:14px}
@media(max-width:980px){.pf-grille{grid-template-columns:1fr;max-width:520px;margin:0 auto}}

.pf-carte{position:relative;display:flex;flex-direction:column;background:var(--surface-2);
  border:1px solid var(--bordure);border-radius:18px;padding:32px 28px 28px;
  box-shadow:0 2px 14px rgba(31,35,40,.05)}
/* La formule mise en avant : relevée, cerclée d'or, ombre plus profonde. */
.pf-vedette{border:1.5px solid var(--or);background:var(--surface);
  box-shadow:0 18px 44px color-mix(in srgb,var(--or) 20%,transparent);padding-top:40px}
@media(min-width:981px){.pf-vedette{margin-top:-14px}}

.pf-ruban{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--or-clair),var(--or-fonce));color:var(--surface);
  font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 20px;border-radius:20px;white-space:nowrap;
  box-shadow:0 6px 16px color-mix(in srgb,var(--or-fonce) 35%,transparent)}

.pf-nom{font-family:Georgia,serif;font-size:27px;font-weight:700;margin:0 0 4px;
  line-height:1.2;color:var(--encre)}
.pf-accroche{margin:0 0 18px;font-style:italic;font-size:14.5px;color:var(--gris)}

/* Prix : dollar en exposant doré, montant en très grand serif. */
.pf-prix{display:flex;align-items:flex-start;gap:3px;line-height:1}
.pf-devise{font-family:Georgia,serif;font-size:22px;font-weight:700;color:var(--or);
  margin-top:6px}
.pf-montant{font-family:Georgia,serif;font-size:64px;font-weight:700;color:var(--encre);
  letter-spacing:-.02em}
.pf-vedette .pf-montant{color:var(--or-fonce)}
.pf-devise-mention{margin-top:2px;font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--or)}
.pf-devise-mention span{font-weight:400;color:var(--gris);letter-spacing:0}

.pf-desc{margin:18px 0 0;font-size:14px;line-height:1.65;color:var(--texte-doux)}
.pf-filet{border:none;border-top:1px solid var(--bordure-fine);margin:22px 0 16px}

.pf-inclus-titre{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--gris);margin-bottom:10px}
.pf-inclus{list-style:none;padding:0;margin:0 0 24px;flex:1}
.pf-inclus li{display:flex;align-items:flex-start;gap:11px;padding:7px 0;
  font-size:14px;line-height:1.45;color:var(--encre)}
/* Coche cerclée, comme sur la référence. */
.pf-coche{flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  border:1.5px solid var(--or);color:var(--or);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.pf-vedette .pf-coche{background:var(--or);color:var(--surface)}

.pf-bouton{display:block;text-align:center;padding:13px 20px;border-radius:26px;
  font-weight:700;font-size:14.5px;border:1.5px solid var(--or);color:var(--or-fonce);
  background:var(--surface);margin-top:auto}
.pf-bouton:hover{background:var(--creme-2);text-decoration:none}
.pf-bouton-vedette{background:var(--or);border-color:var(--or);color:var(--surface)}
.pf-bouton-vedette:hover{background:var(--or-fonce);color:var(--surface)}

.pf-note-commune{display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:640px;margin:30px auto 0;padding:14px 20px;background:var(--creme-2);
  border:1px solid var(--bordure);border-radius:12px;font-size:13.5px;line-height:1.55;
  color:var(--texte-doux);text-align:left}
.pf-note-icone{flex:0 0 auto;color:var(--or);font-size:17px}

/* -------------------------------------------------------- bandeau final */
.v-bandeau-final{background:var(--sombre);color:var(--creme);text-align:center;
  padding:64px 5vw;margin-top:24px}
.v-bandeau-final h2{font-family:Georgia,serif;font-size:30px;margin:0 0 10px;color:var(--creme)}
.v-bandeau-final p{color:var(--texte-pale);margin:0 0 24px}

/* ---------------------------------------------------------------- pied */
.v-pied{background:var(--creme-bande);border-top:1px solid var(--bordure);padding:22px 5vw;font-size:13px;
  color:var(--gris)}
.v-pied-int{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.v-pied-liens a{color:var(--or-fonce)}

/* Formule déjà suivie : une mention, pas un bouton. Proposer « Choisir » à
   quelqu'un qui l'a déjà choisie n'aurait aucun sens. */
.pf-etat-actuel{display:block;text-align:center;padding:11px 18px;border-radius:8px;
  background:var(--score-bon-fond);color:var(--score-bon-fonce);
  font-size:13.5px;font-weight:700;margin-top:auto}
.pf-etat-actuel + .pf-bouton{margin-top:8px}
/* Reprise d'un diagnostic : une action secondaire. Elle ne doit pas rivaliser
   avec la montée en accompagnement, qui est l'offre principale de la page. */
.pf-bouton-doux{background:transparent;border:1.5px solid var(--bordure);
  color:var(--texte-doux);font-weight:600}
.pf-bouton-doux:hover{border-color:var(--or-fonce);color:var(--or-fonce);
  background:transparent}