/**
 * Base — CDOS 30
 * Reset raisonné, éléments HTML, utilitaires de mise en page.
 * Ne contient aucune valeur littérale : tout vient de _tokens.css.
 */

/* ---------------------------------------------------------------
 * Reset
 * --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Voir « .pleine-largeur » : rogne les quelques pixels que « 100vw »
     dépasse à cause de la barre de défilement. « clip » et non
     « hidden », qui casserait le positionnement collant de l'en-tête. */
  overflow-x: clip;
}

@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;
  }
}

body {
  margin: 0;
  background-color: var(--couleur-fond);
  color: var(--couleur-texte);
  font-family: var(--police-texte);
  font-size: var(--t-corps);
  font-weight: var(--graisse-normale);
  line-height: var(--interligne-corps);
  /* Pas de -webkit-font-smoothing : la production laisse « auto ».
     « antialiased » amincit visiblement les traits sous macOS et fait
     lire le 400 comme du 300. */
  text-rendering: optimizeLegibility;
}

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

:where(img, video) { height: auto; }

/*
 * Les médias WordPress portent width et height : on évite le décalage
 * de mise en page sans casser le ratio quand une largeur CSS
 * s'applique.
 *
 * « :where() » ramène la spécificité à zéro, et ce n'est pas un détail.
 * Sans lui, « img[width][height] » pèse deux attributs plus un élément
 * — davantage qu'une simple classe. La hauteur d'une image qu'un
 * composant voulait étirer à son cadre restait donc à sa proportion,
 * sans qu'aucune règle ne paraisse fautive. Un reset doit pouvoir être
 * contredit par le composant qui le suit.
 */
:where(img[width][height]) { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; }

/* ---------------------------------------------------------------
 * Typographie
 * --------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--e-s);
  font-family: var(--police-titre);
  color: var(--couleur-titre);
  line-height: var(--interligne-titre);
  text-wrap: balance;
  overflow-wrap: break-word;
}

/*
 * Le filet de sécurité des titres et des surtitres.
 *
 * Un mot plus large que sa colonne déborde sans rien signaler — sur les
 * pages de rubrique, « PROFESSIONNALISATION » passait par-dessus la
 * colonne de texte. « overflow-wrap: break-word » le replie plutôt que
 * de le laisser sortir. C'est un filet, pas une mise en page : le repli
 * se fait sans trait d'union. Pour couper proprement, on pose une barre
 * verticale dans le champ, que cdos30_cesure() transforme en trait
 * d'union conditionnel.
 *
 * La césure automatique ne peut pas jouer ce rôle : « hyphens: auto »
 * dépend d'un dictionnaire que le navigateur télécharge à part, et elle
 * est ignorée sur un texte passé en capitales par la feuille de style.
 */
.presentation__surtitre,
.actions__surtitre,
.acces-rapides__surtitre,
.rappel__surtitre,
.fiche__surtitre,
.thematique__sous-titre,
.triptyque__sous-titre {
  overflow-wrap: break-word;
}

h1 { font-size: var(--t-h1); font-weight: var(--graisse-extra); letter-spacing: -0.015em; }
h2 { font-size: var(--t-h2); font-weight: var(--graisse-forte); letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); font-weight: var(--graisse-forte); }
h4 { font-size: var(--t-h4); font-weight: var(--graisse-forte); }
h5 { font-size: var(--t-h5); font-weight: var(--graisse-medium); }
h6 { font-size: var(--t-h6); font-weight: var(--graisse-medium); text-transform: uppercase; letter-spacing: var(--interlettre-label); }

p,
ul,
ol,
dl,
blockquote,
figure,
table { margin: 0 0 var(--e-s); }

p { text-wrap: pretty; }

a {
  color: var(--couleur-lien);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}

a:hover { color: var(--couleur-lien-survol); }

/* RGAA 10.7 : la prise de focus doit toujours être visible.
   :focus-visible seul suffit, mais on garde un repli pour les
   navigateurs qui ne le supportent pas. */
:focus { outline: var(--focus-epaisseur) solid var(--couleur-focus); outline-offset: var(--focus-decalage); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: var(--focus-epaisseur) solid var(--couleur-focus); outline-offset: var(--focus-decalage); }

strong, b { font-weight: var(--graisse-forte); }

small { font-size: var(--t-petit); }

hr {
  border: 0;
  border-top: 1px solid var(--couleur-filet);
  margin: var(--e-l) 0;
}

