/* ==========================================================================
   Demonstration La Trace, charte laregionduvelo.fr
   Les composants de base viennent du gabarit releve sur le site reel
   (voir rdv-da/DA.md). Les blocs marques AJOUT n'existent pas sur le site
   source : ils servent les pages que la demonstration ajoute.
   Toutes les valeurs de couleur, taille et rayon viennent de tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-greyDarkColored);
  background: var(--rdv-surface);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; }

/* ---------- Bandeau de demonstration (obligatoire, non negociable) -------- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-height: 40px;
  padding: 6px var(--space-4);
  background: #111111;
  color: #ffffff;
  font-size: var(--fs-P2);
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.02em;
}
.demo-banner strong { font-weight: var(--fw-bold); }
.demo-banner .demo-dot {
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-trek); flex: 0 0 auto;
}
.demo-banner a { text-decoration: underline; }
/* AJOUT : en mobile le bandeau tient sur trois lignes, soit bien plus que les
   40 px sur lesquels le header est cale. Sticky, il passerait sous le header.
   Il reste donc en flux sous 1024 px, en tete de page, et le header colle en
   haut. Si le texte du bandeau change, ce calcul est a reprendre. */
@media (max-width: 1023px) {
  .demo-banner { position: static; }
  .site-header, .header-band { top: 0; }
}

/* ---------- Grille racine : contenu + bande logo Region a droite ---------- */
.shell {
  display: grid;
  grid-template-columns: 1fr var(--aura-band-w-mobile);
  grid-auto-rows: max-content;
  min-height: 100dvh;
}
@media (min-width: 1024px) {
  .shell { grid-template-columns: 1fr var(--aura-band-w-desktop); }
}

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 40px;
  z-index: var(--z-header);
  background: var(--color-primary1-default);
  height: var(--header-height-mobile);
}
.site-header__inner {
  height: var(--header-height-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  box-shadow: var(--shadow-sm);
}
.site-header__brand { display: flex; align-items: center; }
.site-header__logo {
  height: var(--header-logo-h-mobile);
  width: auto;
  margin-right: 15px;
}
.site-header__title {
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-P1);
  margin: 0;
}
.site-header__nav { display: none; }
.header-band {
  position: sticky;
  top: 40px;
  z-index: var(--z-header-band);
  display: flex;
  justify-content: flex-end;
  height: var(--header-height-mobile);
  background: var(--color-primary1-default);
}
.header-band img {
  max-height: 100%;
  padding: 0.2rem 0 0.2rem 0.2rem;
  background: var(--rdv-aura-band);
  border-radius: 100% 0 0 100%;
}
@media (min-width: 1024px) {
  .site-header, .site-header__inner, .header-band { height: var(--header-height-desktop); }
  .site-header__logo { height: var(--header-logo-h-desktop); }
  .site-header__title { font-size: var(--fs-H2); line-height: 32px; font-weight: var(--fw-bold); }
  .site-header__nav { display: flex; align-items: center; gap: var(--space-2); }
  .header-band img { padding: 0.5rem 0 0.5rem 0.5rem; }
}
.btn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--color-primary1-default);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-P1);
  transition: color var(--duration-fast) var(--easing);
}
.btn-search:hover, .btn-search:focus { color: var(--color-primary1-light); }
.header-menu {
  display: flex; align-items: center; gap: var(--space-5);
  color: #fff; margin-right: var(--space-2);
}
.header-menu a { transition: opacity var(--duration-fast) var(--easing); }
.header-menu a:hover { opacity: 0.75; text-decoration: underline; }
/* AJOUT : la page courante se signale dans le menu. */
.header-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Zone principale (occupe les deux colonnes) ------------------- */
.site-main { grid-area: span 2 / span 2; position: relative; }

/* ---------- Banniere ----------------------------------------------------- */
.banner { position: relative; }
/* AJOUT : le voile et le titre se calent sur l'image, pas sur la banniere.
   Sans ce conteneur, le chapo repasse en flux en mobile, la banniere grandit,
   et le voile ancre en bas vient teinter le texte. */
