/* =========================================================================
   Swiss Pro Moving — PAGES TRAJETS (v2, 12.10.2026, lot T1-V2).
   Chargée par les seules pages /demenagement-geneve-<ville>, APRÈS pages.css.
   Gabarit : pilotage/trajets-1010/v2/DIRECTION.md §2. Aucun style nouveau
   n'est inventé : chaque bloc copie une règle du site, citée en tête.
   Couleurs : jetons de marque/tokens.css seulement, aucun hexadécimal, aucun
   repli codé en dur. Aucun rayon hors du disque .borne (_COMPOSANTS.md §0.3).
   Aucune animation : seuls les états de survol et de focus existent.
   ========================================================================= */

/* ---------------------------------------------------------------- A. Héros
   Copie de dist-swisspromoving/es-es/index.html, <style> l. 315 à 366
   (héros photo des pages pays, 09.10.2026). Seuls changent : --entete-h,
   remesuré sur l'en-tête des trajets (nav + appel + bouton) le 12.10, valeur
   haute de chaque palier ; le repli blanc codé en dur du focus, retiré.
   Tour 1 (12.10) : l'en-tête reprend le bouton de l'accueil (« Estimer »,
   .spm-btn--fantome) et mesure EXACTEMENT celui de l'accueil (mesuré à 16
   largeurs de 320 à 1440 sur les deux pages) : 160 px sous 375, 99 de 375 à
   599, 243 à 261 de 600 à 767, 193 de 768 à 1079, 115 à 130 au-delà. */
.hero-pays { --entete-h: 160px; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(var(--e160), 1fr) auto; min-height: calc(100svh - var(--entete-h)); color: var(--sur-marque); background: var(--neutre-900); }
.hero-pays-photo { grid-row: 1 / 3; grid-column: 1; position: relative; margin: 0; min-height: 0; z-index: 0; }
.hero-pays-photo picture { position: absolute; inset: 0; display: block; background-color: var(--neutre-700); background-image: var(--apercu, none); background-size: cover; background-position: var(--pos-m, 50% 20%); }
.hero-pays-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, 50% 20%); }
.hero-pays-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, var(--voile-photo) 0%, transparent 60%), linear-gradient(to bottom, var(--voile-photo) 0%, var(--voile-photo) 12%, transparent 42%),
              linear-gradient(to bottom, var(--voile-photo) 0%, var(--voile-photo) 34%, transparent 52%),
              linear-gradient(to top, var(--neutre-900) 0%, transparent 14%); }
/* Tour 1 (12.10) : la troisième couche de voile (0 à 34 %, puis fondu) porte le
   titre et le chapeau à 4,5:1 au moins sur la photo (mesure par pixels, voir
   CORRECTIONS-tour1.md) ; à 1080 px et plus, même chose sur la moitié gauche. */
.hero-pays-haut { grid-row: 1; grid-column: 1; position: relative; z-index: 1; padding: var(--e24) 16px var(--e16); }
.hero-saisie { grid-row: 3; grid-column: 1; position: relative; z-index: 1; padding: var(--e8) 16px var(--e24); }
.hero-pays h1 { margin: 0; max-width: none; font-family: var(--police-titre); font-weight: var(--graisse-noire); font-size: clamp(1.625rem, 1rem + 3.4vw, 3.75rem);
  line-height: 1.02; letter-spacing: 0; color: var(--sur-marque); text-wrap: balance; }
.hero-pays .hero-chapeau { margin: var(--e8) 0 0; max-width: none; font-size: var(--t-texte-large); line-height: 1.3; color: var(--sur-marque); }
.hero-pays .hero-preuve { font-weight: 700; }
/* Tour 1 (12.10) : le sous-titre de FINAL-lausanne.md bloc 1 (l'offre au-dessus
   du pli), posé juste au-dessus de « De … à … ». Sous 1080 px il tombe dans la
   rangée sombre du formulaire (--neutre-900), jamais sur la photo : mesuré sur
   la photo, il descendait à 1,3:1. FINAL, écart 1 : si les boutons passent sous
   le pli, il se retire ; mesuré à 360 × 740, il les y pousse, d'où le retrait
   sur les téléphones bas. */
