/* Thème Altyor des sites candidat et évaluateur.
   Jetons repris de design-system-altyor/colors_and_type.css (bloc :root), sans police externe :
   tout est servi par Hosting. Charte : crème pour l'accueil et la fin, blanc pour le contenu,
   angles droits, aucune ombre, filets d'encre de 1 px, repère « 01 _ ». */

:root {
  /* ---------- Brand palette ---------- */
  --brand-coral:        #FF5E52;   /* primary accent — buttons, numbers, callouts */
  --brand-coral-deep:   #FF594F;   /* hover/active variant */
  --brand-coral-dark:   #A45A52;   /* on-cream contrast / data viz */
  --brand-orange:       #FF891D;   /* secondary accent (sparing) */

  /* ---------- Warm neutrals (the "Altyor cream" family) ---------- */
  --cream-50:           #FAF6F1;   /* lightest, panel bg */
  --cream-100:          #F1E8E0;   /* default cream surface */
  --cream-200:          #F4DEC7;   /* signature cream — slide bg */
  --cream-300:          #F3DDC7;   /* peach-cream */
  --cream-400:          #EDC7A2;   /* deeper peach (data viz) */
  --warm-gray:          #C5B8BA;   /* mauve-gray text/divider */

  /* ---------- Cool neutrals ---------- */
  --gray-50:            #F7F7F7;
  --gray-100:           #F0F0F0;   /* secondary surface */
  --gray-300:           #C2C2C2;   /* divider */
  --gray-700:           #4A4A4A;
  --ink:                #0B0B0B;   /* near-black body */
  --black:              #000000;
  --white:              #FFFFFF;

  /* ---------- Data viz / extra ---------- */
  --viz-blue:           #B6C9E5;

  /* ---------- Semantic — surfaces ---------- */
  --bg-canvas:          var(--cream-200);
  --bg-surface:         var(--white);
  --bg-muted:           var(--cream-100);
  --bg-inverse:         var(--ink);

  /* ---------- Semantic — text ---------- */
  --fg-1:               var(--ink);          /* primary text */
  --fg-2:               #3A3535;             /* secondary text */
  --fg-3:               var(--warm-gray);    /* tertiary / meta */
  --fg-accent:          var(--brand-coral);
  --fg-on-dark:         var(--white);

  /* ---------- Semantic — borders / dividers ---------- */
  --border-subtle:      rgba(11,11,11,0.08);
  --border-default:     rgba(11,11,11,0.16);
  --border-strong:      var(--ink);

  /* ---------- Type families ---------- */
  /* Polices universelles — portables PPTX sans "Incorporer les polices" */
  --font-display:       'Century Gothic', 'AppleGothic', system-ui, sans-serif;
  --font-body:          'Tahoma', 'Geneva', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:          ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---------- Type scale (slide / hi-fi) ---------- */
  --fs-display-xl:      96px;
  --fs-display:         72px;
  --fs-h1:              48px;
  --fs-h2:              36px;
  --fs-h3:              28px;
  --fs-h4:              22px;
  --fs-body-lg:         18px;
  --fs-body:            16px;
  --fs-body-sm:         14px;
  --fs-caption:         12px;
  --fs-eyebrow:         11px;

  /* Numbered marker — "01" / "02" used across template */
  --fs-marker:          22px;

  /* ---------- Line-height ---------- */
  --lh-tight:           1.05;   /* @kind other */
  --lh-snug:            1.2;    /* @kind other */
  --lh-normal:          1.45;   /* @kind other */
  --lh-loose:           1.65;   /* @kind other */

  /* ---------- Tracking ---------- */
  --tracking-tight:     -0.02em;  /* @kind other */
  --tracking-normal:    0;        /* @kind other */
  --tracking-wide:      0.08em;   /* @kind other */
  --tracking-wider:     0.18em;   /* @kind other */

  /* ---------- Weights ---------- */
  --w-light:            300;  /* @kind other */
  --w-regular:          400;  /* @kind other */
  --w-medium:           500;  /* @kind other */
  --w-semibold:         600;  /* @kind other */
  --w-bold:             700;  /* @kind other */

  /* ---------- Spacing scale (4px base) ---------- */
  --sp-1:               4px;
  --sp-2:               8px;
  --sp-3:               12px;
  --sp-4:               16px;
  --sp-5:               24px;
  --sp-6:               32px;
  --sp-7:               48px;
  --sp-8:               64px;
  --sp-9:               96px;
  --sp-10:              128px;

  /* ---------- Radii — Altyor uses crisp geometry; mostly 0 + small ---------- */
  --r-none:             0;      /* @kind radius */
  --r-xs:               2px;
  --r-sm:               4px;
  --r-md:               8px;
  --r-lg:               16px;
  --r-pill:             999px;

  /* ---------- Shadows — kept SOFT, the template is largely flat ---------- */
  --shadow-1:           0 1px 2px rgba(11,11,11,0.06);
  --shadow-2:           0 6px 16px rgba(11,11,11,0.08);
  --shadow-3:           0 18px 40px rgba(11,11,11,0.12);

  /* ---------- Motion ---------- */
  --ease-standard:      cubic-bezier(0.2, 0.6, 0.2, 1);  /* @kind other */
  --ease-emphasized:    cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --dur-fast:           120ms;  /* @kind other */
  --dur-base:           220ms;  /* @kind other */
  --dur-slow:           400ms;  /* @kind other */
}