.banner__media { position: relative; }
.banner__img {
  width: 100%;
  height: var(--banner-h-mobile);
  object-fit: cover;
  object-position: center;
  background: var(--rdv-primary-100);
}
.banner__veil {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;
  background: linear-gradient(to top, var(--color-gradientOnImages), transparent);
}
.banner__title {
  position: absolute; bottom: 80px; left: 0; width: 100%;
  padding: 0 var(--space-10);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-MobileH1);
  line-height: var(--lh-MobileH1);
  text-align: center;
  text-shadow: var(--text-shadow-on-image);
}
/* AJOUT : sous-titre de banniere, les pages interieures en ont besoin. */
.banner__lead {
  position: absolute; bottom: 40px; left: 0; width: 100%;
  padding: 0 var(--space-4);
  margin: 0;
  color: #fff;
  font-size: var(--fs-MobileC2);
  line-height: var(--lh-MobileC2);
  text-align: center;
  /* Le sous-titre tombe plus bas que le titre, souvent sur une zone claire de
     la photo : une seule ombre diffuse ne suffit pas a le detacher. */
  text-shadow: var(--text-shadow-on-image), 0 1px 3px rgba(0, 0, 0, 0.6);
}
@media (min-width: 1024px) {
  .banner__img { height: var(--banner-h-desktop); }
  .banner__veil { height: 400px; }
  .banner__title {
    bottom: 160px; padding: 0 10vw;
    font-size: var(--fs-H1); line-height: var(--lh-H1);
  }
  .banner__lead { bottom: 110px; padding: 0 20vw; font-size: var(--fs-P1); line-height: 24px; }
}
/* AJOUT : en mobile la banniere ne fait que 244 px. Un chapo pose dessus passe
   sous la barre d'activites et devient illisible : il repasse en flux, sous
   l'image, et la barre cesse de remonter pour ne pas le recouvrir. */
@media (max-width: 1023px) {
  .banner__lead {
    position: static;
    padding: var(--space-4) var(--page-gutter-mobile) 0;
    color: var(--color-greyDarkColored);
    text-align: left;
    text-shadow: none;
    font-size: var(--fs-MobileC1);
    line-height: var(--lh-MobileC1);
  }
}

/* AJOUT : banniere courte pour les pages interieures. */
.banner--inner .banner__img { height: 200px; }
@media (min-width: 1024px) {
  .banner--inner .banner__img { height: 44vh; }
  .banner--inner .banner__title { bottom: 120px; }
  .banner--inner .banner__lead { bottom: 76px; }
}

/* ---------- Barre d'activites flottante --------------------------------- */
.activity-bar {
  margin: 0 var(--space-4);
  position: relative;
  top: -24px;
  z-index: 10;
}
.activity-bar__card {
  background: #fff;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: var(--activity-bar-max-width);
}
.activity-bar nav { display: flex; flex-direction: column; }
.activity-bar a {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: 12px var(--space-4);
  color: var(--color-greyDarkColored);
  transition: background var(--duration-base) var(--easing), color var(--duration-base) var(--easing);
}
.activity-bar a img { width: 36px; }
/* AJOUT : les pictogrammes du site ne couvrent que les pratiques vélo. Les
   cinq entrées de la démonstration utilisent des icônes au trait, en SVG
   inline, qui prennent la couleur de la charte. */
.activity-bar a svg {
  width: 36px; height: 36px; flex: 0 0 auto;
  color: var(--color-primary1-default);
}
.activity-bar a:hover, .activity-bar a:focus { text-decoration: underline; }
@media (min-width: 1024px) {
  .activity-bar { display: flex; justify-content: center; top: -60px; }
  .activity-bar__card { align-self: center; }
  .activity-bar nav {
    flex-direction: row; flex-wrap: wrap;
    align-items: stretch; justify-content: center;
    padding: 0 var(--space-4);
  }
  .activity-bar a {
    flex-direction: column; justify-content: flex-end; text-align: center;
    padding: var(--space-4);
    font-size: var(--fs-P2);
  }
  .activity-bar a span { min-width: 80px; }
  .activity-bar a:hover, .activity-bar a:focus {
    background: #fff; color: var(--color-greyDarkColored);
  }
}