/* Tour 2 (12.10, conversion mineur 1) : le h1 reste seul sur la photo ; l'offre
   (« Notre équipe porte vos meubles… ») passe AVANT la preuve « 13 ans », qui
   descend dans la rangée sombre juste en dessous. Ordre du DOM = ordre lu. */
.hero-pays { grid-template-rows: auto minmax(var(--e160), 1fr) auto auto auto; }
.hero-pays > .hero-sous-titre { grid-row: 3; grid-column: 1; position: relative; z-index: 1; margin: 0; padding: var(--e16) 16px 0; max-width: none;
  font-size: var(--t-texte); line-height: 1.4; color: var(--sur-marque); }
.hero-pays > .hero-chapeau { grid-row: 4; grid-column: 1; position: relative; z-index: 1; padding: 0 16px; }
.hero-pays > .hero-saisie { grid-row: 5; }
@media (max-width: 1079px) { .hero-pays > .hero-chapeau { padding-top: var(--e8); margin: 0; } }
@media (max-width: 599px) and (max-height: 779px) { .hero-pays .hero-sous-titre { display: none; } }
.hero-pays .hero-phrase { margin: 0; max-width: none; font-family: var(--police-titre); font-weight: var(--graisse-noire); font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.5rem); line-height: 1.15; color: var(--sur-marque); }
.hero-pays .hero-ligne { display: flex; align-items: baseline; gap: .35em; }
.hero-pays .hero-ligne + .hero-ligne { margin-top: .3em; }
.hero-pays .hero-mot { flex: 0 0 auto; }
.hero-pays .hero-champ { flex: 1 1 auto; min-width: 0; display: block; }
.hero-pays .hero-champ input { width: 100%; min-width: 0; margin: 0; padding: 0 0 .06em; font: inherit; letter-spacing: inherit; color: var(--sur-marque); caret-color: var(--sur-marque);
  background: none; border: 0; border-bottom: 2px solid var(--sur-marque); border-radius: 0; box-shadow: none; }
.hero-pays .hero-champ input:hover, .hero-pays .hero-champ input:focus { box-shadow: 0 2px 0 var(--sur-marque); }
.hero-pays .hero-champ input:focus-visible { box-shadow: 0 0 0 calc(var(--focus-epaisseur) + var(--focus-decalage)) var(--focus-contre); }
.hero-pays .borne { flex: none; align-self: center; width: .38em; height: .38em; border-radius: 999px; }
.hero-pays .borne-depart { background: var(--marque); box-shadow: 0 0 0 2px var(--sur-marque); }
.hero-pays .borne-arrivee { border: 2px solid var(--sur-marque); }
.hero-pays .hero-actions { display: flex; flex-wrap: wrap; gap: var(--e8) var(--e12); margin-top: var(--e16); }
.hero-pays .hero-actions .spm-btn { max-width: 100%; white-space: normal; text-align: center; padding-inline: var(--e16); }
.hero-pays .hero-bouton.spm-btn--primaire { background-color: var(--marque); color: var(--sur-marque); border-color: var(--sur-marque); }
.hero-pays .hero-bouton.spm-btn--primaire:hover { background-color: var(--rouge-700); }
.hero-pays .hero-contact.spm-btn--secondaire { background-color: transparent; color: var(--sur-marque); border-color: var(--sur-marque); }
.hero-pays .hero-contact.spm-btn--secondaire:hover { background-color: var(--voile-photo); }
.hero-pays + .section-arrivee { padding-top: var(--e32); }
@media (min-width: 375px) and (max-width: 599px) { .hero-pays { --entete-h: 99px; } }
/* De 600 à 1079 px la photo est basse (405 px à 1024 × 768) : le chapeau tombe
   sous la couche 0-34 %. Une couche de gauche, comme au-delà de 1080 px. */
