/* ==========================================================================
   Anthony Jato Wirth - Feuille de styles
   Basée sur les design tokens v1.0
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600&family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Neutres */
  --ajw-encre-900: #171A1C;
  --ajw-encre-800: #2A2F33;
  --ajw-neutre-700: #3E4340;
  --ajw-neutre-500: #6C716D;
  --ajw-neutre-400: #8E938F;
  --ajw-neutre-300: #B7BAB4;
  --ajw-neutre-200: #DCDCD5;
  --ajw-neutre-100: #EDEBE5;
  --ajw-papier: #F7F5F0;
  --ajw-blanc: #FFFFFF;

  /* Accent */
  --ajw-sapin-700: #1A3B2E;
  --ajw-sapin-600: #24503F;
  --ajw-sapin-400: #4E8C72;
  --ajw-sapin-100: #E4EDE7;

  /* Rôles */
  --ajw-fond: var(--ajw-papier);
  --ajw-surface: var(--ajw-blanc);
  --ajw-texte: var(--ajw-encre-900);
  --ajw-texte-2: var(--ajw-neutre-700);
  --ajw-texte-3: var(--ajw-neutre-500);
  --ajw-accent: var(--ajw-sapin-600);
  --ajw-accent-fort: var(--ajw-sapin-700);
  --ajw-bordure: var(--ajw-neutre-200);

  /* Typographie */
  --ajw-font-titre: Spectral, "Source Serif 4", Georgia, serif;
  --ajw-font-texte: Inter, "Helvetica Neue", Arial, sans-serif;
  --ajw-font-data: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  --ajw-taille-display: 44px;
  --ajw-taille-h1: 34px;
  --ajw-taille-h2: 27px;
  --ajw-taille-h3: 21px;
  --ajw-taille-body: 16px;
  --ajw-taille-body-sm: 14px;
  --ajw-taille-caption: 13px;
  --ajw-taille-label: 12px;
  --ajw-taille-data: 15px;
  --ajw-taille-data-lg: 30px;

  /* Espacement */
  --ajw-espace-1: 4px;
  --ajw-espace-2: 8px;
  --ajw-espace-3: 12px;
  --ajw-espace-4: 16px;
  --ajw-espace-5: 24px;
  --ajw-espace-6: 32px;
  --ajw-espace-7: 48px;
  --ajw-espace-8: 64px;
  --ajw-espace-9: 96px;

  /* ------------------------------------------------------------------
     NORME D'ESPACEMENT VERTICAL
     ------------------------------------------------------------------
     Quatre niveaux de respiration, quatre variables. Toute séparation
     verticale d'une page vient de l'une des quatre. En dessous du
     niveau 4, on utilise directement l'échelle --ajw-espace-*.

       N1  section  96 / 64   entre deux bandes de premier niveau,
                              entre deux missions, entre deux étapes
                              de projet
       N2  partie   64 / 48   entre deux parties d'un article (h2)
       N3  bloc     48 / 32   entre deux blocs d'une même section
                              (grilles, encadrés, indicateurs)
       N4  titre    32        d'un titre à son contenu

     RÈGLE DU DEMI-ESPACE. Une bande de premier niveau ne porte jamais
     de marge : elle porte la MOITIÉ de N1 en padding haut et bas
     (--ajw-demi-section). Deux bandes voisines produisent donc toujours
     N1 exactement, quels que soient leur ordre et leur fond, et une
     bande colorée reste symétrique. Corollaire : aucun sélecteur « + »
     n'est nécessaire pour rattraper un cumul.

     Même principe pour un bloc séparé par un filet : la moitié
     au-dessus du filet (margin-top), la moitié en dessous
     (padding-top). Le filet tombe au milieu de la respiration.

     AUCUNE EXCEPTION. Toutes les bandes portent le même padding, y
     compris celle qui ouvre la page et le pied. Une bande ne se
     distingue jamais par son espacement, seulement par son fond.
     ------------------------------------------------------------------ */
  --ajw-rythme-section: var(--ajw-espace-9);   /* N1  96px */
  --ajw-rythme-partie: var(--ajw-espace-8);    /* N2  64px */
  --ajw-rythme-bloc: var(--ajw-espace-7);      /* N3  48px */
  --ajw-rythme-titre: var(--ajw-espace-6);     /* N4  32px */

  /* Dérivée de N1, jamais saisie à la main : c'est elle qu'on applique
     sur les bandes et de part et d'autre des filets. */
  --ajw-demi-section: calc(var(--ajw-rythme-section) / 2);

  /* Formes */
  --ajw-rayon-1: 2px;
  --ajw-rayon-2: 4px;

  /* Mesure de lecture */
  --ajw-mesure: 68ch;
  --ajw-largeur-page: 880px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ajw-fond);
  color: var(--ajw-texte);
  font-family: var(--ajw-font-texte);
  font-size: var(--ajw-taille-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--ajw-font-titre);
  font-weight: 500;
  margin: 0;
}