/* AJOUT, a garder APRES le bloc ci-dessus, meme specificite : le chapo est
   repasse en flux sous la banniere en mobile, la barre ne doit donc plus
   remonter de 24 px, sinon elle le recouvre. */
@media (max-width: 1023px) {
  .activity-bar { top: 0; margin-top: var(--space-4); }
}

/* ---------- Section de contenu ------------------------------------------ */
.section {
  display: flex; flex-direction: column;
  margin: 0 var(--page-gutter-mobile);
}
@media (min-width: 1024px) { .section { margin: 0 var(--page-gutter-desktop); } }

.section__title {
  display: flex; align-items: center;
  border-top: 1px solid var(--color-greySoft-default);
  padding-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-greyDarkColored);
}
.section__title span {
  font-size: var(--fs-H2); line-height: var(--lh-H2); font-weight: var(--fw-bold);
}
.section__icon {
  width: 40px; height: 40px; flex: 0 0 auto;
  margin-right: var(--space-2);
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
@media (min-width: 1024px) {
  .section__title { padding-top: var(--space-10); margin-bottom: var(--space-6); }
  .section__icon { margin-right: var(--space-3); }
}
/* AJOUT : chapo de section, texte courant sous un titre. */
.section__lead { max-width: 70ch; margin: 0 0 var(--space-4); }
.section__lead + .section__lead { margin-top: calc(var(--space-4) * -1 + var(--space-3)); }
.stack-md > * + * { margin-top: var(--space-4); }
.mb-lg { margin-bottom: var(--space-10); }

/* ---------- Cartes de contenu ------------------------------------------- */
.card-grid {
  display: flex; gap: var(--card-gap);
  padding: 0 var(--space-5);
  overflow-x: auto;
}
@media (min-width: 1024px) {
  .card-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    padding: 0; overflow: visible;
  }
}
.card {
  display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch;
  flex-shrink: 0;
  min-width: var(--card-min-width);
  max-width: var(--card-min-width);
  margin: var(--space-4) 0;
  background: #fff;
  border: 1px solid var(--color-greySoft-default);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: border-color var(--duration-base) var(--easing);
}
.card:hover { border-color: var(--color-blackSemiTransparent); }
@media (min-width: 1024px) {
  .card { max-width: none; margin: var(--space-6) var(--space-1); }
}
.card__media { position: relative; }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__credit {
  position: absolute; top: 0; left: 0; width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12px var(--space-2) var(--space-1);
  background: linear-gradient(to bottom, var(--color-blackSemiTransparent), transparent);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-MobileC3);
}
.card__badge {
  position: absolute; top: var(--space-4); left: var(--space-4);
  height: 32px; max-width: 32px;
  display: flex; align-items: center;
  padding-left: 8px; padding-right: var(--space-3);
  border: 2px solid #fff;
  border-radius: var(--radius-full);
  background: var(--color-trek);
  color: #fff;
  font-size: var(--fs-P2);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  overflow: hidden;
  z-index: 10;
  transition: max-width var(--duration-slow) var(--easing);
}
.card:hover .card__badge, .card__badge:hover { max-width: 300%; }
.card__badge i {
  width: 16px; height: 16px; flex: 0 0 auto; margin-right: var(--space-2);
  background-color: #fff;
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
.card__body { padding: var(--space-4); }
@media (min-width: 1024px) { .card__body { padding: var(--space-6); } }
.card__place { color: var(--color-greyDarkColored); font-size: var(--fs-P2); }
.card__title {
  margin-top: var(--space-1);
  font-size: var(--fs-cardTitle); line-height: var(--lh-cardTitle);
  font-weight: var(--fw-bold);
  color: var(--color-primary1-default);
}
.card__text { margin: var(--space-2) 0 0; font-size: var(--fs-P1); }
.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-primary2);
  color: var(--color-primary3);
  font-size: var(--fs-P2);
}
@media (min-width: 1024px) { .chip { font-size: var(--fs-P1); } }
.card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-P2);
}
@media (min-width: 1024px) {
  .card__chips, .card__meta { gap: var(--space-4); margin-top: var(--space-4); }
}
.card__meta li { display: flex; align-items: center; color: var(--color-primary1-default); }
.card__meta li span { margin-left: var(--space-2); color: var(--color-greyDarkColored); }

