/* ==========================================================================
   nsai.fr — imprime editorial
   Un seul fichier. GSAP en CDN, optionnel : la page se tient sans lui.

   Deux sequences epinglees portent le recit :
     - les trois refus, qu'on traverse un par un sans quitter l'ecran ;
     - le chemin, qui defile lateralement sur fond sombre.
   Le reste de la page ne bouge pas.
   ========================================================================== */

@font-face{font-family:'Lora';src:url('../fonts/lora-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/lora-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#FAF7F2;
  --paper-2:#F2ECE4;
  --ink:#1C1A17;
  --ink-2:#4A453E;
  --ink-3:#6E675E;
  --rule:#D9D0C4;
  --rule-strong:#1C1A17;

  --blue:#2743AD;
  --blue-deep:#1B2F7A;
  --blue-lift:#8E93E2;
  --blue-wash:#E7E9F6;

  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Poppins','Segoe UI',system-ui,sans-serif;

  --measure:34rem;
  --page:74rem;
  --gut:clamp(22px,5.5vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--blue) var(--paper-2);scroll-padding-top:5rem}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.06rem,.42vw + .98rem,1.19rem);
  line-height:1.66;font-kerning:normal;
  font-variant-numeric:oldstyle-nums proportional-nums;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--blue-wash);color:var(--blue-deep)}
input,textarea{caret-color:var(--blue)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--blue);border:3.5px solid var(--paper-2);border-radius:99px}

a{color:var(--blue);text-decoration-thickness:.5px;text-underline-offset:.24em;transition:color .18s var(--ease)}
a:hover{color:var(--blue-deep)}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

/* --- Echelle typographique ---------------------------------------------- */
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);margin:0;text-wrap:balance}
h1{font-size:clamp(2.9rem,7.4vw,5.8rem);line-height:1.03;letter-spacing:-.028em;max-width:14ch}
h2{font-size:clamp(1.95rem,4.1vw,3.3rem);line-height:1.12;letter-spacing:-.022em;max-width:18ch}
h2.wide{max-width:none;text-wrap:nowrap}
@media(max-width:560px){h2.wide{text-wrap:balance}}
h3,.sub{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.9vw,1.58rem);line-height:1.3;letter-spacing:-.012em;margin:0}
.sub{max-width:26ch}
p{margin:0 0 1.05em;max-width:var(--measure)}
p:last-child{margin-bottom:0}
em,i{font-style:italic}
strong{font-weight:400;font-style:italic}

.standfirst{
  font-size:clamp(1.24rem,1.5vw + .82rem,1.6rem);line-height:1.46;color:var(--ink-2);
  max-width:34rem;font-style:italic;
}
/* Chapeau de section : plus petit et plus bas que le titre, pour qu'il ne
   lui dispute pas la place. */
.deck{
  font-size:1.02rem;line-height:1.6;color:var(--ink-3);max-width:32rem;
  margin-top:1.6em;font-style:normal;
}
.folio{
  font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);
  font-variant-numeric:lining-nums tabular-nums;
}

/* --- Gabarit ------------------------------------------------------------- */
.page{max-width:var(--page);margin-inline:auto;padding-inline:var(--gut)}
.band{padding-block:clamp(4.5rem,9vw,8.5rem)}
.band-tight{padding-block:clamp(3rem,5.5vw,5rem)}