@media (min-width: 600px) and (max-width: 1079px) {
  .hero-pays-photo::after { background: linear-gradient(to right, var(--voile-photo) 0%, var(--voile-photo) 55%, transparent 72%),
    linear-gradient(to bottom, var(--voile-photo) 0%, transparent 60%), linear-gradient(to bottom, var(--voile-photo) 0%, var(--voile-photo) 12%, transparent 42%),
    linear-gradient(to bottom, var(--voile-photo) 0%, var(--voile-photo) 60%, transparent 80%), linear-gradient(to top, var(--neutre-900) 0%, transparent 14%); }
}
/* Tour 2 (12.10, DA mineur 7) : de 600 à 1079 px, la photo PAYSAGE remplace le
   recadrage portrait (le camion sortait du cadre) ; on la cale sur le bas, où roule
   le camion. */
@media (min-width: 600px) and (max-width: 1079px) {
  .hero-pays-photo picture { background-image: var(--apercu-ordi, var(--apercu, none)); background-position: 50% 80%; }
  .hero-pays-photo img { object-position: 50% 80%; }
}
@media (min-width: 600px) and (max-width: 767px) { .hero-pays { --entete-h: 261px; } }
@media (min-width: 768px) and (max-width: 1079px) { .hero-pays { --entete-h: 193px; } }
@media (min-width: 768px) { .hero-pays > .hero-sous-titre, .hero-pays > .hero-chapeau { padding-inline: var(--e40); max-width: 44rem; } .hero-pays-haut { padding: var(--e40) var(--e40) var(--e16); } .hero-saisie { padding: var(--e16) var(--e40) var(--e40); } .hero-pays-haut, .hero-saisie { max-width: 44rem; } }
@media (min-width: 1080px) {
  /* Tour 2 (12.10, DA mineur 1) : titre, offre, preuve et saisie forment UN bloc
     ancré en bas à gauche ; l'espace libre (1fr) passe au-dessus du titre. */
  .hero-pays { --entete-h: 130px; grid-template-rows: 1fr auto auto auto auto; min-height: min(calc(100svh - var(--entete-h)), 980px); background: none; }
  .hero-pays-photo { grid-row: 1 / 6; position: absolute; inset: 0; }
  .hero-pays-haut { grid-row: 2; }
  .hero-pays > .hero-sous-titre, .hero-pays > .hero-chapeau { box-sizing: content-box; max-width: min(36vw, 32rem); padding: 0 0 0 max(var(--e40), calc((100vw - 1080px) / 2 + var(--retrait-rail))); }
  .hero-pays > .hero-sous-titre { padding-top: var(--e16); }
  .hero-pays > .hero-chapeau { margin: var(--e8) 0 0; }
  /* Tour 1 (12.10) : le bord gauche du héros est celui des sections illustrées
     (colonne de 1080 px + --retrait-rail), au lieu de la colonne de 1240 px des
     pages pays ; le titre descend d'un cran (4 lignes à 1280 avant). */
  .hero-pays-haut, .hero-saisie { box-sizing: content-box; max-width: min(44vw, 40rem); padding-inline: max(var(--e40), calc((100vw - 1080px) / 2 + var(--retrait-rail))) 0; }
  .hero-pays h1 { font-size: clamp(2.5rem, 1rem + 2.5vw, 3.25rem); }
  .hero-saisie { max-width: min(36vw, 32rem); }
  .hero-pays-haut { padding-top: var(--e48); padding-bottom: 0; }
  .hero-saisie { padding-top: var(--e24); padding-bottom: var(--e64); }
  .hero-pays-photo picture { background-image: var(--apercu-ordi, var(--apercu, none)); background-position: 50% 50%; }
  .hero-pays-photo img { object-position: 50% 50%; }
  /* Tour 2 (12.10) : le bloc de texte descend sur la photo ; la couche de gauche va
     jusqu'à 56 % (au lieu de 50) pour garder le titre à 4,5:1 jusqu'à 1920 px. */
  /* v2.5 (12.10, correction 1) : voile SEULEMENT derrière le bloc de texte, comme
     pays-es-1280-haut.png ; la moitié droite (le camion) reste claire. Le bloc finit à
     50vw + 87 px à 1280 et à 50vw + 124 px à 1920 : double couche jusqu'à 50vw + 40 px,
     simple jusqu'à 50vw + 140 px, fondu jusqu'à 50vw + 360 px, rien au-delà. */
  .hero-pays-photo::after { background: linear-gradient(to right, var(--voile-photo) 0, var(--voile-photo) calc(50vw + 140px), transparent calc(50vw + 360px)),
    linear-gradient(to right, var(--voile-photo) 0, var(--voile-photo) calc(50vw + 40px), transparent calc(50vw + 220px)); }
}
/* v2.5 (12.10, correction 1) : de 900 à 1079 px, seul le titre est sur la photo (en haut à
   gauche) ; le voile se limite à la bande du titre et au bord gauche, la droite reste claire. */
