/* =========================================================
   GPP – Camions-citernes renversés : landing page
   Mobile-first. Breakpoints : 600px (grand mobile / petite tablette),
   900px (tablette paysage / desktop).
   ========================================================= */

:root {
  --red: #e30613;
  --red-band: #f42a3f;
  --red-soft: #f0263f;
  --blue: #2a5fe0;
  --blue-deep: #175ce3;
  --grey-band: #eff0f2;
  --divider: #f1f1f1;
  --ink: #111;
  --white: #fff;

  --pill-green: linear-gradient(100deg, #1d9be8 0%, #3a9a8a 45%, #4c8f17 100%);
  --pill-red: linear-gradient(100deg, #d63f3f 0%, #e0703a 100%);

  --container: 1000px;
  --gutter: clamp(16px, 5vw, 40px);
  --font: "Montserrat", "Gotham", "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: -999px; top: 8px;
  background: var(--blue-deep); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 10;
}
.skip-link:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }

/* HERO : voir bloc « ACCUEIL » en fin de fichier */

/* ---------------- BANDES DE SECTION ---------------- */
.band {
  padding: clamp(28px, 5vw, 40px) var(--gutter);
  text-align: center;
}
.band--grey { background: var(--grey-band); margin-top: 8px; }
.band--red  { background: var(--red-band); color: var(--white); padding-block: clamp(32px, 6vw, 56px); }

.band__title {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.band__title--blue { color: var(--blue); font-size: clamp(1.25rem, 4.6vw, 2.6rem); }
.band__title--white {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  font-size: clamp(1.15rem, 4.6vw, 3.1rem);
}
.band__icon { width: 1.25em; height: 1.25em; flex: none; }
.band__sub { margin-top: 6px; font-weight: 700; font-size: clamp(1.05rem, 3.4vw, 2.2rem); }

/* ---------------- CARTES (gestes / interdictions) ---------------- */
.card {
  padding-block: clamp(36px, 7vw, 72px);
  border-bottom: 6px solid var(--divider);
}
.card:last-child { border-bottom: 0; }

.pill {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: clamp(1.35rem, 4.6vw, 2.35rem);
  line-height: 1.24;
  color: var(--white);
  max-width: 19ch;
  letter-spacing: -0.01em;
}
.pill span {
  display: inline;
  padding: 0.04em 0.55em 0.1em;
  border-radius: 999px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.pill--green span { background: var(--pill-green); }
.pill--red span   { background: var(--pill-red); }

/* titres longs : on leur laisse plus de largeur */
.pill--wide { max-width: 26ch; }

.card__media {
  position: relative;
  margin-top: clamp(16px, 3vw, 8px);
}

/* Calque de l'illustration : cercle + pastille numérotée + coche/triangle,
   positionnés en % de la largeur de l'image (unités cqw) pour rester calés
   sur le personnage quelle que soit la taille d'écran.
   Variables par carte (sans unité) : --cx, --cy = centre du cercle,
   --d = diamètre, --lift = espace réservé au-dessus de l'image,
   --il / --it = position de l'icône (optionnel). */
.card__media { container-type: inline-size; }
.art {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--lift, 0) * 1cqw);
  margin-bottom: calc(var(--drop, 0) * 1cqw);  /* le cercle ne recouvre pas le texte */
}
.art > img {
  position: relative;
  z-index: 3;
  width: 100%;
  mix-blend-mode: multiply;   /* le blanc de l'image laisse voir le cercle */
}
.spot {
  position: absolute;
  left: calc((var(--cx) - var(--d) / 2) * 1cqw);
  top: calc((var(--cy) - var(--d) / 2) * 1cqw);
  width: calc(var(--d) * 1cqw);
  aspect-ratio: 1;
}
.spot__disc {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
}
.spot__num {
  /* Géométrie relevée sur la maquette : diamètre = 1/3 du cercle,
     centre à 45° juste en dehors du bord (≈ 1,15 rayon). */
  position: absolute;
  z-index: 1;                 /* passe sous le cercle */
  left: 76.5%;
  top: -5.4%;
  width: 33.5%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: calc(var(--d) * 0.12cqw);
  line-height: 1;
}
.spot__icon {
  position: absolute;
  z-index: 4;
  mix-blend-mode: multiply;
}
.card--do .spot__num   { background: #00a13a; }
.card--dont .spot__num { background: #f42a3f; }
/* position de l'icône réglable par carte via --il / --it (en % du cercle) */
.card--do .spot__icon   { left: var(--il, 84.6%); top: var(--it, 56.8%); width: 25%; }
.card--dont .spot__icon { left: var(--il, 67.6%); top: var(--it, 28.8%); width: var(--iw, 32%); }



.card__text {
  margin-top: clamp(16px, 3vw, 28px);
  text-align: center;
  font-size: clamp(0.95rem, 2.5vw, 1.2rem);
  line-height: 1.3;
  max-width: 36em;
  margin-inline: auto;
}
.card__text p + p { margin-top: 1.1em; }
.hl { color: var(--red-soft); font-weight: 700; }


/* ---------------- VIDÉO ---------------- */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #2c2c2c;
  overflow: hidden;
}
.video iframe, .video video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

.video__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--white);
  font: inherit;
  cursor: pointer;
}
.video__icon {
  display: grid; place-items: center;
  width: clamp(48px, 9vw, 64px); height: clamp(48px, 9vw, 64px);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-deep);
  transition: transform .2s ease;
}
.video__icon svg { width: 52%; height: 52%; margin-left: 8%; }
.video__play:hover .video__icon,
.video__play:focus-visible .video__icon { transform: scale(1.08); }
.video__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.video__notice {
  position: absolute; inset: auto 0 16px; text-align: center;
  font-size: .85rem; font-weight: 500; opacity: .8; padding-inline: 16px;
}

