/* =========================================================================
   COUCHE DE THÈME — Les Productions du 10 avril
   ─────────────────────────────────────────────────────────────────────────
   Ce fichier fait, en variables d'exécution, ce que le socle SASS de
   Percumédia (`_socle-percumedia.scss`, `_theme-10avril.scss`) ferait à la
   compilation. Ces deux fichiers n'ont pas été livrés ; s'ils le sont un
   jour, la plupart des règles ci-dessous deviennent inutiles et ce fichier
   se réduit d'autant.

   Se charge APRÈS les jetons, donc après `bootstrap-bridge.css`.
   Aucune couleur hors palette, aucune valeur d'espacement hors échelle.

   LIMITE CONNUE, à dire à toute personne qui reprend le thème :
   les utilitaires d'espacement de Bootstrap (`.mt-3`, `.p-4`…) sont des
   classes COMPILÉES. Aucune variable CSS ne les renumérote. Ici `.mt-3`
   vaut donc 16 px, et non les 12 px qu'annonce l'arbitrage 12 du système.
   => NE PAS EMPLOYER les utilitaires d'espacement de Bootstrap dans ce
      thème. Employer `var(--e-1..--e-32)` ou les utilitaires `.dix-*`.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Le rail gauche unique — la règle la plus importante du projet.
   Arbitrage 13 : le padding est sur le conteneur pleine largeur, le plafond
   de 1200 px sur l'enfant centré. Les poser sur le même élément additionne
   la marge de centrage et le rail (80 px au lieu de 40) sans que rien ne le
   signale. Mobile d'abord, aux trois largeurs obligatoires de la charte.
   ------------------------------------------------------------------------- */
:root { --rail: var(--rail-360); --gout: var(--gouttiere-360); }
@media (min-width: 768px)  { :root { --rail: var(--rail-768);  --gout: var(--grille-gouttiere); } }
@media (min-width: 1280px) { :root { --rail: var(--rail-1280); --gout: var(--grille-gouttiere); } }

/* Deux valeurs que les maquettes écrivent en dur et que le système ne nomme
   pas (document de reprise, décisions ouvertes), posées ici une fois :
   - le voile des bandeaux photographiques, décision du 24 septembre — .80,
     et non le .72 d'une annexe périmée ;
   - la couleur des surtitres et chapeaux sur fond --c-vert-900, présente
     dans douze maquettes (10,1:1 sur le vert). */
:root {
  --bandeau-voile: rgba(15, 47, 35, .8);
  --c-surtitre-sombre: #C9DCD2;
}

/* LE RAIL EST `.container`, ET RIEN D'AUTRE.
   Plutôt qu'une classe maison qu'il faut penser à poser — donc oubliable —
   c'est le conteneur de Bootstrap qui PORTE la règle. Les gabarits de barrio
   l'emploient déjà partout : l'alignement devient le comportement par défaut
   et non une discipline. Une seule façon de faire, donc une seule à vérifier.

   Combiné au plafond de 1200 px posé par le pont, on retrouve exactement les
   trois largeurs de la charte :
     1280 → padding 40, contenu plafonné à 1200, bord gauche à 40
      768 → padding 24, contenu fluide à 720, bord gauche à 24
      360 → padding 16, contenu fluide à 328, bord gauche à 16 */
.container, .container-xxl {
  padding-inline: var(--rail);
  /* ARBITRAGE 13 — le piège, et il est silencieux.
     Le pont pose `max-width: 1200px` sur `.container`. Si on y ajoute
     simplement le padding du rail, le plafond s'applique à la boîte de
     BORDURE : à 1280 px le conteneur est centré (marge 40) PUIS décalé du
     padding (40), et le contenu commence à 80 — pas 40. Mesuré : bord à 80,
     contenu à 1120 au lieu de 1200.
     Le plafond doit donc englober le rail, pour que la boîte de contenu
     vaille 1200 et commence exactement au rail :
       1280 → plafond 1280, pas de centrage, contenu 1200 à x=40
        768 → plafond  768, pas de centrage, contenu  720 à x=24
        360 → plafond 1232 > 360, fluide,    contenu  328 à x=16
     Au-delà de 1280 le conteneur se centre et le contenu s'éloigne du bord de
     page — c'est le comportement des maquettes, qui posent le padding sur le
     bloc pleine largeur et le plafond sur l'enfant centré. */
  max-width: calc(var(--l-max-page) + 2 * var(--rail));
}
.container-fluid { padding-inline: var(--rail); max-width: none; }

