/*
 * resultats-en-ligne.com — feuille de style unique.
 *
 * Parti pris : registre institutionnel, mais pas austère. Typographie
 * affirmée, palette restreinte, et un décor entièrement dessiné en CSS —
 * trames, dégradés, filets, chevrons. Aucune image, aucune police distante :
 * le rendu ne dépend d'aucune requête externe, ce qui protège les Core Web
 * Vitals autant que la confidentialité du lecteur.
 *
 * Propriétés logiques (inline-start/end) partout, pour que l'arabe en RTL
 * fonctionne sans feuille séparée.
 */

/* ====================================================================
   1. Jetons
   ==================================================================== */

:root {
  /* Bleu d'encre, sobre et institutionnel. */
  --encre:        #0f2942;
  --encre-clair:  #1c3f61;
  --encre-nuit:   #081827;   /* fond des bandeaux, plus profond que l'encre */
  --accent:       #a8172b;   /* filet d'autorité, usage parcimonieux */

  --texte:        #16202b;
  --texte-doux:   #4e5b6a;
  --texte-faible: #6f7b89;

  --fond:         #eaeef3;   /* la page */
  --surface:      #ffffff;   /* le bloc de contenu */
  --surface-doux: #f5f8fa;
  --bord:         #d3dae2;
  --bord-fort:    #b3bdc9;

  --focus:        #b8410e;

  /* Décor : trame de fond, halo, ombres portées. */
  --trame:        rgba(15, 41, 66, .055);
  --halo:         rgba(28, 63, 97, .10);
  --ombre-1:      0 1px 2px rgba(15, 41, 66, .05),
                  0 4px 12px -6px rgba(15, 41, 66, .14);
  --ombre-2:      0 1px 2px rgba(15, 41, 66, .06),
                  0 18px 40px -22px rgba(15, 41, 66, .40);
  --ombre-levee:  0 2px 4px rgba(15, 41, 66, .07),
                  0 12px 22px -12px rgba(15, 41, 66, .30);

  --rayon:        10px;
  --rayon-s:      6px;
  --rayon-pilule: 999px;

  --page:         74rem;
  --texte-large:  42rem;     /* longueur de ligne confortable */

  --pas: 0.25rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre:        #0e2135;
    --encre-clair:  #1d4368;
    --encre-nuit:   #060f18;
    --accent:       #e05264;

    --texte:        #e3e9ef;
    --texte-doux:   #a7b3c0;
    --texte-faible: #8494a3;

    --fond:         #080e14;
    --surface:      #121b25;
    --surface-doux: #16212d;
    --bord:         #26333f;
    --bord-fort:    #3b4b5c;

    --focus:        #ff9a6b;

    --trame:        rgba(255, 255, 255, .035);
    --halo:         rgba(94, 148, 205, .10);
    --ombre-1:      0 1px 2px rgba(0, 0, 0, .40);
    --ombre-2:      0 1px 2px rgba(0, 0, 0, .40),
                    0 18px 40px -22px rgba(0, 0, 0, .85);
    --ombre-levee:  0 2px 4px rgba(0, 0, 0, .45),
                    0 12px 22px -12px rgba(0, 0, 0, .75);
  }
}

/* ====================================================================
   2. Base
   ==================================================================== */

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

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

/*
 * Le fond n'est plus un aplat : une trame millimétrée très pâle, doublée
 * d'un halo au sommet de la page. Elle ne se voit que dans les marges,
 * autour des blocs blancs — assez pour donner une matière, jamais assez
 * pour gêner la lecture.
 */
body {
  margin: 0;
  background-color: var(--fond);
  background-image:
    radial-gradient(60rem 26rem at 50% -14rem, var(--halo), transparent 70%),
    linear-gradient(var(--trame) 1px, transparent 1px),
    linear-gradient(90deg, var(--trame) 1px, transparent 1px);
  background-size: 100% 40rem, 2.5rem 2.5rem, 2.5rem 2.5rem;
  background-repeat: no-repeat, repeat, repeat;
  color: var(--texte);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--encre-clair); color: #fff; }

.wrap {
  width: min(var(--page), 100% - 2.5rem);
  margin-inline: auto;
}

a {
  color: var(--encre-clair);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: color .12s, text-decoration-color .12s;
}
a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--encre);
  color: #fff;
  padding: .7rem 1.2rem;
  z-index: 20;
  font-weight: 600;
}
.skip:focus { inset-inline-start: 0; }

