/* =========================================================================
   CHRONO CLUC — accueil seul (charte « Aurore retenue », maquette
   serie-4/01-retenue.html), chargée par site/home.php. Jetons : app.css,
   docs/CHARTE_AURORE.md.
   Couleur sur la structure, selon les rôles : ciel bleu (hero, vitrine),
   ciel jaune (principe : « rien à retenir »), crème (services), rouge (la
   seule bande d'action). L'information reste sur panneaux blancs ou dépolis.
   Halos placés par classe (CSP), statiques : aucune animation automatique
   (CLAUDE.md § 17). Espacements de la maquette (pas de 8 px) en rem.
   ========================================================================= */

/* ---------- 1. Sections de l'accueil ------------------------------------ */
.hero, .principe, .vitrine, .bande-action { position: relative; isolation: isolate; }
.principe, .offres, .vitrine { padding-block: 4rem; }
@media (min-width: 48rem) { .principe, .offres, .vitrine { padding-block: 6.5rem; } }

/* Halos de section : fondus en haut et en bas, cœur plein plus large (maquette) */
.accueil-aurore {
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
}
.accueil-aurore .halo { --h0: 45%; --h1: 62%; --h2: 78%; --h3: 91%; }

/* Tête de section : sur-titre, titre léger + ligne forte, chapô à droite */
.tete--accueil { gap: 1rem; margin-bottom: 2.5rem; }
.tete--accueil h2 { margin: 0; font-size: 2.25rem; font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
.tete--accueil .tete__droite { display: grid; gap: 1rem; justify-items: start; }
.tete--accueil .tete__droite > * { margin: 0; }
.tete--accueil .chapo { font-size: 1.125rem; }
/* Sur un ciel et ses halos, le lien passe en encre souligné (le bleu fort tomberait sous 4,5:1 sur un halo bleu) */
.tete--accueil .lien-fleche { color: var(--encre); }
@media (min-width: 48rem) {
  .tete--accueil { gap: 1.25rem; margin-bottom: 3.5rem; }
  .tete--accueil h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1; }
  .tete--accueil .chapo { font-size: 1.25rem; }
}
@media (min-width: 62rem) {
  .tete--accueil { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gouttiere); align-items: end; }
  .tete--accueil > .sur { grid-column: 1 / -1; }
}

/* Couleurs des SVG (vues du ciel, gestes, motif de la bande) : par classe et
   par jetons, jamais en dur dans les vues ; épaisseurs et opacités restent
   dans le SVG. Contraste forcé : § 10. */
.vue-blanc { fill: var(--blanc); }
.vue-doux { fill: var(--fond-doux); }
.vue-toit { fill: var(--gris); }
.vue-parcelle--vert { fill: var(--cluc-vert-pale); }
.vue-parcelle--jaune { fill: var(--cluc-jaune-pale); }
.vue-parcelle--bleu { fill: var(--cluc-bleu-pale); }
.vue-trait { stroke: var(--encre); }
.vue-sillon { stroke: var(--blanc); }
.vue-anneau { stroke: var(--jaune); }

