/* ==========================================================================
   GUIVONIZ — Modules signature
   Hero, console de recherche IA 3D, quiz, personnalisation, marquee.
   ========================================================================== */

/* ------------------------------------------------------------------ HERO */
.hero {
  position: relative;
  background: var(--color-forest-depths);
  color: var(--color-snow-white);
  padding-block: var(--spacing-96) var(--spacing-64);
  overflow: hidden;
  isolation: isolate;
}
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-48); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: var(--spacing-40); } }

/* Trame de laboratoire : lignes fines, pas d'ombre, pas de dégradé */
.hero-mesh {
  position: absolute; inset: -10%;
  z-index: -1; opacity: 0.2;
  background-image:
    linear-gradient(to right, rgba(252,252,247,0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252,252,247,0.5) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
  will-change: transform;
}
.hero-eyebrow { display: flex; align-items: center; gap: var(--spacing-8); }
.hero-pulse {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-lime-pulse); flex: 0 0 auto;
  animation: pulse-dot 2.6s var(--ease-glass) infinite;
}
.hero-stats { display: flex; gap: var(--spacing-32); flex-wrap: wrap; }
.hero-stat .n { font-size: var(--text-heading-sm); font-weight: var(--font-weight-light); letter-spacing: -0.4px; display: block; line-height: 1; }
.hero-stat .l { font-family: var(--font-seed-sans-mono); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-top: 6px; display: block; }

/* ------------------------------------------- CONSOLE DE RECHERCHE IA 3D */
.ai {
  position: relative;
  perspective: var(--perspective-far);
  perspective-origin: 50% 50%;
}
.ai-console {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--arx, 4deg)) rotateY(var(--ary, -5deg));
  transition: transform var(--dur-slow) var(--ease-organic);
  will-change: transform;
}
.ai.is-live .ai-console { transition: transform 120ms linear; }

/* Sur un écran étroit, la perspective 3D grossit visuellement la console :
   mesurée à 725 px de large dans un écran de 375 px, débordant des deux côtés
   et coupée par l'overflow du héros. On lisait sa propre réponse amputée.
   Le basculement 3D est un effet de souris — il n'a rien à faire sur un
   écran tactile. Rien n'est supprimé : c'est neutralisé en dessous de 860 px. */
@media (pointer: coarse), (max-width: 860px) {
  .ai { perspective: none; }
  .ai-console { transform: none !important; }
  .ai-head, .ai-field-wrap, .ai-chips, .ai-foot { transform: none !important; }
  .ai-plate { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* L'état d'avant-animation du bloc « tilt » contient lui aussi une
     perspective, qui gonflait la boîte à 670 px dans un écran de 375. */
  .ai[data-reveal="tilt"] { transform: translateY(20px); }
}

/* Plaque de fond : « verre de laboratoire » */
.ai-plate {
  position: relative;
  border-radius: var(--radius-large-cards);
  border: 1.5px solid rgba(252, 252, 247, 0.26);
  background: rgba(252, 252, 247, 0.06);
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
  padding: var(--spacing-24);
  transform-style: preserve-3d;
}
.ai-plate::before {
  /* plaque arrière décalée en profondeur — donne l'épaisseur sans ombre */
  content: ""; position: absolute; inset: 10px;
  border-radius: var(--radius-3xl);
  border: 1.5px solid rgba(252, 252, 247, 0.12);
  transform: translateZ(-46px) scale(1.035);
  pointer-events: none;
}
.ai-plate::after {
  content: ""; position: absolute; inset: 22px;
  border-radius: var(--radius-3xl);
  border: 1.5px solid rgba(252, 252, 247, 0.07);
  transform: translateZ(-88px) scale(1.07);
  pointer-events: none;
}

.ai-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8); transform: translateZ(26px); }
.ai-dots { display: flex; gap: 5px; }
.ai-dots i { width: 6px; height: 6px; border-radius: var(--radius-full); background: rgba(252,252,247,0.3); display: block; }
.ai-dots i:first-child { background: var(--color-lime-pulse); }

