/* ============================================================
   UNA DES PAYS DU CALAISIS - feuille de style du site
   Mobile d'abord. Points de rupture : 640 / 768 / 1024 / 1280 / 1536 px.
   1rem = 18 px (voir html) : tout le texte courant fait 18 px minimum.
   ============================================================ */

/* ============================================================
   POLICE - Atkinson Hyperlegible, hébergée sur le serveur (performance + RGPD).
   Conçue pour les personnes malvoyantes (lettres très différenciées : I/l/1, O/0).
   ============================================================ */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   DESIGN TOKENS - charte UNA des Pays du Calaisis
   ============================================================ */
:root {
  --bleu: #0090d6;          /* Bleu charte : aplats décoratifs uniquement (3,5:1 sur blanc) */
  --bleu-fonce: #0072aa;    /* Couleur d'action : boutons, liens, texte bleu (5,3:1 sur blanc) */
  --bleu-survol: #005a87;   /* Survol des boutons et liens (7,5:1 sur blanc) */
  --bleu-clair: #e8f5fc;    /* Fonds de sections */
  --bleu-voile: rgba(0, 114, 170, .3);
  --nuit: #0a3d5c;          /* Footer (11:1 avec le blanc), contour de focus */
  --vert: #9aca3c;          /* Vert charte : décor, fonds. JAMAIS de texte blanc dessus */
  --vert-fonce: #4d6b12;    /* Vert lisible sur blanc (6,1:1) : pictos, coches */
  --vert-clair: #f1f8e4;    /* Fonds de sections */
  --rouge: #d7181e;         /* Accent rare : urgences et erreurs uniquement (5,2:1 sur blanc) */
  --rouge-clair: #fef2f2;
  --encre: #1f2937;         /* Texte courant (14:1 sur blanc) */
  --encre-2: #334155;       /* Texte secondaire */
  --gris: #64748b;          /* Bordure des champs, pictos discrets */
  --gris-bord: #e2e8f0;     /* Bordures des cartes */
  --gris-bord-2: #cbd5e1;
  --gris-fond: #f1f5f9;
  --gris-fond-2: #f8fafc;
  --blanc: #ffffff;

  --ff: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --maxw: 80rem;
  --rayon: 1rem;
  --rayon-sm: .75rem;
  --rayon-lg: 1.5rem;

  --ombre-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --ombre: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --ombre-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
  --ombre-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }

html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* L'élément qui reçoit le focus ne doit jamais être masqué par le header
   collant (tablette/desktop) ni par la barre d'appel (mobile) - WCAG 2.4.11 */
@media (min-width: 768px) { html { scroll-padding-top: 7rem; } }
@media (max-width: 767.98px) { html { scroll-padding-bottom: 7rem; } }

