/* ==========================================================================
   ASSULIGHT DESIGN SYSTEM : 02. THEME
   Pont Bootstrap 5.3 <-> tokens AssuLight, base typographique, utilitaires
   de mise en page. A charger APRES bootstrap.css et al-tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PONT BOOTSTRAP
   On remappe les variables Bootstrap sur nos tokens : tous les composants
   natifs (btn, card, modal, accordion, form...) heritent de la marque.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary:        var(--al-azur-500);
  --bs-primary-rgb:    27, 152, 214;
  --bs-secondary:      var(--al-ink-950);
  --bs-secondary-rgb:  11, 13, 17;
  --bs-success:        var(--al-success-500);
  --bs-success-rgb:    14, 159, 110;
  --bs-info:           var(--al-azur-400);
  --bs-warning:        var(--al-solaire-500);
  --bs-warning-rgb:    251, 232, 36;
  --bs-danger:         var(--al-danger-500);
  --bs-danger-rgb:     229, 72, 77;

  --bs-body-bg:        var(--al-canvas);
  --bs-body-color:     var(--al-text);
  --bs-body-font-family: var(--al-font-body);
  --bs-body-font-size:   var(--al-fs-body);
  --bs-body-font-weight: var(--al-fw-regular);
  --bs-body-line-height: var(--al-lh-body);

  --bs-emphasis-color:   var(--al-text-strong);
  --bs-secondary-color:  var(--al-text-muted);
  --bs-tertiary-color:   var(--al-text-subtle);
  --bs-secondary-bg:     var(--al-surface-sunken);
  --bs-tertiary-bg:      var(--al-surface-sunken);

  --bs-border-color:             var(--al-border);
  --bs-border-color-translucent: var(--al-border);
  --bs-border-radius:      var(--al-radius-md);
  --bs-border-radius-sm:   var(--al-radius-sm);
  --bs-border-radius-lg:   var(--al-radius-lg);
  --bs-border-radius-xl:   var(--al-radius-xl);
  --bs-border-radius-2xl:  var(--al-radius-2xl);
  --bs-border-radius-pill: var(--al-radius-pill);

  --bs-link-color:        var(--al-accent-text);
  --bs-link-color-rgb:    11, 101, 145;
  --bs-link-hover-color:  var(--al-accent-hover);
  --bs-link-decoration:   none;

  --bs-box-shadow-sm: var(--al-shadow-sm);
  --bs-box-shadow:    var(--al-shadow-md);
  --bs-box-shadow-lg: var(--al-shadow-lg);

  --bs-font-monospace: var(--al-font-mono);
}

/* Conteneur cale sur le token (Bootstrap plafonne a 1320 en xxl) */
@media (min-width: 1400px) {
  .container, .container-xxl, .container-xl,
  .container-lg, .container-md, .container-sm { max-width: var(--al-container); }
}
.container, .container-fluid,
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
  padding-inline: var(--al-gutter);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--al-navbar-h) + var(--al-space-5));
}