/* Champ de saisie, avancé dans l'espace */
.ai-field-wrap {
  position: relative; margin-top: var(--spacing-16);
  transform: translateZ(44px);
  transform-style: preserve-3d;
}
.ai-field {
  width: 100%;
  background: rgba(252, 252, 247, 0.07);
  border: 1.5px solid var(--color-snow-white);
  border-radius: var(--radius-full);
  color: var(--color-snow-white);
  font-family: var(--font-seed-sans);
  font-size: var(--text-body-sm);
  padding: 20px 136px 20px 52px;
  transition: background-color var(--dur-base) var(--ease-organic);
}
.ai-field::placeholder { color: transparent; }
.ai-field:focus { background: rgba(252, 252, 247, 0.12); outline: none; }
.ai-ghost {
  position: absolute; left: 52px; top: 50%; translate: 0 -50%;
  font-size: var(--text-body-sm); color: rgba(252, 252, 247, 0.62);  /* 0,5 donnait 3,88 */
  pointer-events: none; white-space: nowrap; overflow: hidden;
  max-width: calc(100% - 190px);
}
.ai-ghost .caret { display: inline-block; width: 1.5px; height: 1em; background: var(--color-lime-pulse); translate: 2px 2px; animation: caret 1.05s steps(2) infinite; }
.ai-icon { position: absolute; left: 22px; top: 50%; translate: 0 -50%; opacity: 0.85; pointer-events: none; }
.ai-go { position: absolute; right: 8px; top: 50%; translate: 0 -50%; }

/* Ligne de scan qui traverse la console pendant l'analyse */
.ai-scan {
  position: absolute; left: 6%; right: 6%; top: 0; height: 1.5px;
  background: var(--color-lime-pulse);
  opacity: 0; transform: translateZ(60px);
  pointer-events: none;
}
.ai.is-thinking .ai-scan { animation: scan 1.15s var(--ease-glass) infinite; }

.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--spacing-16); transform: translateZ(22px); }
.ai-chips .chip { font-size: var(--text-label); padding: 8px 14px; }

.ai-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8);
  margin-top: var(--spacing-16); padding-top: var(--spacing-16);
  border-top: 1px solid rgba(252, 252, 247, 0.16);
  transform: translateZ(14px);
}

/* Panneau de résultats : se déplie en 3D */
.ai-results {
  margin-top: var(--spacing-16);
  transform-style: preserve-3d;
  display: none;
}
.ai-results.is-open { display: block; animation: unfold var(--dur-slow) var(--ease-organic) both; }
.ai-answer {
  border-radius: var(--radius-2xl);
  border: 1.5px solid rgba(252, 252, 247, 0.22);
  padding: var(--spacing-16);
  transform: translateZ(30px);
}
.ai-reco { display: flex; flex-direction: column; gap: 2px; margin-top: var(--spacing-8); }
.ai-reco-item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: var(--spacing-16);
  align-items: center; padding: 12px var(--spacing-8); text-decoration: none;
  border-radius: var(--radius-lg);
  transition: background-color var(--dur-fast) var(--ease-organic);
}
.ai-reco-item:hover { background: rgba(252, 252, 247, 0.08); }
.ai-rank {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 1.5px solid rgba(252,252,247,0.35);
  display: grid; place-items: center;
  font-family: var(--font-seed-sans-mono); font-size: var(--text-label);
}
.ai-reco-item:first-child .ai-rank { background: var(--color-lime-pulse); color: var(--color-forest-depths); border-color: var(--color-lime-pulse); }
.ai-score { font-family: var(--font-seed-sans-mono); font-size: var(--text-label); opacity: 0.7; white-space: nowrap; }

/* Barre de confiance (pleine, plate) */
.meter { height: 3px; border-radius: var(--radius-full); background: rgba(252,252,247,0.18); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--color-lime-pulse); width: 0; transition: width var(--dur-slow) var(--ease-organic); }

/* --------------------------------------------------- MARQUEE / bandeau */
.marquee { overflow: hidden; border-block: 1px solid rgba(28, 58, 19, 0.12); padding-block: var(--spacing-24); }
.sec-dark .marquee { border-color: rgba(252,252,247,0.18); }
.marquee-track { display: flex; gap: var(--spacing-48); width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  font-family: var(--font-seed-sans-mono); font-size: var(--text-caption);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  color: var(--color-pewter);
}
.marquee-item .d { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-lime-pulse); border: 1px solid var(--color-forest-depths); }

