/* ==========================================================================
   NEO · design-system tokens et classes de composants.
   Ce fichier est la source de verite du look : on le retouche ici, pas dans
   le HTML. Aucune dependance externe, aucune etape de build.

   Principe directeur (neo-brutalisme) : si un element n'a pas de bordure
   noire, il n'existe pas. Les ombres sont des blocs d'encre pleins, sans
   flou. Rien n'est subtil.
   ========================================================================== */

/* --- Police -------------------------------------------------------------
   Space Grotesk en variable font, self-hostee : une seule requete par
   sous-ensemble, pas de connexion a fonts.gstatic.com, pas de FOUT dependant
   d'un tiers. Attention : l'axe wght de cette police s'arrete a 700 · il
   n'existe pas de 900. Le poids maximal visuel passe par .neo-fat, qui
   epaissit les glyphes au trait plutot qu'en simulant un gras synthetique. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Space Mono 700, la compagne dessinee de Space Grotesk (meme fonderie).
   Elle remplace la mono du systeme : celle-ci variait d'une machine a
   l'autre (Consolas, Menlo, DejaVu...), donc le caractere des etiquettes
   changeait selon le visiteur. Le site a maintenant sa voix partout. */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ------------------------------------------------------------ */
:root {
  /* Couleurs. Palette unique, haute saturation, pas de mode sombre : le
     neo-brutalisme assume un seul parti pris. Aucun gris intermediaire ·
     c'est noir pur ou c'est une couleur. */
  --neo-bg:        #FFFDF5;  /* creme, papier journal */
  --neo-ink:       #000000;  /* couleur structurelle : texte, bordures, ombres */
  --neo-accent:    #FF6B6B;  /* rouge vif · action primaire */
  --neo-secondary: #FFD93D;  /* jaune · surlignage, accents secondaires */
  --neo-muted:     #C4B5FD;  /* violet · profondeur sans clash */
  --neo-paper:     #FFFFFF;  /* panneaux de contraste */

  /* Contrastes verifies sur noir : accent 7.5:1, jaune 15.1:1, violet 11.3:1,
     creme 19.6:1. Tous passent WCAG AA en texte courant. */

  --neo-font: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --neo-mono: 'Space Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* Bordures. 4px est l'epaisseur signature ; 8px pour les separations
     majeures ; 2px uniquement pour les traits internes discrets. */
  --neo-b:      4px;
  --neo-b-thin: 2px;
  --neo-b-fat:  8px;

  /* Ombres dures : decalage 45deg, flou zero, etalement zero. */
  --neo-sh-sm: 4px 4px 0 0 var(--neo-ink);
  --neo-sh-md: 8px 8px 0 0 var(--neo-ink);
  --neo-sh-lg: 12px 12px 0 0 var(--neo-ink);
  --neo-sh-xl: 16px 16px 0 0 var(--neo-ink);

  /* Rythme vertical. Dense : le vide non structure n'a pas sa place. */
  --neo-gutter: clamp(16px, 4vw, 40px);
  --neo-section: clamp(64px, 11vh, 128px);
  --neo-max: 1240px;
}

/* --- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 108px; }

body {
  margin: 0;
  background: var(--neo-bg);
  color: var(--neo-ink);
  font-family: var(--neo-font);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Focus visible epais et noir, jamais un halo diffus. La variante claire sert
   aux sections a fond noir, ou un contour noir serait invisible. */
:focus-visible { outline: 4px solid var(--neo-ink); outline-offset: 3px; }
.neo-dark :focus-visible { outline-color: var(--neo-bg); }

::selection { background: var(--neo-secondary); color: var(--neo-ink); }

/* --- Textures ----------------------------------------------------------
   Un fond plat est un fond rate. Trois motifs, poses en background-image sur
   la section elle-meme. */
.neo-dots {
  background-image: radial-gradient(rgba(0,0,0,.16) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
}
.neo-dots-lite {
  background-image: radial-gradient(rgba(0,0,0,.10) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
}
.neo-grid {
  background-image:
    linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px);
  background-size: 44px 44px;
}
.neo-hatch {
  background-image: repeating-linear-gradient(135deg,
    rgba(0,0,0,.10) 0 6px, transparent 6px 14px);
}

/* --- Layout ------------------------------------------------------------ */
.neo-wrap {
  width: 100%;
  max-width: var(--neo-max);
  margin-inline: auto;
  padding-inline: var(--neo-gutter);
}
.neo-section {
  padding-block: var(--neo-section);
  border-bottom: var(--neo-b) solid var(--neo-ink);
  position: relative;
  overflow: hidden;
}

/* En-tete de section : numero dans un carre colore, titre, filet qui remplit
   la ligne restante. */
.neo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(32px, 6vh, 64px);
}
.neo-head__no {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border: var(--neo-b) solid var(--neo-ink);
  background: var(--neo-secondary);
  box-shadow: var(--neo-sh-sm);
  font-family: var(--neo-mono);
  font-size: 20px;
}
.neo-head__rule {
  flex: 1 1 60px;
  min-width: 40px;
  height: 0;
  border-top: var(--neo-b) solid var(--neo-ink);
}