body {
  font-family: var(--ff);
  font-size: 1rem;
  line-height: 1.625;
  color: var(--encre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 7rem;              /* place pour la barre d'appel mobile */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
strong, b { font-weight: 700; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: inherit; }
img, svg, iframe, video { display: block; }
img { max-width: 100%; height: auto; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; line-height: inherit; }
button { background: transparent; cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* Focus clavier très visible, sur fond clair comme sur fond foncé */
:focus-visible { outline: 3px solid var(--nuit); outline-offset: 3px; border-radius: 6px; }
.focus-light :focus-visible { outline-color: var(--blanc); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Pictogrammes (sprite SVG de includes/pictos.php) */
.ico { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-4  { width: 1rem;    height: 1rem; }
.ico-5  { width: 1.25rem; height: 1.25rem; }
.ico-6  { width: 1.5rem;  height: 1.5rem; }
.ico-7  { width: 1.75rem; height: 1.75rem; }
.ico-8  { width: 2rem;    height: 2rem; }
.ico-12 { width: 3rem;    height: 3rem; }
.ico-bleu  { color: var(--bleu-fonce); }
.ico-vert  { color: var(--vert-fonce); }
.ico-rouge { color: var(--rouge); }
.ico-blanc { color: var(--blanc); }
.ico-gris  { color: var(--gris); }
.ico-haut  { margin-top: .25rem; }                 /* aligné sur la 1re ligne de texte */
.ico-externe { display: inline-block; margin-left: .25rem; vertical-align: -.1em; }

/* ============================================================
   MISE EN PAGE
   ============================================================ */
.conteneur {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px)  { .conteneur { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .conteneur { padding-inline: 2rem; } }

.section { padding-block: 2.5rem; }
.section-bas { padding-bottom: 2.5rem; }
@media (min-width: 768px) {
  .section { padding-block: 3.5rem; }
  .section-bas { padding-bottom: 3.5rem; }
}
.section--bleu   { background: var(--bleu-clair); }
.section--vert   { background: var(--vert-clair); }
.section--gris   { background: var(--gris-fond-2); }
.section--action { background: var(--bleu-fonce); color: var(--blanc); }   /* bandeau "Contactez-nous" */

/* En-tête des pages intérieures : fil d'Ariane + H1 */
.entete-page { background: linear-gradient(to bottom, var(--bleu-clair), var(--blanc)); }
.entete-page__corps { padding-block: 1.5rem; }
@media (min-width: 768px) { .entete-page__corps { padding-block: 2.5rem; } }

.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; }

/* Grille : 1 colonne sur mobile, colonnes ajoutées par point de rupture */
.grille { display: grid; grid-template-columns: minmax(0, 1fr); }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .cols-sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-md-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-lg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols-lg-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cols-lg-3-2 { grid-template-columns: 3fr 2fr; }
  .col-span-lg-2 { grid-column: span 2 / span 2; }
  .row-span-lg-2 { grid-row: span 2 / span 2; }
}
@media (min-width: 1280px) {
  .cols-xl-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Rangées flex : centrées, ou alignées en haut (picto + texte sur plusieurs lignes) */
.rangee      { display: flex; align-items: center; }
.rangee-haut { display: flex; align-items: flex-start; }
.rangee-pleine { display: flex; }                  /* enfants étirés à la même hauteur */
.retour      { flex-wrap: wrap; }
.aligne-haut   { align-items: start; }
.aligne-centre { align-items: center; }

.ecart-2 { gap: .5rem; }
.ecart-3 { gap: .75rem; }
.ecart-4 { gap: 1rem; }
.ecart-5 { gap: 1.25rem; }
.ecart-6 { gap: 1.5rem; }
.ecart-8 { gap: 2rem; }
.ecart-x-3 { column-gap: .75rem; }
.ecart-x-6 { column-gap: 1.5rem; }
.ecart-x-8 { column-gap: 2rem; }
.ecart-y-3 { row-gap: .75rem; }
@media (min-width: 1024px) {
  .ecart-lg-10 { gap: 2.5rem; }
  .ecart-lg-12 { gap: 3rem; }
}

/* Piles : espace vertical régulier entre les enfants */
.pile-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem; }
.pile-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem; }
.pile-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem; }
.pile-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.pile-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.pile-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

.largeur-texte { max-width: 56rem; }

/* Groupe de boutons : empilés sur mobile, en ligne ensuite */
.actions { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) {
  .actions { flex-direction: row; flex-wrap: wrap; }
  .actions--centre { align-items: center; }
}

/* ============================================================
   TITRES ET TEXTES
   ============================================================ */
.titre-page {
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.025em;
}
@media (min-width: 640px) { .titre-page { font-size: 3rem; line-height: 1; } }
.titre-page__accent { color: var(--bleu-fonce); }

.titre-section { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; }
@media (min-width: 640px) { .titre-section:not(.titre-section--fixe) { font-size: 2.25rem; line-height: 2.5rem; } }

.titre-bloc { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
@media (min-width: 640px) { .titre-bloc { font-size: 1.875rem; line-height: 2.25rem; } }

.titre-moyen { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.titre-carte { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }

.titre-sous-section { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
@media (min-width: 640px) { .titre-sous-section { font-size: 1.5rem; line-height: 2rem; } }

/* Titre précédé d'un picto */
.titre-ico { display: flex; align-items: center; gap: .75rem; }
.titre-ico--haut { align-items: flex-start; }

/* Titres numérotés des pages juridiques */
.document { max-width: 56rem; }
.document > :not([hidden]) ~ :not([hidden]) { margin-top: 3rem; }
.titre-numerote { display: flex; align-items: flex-start; gap: 1rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.titre-numerote__texte { padding-top: .25rem; }
@media (min-width: 640px) {
  .titre-numerote { font-size: 1.875rem; line-height: 2.25rem; }
  .titre-numerote__texte { padding-top: .125rem; }
}
.numero {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  background: var(--bleu-fonce); color: var(--blanc);
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 700;
}

/* Phrase d'introduction sous le H1 */
.chapo { font-size: 1.125rem; line-height: 1.75rem; color: var(--encre-2); }
@media (min-width: 640px) { .chapo { font-size: 1.25rem; } }

/* Puce ronde des listes à puces simples */
.puce { flex-shrink: 0; width: .375rem; height: .375rem; margin-top: .75rem; border-radius: 999px; background: currentColor; }

/* ============================================================
   LIENS
   ============================================================ */
.lien {
  display: inline-block;
  padding-block: .5rem;
  font-weight: 700;
  color: var(--bleu-fonce);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.lien:hover { color: var(--bleu-survol); }
.lien--ico { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding-block: 0; }
.lien--en-ligne { display: inline; padding-block: 0; }   /* lien au fil d'un paragraphe */
.lien--urgence, .lien--urgence:hover { color: var(--rouge); }
.lien--herite, .lien--herite:hover { color: inherit; }
.lien--bas { margin-top: auto; padding-top: 1rem; }
.lien--fin { font-weight: 400; text-decoration-thickness: auto; }

/* Lien d'évitement : invisible jusqu'au focus clavier */
.lien-evitement {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.lien-evitement:focus {
  position: fixed; left: 1rem; top: 1rem; z-index: 100;
  width: auto; height: auto; overflow: visible; clip: auto;
  padding: .75rem 1.25rem; border-radius: .5rem;
  background: var(--nuit); color: var(--blanc); font-weight: 700;
}

/* Liste de liens encadrés (ex. "Nos autres services") */
.lien-liste {
  display: flex; align-items: center; gap: .75rem; min-height: 3rem;
  padding: .75rem 1rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon-sm);
  background: var(--blanc); font-weight: 700;
}
.lien-liste:hover { border-color: var(--bleu-fonce); color: var(--bleu-survol); }
.lien-liste .ico { color: var(--bleu-fonce); }

/* Onglets de rubrique (pages L'UNA, Qualité, espace pro) */
.onglet {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline: 1.25rem;
  border: 2px solid var(--bleu-voile); border-radius: 999px;
  background: var(--blanc); color: var(--bleu-fonce); font-weight: 700;
}
.onglet:hover { border-color: var(--bleu-fonce); }
.onglet--actif, .onglet--actif:hover { border-color: var(--bleu-fonce); background: var(--bleu-fonce); color: var(--blanc); }

/* Étiquette simple (communes d'intervention) */
.commune { padding: .375rem 1rem; border-radius: 999px; background: var(--gris-fond); }

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 3rem;
  padding: .75rem 1.5rem;
  border-radius: var(--rayon-sm);
  font-size: 1.125rem; line-height: 1.75rem; font-weight: 700;
  text-decoration: none;
  transition: background-color .15s;
}
.btn-primaire { background: var(--bleu-fonce); color: var(--blanc); box-shadow: var(--ombre); }
.btn-primaire:hover { background: var(--bleu-survol); }
.btn-primaire:disabled { opacity: .6; cursor: wait; }
.btn-secondaire { border: 2px solid var(--bleu-fonce); background: var(--blanc); color: var(--bleu-fonce); }
.btn-secondaire:hover { background: var(--bleu-clair); }
.btn-blanc { background: var(--blanc); color: var(--bleu-survol); }
.btn-blanc:hover { background: var(--bleu-clair); }

.btn-moyen { padding-inline: 1.25rem; font-size: 1rem; line-height: 1.625; box-shadow: none; }
.btn-compact { gap: .5rem; padding: .5rem 1rem; font-size: 1rem; line-height: 1.625; box-shadow: none; }
.btn-plat { box-shadow: none; }
.btn-bloc { display: flex; width: 100%; box-shadow: none; }
.btn-plein-mobile { width: 100%; }
@media (min-width: 640px) { .btn-plein-mobile { width: auto; } }

/* ============================================================
   HEADER ET MENU
   ============================================================ */
.entete {
  position: relative; z-index: 40;
  border-bottom: 1px solid var(--gris-bord);
  background: var(--blanc);
}
@media (min-width: 768px) {
  .entete { position: sticky; top: 0; box-shadow: var(--ombre-sm); }
}
.entete__barre { display: flex; align-items: center; gap: .75rem; padding-block: .75rem; }

.entete__logo { flex-shrink: 0; }
.entete__logo img { width: auto; height: 2.5rem; }
@media (min-width: 360px) { .entete__logo img { height: 3rem; } }
@media (min-width: 640px) { .entete__logo img { height: 3.5rem; } }

.entete__menu-bouton {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; margin-left: auto; padding: .5rem 1rem;
  border: 2px solid rgba(31, 41, 55, .15); border-radius: var(--rayon-sm);
  font-weight: 700;
}
.entete__menu-bouton:hover { border-color: var(--bleu-fonce); color: var(--bleu-fonce); }

/* Bouton d'appel (tablette et desktop) */
.entete__appel {
  display: none; align-items: center; gap: .75rem; flex-shrink: 0;
  min-height: 2.75rem; padding: .5rem 1rem;
  border-radius: var(--rayon-sm);
  background: var(--bleu-fonce); color: var(--blanc); box-shadow: var(--ombre-sm);
}
.entete__appel:hover { background: var(--bleu-survol); }
.entete__appel-libelle { display: block; line-height: 1.5rem; }
.entete__appel-numero { display: block; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
@media (min-width: 768px) { .entete__appel { display: inline-flex; } }

/* Menu principal : panneau déroulant sous le header jusqu'à 1280 px, en ligne ensuite */
.menu {
  display: none;
  position: absolute; inset-inline: 0; top: 100%;
  max-height: calc(100dvh - 9.5rem); overflow-y: auto;
  border-bottom: 4px solid var(--bleu);
  background: var(--blanc); box-shadow: var(--ombre-2xl);
}
.menu.est-ouvert { display: block; }
@media (min-width: 768px) { .menu { max-height: calc(100dvh - 6.5rem); } }

.menu__liste {
  display: flex; flex-direction: column;
  max-width: var(--maxw); margin-inline: auto;
  padding: .75rem 1rem;
}
@media (min-width: 640px) { .menu__liste { padding-inline: 1.5rem; } }

.menu__entree {
  display: flex; align-items: center; justify-content: space-between; gap: .25rem;
  width: 100%;
  padding: .75rem 1rem; border-radius: .5rem;
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 700;
  text-align: left; white-space: nowrap;
}
.menu__entree:hover { background: var(--bleu-clair); color: var(--bleu-survol); }
.menu__entree.est-actif,
.menu__entree[aria-current="page"] {
  color: var(--bleu-fonce);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
}
.menu__entree .chevron { transition: transform .15s; }

/* Sous-menus : fermés par défaut, ouverts par le bouton (aria-expanded) ou au survol (desktop souris) */
.sous-menu {
  display: none;
  margin: 0 0 .5rem 1rem; padding-left: .5rem;
  border-left: 4px solid var(--vert);
}
.menu-btn[aria-expanded="true"] + .sous-menu { display: block; }
.menu-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }

.sous-menu__lien {
  display: block;
  padding: .75rem 1rem; border-radius: .5rem;
  font-size: 1.125rem; line-height: 1.75rem;
}
.sous-menu__lien:hover { background: var(--bleu-clair); color: var(--bleu-survol); }
.sous-menu__lien[aria-current="page"] { background: var(--bleu-clair); color: var(--bleu-survol); font-weight: 700; }

.menu__appel { margin-top: .5rem; padding: 1rem 0 .5rem; border-top: 1px solid var(--gris-bord); }

@media (min-width: 1280px) {
  .entete__menu-bouton { display: none; }

  .menu {
    display: block; position: static; margin-left: auto;
    max-height: none; overflow: visible;
    border: 0; box-shadow: none;
  }
  .menu__liste { flex-direction: row; align-items: center; gap: .125rem; padding: 0; }
  .menu__rubrique { position: relative; }
  .menu__entree { width: auto; padding: .5rem .625rem; font-size: 1rem; line-height: 1.5rem; }
  .menu__appel { display: none; }

  .sous-menu {
    position: absolute; left: 0; top: 100%; z-index: 50;
    width: max-content; min-width: 16rem;
    margin: 0; padding: .5rem;
    border: 1px solid var(--gris-bord); border-radius: var(--rayon-sm);
    background: var(--blanc); box-shadow: var(--ombre-xl);
  }
  .sous-menu__lien { padding-block: .625rem; font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1280px) and (hover: hover) {
  .menu__rubrique:hover > .sous-menu { display: block; }
  .menu__rubrique:hover > .menu-btn .chevron { transform: rotate(180deg); }
  /* Après Échap, le sous-menu ouvert au survol se masque jusqu'à ce que la souris quitte le menu */
  .menu.menu-esc .menu__rubrique:hover > .sous-menu { display: none; }
}

/* ============================================================
   ACCUEIL
   ============================================================ */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2rem;
  padding-block: 2rem;
}
@media (min-width: 768px)  { .hero { padding-block: 3rem; } }
@media (min-width: 1024px) { .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }

.hero__visuel { position: relative; }
.hero__decor {
  position: absolute; right: -.75rem; bottom: -.75rem;
  width: 66.666%; height: 66.666%;
  border-radius: var(--rayon-lg);
  background: rgba(154, 202, 60, .4);
}
.hero__photo { position: relative; }
.hero__urgence { display: flex; flex-wrap: wrap; align-items: center; column-gap: .5rem; font-weight: 700; color: var(--rouge); }

.photo {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rayon-lg); background: var(--gris-bord);
}
.photo--3-2 { aspect-ratio: 3 / 2; }

/* Coche ronde de la réassurance */
.coche {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 1.75rem; height: 1.75rem; margin-top: .125rem;
  border-radius: 999px; background: var(--vert-clair); color: var(--vert-fonce);
}

.logo-certif { width: 6rem; height: 6rem; object-fit: contain; }
.logo-label  { width: 9rem; height: auto; }    /* Bouge Avec Moi */
.logo-una    { width: 11rem; height: auto; }   /* Adhérent UNA */

/* ============================================================
   CARTES
   ============================================================ */
/* Carte entièrement cliquable (services, rubriques) */
.carte-lien {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.5rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc); box-shadow: var(--ombre-sm);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.carte-lien:hover { transform: translateY(-.125rem); border-color: var(--bleu-fonce); box-shadow: var(--ombre); }
.carte-lien__titre { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.carte-lien:hover .carte-lien__titre { color: var(--bleu-survol); }
.carte-lien__texte { flex: 1; color: var(--encre-2); }
.carte-lien__suite { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--bleu-fonce); }
.carte-lien__fleche { transition: transform .15s; }
.carte-lien:hover .carte-lien__fleche { transform: translateX(.25rem); }

/* Carte-lien horizontale : titre à gauche, "En savoir plus" à droite */
.carte-lien--ligne { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: none; }
.carte-lien--ligne:hover { transform: none; box-shadow: none; }

/* Tuile bleue "Une question ?" */
.carte-action .lien { justify-content: center; }
.carte-action {
  display: flex; flex-direction: column;
  padding: 1.5rem; border-radius: var(--rayon);
  background: var(--bleu-fonce); color: var(--blanc); box-shadow: var(--ombre-sm);
}

/* Carte partenaire : logo dans un cadre de hauteur fixe + nom */
.carte-partenaire {
  display: flex; flex-direction: column; align-items: center; gap: .75rem; height: 100%;
  padding: 1rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon-sm);
  background: var(--blanc);
}
.carte-partenaire:hover { border-color: var(--bleu-fonce); }
.carte-partenaire__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 5rem; }
.carte-partenaire__img { width: auto; max-width: 100%; height: auto; max-height: 100%; }
.carte-partenaire__nom { text-align: center; font-weight: 700; }
.carte-partenaire:hover .carte-partenaire__nom { color: var(--bleu-survol); text-decoration: underline; text-underline-offset: 4px; }
.logo-absent {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: 999px;
  background: var(--bleu-clair); color: var(--bleu-fonce);
}

/* Membre de l'équipe : pastille d'initiales + nom */
.carte-membre {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.25rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc);
}
@media (min-width: 1024px) { .carte-membre { flex-direction: column; text-align: center; } }
.initiales {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 4rem; height: 4rem; border-radius: 999px;
  background: var(--bleu-clair); color: var(--bleu-survol);
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 700;
}
.initiales--vert { background: var(--vert-clair); color: var(--vert-fonce); }

/* Pastille carrée portant un picto */
.pastille {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 3.5rem; height: 3.5rem; border-radius: var(--rayon-sm);
  background: var(--bleu-clair); color: var(--bleu-fonce);
}
.pastille--vert { background: var(--vert-clair); color: var(--vert-fonce); }
.pastille--blanc { background: var(--blanc); color: var(--vert-fonce); }
.pastille--translucide { background: rgba(255, 255, 255, .15); color: inherit; }
.pastille--sm { display: none; }
@media (min-width: 640px) { .pastille--sm { display: flex; } }

/* ============================================================
   ENCADRÉS
   ============================================================ */
.encadre {
  padding: 1.5rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc);
}
.encadre--colonne { display: flex; flex-direction: column; }
.encadre--serre { padding: 1.25rem; }

/* Encadré picto + texte */
.encadre-ico {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.25rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc);
}
@media (min-width: 640px) { .encadre-ico:not(.texte-lg) { padding: 1.5rem; } }
.encadre-ico--blanc { padding: 1.5rem; border: 0; }
.encadre-ico--centre { align-items: center; }