@media (min-width: 900px) and (max-width: 1079px) {
  .hero-pays-photo::after { background: linear-gradient(to bottom, var(--voile-photo) 0%, var(--voile-photo) 38%, transparent 62%),
    linear-gradient(to right, var(--voile-photo) 0%, var(--voile-photo) 45%, transparent 75%), linear-gradient(to top, var(--neutre-900) 0%, transparent 14%); }
}
/* Tour TRJ 2 (12.10, DA 5) : à Montreux et Annemasse, l'arrière blanc de la caisse commence
   vers 51 % de la largeur ; de 900 à 1079 px, le titre s'arrête avant, un cran plus petit (42 px au lieu de 46 à 51). */
@media (min-width: 900px) and (max-width: 1079px) {
  .hero-pays[data-titre="etroit"] h1 { max-width: calc(47vw - var(--e40)); font-size: 2.625rem; }
}
/* Tour TRJ 2 (12.10, DA 4) : sur le ciel clair de Nyon, la rampe linéaire du voile faisait une
   bande nette (luminance 63 → 225 entre x 680 et 1160 à 1280). Mêmes zones pleines derrière le
   texte, puis une rampe adoucie (paliers intermédiaires) et allongée jusqu'au bord droit. */
@media (min-width: 1080px) {
  .hero-pays[data-voile="long"] .hero-pays-photo::after { background:
    linear-gradient(to right, var(--voile-photo) 0, var(--voile-photo) calc(50vw + 140px),
      color-mix(in srgb, var(--voile-photo) 80%, transparent) calc(50vw + 250px),
      color-mix(in srgb, var(--voile-photo) 55%, transparent) calc(50vw + 370px),
      color-mix(in srgb, var(--voile-photo) 30%, transparent) calc(50vw + 500px),
      color-mix(in srgb, var(--voile-photo) 12%, transparent) calc(50vw + 620px), transparent calc(50vw + 760px)),
    linear-gradient(to right, var(--voile-photo) 0, var(--voile-photo) calc(50vw + 40px),
      color-mix(in srgb, var(--voile-photo) 75%, transparent) calc(50vw + 140px),
      color-mix(in srgb, var(--voile-photo) 45%, transparent) calc(50vw + 260px),
      color-mix(in srgb, var(--voile-photo) 18%, transparent) calc(50vw + 400px), transparent calc(50vw + 520px)); }
}

/* ------------------------------------------------- D. Colonne et rythme
   Nouveau (DIRECTION §2 D et §5) : seules les sections illustrées
   (.trajet-large) s'élargissent à 1080 px ; l'arrivée et la FAQ gardent la
   colonne de 800 px de la page pivot (pages.css l. 105 à 112). */
/* Tour 2 (12.10, DA mineur 2) : 16 px au moins entre le fil d'Ariane et le chapeau ;
   au-delà de 1080 px, le chapeau prend la mesure de texte (68ch) au lieu de 46ch. */