/* ------------------------------------------------------------- QUIZ */
.quiz { position: relative; min-height: 420px; }
.quiz-step { display: none; }
.quiz-step.is-active { display: block; animation: step-in var(--dur-base) var(--ease-organic) both; }
.quiz-rail { display: flex; gap: 5px; }
.quiz-rail i { height: 2px; flex: 1; background: rgba(252,252,247,0.2); display: block; border-radius: var(--radius-full); overflow: hidden; }
.quiz-rail i.is-done { background: var(--color-lime-pulse); }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--spacing-8); }
@media (max-width: 700px) { .quiz-opts { grid-template-columns: 1fr; } }
.quiz-opt {
  text-align: left; cursor: pointer;
  border: 1.5px solid rgba(252,252,247,0.3);
  border-radius: var(--radius-2xl);
  background: transparent; color: var(--color-snow-white);
  padding: var(--spacing-16);
  font-family: var(--font-seed-sans); font-size: var(--text-body-sm);
  display: flex; align-items: flex-start; gap: var(--spacing-16);
  transition: border-color var(--dur-fast) var(--ease-organic),
              background-color var(--dur-fast) var(--ease-organic),
              transform var(--dur-fast) var(--ease-settle);
}
.quiz-opt:hover { border-color: var(--color-snow-white); transform: translateY(-2px); }
.quiz-opt .k {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: var(--radius-full);
  border: 1.5px solid rgba(252,252,247,0.4); display: grid; place-items: center;
  font-family: var(--font-seed-sans-mono); font-size: var(--text-micro);
}
.quiz-opt[aria-pressed="true"] { background: rgba(252,252,247,0.1); border-color: var(--color-lime-pulse); }
.quiz-opt[aria-pressed="true"] .k { background: var(--color-lime-pulse); color: var(--color-forest-depths); border-color: var(--color-lime-pulse); }
.quiz-opt .sub { display: block; font-size: var(--text-caption); opacity: 0.62; margin-top: 3px; }

/* --------------------------------------------- PERSONNALISATION (panneau) */
.me-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-16); flex-wrap: wrap; }
.me-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.me-empty { border: 1.5px dashed rgba(28,58,19,0.25); border-radius: var(--radius-cards); padding: var(--spacing-32); text-align: center; }
.sec-dark .me-empty { border-color: rgba(252,252,247,0.3); }

/* auto-fit : un protocole qui ne remplit qu'un créneau occupe toute la largeur */
.protocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-16); }
@media (max-width: 860px) { .protocol { grid-template-columns: 1fr; } }
/* Le fond ET la couleur du texte voyagent ensemble, via des variables posées
   par la section. Avant, « .sec-light .protocol-slot » était un sélecteur
   DESCENDANT : un panneau sombre imbriqué dans une section claire héritait
   quand même du fond clair, pendant que son texte restait blanc. Résultat :
   carte claire, texte blanc, illisible. Une variable, elle, est reprise de
   l'ancêtre le PLUS PROCHE : le panneau sombre reprend donc la main. */
.sec-light, .sec-stone { --slot-bg: var(--color-warm-stone); --slot-fg: var(--color-forest-depths); }
.sec-dark, .on-dark, .callout-dark { --slot-bg: rgba(252,252,247,0.07); --slot-fg: var(--color-snow-white); }
.protocol-slot {
  border-radius: var(--radius-cards); padding: var(--spacing-16);
  background: var(--slot-bg, rgba(252,252,247,0.07));
  color: var(--slot-fg, inherit);
  display: flex; flex-direction: column; gap: var(--spacing-8);
}
.protocol-when { font-family: var(--font-seed-sans-mono); font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.74; }

/* --------------------------------------------------- Illustration SVG */
.sci-svg path, .sci-svg circle, .sci-svg line { vector-effect: non-scaling-stroke; }
.draw-path { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.in-view .draw-path { animation: draw var(--dur-reveal) var(--ease-glass) forwards; }

/* ----------------------------------------------------- Compteur chiffré */
.counter { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------- Curseur « spécimen » */
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 130;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-forest-depths);
  pointer-events: none; translate: -50% -50%;
  transition: width var(--dur-base) var(--ease-organic), height var(--dur-base) var(--ease-organic),
              background-color var(--dur-base) var(--ease-organic), border-color var(--dur-base) var(--ease-organic),
              opacity var(--dur-base) var(--ease-organic);
  opacity: 0;
  mix-blend-mode: multiply;
}
.cursor-ring.is-on { opacity: 1; }
.cursor-ring.on-dark-ctx { border-color: var(--color-lime-pulse); mix-blend-mode: normal; }
.cursor-ring.is-mag { width: 66px; height: 66px; background: rgba(211, 250, 153, 0.35); }
@media (hover: none) { .cursor-ring { display: none; } }

/* --------------------------------------------------------- Filtres / rail */
.filter-rail {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.filter-rail::-webkit-scrollbar { height: 3px; }
.filter-rail::-webkit-scrollbar-thumb { background: rgba(28,58,19,0.2); border-radius: 99px; }

/* ------------------------------------------------------- Carte article */
.acard { display: flex; flex-direction: column; gap: var(--spacing-16); text-decoration: none; }
.acard-thumb {
  position: relative; border-radius: var(--radius-cards); overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--color-warm-stone);
  display: grid; place-items: center;
}
.sec-dark .acard-thumb { background: rgba(252,252,247,0.07); }
.acard-thumb > svg { width: 100%; height: 100%; }
.acard-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: var(--color-lime-pulse); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-organic);
  mix-blend-mode: multiply;
}
.acard:hover .acard-thumb::after { opacity: 0.22; }
.acard-title { font-size: var(--text-subheading); line-height: 1.22; letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-w350); }
.acard-kicker { display: flex; align-items: center; gap: var(--spacing-8); }
.acard-read { font-family: var(--font-seed-sans-mono); font-size: var(--text-micro); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }  /* 0,6 donnait 3,72 */