/* --- Bandeau de tete ----------------------------------------------------- */
.masthead{
  position:sticky;top:0;z-index:60;background:rgba(250,247,242,.9);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.masthead.pinned{border-bottom-color:var(--rule)}
.masthead-in{
  max-width:var(--page);margin-inline:auto;padding:.5rem var(--gut);
  min-height:4.4rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.masthead img{height:1.55rem;width:auto}
.masthead-right{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem)}
.masthead-note{font-family:var(--sans);font-weight:600;font-size:.8rem;color:var(--ink-3);line-height:1.4;text-align:right}
@media(max-width:860px){.masthead-note{display:none}}

/* --- Ouverture ------------------------------------------------------------ */
.opening{position:relative;overflow:hidden;padding-block:clamp(4.5rem,11vw,9.5rem) clamp(3rem,6vw,5.5rem)}
.opening>*{position:relative;z-index:1}
.grid-field{
  position:absolute;inset:-3rem 0 0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(28,26,23,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,26,23,.08) 1px,transparent 1px),
    linear-gradient(rgba(39,67,173,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(39,67,173,.07) 1px,transparent 1px);
  background-size:
    clamp(88px,9vw,124px) clamp(88px,9vw,124px),clamp(88px,9vw,124px) clamp(88px,9vw,124px),
    clamp(22px,2.25vw,31px) clamp(22px,2.25vw,31px),clamp(22px,2.25vw,31px) clamp(22px,2.25vw,31px);
  mask-image:radial-gradient(ellipse 96% 84% at 26% 32%,#000 4%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 96% 84% at 26% 32%,#000 4%,transparent 70%);
}
.opening h1{margin-bottom:.46em}
.opening .standfirst{margin-bottom:2.1em}

/* --- Bouton -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--sans);font-weight:600;font-size:.88rem;letter-spacing:.02em;
  padding:.92em 1.6em;border:1.5px solid var(--ink);border-radius:2px;
  color:var(--ink);background:transparent;text-decoration:none;cursor:pointer;
  transition:background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn .arw{transition:transform .22s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center}

/* ==========================================================================
   SEQUENCE 1 : les trois refus, traverses un par un
   Sans GSAP c'est une liste ordinaire. Avec GSAP (.gsap-on), les trois
   fiches se superposent dans une meme cellule et l'ecran est retenu
   pendant qu'on passe de l'une a l'autre.
   ========================================================================== */
.refusals{margin:0;padding:0;list-style:none;counter-reset:refus}
.refusals li{
  position:relative;border-top:1px solid var(--rule);
  padding:clamp(1.5rem,3vw,2.4rem) 0 clamp(1.5rem,3vw,2.4rem) clamp(3.2rem,6vw,5.5rem);
}
.refusals li:last-child{border-bottom:1px solid var(--rule)}
.refusals li::before{
  counter-increment:refus;content:counter(refus,decimal-leading-zero);
  position:absolute;left:0;top:calc(clamp(1.5rem,3vw,2.4rem) + .38em);
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  color:var(--blue);font-variant-numeric:lining-nums tabular-nums;
}
.refusals .sub{margin-bottom:.4em}
.refusals p{color:var(--ink-2);max-width:32rem;margin:0}

.gsap-on .stage-inner{min-height:100svh;display:grid;align-content:center;padding-block:6rem}
.gsap-on .refusals{display:grid}
.gsap-on .refusals li{
  grid-area:1/1;border:0;padding:0 0 0 clamp(3.4rem,6vw,6rem);
  opacity:0;
}
.gsap-on .refusals li::before{top:.4em;font-size:.78rem}
.gsap-on .refusals .sub{font-size:clamp(1.8rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:-.022em;max-width:20ch;margin-bottom:.5em}
.gsap-on .refusals p{font-size:clamp(1.06rem,1.3vw,1.2rem);max-width:34rem}
/* Jauge de progression de la sequence */
.stage-meter{display:none}
.gsap-on .stage-meter{
  display:flex;gap:.5rem;margin-top:3rem;padding-left:clamp(3.4rem,6vw,6rem);
}
.gsap-on .stage-meter span{
  width:2.4rem;height:2px;background:var(--rule);transition:background-color .35s var(--ease);
}
.gsap-on .stage-meter span.on{background:var(--blue)}

/* --- Deux colonnes, photo et texte --------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:2rem}}
.split figure{margin:0;display:flex;flex-direction:column}
.split figure img{
  width:100%;flex:1 1 auto;min-height:24rem;object-fit:cover;object-position:center 26%;
  border-radius:2px;background:var(--paper-2);
}
@media(max-width:860px){.split figure img{min-height:0;aspect-ratio:4/3}}
.split figcaption{
  font-family:var(--sans);font-weight:600;font-size:.71rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding-top:.9rem;flex:none;
}
.split-body{align-self:center}
.split-body h2{margin-bottom:.5em}
.js .reveal-mask{clip-path:inset(0 0 100% 0)}

/* --- Lettrine ------------------------------------------------------------ */
.dropcap::first-letter{
  float:left;font-family:var(--serif);font-size:4em;line-height:.84;
  padding:.05em .1em 0 0;color:var(--blue);font-style:normal;
}

/* ==========================================================================
   Ce que j'entends : des voix, pas un tableau de texte
   ========================================================================== */
.voices-band{position:relative;overflow:hidden;background:var(--paper-2)}
.voices-band .grid-field{
  inset:0;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 50%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 50%,#000 0%,transparent 72%);
}
.voices-band>*{position:relative;z-index:1}
.voices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:1.4rem;margin-top:3.4rem}
@media(max-width:820px){.voices{grid-template-columns:1fr}}
.voice{
  position:relative;margin:0;background:var(--paper);height:100%;display:flex;flex-direction:column;
  border:1px solid var(--rule);border-radius:2px;
  padding:clamp(2rem,3.2vw,2.8rem) clamp(1.6rem,2.6vw,2.4rem) clamp(1.5rem,2.4vw,2rem);
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.voice:hover{border-color:var(--blue);transform:translateY(-3px)}
.voice::before{
  content:'\201C';position:absolute;left:clamp(1.2rem,2vw,1.9rem);top:-.02em;
  font-family:var(--serif);font-size:5.4rem;line-height:1;color:var(--blue);opacity:.18;
  pointer-events:none;
}
.voice q{
  display:block;quotes:none;font-size:clamp(1.18rem,1.7vw,1.44rem);line-height:1.42;
  letter-spacing:-.012em;color:var(--ink);position:relative;
}
.voice cite{
  display:block;margin-top:auto;padding-top:1.4em;font-style:normal;
  font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);
}
.js .voice{opacity:0;transform:translateY(18px)}

/* --- Colonnes ------------------------------------------------------------- */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.32fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:2rem}}
.col-note{font-size:1rem;color:var(--ink-3);max-width:22rem}