/* Encadré picto + texte, empilé sur mobile */
.encadre-horizontal {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc);
}
.encadre-horizontal--bleu { border: 0; background: var(--bleu-clair); }
@media (min-width: 640px) { .encadre-horizontal { flex-direction: row; align-items: center; } }

/* Bandeau appel à l'action (Espace Emploi, abonnement à la gazette, livret d'accueil) */
.bandeau-doc {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.5rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc);
}
.bandeau-doc > .btn { flex-shrink: 0; box-shadow: none; }
.bandeau-doc--vert { border: 0; background: var(--vert-clair); }
@media (min-width: 640px) { .bandeau-doc--vert { padding: 2rem; } }
@media (min-width: 1024px) { .bandeau-doc { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Grand panneau blanc (formulaires) */
.panneau {
  padding: 1.25rem;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon-lg);
  background: var(--blanc); box-shadow: var(--ombre-sm);
}
@media (min-width: 640px) { .panneau { padding: 2rem; } }
.panneau--etroit { max-width: 36rem; }
.panneau--sans-bord { border: 0; }

/* Encart teinté */
.encart { padding: 1.5rem; border-radius: var(--rayon); background: var(--bleu-clair); }
.encart--serre { padding: 1.25rem; }
.encart--vert { background: var(--vert-clair); }

/* Note : picto + texte sur fond teinté */
.note {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1.25rem; border-radius: var(--rayon);
  background: var(--bleu-clair);
  font-size: 1.125rem; line-height: 1.75rem;
}
.note--serre { padding: 1rem; border-radius: var(--rayon-sm); }
.note--vert { background: var(--vert-clair); }
.note--blanc { background: var(--blanc); }

/* Carte blanche sur fond teinté */
.carte-blanche { padding: 1.5rem; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre-sm); }
.carte-blanche--colonne { display: flex; flex-direction: column; }