/* --- Typographie ------------------------------------------------------- */
.neo-display, .neo-h2, .neo-h3 {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .88;
  text-wrap: balance;
}
.neo-display { font-size: clamp(44px, 9.4vw, 124px); }
.neo-h2      { font-size: clamp(32px, 6vw, 74px); }
.neo-h3      { font-size: clamp(23px, 3vw, 36px); line-height: .96; letter-spacing: -.02em; }

/* Le « 900 » qui n'existe pas dans Space Grotesk : on epaissit le contour au
   trait, dans la couleur du texte. Plus net qu'un faux-gras synthetique. */
.neo-fat { -webkit-text-stroke: .042em currentColor; paint-order: stroke fill; }

/* Texte creux, contour seul · pour les mots traites en texture. */
.neo-hollow { color: transparent; -webkit-text-stroke: 2px var(--neo-ink); }

/* Mot surligne : une boite de couleur bordee, posee de travers comme un
   marqueur passe a la main. inline-block pour que la rotation ne casse pas
   le flux de la ligne. */
.neo-mark {
  display: inline-block;
  padding: .02em .16em .08em;
  border: var(--neo-b) solid var(--neo-ink);
  background: var(--neo-secondary);
  box-shadow: var(--neo-sh-md);
}
.neo-mark--accent { background: var(--neo-accent); }
.neo-mark--muted  { background: var(--neo-muted); }
.neo-mark--paper  { background: var(--neo-paper); }

.neo-lead {
  margin: 0;
  font-size: clamp(16.5px, 1.35vw, 20px);
  line-height: 1.55;
  text-wrap: pretty;
}
.neo-label {
  font-family: var(--neo-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* --- Glyphe signature --------------------------------------------------
   L'etoile a cinq branches est le cliche du genre ; on la remplace par la
   marque du site : la diagonale du N du logo, doublee. Un carre barre avait
   ete essaye d'abord, mais a 15 px dans le bandeau il se lisait comme un
   bloc plein, les deux triangles noirs prenant le dessus sur le trait.

   Deux barres obliques restent nettes a toute taille. Dessine en CSS (pas
   de SVG a repeter dans chaque marquee), il herite de currentColor et suit
   donc le fond sur lequel il est pose. */
.neo-glyph {
  position: relative;
  flex: none;
  display: inline-block;
  width: .68em;
  height: .92em;
  vertical-align: -.1em;
}
.neo-glyph::before,
.neo-glyph::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: .19em;
  background: currentColor;
  /* skewX plutot que rotate : les barres restent pleine hauteur et dans la
     boite, donc l'alignement sur la ligne de texte ne bouge pas. */
  transform: skewX(20deg);
}
.neo-glyph::before { left: 0; }
.neo-glyph::after  { right: 0; }

/* --- Rotations « sticker » --------------------------------------------- */
.neo-rot-1  { transform: rotate(1deg); }
.neo-rot-2  { transform: rotate(2deg); }
.neo-rot-3  { transform: rotate(3deg); }
.neo-rot-n1 { transform: rotate(-1deg); }
.neo-rot-n2 { transform: rotate(-2deg); }
.neo-rot-n3 { transform: rotate(-3deg); }

/* --- Boutons -----------------------------------------------------------
   Le geste central du systeme : au clic, le bouton se deplace exactement de
   l'offset de son ombre et l'ombre disparait. Il s'enfonce, physiquement. */
.neo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: var(--neo-b) solid var(--neo-ink);
  border-radius: 0;
  background: var(--neo-paper);
  color: var(--neo-ink);
  box-shadow: var(--neo-sh-sm);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: transform .1s linear, box-shadow .1s linear, background-color .1s linear;
}
.neo-btn:hover  { box-shadow: 7px 7px 0 0 var(--neo-ink); transform: translate(-2px, -2px); }
.neo-btn:active { box-shadow: 0 0 0 0 var(--neo-ink); transform: translate(4px, 4px); }
.neo-btn--accent    { background: var(--neo-accent); }
.neo-btn--secondary { background: var(--neo-secondary); }
.neo-btn--ink       { background: var(--neo-ink); color: var(--neo-bg); }
.neo-btn--ink:hover { background: var(--neo-accent); color: var(--neo-ink); }
.neo-btn--lg        { min-height: 64px; padding: 0 30px; font-size: 17px; box-shadow: var(--neo-sh-md); }
.neo-btn--lg:hover  { box-shadow: 11px 11px 0 0 var(--neo-ink); }
.neo-btn--lg:active { box-shadow: none; transform: translate(8px, 8px); }
.neo-btn svg { flex: none; }

/* Sur fond noir, une ombre noire est invisible : elle passe en couleur. */
.neo-dark .neo-btn {
  background: var(--neo-bg);
  border-color: var(--neo-bg);
  box-shadow: 6px 6px 0 0 var(--neo-accent);
}
.neo-dark .neo-btn:hover  { background: var(--neo-secondary); box-shadow: 9px 9px 0 0 var(--neo-accent); transform: translate(-2px, -2px); }
.neo-dark .neo-btn:active { box-shadow: none; transform: translate(6px, 6px); }