/* ---------- 2. Hero : ciel bleu, soleil jaune derrière la carte --------- */
.hero { padding: .5rem 0 4rem; }
.hero__aurore {
  top: -7rem;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.hero__halo-1 { --x: 18%; --y: 16%; --t: 81.25rem; }
.hero__halo-2 { --x: 96%; --y: 2%; --t: 60rem; }
.hero__halo-3 { --x: 76%; --y: 56%; --t: 46.25rem; }
@media (min-width: 48rem) {
  .hero { padding: 1rem 0 6rem; }
  .hero__halo-1 { --x: 16%; --y: 34%; }
  .hero__halo-2 { --x: 46%; --y: 2%; }
  .hero__halo-3 { --x: 81%; --y: 40%; }
}

.hero__grille { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .75rem; align-items: start; }
.hero__titre { display: grid; gap: 1.125rem; padding: 2.5rem 0 1.5rem; }
.hero__titre > * { margin: 0; }
.hero h1 { font-size: clamp(2.75rem, 11vw, 3.25rem); font-weight: 300; line-height: .98; letter-spacing: -.035em; }
.hero h1 span { display: block; }
.hero h1 .fort { font-weight: 500; }
/* Texte d'appui en encre : il passe sur le halo bleu (encre sur bleu 7,4:1) */
.hero__appui { max-width: 36em; font-size: 1.125rem; line-height: 1.5; font-weight: 500; color: var(--encre); text-wrap: balance; }
@media (min-width: 48rem) {
  .hero__grille { row-gap: 1.5rem; }
  .hero__titre { gap: 1.75rem; padding: 4rem 0 2rem; }
  .hero h1 { font-size: clamp(3rem, 7.4vw, 7rem); line-height: .96; }
  .hero h1 span { white-space: nowrap; }
  .hero__appui { font-size: 1.3125rem; }
}

/* Formulaire de commune (réel) : dock dépoli, champ et bouton en pilule */
.dock { display: grid; gap: .75rem; padding: 1.25rem 1.125rem 1.125rem; border-radius: 24px; background: rgb(255 255 255 / .86); }
.dock > * { margin: 0; }
.dock__titre { font: 500 1.375rem/1.15 var(--police-titre); letter-spacing: -.01em; }
.dock__label { font-weight: 700; font-size: 1.0625rem; }
.dock__ligne { display: flex; flex-direction: column; gap: .75rem; }
.dock__champ { position: relative; flex: 1; min-width: 0; }
.dock__champ > .icone { position: absolute; left: 1.375rem; top: 50%; translate: 0 -50%; width: 1.5rem; height: 1.5rem; color: var(--encre-douce); pointer-events: none; }
.dock__champ input {
  height: 3.75rem; min-height: 3.75rem; padding: 0 1.25rem 0 3.625rem;
  border-radius: var(--r-pill); font-size: 1.25rem; font-weight: 600;
  -webkit-appearance: none; appearance: none;
}
.dock__bouton { width: 100%; min-height: 3.75rem; padding: 0 1.875rem; border-radius: var(--r-pill); }
.dock__aide { display: flex; align-items: center; gap: .625rem; font-size: 1rem; color: var(--encre-douce); }
.dock__aide .icone { width: 1.25rem; height: 1.25rem; }
@media (min-width: 48rem) {
  .dock { padding: 1.625rem 1.75rem 1.375rem; border-radius: var(--r-l); }
  .dock__ligne { flex-direction: row; }
  .dock__champ input { height: 4rem; min-height: 4rem; }
  .dock__bouton { width: auto; flex: none; min-height: 4rem; }
}

/* Carte « Prochain passage » (exemple) */
.hero__cote { position: relative; z-index: 1; display: grid; gap: .25rem; }
.prochain { display: grid; gap: 1rem; padding: 1.375rem 1.25rem; border-radius: 24px; background: rgb(255 255 255 / .86); }
.prochain > * { margin: 0; }
.prochain__sur { display: flex; align-items: center; gap: .75rem; font: 700 .9375rem/1.2 var(--police-texte); letter-spacing: .12em; text-transform: uppercase; }
.prochain__zone { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; font-weight: 600; }
/* L'exemple est dit en toutes lettres : la carte n'est pas un vrai résultat */
.prochain__exemple {
  margin-left: auto; padding: .2rem .75rem; border: 1px solid var(--gris-moyen); border-radius: var(--r-pill);
  background: var(--fond); color: var(--encre-douce); font-size: .9375rem; font-weight: 600; line-height: 1.3;
}
.prochain__date { font: 500 2rem/1.02 var(--police-titre); letter-spacing: -.015em; }
.prochain__date > span { display: block; }
.prochain__moment { font-weight: 300; color: var(--encre-douce); }
.prochain__limite { display: flex; gap: .625rem; align-items: flex-start; padding-top: 1rem; border-top: 1px solid var(--gris); font-size: 1.0625rem; color: var(--encre-douce); }
.prochain__limite .icone { width: 1.5rem; height: 1.5rem; margin-top: .125rem; color: var(--encre); }
.prochain__limite strong { color: var(--encre); white-space: nowrap; }
.prochain__bouton { min-height: 3.5rem; border-radius: var(--r-pill); }
@media (min-width: 48rem) {
  .prochain { padding: 1.625rem 1.75rem 1.75rem; border-radius: var(--r-l); }
  .prochain__date { font-size: 2.375rem; }
}

/* ---------- 3. Marcelito, le camion du CLUC (retouche 3) ---------------- */
/* Mobile : sous la carte, légende à sa gauche. 768–1 199 px : à droite de la
   carte, calé en bas. Ordinateur : 20 px sous la carte, au centre de sa
   colonne. Légende dessous dès 768 px ; il ne masque rien. */
.hero__route { --camion-l: 5.5rem; position: relative; margin-bottom: .5rem; pointer-events: none; }
.route {
  position: absolute; left: 0; right: 0; bottom: -6px; height: 12px; border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgb(var(--rvb-encre) / .4) 0 10px, transparent 10px 20px) center / 100% 2px no-repeat,
    rgb(255 255 255 / .74);
  /* Deux filets encre fins : la même route que dans les vues du ciel */
  box-shadow: inset 0 1px 0 rgb(var(--rvb-encre) / .3), inset 0 -1px 0 rgb(var(--rvb-encre) / .3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7.5rem);
  mask-image: linear-gradient(90deg, transparent, #000 7.5rem);
}
.marcelito { position: relative; margin: 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: .75rem; }
.marcelito__legende { min-width: 0; margin: 0; max-width: none; padding-bottom: .5rem; font: 600 .9375rem/1.25 var(--police-texte); color: var(--encre); text-wrap: balance; }
/* Arrêté : aucune animation d'arrivée (§ 17) */
.marcelito__camion { position: relative; isolation: isolate; flex: none; width: var(--camion-l); }
.marcelito__camion .marcelito-svg { width: 100%; }
/* Une seule ombre portée, très douce, au sol */
.marcelito__camion::after {
  content: ""; position: absolute; left: 6%; right: 2%; bottom: -3px; height: 6px; z-index: -1;
  border-radius: 50%; background: rgb(20 22 31 / .18); filter: blur(2px);
}
@media (min-width: 48rem) {
  .hero__route { --camion-l: 7.5rem; margin-bottom: 0; }
  /* Roues sur la ligne médiane de la route (hauteur du camion = largeur × 132/248) */
  .route {
    top: calc(var(--camion-l) * .5323 - 6px); bottom: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 85%, transparent);
  }
  .marcelito { flex-direction: column-reverse; align-items: center; gap: .75rem; }
  .marcelito__legende { padding-bottom: 0; text-align: center; }
}
/* 768–1 199 px : la carte garde 30 rem de large (pas 700 px de vide) ; Marcelito prend la place à droite */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .hero__cote { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); column-gap: var(--gouttiere); align-items: end; }
  .hero__route { margin-bottom: 2rem; }
  /* La route part du bord de la carte (elle traverse la gouttière) */
  .route { left: calc(-1 * var(--gouttiere)); }
}
@media (min-width: 75rem) {
  .hero__cote { gap: 1.25rem; }
  .hero__route { --camion-l: 8.25rem; }
  .route {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5.5rem, #000 calc(100% - 3.5rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5.5rem, #000 calc(100% - 3.5rem), transparent);
  }
  .marcelito__legende { white-space: nowrap; }
}