/* ---------------- FOOTER ----------------
   Positions relevées sur la maquette (1070 px de large),
   en fraction de --hw. */
.footer {
  --hw: min(100vw, 1600px);
  position: relative;
  width: var(--hw);
  margin-inline: auto;
  padding: calc(var(--hw) * 0.0486) 0 calc(var(--hw) * 0.029) calc(var(--hw) * 0.143);
}
.footer__gpp { display: flex; align-items: flex-start; }
.footer__gpp img { width: calc(var(--hw) * 0.1953); height: auto; }
.footer__members {
  margin: calc(var(--hw) * -0.0019) 0 0 calc(var(--hw) * 0.0149);
  padding: calc(var(--hw) * 0.0019) 0 0 calc(var(--hw) * 0.0168);
  border-left: max(1px, calc(var(--hw) * 0.0019)) solid #e0602f;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: max(0.6rem, calc(var(--hw) * 0.0124));
  line-height: 1.25;
  color: #000;
}
.footer__follow {
  margin-top: calc(var(--hw) * 0.0142);
  color: #567f90;
  font-weight: 500;
  font-size: max(0.6rem, calc(var(--hw) * 0.0108));
  line-height: 1;
  margin-left: calc(var(--hw) * 0.0019);
}
.social {
  display: flex;
  gap: calc(var(--hw) * 0.0093);
  margin: calc(var(--hw) * 0.0112) 0 0 calc(var(--hw) * 0.0028);
}
.social__link {
  display: grid; place-items: center;
  width: max(32px, calc(var(--hw) * 0.0402)); aspect-ratio: 1; height: auto;
  border-radius: 50%; color: #fff; text-decoration: none;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.15);
  transition: transform .2s ease;
}
.social__link svg { width: 58%; height: 58%; }
.social__link--fb { place-items: end center; overflow: hidden; }
.social__link--fb svg { width: 88%; height: 88%; margin-bottom: -8%; }
.social__link:hover { transform: translateY(-2px); }
.social__link--fb { background: radial-gradient(circle at 35% 25%, #5b7fc4, #3b5aa6 55%, #2c3f86); }
.social__link--in { background: radial-gradient(circle at 35% 25%, #4f86c9, #2f63a8 55%, #23488a); }
.social__link--ig { background: radial-gradient(circle at 30% 105%, #fcd36b 0 25%, #f5803e 45%, #d6307a 65%, #8a3ab9 90%); }
.footer__legal {
  display: flex; flex-wrap: wrap; gap: 0 calc(var(--hw) * 0.0065);
  margin: calc(var(--hw) * 0.0145) 0 0 calc(var(--hw) * 0.0037);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: max(7px, calc(var(--hw) * 0.0058));
  line-height: 1.2;
}
.footer__legal a { text-decoration: none; color: #000; }
.footer__legal a:hover { text-decoration: underline; }
.footer__ministry {
  position: absolute;
  left: calc(var(--hw) * 0.6766);
  top: calc(var(--hw) * 0.0224);
}
.footer__ministry img { width: calc(var(--hw) * 0.2439); height: auto; }

/* ---------------- ANIMATIONS D'APPARITION ---------------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .discover span { animation: none; }
}

/* ---------------- PANNEAU COOKIES ---------------- */
.cookies {
  width: min(100% - 32px, 520px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  color: var(--ink);
}
.cookies:focus-visible { outline: none; }
.cookies::backdrop { background: rgba(10, 20, 40, .55); }
.cookies__box { padding: clamp(20px, 5vw, 32px); font-weight: 500; font-size: .95rem; }
.cookies__title { color: var(--blue); font-weight: 800; font-size: 1.3rem; margin-bottom: 8px; }
.cookies__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid #eee; cursor: pointer;
}
.cookies__label { font-weight: 700; }
.cookies__desc { font-size: .82rem; color: #555; margin-top: 2px; }
.cookies__always { font-size: .78rem; color: #00a13a; font-weight: 700; white-space: nowrap; }
.cookies__toggle {
  appearance: none; flex: none; width: 46px; height: 26px; border-radius: 999px;
  background: #ccc; position: relative; cursor: pointer; transition: background .2s;
}
.cookies__toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: transform .2s;
}
.cookies__toggle:checked { background: #00a13a; }
.cookies__toggle:checked::after { transform: translateX(20px); }
.cookies__more { font-size: .85rem; margin-top: 8px; }
.cookies__actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.cookies__btn {
  font: inherit; font-weight: 700; color: #fff; background: var(--blue-deep);
  border: 0; border-radius: 999px; padding: 12px 24px; cursor: pointer; min-height: 44px;
}

/* ---------------- PAGES LÉGALES ---------------- */
.legal-header { padding-block: 20px; border-bottom: 1px solid #eee; }
.legal-back { color: var(--red); text-decoration: none; font-size: .9rem; display: inline-block; padding-block: 8px; }
.legal { max-width: calc(760px + 2 * var(--gutter)); padding-block: clamp(32px, 6vw, 64px); font-weight: 500; line-height: 1.6; }
.legal h1 { color: var(--red); font-weight: 800; font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 1.1; }
.legal__updated { color: #777; font-size: .85rem; margin-top: 8px; }
.legal h2 { color: var(--blue); font-weight: 700; font-size: 1.15rem; margin-top: 2em; margin-bottom: .5em; }
.legal p + p { margin-top: .8em; }
.legal ul { list-style: disc; padding-left: 1.3em; margin-top: .6em; }
.legal li + li { margin-top: .4em; }
.legal a { color: var(--blue-deep); }
.legal-footer { border-top: 1px solid #eee; padding-block: 24px; font-size: .8rem; }
.legal-footer .container { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.legal-footer a { text-decoration: none; padding-block: 6px; }

/* ---------------- BANDEAU COOKIES ---------------- */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  pointer-events: auto;
  max-width: 960px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
  font-weight: 500;
  font-size: .9rem;
  line-height: 1.45;
  animation: cookieIn .35s ease-out;
}
@keyframes cookieIn { from { transform: translateY(20px); opacity: 0; } }
.cookie-banner__text a { color: var(--blue-deep); white-space: nowrap; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-banner__btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 20px;
  border: 2px solid var(--blue-deep);
  border-radius: 999px;
  background: var(--blue-deep);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cookie-banner__btn--ghost { background: transparent; color: var(--blue-deep); }
@media (min-width: 768px) {
  .cookie-banner { padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .cookie-banner__inner { flex-direction: row; align-items: center; gap: 24px; padding: 20px 24px; }
  .cookie-banner__actions { flex-wrap: nowrap; flex: none; }
  .cookie-banner__btn { flex: none; }
  .cookie-banner__text { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner__inner { animation: none; } }

/* =========================================================
   PLEIN ÉCRAN : chaque partie occupe la hauteur de l'écran
   (100svh = hauteur visible, barres du navigateur mobile exclues).
   min-height (et non height) : si le contenu est plus long, la
   partie s'allonge au lieu d'être coupée.
   ========================================================= */
:root { --screen: 100vh; }
@supports (height: 100svh) { :root { --screen: 100svh; } }

@media (min-width: 768px) {
  html { scroll-snap-type: y proximity; }
}

/* =========================================================
   ACCUEIL — mesures relevées sur la maquette (1337 px de large),
   en fraction de --hw.
   ========================================================= */
.hero {
  --hw: min(100vw, 1600px);
  position: relative;
  width: var(--hw);
  margin-inline: auto;
  min-height: 0;
  display: block;
  padding: calc(var(--hw) * 0.1142) 0 0;
  overflow: hidden;
  scroll-snap-align: start;
}
.hero__top { position: relative; padding-left: calc(var(--hw) * 0.1399); display: block; }
.hero__title {
  color: var(--red);
  font-weight: 700;
  font-size: max(1rem, calc(var(--hw) * 0.0419));
  line-height: 1.08;
  letter-spacing: -0.005em;
  white-space: nowrap;
  margin-left: calc(var(--hw) * -0.0015);
}
.hero__lead {
  font-weight: 600;
  font-size: max(0.6rem, calc(var(--hw) * 0.0149));
  line-height: 1.442;
  max-width: none;
}
.hero__top .hero__lead { margin: calc(var(--hw) * 0.0105) 0 0; }
.hero__art { position: static; }
.hero__warning {
  position: absolute;
  display: block;
  left: calc(var(--hw) * 0.6848);
  top: calc(var(--hw) * 0.0385);
  width: calc(var(--hw) * 0.1524);
  margin: 0;
  transform: none;
}
.hero__truck {
  position: absolute;
  left: calc(var(--hw) * 0.5218);
  bottom: calc(var(--hw) * -0.0571);
  width: calc(var(--hw) * 0.4005);
  margin: 0;
  z-index: 1;
}
.hero__truck img { width: 100%; display: block; mix-blend-mode: multiply; }
.hero__ground {
  display: block;
  width: 100%;
  height: calc(var(--hw) * 0.0449);
  margin-top: calc(var(--hw) * 0.0172);
  overflow: visible;
}
.hero__bottom { padding-left: calc(var(--hw) * 0.1399); }
.hero__lead--second { margin-top: calc(var(--hw) * -0.0011); line-height: 1.543; }
.discover {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  margin: calc(var(--hw) * 0.0332) 0 0 calc(var(--hw) * (0.5 - 0.1399));
  translate: -50% 0;
  padding: 0;
  color: var(--red);
  font-size: max(0.7rem, calc(var(--hw) * 0.0116));
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
}
.discover span { font-size: 1.4em; line-height: 1; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
/* =========================================================
   5 MINUTES POUR LE BON RÉFLEXE — composition identique sur
   tous les écrans. Positions relevées sur la maquette
   (1064 px de large), exprimées en fraction de --hw.
   ========================================================= */
.reflexe {
  --hw: min(100vw, 1600px);
  position: relative;
  background: var(--blue-deep);
  color: var(--white);
  margin-top: calc(var(--hw) * 0.16);          /* blanc + onglet du titre (maquette) */
  padding-bottom: calc(var(--hw) * 0.0793);
  scroll-margin-top: calc(var(--hw) * 0.16);
  scroll-snap-align: start;
}
.reflexe__stage {
  display: flow-root;            /* empêche la marge négative de l’onglet de « fusionner » */
  position: relative;
  width: var(--hw);
  margin-inline: auto;
}

/* Onglet bleu qui dépasse au-dessus de la bande */
.reflexe__intro { position: relative; z-index: 2; margin-left: calc(var(--hw) * 0.141); width: calc(var(--hw) * 0.39); }
.reflexe__title {
  margin-top: calc(var(--hw) * -0.10);
  padding: calc(var(--hw) * 0.016) 0 0;
  background: var(--blue-deep);
  border-radius: calc(var(--hw) * 0.019) calc(var(--hw) * 0.019) 0 0;
}
.reflexe__title img { width: calc(var(--hw) * 0.30); margin-left: calc(var(--hw) * 0.047); }
.reflexe__text {
  margin: calc(var(--hw) * 0.026) 0 0 calc(var(--hw) * 0.028);
  font-weight: 700;
  font-size: max(0.68rem, calc(var(--hw) * 0.0146));
  letter-spacing: -0.005em;
  line-height: 1.45;
  max-width: max(calc(var(--hw) * 0.335), 13em);
}

/* Illustration à droite, qui passe derrière le cadre vidéo */
.reflexe__visual {
  position: absolute;
  z-index: 1;
  left: calc(var(--hw) * 0.5432);
  top: calc(var(--hw) * 0.0066);
  width: calc(var(--hw) * 0.4568);
}
.reflexe__visual img { width: 100%; }

/* Cadre vidéo : haut blanc, bas dégradé orange-rouge en biais */
.video-frame {
  position: relative;
  z-index: 3;
  width: calc(var(--hw) * 0.726);
  margin: calc(var(--hw) * 0.018) 0 0 calc(var(--hw) * 0.139);
  padding: calc(var(--hw) * 0.043) calc(var(--hw) * 0.043) calc(var(--hw) * 0.040);
  background: linear-gradient(110deg, #e0713a 0%, #d3433d 70%);
}
.video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 25%, 0 51%);
}
.video-frame .video { z-index: 1; aspect-ratio: 680 / 314; }   /* format de la maquette */
.video-frame .video__play { gap: calc(var(--hw) * 0.008); }
.video-frame .video__icon { width: max(36px, calc(var(--hw) * 0.044)); height: max(36px, calc(var(--hw) * 0.044)); }
.video-frame .video__label { font-size: max(0.55rem, calc(var(--hw) * 0.0085)); }

/* =========================================================
   GESTES / INTERDICTIONS — composition identique sur tous les
   écrans. Mesures relevées sur la maquette (1064 px de large),
   en fraction de --hw.
   ========================================================= */
.block { --hw: min(100vw, 1600px); }
.band--grey {
  margin-top: 0;
  height: calc(var(--hw) * 0.0893);
  padding: 0 var(--gutter);
  display: grid; place-items: center;
}
.band__title--blue {
  color: #2358de;
  font-weight: 800;
  font-size: max(1rem, calc(var(--hw) * 0.0306));
  letter-spacing: -0.01em;
}

.card {
  min-height: 0;
  display: block;
  padding: 0;
  border-bottom: 7px solid #eff0f2;
  scroll-snap-align: none;
}
.card > .container {
  position: relative;
  width: var(--hw);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  min-height: calc(var(--hw) * var(--ch));
  display: flow-root;
}

/* Titre en pastilles : une pastille par ligne, un seul dégradé
   vertical qui court sur l'ensemble des lignes. */
.pill {
  position: absolute;
  z-index: 5;
  left: calc(var(--hw) * 0.1945);
  top: calc(var(--hw) * var(--py));
  margin: 0;
  max-width: none;
  font-weight: 700;
  font-size: max(0.85rem, calc(var(--hw) * 0.0296));
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}
.pill .pill__line {
  display: block;
  width: fit-content;
  height: calc(var(--hw) * 0.0432);
  line-height: calc(var(--hw) * 0.0432);
  margin-top: calc(var(--hw) * -0.0026);
  padding: 0 calc(var(--hw) * 0.0235) 0 calc(var(--hw) * 0.033);
  border-radius: 999px;
  white-space: nowrap;
  background-size: 100% calc(var(--n) * 100%);
  background-position: 0 calc(var(--i) / max(1, var(--n) - 1) * 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}
.pill .pill__line:first-child { margin-top: 0; }
.pill--green .pill__line { box-decoration-break: slice;  background-image: linear-gradient(180deg, #1f9ae0 0%, #33968a 50%, #4a9116 100%); }
.pill--red   .pill__line { background-image: linear-gradient(180deg, #d63e3e 0%, #e0703a 100%); }
.pill span { padding-block: 0; box-decoration-break: slice; -webkit-box-decoration-break: slice; }

/* Illustration : 65,8 % de large, décalée de 14,9 % */
.card__media {
  position: absolute;
  left: calc(var(--hw) * var(--mx));
  top: calc(var(--hw) * var(--my));
  margin: 0;
  width: calc(var(--hw) * var(--mw));
  container-type: inline-size;
  display: block;
}
.art-box { width: 100% !important; }

.spot__num {
  left: 75.6%;
  top: -3.7%;
  width: 31.3%;
  padding: 0;
  font-size: calc(var(--d) * 0.125cqw);
}
.card--do .spot__icon { width: var(--iw, 25%); }

.card__text {
  position: relative;
  z-index: 6;
  margin: calc(var(--hw) * var(--ty) - 0.36em) auto calc(var(--hw) * 0.03);
  width: calc(var(--hw) * 0.62);
  max-width: none;
  text-align: center;
  font-weight: 700;
  font-size: max(0.7rem, calc(var(--hw) * 0.0168));
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: #111;
}
.card__text p + p { margin-top: 1.2em; }
.hl { color: #e30613; font-weight: 700; }

/* Bandeau rouge « Interdictions » — maquette : 215 px pour 1337 px */
.band--red {
  height: calc(var(--hw) * 0.1608);
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.band__title--white { font-size: max(1rem, calc(var(--hw) * 0.0402)); gap: calc(var(--hw) * 0.02); line-height: 1.1; }
.band__sub { font-size: max(0.85rem, calc(var(--hw) * 0.0292)); font-weight: 700; margin-top: calc(var(--hw) * 0.002); line-height: 1.1; }

/* Petits écrans : les textes ne peuvent pas rétrécir autant que la
   maquette sans devenir illisibles ; on laisse donc le texte revenir
   à la ligne naturellement dans la même colonne. */
@media (max-width: 700px) {
  .hero__top .hero__lead { max-width: calc(var(--hw) * 0.40); position: relative; z-index: 2; }
  .hero__lead br, .card__text p:not(:first-child) br { display: none; }
}

/* Copyright */
.footer__copy {
  margin: calc(var(--hw) * 0.006) 0 0 calc(var(--hw) * 0.0037);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: max(7px, calc(var(--hw) * 0.0058));
  line-height: 1.2;
  color: #555;
}
.legal-footer__copy { margin-left: auto; color: #777; padding-block: 6px; }
.footer__copy a, .legal-footer__copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer__copy a:hover, .legal-footer__copy a:hover { color: var(--blue-deep); }