/* ====================================================================
   3. Bandeau d'en-tête
   Volontairement sans navigation : l'orientation se fait par le contenu
   et par le plan de site en pied de page.
   ==================================================================== */

.site-header {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 160% at 8% -40%, var(--encre-clair), transparent 62%),
    linear-gradient(165deg, var(--encre) 0%, var(--encre-nuit) 100%);
  color: #fff;
  overflow: hidden;
}

/* Rayures obliques très pâles, estompées vers le bas : la matière du
   bandeau, obtenue sans une seule image. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .05) 0 1px,
    transparent 1px 10px
  );
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}

/* Filet d'autorité : plein côté texte, il s'efface vers le large. */
.site-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) 28%,
    color-mix(in srgb, var(--accent) 45%, transparent) 55%,
    color-mix(in srgb, var(--accent) 12%, transparent) 100%
  );
}

.masthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
}

.emblem {
  flex: none;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--rayon-s);
  background: linear-gradient(160deg,
              rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22),
              0 6px 16px -8px rgba(0, 0, 0, .8);
}
.emblem svg { width: 1.65rem; height: 1.65rem; display: block; }

.brand { color: #fff; text-decoration: none; display: block; }
.brand:hover { color: #fff; }

.brand-name {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.brand-tag {
  display: block;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-top: .15rem;
}

/* ====================================================================
   4. Fil d'Ariane — discret, mais présent : il porte le balisage
   BreadcrumbList exploité par les moteurs de recherche.
   ==================================================================== */

.breadcrumb {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--bord);
  font-size: .8125rem;
}
.breadcrumb ol {
  width: min(var(--page), 100% - 2.5rem);
  margin-inline: auto;
  padding: .55rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  list-style: none;
}
.breadcrumb a { color: var(--texte-faible); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

/* Chevron dessiné plutôt qu'une barre oblique : plus lisible, et il suit
   automatiquement le sens d'écriture. */
.breadcrumb li + li::before {
  content: "";
  display: inline-block;
  width: .32rem;
  height: .32rem;
  margin-inline-end: .5rem;
  border-top: 1.5px solid var(--bord-fort);
  border-inline-end: 1.5px solid var(--bord-fort);
  transform: rotate(45deg);
  vertical-align: middle;
}
[dir="rtl"] .breadcrumb li + li::before { transform: rotate(-135deg); }
.breadcrumb [aria-current] { color: var(--texte-doux); font-weight: 600; }

/* ====================================================================
   5. Zone de contenu
   ==================================================================== */

main { padding-block: 2.5rem 3.5rem; }

/*
 * La « feuille » : le bloc blanc posé sur la trame. Un liseré dégradé la
 * coiffe, une ombre douce la décolle du fond — c'est tout le relief que
 * s'autorise le site.
 */
.sheet {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 1rem + 2.2vw, 3.25rem);
  box-shadow: var(--ombre-2);
}
.sheet::before {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: -1px;
  height: 3px;
  border-radius: var(--rayon) var(--rayon) 0 0;
  background: linear-gradient(
    to right,
    var(--accent),
    color-mix(in srgb, var(--accent) 55%, var(--encre-clair)) 38%,
    var(--encre-clair) 100%
  );
}

/* Titres : échelle nette, hiérarchie sans ambiguïté. */
h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 700;
  margin: 0 0 1rem;
  max-width: 22ch;
  max-width: min(22ch, 100%);
}
h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent),
              color-mix(in srgb, var(--accent) 25%, transparent));
  margin-top: 1.1rem;
}

h2 {
  position: relative;
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  font-weight: 700;
  margin: 2.75rem 0 .85rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--bord);
}
/* Onglet d'accent posé sur le filet de séparation. */
.article h2::before,
.page-body h2::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: 0;
  width: 2.75rem;
  height: 2px;
  background: var(--accent);
}
h2:first-of-type { border-top: 0; padding-top: 0; }
.article h2:first-of-type::before,
.page-body h2:first-of-type::before { content: none; }

h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 2rem 0 .6rem;
}
/* Puce carrée, à la place d'un simple retrait. */
.article h3::before,
.page-body h3::before {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-inline-end: .55rem;
  vertical-align: .12em;
  background: var(--accent);
}

p { margin: 0 0 1.1rem; max-width: var(--texte-large); }

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem);
  line-height: 1.55;
  color: var(--texte-doux);
  max-width: var(--texte-large);
  margin-bottom: 1.75rem;
}