/* ---------- Boutons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--fs-P1); font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing);
}
.btn--primary { background: var(--color-primary1-default); color: #fff; }
.btn--primary:hover, .btn--primary:focus { background: var(--rdv-primary-600); }
.btn--ghost {
  background: #fff; color: var(--color-primary1-default);
  border-color: var(--color-greySoft-default); box-shadow: var(--shadow-sm);
}
.btn--ghost:hover, .btn--ghost:focus { color: var(--color-primary1-light); }
/* AJOUT : rangee de boutons, sous une section. */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-2) 0 var(--space-6); }

/* ==========================================================================
   BLOC IFRAME app.latrace.com
   Piege connu (note iframe-bridee-par-le-css-de-lhote) : une regle d'editeur
   du type `.o-wysiwyg iframe { max-width: 672px }` plafonne l'iframe. Ici :
     - aucune regle max-width sur iframe dans tout ce fichier,
     - max-width: none pose explicitement, en plus du style inline de la balise,
     - hauteur fixee en pixels avec min-height egale, jamais en %,
     - le conteneur est en pleine largeur de contenu, sans max-width.
   ========================================================================== */
.lt-iframe-block {
  width: 100%;
  max-width: none;
  margin: var(--space-6) 0 var(--space-10);
  position: relative;
}
.lt-iframe-block iframe {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 930px;
  min-height: 930px;
  max-height: none !important;
  border: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--rdv-primary-050);
}
@media (max-width: 1023px) {
  /* !important obligatoire : le style inline de la balise, pose comme garde
     contre le bridage en largeur, l'emporterait sinon sur cette hauteur. */
  .lt-iframe-block iframe { height: 400px !important; min-height: 400px !important; }
}

/* AJOUT : etat de repli du bloc carte.
   La carte est servie par un tiers (app.latrace.com). Si l'identifiant n'est
   pas encore cable, ou si le cadre ne repond pas, la page doit rester lisible
   et dire pourquoi, plutot que d'afficher un rectangle vide. */
.lt-map-fallback {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--space-3);
  min-height: 400px;
  padding: var(--space-6);
  border: 1px dashed var(--color-greySoft-default);
  border-radius: var(--radius-xl);
  background: var(--rdv-primary-050);
  color: var(--color-greyDarkColored);
}
@media (min-width: 1024px) { .lt-map-fallback { min-height: 360px; padding: var(--space-10); } }
.lt-map-fallback strong {
  display: block;
  font-size: var(--fs-H4); line-height: var(--lh-H4);
  color: var(--color-primary1-default);
}
.lt-map-fallback p { margin: 0; max-width: 60ch; }
.lt-map-fallback code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-P2);
  background: #fff;
  border: 1px solid var(--color-greySoft-default);
  border-radius: var(--radius-medium);
  padding: 2px 6px;
}

/* ---------- AJOUT : grille de liens vers les autres pages ---------------- */
.link-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 640px) { .link-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .link-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
.link-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-greySoft-default);
  border-radius: var(--radius-xl);
  background: #fff;
  transition: border-color var(--duration-base) var(--easing);
}
.link-card:hover, .link-card:focus { border-color: var(--color-blackSemiTransparent); }
.link-card__title {
  font-size: var(--fs-H4); line-height: var(--lh-H4);
  font-weight: var(--fw-bold);
  color: var(--color-primary1-default);
}
.link-card__text { font-size: var(--fs-P2); line-height: var(--lh-P2); }

/* AJOUT : grille des 12 departements, le logo porte le lien. */
.dep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-10);
}
@media (min-width: 640px) { .dep-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dep-grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); } }
.dep-card {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  border: 1px solid var(--color-greySoft-default);
  border-radius: var(--radius-xl);
  background: #fff;
  text-align: center;
  transition: border-color var(--duration-base) var(--easing);
}
.dep-card:hover, .dep-card:focus { border-color: var(--color-blackSemiTransparent); }
.dep-card img { max-height: 48px; width: auto; }
.dep-card span {
  font-size: var(--fs-P2); font-weight: var(--fw-semibold);
  color: var(--color-primary1-default);
}

