/* =========================================================================
   FastSolve, MAQUETTE : l'ecran d'entree devient un circuit.
   Trois questions a gauche, une reponse unique a droite, le courant les relie
   et fait battre la carte a son arrivee. L'argument « aucun acompte » passe
   en bandeau centre sous le circuit.
   Les couleurs viennent de styles.css ; ce fichier n'ajoute que le circuit.
   ========================================================================= */
.circuit{ --accent:#8ce6d5; --accent-doux:rgba(140,230,213,.16); --trait:rgba(255,255,255,.2) }
.acompte{ --accent:#8ce6d5; --accent-doux:rgba(140,230,213,.16) }

/* =========================================================================
   FastSolve, MAQUETTE : ecran d'entree en circuit.
   Couleurs et typographie reprises de styles.css : fond de la porte d'entree
   #102129, accent #8ce6d5, carte de l'assistant en degrade teal, Inter.
   ========================================================================= */



/* --- le circuit -------------------------------------------------------- */
.circuit{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(54px,8vw,132px);
  /* pas de centrage : les deux colonnes prennent la meme hauteur, et le haut
     du premier cadre comme le bas du dernier tombent pile sur la carte */
  align-items:stretch;
}
.circuit__flux{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.flux-trait{fill:none; stroke:var(--trait); stroke-width:1.4; stroke-linecap:round}
.flux-noeud{fill:var(--trait)}
.flux-noeud--vif{fill:var(--accent); opacity:0}
.flux-signal{
  fill:none; stroke:var(--accent); stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:.3 .7; stroke-dashoffset:1; opacity:0;
  filter:drop-shadow(0 0 5px rgba(140,230,213,.55));
}

/* --- questions --------------------------------------------------------- */
.questions{
  display:flex; flex-direction:column; justify-content:space-between;
  gap:clamp(14px,1.6vw,20px);
}
.question{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.16); border-radius:12px;
  background:rgba(255,255,255,.05);
  color:#fff; font-size:.95rem; font-weight:600; line-height:1.35;
}
.question__icone{
  display:grid; place-items:center; flex-shrink:0;
  width:34px; height:34px;
  border:1px solid rgba(255,255,255,.24); border-radius:50%;
  color:var(--accent); background:#102129;
  transition:border-color 240ms ease, box-shadow 240ms ease;
}
.question__icone svg{width:18px; height:18px; overflow:visible}
.circuit .ea-trait{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.circuit .ea-pupille,.acompte .ea-pupille{fill:currentColor}

/* --- reponse unique ---------------------------------------------------- */
.reponse{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:12px;
  width:100%; padding:clamp(24px,2.6vw,32px);
  border:1px solid rgba(255,255,255,.2); border-radius:14px;
  background:linear-gradient(145deg,rgba(15,118,110,.92),rgba(8,72,69,.9));
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  color:#fff; font:inherit; text-align:left; cursor:pointer;
  transition:transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.reponse:hover,.reponse:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(140,230,213,.6);
  box-shadow:0 26px 80px rgba(0,0,0,.3);
  outline:none;
}
.reponse__kicker{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent); font-size:.74rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
.reponse__titre{
  font-size:clamp(1.25rem,1.9vw,1.7rem); font-weight:800;
  line-height:1.15; letter-spacing:-.02em;
}
.reponse__texte{color:rgba(255,255,255,.8); font-size:.95rem; line-height:1.55}
/* Sous 1200 px la largeur de la carte ne tient plus une phrase par ligne :
   le texte redevient un paragraphe qui se replie tout seul. */
.reponse__ligne{display:inline}
@media (min-width:1200px){
  .reponse__ligne{display:block}
}
.reponse__action{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.88rem; font-weight:800;
}
.reponse__action b{font-size:1.3rem; transition:transform 180ms ease}
.reponse:hover .reponse__action b{transform:translateX(4px)}

/* --- l'argument sans acompte, sous le circuit -------------------------- */
.acompte{
  display:flex; align-items:center; gap:12px;
  width:fit-content; max-width:min(680px,100%);
  margin:clamp(30px,4vw,46px) auto 0;
  padding:13px 22px 13px 16px;
  border:1px solid rgba(140,230,213,.42); border-radius:999px;
  background:var(--accent-doux);
  color:#fff; font-size:.92rem; line-height:1.4; text-align:left;
}
.acompte strong{color:var(--accent)}
.acompte__icone{
  display:grid; place-items:center; flex-shrink:0;
  width:30px; height:30px;
  border:1px solid rgba(140,230,213,.45); border-radius:50%;
  color:var(--accent);
}
.acompte__icone svg{width:17px; height:17px}
.acompte .ea-trait{fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* --- rythme du courant -------------------------------------------------
   Les retards et les durees sont poses par le script, parce qu'ils ne sont
   pas les memes selon que la carte est a cote des questions ou dessous.
   ----------------------------------------------------------------------- */
.circuit.is-running .flux-signal{animation-name:fluxImpulsion; animation-timing-function:linear; animation-fill-mode:both}
.circuit.is-running .flux-noeud--vif{animation-name:noeudEclat; animation-timing-function:ease-out; animation-fill-mode:both}
.circuit.is-running .question.est-traversee .question__icone{
  border-color:rgba(140,230,213,.85);
  box-shadow:0 0 0 4px rgba(140,230,213,.14);
}
@keyframes fluxImpulsion{
  from{stroke-dashoffset:1; opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  to{stroke-dashoffset:0; opacity:0}
}
/* Le battement de la carte, au moment ou le courant y entre. Deux temps,
   comme un coeur : une poussee franche, puis une seconde plus courte.
   On anime la propriete `scale` et non `transform` : la carte garde ainsi son
   soulevement au survol, qui lui passe par translateY. */
.circuit.is-running .reponse{ animation:battement .95s ease-out both }
.circuit.is-running .tour-vif{ animation:battementTour .95s ease-out both }
@keyframes battement{
  0%{scale:1}
  12%{scale:1.035}
  26%{scale:1.008}
  38%{scale:1.021}
  56%{scale:1.002}
  100%{scale:1}
}
/* Le tour du cadre doit grossir avec lui, sinon le trait resterait en arriere. */
@keyframes battementTour{
  0%{transform:scale(1)}
  12%{transform:scale(1.035)}
  26%{transform:scale(1.008)}
  38%{transform:scale(1.021)}
  56%{transform:scale(1.002)}
  100%{transform:scale(1)}
}
.tour-vif{ transform-box:view-box }
@keyframes noeudEclat{
  from{opacity:0; transform:scale(.6)}
  35%{opacity:1; transform:scale(2)}
  to{opacity:0; transform:scale(1.1)}
}

/* --- pile verticale ---------------------------------------------------- */
@media (max-width:900px){
  .circuit{grid-template-columns:1fr; gap:clamp(46px,9vw,64px)}
  .questions{justify-content:flex-start}
  .gate__content{width:min(1120px,calc(100% - 28px))}
  .questions{gap:clamp(24px,4vw,30px)}
  .question{font-size:.9rem; padding:14px 16px}
}

/* --- mouvement reduit -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .flux-signal,.flux-noeud--vif{display:none}
  .reponse{transition:none; animation:none; scale:1}
  .tour-vif{animation:none}
}

/* --- la place du cube ------------------------------------------------------
   Le cube vit dans la bande libre entre le surtitre et le titre : c'est
   hero3d qui la mesure, elle n'est jamais figee. Le circuit ayant pris de la
   hauteur, cette bande s'etait reduite a 130-180 px et le cube n'etait plus
   qu'un accent. On lui rend de la place en ecartant le titre vers le bas et
   en rapprochant le circuit du titre. Tout est en vh : sur un ecran court, la
   bande se resserre d'elle-meme au lieu de pousser le contenu dehors.
   -------------------------------------------------------------------------- */
body[data-page="accueil"] #experience-title{
  /* La courbe est volontairement raide : sur un ecran court, la marge tombe
     presque a rien pour que le bandeau acompte reste au-dessus de la ligne de
     flottaison ; sur un grand ecran, elle s'ouvre et le cube retrouve sa
     taille. Mesure a l'appui, voir le carnet. */
  margin-top: clamp(20px, calc(24vh - 150px), 200px);
  margin-bottom: clamp(30px, 5vh, 70px);
}