body {
  margin: 0;
  min-height: 100svh;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--al-canvas);
  color: var(--al-text);
  font-family: var(--al-font-body);
  font-size: var(--al-fs-body);
  font-weight: var(--al-fw-regular);
  line-height: var(--al-lh-body);
  letter-spacing: var(--al-ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Les controles natifs (barres de defilement, champs) suivent le theme. */
:root { color-scheme: light; }
:root[data-bs-theme="dark"] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   Grille de fond du site public
   Un seul fond pour toutes les pages : la couleur du theme, quadrillee de
   filets. Les sections ne posent plus de fond, la grille court dessous et
   les cartes la recouvrent, comme des pieces posees sur une table de
   montage. Calee au centre horizontalement et en haut du document : le
   calque anime (.al-grid-fx) refait le meme calcul pour tomber sur les
   croisements.
   -------------------------------------------------------------------------- */
body.al-site {
  background-image:
    linear-gradient(var(--al-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--al-grid-line) 1px, transparent 1px);
  background-size: var(--al-grid-size) var(--al-grid-size);
  /* Une ligne verticale passe au milieu de la page : le motif est centre
     puis decale d'une demi-case. Les regles, a egale distance de ce milieu
     et a un nombre pair de cases l'une de l'autre, tombent sur des lignes. */
  background-position: calc(50% + var(--al-grid-size) / 2) 0;
}

/* Le calque des croisements allumes. Fixe et sous le contenu : un z-index
   negatif le place au-dessus du fond de page mais sous tout le reste. */
.al-grid-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  max-width: none;
  block-size: 100%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Regles d'atelier
   Sur la grille, un cadre plus marque, comme les reperes d'une planche :
   - deux regles verticales bordent la colonne de contenu, du haut au bas
     de la page ;
   - un filet horizontal ouvre chaque section, sur toute la largeur ;
   - la ou il croise les regles, un repere en T marque l'angle.

   Tout contour tombe sur une ligne de la grille. Pour cela, la geometrie se
   compte en cases, palier par palier :
   - le pas de la grille (--al-grid-size) est un nombre entier de pixels ;
   - la largeur entre les regles (--al-rail) est un nombre PAIR de cases :
     26 au-dela de 992 px, 14 en dessous ;
   - le conteneur epouse les regles, avec une case de marge interieure :
     il reste 24 cases de contenu (12 sous 992 px), divisibles par 2, 3, 4
     et 6, donc des blocs bord a bord qui tombent juste ;
   - la navigation mesure deux cases.
   Sur telephone, la largeur est arrondie a un nombre pair de cases par
   round() ; un navigateur qui ne le connait pas garde une largeur pleine,
   simplement sans l'alignement.
   L'alignement vertical (hauteur des sections et des blocs) est fait par
   le script, qui arrondit les hauteurs au pas (al-ui.js, initCalage).
   -------------------------------------------------------------------------- */
:root {
  --al-grid-size: 32px;
  --al-rail: calc(100vw - 16px);
  --al-rail: round(down, 100vw - 16px, 64px);
  --al-rail-pad: 0px;
}
@media (min-width: 576px)  { :root { --al-grid-size: 38px; --al-rail: 532px;  --al-rail-pad: var(--al-grid-size); } }
@media (min-width: 768px)  { :root { --al-grid-size: 48px; --al-rail: 672px; } }
@media (min-width: 992px)  { :root { --al-grid-size: 36px; --al-rail: 936px; } }
@media (min-width: 1200px) { :root { --al-grid-size: 44px; --al-rail: 1144px; } }
@media (min-width: 1400px) { :root { --al-grid-size: 50px; --al-rail: 1300px; } }

/* Le conteneur du site public epouse les regles. */
.al-site .container {
  inline-size: var(--al-rail);
  max-inline-size: none;
  margin-inline: auto;
  padding-inline: var(--al-rail-pad);
}

/* Les deux regles : un cadre dont chaque bord occupe exactement le pixel
   d'une ligne de la grille (d'ou la largeur + 1 px). */
body.al-site::before {
  content: "";
  position: fixed;
  inset-block: 0;
  inset-inline-start: calc(50% - var(--al-rail) / 2);
  z-index: -1;
  inline-size: calc(var(--al-rail) + 1px);
  border-inline: 1px solid var(--al-rule);
  pointer-events: none;
}

/* Le filet et ses deux reperes sont des fonds : aucun balisage a ajouter,
   et rien ne se superpose aux pseudo-elements des sections. Le premier
   fond est le filet, puis chaque repere en deux traits (11 x 1 et 1 x 6). */
.al-site main > section + section,
.al-site .al-footer {
  background-image:
    linear-gradient(var(--al-rule), var(--al-rule)),
    linear-gradient(var(--al-tick), var(--al-tick)),
    linear-gradient(var(--al-tick), var(--al-tick)),
    linear-gradient(var(--al-tick), var(--al-tick)),
    linear-gradient(var(--al-tick), var(--al-tick));
  background-repeat: no-repeat;
  background-size: 100% 1px, 11px 1px, 1px 6px, 11px 1px, 1px 6px;
  /* Les pourcentages d'un fond se rapportent a (largeur - taille du
     motif) : le demi-pixel ajoute aux traits verticaux les pose pile sur
     la regle. */
  background-position:
    0 0,
    calc(50% - var(--al-rail) / 2) 0,
    calc(50% - var(--al-rail) / 2 + .5px) 0,
    calc(50% + var(--al-rail) / 2) 0,
    calc(50% + var(--al-rail) / 2 + .5px) 0;
}

/* Chapitres numerotes : chaque tete de section prend son numero, 01 /,
   02 /..., devant son surtitre. Un compteur CSS : l'ordre suit la page et
   rien n'est a renumeroter quand une section change de place. */
.al-site main { counter-reset: al-chapitre; }
.al-site .al-section-head { counter-increment: al-chapitre; }
.al-site .al-section-head .al-eyebrow::before {
  content: counter(al-chapitre, decimal-leading-zero) " /";
  color: var(--al-accent-text);
  font-weight: var(--al-fw-bold);
}

/* Logos : les deux versions sont dans la page, le theme choisit. Pas de
   script a attendre, donc pas de logo noir sur fond noir au chargement. */
[data-bs-theme="dark"] .al-on-light,
:root:not([data-bs-theme="dark"]) .al-on-dark { display: none !important; }

::selection { background: var(--al-selection-bg); color: var(--al-selection-fg); }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }

