/* AGAIN MARKETING, Design tokens v1.0
   Identité « Signal Bleu Ultra ». Consultant SEO freelance.
   Colle ce fichier tel quel, puis n'utilise QUE ces variables. */

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

:root {
  /* COULEURS, palette fermée. N'en invente aucune autre. */
  --again-blue:        #2643FF; /* primaire: CTA, liens, accents, carré du logo */
  --again-blue-light:  #6D80FF; /* labels mono sur fond sombre */
  --again-blue-pale:   #C6CDFF; /* texte secondaire sur fond bleu */
  --again-blue-wash:   #EEF0FF; /* fonds de blocs très clairs */
  --again-ink:         #111111; /* texte principal, fonds sombres */
  --again-paper:       #FDFCF9; /* fond de page par défaut (blanc cassé) */
  --again-border:      #E5E2DA; /* toutes les bordures 1px */
  --again-muted:       #555555; /* paragraphes secondaires */
  --again-muted-light: #999999; /* méta, légendes */
  --again-alert:       #E8253D; /* uniquement erreurs / interdits */

  /* TYPOGRAPHIE, 3 familles, aucune autre */
  --again-font-display: 'Archivo Expanded', 'Archivo', sans-serif; /* titres, poids 800/900, letter-spacing -0.02em à -0.03em, TOUJOURS EN CAPITALES */
  --again-font-body:    'Archivo', sans-serif;                     /* corps, poids 400/500/600 */
  --again-font-mono:    'IBM Plex Mono', monospace;                /* labels, chiffres, kickers: poids 500, CAPITALES, letter-spacing 0.14em à 0.16em */

  /* ÉCHELLE DE TAILLES (desktop) */
  --again-h1: clamp(40px, 6vw, 84px);
  --again-h2: clamp(30px, 4vw, 48px);
  --again-h3: 28px;
  --again-body-lg: 19px;
  --again-body: 16px;
  --again-small: 14px;
  --again-mono-label: 12px;

  /* ESPACEMENT, multiples de 4 */
  --again-s1: 4px;  --again-s2: 8px;  --again-s3: 12px; --again-s4: 16px;
  --again-s5: 24px; --again-s6: 32px; --again-s7: 48px; --again-s8: 64px;
  --again-s9: 96px; --again-s10: 128px;

  /* RAYONS, volontairement faibles (rien d'arrondi/mou) */
  --again-radius-sm: 2px;
  --again-radius:    4px;
  --again-radius-lg: 8px;
  --again-radius-pill: 999px; /* uniquement badges */

  /* LAYOUT */
  --again-container: 1240px;
  --again-gutter: 32px;

  /* TRANSITIONS */
  --again-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --again-dur: 220ms;
}

/* RESET / BASE */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--again-paper);
  color: var(--again-ink);
  font-family: var(--again-font-body);
  font-size: var(--again-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
h1, h2, h3 {
  font-family: var(--again-font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
}
h1 { font-size: var(--again-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--again-h2); }
h3 { font-size: var(--again-h3); }
p { margin: 0 0 var(--again-s4); }
a { color: var(--again-blue); text-decoration: none; transition: color var(--again-dur) var(--again-ease); }
a:hover { color: var(--again-ink); }
strong { font-weight: 700; }

/* COMPOSANTS */

/* Kicker mono, au-dessus de chaque titre de section */
.again-kicker {
  font: 500 var(--again-mono-label) var(--again-font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--again-blue);
  display: flex;
  align-items: center;
  gap: var(--again-s2);
}
.again-kicker::before {
  content: ''; width: 8px; height: 8px;
  background: var(--again-blue); border-radius: var(--again-radius-sm);
}
.again-kicker--onDark { color: var(--again-blue-light); }

/* Logo */
.again-logo { display: inline-flex; align-items: baseline; gap: 0.12em; font-family: var(--again-font-display); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--again-ink); }
.again-logo::after { content: ''; width: 0.26em; height: 0.26em; background: var(--again-blue); border-radius: var(--again-radius-sm); }
.again-logo--onDark { color: #FFFFFF; }
/* En monochrome, le carré prend la couleur du texte: .again-logo--mono::after { background: currentColor; } */

/* Boutons */
.again-btn {
  display: inline-flex; align-items: center; gap: var(--again-s2);
  padding: 18px 32px;
  min-height: 56px;
  font: 700 15px var(--again-font-body);
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 2px solid var(--again-blue);
  border-radius: var(--again-radius);
  background: var(--again-blue); color: #FFFFFF;
  cursor: pointer;
  transition: transform var(--again-dur) var(--again-ease), background var(--again-dur) var(--again-ease);
}
.again-btn:hover { background: var(--again-ink); border-color: var(--again-ink); transform: translateY(-2px); color: #FFFFFF; }
.again-btn--ghost { background: transparent; color: var(--again-blue); }
.again-btn--ghost:hover { background: var(--again-blue); color: #FFFFFF; }
.again-btn--onDark { background: var(--again-blue); border-color: var(--again-blue); }
.again-btn--onDark:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--again-ink); }

/* Carte */
.again-card {
  border: 1px solid var(--again-border);
  border-radius: var(--again-radius);
  background: #FFFFFF;
  padding: var(--again-s6);
  display: flex; flex-direction: column; gap: var(--again-s3);
}
.again-card--dark { background: var(--again-ink); border-color: var(--again-ink); color: #FFFFFF; }

/* Badge */
.again-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--again-radius-pill);
  background: var(--again-blue-wash); color: var(--again-blue);
  font: 500 11px var(--again-font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}

/* Gros chiffre / statistique */
.again-stat { font: 900 clamp(44px, 5vw, 72px)/1 var(--again-font-display); letter-spacing: -0.03em; color: var(--again-blue); }
.again-stat-label { font: 500 12px var(--again-font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--again-muted); }

/* Titre de section: filet 2px sous l'en-tête */
.again-section-head { display: flex; align-items: baseline; gap: var(--again-s4); border-bottom: 2px solid var(--again-ink); padding-bottom: var(--again-s3); }

/* Conteneur / section */
.again-container { max-width: var(--again-container); margin: 0 auto; padding: 0 var(--again-gutter); }
.again-section { padding: var(--again-s10) 0; }
.again-section--dark { background: var(--again-ink); color: #FFFFFF; }
.again-section--dark p { color: #B9B9B9; }

/* Soulignement d'accent sur un mot de titre */
.again-underline {
  display: inline;
  background-image: linear-gradient(to top, var(--again-blue) 0.14em, transparent 0.14em);
  background-position: 0 -0.06em;
  background-repeat: repeat-x;
}

/* Trame de points, fond décoratif discret */
.again-dots { background-image: radial-gradient(var(--again-border) 1px, transparent 1px); background-size: 24px 24px; }