/* =========================================================================
   ATLANTIS, le socle de design, repris de newera.

   D'OU CA VIENT. Ce fichier est un SOUS-ENSEMBLE de
   newera.atlantisstrength.app/assets/css/tokens.css et styles.css, recopie le
   2026-09-04 : les jetons de couleur, de type, d'espacement, et les quelques
   primitives que la page d'accueil utilise (eyebrow, titre de section, bouton,
   lien flechu). Rien n'y a ete invente.

   CE N'EST PAS UNE DEPENDANCE, C'EST UNE COPIE, et il faut le savoir avant d'y
   toucher : les deux depots vivent leur vie separement, comme le verificateur
   vectoriel repris d'imagine. Une correction faite sur newera ne descend pas
   ici toute seule. Le jour ou la marque bouge, ce sont DEUX fichiers a changer.
   On a prefere ca a un lien vers un autre vhost, qu'un navigateur refuserait
   pour les polices (origine differente, pas d'en-tete CORS) et qui casserait
   cette page le jour ou newera bouge un chemin.

   LES POLICES SONT SERVIES PAR CE SERVEUR, ET C'EST UNE REGLE, PAS UN GOUT.
   Newera avait un @import vers fonts.googleapis.com : a chaque ouverture de
   page, le navigateur du visiteur transmettait a Google LLC son adresse IP,
   son User-Agent et l'adresse de la page lue, avant toute action de sa part.
   Un destinataire non declare (RGPD art. 13(1)(e)) et un transfert hors UE
   (art. 44), pour trois familles de caracteres. Newera l'a retire ; cette page
   ne le refait pas.

   ATTENTION, LES TROIS AUTRES PAGES DE CE VHOST LE FONT ENCORE. check-vector,
   platform et gabarit chargent toujours Archivo Black et DM Sans depuis
   fonts.googleapis.com. Ce n'est pas un oubli de ce fichier, c'est un chantier
   qui n'a pas ete fait ici : voir ETAT-EXPLOITATION.md, section 9.
   ========================================================================= */

/* -------------------------------------------------------------------------
   LES POLICES

   Antonio, Archivo et JetBrains Mono sont sous licence libre (OFL) et
   arrivent en woff2, sous-ensembles latin et latin-ext, en fontes variables.

   INTEGRAL CF EST UNE POLICE COMMERCIALE, ce n'est pas la meme chose. C'est la
   coupe d'affichage de la marque Atlantis, celle du mot-symbole, et elle est
   deja sur ce serveur pour newera. La recopier ici, c'est le meme proprietaire
   qui sert sa propre marque sur son propre serveur ; si la licence doit etre
   verifiee pour un deuxieme domaine, c'est Clement qui tranche. La chaine de
   repli est ecrite pour que la page tienne debout sans elle : Antonio prend le
   relais, c'est d'ailleurs la police d'affichage que le systeme de design de
   newera declare officiellement.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Antonio'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/antonio-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: 'Antonio'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/antonio-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;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/archivo-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: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/archivo-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;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/jetbrains-mono-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: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/jetbrains-mono-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;
}
@font-face { font-family: 'Integral CF'; src: url('fonts/IntegralCF-Bold.otf')      format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Integral CF'; src: url('fonts/IntegralCF-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Integral CF'; src: url('fonts/IntegralCF-Heavy.otf')     format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* --- Les trois couleurs qui portent la marque ------------------------- */
  --atl-red:      #C22032;   /* accent seulement, jamais plus de 20 % d'une composition */
  --atl-red-deep: #951625;
  --atl-red-soft: #E84658;

  /* --- L'echelle de gris, la vraie charpente ---------------------------- */
  --atl-ink-1000: #000000;
  --atl-ink-900:  #0B0B0C;
  --atl-ink-800:  #161618;
  --atl-ink-700:  #232327;
  --atl-ink-600:  #36363B;
  --atl-ink-500:  #55555B;
  --atl-ink-400:  #7A7A80;
  --atl-ink-300:  #A8A8AD;
  --atl-ink-200:  #D2D2D5;
  --atl-ink-100:  #EFEFF1;
  --atl-ink-0:    #FFFFFF;

  /* --- Familles ---------------------------------------------------------
     Le mot-symbole Atlantis est une coupe d'affichage sur mesure. Integral CF
     en est la coupe web ; Antonio est le repli declare par le systeme.       */
  --font-display: 'Integral CF', 'Antonio', 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* --- Approche : l'affichage se resserre, les surtitres s'ouvrent ------- */
  --track-display: -0.01em;
  --track-tight:   -0.015em;
  --track-wide:     0.06em;
  --track-eyebrow:  0.18em;

  /* --- Espacement, base 4 pt, genereux vers le haut --------------------- */
  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* --- Rayons : Atlantis est architectural, les coins restent nets ------ */
  --r-0: 0px;  --r-1: 2px;  --r-2: 4px;

  /* --- Mouvement, retenu. Aucun rebond. --------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-quick:   120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  --container: 1320px;

  /* --- Jetons semantiques, VERSION SOMBRE ------------------------------
     Le socle de newera est clair par defaut et bascule en sombre pour ses
     heros. Ici, la page entiere est sombre : les trois outils du site le sont
     deja, et un accueil clair qui ouvre sur trois pages noires ferait deux
     sites. On pose donc directement les valeurs inverses.                   */
  --bg:        var(--atl-ink-1000);
  --bg-alt:    var(--atl-ink-900);
  --surface:   var(--atl-ink-900);
  --surface-2: var(--atl-ink-800);
  --fg:        var(--atl-ink-0);
  --fg-2:      var(--atl-ink-200);
  --fg-3:      var(--atl-ink-300);
  --fg-4:      var(--atl-ink-400);
  --rule:      var(--atl-ink-700);
  --rule-2:    var(--atl-ink-800);
  --accent:    var(--atl-red);
  --accent-fg: var(--atl-ink-0);
}

/* ========================== Remise a zero ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
/* L'attribut hidden doit gagner sur tout display pose par une classe. Meme
   defaut que celui trouve chez imagine en septembre : une boite d'erreur en
   display:flex restait visible sous son hidden. */
[hidden] { display: none !important; }

/* ============================== Structure ============================== */
.wrap {
  width: min(100% - 48px, var(--container));
  margin-inline: auto;
}
@media (min-width: 900px)  { .wrap { width: min(100% - 96px, var(--container)); } }
@media (min-width: 1280px) { .wrap { width: min(100% - 144px, var(--container)); } }

/* ============================= Primitives ============================== */

/* Le surtitre : un trait rouge de 26 pt, puis des capitales tres espacees. */
.eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--fg-3); display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; flex: 0 0 auto; }
.eyebrow--center { justify-content: center; }

/* Les titres d'affichage restent EN CAPITALES, resserres. */
.section-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 4vw, 56px); line-height: 0.98; letter-spacing: var(--track-tight);
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 44px; flex-wrap: wrap;
}

/* Les boutons : angles vifs, capitales, 13 px. */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  padding: 16px 28px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--r-0); white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
.btn--red   { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--red:hover { background: var(--atl-red-deep); border-color: var(--atl-red-deep); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--ghost:hover { background: #fff; color: var(--atl-ink-1000); border-color: #fff; }

/* Le lien flechu, pour les fins de carte. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: 12px;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--fg);
}
.link-arrow svg { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover svg, a:hover .link-arrow svg { transform: translate(3px, -3px); }

/* Le focus se voit, partout, et il n'est jamais retire. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}