/* Polices servies en fichiers plutôt qu'en base64 : le CSS passe de 218 Ko à ~9 Ko,
   décisif sur un site de 18 pages. Seules les graisses réellement utilisées sont déclarées. */
@font-face{font-family:'Aileron';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/Aileron-Light.woff2') format('woff2');}
@font-face{font-family:'Aileron';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Aileron-Regular.woff2') format('woff2');}
@font-face{font-family:'Aileron';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/Aileron-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Lexend Exa';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/LexendExa-var.woff2') format('woff2-variations');}

/* ==========================================================================
   Compagnie NAO — Design tokens
   Source : Charte Graphique NAO (Margaux Legru)
   Toute valeur de ce fichier est la seule source de vérité du site.
   ========================================================================== */

:root {
  /* --- Couleurs primaires ------------------------------------------------ */
  --nao-rouge:  #DC1E1E;
  --nao-jaune:  #FFC900;
  --nao-bleu:   #006BBF;

  /* --- Couleurs secondaires ---------------------------------------------- */
  --nao-gris:   #ECECEC;
  --nao-creme:  #FEECC7;
  --nao-noir:   #262626;
  --nao-blanc:  #FFFFFF;

  /* --- Rôles sémantiques (thème clair, par défaut) ----------------------- */
  --nao-bg:            var(--nao-blanc);   /* fond de contenu, logo tricolore OK */
  --nao-bg-ambiance:   var(--nao-creme);   /* héros, respirations, motifs        */
  --nao-bg-sourd:      var(--nao-gris);    /* zones neutres, champs désactivés   */
  --nao-surface:       var(--nao-blanc);
  --nao-texte:         var(--nao-noir);
  --nao-texte-faible:  #5C5C5C;            /* légendes — 6.4:1 sur blanc         */
  --nao-bordure:       var(--nao-noir);
  --nao-bordure-fine:  rgba(38, 38, 38, .18);
  --nao-accent:        var(--nao-bleu);
  --nao-accent-vif:    var(--nao-rouge);
  --nao-focus:         var(--nao-bleu);

  /* --- Typographie -------------------------------------------------------- */
  --nao-font-titre: 'Lexend Exa', 'Trebuchet MS', system-ui, sans-serif;
  --nao-font-texte: 'Aileron', 'Helvetica Neue', system-ui, sans-serif;

  /* Échelle fluide. Références charte : titre 56pt, sous-titre 48pt,
     texte courant 18pt, en-tête / pied de page 14pt. */
  --nao-t-display: clamp(2.75rem, 6vw, 4.5rem);
  --nao-t-h1:      clamp(2.25rem, 4.5vw, 3.5rem);   /* 56pt */
  --nao-t-h2:      clamp(1.75rem, 3.4vw, 3rem);     /* 48pt */
  --nao-t-h3:      clamp(1.375rem, 2vw, 1.75rem);
  --nao-t-h4:      1.25rem;
  --nao-t-corps:   1.125rem;                        /* 18pt */
  --nao-t-petit:   0.9375rem;
  --nao-t-micro:   0.875rem;                        /* 14pt */

  --nao-lh-titre:  1.05;
  --nao-lh-corps:  1.6;

  /* Lexend Exa est déjà très large : on resserre les grandes tailles
     et on ouvre au contraire les capitales de petite taille. */
  --nao-ls-display: -0.02em;
  --nao-ls-titre:   -0.01em;
  --nao-ls-micro:    0.16em;

  --nao-fw-thin:   100;   /* légendes */
  --nao-fw-light:  300;
  --nao-fw-normal: 400;
  --nao-fw-semi:   600;
  --nao-fw-bold:   700;

  /* --- Espacement (base 4px) ---------------------------------------------- */
  --nao-e-1:  0.25rem;
  --nao-e-2:  0.5rem;
  --nao-e-3:  0.75rem;
  --nao-e-4:  1rem;
  --nao-e-5:  1.5rem;
  --nao-e-6:  2rem;
  --nao-e-7:  3rem;
  --nao-e-8:  4rem;
  --nao-e-9:  6rem;
  --nao-e-10: 8rem;

  /* --- Grille ------------------------------------------------------------- */
  --nao-largeur-max:    1280px;
  --nao-largeur-texte:  68ch;
  --nao-gouttiere:      var(--nao-e-5);
  --nao-marge-page:     clamp(1.25rem, 5vw, 5rem);

  /* --- Rayons -------------------------------------------------------------
     Le Bauhaus de la charte n'arrondit que les extrémités de trait.
     Les blocs restent francs ; la pilule reprend le terminal rond du logo. */
  --nao-r-net:    0;
  --nao-r-doux:   4px;
  --nao-r-carte:  12px;
  --nao-r-pilule: 999px;

  /* --- Traits (vocabulaire graphique du motif) ---------------------------- */
  --nao-trait:        2px;
  --nao-trait-epais:  3px;
  --nao-trait-ecart:  4px;   /* écart entre lignes parallèles */
  --nao-point:        16px;  /* diamètre du point terminal    */

  /* --- Mouvement ---------------------------------------------------------- */
  --nao-duree-court: 140ms;
  --nao-duree:       260ms;
  --nao-duree-long:  520ms;
  --nao-courbe:      cubic-bezier(.2, .7, .3, 1);
}

/* Thème sombre : la charte l'autorise via le logo blanc / crème en défonce.
   À appliquer sur une section (`.nao-sombre`) ou sur <html data-theme="sombre">. */
.nao-sombre,
:root[data-theme='sombre'] {
  --nao-bg:           var(--nao-noir);
  --nao-bg-ambiance:  #1B1B1B;
  --nao-bg-sourd:     #333333;
  --nao-surface:      #303030;
  --nao-texte:        var(--nao-creme);
  --nao-texte-faible: #B9B2A4;
  --nao-bordure:      var(--nao-creme);
  --nao-bordure-fine: rgba(254, 236, 199, .22);
  --nao-accent:       var(--nao-jaune);   /* le bleu ne passe pas sur noir (2.8:1) */
  --nao-accent-vif:   var(--nao-jaune);
  --nao-focus:        var(--nao-jaune);
}

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

body {
  margin: 0;
  background: var(--nao-bg);
  color: var(--nao-texte);
  font-family: var(--nao-font-texte);
  font-size: var(--nao-t-corps);
  line-height: var(--nao-lh-corps);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--nao-font-titre);
  line-height: var(--nao-lh-titre);
  letter-spacing: var(--nao-ls-titre);
  font-weight: var(--nao-fw-normal);
  margin: 0 0 var(--nao-e-4);
}