/* --- Cartes ------------------------------------------------------------
   Au survol, la carte se souleve et son ombre grandit : elle decolle de la
   page au lieu de s'eclairer. */
.neo-card {
  position: relative;
  background: var(--neo-paper);
  border: var(--neo-b) solid var(--neo-ink);
  box-shadow: var(--neo-sh-md);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.neo-card--lift:hover,
.neo-card--lift:focus-within {
  transform: translateY(-6px);
  box-shadow: 14px 14px 0 0 var(--neo-ink);
}
.neo-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: var(--neo-b) solid var(--neo-ink);
  background: var(--neo-muted);
}
.neo-card__body { padding: clamp(20px, 2.4vw, 28px); }

/* --- Etiquettes et badges ---------------------------------------------- */
.neo-tag {
  display: inline-block;
  padding: 5px 11px;
  border: var(--neo-b-thin) solid var(--neo-ink);
  background: var(--neo-bg);
  font-family: var(--neo-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.neo-tag--accent { background: var(--neo-accent); }
.neo-tag--fill   { background: var(--neo-secondary); }
.neo-tag--muted  { background: var(--neo-muted); }

.neo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: var(--neo-b) solid var(--neo-ink);
  background: var(--neo-accent);
  box-shadow: var(--neo-sh-sm);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.neo-badge--pill { border-radius: 999px; }

/* Pastille « disponible » : le point clignote, le reste non. */
.neo-dot {
  flex: none;
  width: 11px; height: 11px;
  border: 2px solid var(--neo-ink);
  border-radius: 999px;
  background: #16A34A;
  animation: neo-blink 1.6s steps(1, end) infinite;
}

/* --- Bandeau defilant --------------------------------------------------
   Deux pistes identiques cote a cote ; on translate de -50 %, la boucle est
   invisible. Aucune librairie. */
.neo-marquee {
  overflow: hidden;
  border-block: var(--neo-b) solid var(--neo-ink);
  background: var(--neo-accent);
  user-select: none;
}
.neo-marquee__track {
  display: flex;
  width: max-content;
  animation: neo-scroll 42s linear infinite;
}
.neo-marquee:hover .neo-marquee__track { animation-play-state: paused; }
.neo-marquee__set {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 11px 13px;
  font-size: 15px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.neo-marquee--ink    { background: var(--neo-ink); color: var(--neo-bg); }
.neo-marquee--yellow { background: var(--neo-secondary); }
.neo-marquee--rev .neo-marquee__track { animation-direction: reverse; }

/* --- Selecteur segmente (EN / FR) -------------------------------------- */
.neo-seg {
  display: flex;
  flex: none;
  border: var(--neo-b) solid var(--neo-ink);
  box-shadow: var(--neo-sh-sm);
  background: var(--neo-paper);
}
.neo-seg button {
  padding: 7px 11px;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background-color .1s linear;
}
.neo-seg button + button { border-left: var(--neo-b-thin) solid var(--neo-ink); }
.neo-seg button:hover { background: var(--neo-muted); }
.neo-seg button[aria-pressed="true"] { background: var(--neo-ink); color: var(--neo-bg); }

/* --- Formes decoratives ------------------------------------------------
   Purement ornementales : aria-hidden cote HTML, pointer-events desactives
   pour ne jamais voler un clic. */
.neo-shape {
  position: absolute;
  border: var(--neo-b) solid var(--neo-ink);
  pointer-events: none;
  z-index: 0;
}
.neo-shape--circle { border-radius: 999px; }

/* --- Sections sombres -------------------------------------------------- */
.neo-dark { background: var(--neo-ink); color: var(--neo-bg); }
.neo-dark .neo-tag { background: transparent; border-color: var(--neo-bg); }

/* --- Revelation au scroll ---------------------------------------------- */
.neo-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.neo-reveal.is-in { opacity: 1; transform: none; }

/* --- Animations -------------------------------------------------------- */
@keyframes neo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes neo-spin   { to { transform: rotate(360deg); } }
@keyframes neo-blink  { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
@keyframes neo-float  {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(var(--r, 0deg)); }
}
.neo-spin  { animation: neo-spin 16s linear infinite; }
.neo-float { animation: neo-float 6s ease-in-out infinite; }

/* Le mouvement est un agrement, jamais une condition de lecture : tout se
   coupe proprement, et .neo-reveal doit rester visible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .neo-reveal { opacity: 1; transform: none; }
}

/* --- Adaptations mobiles ----------------------------------------------
   On reduit les ombres et les bordures d'un cran, jamais l'esthetique : pas
   de repli vers une interface « mobile generique ». */
@media (max-width: 640px) {
  :root {
    --neo-b: 3px;
    --neo-sh-sm: 3px 3px 0 0 var(--neo-ink);
    --neo-sh-md: 6px 6px 0 0 var(--neo-ink);
    --neo-sh-lg: 8px 8px 0 0 var(--neo-ink);
    --neo-sh-xl: 10px 10px 0 0 var(--neo-ink);
  }
  .neo-btn { width: 100%; }
  .neo-btn--auto { width: auto; }
  .neo-head__no { width: 46px; height: 46px; font-size: 17px; }
}