h1 {
  font-size: var(--ajw-taille-h1);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--ajw-taille-h2);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--ajw-font-texte);
  font-weight: 500;
  font-size: var(--ajw-taille-h3);
  line-height: 1.35;
  margin: 0;
}

h4 {
  font-family: var(--ajw-font-texte);
  font-weight: 500;
  font-size: var(--ajw-taille-body);
  line-height: 1.4;
  margin: 0;
}

p { margin: 0 0 var(--ajw-espace-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--ajw-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--ajw-neutre-200);
  transition: border-color 0.15s ease, color 0.15s ease;
}

a:hover {
  color: var(--ajw-accent-fort);
  border-bottom-color: var(--ajw-accent);
}

*:focus-visible {
  outline: 2px solid var(--ajw-accent);
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */

.conteneur {
  max-width: var(--ajw-largeur-page);
  margin: 0 auto;
  padding: 0 var(--ajw-espace-5);
}

.mesure { max-width: var(--ajw-mesure); }

.data {
  font-family: var(--ajw-font-data);
  font-variant-numeric: tabular-nums;
}

.etiquette {
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  margin: 0 0 var(--ajw-espace-4);
}

.texte-2 { color: var(--ajw-texte-2); }
.texte-3 { color: var(--ajw-texte-3); }
.petit { font-size: var(--ajw-taille-body-sm); }
.legende { font-size: var(--ajw-taille-caption); color: var(--ajw-texte-3); }

/* Élément signature : l'axe */
.axe {
  border: 0;
  border-top: 1px solid var(--ajw-accent);
  position: relative;
  margin: var(--ajw-espace-5) 0;
}

.axe::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--ajw-accent);
}

.axe-court { max-width: 220px; }

/* Filet de séparation : demi-respiration de part et d'autre (N1) */
.filet {
  border: 0;
  border-top: 1px solid var(--ajw-bordure);
  margin: var(--ajw-demi-section) 0;
}

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.entete {
  border-bottom: 1px solid var(--ajw-bordure);
  background: var(--ajw-fond);
  position: sticky;
  top: 0;
  z-index: 10;
}

.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ajw-espace-5);
  padding-top: var(--ajw-espace-4);
  padding-bottom: var(--ajw-espace-4);
}

.marque {
  font-family: var(--ajw-font-titre);
  font-weight: 500;
  font-size: var(--ajw-taille-body);
  color: var(--ajw-texte);
  border: 0;
  letter-spacing: -0.01em;
}

.marque:hover { color: var(--ajw-accent); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--ajw-espace-5);
  font-size: var(--ajw-taille-body-sm);
}

/* Liens de navigation : groupe distinct des contrôles pour pouvoir se
   replier en menu déroulant sur mobile sans emporter thème/langue. */
.nav-liens {
  display: flex;
  align-items: center;
  gap: var(--ajw-espace-5);
}

.nav a {
  color: var(--ajw-texte-2);
  border: 0;
}

.nav a:hover { color: var(--ajw-accent); }

/* --------------------------------------------------------------------------
   Bouton
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-block;
  padding: var(--ajw-espace-3) var(--ajw-espace-5);
  background: var(--ajw-accent);
  color: var(--ajw-papier);
  font-size: var(--ajw-taille-body-sm);
  font-weight: 500;
  border: 1px solid var(--ajw-accent);
  border-radius: var(--ajw-rayon-1);
  transition: background 0.15s ease;
}

.bouton:hover {
  background: var(--ajw-accent-fort);
  border-color: var(--ajw-accent-fort);
  color: var(--ajw-papier);
}

.bouton-secondaire {
  background: transparent;
  color: var(--ajw-accent);
  border-color: var(--ajw-bordure);
}

.bouton-secondaire:hover {
  background: var(--ajw-sapin-100);
  color: var(--ajw-accent-fort);
  border-color: var(--ajw-accent);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

/* Règle du demi-espace : chaque bande porte la moitié de N1 en haut
   et en bas. Deux bandes voisines valent donc toujours N1. */
.section {
  padding: var(--ajw-demi-section) 0;
}

.section-titre {
  margin-bottom: var(--ajw-rythme-titre);
}

/* --------------------------------------------------------------------------
   Accueil
   -------------------------------------------------------------------------- */

/* Bande d'ouverture : demi-espace comme toutes les bandes (N1) */
.accroche {
  padding: var(--ajw-demi-section) 0;
  position: relative;
  overflow: hidden;
}

/* Trame de fond : la grille reprend le motif de l'axe. Elle donne de la
   matière au premier écran sans une ligne de texte de plus, et s'efface en
   fondu pour ne jamais concurrencer le titre. */
