/* =============================================================================
   LE REGARD EXTÉRIEUR · styles propres au funnel
   Tout ce qui est commun a Magnetique vit dans theme.css et n'est pas redefini
   ici. Ce fichier n'ajoute que ce que ce funnel a en propre : l'ecran de
   partage, les barres de score, l'ecran de convergence.
   ============================================================================= */

/* ---------- boutons ----------
   Le libelle des boutons respire un peu plus que dans la charte commune : une
   capitale plus aeree, et un peu plus d'air avant la fleche. L'override est
   ici et non dans theme.css, qui doit rester la copie fidele de la charte
   partagee par les autres funnels. */
.btn{letter-spacing:.2em;gap:15px}
.btn-sm{letter-spacing:.17em}

/* ---------- appel a l'action du premier ecran ----------
   Il vit dans .fold, donc au-dessus de la ligne de flottaison. Les marges se
   resserrent sur les ecrans courts pour que le bouton reste visible sans
   defilement, meme sur un telephone de 667px de haut. */
.cta-fold{margin-top:clamp(28px,5.5vh,44px);display:flex;flex-direction:column;
  align-items:center;gap:14px}
.cta-fold .micro{font-size:.66rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-3)}
@media (max-height:700px){
  .cta-fold{margin-top:22px;gap:10px}
  .cta-fold .btn{padding:16px 30px}
}

/* ---------- bascule d'ecrans ----------
   Toute section pilotee par JS est masquee par defaut : une seule est visible a
   la fois, et aucune ne doit affleurer sous une autre. */
#quiz, #rquiz, #prono, #choix, #gatewrap, #compute, #result, #merci, #wait { display:none }
#quiz.on, #rquiz.on, #prono.on, #choix.on, #merci.on, #wait.on { display:block; min-height:100dvh; padding:0 0 60px }
/* ECRAN 5a . le releve du pronostic. Une ligne par item : ce qui etait prevu,
   ce qu'ils ont dit, et si ca tombe juste. Le rouge ne signale pas une faute,
   il signale un ecart : c'est le meme code que l'ecran du detail. */
.pro-l{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--hair)}
.pro-l:first-child{border-top:1px solid var(--hair)}
.pro-q{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-3)}
.pro-r{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.95rem;line-height:1.5}
.pro-r i{font-style:normal;color:var(--grey-3)}
/* Seule la reponse REELLE est marquee, jamais la prediction : c'est l'ecart
   qui se lit, et il se lit du cote de ce qu'ils ont dit. */