.arrivee-corps > nav { margin-bottom: var(--e16); }
@media (min-width: 1080px) { .arrivee-corps .spm-chapeau { max-width: var(--mesure); } }
.section-preparer.trajet-large { margin-top: var(--e64); }
@media (min-width: 1080px) {
  body[data-page="pivot"] > main > .bande.trajet-large { --largeur-max: 1080px; }
  /* Tour 1 (12.10) : un seul bord gauche sur ordinateur, comme l'accueil.
     L'arrivée (fil d'Ariane, chapeau, mention) et la FAQ prennent la colonne
     des sections illustrées ; leurs paragraphes restent plafonnés à la mesure
     de marque/base.css. */
  body[data-page="pivot"] > main > .bande.section-arrivee,
  body[data-page="pivot"] > main > .bande.trajet-faq { --largeur-max: 1080px; }  /* v2.5 : classe posée par le constructeur (la FAQ est t-6 ou t-7 selon la page) */
  .section-preparer.trajet-large { margin-top: var(--e128); }
}

/* Le fond de chargement des photos : accueil.css l. 1424 à 1430 (§9.2). */
.spm-photo picture,
.imagette picture {
  display: block;
  background-color: var(--neutre-200);
  background-image: var(--apercu, none);
  background-size: cover;
  background-position: var(--pos, 50% 50%);
  background-repeat: no-repeat;
}

/* ------------------------------------------- E. Section de faits illustrée
   Nouveau (DIRECTION §2 E) : le texte de la v1, puis sa photo. Une colonne
   sous 900 px (photo 3:2 en fin de section) ; deux colonnes 7/5 au-delà, une
   section sur deux inversée par `order` (le DOM reste texte puis photo). */
.trajet-fait__photo { margin: var(--e24) 0 0; }
.trajet-fait__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.trajet-fait__texte > h2 { margin-top: 0; }
/* v2.5 (12.10, correction 2) : un bloc de plus de deux paragraphes est coupé, sans changer un
   mot : un paragraphe existant est mis en avant (filet rouge à gauche, corps plus grand), ou
   l'amorce en gras qui ouvre déjà un paragraphe de la v1 devient un intertitre. */
.trajet-fait__texte > p.trajet-cle {
  margin-block: var(--e24);
  padding-left: var(--e16);
  border-left: calc(var(--filet-epaisseur) * 3) solid var(--marque);
  font-size: var(--t-texte-large);
  line-height: 1.45;
  font-weight: var(--graisse-medium);
  color: var(--texte);
}
.trajet-fait__texte > p > .trajet-amorce {
  display: block;
  margin: var(--e24) 0 var(--e4);
  font-size: var(--t-texte-large);
  color: var(--texte);
}

@media (min-width: 900px) {
  .trajet-fait {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e48);
    align-items: start;
  }
  /* Tour TRJ 2 (12.10, DA 1) : la photo étirée sur toute la hauteur du texte devenait
     une bande verticale floue (21 à 45 % de l'image, agrandie 1,9 à 3 fois). Retour au
     cadre du prototype validé : 4:5 borné, collant pendant la lecture du texte ; la
     840w est servie (sizes 760px dans le constructeur), donc nette. */
  .trajet-fait { align-items: start; }
  .trajet-fait__photo { margin: 0; position: sticky; top: var(--e24); aspect-ratio: 4 / 5; }
  .trajet-fait__photo picture { position: absolute; inset: 0; }
  .trajet-fait__photo img { height: 100%; aspect-ratio: auto; }
  .trajet-fait--gauche { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .trajet-fait--gauche .trajet-fait__photo { order: -1; }
}

/* ------------------------------------------ F. Pourquoi nous confier ce trajet
   Nouveau (DIRECTION §2 F) : des blocs AU FILET, le dessin de .prestation
   (accueil.css l. 533 à 541) : filet haut, sans cadre ni fond. */