/* Une `.row` hors d'un `.container` sort du rail : ses gouttières négatives
   (-12 px) ne sont absorbées par aucun padding parent, la page déborde et
   tout le document glisse. Barrio pose `.row` sur ses régions sans conteneur.
   Mesuré : débordement de 12 px, bord gauche à 28 au lieu de 40. */
.region.row { --bs-gutter-x: 0; }

/* -------------------------------------------------------------------------
   1 bis. Mot-symbole — tailles imposées et zone de verrouillage (arbitrage 25)
   La zone de verrouillage vaut 12 % de la largeur du mot sur les quatre côtés
   et NE DOIT PAS dépasser le rail. D'où les trois tailles, et elles seules :
     1280 → 210 px, zone 25,2 ≤ rail 40
      768 → 180 px, zone 21,6 ≤ rail 24
      360 → 130 px, zone 15,6 ≤ rail 16   (plafond dur : 133 px)
   Sans contrainte, le SVG s'affiche à sa taille naturelle (1000 px) : mesuré
   à 682 px de large à 768 px de fenêtre, ce qui faisait déborder la page de
   124 px et sortir l'en-tête du rail.
   ------------------------------------------------------------------------- */
:root { --logo-largeur: 130px; }
@media (min-width: 768px)  { :root { --logo-largeur: 180px; } }
@media (min-width: 1280px) { :root { --logo-largeur: 210px; } }

.navbar-brand img,
.site-logo img,
.region-header .site-branding img {
  display: block;
  width: var(--logo-largeur);
  height: auto;
  max-width: 100%;
}
/* Le verrouillage est un bloc, jamais un inline-block : un inline-block crée
   une ligne et l'interlignage du parent ajoute ~8 px sous le mot, ce qui
   décentre le verrouillage dans sa rangée (arbitrage 17). */
.navbar-brand { display: block; line-height: 0; }
/* Le nom du site en texte à côté du mot-symbole ferait doublon et force le
   débordement avec nowrap. Il reste accessible, il ne s'affiche pas. */
.navbar-brand .site-name { display: none; }

/* -------------------------------------------------------------------------
   2. Interdits de forme (readme § 4)
   « Aucune ombre portée, aucun dégradé, aucun effet de profondeur. C'est la
   règle la plus facile à enfreindre par réflexe. »
   Équivaut à $enable-shadows: false et $enable-gradients: false.
   ------------------------------------------------------------------------- */
:root {
  --bs-box-shadow: var(--ombre);
  --bs-box-shadow-sm: var(--ombre);
  --bs-box-shadow-lg: var(--ombre);
  --bs-box-shadow-inset: var(--ombre);
  /* Aucun rayon au-delà de 4 px. La forme « pilule » est neutralisée. */
  --bs-border-radius-pill: var(--r-sm);
  --bs-border-radius-xl: var(--r-md);
  --bs-border-radius-xxl: var(--r-md);
}
.shadow, .shadow-sm, .shadow-lg { box-shadow: var(--ombre) !important; }
.rounded-pill { border-radius: var(--r-sm) !important; }
.bg-gradient { background-image: none !important; }

/* -------------------------------------------------------------------------
   3. Cible tactile 44 px partout (readme § 4)
   Les gabarits Bootstrap donnent ~38 px. Le socle relève $btn-padding-y à
   .6875rem ; ici la variable d'exécution fait le même travail.
   Arbitrage 20 : la cible est portée par le LIEN, jamais par sa rangée.
   ------------------------------------------------------------------------- */
:root { --bs-btn-padding-y: .6875rem; }
.btn, .form-control, .form-select, .page-link, .nav-link, .dropdown-item {
  min-height: var(--cible-min);
}
/* Le bouton de tiroir mesurait 40 px à 360 : c'est le seul contrôle du thème
   qui ouvre la navigation au pouce, il ne peut pas être sous le plancher. */