/* Les chiffres s'alignent dans les tableaux et les dates */
time,
td.nombre { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
 * Mise en page
 * --------------------------------------------------------------- */

.conteneur {
  width: 100%;
  max-width: calc(var(--largeur-contenu) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.conteneur--etroit {
  max-width: calc(var(--largeur-texte) + 2 * var(--gouttiere));
}

/*
 * Sortir d'un conteneur pour occuper toute la fenêtre.
 *
 * Les héros et les bandeaux sont posés dans le flux du contenu, donc à
 * l'intérieur de « .conteneur » qui les borne à 1196 px. Les marges
 * négatives les en font sortir : « 50 % » est la moitié du conteneur,
 * « 50vw » la moitié de la fenêtre, la différence est exactement ce qui
 * dépasse de chaque côté.
 *
 * « 100vw » compte la barre de défilement verticale, d'où quelques
 * pixels de trop à droite. « overflow-x: clip » sur la racine les
 * rogne — et « clip » plutôt que « hidden », qui casserait le
 * positionnement collant de l'en-tête.
 */
.pleine-largeur {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.section {
  padding-block: var(--e-section);
}

.section--alt   { background-color: var(--couleur-fond-alt); }
.section--accent{ background-color: var(--couleur-fond-accent); }
.section--inverse {
  background-color: var(--couleur-fond-inverse);
  color: var(--couleur-texte-inverse);
}
.section--inverse :is(h1, h2, h3, h4, h5, h6) { color: var(--couleur-texte-inverse); }
.section--inverse a { color: var(--c-bleu-pale); }

/* Grille de cartes : autant de colonnes que la largeur le permet,
   sans point de rupture à maintenir. */
.grille {
  display: grid;
  gap: var(--colonnes-gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
}

.grille--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }

.pile {
  display: flex;
  flex-direction: column;
  gap: var(--e-s);
}

/* ---------------------------------------------------------------
 * Contenu éditorial (post_content des articles)
 * --------------------------------------------------------------- */

.editorial {
  max-width: var(--largeur-texte);
}

.editorial > * + * { margin-top: var(--e-s); }
.editorial > * + :is(h2, h3, h4) { margin-top: var(--e-l); }

.editorial :is(ul, ol) { padding-left: 1.25em; }
.editorial li + li { margin-top: var(--e-3xs); }

.editorial blockquote {
  margin-inline: 0;
  padding: var(--e-s) var(--e-m);
  border-left: 4px solid var(--couleur-accent-1);
  background-color: var(--couleur-fond-alt);
  font-size: var(--t-corps-grand);
}

.editorial figure { margin-inline: 0; }

.editorial figcaption {
  margin-top: var(--e-2xs);
  color: var(--couleur-texte-doux);
  font-size: var(--t-petit);
}

/* Les tableaux d'un contenu éditorial débordent sur mobile :
   ils défilent dans leur propre boîte, jamais la page. */
.tableau-defilant {
  overflow-x: auto;
  margin-bottom: var(--e-s);
}

.editorial table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
}

.editorial :is(th, td) {
  padding: var(--e-2xs) var(--e-xs);
  border-bottom: 1px solid var(--couleur-filet);
  text-align: left;
}

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

/* Visible des seuls lecteurs d'écran (RGAA) */
.lecteur-ecran-uniquement {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement : masqué jusqu'à la prise de focus clavier */
.lien-evitement {
  position: absolute;
  top: var(--e-2xs);
  left: var(--e-2xs);
  z-index: 1000;
  padding: var(--e-2xs) var(--e-s);
  background-color: var(--couleur-fond);
  color: var(--couleur-lien);
  border: 2px solid var(--couleur-focus);
  border-radius: var(--rayon-bouton);
  transform: translateY(-200%);
}

.lien-evitement:focus { transform: translateY(0); }

/* Étiquette en Barlow Condensed : surtitres, dates, catégories */
.etiquette {
  font-family: var(--police-label);
  font-size: var(--t-petit);
  font-weight: var(--graisse-medium);
  letter-spacing: var(--interlettre-label);
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
}

/* Rend une carte entière cliquable à partir d'un seul lien réel,
   sans dupliquer le lien pour les lecteurs d'écran. */
.lien-etendu::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Un groupe de mots qui ne doit pas se couper — les mots composés,
   les nombres suivis de leur unité. */
.insecable { white-space: nowrap; }

/* ---------------------------------------------------------------
 * Le « bec »
 *
 * Petit picto récurrent de la charte. Posé en masque et non en image :
 * sa couleur vient du CSS, donc un seul fichier suffit pour toutes les
 * rubriques et pour les deux orientations.
 *
 * Purement décoratif — sur un <span> vide, rien n'est annoncé.
 * --------------------------------------------------------------- */

.bec {
  display: inline-block;
  width: var(--bec-taille, 1.5rem);
  height: var(--bec-taille, 1.5rem);
  background-color: var(--bec-couleur, var(--couleur-rubrique));
  -webkit-mask-image: var(--bec-fichier);
  mask-image: var(--bec-fichier);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: middle;
}

/* La symétrie verticale : un seul fichier, deux orientations. */
.bec--gauche { transform: scaleX(-1); }

/* ---------------------------------------------------------------
 * Les chevrons de la charte
 *
 * Un masque plutôt qu'un caractère : le contenu généré d'un ::before est
 * lu par les lecteurs d'écran, et « supérieur supérieur supérieur »
 * avant chaque titre n'apprend rien. Ici la couleur vient de la rubrique
 * et rien n'est annoncé.
 *
 * La mécanique vit dans le socle et non dans la feuille des motifs :
 * quatre composants s'en servent désormais, dont la grille de fiches,
 * qui s'affiche sur des pages où la feuille des motifs n'est pas
 * chargée. Chaque bloc ne pose ensuite que sa largeur et sa place.
 *
 * La hauteur se déduit du dessin — 32 sur 12 dans la boîte du SVG — pour
 * qu'aucune valeur ne puisse contredire l'autre. Le calage vertical vise
 * les capitales de la ligne qu'il accompagne : Barlow monte à 1000/1000
 * et ses capitales à 700, leur milieu est donc à 0,65 em du haut de la
 * boîte. Le « em » parle du titre parce que chaque en-tête déclare son
 * corps.
 * --------------------------------------------------------------- */

.presentation--profond .presentation__entete::before,
.thematique__entete::before,
:is(.fiches--colonnes, .fiches--empilees) .fiche__entete::before,
.encart__corps::before,
.articles-annee__titre::before,
.actions__chevrons,
.rappel__chevrons {
  content: "";
  width: var(--chevrons-largeur);
  height: calc(var(--chevrons-largeur) / 32 * 12);
  margin-top: calc(0.65em - var(--chevrons-largeur) / 32 * 6);
  background-color: var(--couleur-rubrique-texte);
  -webkit-mask-image: var(--chevrons);
  mask-image: var(--chevrons);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}