/* ---------- 4. Preuves chiffrées ---------------------------------------- */
.preuves { margin-top: 1.25rem; padding: .5rem 0; border-radius: 24px; }
.preuves__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.preuve { display: grid; gap: .5rem; align-content: start; margin: 0; max-width: none; padding: 1.25rem 1rem; }
.preuve:nth-child(2n) { border-left: 1px solid var(--gris); }
.preuve:nth-child(n + 3) { border-top: 1px solid var(--gris); }
.preuve__chiffre { font: 300 clamp(2rem, 10vw, 2.375rem)/1 var(--police-titre); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.preuve__chiffre small { font-size: .5em; font-weight: 500; letter-spacing: 0; }
.preuve__texte { font-size: 1rem; line-height: 1.45; color: var(--encre-douce); text-wrap: pretty; }
@media (min-width: 48rem) {
  .preuves { margin-top: 1.5rem; padding: 1rem 0; border-radius: var(--r-l); }
  .preuve { padding: 1.5rem 2rem; }
  .preuve__chiffre { font-size: 3rem; }
  .preuve__texte { font-size: 1.0625rem; }
}
@media (min-width: 62rem) {
  .preuves { padding: 2.25rem 0; }
  .preuves__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .preuve { padding: 0 2rem; }
  .preuve:nth-child(n + 3) { border-top: 0; }
  .preuve + .preuve { border-left: 1px solid var(--gris); }
}
@media (min-width: 75rem) {
  .hero__titre { grid-column: 1 / 9; grid-row: 1; }
  .hero__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }
  .dock { grid-column: 1 / 9; grid-row: 2; }
  .hero__cote { grid-column: 9 / 13; grid-row: 1 / 3; align-self: center; }
  .preuves { grid-column: 1 / -1; grid-row: 3; margin-top: 2.5rem; }
  .preuve { padding: 0 2.25rem; }
  .preuve__chiffre { font-size: 3.5rem; }
}

