/* ==========================================================================
   adalan · charte graphique · tokens et composants de base
   Encre #1f175a, pêche #f9a66b, coins en diagonale, Mona Sans + Monaspace Neon.
   Source : site adalan.fr et présentation du séminaire du 24 septembre 2026.
   Copie de la charte (skill charte-graphique-adalan), polices hébergées sur le serveur.
   ========================================================================== */

/* Polices hébergées sur le serveur (licence SIL OFL 1.1, voir fonts/LICENSE-*.txt) */
@font-face {
  font-family: 'Mona Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url('fonts/mona-sans-latin-wdth-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/monaspace-neon-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Monaspace Neon';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/monaspace-neon-latin-500-normal.woff2') format('woff2');
}


:root {
  /* encre : la voix engagée */
  --ink-950: #0e0a2e;
  --ink-900: #150f44;
  --ink: #1f175a;
  --ink-700: #2a2178;
  --ink-600: #3a2fa0;
  --ink-500: #5047b0;
  --ink-400: #7a73c4;
  --ink-300: #a8a2dc;
  --ink-200: #cfcbee;
  --ink-100: #e8e6f6;
  --ink-50: #f4f3fb;

  /* pêche : la voix de l'assistant, l'accent */
  --peach: #f9a66b;
  --peach-400: #fab383;
  --peach-300: #fcc6a0;
  --peach-200: #fbd9bf;
  --peach-100: #fdefe4;
  --peach-600: #d96a1f;
  --peach-700: #a94d08;

  /* surfaces et textes */
  --ground: #f6f5fb;
  --paper: #ffffff;
  --text: var(--ink);
  --text-2: #4b467a;
  --text-3: #6e6a93;
  --on-peach-2: #3b3466;
  --line: rgb(31 23 90 / 0.1);
  --line-2: rgb(31 23 90 / 0.18);

  /* familles Kamelot : pastilles de ces cinq familles uniquement */
  --f1: #f08f4c;
  --f2: #3a2fa0;
  --f3: #607890;
  --f4: #2e7d55;
  --f5: #7c3aed;

  /* forme signature : deux coins grands, deux coins vifs, en diagonale */
  --shape: 28px 6px 28px 6px;
  --shape-mirror: 6px 28px 6px 28px;
  --shape-md: 18px 5px 18px 5px;
  --shape-s: 12px 4px 12px 4px;
  --shape-xs: 7px 2px 7px 2px;
  --shape-ink: clamp(28px, 2rem + 2vw, 64px) 6px clamp(28px, 2rem + 2vw, 64px) 6px;

  /* ombres teintées encre, jamais noires */
  --shadow-1: 0 1px 1px rgb(31 23 90 / 0.04), 0 10px 26px -14px rgb(31 23 90 / 0.22);
  --shadow-2: 0 2px 4px rgb(31 23 90 / 0.05), 0 28px 56px -28px rgb(31 23 90 / 0.4);
  --shadow-peach: 0 16px 36px -20px rgb(217 106 31 / 0.6);

  /* typographie */
  --font: 'Mona Sans Variable', 'Mona Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'Monaspace Neon', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-hero: clamp(2.4rem, 0.9rem + 3.9vw, 4.6rem);
  --fs-xl: clamp(2.2rem, 1.25rem + 3.1vw, 4.25rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
  --fs-h3: clamp(1.35rem, 1.12rem + 0.8vw, 1.85rem);
  --fs-lead: clamp(1.12rem, 1.02rem + 0.42vw, 1.38rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-micro: 0.78rem;

  /* mesures */
  --col: 46rem;
  --col-wide: 66rem;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --section: clamp(3.5rem, 2.5rem + 4vw, 7rem);

  /* mouvement */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.18, 1);
  --ease-back: cubic-bezier(0.22, 1, 0.36, 1);

  accent-color: var(--peach-600);
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 420;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--peach-600);
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, svg { display: block; max-width: 100%; }
strong, b { font-weight: 650; color: var(--text); }
p { text-wrap: pretty; }

::selection { background: var(--peach-200); color: var(--ink); }
:focus-visible { outline: 2px solid var(--peach-600); outline-offset: 3px; border-radius: 6px; }

/* surlignage : une bande pêche sous le mot */
mark {
  color: inherit;
  background: linear-gradient(transparent 62%, var(--peach-300) 62%, var(--peach-300) 94%, transparent 94%);
}

/* --------------------------------------------------------------------------
   Typographie : l'emphase passe par la graisse et la chasse, jamais l'italique
   -------------------------------------------------------------------------- */
.hero, .display, .h2, .title { color: var(--text); text-wrap: balance; }
.hero { font-size: var(--fs-hero); font-weight: 820; font-stretch: 114%; line-height: 0.98; letter-spacing: -0.038em; }
.display { font-size: var(--fs-xl); font-weight: 780; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.032em; max-width: 18ch; }
.h2 { font-size: var(--fs-h2); font-weight: 750; font-stretch: 110%; line-height: 1.08; letter-spacing: -0.026em; }
.title { font-size: var(--fs-h3); font-weight: 720; font-stretch: 108%; line-height: 1.12; letter-spacing: -0.02em; }
.hero em, .display em, .h2 em { font-style: normal; color: var(--peach-600); }
.lead { font-size: var(--fs-lead); font-weight: 440; line-height: 1.5; color: var(--text-2); max-width: 58ch; }
.lead strong { font-weight: 620; }
.body { color: var(--text-2); max-width: 62ch; }
.label { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.mono { font-family: var(--mono); font-feature-settings: 'calt' 1; }
.meta { font: 400 var(--fs-micro)/1.3 var(--mono); color: var(--text-3); }

/* sur-titre : Monaspace en capitales, précédé d'un petit carré en diagonale */
.kicker {
  display: inline-flex; align-items: center; gap: 0.75em;
  font: 500 var(--fs-micro)/1 var(--mono);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--kicker, var(--peach-700));
}
.kicker::before {
  content: ''; flex: none; width: 0.8em; height: 0.8em;
  background: currentColor; border-radius: 7px 1px 7px 1px;
}

/* --------------------------------------------------------------------------
   Tons : chaque surface redéfinit ses textes et ses filets
   -------------------------------------------------------------------------- */
.on-ink, .band--ink, .card--ink, .photo {
  --text: #fff;
  --text-2: var(--ink-200);
  --text-3: var(--ink-300);
  --line: rgb(255 255 255 / 0.12);
  --line-2: rgb(255 255 255 / 0.2);
  --kicker: var(--peach);
  color: var(--text);
}
.on-ink em, .band--ink em, .card--ink em, .photo em { color: var(--peach); }
.card--peach {
  --text: var(--ink);
  --text-2: var(--on-peach-2);
  --text-3: var(--on-peach-2);
  --line: rgb(31 23 90 / 0.16);
  --line-2: rgb(31 23 90 / 0.28);
  --kicker: var(--ink);
}

/* --------------------------------------------------------------------------
   Boutons : diagonale courte, jamais de pilule
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 0.55em;
  min-height: 2.75rem; padding: 0.6em 1.15em 0.6em 1.05em;
  border: 0; border-radius: var(--shape-s);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 0.95rem/1.1 var(--font); font-stretch: 104%;
  text-decoration: none; cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn svg { width: 1.1em; height: 1.1em; }
.btn--peach { --btn-bg: var(--peach); --btn-fg: var(--ink); }
.btn--peach:hover { box-shadow: var(--shadow-peach); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-1); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }

.link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--text); text-decoration: none; }
.link-arrow::after { content: '→'; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Pastilles de choix
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55rem 0.9rem 0.6rem 0.75rem;
  border: 0; border-radius: var(--shape-s);
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 560 0.93rem/1.2 var(--font);
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s ease;
}
.chip svg { color: var(--peach-700); width: 1.1em; height: 1.1em; }
.chip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ink-300), var(--shadow-1); }
.chip.is-chosen, .chip[aria-pressed='true'] { background: var(--peach); transform: translateY(-4px); box-shadow: var(--shadow-peach); }
.chip.is-chosen svg, .chip[aria-pressed='true'] svg { color: var(--ink); }

/* étiquette technique (type, statut, code) */
.tag {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28em 0.6em; border-radius: var(--shape-xs);
  font: 400 var(--fs-micro)/1 var(--mono); color: var(--text-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.tag--peach { background: var(--peach-100); color: var(--peach-700); box-shadow: none; }

/* --------------------------------------------------------------------------
   Cartes : papier par défaut, encre pour le stratégique, pêche pour l'humain
   -------------------------------------------------------------------------- */
.card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(1.15rem, 0.9rem + 1vw, 1.9rem);
  border-radius: var(--shape);
  background: var(--paper); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
}
.card--ink { background: var(--ink); border-radius: var(--shape-ink); box-shadow: var(--shadow-2); }
.card--peach { background: var(--peach); box-shadow: var(--shadow-peach); }
.card--inner { background: var(--ink-50); border-radius: var(--shape-md); box-shadow: none; }
.card > * + * { margin-top: 0.6rem; }

/* pastille d'icône en diagonale */
.icon-badge {
  display: inline-grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 10px 3px 10px 3px;
  background: var(--peach-100); color: var(--peach-700);
}
.icon-badge svg { width: 1.15rem; height: 1.15rem; }
.on-ink .icon-badge, .band--ink .icon-badge, .card--ink .icon-badge { background: rgb(249 166 107 / 0.14); color: var(--peach); }
.card--peach .icon-badge { background: rgb(31 23 90 / 0.1); color: var(--ink); }

/* encadré : une phrase qui compte */
.note {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.4rem; border-radius: var(--shape);
  background: var(--ink); color: #fff; line-height: 1.4;
}
.note svg { flex: none; color: var(--peach); }
.note strong, .note b { color: inherit; }
.note--peach { background: var(--peach-100); color: var(--ink); box-shadow: inset 0 0 0 1px var(--peach-200); }
.note--peach svg { color: var(--peach-700); }

/* --------------------------------------------------------------------------
   Sections : clair par défaut, encre ou photo pour les temps forts
   -------------------------------------------------------------------------- */
.band { position: relative; isolation: isolate; padding-block: var(--section); }
.band--paper { background: var(--paper); }
.band--ink { background: var(--ink); overflow: hidden; }
.band--ink::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(80% 90% at 90% 0%, rgb(80 64 190 / 0.5) 0%, transparent 62%),
    radial-gradient(70% 80% at 0% 100%, rgb(10 7 40 / 0.7) 0%, transparent 70%);
}

/* courbes de niveau : sur encre en lavande, sur clair en encre très légère */
.topo::before, .band--ink::before, .card--ink::before {
  content: ''; position: absolute; inset: -8% -6%; z-index: -1; pointer-events: none;
  background: url('motifs/topo-sur-encre.svg') center / cover no-repeat;
  animation: topo-drift 36s ease-in-out infinite alternate;
}
.topo--clair::before { background-image: url('motifs/topo-sur-clair.svg'); }
.topo { position: relative; isolation: isolate; overflow: hidden; }
@keyframes topo-drift { to { transform: translate3d(-40px, -22px, 0); } }

/* photo plein cadre : voile encre pour lire le texte, crédit en bas à droite */
.photo { position: relative; isolation: isolate; overflow: hidden; background: var(--ink-900); }
.photo > img, .photo__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
}
.photo::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(21 15 68 / 0.92) 0%, rgb(21 15 68 / 0.72) 30%, rgb(21 15 68 / 0.3) 58%, rgb(21 15 68 / 0) 85%),
    linear-gradient(0deg, rgb(12 9 39 / 0.75) 0%, rgb(12 9 39 / 0) 35%);
}
.photo--full::after { background: linear-gradient(0deg, rgb(12 9 39 / 0.85) 0%, rgb(21 15 68 / 0.35) 55%, rgb(21 15 68 / 0.5) 100%); }
.credit {
  font: 400 0.72rem/1.2 var(--mono); letter-spacing: 0.04em; color: var(--text-3);
}
.photo .credit { position: absolute; right: 1rem; bottom: 0.75rem; color: rgb(255 255 255 / 0.6); }

/* --------------------------------------------------------------------------
   Champs de formulaire
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 0.4rem; }
.field > label { font-size: var(--fs-small); font-weight: 620; color: var(--ink); }
.field > label small { font-weight: 440; color: var(--text-3); }
.input {
  width: 100%; min-height: 2.9rem; padding: 0.7rem 0.9rem;
  border: 0; border-radius: var(--shape-s);
  background: var(--ground); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font: 420 1rem/1.4 var(--font);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.input::placeholder { color: var(--text-3); }
.input:focus { outline: none; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px rgb(249 166 107 / 0.3); }
.field.is-error .input { box-shadow: inset 0 0 0 2px var(--peach-700); }
.field__error { font-size: 0.84rem; font-weight: 560; color: var(--peach-700); }

/* --------------------------------------------------------------------------
   Mise en page
   -------------------------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--col-wide)); margin-inline: auto; }
.container--text { width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto; }
.stack > * + * { margin-top: var(--stack, 1.1rem); }

/* --------------------------------------------------------------------------
   Mouvement : tout est présent sans script, et figé si l'utilisateur le demande
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}