.accroche::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--ajw-bordure) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ajw-bordure) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(90% 75% at 6% -10%, #000 0%, transparent 72%);
  mask-image: radial-gradient(90% 75% at 6% -10%, #000 0%, transparent 72%);
  opacity: 0.4;
  pointer-events: none;
}

.accroche > .conteneur { position: relative; }

/* Ligne d'identité : ce que le H1 ne porte plus. */
.identite {
  display: flex;
  align-items: center;
  gap: var(--ajw-espace-3);
  margin: 0 0 var(--ajw-espace-5);
  font-size: var(--ajw-taille-body-sm);
  line-height: 1.35;
}

/* Réservé au mobile, où la colonne portrait n'existe plus. */
.identite-avatar {
  display: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: grayscale(1);
  flex: none;
}

.identite-nom {
  font-family: var(--ajw-font-titre);
  font-weight: 500;
  color: var(--ajw-texte);
}

.identite-role { color: var(--ajw-texte-3); }

.identite-role::before {
  content: "·";
  margin-right: var(--ajw-espace-2);
  color: var(--ajw-neutre-300);
}

.accroche-titre {
  font-family: var(--ajw-font-titre);
  font-weight: 500;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

/* Point de fixation : un seul mot porte l'accent. */
.accroche-titre em {
  font-style: normal;
  color: var(--ajw-accent);
}

.accroche .axe {
  max-width: 200px;
  margin: var(--ajw-espace-5) 0;
}

/* Un seul énoncé, en taille de chapô : c'est ce qui remplace les trois
   paragraphes d'introduction. */
.accroche-sous-titre {
  max-width: 46ch;
  font-size: var(--ajw-taille-h3);
  line-height: 1.5;
  color: var(--ajw-texte-2);
  margin: 0;
}

.statut {
  display: flex;
  /* La pastille s'aligne sur la première ligne, pas sur le milieu du bloc :
     le texte passe sur deux lignes en mobile. */
  align-items: flex-start;
  gap: var(--ajw-espace-2);
  margin: var(--ajw-espace-5) 0 0;
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-texte-3);
}

.statut-point {
  position: relative;
  flex: none;
  margin-top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ajw-accent);
}

.statut-point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ajw-accent);
}

/* Repères : quatre faits en remplacement de la prose. */
.reperes {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ajw-espace-5);
  list-style: none;
  margin: 0;
  padding: var(--ajw-espace-5) 0 0;
  border-top: 1px solid var(--ajw-bordure);
}

/* Le tic de l'axe, posé sur le filet des repères */
.reperes::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--ajw-accent);
}

.repere-cle {
  display: block;
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  margin-bottom: var(--ajw-espace-1);
}

.repere-valeur {
  display: block;
  font-size: var(--ajw-taille-body-sm);
  line-height: 1.45;
  color: var(--ajw-texte);
  text-wrap: pretty;
}

.repere-valeur.data {
  font-size: var(--ajw-taille-data);
  color: var(--ajw-accent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ajw-espace-3);
  margin-top: var(--ajw-espace-6);
}

/* --------------------------------------------------------------------------
   Mouvement de l'accroche
   Entrée en cascade et pastille de disponibilité. Tout est enfermé dans
   prefers-reduced-motion : sans mouvement autorisé, aucune règle ne
   s'applique et le premier écran s'affiche tel quel.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .accroche-corps > *,
  .accroche .portrait,
  .reperes {
    animation: apparition 0.7s cubic-bezier(0.22, 0.7, 0.3, 1) both;
  }

  .accroche-corps > :nth-child(1) { animation-delay: 0.04s; }
  .accroche-corps > :nth-child(2) { animation-delay: 0.10s; }
  .accroche-corps > :nth-child(3) { animation-delay: 0.16s; }
  .accroche-corps > :nth-child(4) { animation-delay: 0.22s; }
  .accroche-corps > :nth-child(5) { animation-delay: 0.28s; }
  .accroche-corps > :nth-child(6) { animation-delay: 0.34s; }
  .accroche .portrait { animation-delay: 0.16s; }
  .reperes { animation-delay: 0.40s; }

  .statut-point::after { animation: pouls 2.6s ease-out infinite; }
}

@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pouls {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Prestations
   -------------------------------------------------------------------------- */

.grille-prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ajw-rythme-bloc);
  margin-top: var(--ajw-rythme-titre);
}

.prestation h3 {
  margin-bottom: var(--ajw-espace-2);
}

.prestation p {
  color: var(--ajw-texte-2);
  font-size: var(--ajw-taille-body-sm);
}

.prestation-numero {
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-accent);
  display: block;
  margin-bottom: var(--ajw-espace-2);
}

/* --------------------------------------------------------------------------
   Cas d'usage
   -------------------------------------------------------------------------- */

.cas {
  background: var(--ajw-surface);
  border: 1px solid var(--ajw-bordure);
  border-radius: var(--ajw-rayon-2);
  padding: var(--ajw-espace-6);
  margin-bottom: var(--ajw-espace-5);
}

.cas-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ajw-espace-3);
  margin-bottom: var(--ajw-espace-5);
}

.cas-secteur {
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
}

.cas-bloc {
  margin-bottom: var(--ajw-espace-4);
}

