/* =========================================================
   NEKO — page /robotics
   Deux images portent l'argument : l'humanoide qui encombre un salon,
   et le reveil ouvert sur ses engrenages. Le reste est du texte et une
   liste — le cursus, genere depuis lab/content.
   DA inchangee : ni rouge ni vert.
   ========================================================= */

/* =========================================================
   01 — hero anime
   Le mot pivote dans une fenetre a hauteur fixe : le reste de la
   phrase ne doit jamais bouger, sinon c'est la page qui tremble et
   plus le mot qui tourne.
   ========================================================= */
/* le padding bas n'est pas decoratif : sans lui, le border-top de la
   section suivante arrive contre les boutons */
.ahero{ padding:clamp(130px,20vh,210px) 0 clamp(64px,10vh,110px); }

.ahero__inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(22px,3.2vh,34px);
  max-width:960px; margin:0 auto;
  padding:0 var(--gut);
  text-align:center;
}

.ahero__pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 10px 9px 20px;
  border:1px solid var(--line); border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  color:var(--paper-dim);
  transition:border-color .35s var(--ease), color .35s var(--ease), gap .3s var(--ease);
}
.ahero__pill svg{ height:14px; width:14px; color:var(--warm); }
.ahero__pill:hover{ gap:16px; color:var(--paper); border-color:rgba(240,196,138,.4); }

.ahero__h{
  margin:0;
  display:flex; flex-direction:column; align-items:center;
  font-size:clamp(34px,6.6vw,80px); line-height:1.02;
  font-weight:600; letter-spacing:-.04em;
}

/* la fenetre : une ligne de haut, debordement coupe. Le mot occupe sa
   propre ligne — le coller a la phrase laissait un trou entre les deux
   des que le mot etait plus court que la boite. */
.ahero__rot{
  position:relative; display:block;
  /* 1.16em coupait les jambages de « piggy ». Il faut la hauteur de
     ligne plus la descente, sinon la fenetre rogne le mot. */
  width:100%; height:1.34em;
  overflow:hidden;
}
.ahero__lead{ font-weight:400; color:var(--paper-dim); }

.ahero__w{
  position:absolute; left:0; right:0; top:0;
  white-space:nowrap;
  font-weight:700; color:var(--warm);
}
/* sans JS, ou en reduced-motion, seul le premier mot est pose */
.ahero__w:not(:first-child){ opacity:0; }
.ahero.js-rot .ahero__w{ opacity:0; }

.ahero__lede{
  margin:0; max-width:56ch;
  font-size:clamp(15px,1.35vw,18px); line-height:1.6;
  color:var(--paper-dim);
}

.ahero__cta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:6px;
}
.ahero__btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px;
  border-radius:999px;
  font-size:14px; font-weight:500;
  transition:gap .3s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), color .35s var(--ease);
}
.ahero__btn svg{ height:16px; width:16px; }
.ahero__btn:hover{ gap:16px; }