.trajet-raisons { margin: var(--e32) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e24) var(--e32); }
.trajet-raison {
  max-width: none;
  margin: 0;
  padding: var(--e16) 0 0;
  border-top: var(--filet-epaisseur) solid var(--neutre-200);
}
.trajet-raison h3 { margin: 0 0 var(--e8); }
.trajet-raison p { color: var(--texte-secondaire); }
.trajet-raisons__photo { margin: var(--e32) 0 0; }
.trajet-raisons__photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--pos, 50% 50%); }

@media (min-width: 900px) {
  .trajet-raisons-corps {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--e48);
    align-items: start;
  }
  .trajet-raisons { grid-template-columns: 1fr 1fr; }
  .trajet-raison:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Tour TRJ 2 (12.10, DA 1) : même cadre 4:5 borné et collant que les sections de faits
     (photo du prototype validé : 403 × 503 à 1280). */
  .trajet-raisons-corps { align-items: start; }
  .trajet-raisons__photo { margin: 0; position: sticky; top: var(--e24); aspect-ratio: 4 / 5; }
  .trajet-raisons__photo picture { position: absolute; inset: 0; }
  .trajet-raisons__photo img { height: 100%; aspect-ratio: auto; }
}

/* -------------------------------------------------- Relances entre sections
   FINAL-lausanne.md : une phrase et un bouton SECONDAIRE (jamais un second
   primaire à l'écran). Filets haut et bas de --neutre-200, comme .prestation. */
.trajet-relance {
  margin-top: var(--e64);
}
.trajet-relance > div {
  padding-block: var(--e24);
  border-top: var(--filet-epaisseur) solid var(--neutre-200);
  border-bottom: var(--filet-epaisseur) solid var(--neutre-200);
}
.trajet-relance p { margin: 0; font-size: var(--t-texte-large); line-height: 1.4; }
.trajet-relance .spm-btns { margin-top: var(--e16); }
@media (min-width: 1080px) {
  body[data-page="pivot"] > main > .bande.trajet-relance { --largeur-max: 1080px; }
  .trajet-relance { margin-top: var(--e96); }
}

/* --------------------------------------------------- B. Comment ça se passe
   Copie de accueil.css §5, l. 650 à 675, et de la grille téléphone l. 1555 à
   1616. Différence voulue (DIRECTION §2 B′) : la vignette reste affichée à
   toutes les largeurs ; au-delà de 900 px, quatre colonnes, vignette au-dessus. */
.etapes-liste {
  display: grid;
  gap: var(--e32);
  margin: var(--e32) 0 0;
  padding-left: var(--retrait-rail);
  list-style: none;
}
.etapes-liste > li + li { margin-top: 0; }
.etape { position: relative; max-width: none; }
.etape-num {
  position: relative;
  margin: 0 0 var(--e4);
  font-size: var(--t-chiffre);
  line-height: 1;
  color: var(--marque);
}
.etape h3 { margin-bottom: var(--e8); }
.etape > h3 + p { color: var(--texte-secondaire); }

.etape {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: var(--e16);
  align-items: start;
}
.etape > * { grid-column: 2; }
.etape-vignette {
  display: block;
  grid-column: 1;
  grid-row: 1 / -1;
  width: 112px;
  margin: 0;
  aspect-ratio: 4 / 5;
}
.etape-vignette picture { height: 100%; }
.etape-vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .etapes-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e32); }
  .etape { display: block; }
  .etape-vignette { width: 100%; margin: 0 0 var(--e16); }
  .etape .etape-num { margin-bottom: var(--e12); }
}

/* C′. Relais après les étapes : accueil.css l. 1575 et 1576, visible ici à
   toutes les largeurs ; bouton pleine largeur sous 900 px. */
.action-relais { display: block; margin: var(--e32) 0 0; }
@media (max-width: 899px) { .action-relais .spm-btn { width: 100%; } }