.navbar-toggler {
  min-height: var(--cible-min);
  min-width: var(--cible-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn, .page-link, .nav-link, .dropdown-item {
  display: inline-flex;
  align-items: center;
}
.btn { justify-content: center; }

/* -------------------------------------------------------------------------
   4. Focus clavier — NE JAMAIS SUPPRIMER.
   « C'est l'état qu'on oublie et celui dont dépend la conformité AA. »
   Les ombres de focus de Bootstrap sont désactivées, ce qui rend le contour
   indispensable : sans lui, plus aucun signal au clavier.
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: var(--o-focus);
}
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus-visible,
.nav-link:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--c-focus);
  outline-offset: var(--o-focus);
}

/* -------------------------------------------------------------------------
   5. Typographie — Bootstrap compose les titres en 500, la charte veut 400.
   « Le 500 par défaut de Bootstrap est trop lourd pour une romane. »
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--f-titre);
  font-weight: var(--g-normal);
  line-height: var(--l-titre);
  letter-spacing: var(--a-titre);
  color: var(--c-ink);
}
/* Une donnée technique se lit comme un titre. */
.dix-donnee { font-family: var(--f-titre); font-variant-numeric: tabular-nums; }
/* Chiffres tabulaires partout où des valeurs s'empilent. */
table, .dix-chiffres { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   6. État désactivé — jamais une simple opacité (readme § 4).
   ------------------------------------------------------------------------- */
.btn:disabled, .btn.disabled,
.form-control:disabled, .form-select:disabled {
  background: var(--action-desactivee-fond);
  color: var(--action-desactivee-texte);
  border-color: var(--border-defaut);
  opacity: 1;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   7. Section sombre — le pont porte déjà [data-bs-theme="dark"] ; on ajoute
   ici les cas où la bande occupe toute la largeur.
   ------------------------------------------------------------------------- */
.section--sombre { background: var(--surface-sombre); color: var(--text-sur-sombre); }

/* Barrio peint le pied de page en NOIR PUR (rgb(0,0,0)), qui n'est dans
   aucune palette de la charte. La bande sombre de la maison est
   --c-vert-900 #0F2F23. Mesuré sur la page d'accueil avant correction. */
.site-footer {
  /* Barrio y ajoutait 35 px et 30 px : l'air vient de pied-site. */
  padding: 0;
  background: var(--surface-sombre);
  color: var(--text-sur-sombre);
}
/* Contenu et liens : composant pied-site (components/pied-site). */

/* -------------------------------------------------------------------------
   8. Images — angles droits, ratios imposés, filet d'ancrage sur fond clair.
   ------------------------------------------------------------------------- */
img { border-radius: var(--r-image); }
.dix-ratio-banniere  { aspect-ratio: var(--img-banniere);  object-fit: cover; }
.dix-ratio-production{ aspect-ratio: var(--img-production); object-fit: cover; }
.dix-ratio-portrait  { aspect-ratio: var(--img-portrait);  object-fit: cover; }
.dix-ratio-affiche   { aspect-ratio: var(--img-affiche);   object-fit: cover; }
.dix-img-ancree { border: var(--img-filet); }

/* -------------------------------------------------------------------------
   9. Mouvement — rien d'autre n'est animé que la couleur.
   prefers-reduced-motion est géré par les jetons (durées à 0).
   ------------------------------------------------------------------------- */
a, .btn, .nav-link, .page-link {
  transition: color var(--m-rapide) var(--m-courbe),
              background-color var(--m-normal) var(--m-courbe),
              border-color var(--m-rapide) var(--m-courbe);
}
/* Survol : changement de couleur, jamais d'échelle ni d'ombre. */
.btn:hover, .btn:active { transform: none; box-shadow: var(--ombre); }

/* -------------------------------------------------------------------------
   10. Bascule de langue FR/EN — EnTeteSite › Utilitaires, annexe A.
   « Pressé : fond --c-vert-700, texte --c-paper · repos : texte --c-ink-2 ».
   Le gabarit est templates/navigation/links--language-block.html.twig.
   ------------------------------------------------------------------------- */
.bascule-langue {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--c-line-fort);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.bascule-langue a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-min);
  min-width: var(--cible-min);
  padding: 0 var(--e-3);
  font-family: var(--f-texte);
  font-size: var(--t-label);
  font-weight: var(--g-fort);
  letter-spacing: var(--a-label);
  line-height: 1;
  color: var(--c-ink-2);
  text-decoration: none;
}
/* La maquette ne dessine pas de survol pour la bascule ; c'est celui des
   entrées du menu de la même rangée (EnTeteSite › Lien). */
.bascule-langue a:hover { color: var(--c-vert-700); }
.bascule-langue a[aria-current="page"],
.bascule-langue a.is-active {
  background: var(--c-vert-700);
  color: var(--c-paper);
}
/* « Contour --c-focus sur le bouton visé, à l'intérieur du groupe » : le
   groupe coupe ce qui déborde (overflow, pour les angles), un contour posé
   à l'extérieur serait rogné. */
.bascule-langue a:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
}
/* Écart à la maquette, décidé le 5 octobre 2026 : sur le bouton pressé, le
   contour --c-focus tombe sur --c-vert-700 à environ 1,6:1, sous les 3:1
   qu'exige un indicateur de focus (WCAG 1.4.11). Le papier, lui, tranche
   sur le vert. Le bouton au repos garde --c-focus, qui tient sur le papier. */
.bascule-langue a[aria-current="page"]:focus-visible,
.bascule-langue a.is-active:focus-visible {
  outline-color: var(--c-paper);
}

/* -------------------------------------------------------------------------
   11. En-tête — EnTeteSite, aux trois paliers du rail.
   Gabarit : templates/layout/page.html.twig. Mobile d'abord.
     moins de 768 → mot-symbole, utilitaires, bouton ; menu en tiroir
     768 à 1279   → mot-symbole et utilitaires ; menu au rail en 2e rangée
     1280 et plus → une rangée : mot-symbole, menu, utilitaires
   Hauteur de rangée : Logo.rangeeMin — hauteur du mot plus deux zones de
   verrouillage (12 % de la largeur), arrondie au pixel supérieur.
   ------------------------------------------------------------------------- */
:root { --entete-rangee: 78px; }                                 /* 130 px, fichier « petite » */
@media (min-width: 768px)  { :root { --entete-rangee: 107px; } } /* 180 px */
@media (min-width: 1280px) { :root { --entete-rangee: 124px; } } /* 210 px */

.header {
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-line);
}
.entete {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo utilitaires"
    "menu menu";
  grid-template-rows: minmax(var(--entete-rangee), auto) auto;
  align-items: center;
  column-gap: var(--e-4);
}
.entete__logo { grid-area: logo; }
.navbar-brand picture { display: block; }
.entete__utilitaires {
  grid-area: utilitaires;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
/* Le filet du haut court d'un bord à l'autre de l'en-tête, le menu reste au
   rail : la rangée déborde du rail de chaque côté et le reprend en padding. */
.entete__menu {
  grid-area: menu;
  margin-inline: calc(-1 * var(--rail));
  padding-inline: var(--rail);
  border-top: 1px solid var(--c-line);
}

/* Bouton du tiroir — mobile seulement. */
.entete__tiroir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-min);
  min-width: var(--cible-min);
  padding: 0;
  background: none;
  border: 1px solid var(--c-line-fort);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: 20px;
  line-height: 1;
}
.entete__tiroir[aria-expanded="true"] .bi-list,
.entete__tiroir[aria-expanded="false"] .bi-x-lg { display: none; }