:root {
  --sev-high-bg: #FFE3E0; --sev-high-fg: #7A2E27; --sev-high-bd: var(--brand-coral);
  --sev-medium-bg: #FFEBD6; --sev-medium-fg: #6B3A06; --sev-medium-bd: var(--brand-orange);
  --sev-low-bg: var(--gray-100); --sev-low-fg: var(--fg-2); --sev-low-bd: var(--warm-gray);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--white); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }
/* Accueil et fin : fond crème. Étapes et fiches : fond blanc (par défaut). */
body.cream { background: var(--cream-200); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--w-medium); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); margin: 0 0 var(--sp-4); text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--brand-coral-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 960px; margin: 0 auto; padding: var(--sp-6) var(--sp-4) var(--sp-9); }
.rule { border: 0; border-top: 1px solid var(--ink); margin: var(--sp-5) 0; }
.eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--w-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--fg-2); }

/* Repère « 01 _ Libellé » : numéro, tiret bas corail, libellé. */
.marker { font-family: var(--font-display); font-size: var(--fs-marker); font-weight: var(--w-medium); line-height: 1; color: var(--brand-coral-dark); }
.dash::before { content: "_"; color: var(--brand-coral); margin-right: .5em; font-weight: var(--w-medium); }

/* Listes du contenu : le tiret bas sert de puce, aligné sur le texte qui précède. */
ul:not([class]) { list-style: none; padding-left: 0; }
ul:not([class]) > li { position: relative; padding-left: 1.5em; }
ul:not([class]) > li::before { content: "_"; position: absolute; left: 0; color: var(--brand-coral); font-weight: var(--w-medium); }

/* Boutons : fond corail et texte encre (le blanc sur corail n'atteint que 3,0:1). */
.btn { font: inherit; font-weight: var(--w-semibold); background: var(--brand-coral); color: var(--ink); border: 0; border-radius: var(--r-none); padding: var(--sp-3) var(--sp-5); cursor: pointer; transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); }
.btn:hover { background: var(--brand-coral-deep); }
.btn:active { transform: scale(.96); }
.btn.sec { background: var(--white); border: 1px solid var(--ink); }
.btn.sec:hover { background: var(--cream-100); }
.btn:disabled, .btn:disabled:hover { background: var(--gray-300); color: var(--fg-2); border-color: var(--gray-300); cursor: default; transform: none; }
.btn:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Bloc de contenu : surface crème, ni ombre ni bordure, 24 px de marge interne. */
.panel { background: var(--cream-100); padding: var(--sp-5); border-radius: var(--r-none); }
body.cream .panel { background: var(--white); }

textarea, select, input:not([type="checkbox"]):not([type="radio"]) { font: inherit; color: var(--fg-1); width: 100%; border: 1px solid var(--ink); border-radius: var(--r-none); padding: var(--sp-2) var(--sp-3); background: var(--white); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

.note { color: var(--sev-high-fg); font-size: var(--fs-body-sm); }
.muted { color: var(--fg-2); font-size: var(--fs-body-sm); }

/* Classes autorisées dans le contenu rédigé par Altyor (shared/safe-html.js). */
.twist { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-coral-dark); }
.ai-bubble { background: var(--cream-50); border-left: 1px solid var(--ink); padding: var(--sp-4); margin: var(--sp-3) 0; }
.ai-tag { font-size: var(--fs-eyebrow); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-2); margin-bottom: var(--sp-2); }
code { font-family: var(--font-mono); font-size: .9em; background: var(--gray-100); padding: .05em .35em; }
pre.code { font-family: var(--font-mono); font-size: var(--fs-body-sm); background: var(--ink); color: var(--white); padding: var(--sp-4); overflow-x: auto; }
pre code { background: none; padding: 0; color: inherit; }

/* Signaux de triche : mesure du serveur sur fond plein, valeur déclarée en pointillés. */
.sev { display: inline-block; font-size: var(--fs-caption); font-weight: var(--w-semibold); padding: 2px var(--sp-2); border: 1px solid; }
.sev.high { background: var(--sev-high-bg); color: var(--sev-high-fg); border-color: var(--sev-high-bd); }
.sev.medium { background: var(--sev-medium-bg); color: var(--sev-medium-fg); border-color: var(--sev-medium-bd); }
.sev.low { background: var(--sev-low-bg); color: var(--sev-low-fg); border-color: var(--sev-low-bd); }
.declared { border: 1px dashed var(--warm-gray); }
.declared::after { content: " · déclaré"; color: var(--fg-2); font-size: var(--fs-caption); }

/* En-tête : filet d'encre en bas, logo noir. */
.header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ink); padding: var(--sp-3) var(--sp-4); background: var(--white); position: sticky; top: 0; z-index: 10; }
body.cream .header { background: var(--cream-200); }
.header img { height: 28px; width: auto; }

@media (max-width: 600px) { .wrap { padding: var(--sp-5) var(--sp-4) var(--sp-8); } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:active { transform: none; } }