.cas-bloc:last-of-type { margin-bottom: 0; }

.cas-bloc h4 {
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  margin-bottom: var(--ajw-espace-1);
}

.cas-bloc p {
  color: var(--ajw-texte-2);
  font-size: var(--ajw-taille-body-sm);
  max-width: var(--ajw-mesure);
}

.cas-decision {
  background: var(--ajw-sapin-100);
  padding: var(--ajw-espace-4);
  border-radius: var(--ajw-rayon-1);
  margin-top: var(--ajw-espace-5);
}

.cas-decision h4 { color: var(--ajw-accent); }

.cas-decision p { color: var(--ajw-texte); }

.cas-lien {
  margin-top: var(--ajw-espace-5);
  font-size: var(--ajw-taille-body-sm);
}

/* --------------------------------------------------------------------------
   Recommandations
   -------------------------------------------------------------------------- */

.reco {
  border-left: 1px solid var(--ajw-accent);
  padding-left: var(--ajw-espace-5);
  margin: 0 0 var(--ajw-rythme-bloc);
  max-width: var(--ajw-mesure);
}

.reco p {
  font-family: var(--ajw-font-titre);
  font-size: var(--ajw-taille-h3);
  line-height: 1.45;
  color: var(--ajw-texte);
  margin-bottom: var(--ajw-espace-4);
}

.reco footer {
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-texte-3);
}

.reco-nom {
  color: var(--ajw-texte);
  font-weight: 500;
  display: block;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-liste {
  list-style: none;
  padding: 0;
  margin: var(--ajw-rythme-bloc) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ajw-espace-4);
}

.contact-cle {
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  margin-bottom: var(--ajw-espace-1);
}

/* --------------------------------------------------------------------------
   Projets secondaires
   -------------------------------------------------------------------------- */

.grille-projets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ajw-espace-5);
  margin-top: var(--ajw-rythme-titre);
}

/* Hauteur égale sur la rangée (comportement grid par défaut) et CTA
   poussé en bas via margin-top: auto, quelle que soit la longueur du texte. */
.projet {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ajw-bordure);
  border-radius: var(--ajw-rayon-2);
  padding: var(--ajw-espace-5);
  background: var(--ajw-surface);
}

.projet > a {
  margin-top: auto;
  align-self: flex-start;
}

.projet h3 {
  font-size: var(--ajw-taille-body);
  margin-bottom: var(--ajw-espace-2);
}

.projet p {
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-texte-2);
  margin-bottom: var(--ajw-espace-4);
}

.projet-stack {
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
  margin-bottom: var(--ajw-espace-4);
}

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

/* Dernière bande : demi-espace comme les autres, aucune marge (N1) */
.pied {
  border-top: 1px solid var(--ajw-bordure);
  padding: var(--ajw-demi-section) 0;
  margin-top: 0;
}

.pied-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ajw-espace-4);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
}

/* --------------------------------------------------------------------------
   Page de cas d'usage
   -------------------------------------------------------------------------- */

/* Bande d'une page intérieure : demi-espace comme toutes les bandes (N1) */
.article {
  padding: var(--ajw-demi-section) 0;
}

.article h1 { margin-bottom: var(--ajw-espace-3); }

/* Nouvelle partie d'article (N2) */
.article h2 {
  font-size: var(--ajw-taille-h2);
  margin: var(--ajw-rythme-partie) 0 var(--ajw-espace-4);
}

/* Sous-partie (N4) */
.article h3 {
  margin: var(--ajw-rythme-titre) 0 var(--ajw-espace-3);
}

.article p,
.article ul,
.article ol {
  max-width: var(--ajw-mesure);
  color: var(--ajw-texte-2);
}

.article ul,
.article ol {
  padding-left: var(--ajw-espace-5);
  margin: 0 0 var(--ajw-espace-4);
}

.article li { margin-bottom: var(--ajw-espace-2); }

.article strong { font-weight: 500; color: var(--ajw-texte); }

.article-meta {
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
  margin-bottom: var(--ajw-espace-5);
}

.retour {
  display: inline-block;
  font-size: var(--ajw-taille-body-sm);
  margin-bottom: var(--ajw-espace-6);
  border: 0;
}

/* Bloc inséré dans le fil du texte (N3) */
.encadre {
  background: var(--ajw-neutre-100);
  border-radius: var(--ajw-rayon-2);
  padding: var(--ajw-espace-5);
  margin: var(--ajw-rythme-bloc) 0;
  max-width: var(--ajw-mesure);
}

.encadre h4 {
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  margin-bottom: var(--ajw-espace-2);
}

.encadre p {
  font-size: var(--ajw-taille-body-sm);
  margin-bottom: 0;
  color: var(--ajw-texte-2);
}