/* AJOUT : en-tete de page departementale, logo du departement a gauche. */
.dep-head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0 0;
}
.dep-head img { max-height: 64px; width: auto; flex: 0 0 auto; }
/* En mobile, un logo large laisse trois lignes au titre : on empile. */
@media (max-width: 639px) {
  .dep-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (min-width: 1024px) {
  .dep-head { padding-top: var(--space-6); gap: var(--space-6); }
  .dep-head img { max-height: 90px; }
}
.dep-head h2 {
  font-size: var(--fs-H3); line-height: var(--lh-H3);
  font-weight: var(--fw-bold); color: var(--color-primary1-default);
}
@media (min-width: 1024px) { .dep-head h2 { font-size: var(--fs-H2); line-height: var(--lh-H2); } }

/* AJOUT : liste a puces sobre pour les arguments produit. */
.bullets { max-width: 75ch; }
.bullets li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
}
.bullets li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-trek);
}
.bullets strong { color: var(--color-primary1-default); }

/* AJOUT : sequence numerotee du planificateur. */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.step {
  padding: var(--space-5);
  border: 1px solid var(--color-greySoft-default);
  border-radius: var(--radius-xl);
  background: #fff;
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary1-default); color: #fff;
  font-weight: var(--fw-bold);
}
.step h3 {
  font-size: var(--fs-H4); line-height: var(--lh-H4);
  font-weight: var(--fw-bold); color: var(--color-primary1-default);
  margin-bottom: var(--space-2);
}
.step p { margin: 0; font-size: var(--fs-P1); }

/* AJOUT : encart de comparaison, ce que l'outil en place ne fait pas. */
.callout {
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  border-left: 4px solid var(--color-trek);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--rdv-primary-050);
}
.callout p { margin: 0; max-width: 75ch; }
.callout p + p { margin-top: var(--space-3); }

/* AJOUT : fil d'ariane. */
.breadcrumb {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-P2);
  color: var(--color-greyDarkColored);
}
.breadcrumb a { text-decoration: underline; }

/* ---------- Logos partenaires ------------------------------------------- */
.partner-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-6); }
.partner-list li { max-width: 25%; text-align: center; }
.partner-list img { margin: 0; max-height: 50px; width: auto; }
@media (min-width: 1024px) {
  .partner-list li { max-width: none; }
  .partner-list img { max-width: 100%; height: auto; }
}

/* ---------- Footer ------------------------------------------------------- */
.site-footer { background: var(--color-primary1-default); }
.site-footer__inner { margin: 0 var(--space-4); }
@media (min-width: 1024px) { .site-footer__inner { margin: 0 var(--page-gutter-desktop); } }
.footer-social {
  display: flex; justify-content: center; gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-greySoft-default);
}
.footer-social a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-2xl);
  background: #fff; border: 1px solid #fff; color: #000;
  transition: background var(--duration-base) var(--easing);
}
.footer-cols {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 10px 0 var(--space-10);
  color: #fff;
}
@media (min-width: 1024px) {
  .footer-social { padding: var(--space-10) 0; }
  .footer-cols { flex-direction: row; padding: var(--space-10) 0 var(--space-18); }
}
.footer-cols__title {
  font-size: var(--fs-MobileC1); font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
}
@media (min-width: 1024px) { .footer-cols__title { font-size: var(--fs-H3); line-height: var(--lh-H3); } }
.footer-cols p { margin: 0; font-size: var(--fs-MobileC3); line-height: 1.5; }
@media (min-width: 1024px) { .footer-cols p, .footer-links a { font-size: var(--fs-P1); } }
.footer-links a {
  color: #fff; font-size: var(--fs-MobileC3);
  transition: opacity var(--duration-base) var(--easing);
}
.footer-links a:hover, .footer-links a:focus { text-decoration: underline; }
.footer-right { text-align: left; }
@media (min-width: 1024px) { .footer-right { text-align: right; } }
.footer-bandeau { max-width: 200px; margin: 1rem 0; }

/* AJOUT : lien d'evitement, la page n'en avait aucun. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  padding: var(--space-3) var(--space-4);
  background: #fff; color: var(--color-primary1-default);
  z-index: 1001;
}
.skip-link:focus { left: var(--space-4); top: 48px; }