hr { border: 0; border-top: 1px solid var(--al-border); opacity: 1; margin: var(--al-space-6) 0; }

/* Anneau de focus unique et visible partout */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--al-focus-ring);
  outline-offset: 3px;
  border-radius: var(--al-radius-xs);
}

/* Barre de defilement discrete */
* { scrollbar-width: thin; scrollbar-color: var(--al-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--al-border-strong);
  border-radius: var(--al-radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--al-text-subtle); background-clip: content-box; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.al-h1, .al-h2, .al-h3, .al-h4 {
  margin: 0 0 var(--al-space-4);
  font-family: var(--al-font-display);
  color: var(--al-text-strong);
  font-weight: var(--al-fw-semibold);
  line-height: var(--al-lh-heading);
  letter-spacing: var(--al-ls-heading);
  text-wrap: balance;
}

h1, .al-h1 { font-size: var(--al-fs-h1); font-weight: var(--al-fw-bold); line-height: var(--al-lh-snug); }
h2, .al-h2 { font-size: var(--al-fs-h2); font-weight: var(--al-fw-bold); line-height: var(--al-lh-snug); }
h3, .al-h3 { font-size: var(--al-fs-h3); }
h4, .al-h4 { font-size: var(--al-fs-h4); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin: 0 0 var(--al-space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

/* Grands titres editoriaux */
.al-display-1,
.al-display-2,
.al-display-3 {
  font-family: var(--al-font-display);
  font-weight: var(--al-fw-black);
  line-height: var(--al-lh-tight);
  letter-spacing: var(--al-ls-display);
  color: var(--al-text-strong);
  margin: 0 0 var(--al-space-5);
  text-wrap: balance;
}
.al-display-1 { font-size: var(--al-fs-display-1); }
.al-display-2 { font-size: var(--al-fs-display-2); }
.al-display-3 { font-size: var(--al-fs-display-3); line-height: var(--al-lh-snug); }

/* Surtitre monospace : signature editoriale du systeme */
.al-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--al-space-2);
  margin: 0 0 var(--al-space-4);
  font-family: var(--al-font-mono);
  font-size: var(--al-fs-eyebrow);
  font-weight: var(--al-fw-medium);
  letter-spacing: var(--al-ls-eyebrow);
  text-transform: uppercase;
  color: var(--al-text-muted);
}
/* Le filet ferme le surtitre au lieu de l'ouvrir : le mot vient en premier,
   la marque le souligne ensuite. */
.al-eyebrow::after {
  content: "";
  inline-size: 28px;
  block-size: 2px;
  border-radius: var(--al-radius-pill);
  background: var(--al-spectre);
}
.al-eyebrow--plain::after { display: none; }

/* Etiquette : le surtitre des tetes de section centrees, comme un libelle
   d'instrument. Cadre a angles vifs, fond plein pour couper la grille ; le
   filet se raccourcit mais reste a la fin, comme partout. */
.al-eyebrow--pill {
  padding: .5rem .9rem;
  border-radius: 0;
  background: var(--al-canvas);
  box-shadow: inset 0 0 0 1px var(--al-border-strong);
  color: var(--al-text-strong);
  font-weight: var(--al-fw-semibold);
}
/* Encadre, le surtitre se suffit : pas de filet. */
.al-eyebrow--pill::after { display: none; }

.al-lead {
  font-size: var(--al-fs-lead);
  font-weight: var(--al-fw-light);
  line-height: var(--al-lh-relaxed);
  color: var(--al-text-muted);
  max-width: var(--al-measure);
}

.al-mono {
  font-family: var(--al-font-mono);
  font-size: var(--al-fs-xs);
  letter-spacing: 0.04em;
}

/* Numerotation editoriale (01, 02, 03...) */
.al-index {
  font-family: var(--al-font-mono);
  font-size: var(--al-fs-xs);
  color: var(--al-text-subtle);
  letter-spacing: 0.08em;
}

/* Texte au spectre : reserve a 1 mot par ecran */
.al-spectre-text {
  background: var(--al-spectre);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: al-spectre-shift 9s var(--al-ease-in-out) infinite;
}
@keyframes al-spectre-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Soulignement au spectre */
.al-underline-spectre {
  background-image: var(--al-spectre);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
  padding-bottom: 2px;
}

.al-measure       { max-width: var(--al-measure); }
.al-measure-tight { max-width: var(--al-measure-tight); }

/* Poids : classes explicites plutot que .fw-bolder approximatif */
.al-fw-light     { font-weight: var(--al-fw-light) !important; }
.al-fw-regular   { font-weight: var(--al-fw-regular) !important; }
.al-fw-medium    { font-weight: var(--al-fw-medium) !important; }
.al-fw-semibold  { font-weight: var(--al-fw-semibold) !important; }
.al-fw-bold      { font-weight: var(--al-fw-bold) !important; }
.al-fw-extrabold { font-weight: var(--al-fw-extrabold) !important; }
.al-fw-black     { font-weight: var(--al-fw-black) !important; }

/* Couleurs de texte semantiques */
.al-text-strong  { color: var(--al-text-strong) !important; }
.al-text-muted   { color: var(--al-text-muted) !important; }
.al-text-subtle  { color: var(--al-text-subtle) !important; }
.al-text-brand   { color: var(--al-text-brand) !important; }
.al-text-azur    { color: var(--al-azur-500) !important; }
.al-text-magenta { color: var(--al-magenta-500) !important; }
.al-text-solaire { color: var(--al-solaire-600) !important; }

a { color: inherit; text-decoration: none; }
a.al-link {
  color: var(--al-accent-text);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--al-dur-base) var(--al-ease-out), color var(--al-dur-fast) linear;
}
a.al-link:hover { background-size: 100% 1px; color: var(--al-accent-hover); }