/* Liste de stack technique */
.stack-liste {
  list-style: none;
  padding: 0;
  margin: var(--ajw-espace-4) 0 0;
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ajw-espace-2) var(--ajw-espace-4);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --ajw-taille-display: 32px;
    --ajw-taille-h1: 27px;
    --ajw-taille-h2: 22px;
    --ajw-taille-h3: 18px;

    /* La norme descend d'un cran sur l'échelle. Rien d'autre à toucher :
       toutes les règles d'espacement passent par ces variables. */
    --ajw-rythme-section: var(--ajw-espace-8);   /* N1  64px */
    --ajw-rythme-partie: var(--ajw-espace-7);    /* N2  48px */
    --ajw-rythme-bloc: var(--ajw-espace-6);      /* N3  32px */
  }

  .nav { gap: var(--ajw-espace-4); font-size: var(--ajw-taille-caption); }
}

@media print {
  .entete, .actions, .nav { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   AJOUTS v1.1 : mode sombre, bilingue, portrait, densité visuelle
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mode sombre
   -------------------------------------------------------------------------- */

[data-theme="sombre"] {
  --ajw-fond: #15181A;
  --ajw-surface: #1E2225;
  --ajw-texte: #EDEBE5;
  --ajw-texte-2: #B7BAB4;
  --ajw-texte-3: #8E938F;
  --ajw-accent: #62A585;
  --ajw-accent-fort: #7DBC9C;
  --ajw-bordure: #2E3336;
  --ajw-neutre-100: #23282B;
  --ajw-sapin-100: #1D2E26;
}

[data-theme="sombre"] .bouton {
  color: #15181A;
}

[data-theme="sombre"] .bouton:hover {
  color: #15181A;
}

[data-theme="sombre"] .bouton-secondaire {
  color: var(--ajw-accent);
  background: transparent;
}

[data-theme="sombre"] .bouton-secondaire:hover {
  background: var(--ajw-sapin-100);
  color: var(--ajw-accent-fort);
}

[data-theme="sombre"] .portrait img,
[data-theme="sombre"] .identite-avatar {
  filter: grayscale(1) brightness(0.85) contrast(1.05);
}

/* Bloc inversé : en sombre il ne peut pas prendre --ajw-surface, qui est déjà
   le fond de la bande « Prestations » juste au-dessus. Il garde son rôle de
   bande la plus sombre, avec une pointe de vert qui le rattache à l'accent. */
[data-theme="sombre"] .bloc-inverse {
  background: #0E1512;
  color: var(--ajw-texte);
}

[data-theme="sombre"] .bloc-inverse .etiquette,
[data-theme="sombre"] .bloc-inverse .texte-2 {
  color: var(--ajw-texte-2);
}

/* --------------------------------------------------------------------------
   Contrôles d'en-tête (thème + langue + menu mobile)
   -------------------------------------------------------------------------- */

.controles {
  display: flex;
  align-items: center;
  gap: var(--ajw-espace-2);
  margin-left: var(--ajw-espace-4);
  padding-left: var(--ajw-espace-4);
  border-left: 1px solid var(--ajw-bordure);
}

.controle {
  background: transparent;
  border: 1px solid var(--ajw-bordure);
  border-radius: var(--ajw-rayon-1);
  color: var(--ajw-texte-2);
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-label);
  letter-spacing: 0.04em;
  padding: 5px 9px;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.controle:hover {
  border-color: var(--ajw-accent);
  color: var(--ajw-accent);
}

.controle-theme {
  min-width: 34px;
  font-size: 13px;
}

/* Bouton menu mobile : masqué par défaut, activé au point de rupture (640px) */
.controle-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.icone-burger {
  position: relative;
  display: block;
  width: 15px;
  height: 1px;
  background: currentColor;
  transition: background 0.15s ease;
}

.icone-burger::before,
.icone-burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 1px;
  background: currentColor;
  transition: transform 0.15s ease, top 0.15s ease;
}

.icone-burger::before { top: -5px; }
.icone-burger::after { top: 5px; }

/* Menu ouvert : le burger devient une croix */
.controle-menu[aria-expanded="true"] .icone-burger {
  background: transparent;
}

.controle-menu[aria-expanded="true"] .icone-burger::before {
  top: 0;
  transform: rotate(45deg);
}

.controle-menu[aria-expanded="true"] .icone-burger::after {
  top: 0;
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Accroche enrichie : deux colonnes avec portrait
   -------------------------------------------------------------------------- */

.accroche-grille {
  display: grid;
  grid-template-columns: 1fr 260px;
  column-gap: var(--ajw-espace-8);
  /* La deuxième rangée porte les repères : c'est une séparation de bloc (N3),
     pas la gouttière horizontale des deux colonnes. */
  row-gap: var(--ajw-rythme-bloc);
  align-items: start;
}

.portrait {
  position: relative;
  margin-top: var(--ajw-espace-2);
}

.portrait img {
  width: 100%;
  border-radius: var(--ajw-rayon-2);
  filter: grayscale(1);
}

.portrait-legende {
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
  margin-top: var(--ajw-espace-3);
  padding-top: var(--ajw-espace-3);
  border-top: 1px solid var(--ajw-accent);
  position: relative;
}

.portrait-legende::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--ajw-accent);
}