.ahero__btn--solid{ background:var(--paper); color:#000; }
.ahero__btn--solid:hover{ background:#fff; }

.ahero__btn--ghost{
  border:1px solid var(--line); color:var(--paper-dim);
}
.ahero__btn--ghost:hover{ color:var(--paper); border-color:rgba(244,242,237,.26); }
.ahero__btn--ghost svg{ color:var(--warm); }

@media (max-width:520px){
  .ahero__btn{ width:100%; justify-content:center; }
}

/* ---------- figures ---------- */
.rfig{ margin:clamp(40px,7vh,72px) 0 0; }
.rfig img{
  width:100%; height:auto;
  border-radius:20px;
}
.rfig figcaption{
  margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--paper-mute);
}



/* =========================================================
   01 — l'anti-these
   ========================================================= */
.anti{
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:880px){
  .anti{ grid-template-columns:1.05fr .95fr; }
}
.anti__fig{ margin:0; }
.anti__fig img{
  width:100%; height:auto;
  border-radius:20px;
  /* l'image est un contre-exemple : elle est volontairement en retrait,
     elle ne doit pas etre le plus beau visuel de la page */
  filter:grayscale(.35) brightness(.82);
}
.anti__txt .tsec__num,
.anti__txt .tsec__h{ margin-bottom:12px; }
.anti__txt .tsec__h{ margin-bottom:20px; }
.anti__d{
  margin:0 0 16px; max-width:46ch;
  font-size:15px; line-height:1.6; color:var(--paper-dim);
}
.anti__d:last-child{ margin-bottom:0; }

/* =========================================================
   02 — le manifeste
   L'image flotte et ses bords se dissolvent : pas de cadre, elle
   apparait plutot qu'elle n'est posee. On n'anime que transform, donc
   aucun recalcul de mise en page pendant la derive.
   ========================================================= */
.mani{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; place-items:center;
  min-height:min(92vh, 860px);
  padding:clamp(80px,14vh,170px) var(--gut);
  border-top:1px solid var(--line);
}

/* le champ de points remplace toute image : aucune photo ne dit
   « beaucoup de petites choses, dirigees ». Le masque radial garde le
   principe d'avant : pas de bord, ca sort du noir. */
.mani__cv{
  position:absolute; inset:0; z-index:-2;
  display:block; width:100%; height:100%;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(72% 70% at 62% 48%, #000 0%, rgba(0,0,0,.72) 52%, transparent 88%);
          mask-image:radial-gradient(72% 70% at 62% 48%, #000 0%, rgba(0,0,0,.72) 52%, transparent 88%);
}

/* un voile d'encre par-dessus : le texte doit rester lisible quel que
   soit l'endroit ou la derive amene les hautes lumieres */
.mani::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, var(--ink) 2%, rgba(8,9,11,.86) 38%, rgba(8,9,11,.10) 100%);
}

.mani__inner{
  position:relative;
  width:100%; max-width:1100px;
}
.mani__num{
  margin:0 0 18px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; color:var(--paper-mute);
}
.mani__h{
  margin:0 0 30px; max-width:14ch;
  font-size:clamp(36px,7.4vw,86px); line-height:.98;
  font-weight:700; letter-spacing:-.04em;
}
.mani__d{
  margin:0 0 20px; max-width:44ch;
  font-size:clamp(15px,1.5vw,19px); line-height:1.6;
  color:var(--paper-dim);
}
.mani__d--strong{ color:var(--paper); font-weight:500; }
/* trois lignes au lieu de quatre paragraphes : la premiere porte, donc
   elle monte en taille. La coupure est explicite : laissee au navigateur,
   elle tombait avant « not a body », qui est la chute. */
.mani__d--lead{
  font-size:clamp(18px,2vw,25px); line-height:1.4;
  color:var(--paper); max-width:none;
}

.mani__cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:20px; padding:5px 5px 5px 26px;
  border-radius:999px;
  background:var(--paper); color:#000;
  font-size:15px; font-weight:500;
  transition:gap .3s var(--ease);
}
.mani__cta:hover{ gap:16px; }
.mani__circle{
  display:flex; align-items:center; justify-content:center;
  height:42px; width:42px; border-radius:999px;
  background:#000; color:var(--paper);
  transition:transform .3s var(--ease);
}
.mani__cta:hover .mani__circle{ transform:scale(1.1); }
.mani__circle svg{ height:16px; width:16px; }

@media (max-width:640px){
  .mani::after{ background:linear-gradient(180deg, rgba(8,9,11,.5) 0%, rgba(8,9,11,.9) 55%); }
  .mani__h{ max-width:none; }
}

/* =========================================================
   03 — l'ecole
   Une seule carte cliquable. Le detail des douze lecons vit dans
   l'ecole, qui est en ligne : le repeter ici allongeait la page sans
   rien apprendre, et noyait le seul geste qui compte — entrer.
   ========================================================= */
.sch{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:1fr;
  border:1px solid var(--line); border-radius:24px;
  background:linear-gradient(165deg, rgba(244,242,237,.035), transparent 62%);
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
@media (min-width:820px){ .sch{ grid-template-columns:minmax(0,300px) 1fr; } }

.sch::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(80% 110% at 78% 0%, rgba(240,196,138,.16), transparent 62%);
  opacity:0; transition:opacity .45s var(--ease);
}
.sch:hover{ transform:translateY(-4px); border-color:rgba(240,196,138,.34); }
.sch:hover::before{ opacity:1; }

.sch__media{ display:block; overflow:hidden; }
.sch__media img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3;
  transition:transform .6s var(--ease);
}
@media (min-width:820px){ .sch__media img{ aspect-ratio:auto; min-height:100%; } }
.sch:hover .sch__media img{ transform:scale(1.03); }