/* Menu en tiroir : entrées empilées, 44 px chacune, filet sous chacune. */
.entete__menu .nav {
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0;
}
/* Le ::after de .clearfix devient un élément de la rangée flex et ajoute un
   écart vide après la dernière entrée : mesuré à 48 px au lieu de 24 avant
   la bascule. */
.entete__menu .nav::after { content: none; }
.entete__menu .nav-item { border-bottom: 1px solid var(--c-line); }
.entete__menu .nav-link {
  display: flex;
  align-items: center;
  min-height: var(--cible-min);
  padding: 0;
  font-family: var(--f-texte);
  font-size: var(--t-base);
  font-weight: var(--g-normal);
  color: var(--c-ink);
  text-decoration: none;
}
.entete__menu .nav-link[aria-current="page"],
.entete__menu .nav-link.is-active { font-weight: var(--g-fort); }

@media (min-width: 768px) {
  .entete__tiroir { display: none; }
  /* Toujours déplié dès la tablette, même si le tiroir a été ouvert puis la
     fenêtre élargie. */
  .entete__menu.collapse,
  .entete__menu.collapsing {
    display: block !important;
    height: auto !important;
  }
  .entete__menu .nav {
    flex-direction: row;
    gap: var(--e-4);
  }
  .entete__menu .nav-item { border-bottom: 0; }
  /* EnTeteSite › Lien : filet de 2 px sous l'entrée, transparent au repos. */
  .entete__menu .nav-link {
    display: inline-flex;
    font-size: var(--t-small);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .entete__menu .nav-link:hover {
    color: var(--c-vert-500);
    border-bottom-color: var(--c-vert-900);
  }
  .entete__menu .nav-link:active {
    color: var(--c-vert-900);
    border-bottom-color: var(--c-vert-900);
  }
  .entete__menu .nav-link[aria-current="page"],
  .entete__menu .nav-link.is-active {
    color: var(--c-vert-900);
    border-bottom-color: var(--c-vert-700);
  }
}

@media (min-width: 1280px) {
  .entete {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo menu utilitaires";
    grid-template-rows: minmax(var(--entete-rangee), auto);
    column-gap: var(--e-6);
  }
  .entete__menu {
    justify-self: end;
    margin-inline: 0;
    padding-inline: 0;
    border-top: 0;
  }
  .entete__menu .nav { gap: var(--e-6); }
  .entete__menu .nav-link { padding: 0 2px; }
}

/* -------------------------------------------------------------------------
   12. Pagination — ds › Pagination (templates/navigation/pager.html.twig).
   Cases de 44 px au moins ; page courante pleine --c-vert-700 ; survol
   --c-vert-100 (changement de couleur seulement) ; chevrons inertes aux
   extrémités. Le focus clavier vient de :focus-visible global.
   ------------------------------------------------------------------------- */
.pagination-dix__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pagination-dix__case {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cible-min);
  min-height: var(--cible-min);
  padding: 0 var(--e-2);
  font-family: var(--f-texte);
  font-size: var(--t-small);
  font-weight: var(--g-normal);
  color: var(--c-ink);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.pagination-dix__case .bi { font-size: 13px; line-height: 1; }
a.pagination-dix__case:hover { background: var(--c-vert-100); color: var(--c-ink); }
.pagination-dix__case--courante {
  font-weight: var(--g-fort);
  color: var(--c-paper);
  background: var(--c-vert-700);
  border-color: var(--c-vert-700);
}
.pagination-dix__case--inerte { color: var(--c-ink-3); cursor: not-allowed; }
.pagination-dix__ellipse {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  padding: 0 var(--e-1);
  color: var(--c-ink-3);
}

/* -------------------------------------------------------------------------
   13. Champs obligatoires — « (obligatoire) » après l'étiquette
   (ds › EtiquetteChamp), écrit par prod10avril_preprocess_form_element_label.
   L'astérisque du cœur est retiré : il doublerait la mention.
   ------------------------------------------------------------------------- */
.form-required::after { content: none !important; background: none !important; }
.champ-obligatoire { font-weight: var(--g-normal); color: var(--c-ink-2); }

/* -------------------------------------------------------------------------
   14. Boutons générés par Drupal (formulaires) — ds › Bouton primaire.
   Le readme fait correspondre Bouton à .btn + .btn-primary : sans ces
   variables, le bouton d'envoi d'un formulaire restait au bleu de Bootstrap
   (mesuré sur « Proposer un projet »).
   ------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: var(--c-paper);
  --bs-btn-bg: var(--c-vert-700);
  --bs-btn-border-color: var(--c-vert-700);
  --bs-btn-hover-color: var(--c-paper);
  --bs-btn-hover-bg: var(--c-vert-900);
  --bs-btn-hover-border-color: var(--c-vert-900);
  --bs-btn-active-color: var(--c-paper);
  --bs-btn-active-bg: var(--c-vert-900);
  --bs-btn-active-border-color: var(--c-vert-900);
  --bs-btn-disabled-color: var(--c-ink-3);
  --bs-btn-disabled-bg: var(--c-paper-3);
  --bs-btn-disabled-border-color: var(--c-line);
  --bs-btn-padding-x: var(--e-6);
  --bs-btn-font-size: var(--t-small);
  --bs-btn-font-weight: var(--g-fort);
  --bs-btn-border-radius: var(--r-sm);
}

/* ds › CaseACocher cochée : --c-vert-700, et non le bleu de Bootstrap. */
.form-check-input:checked { background-color: var(--c-vert-700); border-color: var(--c-vert-700); }
.form-check-input { border-color: var(--c-line-fort); }