/* --------------------------------------------------------------------------
   Bloc inversé pleine largeur
   -------------------------------------------------------------------------- */

/* Bande de premier niveau : demi-espace, aucune marge (N1) */
.bloc-inverse {
  background: var(--ajw-encre-900);
  color: var(--ajw-papier);
  padding: var(--ajw-demi-section) 0;
  margin: 0;
}

.bloc-inverse h2 { color: var(--ajw-papier); }

.bloc-inverse .etiquette { color: var(--ajw-neutre-400); }

.bloc-inverse .texte-2 { color: var(--ajw-neutre-300); }

.bloc-inverse a { color: var(--ajw-sapin-400); border-bottom-color: transparent; }
.bloc-inverse a:hover { border-bottom-color: var(--ajw-sapin-400); }

.bloc-inverse .axe { border-top-color: var(--ajw-sapin-400); }
.bloc-inverse .axe::before { background: var(--ajw-sapin-400); }

/* Chiffres clés dans le bloc inversé */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ajw-rythme-bloc);
  margin-top: var(--ajw-rythme-bloc);
}

.chiffre-valeur {
  font-family: var(--ajw-font-data);
  font-weight: 500;
  font-size: var(--ajw-taille-data-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ajw-papier);
  display: block;
  margin-bottom: var(--ajw-espace-2);
}

.bloc-inverse .chiffre-valeur { color: var(--ajw-sapin-400); }

.chiffre-libelle {
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-neutre-300);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Alternance de fond entre sections
   -------------------------------------------------------------------------- */

/* Bande teintée : le demi-espace hérité de .section la rend symétrique,
   aucun rattrapage n'est nécessaire sur la bande suivante. */
.section-surface {
  background: var(--ajw-surface);
  border-top: 1px solid var(--ajw-bordure);
  border-bottom: 1px solid var(--ajw-bordure);
}

/* --------------------------------------------------------------------------
   Prestations enrichies : filet d'accent
   -------------------------------------------------------------------------- */

.prestation {
  padding-top: var(--ajw-espace-4);
  border-top: 1px solid var(--ajw-bordure);
}

/* --------------------------------------------------------------------------
   Responsive des ajouts
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  /* La grille s'empile : le gap devient vertical, donc niveau bloc (N3). */
  .accroche-grille {
    grid-template-columns: 1fr;
    gap: var(--ajw-rythme-bloc);
  }

  /* Le portrait en colonne laisse la place au médaillon de la ligne
     d'identité : le visage reste présent dès le premier écran sans
     repousser le titre sous la ligne de flottaison. */
  .accroche .portrait { display: none; }

  .identite {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--ajw-espace-3);
    row-gap: 0;
    align-items: center;
    margin-bottom: var(--ajw-espace-6);
  }

  .identite-avatar {
    display: block;
    grid-row: 1 / 3;
  }

  .identite-nom { grid-column: 2; align-self: end; }

  .identite-role {
    grid-column: 2;
    align-self: start;
    font-size: var(--ajw-taille-caption);
  }

  .identite-role::before { content: none; }

  .reperes { grid-template-columns: repeat(2, 1fr); }
}

/* Sous 400px les deux boutons ne tiennent plus côte à côte : plutôt qu'un
   repli en escalier, ils passent en pleine largeur. */
@media (max-width: 400px) {
  .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .actions .bouton { text-align: center; }
}

@media (max-width: 640px) {
  .chiffres { gap: var(--ajw-espace-5); }
}

/* --------------------------------------------------------------------------
   Menu mobile
   Point de rupture à 820px : en dessous, les cinq liens et les deux contrôles
   ne tiennent plus sur une ligne sans que la marque et « IA & automatisation »
   se cassent en deux. Ce seuil est répliqué dans i18n.js (RUPTURE_MENU) pour
   refermer un panneau resté ouvert au redimensionnement.
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .controles {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  /* Le burger apparaît, les liens deviennent un panneau plein écran sous
     l'en-tête (qui reste visible et cliquable au-dessus).
     --ajw-hauteur-entete est mesurée et posée par i18n.js. */
  .controle-menu { display: inline-flex; }

  /* Panneau toujours en place (fixed), montré/masqué par opacité + léger
     glissement plutôt que par display, pour pouvoir animer l'ouverture. */
  .nav-liens {
    display: flex;
    flex-direction: column;
    /* Sans cela les liens héritent du align-items: center de .nav : ils se
       rétrécissent à la largeur du texte et leur filet avec eux. */
    align-items: stretch;
    position: fixed;
    top: var(--ajw-hauteur-entete, 65px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    gap: 0;
    background: var(--ajw-fond);
    padding: var(--ajw-espace-6) var(--ajw-espace-5);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  .nav-liens.ouvert {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .nav-liens a {
    padding: var(--ajw-espace-4) 0;
    border-top: 1px solid var(--ajw-bordure);
    font-size: var(--ajw-taille-h3);
    color: var(--ajw-texte);
  }

  .nav-liens a:first-child { border-top: 0; }

  /* Empêche la page de défiler derrière le panneau ouvert */
  body.menu-ouvert { overflow: hidden; }
}

/* ==========================================================================
   v1.2 : corrections de mise en page
   ========================================================================== */

/* --------------------------------------------------------------------------
   Prestations : deux colonnes équilibrées, numéro en gouttière
   -------------------------------------------------------------------------- */

.grille-prestations {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ajw-rythme-bloc) var(--ajw-espace-8);
}

.prestation {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--ajw-espace-4);
  align-items: start;
  border-top: 1px solid var(--ajw-bordure);
  padding-top: var(--ajw-espace-4);
}