/* --------------------------------------------------------------------------
   4. SECTIONS & MISE EN PAGE
   -------------------------------------------------------------------------- */
.al-section    { padding-block: var(--al-section-y); position: relative; }
.al-section-lg { padding-block: var(--al-section-y-lg); position: relative; }
.al-section-sm { padding-block: calc(var(--al-section-y) * .6); position: relative; }

/* Fonds de section : suivent le theme actif. Le site public n'en pose plus
   (la grille de fond fait le lien), ils restent pour le back office. */
.al-bg-canvas  { background-color: var(--al-canvas); }
.al-bg-sunken  { background-color: var(--al-surface-sunken); }
.al-bg-ink     { background-color: var(--al-ink-950); }
.al-bg-veil    { background-image: var(--al-spectre-veil); }
.al-bg-grid {
  background-image:
    linear-gradient(var(--al-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--al-border-subtle) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
}
.al-bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Filet horizontal au spectre */
.al-rule {
  block-size: 1px;
  inline-size: 100%;
  border: 0;
  margin: 0;
  background: var(--al-border);
}
.al-rule--spectre { block-size: 2px; background: var(--al-spectre); opacity: .9; }

/* En-tete de section reutilisable */
.al-section-head { margin-bottom: var(--al-block-gap); }
.al-section-head__title { margin-bottom: var(--al-space-4); }
.al-section-head--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--al-space-6);
  align-items: end;
}
@media (min-width: 992px) {
  .al-section-head--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .al-section-head--split > :last-child { justify-self: end; text-align: right; }
}