/* ==========================================================================
   Cartes retournables, toutes de la meme hauteur
   ========================================================================== */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:1.1rem;margin-top:2.8rem}
@media(max-width:740px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;perspective:1500px;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;height:100%;
}
.card-inner{display:grid;height:100%;transition:transform .62s var(--ease);transform-style:preserve-3d}
.card[aria-expanded="true"] .card-inner{transform:rotateY(180deg)}
.card-face{
  grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--rule);border-radius:2px;background:var(--paper-2);
  padding:clamp(1.5rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.75rem;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.card:hover .card-face,.card:focus-visible .card-face{border-color:var(--blue);background:#fff}
.card-back{transform:rotateY(180deg);background:var(--blue-wash);border-color:var(--blue-wash)}
.card:hover .card-back{border-color:var(--blue)}
.card .who{
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);padding-right:2.4rem;
}
.card .hook{font-size:1.12rem;line-height:1.42;color:var(--ink);margin:0;max-width:none}
.card .detail{font-size:.99rem;line-height:1.56;color:var(--ink-2);margin:0;max-width:none}
.card .more{
  margin-top:auto;padding-top:.7rem;font-family:var(--sans);font-weight:600;font-size:.71rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);transition:color .25s var(--ease);
}
.card:hover .more{color:var(--blue)}
/* Pastille de retournement : l'affordance, en haut a droite */
.flip-badge{
  position:absolute;top:clamp(1.2rem,2.2vw,1.6rem);right:clamp(1.2rem,2.2vw,1.6rem);
  width:2rem;height:2rem;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;color:var(--blue);background:var(--paper);
  transition:transform .55s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease);
}
.flip-badge svg{width:.95rem;height:.95rem;display:block}
.card:hover .flip-badge{background:var(--blue);border-color:var(--blue);color:#fff}
.card[aria-expanded="true"] .flip-badge{transform:rotate(180deg)}
.card-back .flip-badge{background:var(--paper);border-color:var(--blue-wash)}

/* ==========================================================================
   SEQUENCE 2 : le chemin, sur fond sombre, qui defile lateralement
   Sans GSAP : une liste verticale ordinaire, lisible telle quelle.
   ========================================================================== */
.road{background:var(--ink);color:#EFEAE3;position:relative;overflow:hidden}
.road h2{color:var(--paper)}
.road .deck{color:rgba(239,234,227,.62)}
.road-head{padding-block:clamp(4rem,7vw,6.5rem) 0}

/* Etat de base, et seule mise en page sous 861 px : une frise verticale. */
.stations{
  margin:0;padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,7vw,6.5rem);list-style:none;
  display:grid;gap:2.4rem;
}
.station{position:relative;padding-left:2.4rem;border-left:1px solid rgba(239,234,227,.2)}
.station .step-no{
  display:block;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-lift);margin-bottom:.6em;
  font-variant-numeric:lining-nums tabular-nums;
}
.station h3{color:var(--paper);margin-bottom:.4em}
.station p{color:rgba(239,234,227,.74);margin:0;max-width:32rem}
.station::before{
  content:'';position:absolute;left:-.42rem;top:.3rem;width:.78rem;height:.78rem;
  border-radius:50%;background:var(--ink);border:1.5px solid rgba(239,234,227,.36);
}
.station.lit::before{background:var(--blue-lift);border-color:var(--blue-lift)}

/* La frise verticale vit dans la gouttiere de page ; en mode diapositive
   c'est .station-in qui la reprend, pour que chaque vue fasse bien 100vw. */
.road-viewport{position:relative;padding-inline:var(--gut)}
.road-viewport .stations{max-width:var(--page);margin-inline:auto}
/* La carte du chemin : un rail permanent avec ses quatre stations nommees,
   et le detail de l'etape courante en dessous. La carte ne bouge pas, c'est
   elle qui donne le sentiment de roadmap ; seul le detail change. */
.road-map{display:none}