.meta {
  font-size: .8125rem;
  color: var(--texte-faible);
  letter-spacing: .03em;
  margin: -.35rem 0 1.75rem;
}

.article ul, .article ol, .page-body ul, .page-body ol {
  margin: 0 0 1.2rem;
  padding-inline-start: 1.25rem;
  max-width: var(--texte-large);
}
.article li, .page-body li { margin-bottom: .45rem; }
.article li::marker, .page-body li::marker { color: var(--accent); }

strong { font-weight: 650; color: var(--texte); }

/* Encadré d'information — session en cours, avertissements.
   Le point d'exclamation est dessiné : deux pseudo-éléments, pas d'image. */
.notice {
  position: relative;
  background: linear-gradient(to right,
              color-mix(in srgb, var(--accent) 6%, var(--surface-doux)),
              var(--surface-doux) 55%);
  border: 1px solid var(--bord);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--rayon-s);
  padding: 1rem 1.25rem 1rem 3.4rem;
  padding-inline: 3.4rem 1.25rem;
  margin: 1.75rem 0;
  max-width: var(--texte-large);
  box-shadow: var(--ombre-1);
}
.notice::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.15rem;
  top: 1.15rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--accent);
}
.notice::after {
  content: "!";
  position: absolute;
  inset-inline-start: 1.15rem;
  top: 1.15rem;
  width: 1.3rem;
  height: 1.3rem;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
}
.notice p { margin: 0; font-size: .95rem; }

/* ====================================================================
   6. Tableaux de données
   ==================================================================== */

.table-wrap { margin: 2rem 0; overflow-x: auto; }
.table-wrap figcaption {
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .75rem;
  letter-spacing: -.01em;
}

table.stats {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 22rem;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
  overflow: hidden;
  box-shadow: var(--ombre-1);
}
table.stats caption { text-align: start; }
table.stats thead th {
  background: linear-gradient(180deg, var(--encre-clair), var(--encre));
  color: #fff;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .65rem .8rem;
  text-align: end;
  white-space: nowrap;
}
table.stats thead th:first-child { text-align: start; }
table.stats tbody th {
  font-weight: 650;
  text-align: start;
  white-space: nowrap;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--bord);
}
table.stats tbody td {
  text-align: end;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--bord);
}
table.stats tbody tr:nth-child(even) th,
table.stats tbody tr:nth-child(even) td { background: var(--surface-doux); }
table.stats tbody tr:hover th,
table.stats tbody tr:hover td {
  background: color-mix(in srgb, var(--encre-clair) 8%, var(--surface));
}
table.stats tbody tr:last-child th,
table.stats tbody tr:last-child td { border-bottom: 0; }

/* Coins arrondis : posés cellule par cellule, plutôt que confiés au
   rognage du tableau — les navigateurs ne le traitent pas tous pareil.
   Les rayons logiques suivent d'eux-mêmes le sens d'écriture. */
table.stats thead th:first-child  { border-start-start-radius: var(--rayon-s); }
table.stats thead th:last-child   { border-start-end-radius: var(--rayon-s); }
table.stats tbody tr:last-child th { border-end-start-radius: var(--rayon-s); }
table.stats tbody tr:last-child td:last-child { border-end-end-radius: var(--rayon-s); }

.nodata { color: var(--texte-faible); }
.table-note {
  font-size: .8125rem;
  color: var(--texte-faible);
  margin-top: .65rem;
  max-width: var(--texte-large);
}

/* ====================================================================
   7. FAQ
   ==================================================================== */

.faq dl { margin: 0; max-width: var(--texte-large); }
.faq dt {
  position: relative;
  font-weight: 650;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  padding-inline-start: 1.6rem;
  border-top: 1px solid var(--bord);
}
.faq dt::before {
  content: "?";
  position: absolute;
  inset-inline-start: 0;
  top: 1.5rem;
  color: var(--accent);
  font-weight: 700;
}
.faq dt:first-of-type { margin-top: .5rem; padding-top: 0; border-top: 0; }
.faq dt:first-of-type::before { top: 0; }
.faq dd {
  margin: .5rem 0 0;
  padding-inline-start: 1.6rem;
  color: var(--texte-doux);
}
.faq dd p { margin-bottom: .6rem; }