.prestation-numero {
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-accent);
  margin: 3px 0 0;
  display: block;
}

.prestation-corps h3 { margin-bottom: var(--ajw-espace-2); }

.prestation-corps p {
  color: var(--ajw-texte-2);
  font-size: var(--ajw-taille-body-sm);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Méthode : trois étapes séquentielles
   -------------------------------------------------------------------------- */

.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ajw-rythme-bloc);
  margin-top: var(--ajw-rythme-bloc);
  counter-reset: etape;
}

.etape {
  border-top: 1px solid var(--ajw-sapin-400);
  padding-top: var(--ajw-espace-4);
  position: relative;
}

.etape::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 1px;
  height: 9px;
  background: var(--ajw-sapin-400);
}

.etape-cle {
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-sapin-400);
  display: block;
  margin-bottom: var(--ajw-espace-2);
}

.etape h3 {
  font-size: var(--ajw-taille-body);
  color: var(--ajw-papier);
  margin-bottom: var(--ajw-espace-2);
}

.etape p {
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-neutre-300);
  margin: 0;
}

[data-theme="sombre"] .etape h3 { color: var(--ajw-texte); }
[data-theme="sombre"] .etape p { color: var(--ajw-texte-2); }

/* --------------------------------------------------------------------------
   Section IA et automatisation
   -------------------------------------------------------------------------- */

.grille-ia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ajw-rythme-bloc) var(--ajw-espace-8);
  margin-top: var(--ajw-rythme-titre);
}

.ia-item {
  border-left: 1px solid var(--ajw-bordure);
  padding-left: var(--ajw-espace-4);
}

.ia-item h3 {
  font-size: var(--ajw-taille-body);
  margin-bottom: var(--ajw-espace-2);
}

.ia-item p {
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-texte-2);
  margin: 0;
}

.mise-en-garde {
  border-left: 2px solid var(--ajw-accent);
  padding-left: var(--ajw-espace-4);
  margin-top: var(--ajw-rythme-bloc);
  max-width: var(--ajw-mesure);
}

.mise-en-garde p {
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-texte-2);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Cas d'usage : blocs différenciés, plus de monospace parasite
   -------------------------------------------------------------------------- */

/* Mission : bloc de premier niveau séparé par un filet.
   Demi-espace de part et d'autre du filet (N1). */
.cas {
  padding: 0;
  border: 0;
  background: transparent;
  border-top: 1px solid var(--ajw-bordure);
  padding-top: var(--ajw-demi-section);
  margin-bottom: var(--ajw-demi-section);
}

.cas-entete {
  display: block;
  margin-bottom: var(--ajw-espace-6);
}

.cas-secteur {
  font-family: var(--ajw-font-texte);
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  display: block;
  margin-bottom: var(--ajw-espace-2);
}

.cas-entete h3 {
  font-family: var(--ajw-font-titre);
  font-size: var(--ajw-taille-h2);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Grille libellé / contenu */
.cas-bloc {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--ajw-espace-5);
  padding: var(--ajw-espace-4) 0;
  border-top: 1px solid var(--ajw-bordure);
  margin: 0;
}

.cas-bloc:first-of-type { border-top: 0; padding-top: 0; }

.cas-bloc h4 {
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  margin: 2px 0 0;
}

.cas-bloc p { margin: 0; }

.cas-decision {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--ajw-espace-5);
  background: var(--ajw-sapin-100);
  border-radius: 0;
  border-left: 2px solid var(--ajw-accent);
  padding: var(--ajw-espace-4) var(--ajw-espace-5);
  margin-top: var(--ajw-espace-5);
}

.cas-decision h4 {
  color: var(--ajw-accent);
  margin: 2px 0 0;
}

.cas-decision p { margin: 0; font-size: var(--ajw-taille-body-sm); }

.stack-liste {
  font-family: var(--ajw-font-texte);
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-texte-3);
  gap: var(--ajw-espace-2) var(--ajw-espace-3);
  margin-top: var(--ajw-espace-5);
}

.stack-liste li::after {
  content: "·";
  margin-left: var(--ajw-espace-3);
  color: var(--ajw-neutre-300);
}

.stack-liste li:last-child::after { content: ""; }