@media(min-width:861px){
  .gsap-on .road-stage{min-height:100svh;display:grid;align-content:center;gap:clamp(1.6rem,3vw,2.6rem)}
  .gsap-on .road-head{padding-block:0}
  .gsap-on .road-head .deck{margin-top:1em;max-width:34rem}

  .gsap-on .road-map{display:block;margin-top:clamp(2.2rem,4vw,3.4rem);position:relative}
  .gsap-on .road-line{
    position:absolute;left:calc(100%/8);right:calc(100%/8);top:.44rem;height:2px;
    background:rgba(239,234,227,.18);
  }
  .gsap-on .road-line i{
    position:absolute;inset:0;display:block;background:var(--blue-lift);
    transform-origin:left;transform:scaleX(0);
  }
  .gsap-on .road-nodes{
    display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;
    position:relative;
  }
  .gsap-on .road-nodes li{display:grid;justify-items:center;gap:.9rem;text-align:center}
  .gsap-on .road-nodes .dot{
    width:1rem;height:1rem;border-radius:50%;background:var(--ink);
    border:2px solid rgba(239,234,227,.3);
    transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
  }
  .gsap-on .road-nodes li.on .dot{background:var(--blue-lift);border-color:var(--blue-lift)}
  .gsap-on .road-nodes li.now .dot{transform:scale(1.5)}
  .gsap-on .road-nodes .lbl{
    font-family:var(--sans);font-weight:600;font-size:.76rem;letter-spacing:.04em;
    color:rgba(239,234,227,.42);transition:color .4s var(--ease);
  }
  .gsap-on .road-nodes li.now .lbl{color:var(--paper)}
  .gsap-on .road-nodes li.on .lbl{color:rgba(239,234,227,.7)}
  .gsap-on .road-nodes li.now.on .lbl{color:var(--paper)}

  /* Les details se superposent : un seul se lit, la carte reste entiere. */
  .gsap-on .road-viewport{overflow:visible;padding-inline:0}
  .gsap-on .stations{
    display:grid;max-width:var(--page);margin-inline:auto;padding:clamp(2rem,3.5vw,3rem) var(--gut) 0;
    min-height:15rem;
  }
  .gsap-on .station{
    grid-area:1/1;border-left:0;padding:0;opacity:0;
  }
  .gsap-on .station::before{display:none}
  .gsap-on .station-in{max-width:44rem}
  .gsap-on .station h3{font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.12;letter-spacing:-.022em;margin-bottom:.45em}
  .gsap-on .station p{font-size:clamp(1.04rem,1.25vw,1.16rem);max-width:40rem}
  .gsap-on .station .step-no{font-size:.74rem;color:var(--blue-lift)}
}

/* --- Encart -------------------------------------------------------------- */
.aside{background:var(--blue-wash);padding:clamp(1.5rem,2.8vw,2.2rem);border-radius:2px}
.aside p{max-width:none}

/* --- Contact -------------------------------------------------------------- */
.closing{background:var(--ink);color:#EFEAE3}
.closing h2{color:var(--paper);max-width:16ch}
.closing .standfirst{color:rgba(239,234,227,.78)}
.closing a:not(.btn){color:#A9AEEA}
.closing a:not(.btn):hover{color:#CFD3F4}
.closing .btn{border-color:rgba(239,234,227,.42);color:var(--paper)}
.closing .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.closing .folio{color:rgba(239,234,227,.6)}
/* Piege a robots : hors flux et hors tabulation, mais pas display:none,
   que certains robots savent detecter. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:0;color:rgba(239,234,227,.84)}
.field input,.field textarea{
  font-family:var(--serif);font-size:1rem;color:var(--paper);
  background:rgba(255,255,255,.05);border:1px solid rgba(239,234,227,.28);border-radius:2px;
  padding:.8rem .9rem;width:100%;transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(239,234,227,.5)}
.field input:focus,.field textarea:focus{outline:none;border-color:#A9AEEA;background:rgba(255,255,255,.09)}
.field textarea{min-height:7rem;resize:vertical}

/* --- Ours ---------------------------------------------------------------- */
.colophon{background:var(--ink);color:rgba(239,234,227,.64);font-size:.9rem;padding-block:0 2.4rem}
.colophon-in{border-top:1px solid rgba(239,234,227,.16);padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}
.colophon a{color:rgba(239,234,227,.82)}
.colophon a:hover{color:#A9AEEA}

/* --- Pages legales -------------------------------------------------------- */
.legal h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:2.4em 0 .6em;max-width:none}
.legal h2:first-of-type{margin-top:0}
.legal ul{padding-left:1.1rem;max-width:var(--measure)}
.legal li{margin-bottom:.4em}

/* --- Mouvement reduit ----------------------------------------------------
   Les sequences epinglees tombent entierement : on revient aux listes
   ordinaires, ou toute l'information reste lisible. Le retournement des
   cartes reste, c'est un retour d'action. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
  .js .voice{opacity:1;transform:none}
  .js .reveal-mask{clip-path:none}
  .card-inner{transition-duration:.15s}
}