/* ------------------------------------------------------ G. Autres trajets
   Nouveau (DIRECTION §2 G) : sous 900 px, une liste (vignette 112 × 75 px à
   gauche, titre à droite) ; au-delà, quatre colonnes, vignette 3:2 au-dessus.
   Filet haut de .prestation ; titre-lien souligné gris, rouge au survol
   (accueil.css l. 546 à 561). Tout le bloc est cliquable (lien étendu). */
.trajet-cartes { margin: var(--e32) 0 0; padding: 0 0 0 var(--retrait-rail); list-style: none; display: grid; gap: var(--e16); grid-template-columns: minmax(0, 1fr); }
.trajet-cartes > li + li { margin-top: 0; }
.trajet-carte {
  position: relative;
  max-width: none;
  margin: 0;
  padding: var(--e16) 0 0;
  background-color: transparent;
  border: 0;
  border-top: var(--filet-epaisseur) solid var(--neutre-200);
  border-radius: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: var(--e16);
  align-items: center;
}
.trajet-carte__vignette { margin: 0; width: 112px; aspect-ratio: 3 / 2; }
.trajet-carte__vignette picture { height: 100%; }
.trajet-carte__vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trajet-carte .spm-carte__titre { margin: 0; }
.trajet-carte .spm-carte__titre a {
  color: inherit;
  text-decoration-color: var(--filet-fort);
  text-underline-offset: .22em;
}
.trajet-carte .spm-carte__titre a::after { content: ""; position: absolute; inset: 0; }
.trajet-carte .spm-carte__titre a:hover,
.trajet-carte .spm-carte__titre a:focus-visible { text-decoration-color: var(--marque); }
@media (min-width: 900px) {
  .trajet-cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e32); }
  .trajet-carte { display: block; }
  .trajet-carte__vignette { width: 100%; margin: 0 0 var(--e12); }
}

/* ---------------------------------------------------- C. Bloc final rouge
   Copie de accueil.css §6, l. 759 à 818 (« Il reste à fixer la date »).
   La marge haute : --e96, --e160 au-delà de 1080 px, --e32 sous 900 px
   (accueil.css l. 36, 44 et 1628). */
.section-final {
  display: grid;
  grid-template-columns:
    [pleine-d] minmax(var(--gouttiere-g), 1fr)
    [texte-d] minmax(0, var(--largeur-max))
    [texte-f] minmax(var(--gouttiere-d), 1fr)
    [pleine-f];
  margin: var(--e96) 0 0;
}
@media (min-width: 1080px) { .section-final { margin-top: var(--e160); } }
@media (max-width: 899px) { .section-final { margin-top: var(--e64); } }
.final-texte {
  grid-column: texte-d / texte-f;
  padding-left: var(--retrait-rail);
}
.final-texte > h2 { max-width: var(--mesure-etroite); }
.final-texte p { margin-top: var(--e16); }
.final-texte .final-action {
  position: relative;
  margin-top: var(--e32);
  max-width: none;
}
.section-final .contact { margin: var(--e32) 0 0; }
.section-final .contact li { font-size: var(--t-texte); }
.section-final .contact li + li { margin-top: var(--e8); }
.spm-bloc-marque .spm-mention { color: inherit; }
.spm-bloc-marque .btn-sur-marque {
  background-color: var(--sur-marque);
  color: var(--marque-texte);
  border-color: transparent;
}
.spm-bloc-marque .btn-sur-marque:hover  { background-color: var(--marque-voile); }
.spm-bloc-marque .btn-sur-marque:active { background-color: var(--rouge-100); }
@media (min-width: 900px) {
  .final-texte { padding-right: var(--e48); }
  .section-final .contact { display: flex; flex-wrap: wrap; gap: var(--e16) var(--e48); }
  .section-final .contact li + li { margin-top: 0; }
}
/* Le bouton d'appel fixe de base.css (56 px, en bas à droite sous 600 px) ne
   doit couvrir aucune fin de ligne : même retrait que accueil.css l. 1638. */
@media (max-width: 599px) {
  .section-final .contact li { padding-right: calc(56px + var(--e16)); }
}