/* Messages après envoi de formulaire */
.confirmation { padding: 1.5rem; border: 2px solid var(--vert); border-radius: var(--rayon); background: var(--vert-clair); }
.alerte { padding: 1.25rem; border: 2px solid var(--rouge); border-radius: var(--rayon); background: var(--rouge-clair); }
.alerte__titre { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--rouge); }

.separateur { padding-top: 1.25rem; border-top: 1px solid var(--gris-bord); }

/* ============================================================
   CONTACT
   ============================================================ */
/* Tuile de contact (téléphone, urgences, adresse, formulaire) */
.tuile-contact {
  display: flex; align-items: flex-start; gap: 1rem;
  min-height: 3rem; padding: 1.25rem;
  border-radius: var(--rayon);
  background: var(--blanc); color: var(--encre);
}
a.tuile-contact:hover { background: var(--bleu-clair); }
.tuile-contact--statique { min-width: 0; }
.tuile-contact--bordure { border: 2px solid var(--gris-bord); }
.tuile-contact--bleu { background: var(--bleu-fonce); color: var(--blanc); }
a.tuile-contact--bleu:hover { background: var(--bleu-survol); }
.tuile-contact--urgence { border: 2px solid var(--rouge); }
a.tuile-contact--urgence:hover { background: var(--rouge-clair); }
.tuile-contact__numero { display: block; font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
@media (min-width: 640px) { .tuile-contact__numero--grand { font-size: 1.875rem; line-height: 2.25rem; } }

/* Plan d'accès : la carte Google Maps n'est chargée qu'au clic */
.carte-acces {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  width: 100%; aspect-ratio: 4 / 3;
  padding: 1.5rem;
  border: 2px solid var(--gris-bord-2); border-radius: var(--rayon-lg);
  background: var(--blanc); text-align: center;
}
@media (min-width: 640px) { .carte-acces { aspect-ratio: 21 / 9; } }
.carte-acces--chargee { display: block; padding: 0; overflow: hidden; }
.carte-acces__iframe { width: 100%; height: 100%; border: 0; }

/* Carte des secteurs d'intervention (image) */
.carte-zone { width: 100%; height: auto; border: 1px solid var(--gris-bord); border-radius: var(--rayon); }

/* ============================================================
   FORMULAIRES
   ============================================================ */
.champ__label { display: block; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
.champ__aide { display: block; font-size: 1.125rem; line-height: 1.75rem; color: var(--encre-2); }
.champ__saisie {
  display: block; width: 100%; min-height: 3rem;
  padding: .625rem 1rem;
  border: 2px solid var(--gris); border-radius: var(--rayon-sm);
  background: var(--blanc); color: var(--encre);
  font-size: 1.125rem; line-height: 1.75rem;
}
.champ__saisie[aria-invalid="true"] { border-color: var(--rouge); }
.champ__erreur { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: var(--rouge); }

/* Conteneur du reCAPTCHA invisible (badge fixe masqué, jeton caché) : il ne doit pas
   ajouter d'espace entre les champs du formulaire. */
#recaptcha { display: contents; }

/* Accroche sous le H1 (Espace emploi) */
.accroche { font-size: 1.25rem; line-height: 1.75rem; }
@media (min-width: 640px) { .accroche { font-size: 1.5rem; line-height: 2rem; } }

/* Encadré picto + texte resserré (métiers recherchés) */
.encadre-ico.encadre-ico--compact { padding: 1rem; }

/* Champ fichier (CV) : bouton "Parcourir" aux couleurs du site */
.champ__saisie::file-selector-button {
  min-height: 2.75rem; margin-right: 1rem; padding: 0 1rem;
  border: 0; border-radius: .5rem;
  background: var(--bleu-fonce); color: var(--blanc);
  font: inherit; font-weight: 700; cursor: pointer;
}
.champ__saisie::file-selector-button:hover { background: var(--bleu-survol); }

/* ============================================================
   ESPACE PROFESSIONNEL
   ============================================================ */
.documents { border: 2px solid var(--gris-bord); border-radius: var(--rayon); background: var(--blanc); }
.documents > li + li { border-top: 1px solid var(--gris-bord); }
.document-pro {
  display: flex; align-items: center; gap: .75rem;
  min-height: 3rem; padding: .75rem 1.25rem;
}
.document-pro:hover { background: var(--bleu-clair); }
.document-pro__nom { flex: 1; min-width: 0; font-weight: 700; }
.document-pro:hover .document-pro__nom { color: var(--bleu-survol); text-decoration: underline; text-underline-offset: 4px; }
.document-pro__format {
  flex-shrink: 0;
  padding: .125rem .625rem; border-radius: 999px;
  background: var(--gris-fond); color: var(--encre-2);
  font-size: .875rem; line-height: 1.5rem; font-weight: 700; text-transform: uppercase;
}
.video {
  width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--rayon); background: var(--gris-fond);
}

/* ============================================================
   FOOTER
   ============================================================ */
.pied { background: var(--nuit); color: var(--blanc); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem; }
@media (min-width: 768px)  { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pied__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pied__logo { display: inline-block; padding: .75rem; border-radius: var(--rayon-sm); background: var(--blanc); }
.pied__logo img { width: auto; height: 3rem; }
.pied__adresse > * + * { margin-top: .25rem; }
.pied__titre { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--vert); }

.lien-pied { display: inline-block; padding-block: .5rem; }
.lien-pied:hover { text-decoration: underline; text-underline-offset: 4px; }
.lien-pied--ico { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; }

.pied__bas { border-top: 1px solid rgba(255, 255, 255, .2); }
.pied__legal { display: flex; flex-direction: column; gap: .5rem; padding-block: 1.25rem; }
@media (min-width: 1024px) { .pied__legal { flex-direction: row; align-items: center; justify-content: space-between; } }
.pied__liens-legaux { display: flex; flex-wrap: wrap; column-gap: 1.5rem; }

/* Barre d'appel fixe (mobile uniquement) */
.barre-appel {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  padding: .75rem .75rem max(.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--gris-bord);
  background: var(--blanc); box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
}
@media (min-width: 768px) { .barre-appel { display: none; } }
.barre-appel__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.barre-appel__btn { gap: .5rem; padding-inline: .75rem; box-shadow: none; }

/* ============================================================
   RUBRIQUE L'UNA (présentation, historique, équipe, gazettes, presse)
   ============================================================ */
/* Carte avec photo en tête (missions de la page Présentation) */
.carte-photo {
  display: flex; flex-direction: column; overflow: hidden;
  border: 2px solid var(--gris-bord); border-radius: var(--rayon);
  background: var(--blanc);
}
.carte-photo__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--gris-bord); }
.carte-photo__corps { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.carte-photo__liens { margin-top: auto; padding-top: 1rem; }   /* liens calés en bas de la carte */

/* Grand chiffre mis en avant (70 %, 100 %) */
.chiffre-cle { font-size: 3rem; line-height: 1; font-weight: 700; color: var(--bleu-fonce); }

/* Titre de section suivi d'un logo, renvoyé à la ligne sur petit écran */
.titre-logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.logo-una--cadre { padding: .5rem; border-radius: .5rem; background: var(--blanc); }

/* Liste des communes : 1 colonne, 2 colonnes dès 400 px */
.liste-communes { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1.5rem; }
.liste-communes > li { padding-block: .25rem; }
@media (min-width: 400px) { .liste-communes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Frise chronologique (Historique) : trait vertical à gauche, une pastille
   ronde par date posée sur le trait, puis l'encadré de la date. */
.frise { margin-left: 1.25rem; border-left: 4px solid var(--bleu-clair); }
.frise__etape { position: relative; padding-left: 2.5rem; }
@media (min-width: 640px) { .frise__etape { padding-left: 3rem; } }
.frise__point {
  position: absolute; left: -1.4rem; top: 1rem;
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: var(--blanc); color: var(--bleu-fonce);
  box-shadow: 0 0 0 4px var(--bleu-clair);
}
/* Temps forts (création, nom actuel) : pastille et encadré verts */
.frise__point--fort { background: var(--vert); color: var(--encre); }
.frise__carte--fort { border-color: var(--vert); background: var(--vert-clair); }

/* ============================================================
   PAGES SERVICES
   ============================================================ */
/* Bandeau d'appel à l'action sur fond bleu d'action (devis gratuit, garde d'enfants) */
.bandeau-doc--bleu { border: 0; background: var(--bleu-fonce); color: var(--blanc); }
@media (min-width: 640px) { .bandeau-doc--bleu { padding: 2rem; } }

/* Encadré picto + texte : grand intérieur à toutes les tailles, ou sans bordure (sur fond teinté) */
.encadre-ico--large { padding: 1.5rem; }
.encadre-ico--sans-bord { border: 0; }

/* Carte blanche sans ombre (sur fond teinté) */
.carte-blanche--plate { box-shadow: none; }

/* Encart teinté : intérieur agrandi à partir de 640 px */
@media (min-width: 640px) { .encart--large { padding: 2rem; } }

/* Étiquette mise en avant (« TARIFS ATTRACTIFS ! ») : vert charte, texte foncé */
.etiquette-verte {
  display: inline-block;
  padding: .25rem 1rem; border-radius: 999px;
  background: var(--vert); color: var(--encre); font-weight: 700;
}

/* Étiquette sur fond blanc (partenaires du service handicap) */
.commune--blanc { background: var(--blanc); }

/* Vidéo YouTube dans un cadre arrondi */
.cadre-video { overflow: hidden; border-radius: var(--rayon-lg); background: var(--gris-bord); }
.cadre-video__iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* Logo Cap'Handéo devant le titre de section */
.logo-handeo { flex-shrink: 0; width: 4rem; height: 4rem; }
@media (min-width: 640px) { .logo-handeo { width: 6rem; height: 6rem; } }

/* Titre de section plus petit sur mobile (à côté d'un logo) */
@media (max-width: 639.98px) { .titre-section--compact { font-size: 1.5rem; line-height: 2rem; } }

/* ============================================================
   QUALITÉ ET PAGES JURIDIQUES
   ============================================================ */
/* Document juridique sur toute la largeur du conteneur (politique de confidentialité) */
.document--large { max-width: none; }

/* Pastille numérotée un peu plus grande (6 principes de la charte qualité) */
.numero--grand { width: 3rem; height: 3rem; }

/* Texte long avec sommaire (Politique qualité) : sommaire en tête sur mobile,
   colonne collante à gauche sur grand écran (sous le header collant) */
.lecture { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2rem; }
@media (min-width: 768px) { .lecture { padding-block: 3rem; } }
@media (min-width: 1024px) {
  .lecture { grid-template-columns: 18rem minmax(0, 1fr); gap: 3rem; }
  .lecture__sommaire { position: sticky; top: 9rem; align-self: start; }
}
.sommaire { padding: 1rem; border: 2px solid var(--gris-bord); border-radius: var(--rayon); background: var(--blanc); }
.sommaire__titre { padding-inline: .75rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
.sommaire__lien {
  display: flex; align-items: flex-start; gap: .75rem; min-height: 2.75rem;
  padding: .5rem .75rem; border-radius: .5rem;
}
.sommaire__lien:hover { background: var(--bleu-clair); color: var(--bleu-survol); }
.sommaire__num { font-weight: 700; color: var(--bleu-fonce); }

/* Phrase mise en exergue : filet vert à gauche */
.exergue {
  padding-left: 1.25rem; border-left: 4px solid var(--vert);
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 700;
}
@media (min-width: 640px) { .exergue { font-size: 1.5rem; line-height: 2rem; } }

/* Phrase de conclusion sur fond bleu d'action (texte blanc 5,3:1) */
.encart-fort {
  padding: 1.5rem; border-radius: var(--rayon);
  background: var(--bleu-fonce); color: var(--blanc);
  font-size: 1.25rem; line-height: 1.75rem; font-weight: 700;
}
@media (min-width: 640px) { .encart-fort { padding: 2rem; font-size: 1.5rem; line-height: 2rem; } }

/* Logo devant le titre de la certification Cap'Handéo */
.logo-titre { flex-shrink: 0; width: 5rem; height: 5rem; }
@media (min-width: 640px) { .logo-titre { width: 7rem; height: 7rem; } }

/* Encadré mis en avant en vert (date de renouvellement) */
.encadre--vert { border-color: var(--vert); background: var(--vert-clair); }
.texte-vert { color: var(--vert-fonce); }

/* Bandeau d'appel à l'action sur fond bleu clair, pastille blanche */
.bandeau-doc--bleu-clair { border: 0; background: var(--bleu-clair); }
.bandeau-doc--bleu-clair .pastille { background: var(--blanc); }
@media (min-width: 640px) { .bandeau-doc--bleu-clair { padding: 2rem; } }

/* Tableau (politique de confidentialité) : défile horizontalement sur petit écran,
   le cadre est focalisable pour pouvoir défiler au clavier */
.tableau-defilant { overflow-x: auto; padding: 1rem; border: 2px solid var(--gris-bord); border-radius: var(--rayon); }
.tableau { width: 100%; min-width: 40rem; font-size: 1.125rem; line-height: 1.75rem; }
.tableau th, .tableau td { padding: .75rem 1rem .75rem 0; text-align: left; vertical-align: top; }
.tableau th:last-child, .tableau td:last-child { padding-right: 0; }
.tableau thead th { padding-top: 0; padding-bottom: .5rem; }
.tableau tbody tr { border-top: 1px solid var(--gris-bord); }
.tableau tbody th { font-weight: 700; }

/* Longue adresse web : peut être coupée n'importe où pour ne jamais déborder */
.coupe-mot { overflow-wrap: anywhere; }

/* ============================================================
   UTILITAIRES
   ============================================================ */
.texte-lg { font-size: 1.125rem; line-height: 1.75rem; }
.texte-xl { font-size: 1.25rem; line-height: 1.75rem; }
.texte-2xl { font-size: 1.5rem; line-height: 2rem; }
.texte-doux { color: var(--encre-2); }
.texte-encre { color: var(--encre); }
.texte-bleu { color: var(--bleu-fonce); }
.texte-rouge { color: var(--rouge); }
.texte-centre { text-align: center; }
.gras { font-weight: 700; }
.normal { font-weight: 400; }
.serre { line-height: 1.25; }
.souligne { text-decoration: underline; text-underline-offset: 4px; }
.souligne-epais { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.mt-1  { margin-top: .25rem; }
.mt-2  { margin-top: .5rem; }
.mt-3  { margin-top: .75rem; }
.mt-4  { margin-top: 1rem; }
.mt-5  { margin-top: 1.25rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-7  { margin-top: 1.75rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-auto { margin-top: auto; }

.bloc { display: block; }
.extensible { flex: 1 1 0%; }
.min-0 { min-width: 0; }
.centre-v { align-self: center; }
.pad-v { padding-block: .5rem; }
.pt-3 { padding-top: .75rem; }
.masque { display: none !important; }

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

/* Badge reCAPTCHA masqué : la mention obligatoire est écrite sous les formulaires
   (usage autorisé par Google). */
.grecaptcha-badge { visibility: hidden; }