/* ---------- 5. Mot du CLUC (contenu éditorial, s'il est publié) ---------- */
.mot-cluc { padding-block: 2rem 0; }
.mot-cluc__panneau { max-width: 56rem; margin-inline: auto; }
.mot-cluc__panneau h2 { margin: 0 0 var(--e-4); font-weight: 300; letter-spacing: -.02em; }

/* ---------- 6. Principe : trois gestes (ciel jaune) --------------------- */
.principe__halo-1 { --x: 0%; --y: 42%; --t: 53.75rem; }
.principe__halo-2 { --x: 100%; --y: 80%; --t: 41.25rem; }
@media (min-width: 48rem) {
  .principe__halo-1 { --x: 5%; --y: 64%; }
  .principe__halo-2 { --x: 92%; --y: 30%; }
}
/* Contenu ramené à 10 colonnes sur 12 : le ciel respire des deux côtés du panneau */
@media (min-width: 75rem) { .principe__conteneur { max-width: calc(var(--largeur) * 5 / 6 + 2 * var(--marge)); } }

.gestes { list-style: none; margin: 0; padding: .25rem 1.25rem; display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 24px; }
.geste { display: grid; gap: .875rem; align-content: start; margin: 0; max-width: none; padding: 1.75rem 0 1.875rem; }
.geste + .geste { margin-top: 0; border-top: 1px solid var(--gris); }
.geste__illu { width: 8.75rem; height: auto; color: var(--encre); }
.geste__chiffre { font-family: var(--police-titre); font-weight: 500; }
.geste__texte { display: grid; gap: .875rem; align-content: start; }
.geste__texte > * { margin: 0; }
.geste__num { display: flex; align-items: center; gap: .75rem; font: 500 1.125rem/1 var(--police-titre); color: var(--encre-douce); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.geste__num::after { content: ""; width: 3rem; height: 1px; background: var(--gris-moyen); }
.geste h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.geste__texte p:last-child { color: var(--encre-douce); }
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .gestes { padding: .5rem 2rem; border-radius: var(--r-l); }
  .geste { grid-template-columns: 10.5rem minmax(0, 1fr); column-gap: 2rem; align-items: start; padding-block: 2rem; }
  .geste__illu { width: 10.5rem; }
}
@media (min-width: 62rem) {
  .gestes { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .75rem; border-radius: var(--r-l); }
  .geste { padding: 2.25rem 2.25rem 2.5rem; }
  .geste + .geste { border-top: 0; border-left: 1px solid var(--gris); }
  .geste__illu { width: 10.5rem; margin-bottom: .625rem; }
  .geste h3 { font-size: 1.75rem; }
}