.sch__body{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(26px,3.4vw,40px);
}
.sch__k{
  display:block; margin-bottom:14px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--warm);
}
.sch__t{
  display:block; margin-bottom:24px; max-width:44ch;
  font-size:clamp(17px,1.7vw,21px); line-height:1.4;
  font-weight:600; letter-spacing:-.02em; color:var(--paper);
}

/* les chiffres : une rangee serree, pas quatre tuiles */
.sch__stats{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  margin:0 0 22px;
}
.sch__stats div{ display:flex; align-items:baseline; gap:7px; }
.sch__stats dt{
  font-family:var(--mono); font-size:9px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mute);
  order:2;
}
.sch__stats dd{
  margin:0;
  font-size:20px; font-weight:700; letter-spacing:-.025em; color:var(--paper);
  order:1;
}

/* les modules : des pastilles, avec le nombre de lecons en exposant */
.sch__mods{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 28px; padding:0; list-style:none;
}
.sch__mod{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px;
  border:1px solid var(--line); border-radius:999px;
  font-size:12px; color:var(--paper-dim);
  transition:border-color .35s var(--ease);
}
.sch:hover .sch__mod{ border-color:rgba(244,242,237,.16); }
.sch__modN{
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--warm);
}
.sch__modC{
  font-family:var(--mono); font-size:9px;
  font-variant-numeric:tabular-nums; color:var(--paper-mute);
}

.sch__cta{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:auto; padding:13px 24px;
  border-radius:999px;
  background:var(--paper); color:#000;
  font-size:14px; font-weight:500;
  transition:gap .3s var(--ease);
}
.sch:hover .sch__cta{ gap:16px; }
.sch__cta svg{ height:16px; width:16px; }

/* =========================================================
   04 — FAQ
   <details> natif. Le marqueur par defaut est remplace par un signe
   dessine, qui pivote — le triangle du navigateur ne suit aucune DA.
   ========================================================= */
.tsec--faq{ padding-bottom:clamp(80px,14vh,170px); }

.faq{ border-top:1px solid var(--line); }

.faq__i{ border-bottom:1px solid var(--line); }

.faq__i summary{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px;
  font-size:clamp(15px,1.5vw,18px); font-weight:500; line-height:1.4;
  color:var(--paper-dim);
  cursor:pointer; list-style:none;
  transition:color .3s var(--ease);
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary:hover{ color:var(--paper); }
.faq__i[open] summary{ color:var(--paper); }
.faq__i summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 1px rgba(240,196,138,.5);
  border-radius:8px;
}

/* Le signe : un plus qui devient un moins. C'est la barre VERTICALE qui
   se retracte, pas le signe qui pivote — faire tourner de 90 deg une
   barre deja horizontale la remet debout, ce qui donne un « | » ouvert
   au lieu d'un « - ». Le demi-tour n'est la que pour le mouvement. */
.faq__i summary::after{
  content:''; flex:none;
  height:11px; width:11px;
  background:
    linear-gradient(var(--warm), var(--warm)) center/11px 1.5px no-repeat,
    linear-gradient(var(--warm), var(--warm)) center/1.5px 11px no-repeat;
  transition:background-size .35s var(--ease), transform .35s var(--ease);
}
.faq__i[open] summary::after{
  background-size:11px 1.5px, 1.5px 0;
  transform:rotate(180deg);
}

.faq__a{ padding:0 4px 26px; max-width:68ch; }
.faq__a p{
  margin:0 0 14px;
  font-size:15px; line-height:1.65; color:var(--paper-dim);
}
.faq__a p:last-child{ margin-bottom:0; }
.faq__a strong{ color:var(--paper); font-weight:600; }
.faq__a a{
  color:var(--warm);
  border-bottom:1px solid rgba(240,196,138,.35);
  transition:border-color .3s var(--ease);
}
.faq__a a:hover{ border-bottom-color:var(--warm); }

@media (max-width:640px){
  /* 9px en capitales mono se lit sur un ecran de bureau, pas dans une
     main. Sur telephone ces mentions repassent a 10px — la DA garde sa
     hierarchie, elle cesse juste d'etre illisible. */
  .sch__stats dt,
  .sch__modN,
  .sch__modC{ font-size:10px; }
}

.tsec__link{
  color:var(--warm);
  border-bottom:1px solid rgba(240,196,138,.35);
  transition:border-color .3s var(--ease);
}
.tsec__link:hover{ border-bottom-color:var(--warm); }