/* ====================================================================
   8. Publicité
   Emplacements explicites, posés par src/Ads.php. Trois principes :
   ils s'annoncent (libellé), ils réservent leur hauteur (pas de saut de
   mise en page), et ils s'effacent si Google ne les remplit pas.
   ==================================================================== */

.ad {
  margin: 2.75rem 0;
  padding: .7rem;
  background: var(--surface-doux);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
  text-align: center;
  /* Rayures d'attente : ce qui se voit tant que l'annonce n'est pas
     arrivée reste manifestement un cadre, pas un morceau d'article. */
  background-image: repeating-linear-gradient(
    135deg,
    var(--trame) 0 1px,
    transparent 1px 8px
  );
}
.ad-label {
  display: block;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  margin-bottom: .5rem;
}
.ad ins.adsbygoogle {
  display: block;
  max-width: 100%;
  /* Transparent : tant que l'annonce n'est pas arrivée, c'est la trame du
     cadre qui se voit, et non un rectangle blanc de la taille d'un article. */
  background: transparent;
}

/* Hauteur réservée : le texte qui suit ne bougera pas à l'arrivée de
   l'annonce. Les valeurs correspondent aux formats effectivement servis. */
.ad-in-article {
  max-width: var(--texte-large);
}
.ad-in-article ins.adsbygoogle { min-height: 250px; }
.ad-bloc ins.adsbygoogle { min-height: 280px; }

/* Emplacement non rempli : Google le signale, on retire le cadre. */
.ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* Une annonce laissée par les anciennes annonces automatiques, hors de
   nos cadres, ne doit pas déborder. */
ins.adsbygoogle { max-width: 100%; }

/* ====================================================================
   9. Plan de site en pied de page
   Tout le maillage interne est regroupé ici, en fin de lecture.
   ==================================================================== */

/*
 * Le plan de site forme un panneau à part entière, posé en fin de feuille :
 * la navigation reste en bas, mais elle se voit et s'assume au lieu de
 * pendre sous l'article.
 */
.sitemap-region {
  margin-top: 3.25rem;
  padding: clamp(1.25rem, .9rem + 1vw, 2rem);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  background: linear-gradient(180deg,
              var(--surface-doux),
              color-mix(in srgb, var(--surface-doux) 35%, var(--surface)));
}
/* Le titre de zone tire un filet jusqu'au bord : séparation nette entre
   la lecture et la navigation, sans ajouter de bloc. */
.sitemap-region > h2 {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-faible);
  font-weight: 650;
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}
.sitemap-region > h2::before {
  content: "";
  width: 1.1rem;
  height: 2px;
  flex: none;
  background: var(--accent);
}
.sitemap-region > h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--bord), transparent);
}

.links-block { margin-bottom: 2rem; }
.links-block h2 {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--texte);
  border: 0;
  padding: 0;
  margin: 0 0 .7rem;
}
.links-block h2::before { content: none; }

.links-inline {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.links-inline a {
  display: inline-block;
  padding: .32rem .85rem;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-pilule);
  font-size: .875rem;
  text-decoration: none;
  color: var(--texte-doux);
  transition: transform .12s, border-color .12s, color .12s, box-shadow .12s;
}
.links-inline a:hover {
  border-color: var(--encre-clair);
  color: var(--encre-clair);
  transform: translateY(-1px);
  box-shadow: var(--ombre-1);
}
.links-inline > li > span {
  display: inline-block;
  padding: .32rem .85rem;
  font-size: .875rem;
  color: var(--texte-faible);
}

/* Colonnes du plan de site : régions côte à côte. */
.sitemap-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.75rem 2.5rem;
}
.sitemap-cols h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  letter-spacing: .09em;
  margin: 0 0 .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--bord);
  color: var(--texte-faible);
}
.sitemap-cols h3::before {
  content: "";
  width: .35rem;
  height: .35rem;
  flex: none;
  border-radius: 50%;
  background: var(--bord-fort);
}
.sitemap-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
}
.sitemap-cols li { margin-bottom: .3rem; }
.sitemap-cols a {
  font-size: .9375rem;
  text-decoration: none;
  color: var(--texte-doux);
}
.sitemap-cols a:hover { color: var(--accent); text-decoration: underline; }