/* ---------- 7. Trois niveaux de service (retouches 1 et 2) -------------- */
/* Trois blocs blancs identiques, sans aucun noir, toujours de même hauteur.
   Mobile : empilés (560 px au plus), détail calé en bas. 768–1 023 px :
   empilés, chacun à l'horizontale (vue à gauche ; nom, titre, fait clé à
   droite ; détail dessous) : 40 % de défilement en moins. Dès 1 024 px :
   trois colonnes, une sous-grille aligne leurs cinq rangées. */
.offres__grille {
  list-style: none; margin: 0 auto; padding: 0; max-width: 35rem;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; row-gap: 1rem;
}
.offre {
  display: flex; flex-direction: column; gap: .875rem; margin: 0; max-width: none;
  padding: .625rem .625rem 1.75rem; border-radius: 24px;
  background: var(--fond); border: 1px solid var(--gris); box-shadow: var(--ombre-1);
}
.offres__grille > li + li { margin-top: 0; }
.offre > :not(.offre__vue) { margin: 0 .875rem; }
.offre > .offre__detail { margin-top: auto; }
/* La vue du ciel de la n°14, en tête du bloc ; Marcelito vu de dessus y est la petite voiture */
.offre__vue { display: block; width: 100%; height: auto; aspect-ratio: 380 / 200; border-radius: 16px; margin-bottom: .375rem; }
.offre__vue-texte { font-family: var(--police-titre); font-weight: 500; font-size: 20px; fill: var(--encre); }
.offre__nom { font: 700 .9375rem/1.2 var(--police-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }
/* Distinction douce du Premium, sans noir : son nom en jaune fort (5,93:1 sur blanc), en écho à l'anneau jaune */
.offre--premium .offre__nom { color: var(--jaune-texte); }
.offre h3 { font-size: clamp(1.625rem, 2.4vw, 2.125rem); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.offre__chiffre { display: grid; gap: .375rem; align-content: start; }
.offre__chiffre strong { font: 300 3rem/1 var(--police-titre); letter-spacing: -.03em; color: var(--encre); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.offre__chiffre span { font-weight: 600; color: var(--encre); }
.offre__modes { list-style: none; padding: 0; display: grid; gap: .75rem; align-content: start; }
.offre__modes li { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--encre); }
.offre__modes .icone { width: 1.5rem; height: 1.5rem; }
/* Rangée 5 : la même voix dans les trois blocs (paragraphe encre douce sous un filet) */
.offre__detail { display: grid; gap: .75rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--gris); }
.offre__detail p { margin: 0; color: var(--encre-douce); text-wrap: pretty; }
.offre__detail .offre__pour { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 700; color: var(--encre); }
.offre__pour .icone { width: 1.25rem; height: 1.25rem; }
@media (min-width: 48rem) {
  .offre { padding: .75rem .75rem 2.25rem; border-radius: var(--r-l); gap: 1rem; }
  .offre > :not(.offre__vue) { margin: 0 1.5rem; }
  .offre > .offre__detail { margin-top: auto; padding-top: 1.25rem; }
  .offre__vue { border-radius: var(--r-m); margin-bottom: .5rem; }
  .offre__modes li { font-size: 1.25rem; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .offres__grille { max-width: none; row-gap: 1.25rem; }
  .offre {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    column-gap: 1.75rem; row-gap: .875rem; padding: .75rem .75rem 2rem;
  }
  .offre__vue { grid-column: 1; grid-row: 1 / 4; align-self: start; margin-bottom: 0; }
  .offre > :not(.offre__vue) { grid-column: 2; margin: 0 1rem 0 0; }
  .offre__nom { padding-top: 1rem; }
  .offre > .offre__detail { grid-column: 1 / -1; grid-row: 4; margin: .75rem 1rem 0; }
}
@media (min-width: 64rem) {
  .offres__grille {
    max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto); grid-auto-rows: auto; column-gap: var(--gouttiere); row-gap: 0;
  }
  .offre { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 1rem; align-content: start; }
  .offre > .offre__detail { margin-top: 0; }
  .offre__nom { align-self: end; }
}
/* La vue se resserre vers 1 024 px : 22 unités ≈ 15,5 px affichés, jamais sous 15 px */
@media (min-width: 64rem) and (max-width: 74.99rem) { .offre__vue-texte { font-size: 22px; } }
@media (min-width: 75rem) { .offre__chiffre strong { font-size: 3.5rem; } }

/* ---------- 8. Vitrine de l'équipe (ciel bleu, données réelles) --------- */
.vitrine__halo-1 { --x: 0%; --y: 24%; --t: 61.25rem; }
.vitrine__halo-2 { --x: 100%; --y: 66%; --t: 45rem; }
@media (min-width: 48rem) {
  .vitrine__halo-1 { --x: 3%; --y: 46%; }
  .vitrine__halo-2 { --x: 93%; --y: 22%; }
}
.vitrine__grille { gap: var(--gouttiere); }

/* ---------- 9. Bande d'action rouge (la seule) --------------------------- */
/* Rouge franc, texte encre (4,78:1) ; lueur rouge foncé en bas à droite, SOUS le texte jamais : mesurée de 375 à
   1 280 px (téléphone compris), opacité du halo sous le texte ≤ 0,10, soit encre ≥ 4,52:1 (paire « bande-action-halo »
   de Contrast::PAIRS). Le motif blanc ne fait qu'éclaircir le fond. */
.bande-action { overflow: hidden; padding: 4rem 0; background: var(--cluc-rouge); color: var(--encre); }
.bande-action .aurore { z-index: -2; }
.bande-action__halo { --x: 86%; --y: 150%; --t: 47.5rem; --o: .55; }
.bande-action__motif { position: absolute; z-index: -1; right: -7.5rem; bottom: -2px; width: 26.25rem; height: auto; }
.bande-action__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.bande-action__sur { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.125rem; font: 700 .9375rem/1.3 var(--police-texte); letter-spacing: .08em; text-transform: uppercase; }
.bande-action h2 { margin: 0; font-size: 2.5rem; font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.bande-action__texte { margin: 1.25rem 0 0; max-width: 58ch; font-size: 1.125rem; font-weight: 500; }
.bande-action__tel { margin: 1rem 0 0; max-width: 58ch; font-weight: 500; }
.bande-action a:not(.btn) { color: var(--encre); }
.bande-action .telephone { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--cible); }
.bande-action :focus-visible { outline-color: var(--encre); }
.bande-action__bouton { width: 100%; min-height: 4rem; padding: 0 2.25rem; border-radius: var(--r-pill); font-size: 1.1875rem; }
@media (min-width: 48rem) {
  .bande-action { padding: 6rem 0; }
  .bande-action__halo { --x: 88%; --y: 150%; }
  .bande-action__motif { right: -2.5rem; width: 40rem; }
  .bande-action__grille { grid-template-columns: minmax(0, 1fr) auto; }
  .bande-action__sur { letter-spacing: .12em; }
  .bande-action h2 { font-size: clamp(2.75rem, 4.6vw, 4.25rem); line-height: .98; }
  .bande-action__texte { font-size: 1.25rem; }
  .bande-action__bouton { width: auto; }
}
/* La bande touche le pied encre (le pied garde sa marge sur les autres pages) */
main:has(> .bande-action:last-child) + .pied { margin-top: 0; }

/* ---------- 10. Contraste forcé ---------------------------------------- */
@media (forced-colors: active) {
  .route, .marcelito__camion::after, .bande-action__motif { display: none; }
  .bande-action { border-block: 1px solid CanvasText; }
  /* Illustrations : aplats en Canvas, traits et textes en CanvasText */
  .vue-blanc, .vue-doux, .vue-toit, .vue-parcelle--vert, .vue-parcelle--jaune, .vue-parcelle--bleu { fill: Canvas; }
  .vue-trait, .vue-anneau { stroke: CanvasText; }
  .vue-sillon { stroke: Canvas; }
  .offre__vue-texte { fill: CanvasText; }
}