/* ------------------------------------------------------ Verdict Wirecutter */
.verdict { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
@media (max-width: 860px) { .verdict { grid-template-columns: 1fr; } }
.verdict-card { border-radius: var(--radius-cards); padding: var(--spacing-24); background: var(--color-warm-stone); display: flex; flex-direction: column; gap: var(--spacing-8); }
.verdict-card.is-top { background: var(--color-forest-depths); color: var(--color-snow-white); }
.verdict-label { font-family: var(--font-seed-sans-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }

/* ---------------------------------------------------- Bandeau affiliation */
.aff-note {
  font-size: var(--text-caption); line-height: 1.45; color: var(--color-pewter);
  border-left: 1.5px solid var(--color-lime-pulse); padding-left: var(--spacing-16);
}
.sec-dark .aff-note { color: rgba(252,252,247,0.7); }

/* ======================================================= FRISE BIOGRAPHIQUE
   Inspirée des timelines plein écran : grande année en lime sur fond sombre,
   image à gauche, texte à droite, trait vertical continu.
   ========================================================================= */
.tl { position: relative; }
.tl-item {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--spacing-48);
  align-items: center;
  padding-block: var(--spacing-64);
}
.tl-item + .tl-item { padding-top: var(--spacing-32); }
.tl-rail { background: rgba(252, 252, 247, 0.22); width: 1px; height: 100%; justify-self: center; }
.tl-year {
  font-family: var(--font-seed-sans);
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.9;
  font-weight: var(--font-weight-light);
  letter-spacing: -0.04em;
  color: var(--color-lime-pulse);
  display: block;
}
.tl-age {
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.70;  /* âge de la frise */
  display: block;
  margin-top: var(--spacing-8);
}
.tl-title {
  font-size: var(--text-heading-sm);
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-weight: var(--font-weight-w350);
  text-transform: uppercase;
  margin: 0 0 var(--spacing-8);
}
.tl-place {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-lime-pulse);
  margin-bottom: var(--spacing-16);
}
.tl-place::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-lime-pulse); flex: 0 0 auto;
}
.tl-body { font-size: var(--text-body-sm); line-height: 1.6; opacity: 0.84; }
.tl-body p { margin: 0 0 var(--spacing-16); }
.tl-body p:last-child { margin-bottom: 0; }
.tl-left { text-align: right; }
.tl-item:nth-child(even) .tl-left { text-align: right; }

@media (max-width: 900px) {
  .tl-item {
    grid-template-columns: 2px 1fr;
    gap: var(--spacing-24);
    padding-block: var(--spacing-40);
    align-items: start;
  }
  .tl-item + .tl-item { padding-top: 0; }
  .tl-rail { grid-row: 1 / span 2; height: 100%; width: 1px; justify-self: start; }
  .tl-left { text-align: left; grid-column: 2; }
  .tl-right { grid-column: 2; }
  .tl-year { font-size: 48px; }
}

/* Portrait de l'auteur */
.author-portrait {
  width: 100%;
  /* Sans height:auto, l'attribut height="900" du HTML l'emporte : la boîte
     devenait 390 x 900, aspect-ratio était ignoré, et object-fit: cover
     rognait la photo carrée en bande verticale — le haut du crâne coupé. */
  height: auto;
  border-radius: var(--radius-large-cards);
  background: var(--color-warm-stone);
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 42%;   /* le visage est légèrement au-dessus du centre */
}
.author-badge {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  padding: 10px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid currentColor;
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Tableau de palmarès compact */
.palmares { display: flex; flex-direction: column; gap: 2px; }
.palmares-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: var(--spacing-16);
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid rgba(252, 252, 247, 0.16);
}
.sec-light .palmares-row, .sec-stone .palmares-row { border-top-color: rgba(28, 58, 19, 0.12); }
.palmares-rank {
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-light);
  color: var(--color-lime-pulse);
  line-height: 1;
}
.sec-light .palmares-rank, .sec-stone .palmares-rank { color: var(--color-forest-depths); }
@media (max-width: 560px) {
  .palmares-row { grid-template-columns: 48px 1fr; }
  .palmares-row > :last-child { grid-column: 2; }
}