/* Variante centree : surtitre en pastille, titre et chapeau sur l'axe. Pour
   les sections qui ouvrent un chapitre, pas pour les sections de lecture. */
.al-section-head--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.al-section-head--center .al-display-3 { max-inline-size: 20ch; text-wrap: balance; }
.al-section-head--center .al-lead { max-inline-size: 40rem; margin-inline: auto; }
.al-section-head--center .al-lead:first-child { margin-block-start: var(--al-space-5); }

/* Pile verticale generique */
.al-stack        { display: flex; flex-direction: column; }
.al-stack > * + * { margin-top: var(--al-space-4); }
.al-stack-sm > * + * { margin-top: var(--al-space-2); }
.al-stack-lg > * + * { margin-top: var(--al-space-6); }

.al-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--al-space-3); }

/* --------------------------------------------------------------------------
   5. ACCESSIBILITE & MOUVEMENT REDUIT
   -------------------------------------------------------------------------- */
.al-skip-link {
  position: absolute;
  inset-inline-start: var(--al-space-4);
  inset-block-start: -100px;
  z-index: var(--al-z-toast);
  padding: var(--al-space-3) var(--al-space-5);
  border-radius: var(--al-radius-pill);
  background: var(--al-ink-950);
  color: #fff;
  font-weight: var(--al-fw-semibold);
  transition: inset-block-start var(--al-dur-base) var(--al-ease-out);
}
.al-skip-link:focus-visible { inset-block-start: var(--al-space-4); }

/* Un mot compose ne se coupe pas au trait d'union (TexteHelper::titre). */
.al-insecable { white-space: nowrap; }

.al-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .al-reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   6. COMPATIBILITE : anciennes classes de style.css
   Le site historique utilise .style_light / .style_bold / .style_gradient...
   On les conserve pour ne rien casser pendant la migration.
   -------------------------------------------------------------------------- */
.style_light    { font-family: var(--al-font-display) !important; font-weight: var(--al-fw-light) !important; }
.style_medium   { font-family: var(--al-font-display) !important; font-weight: var(--al-fw-medium) !important; }
.style_semiBold { font-family: var(--al-font-display) !important; font-weight: var(--al-fw-semibold) !important; }
.style_bold     { font-family: var(--al-font-display) !important; font-weight: var(--al-fw-extrabold) !important; }
.style_bolder   { font-family: var(--al-font-display) !important; font-weight: var(--al-fw-black) !important; }
.style_gradient { background: var(--al-spectre); }
.style_gradient_text_animate {
  background: var(--al-spectre);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: al-spectre-shift 9s var(--al-ease-in-out) infinite;
}