/* --------------------------------------------------------------------------
   Contact : bloc modalités
   -------------------------------------------------------------------------- */

.modalites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--ajw-espace-5);
  padding: var(--ajw-espace-5) 0;
  margin: var(--ajw-rythme-bloc) 0;
  border-top: 1px solid var(--ajw-bordure);
  border-bottom: 1px solid var(--ajw-bordure);
}

.modalite-cle {
  font-size: var(--ajw-taille-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ajw-texte-3);
  margin-bottom: var(--ajw-espace-1);
}

.modalite-valeur {
  font-size: var(--ajw-taille-body);
  color: var(--ajw-texte);
  font-weight: 500;
}

.modalite-note {
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
  margin-top: 2px;
}

.dispo-pastille {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--ajw-accent);
  margin-right: var(--ajw-espace-2);
  vertical-align: 1px;
}

/* --------------------------------------------------------------------------
   Responsive v1.2
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .grille-prestations,
  .grille-ia,
  .etapes {
    grid-template-columns: 1fr;
    gap: var(--ajw-rythme-bloc);
  }
}

@media (max-width: 640px) {
  .cas-bloc,
  .cas-decision {
    grid-template-columns: 1fr;
    gap: var(--ajw-espace-2);
  }

  .prestation { grid-template-columns: 28px 1fr; }
}

/* ==========================================================================
   v1.3 : pages de projet (formation)
   ========================================================================== */

.projet-hero {
  padding: var(--ajw-demi-section) 0;
}

.projet-figure {
  margin: 0 0 var(--ajw-espace-6);
  border: 1px solid var(--ajw-bordure);
  border-radius: var(--ajw-rayon-2);
  overflow: hidden;
  background: var(--ajw-surface);
}

.projet-figure img,
.projet-figure video { display: block; width: 100%; }

.projet-figure figcaption {
  padding: var(--ajw-espace-3) var(--ajw-espace-4);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
  border-top: 1px solid var(--ajw-bordure);
}

.figure-duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ajw-espace-4);
  margin: 0 0 var(--ajw-espace-6);
}

.figure-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ajw-espace-3);
  margin: 0 0 var(--ajw-espace-6);
}

.article-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--ajw-espace-5);
  padding: var(--ajw-espace-5) 0;
  margin: var(--ajw-rythme-bloc) 0;
  border-top: 1px solid var(--ajw-bordure);
  border-bottom: 1px solid var(--ajw-bordure);
}

.article-kpi-valeur {
  font-family: var(--ajw-font-data);
  font-weight: 500;
  font-size: var(--ajw-taille-data-lg);
  color: var(--ajw-accent);
  display: block;
  margin-bottom: 2px;
}

.article-kpi-libelle {
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-texte-3);
}

/* Étape de projet : bloc de premier niveau séparé par un filet.
   Demi-espace de part et d'autre du filet (N1). */
.projet-etape {
  border-top: 1px solid var(--ajw-bordure);
  padding-top: var(--ajw-demi-section);
  margin-top: var(--ajw-demi-section);
}

/* Le filet porte déjà la séparation : le titre reste solidaire de son
   numéro et n'ajoute pas la respiration N2 des h2 d'article. */
.projet-etape > h2 { margin-top: 0; }

.projet-etape-num {
  font-family: var(--ajw-font-data);
  font-size: var(--ajw-taille-caption);
  color: var(--ajw-accent);
  display: block;
  margin-bottom: var(--ajw-espace-2);
}

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ajw-espace-6);
  align-items: start;
}

.liens-projet {
  display: flex;
  gap: var(--ajw-espace-3);
  flex-wrap: wrap;
  margin: var(--ajw-rythme-titre) 0;
}

.lien-externe {
  border: 1px solid var(--ajw-bordure);
  padding: var(--ajw-espace-2) var(--ajw-espace-4);
  border-radius: var(--ajw-rayon-1);
  font-size: var(--ajw-taille-body-sm);
  border-bottom: 1px solid var(--ajw-bordure);
}

.lien-externe:hover {
  border-color: var(--ajw-accent);
  color: var(--ajw-accent);
}

.projet-bandeau {
  border-left: 2px solid var(--ajw-accent);
  padding-left: var(--ajw-espace-4);
  margin: var(--ajw-rythme-bloc) 0;
  max-width: var(--ajw-mesure);
}

.projet-bandeau p {
  font-size: var(--ajw-taille-body-sm);
  color: var(--ajw-texte-2);
  margin: 0;
}

/* Pied d'article, séparé par un filet : demi-espace de part et d'autre (N1) */
.projet-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--ajw-espace-4);
  flex-wrap: wrap;
  padding-top: var(--ajw-demi-section);
  border-top: 1px solid var(--ajw-bordure);
  margin-top: var(--ajw-demi-section);
  font-size: var(--ajw-taille-body-sm);
}

@media (max-width: 720px) {
  .figure-duo, .figure-trio, .deux-colonnes {
    grid-template-columns: 1fr;
  }
}