/* Grille d'entrée : les examens, en fin d'accueil. Chaque carte porte un
   chevron qui avance au survol — la seule animation du site. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .75rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.cards a {
  position: relative;
  display: block;
  padding: .95rem 2.4rem .95rem 1.1rem;
  padding-inline: 1.1rem 2.4rem;
  background: linear-gradient(160deg, var(--surface), var(--surface-doux));
  border: 1px solid var(--bord);
  border-inline-start: 3px solid var(--encre-clair);
  border-radius: var(--rayon-s);
  font-weight: 650;
  font-size: .95rem;
  text-decoration: none;
  color: var(--texte);
  box-shadow: var(--ombre-1);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.cards a::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.1rem;
  top: 50%;
  width: .45rem;
  height: .45rem;
  border-top: 2px solid var(--bord-fort);
  border-inline-end: 2px solid var(--bord-fort);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .14s, border-color .14s;
}
[dir="rtl"] .cards a::after { transform: translateY(-50%) rotate(-135deg); }
.cards a:hover {
  border-inline-start-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--ombre-levee);
}
.cards a:hover::after {
  border-color: var(--accent);
  transform: translateY(-50%) translateX(3px) rotate(45deg);
}
[dir="rtl"] .cards a:hover::after {
  transform: translateY(-50%) translateX(-3px) rotate(-135deg);
}

.btn {
  display: inline-block;
  padding: .7rem 1.5rem;
  background: linear-gradient(180deg, var(--encre-clair), var(--encre));
  color: #fff;
  border-radius: var(--rayon-s);
  text-decoration: none;
  font-weight: 650;
  font-size: .9375rem;
  box-shadow: var(--ombre-1);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.btn:hover {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ombre-levee);
}

/* ====================================================================
   10. Pied de page
   ==================================================================== */

.site-footer {
  position: relative;
  background:
    radial-gradient(80% 140% at 92% -30%, var(--encre-clair), transparent 60%),
    linear-gradient(200deg, var(--encre) 0%, var(--encre-nuit) 100%);
  color: rgba(255, 255, 255, .78);
  margin-top: 3.5rem;
  padding-block: 2.5rem 1.75rem;
  font-size: .875rem;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) 28%,
    color-mix(in srgb, var(--accent) 45%, transparent) 55%,
    color-mix(in srgb, var(--accent) 12%, transparent) 100%
  );
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 3px 0 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, .04) 0 1px,
    transparent 1px 10px
  );
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
          mask-image: linear-gradient(to top, #000, transparent);
}
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.foot-top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.foot-top h2 {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-weight: 650;
  border: 0;
  padding: 0;
  margin: 0 0 .55rem;
}
.foot-top h2::before { content: none; }
.foot-top ul {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 1.25rem;
}
.foot-note, .foot-copy {
  color: rgba(255, 255, 255, .6);
  margin: 0 0 .4rem;
  max-width: 60ch;
  font-size: .8125rem;
}

/* Retour en haut : un lien, pas un bouton flottant — rien ne doit
   recouvrir le contenu. */
.to-top {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--rayon-pilule);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .8);
  transition: border-color .12s, color .12s, background .12s;
}
.to-top::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-top: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(-45deg);
}
.to-top:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  text-decoration: none;
}

/* ====================================================================
   11. Adaptations
   ==================================================================== */

@media (max-width: 40rem) {
  body {
    font-size: 1rem;
    background-size: 100% 24rem, 1.75rem 1.75rem, 1.75rem 1.75rem;
  }
  .masthead { padding-block: 1.1rem; gap: .8rem; }
  .emblem { width: 2.35rem; height: 2.35rem; }
  .emblem svg { width: 1.35rem; height: 1.35rem; }
  .brand-name { font-size: 1.125rem; }
  .brand-tag { font-size: .6875rem; }
  main { padding-block: 1.5rem 2.5rem; }
  .sheet {
    border-inline: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sheet::before { inset-inline: 0; border-radius: 0; }
  .wrap { width: 100%; padding-inline: 1rem; }
  .breadcrumb ol { width: 100%; padding-inline: 1rem; }
  .ad { margin-inline: -.25rem; }
  .sitemap-region { margin-inline: -.5rem; }
  .ad-in-article ins.adsbygoogle { min-height: 200px; }
  .foot-bottom { align-items: flex-start; }
}

@media print {
  .site-header, .site-footer, .ad, .sitemap-region, .breadcrumb { display: none; }
  body { background: #fff; font-size: 11pt; }
  .sheet { border: 0; padding: 0; box-shadow: none; }
  .sheet::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .cards a:hover, .links-inline a:hover, .btn:hover { transform: none; }
}