.pro-l b{color:var(--grey-1);font-weight:600}
.pro-ko .pro-eux b{color:var(--red-txt)}
.pro-ok .pro-eux b{color:#fff}
.pro-nul{font-size:.85rem;color:var(--grey-3)}
.pro-verdict{margin-top:26px;padding-left:1.1rem;border-left:3px solid var(--red)}
.pro-verdict strong{display:block;font-size:1.15rem;line-height:1.4;color:#fff;margin-bottom:10px}

/* La qualification du dernier ecran. Meme habillage que le bloc de reaction :
   rien ne doit signaler qu'on change de nature de question. */
.qualif{margin-top:34px;display:grid;gap:26px}

/* Le rappel de sa propre reponse, en tete de carte de pronostic. Sans lui,
   le sujet repeterait sa reponse par defaut et la mesure ne vaudrait rien. */
.qmine{margin:0 0 18px;padding:12px 14px;border:1px solid var(--hair);border-radius:10px;
        font-size:.9rem;line-height:1.5;color:var(--g4)}
.qmine b{display:block;font-size:.62rem;font-weight:700;letter-spacing:.22em;
         text-transform:uppercase;color:var(--g5);margin-bottom:6px}
#gatewrap.on, #result.on { display:block }
#compute.on { display:grid }

/* ---------- primitives reprises de test-de-frequence.html ---------- */
.bigline{
  font-size:clamp(1.05rem,4.3vw,1.3rem);font-weight:600;color:#fff;line-height:1.5;
  letter-spacing:-.2px;padding-top:28px;border-top:1px solid var(--hair);
}
.stack{display:flex;flex-direction:column;gap:20px;margin-top:30px}
.stack p{margin:0}
.stack .hit{color:#fff;font-weight:500}

/* ---------- ECRAN DE CALCUL ---------- */
#compute{min-height:100dvh;place-items:center;text-align:center;padding:0 var(--pad)}
#boot{min-height:100dvh;display:grid;place-items:center;padding:0 var(--pad)}
.comp-in{max-width:420px}
.comp-lines{margin-top:30px;text-align:left;display:flex;flex-direction:column;gap:12px;min-height:130px}
.comp-line{font-size:.76rem;font-weight:500;letter-spacing:.06em;color:var(--grey-3);opacity:0;
  display:flex;gap:12px;align-items:center;animation:cl .5s var(--ease) forwards}
.comp-line .dot{width:5px;height:5px;background:var(--red);flex:none;border-radius:50%}
.comp-line.done{color:var(--grey-1)}
@keyframes cl{to{opacity:1}}
.spin{width:38px;height:38px;border:1px solid var(--hair-2);border-top-color:var(--red);border-radius:50%;
  margin:0 auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- SELECTION DES RELATIONS ----------
   Six cartes selectionnables. Le champ prenom n'apparait qu'au clic : la page
   ne montre jamais six champs vides. */
.reps{margin-top:38px;display:flex;flex-direction:column;gap:14px}
.rep-row{background:var(--card);border:1px solid var(--edge);border-radius:16px;
  overflow:hidden;transition:border-color .2s var(--ease),background .2s var(--ease)}
.rep-row.on{border-color:var(--red-line);background:linear-gradient(180deg,rgba(192,0,0,.07),rgba(192,0,0,.015))}
.rep-pick{width:100%;display:flex;align-items:center;gap:16px;text-align:left;
  background:none;border:0;cursor:pointer;padding:20px;font-family:var(--sans);
  color:var(--grey-1);transition:color .2s var(--ease);min-height:76px}
.rep-pick:hover{color:#fff}
.rep-pick .box{flex:none;width:22px;height:22px;border-radius:6px;border:1px solid var(--hair-2);
  display:grid;place-items:center;font-size:.7rem;color:transparent;
  transition:all .2s var(--ease)}
.rep-row.on .rep-pick .box{background:var(--red);border-color:var(--red);color:#fff}
/* Libelle et sous-libelle sont deux lignes distinctes : sans `display:block`
   ils restent en flux inline, la marge du second ne s'applique pas et les deux
   textes se collent bout a bout. */
.rep-pick .lbl{display:block;font-size:.95rem;font-weight:500;line-height:1.4;color:inherit}
.rep-pick .sub{display:block;margin-top:4px;font-size:.74rem;font-weight:400;
  color:var(--grey-3);line-height:1.5}
.rep-name{padding:0 20px 20px;display:none}
.rep-row.on .rep-name{display:block}
.rep-name input{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--hair-2);color:#fff;
  font-family:var(--sans);font-weight:400;font-size:.95rem;padding:15px 18px;
  border-radius:100px;transition:border-color .2s var(--ease)}
.rep-name input::placeholder{color:var(--grey-4)}
.rep-name input:focus{border-color:var(--red);background:rgba(0,0,0,.6);outline:none}
.reps-note{margin-top:20px;font-size:.72rem;color:var(--grey-4);letter-spacing:.04em;line-height:1.7}

/* ---------- ECRAN DE PARTAGE (§8) ---------- */
.counter{margin-top:34px;text-align:center;background:var(--card);border:1px solid var(--edge);
  border-radius:18px;padding:30px 22px}
.counter .n{font-weight:900;font-size:clamp(1.6rem,7vw,2.1rem);color:#fff;letter-spacing:-.5px;line-height:1}
.counter .n b{color:var(--red);font-weight:900}
.counter .l{margin-top:10px;font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-3)}
.counter .say{margin-top:16px;font-size:.82rem;color:var(--grey-2);line-height:1.75}
.counter .close{margin-top:14px;font-size:.72rem;color:var(--grey-4);line-height:1.7}

.shares{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.share{background:var(--card);border:1px solid var(--edge);border-radius:18px;padding:26px 22px 22px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.share.done{border-color:var(--red-line);background:linear-gradient(180deg,rgba(192,0,0,.07),rgba(192,0,0,.015))}
.share .who{font-weight:900;text-transform:uppercase;letter-spacing:-.2px;font-size:1.05rem;color:#fff}
.share .cat{margin-top:5px;font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-3)}
.share .acts{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.share .acts .btn{max-width:none;padding:16px 24px;font-size:.68rem}
.share .state{margin-top:18px;padding-top:15px;border-top:1px solid var(--hair);
  font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-4);
  display:flex;align-items:center;gap:9px}
.share .state .pip{width:7px;height:7px;border-radius:50%;border:1px solid var(--grey-4);flex:none}
.share.done .state{color:var(--red)}
.share.done .state .pip{background:var(--red);border-color:var(--red)}

.msgbox{margin-top:26px}
.msgbox label{display:block;font-size:.58rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-3);margin-bottom:11px}
.msgbox textarea{width:100%;background:rgba(0,0,0,.4);border:1px solid var(--hair-2);color:var(--grey-1);
  font-family:var(--sans);font-weight:400;font-size:.88rem;line-height:1.75;padding:18px 20px;
  border-radius:16px;resize:vertical;min-height:120px}
.msgbox textarea:focus{border-color:var(--red);background:rgba(0,0,0,.6);outline:none}
.msgbox .hint{margin-top:10px;font-size:.68rem;color:var(--grey-4);letter-spacing:.04em}

.copied{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}

/* ---------- LE RENDU EN SIX ECRANS ----------
   Un ecran a la fois, chacun ferme par son bouton Continuer. Pas de scroll
   long : chaque ecran a le temps de porter. */
.ecran{display:none;padding:clamp(30px,7vw,54px) 0 clamp(40px,8vw,70px);min-height:70vh}
.ecran.on{display:block;animation:qin .5s var(--ease) both}
.suite{margin-top:clamp(46px,9vw,74px)}
.suite .btn{max-width:none}
.suite.hide{display:none}

/* Registre grave, pose a l'entree de l'ecran 5 et jamais retire :
   tout ralentit, tout respire davantage. */
body.grave .ecran.on{animation-duration:1s}
body.grave .glow{opacity:.55;transition:opacity 1.6s var(--ease)}
.lent{opacity:0;transform:translateY(12px);animation:slowin 1s var(--ease) forwards}
@keyframes slowin{to{opacity:1;transform:none}}

/* signal d'un profil qui a change depuis la derniere visite */
.maj-profil{margin:0 0 clamp(26px,5vw,40px);padding:16px 20px;border:1px solid var(--red-line);
  border-radius:14px;background:var(--red-soft);font-size:.82rem;color:var(--grey-1);line-height:1.7}

/* ---------- ECRAN 1 · LES SCORES ---------- */
.rhead{padding:0 0 clamp(30px,6vw,44px)}
.scores{display:flex;flex-direction:column;gap:24px}
.scoreline .top{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.scoreline .nm{font-weight:900;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.2px;color:#fff}
.scoreline .pct{font-weight:900;font-size:1.4rem;color:var(--grey-2);letter-spacing:-.5px;flex:none}
.scoreline.premier .pct{color:#fff}
.scoreline .cat{margin-top:4px;font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-3)}
.sbar{margin-top:12px;height:6px;background:rgba(255,255,255,.09);border-radius:100px;overflow:hidden}
.sfill{height:100%;width:0;background:var(--red);border-radius:100px;transition:width .6s var(--ease)}
/* chacun n'a pas vu le meme nombre de questions : le detail rend le % verifiable */
.scoreline .detail{margin-top:8px;font-size:.6rem;color:var(--grey-4);letter-spacing:.06em}
.rconstat{margin-top:34px;padding-top:26px;border-top:1px solid var(--hair)}
.rconstat p{color:var(--grey-1)}

/* ---------- ECRANS 2 ET 3 · les cartes de questions ---------- */
.items{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.item .q{font-size:.88rem;font-weight:500;color:var(--grey-1);line-height:1.65}
.pair{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;gap:12px}
.pair .r{display:flex;gap:14px;align-items:baseline}
.pair .k{flex:none;width:92px;font-size:.56rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--grey-4);padding-top:3px}
.pair .v{font-size:.92rem;font-weight:500;color:#fff;line-height:1.5}
.pair .r.eux .v{color:var(--red);font-weight:600}
.dur-note{margin-top:28px;color:var(--grey-1)}

/* ---------- ECRAN 4 · LA CARTE DE LISIBILITE ---------- */
#e4-corps{margin-top:26px}
#e4-corps p+p{margin-top:14px}
#e4-corps .hit{color:#fff;font-weight:500}
.carte{width:100%;height:auto;margin-top:30px;display:block;overflow:visible}
.carte .axe{stroke:var(--hair);stroke-width:1}
.carte .trace{fill:none;stroke:var(--grey-4);stroke-width:1.5;stroke-linejoin:round}
.carte .pt{fill:#fff}
.carte .pt.bas{fill:var(--red)}
.carte .lb{fill:var(--grey-3);font-family:var(--sans);font-size:11px;font-weight:600;
  text-anchor:middle;letter-spacing:.04em}
.carte-axe{display:flex;justify-content:space-between;margin-top:6px;
  font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-4)}

/* ---------- ECRAN 5 · LA CONVERGENCE NOMMEE ----------
   Le fait d'abord, sans commentaire. Sa reponse, puis les leurs une par une :
   c'est l'accumulation qui fait le travail. */
.conv .k{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--grey-3)}
.conv .q{margin-top:20px;font-size:clamp(1.02rem,4.2vw,1.22rem);font-weight:600;color:#fff;
  line-height:1.5;letter-spacing:-.2px;max-width:28ch}
.conv .rows{margin-top:34px}
.conv .row{display:flex;gap:16px;align-items:baseline;padding:13px 0}
.conv .row .who{flex:none;width:104px;font-size:.58rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--grey-4)}
.conv .row .who em{display:block;margin-top:4px;font-style:normal;font-weight:600;
  font-size:.54rem;letter-spacing:.16em;color:var(--grey-4);opacity:.75}
.conv .row .val{font-size:.94rem;font-weight:500;line-height:1.5;color:#fff}
.conv .row.moi{border-bottom:1px solid var(--hair);padding-bottom:22px;margin-bottom:12px}
.conv .row.moi .who{color:var(--grey-2)}
.conv .row.eux .val{color:var(--red);font-weight:600}
.conv .row .val.autre{color:var(--grey-4);font-size:.8rem;font-weight:400}

/* le pattern nomme : ce que le prospect peut emporter */
#e5 .verdict{margin-top:clamp(52px,10vw,84px);padding:34px 30px;background:var(--card);
  border-radius:18px;box-shadow:inset 2px 0 0 var(--red)}
#e5 .verdict .k{font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red)}
#e5 .verdict h3{margin:16px 0 14px;color:#fff;font-size:clamp(1.25rem,5.2vw,1.6rem);
  text-transform:none;letter-spacing:-.4px}
#e5 .verdict p{color:var(--grey-1);margin:0}

.renfort{margin-top:clamp(46px,9vw,72px)}
.renfort p{color:#fff;font-weight:500;font-size:clamp(.98rem,3.9vw,1.06rem);line-height:1.6}
.renfort p+p{margin-top:18px;color:var(--grey-1);font-weight:400}

.secondaire{margin-top:clamp(46px,9vw,72px);padding-top:30px;border-top:1px solid var(--hair)}
.secondaire p{color:var(--grey-2)}
.secondaire .cite{margin-top:14px;font-size:.86rem;color:var(--grey-3);line-height:1.7}
.secondaire .cite .fl{color:var(--red)}

/* verdicts des profils sans convergence de mecanisme */
.verdict-alt h2{color:#fff}
.verdict-alt .stack{margin-top:30px}

/* ---------- ECRAN 6 · LA PAGE FINALE ----------
   Six blocs en defilement continu, separes par un simple filet. Aucun encadre,
   aucun fond, aucune icone : rien que du texte et de l'espace. Les paragraphes
   sont volontairement tres courts, et l'interligne genereux les tient lisibles
   sur telephone sans que la page paraisse vide. */
.fin-bloc{padding-top:clamp(40px,8vw,64px);margin-top:clamp(40px,8vw,64px);
  border-top:1px solid var(--hair)}
.fin-bloc:first-child{padding-top:0;margin-top:0;border-top:0}
.fin-bloc h2{color:#fff;margin-bottom:clamp(26px,5vw,36px)}
.fin-bloc p{color:var(--grey-1);max-width:46ch}
.fin-bloc p+p{margin-top:clamp(18px,3.6vw,24px)}

/* ---------- PARCOURS REPONDANT (§9) ---------- */
/* Une seule vue, pas de scroll : chaque friction ici coute une reponse. */
#rland{display:none}
#rland.on{display:grid;place-items:center;min-height:calc(100dvh - var(--headh,80px));padding:0 var(--pad) 40px;text-align:center}
.rland-in{max-width:34ch}
.rland-in h1{margin-top:20px;font-size:clamp(1.5rem,6.4vw,2.3rem)}
.rland-in .sub{margin-top:26px}
.rland-in .fine{margin-top:20px;font-size:.76rem;color:var(--grey-3);line-height:1.75}
.rland-in .btn{margin-top:38px}

.thanks{text-align:center;padding:clamp(70px,15vw,120px) 0 0}
.thanks h2{color:#fff}
.thanks p{margin:24px auto 0;max-width:38ch}
.loop{margin-top:clamp(70px,14vw,110px);padding-top:clamp(48px,9vw,72px);border-top:1px solid var(--hair);
  text-align:center}
.loop h3{color:#fff;font-size:clamp(1.1rem,4.6vw,1.4rem)}
.loop p{margin:20px auto 0;max-width:34ch}
.loop .btn{margin-top:34px}

/* ---------- ETAT D'ATTENTE ET DEBLOCAGE ---------- */
.unlock{margin-top:30px;border:1px solid var(--red-line);border-radius:18px;
  background:linear-gradient(180deg,rgba(192,0,0,.07),rgba(192,0,0,.015));padding:clamp(30px,6.5vw,44px);
  text-align:center}
.unlock h3{color:#fff}
.unlock p{margin-top:14px}
.unlock .btn{margin-top:24px;max-width:none}
.partial-note{margin-top:26px;padding:20px 22px;border:1px solid var(--hair);border-radius:16px;
  font-size:.8rem;color:var(--grey-3);line-height:1.75}

/* ---------- une reponse de plus pendant la lecture du rendu ---------- */
.maj{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:rgba(5,5,5,.94);backdrop-filter:blur(14px);border-top:1px solid var(--red-line);
  padding:16px var(--pad);display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;font-size:.8rem;color:var(--grey-1);line-height:1.6;text-align:center}
.maj .btn{max-width:200px;flex:none}

/* ---------- 380px ---------- */
@media (max-width:380px){
  .share .acts .btn{padding:15px 18px;font-size:.63rem;letter-spacing:.12em}
  .scoreline .nm{font-size:.86rem}
  .scoreline .cat{font-size:.55rem;letter-spacing:.13em}
  .conv .row{flex-direction:column;gap:6px}
  .conv .row .who{width:auto}
  .item .pair .r{flex-direction:column;gap:4px}
  .item .pair .k{width:auto;padding-top:0}
}

/* ---------- ECRANS 5bis ET 5ter · TOUT CE QU'ILS ONT REPONDU ----------
   Le verdict a ete nomme ; ici il donne sa matiere. Ce qui differe de sa
   reponse est en rouge : c'est la seule lecture a faire.
   Les regles portent sur la carte `.detail` elle-meme, pas sur l'ecran qui la
   contient : les deux ecrans partagent exactement la meme mise en page. */
#e5b-commun, #e5b-propre{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.detail .pair{gap:10px}
.detail .pair .k{width:96px;color:var(--grey-3)}
.detail .pair .k em{display:block;margin-top:3px;font-style:normal;font-weight:600;
  font-size:.52rem;letter-spacing:.14em;color:var(--grey-4)}
.detail .pair .v{font-size:.88rem;font-weight:400;color:var(--grey-2)}
.detail .r.moi{padding-bottom:12px;border-bottom:1px solid var(--hair)}
.detail .r.moi .k{color:var(--grey-1)}
.detail .r.moi .v{color:#fff;font-weight:500}
.detail .r.off .v{color:var(--red-txt);font-weight:600}

/* les specifiques, groupees par personne */
.propre+.propre{margin-top:clamp(34px,7vw,54px)}
.propre{display:flex;flex-direction:column;gap:16px}
.qui-titre{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-txt)}
.qui-titre span{color:var(--grey-4)}

@media (max-width:380px){
  .detail .pair .k{width:auto}
  .detail .pair .k em{display:inline;margin-left:6px}
}

/* ---------- REACTION AU RESULTAT (ecran 6) ----------
   Facultative, et elle doit se voir comme telle : pas de carte, pas de rouge,
   un poids visuel inferieur a tout ce qui precede. Le resultat se lit
   entierement sans y toucher. */
.reaction{margin-top:clamp(46px,9vw,72px);padding-top:clamp(30px,6vw,44px);
  border-top:1px solid var(--hair)}
.reaction .q{color:var(--grey-1);font-size:.92rem}
.reaction .choix{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.reaction .choix button{
  width:100%;text-align:left;background:rgba(255,255,255,.05);border:1px solid var(--hair);
  color:var(--grey-2);font-family:var(--sans);font-weight:400;font-size:.86rem;line-height:1.5;
  padding:14px 18px;border-radius:12px;cursor:pointer;min-height:48px;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.reaction .choix button:hover{border-color:var(--hair-2);color:#fff;background:var(--card)}
.reaction .passer{margin-top:18px;background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--sans);font-size:.72rem;color:var(--grey-4);text-decoration:underline;
  text-underline-offset:3px}
.reaction .passer:hover{color:var(--grey-2)}
.reaction-faite{margin-top:clamp(46px,9vw,72px);padding-top:clamp(30px,6vw,44px);
  border-top:1px solid var(--hair);color:var(--grey-3);font-size:.86rem}

@media (min-width:620px){
  .reaction .choix{flex-direction:row;flex-wrap:wrap}
  .reaction .choix button{width:auto;flex:1 1 46%}
}