h1 { font-size: var(--nao-t-h1); }
h2 { font-size: var(--nao-t-h2); }
h3 { font-size: var(--nao-t-h3); }
h4 { font-size: var(--nao-t-h4); }

p { margin: 0 0 var(--nao-e-4); max-width: var(--nao-largeur-texte); }

/* Surtitre / en-tête / pied de page : Lexend Exa 14pt, capitales espacées. */
.nao-surtitre {
  font-family: var(--nao-font-titre);
  font-size: var(--nao-t-micro);
  letter-spacing: var(--nao-ls-micro);
  text-transform: uppercase;
  font-weight: var(--nao-fw-normal);
}

/* Légende : Aileron Thin, comme dans la charte. */
.nao-legende {
  font-weight: var(--nao-fw-thin);
  font-size: var(--nao-t-petit);
  color: var(--nao-texte-faible);
}

a { color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--nao-trait-epais) solid var(--nao-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Motifs de marque réutilisables
   -------------------------------------------------------------------------- */

/* Filet à points : trois lignes parallèles terminées par un point rond.
   <div class="nao-filet rouge"><div class="lignes"></div><div class="point"></div></div>
   Le point peut être placé avant ou après les lignes. */
.nao-filet { display: flex; align-items: center; height: var(--nao-point); }

.nao-filet .lignes {
  --trait: var(--nao-noir);
  flex: 1;
  height: 14px;
  background:
    linear-gradient(var(--trait), var(--trait)) 0 0    / 100% var(--nao-trait) no-repeat,
    linear-gradient(var(--trait), var(--trait)) 0 50%  / 100% var(--nao-trait) no-repeat,
    linear-gradient(var(--trait), var(--trait)) 0 100% / 100% var(--nao-trait) no-repeat;
}

.nao-filet .point {
  flex: none;
  width: var(--nao-point);
  height: var(--nao-point);
  border-radius: var(--nao-r-pilule);
  background: var(--nao-noir);
}

.nao-filet.rouge .point { background: var(--nao-rouge); }
.nao-filet.jaune .point { background: var(--nao-jaune); }
.nao-filet.bleu  .point { background: var(--nao-bleu); }

/* Sur fond sombre */
.nao-filet.inverse .lignes { --trait: var(--nao-creme); }
.nao-filet.inverse .point  { background: var(--nao-creme); }
.nao-filet.inverse.jaune .point { background: var(--nao-jaune); }

/* Trame diagonale du moodboard — fond de section, jamais sous du texte. */
.nao-rayures {
  background-color: var(--nao-creme);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--nao-noir) 0 3px,
    transparent 3px 14px
  );
}