/* ==========================================================================
   JAST : charte visuelle
   --------------------------------------------------------------------------
   SOURCE UNIQUE DE VÉRITÉ pour l'identité du site.
   Chargée par assets/php/head/css.php, APRÈS assets/css/style.css (thème Webestica).

   Palette et gestes graphiques repris de la papeterie JAST (cartes de visite) :
   bleu profond, fond lavande, rouge marquant, et surtout le SURLIGNAGE JAUNE
   EN BIAIS, qui est la signature de la marque.

   Ne jamais remettre de couleur ni de taille de titre en dur dans une page.

   Sommaire
     0. Garde-fou : pas de débordement horizontal
     1. Palette JAST
     2. Composants Bootstrap recolorés
     3. Échelle typographique
     4. Gestes de marque (surlignage biais, pastilles, aplats)
     5. Rythme vertical & sections
     6. Composants
     7. Flotte & secteurs
     8. Accessibilité & mouvement
   ========================================================================== */


/* ==========================================================================
   0. GARDE-FOU : pas de débordement horizontal
   --------------------------------------------------------------------------
   Filet de sécurité. Si un jour un bloc dépasse la largeur de l'écran, la page
   ne devient pas scrollable latéralement — et surtout le « layout viewport »
   des mobiles ne s'élargit pas, ce qui déformerait tous les éléments
   `position: fixed` (barre de navigation du bas, bouton d'appel).
   `clip` et non `hidden` : `clip` ne crée pas de conteneur de défilement, donc
   l'en-tête collant (`header-sticky`) continue de fonctionner.
   ========================================================================== */

html {
  overflow-x: clip;
}


/* ==========================================================================
   1. PALETTE JAST
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  /* Couleurs de marque (cartes de visite) */
  --jast-navy:      #001b56;   /* bleu profond, 16,3:1 sur blanc */
  --jast-navy-soft: #12306e;   /* survol, dégradés */
  --jast-lavender:  #edeffe;   /* fond nuancé */
  --jast-red:       #dd0920;   /* rouge marquant, aplats, pastilles, filets */
  /* Variante pour le TEXTE : le rouge de marque tombe à 4,45:1 sur le fond
     lavande, juste sous le seuil AA. Deux crans plus dense → 4,73:1. */
  --jast-red-ink:   #d5081e;
  --jast-yellow:    #ffda34;   /* surlignage */
  /* Le jaune ne change pas selon le thème : ce qui se pose DESSUS ne doit pas
     changer non plus. Sans ce jeton figé, --jast-navy s'éclaircit en mode
     sombre et le texte sur jaune tombe à 1,6:1. */
  --jast-on-yellow: #001b56;
  --jast-ink:       #001b56;   /* titres de section */
  --jast-black:     #10121a;   /* pastilles */
  /* Le très grand titre est NOIR, comme les noms sur les cartes de visite,
     pas bleu. Jeton distinct de --jast-black pour pouvoir s'inverser en mode
     sombre sans emporter les pastilles avec lui. */
  --jast-display:   #000000;

  --jast-body:      #33405e;   /* texte courant, 10,3:1 */
  --jast-muted:     #56628a;   /* texte secondaire, 5,98:1 */
  --jast-border:    #dce0f5;
  --jast-shadow:    0 .75rem 2.25rem rgba(0, 27, 86, .13);
  --jast-shadow-sm: 0 .35rem 1rem rgba(0, 27, 86, .08);
  --jast-radius:    1rem;
  --jast-radius-sm: .625rem;

  /* Report sur les jetons Bootstrap */
  --bs-primary: #001b56;
  --bs-primary-rgb: 0, 27, 86;
  --bs-primary-text-emphasis: #001b56;
  --bs-primary-bg-subtle: #edeffe;
  --bs-primary-border-subtle: #b9c2e8;

  --bs-danger: #dd0920;
  --bs-danger-rgb: 221, 9, 32;

  /* Le thème livre son bloc clair avec des valeurs de mode sombre : le texte
     courant tombait à 4,6:1 et `.text-muted` à 1,72:1, très en dessous du
     seuil AA. C'était le cas sur TOUTES les pages. */
  --bs-body-color: #33405e;
  --bs-body-color-rgb: 51, 64, 94;
  --bs-secondary-color: #56628a;
  --bs-secondary-color-rgb: 86, 98, 138;

  --bs-link-color: #001b56;
  --bs-link-color-rgb: 0, 27, 86;
  --bs-link-hover-color: #dd0920;
  --bs-link-hover-color-rgb: 221, 9, 32;
}

/* Le footer du thème est une SURFACE SOMBRE (`bg-dark`) qui consomme les mêmes
   jetons de texte que le corps de page. Les gris bleutés définis ci-dessus y
   tomberaient à 3,3:1. On les remonte localement, sans ça, corriger le corps
   de page casse le footer. */
.bg-dark,
[data-bs-theme="dark"] .bg-dark {
  --bs-body-color: #ced5e2;
  --bs-body-color-rgb: 206, 213, 226;
  --bs-secondary-color: #a8b2c4;      /* 9,2:1 sur le fond du footer */
  --bs-secondary-color-rgb: 168, 178, 196;
}

[data-bs-theme="dark"] {
  /* Rappel indispensable : les valeurs ci-dessus sont posées sur `:root`, qui a
     la même spécificité que `[data-bs-theme=dark]` et arrive après. */
  --bs-body-color: #b8bfc9;
  --bs-body-color-rgb: 184, 191, 201;
  --bs-secondary-color: #98a1ad;
  --bs-secondary-color-rgb: 152, 161, 173;

  --bs-primary: #8fb0ff !important;
  --bs-primary-rgb: 143, 176, 255;
  --bs-link-color: #8fb0ff;
  --bs-link-color-rgb: 143, 176, 255 !important;
  --bs-link-hover-color: #ff6b7d;
  --bs-link-hover-color-rgb: 255, 107, 125;

  --jast-navy: #8fb0ff;
  --jast-navy-soft: #b3c8ff;
  --jast-red-ink: #ff8a97;
  --jast-display: #ffffff;   /* le grand titre s'inverse ; les pastilles non */
  --jast-lavender: #282c31;
  --jast-ink: #ffffff;
  --jast-body: #b8bfc9;
  --jast-muted: #98a1ad;
  --jast-border: rgba(255, 255, 255, .10);
  --jast-shadow: none;
  --jast-shadow-sm: none;
}


/* ==========================================================================
   2. COMPOSANTS BOOTSTRAP RECOLORÉS
   Le thème compile la couleur en dur (#5143d9) dans une trentaine de
   sélecteurs : il faut les reprendre un par un, sinon il reste du violet.
   ========================================================================== */

/* Angles vifs sur TOUS les boutons, y compris ceux que le thème arrondit en
   gélule. Choix repris des références fournies : un bouton rectangulaire se
   lit comme une action ferme, l'arrondi l'adoucit. */
.btn,
.btn.rounded-pill,
.btn.rounded-3,
.btn.rounded-4 {
  --bs-btn-border-radius: 0;
  border-radius: 0 !important;
}

.btn-primary {
  --bs-btn-bg: #001b56;
  --bs-btn-border-color: #001b56;
  --bs-btn-hover-bg: #12306e;
  --bs-btn-hover-border-color: #12306e;
  --bs-btn-active-bg: #000f33;
  --bs-btn-active-border-color: #000f33;
  --bs-btn-disabled-bg: #001b56;
  --bs-btn-disabled-border-color: #001b56;
  --bs-btn-focus-shadow-rgb: 0, 27, 86;
}

.btn-outline-primary {
  --bs-btn-color: #001b56;
  --bs-btn-border-color: #001b56;
  --bs-btn-hover-bg: #001b56;
  --bs-btn-hover-border-color: #001b56;
  --bs-btn-active-bg: #001b56;
  --bs-btn-active-border-color: #001b56;
  --bs-btn-disabled-color: #001b56;
  --bs-btn-disabled-border-color: #001b56;
  --bs-btn-focus-shadow-rgb: 0, 27, 86;
  border-width: 2px;
}

/* Le thème pose un gris en dur (#747579) sur `.btn-outline-light`, APRÈS sa
   propre déclaration `color: var(--bs-btn-color)`, qui est donc écrasée. Sur
   l'aplat bleu profond, le libellé tombait à 3,53:1, sous le seuil AA. */
.btn-outline-light,
main.lp .btn-outline-light { color: var(--bs-btn-color, #f5f5f6); }
.btn-outline-light:hover,
.btn-outline-light:focus-visible,
.btn-outline-light:active,
main.lp .btn-outline-light:hover { color: var(--bs-btn-hover-color, #000); }

/* Rouge JAST, réservé à l'urgence et à l'astreinte. */
.btn-danger {
  --bs-btn-bg: #dd0920;
  --bs-btn-border-color: #dd0920;
  --bs-btn-hover-bg: #b80719;
  --bs-btn-hover-border-color: #b80719;
  --bs-btn-active-bg: #9c0615;
  --bs-btn-active-border-color: #9c0615;
  --bs-btn-focus-shadow-rgb: 221, 9, 32;
}

.btn-primary-soft {
  color: #001b56;
  background-color: rgba(0, 27, 86, .07);
}
.btn-primary-soft:active,
.btn-primary-soft:hover,
.btn-primary-soft:focus {
  color: #fff;
  background-color: #001b56;
  border-color: #001b56;
}

/* Bouton jaune : l'action la plus visible, sur fond bleu profond. */
.btn-jast {
  --bs-btn-color: #001b56;
  --bs-btn-bg: #ffda34;
  --bs-btn-border-color: #ffda34;
  --bs-btn-hover-color: #001b56;
  --bs-btn-hover-bg: #ffe470;
  --bs-btn-hover-border-color: #ffe470;
  --bs-btn-active-color: #001b56;
  --bs-btn-active-bg: #f0c800;
  --bs-btn-active-border-color: #f0c800;
  --bs-btn-focus-shadow-rgb: 255, 218, 52;
  font-weight: 700;
}

/* Formulaires */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #6c7cb0;
  box-shadow: 0 0 0 .25rem rgba(0, 27, 86, .20);
}
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #001b56;
  border-color: #001b56;
}
.form-range::-webkit-slider-thumb { background-color: #001b56; }
.form-range::-moz-range-thumb     { background-color: #001b56; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 27, 86, .25); }
.form-range:focus::-moz-range-thumb     { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 27, 86, .25); }

/* Navigation */
.navbar {
  --bs-navbar-hover-color: #dd0920;
  --bs-navbar-active-color: #001b56;
}

/* Le thème dimensionne l'en-tête pour un logo de 100 px de haut avec 30 px de
   marge : 160 px de navbar, soit un cinquième d'un écran de portable occupé
   avant même le contenu. On ramène à ~72 px, hauteur courante d'un en-tête. */
.navbar { --bs-navbar-brand-padding-y: .875rem; }
.navbar-brand { padding-top: .875rem; padding-bottom: .875rem; }
.navbar-brand .navbar-brand-item,
.navbar-expand-xl .navbar-brand .navbar-brand-item {
  height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 1199.98px) {
  .navbar-expand-xl .navbar-brand { padding: .75rem 0; }
  .navbar-expand-xl .navbar-brand .navbar-brand-item { height: 40px; }
}

/* Sur téléphone, logo + bouton d'appel + sélecteur de thème dépassent de
   quelques pixels et la barre passe sur deux lignes (116 px). Le sélecteur
   est le moins utile des trois : masqué sous 576 px, où le thème suit de
   toute façon le réglage du système. Le bouton d'appel, lui, reste. */
@media (max-width: 575.98px) {
  .navbar .nav-item:has(.theme-icon-active) { display: none; }
  .navbar .theme-icon-active { display: none !important; }
}
.dropdown-menu {
  --bs-dropdown-link-hover-color: #001b56;
  --bs-dropdown-link-active-color: #001b56;
}
.nav-pills  { --bs-nav-pills-link-active-bg: #001b56; }
.pagination { --bs-pagination-hover-bg: #001b56; --bs-pagination-hover-border-color: #001b56; }
.list-group { --bs-list-group-active-bg: #001b56; --bs-list-group-active-border-color: #001b56; }
.accordion  {
  --bs-accordion-active-color: #001b56;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(0, 27, 86, .22);
}
.fill-primary { fill: #001b56 !important; }

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #8fb0ff;
  --bs-btn-border-color: #8fb0ff;
  --bs-btn-color: #001b56;
  --bs-btn-hover-color: #001b56;
  --bs-btn-hover-bg: #b3c8ff;
  --bs-btn-hover-border-color: #b3c8ff;
}
[data-bs-theme="dark"] .btn-primary-soft {
  color: #8fb0ff;
  background-color: rgba(143, 176, 255, .12);
}


/* ==========================================================================
   3. ÉCHELLE TYPOGRAPHIQUE
   --------------------------------------------------------------------------
   Poppins pour les titres, en 800 sur les grands titres, pour retrouver le
   poids des cartes de visite. Échelle fluide, valable sur TOUT le site (main,
   témoignages, footer) : c'est ce qui règle le problème de cohérence.

   À 1440 px :  h1 56 · h2 40 · h3 26 · h4 21 · h5 18 · h6 16
   ========================================================================== */

h1, .h1, h2, .h2 { font-weight: 800; }

h1, .h1 { font-size: clamp(2.25rem, 1.60rem + 2.60vw, 3.50rem); line-height: 1.08; letter-spacing: -.025em; }
h2, .h2 { font-size: clamp(1.75rem, 1.30rem + 1.80vw, 2.50rem); line-height: 1.12; letter-spacing: -.02em;  }
h3, .h3 { font-size: clamp(1.25rem, 1.08rem + 0.60vw, 1.625rem); line-height: 1.25; letter-spacing: -.01em; }
h4, .h4 { font-size: clamp(1.10rem, 1.02rem + 0.30vw, 1.3125rem); line-height: 1.3; }
h5, .h5 { font-size: 1.125rem; line-height: 1.4; }
h6, .h6 { font-size: 1rem;     line-height: 1.45; }

@media (min-width: 1200px) {
  h1, .h1 { font-size: 3.5rem; }
  h2, .h2 { font-size: 2.5rem; }
  h3, .h3 { font-size: 1.625rem; }
  h4, .h4 { font-size: 1.3125rem; }
  h5, .h5 { font-size: 1.125rem; }
}

/* Grand titre capitales, façon carte de visite. */
.display-jast {
  font-family: "Poppins", sans-serif;
  /* Calibré sur la LARGEUR DE COLONNE du hero, pas sur la page : la ligne
     « en fonction de vos contraintes » doit tenir sur une seule ligne, sinon la
     composition en 4 lignes de la carte de visite tombe. La colonne est passée
     à col-lg-8 (~832 px à 1440) pour permettre 46 px au lieu de 36. */
  font-size: clamp(1.5rem, 1.20rem + 1.85vw, 2.75rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.03em;
  line-height: .98;
  color: var(--jast-display);
}
/* Entre 992 et 1199 px, le conteneur Bootstrap est bloqué à 960 px : la colonne
   du hero n'y fait que ~512 px, la plus étroite de toute la plage desktop.
   Sans ce palier, la dernière ligne s'y replierait. */
/* Entre 992 et 1199 px le conteneur Bootstrap est bloqué à 960 px : la colonne
   du hero n'y fait que ~592 px, la plus étroite de toute la plage desktop. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .display-jast { font-size: 2.05rem; }
}

/* Titre des pages intérieures.
   Le très grand titre de l'accueil (`.display-jast`, capitales, 44 px) est une
   signature de marque : il ne convient pas à un titre de page qui doit d'abord
   dire de quoi parle la page. `.page-title` en reprend tout le reste (Poppins
   800, noir pur, surlignage en biais) à une échelle qui laisse respirer une
   phrase complète. Remplace le `style="font-size:clamp(1.35rem,2.4vw,1.85rem)"`
   qui était écrit en dur dans chacune des treize pages, et qui plafonnait à
   29 px là où l'accueil monte à 44. */
.page-title,
main.lp .page-title {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(1.625rem, 1.05rem + 2vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--jast-display);
  margin-bottom: .875rem;
}

/* Chaque ligne est un bloc : elle se replie proprement sur mobile au lieu de
   déborder, sans avoir à poser des <br> qui cassent aux petites largeurs. */
.display-jast > span { display: block; }
.display-jast > span.mark-jast { display: inline-block; }

/* Les mots de liaison sont plus petits sur la carte de visite
   (« AVEC réactivité ET fiabilité ») : on reprend ce détail. */
.mj-small { font-size: .68em; }

.lead { font-size: 1.1875rem; line-height: 1.65; }

/* Longueur de ligne : en rem, pas en ch, le « 0 » de DM Sans est large. */
.measure    { max-width: 36rem; }
.measure-sm { max-width: 28rem; }

.tnum { font-variant-numeric: tabular-nums; }


/* ==========================================================================
   4. GESTES DE MARQUE
   --------------------------------------------------------------------------
   Le surlignage jaune EN BIAIS est la signature JAST. Il est posé en
   pseudo-élément derrière le texte : le texte reste net et sélectionnable,
   et l'inclinaison ne déforme pas les lettres.
   ========================================================================== */

.mark-jast {
  position: relative;
  display: inline-block;
  z-index: 0;
  color: inherit;
  padding: 0 .12em;
}
.mark-jast::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.15em;
  right: -.15em;
  top: .06em;
  bottom: .02em;
  background: var(--jast-yellow);
  transform: rotate(-1.4deg);
  border-radius: 2px;
}
/* Variante inclinée dans l'autre sens : à alterner pour éviter l'effet gabarit. */
.mark-jast.is-alt::before { transform: rotate(1.2deg); }
/* Le fond du surlignage est jaune quel que soit le thème et quelle que soit
   la section : la couleur du texte posé dessus doit donc être figée elle aussi.
   Sans cette règle, le titre hérite du blanc en mode sombre et tombe à 1,37:1
   sur le jaune. Vaut pour toutes les pages, y compris sur aplat bleu. */
.mark-jast,
.bg-navy .mark-jast,
.mark-jast.on-navy { color: var(--jast-on-yellow) !important; }

/* Compatibilité : anciens surlignages écrits en style inline dans les pages. */
[style*="FFDA34"], [style*="ffda34"] {
  background-color: var(--jast-yellow);
  color: #001b56 !important;
  padding: .06em .28em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Pastille noire à texte blanc, reprise des cartes de visite. */
.pill-label {
  display: inline-block;
  background: var(--jast-black);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .3rem .75rem;
  border-radius: .375rem;
  line-height: 1.3;
}
.pill-label.is-red    { background: var(--jast-red); }
.pill-label.is-yellow { background: var(--jast-yellow); color: var(--jast-on-yellow); }
.pill-label.is-navy   { background: var(--jast-navy); }

/* Aplat bleu profond. */
.bg-navy {
  background-color: var(--jast-navy);
  color: #fff;
}
[data-bs-theme="dark"] .bg-navy { background-color: #0a1330; }
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4, .bg-navy h5, .bg-navy .display-jast { color: #fff; }
.bg-navy .text-muted { color: rgba(255, 255, 255, .70) !important; }
.bg-navy a:not(.btn) { color: var(--jast-yellow); }

.bg-lavender { background-color: var(--jast-lavender); }

/* Filet rouge court, accent de titre, repris du logo. */
.rule-red::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  background: var(--jast-red);
  border-radius: 2px;
  margin-top: 1rem;
}
.text-center .rule-red::after { margin-inline: auto; }


/* ==========================================================================
   5. RYTHME VERTICAL & SECTIONS
   ========================================================================== */

.py-6 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.py-7 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.pt-6 { padding-top: 3.5rem !important; }
.pb-6 { padding-bottom: 3.5rem !important; }
.pt-7 { padding-top: 4.5rem !important; }
.pb-7 { padding-bottom: 4.5rem !important; }

/* `main.lp` est plus spécifique que le `.lp .section-tint` posé en dur dans les
   pages : sans lui, --lp-tint reste figé en clair et les sections teintées
   virent au blanc sur blanc en mode sombre. */
.section-tint,
main.lp .section-tint { background-color: var(--jast-lavender); }

main.lp section {
  padding-top: clamp(3.25rem, 1.75rem + 4vw, 5.5rem);
  padding-bottom: clamp(3.25rem, 1.75rem + 4vw, 5.5rem);
}
main.lp section.pt-0 { padding-top: 0; }
main.lp section.pb-0 { padding-bottom: 0; }


/* ==========================================================================
   6. COMPOSANTS
   Déclarés en double (`.x` et `main.lp .x`) : la forme courte sert aux includes
   rendus hors de <main class="lp">, la longue a la spécificité qu'il faut pour
   battre le <style> inline encore présent dans les pages non reprises.
   ========================================================================== */

/* Titres de section */
.section-title,
main.lp .section-title {
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.75rem, 1.30rem + 1.80vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--jast-ink);
  margin-bottom: .75rem;
  max-width: 20ch;
}
main.lp .text-center .section-title { max-width: 24ch; margin-inline: auto; }

.section-lead,
main.lp .section-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--jast-muted);
  max-width: 38rem;
}
main.lp .text-center .section-lead { margin-inline: auto; }

/* Surtitre, au maximum une fois par page. */
.eyebrow,
main.lp .eyebrow {
  display: inline-block;
  font-family: "Poppins", sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jast-red-ink);
  margin-bottom: .625rem;
}

/* Cartes */
a.u-card { display: block; text-decoration: none; color: inherit; }

.u-card,
main.lp .u-card {
  height: 100%;
  border: 1px solid var(--jast-border);
  border-radius: var(--jast-radius);
  background: var(--bs-mode, #fff);
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.u-card:hover,
main.lp .u-card:hover {
  border-color: var(--jast-navy);
  box-shadow: var(--jast-shadow);
  transform: translateY(-4px);
}

.card-h,
main.lp .card-h {
  font-family: "Poppins", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--jast-ink);
  margin-bottom: .5rem;
}
.card-p,
main.lp .card-p {
  font-size: .9688rem;
  line-height: 1.65;
  color: var(--jast-muted);
  margin-bottom: 0;
}
.card-link,
main.lp .card-link {
  display: inline-block;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--jast-red-ink);
  margin-top: .875rem;
}
.card-link i,
main.lp .card-link i { transition: transform .2s ease; }
.u-card:hover .card-link i,
main.lp .u-card:hover .card-link i { transform: translateX(4px); }

/* Carte à visuel (module « Nos cas concrets », grille du hub /cas-concrets) */
.case-media,
main.lp .case-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--jast-radius) var(--jast-radius) 0 0; }
.case-media img,
main.lp .case-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.u-card:hover .case-media img,
main.lp .u-card:hover .case-media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .case-media img, main.lp .case-media img { transition: none !important; }
}

/* Pastille d'icône */
.feat-icon,
main.lp .feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: .75rem;
  font-size: 1.35rem;
  background: var(--jast-lavender);
  color: var(--jast-navy);
}
.feat-icon.is-accent,
main.lp .feat-icon.is-accent { background: var(--jast-yellow); color: var(--jast-on-yellow); }
.feat-icon.is-danger,
main.lp .feat-icon.is-danger { background: rgba(221, 9, 32, .10); color: var(--jast-red); }
.feat-icon.is-navy,
main.lp .feat-icon.is-navy   { background: var(--jast-navy); color: #fff; }

/* Faits du hero : une ligne sobre séparée par des filets fins. Remplace les
   pastilles en gélule, jugées trop présentes sous le titre. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hero-facts li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--jast-ink);
}
.hero-facts li:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 1.1em;
  margin-left: .5rem;
  background: var(--jast-border);
}
.hero-facts i { color: var(--jast-red-ink); font-size: 1rem; }

/* Pastilles de réassurance */
.trust-badge,
main.lp .trust-badge {
  display: inline-block;
  border: 1px solid var(--jast-border);
  border-radius: 50rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  font-size: .875rem;
  padding: .5rem 1rem;
  background-color: var(--bs-mode, #fff);
  color: var(--jast-ink);
}
.trust-badge:hover,
main.lp .trust-badge:hover {
  border-color: var(--jast-navy);
  box-shadow: var(--jast-shadow-sm);
}
/* Seules les pastilles CLIQUABLES passent à 44 px. */
a.trust-badge { min-height: 44px; display: inline-flex; align-items: center; }

/* Chiffres clés */
.kpi,
main.lp .kpi {
  font-family: "Poppins", sans-serif;
  font-size: clamp(2.25rem, 1.5rem + 2.8vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--jast-navy);
  font-variant-numeric: tabular-nums;
}
.kpi-label,
main.lp .kpi-label {
  font-size: .9375rem;
  color: var(--jast-muted);
  margin-top: .5rem;
}

.lp-status-warn,
main.lp .lp-status-warn { color: #9a4d05; }


/* ==========================================================================
   7. FLOTTE & SECTEURS
   ========================================================================== */

/* ------------------------------------------------------------------------
   LE CONVOI : rail de cartes véhicules qui défile en continu.
   Un seul comportement du téléphone au grand écran : sept cartes ne tiennent
   de toute façon jamais de front. Le rail reste un vrai conteneur défilant,
   donc le doigt et le pavé tactile fonctionnent normalement ; le script de la
   page ne fait qu'y ajouter quelques pixels par image.
   ------------------------------------------------------------------------ */

/* Ligne au-dessus du rail : légende des plans à gauche, commandes à droite */
.convoy__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: .875rem;
}

.pal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem 1.25rem;
  font-size: .8125rem;
  color: var(--jast-muted);
}
.pal-legend > span { display: inline-flex; align-items: center; gap: .45rem; }
.pal-legend__note { font-style: italic; }

.convoy__nav { display: flex; gap: .5rem; flex-shrink: 0; }
.convoy__nav button {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--jast-border);
  border-radius: 0;                    /* angles vifs, comme les boutons */
  background: var(--bs-mode, #fff);
  color: var(--jast-navy);
  font-size: 1.125rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.convoy__nav button:hover {
  background: var(--jast-navy);
  border-color: var(--jast-navy);
  color: #fff;
}
/* Bouton de pause enfoncé : il doit se lire comme un état, pas comme un survol. */
.convoy__nav button[aria-pressed="true"] {
  background: var(--jast-navy);
  border-color: var(--jast-navy);
  color: #fff;
}

.convoy__rail {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  /* INDISPENSABLE. Sans ceci, la largeur de défilement du rail (14 cartes,
     ~4000 px) remonte jusqu'au document. Sur mobile, le navigateur élargit
     alors son « layout viewport » à cette largeur : la barre de navigation du
     bas (position: fixed ; width: 100%) s'étale sur 4000 px et se retrouve
     tout en bas de la page au lieu de rester collée à l'écran.
     `contain: paint` enferme le rail dans sa propre boîte. Aucun effet visuel :
     le contenu était déjà rogné par overflow-x: auto. */
  contain: paint;
  overscroll-behavior-x: contain;
  padding-bottom: .125rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.convoy__rail::-webkit-scrollbar { display: none; }
.convoy__rail:focus-visible { outline: 3px solid var(--jast-red); outline-offset: 3px; }

/* Carte véhicule */
.veh {
  flex: 0 0 min(84%, 20.5rem);
  display: flex;
  flex-direction: column;
  background: var(--bs-mode, #fff);
  border: 1px solid var(--jast-border);
  border-radius: var(--jast-radius);
  overflow: hidden;
}

.veh__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--jast-lavender);
}
.veh__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* En l'absence de photo, la silhouette. Calée en bas et À GAUCHE : les sept
   véhicules partagent le même viewBox et la même ligne de sol, donc cabines
   alignées et longueurs réelles les unes par rapport aux autres. C'est un vrai
   comparatif, pas un simple bouche-trou. */
.veh__media.is-ghost {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14% 6% 8%;
}
.veh__ghost {
  width: 100%;
  height: auto;
  display: block;
  color: var(--jast-navy);
  --fleet-glass: var(--jast-lavender);
}

.veh__index {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--jast-black);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .06em;
  line-height: 1;
  padding: .375rem .5rem;
}

.veh__body {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  flex: 1 1 auto;
  padding: 1.125rem 1.25rem 1.375rem;
}
.veh__name {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--jast-ink);
  margin: 0;
  min-height: 2.6em;              /* 2 lignes réservées, « Porteur 26 tonnes bâché » les prend */
  display: flex;
  align-items: flex-start;
}
/* Trois lignes, ni plus ni moins : c'est ce qui garantit que « Charge utile »
   tombe à la même hauteur sur les sept cartes, quelle que soit la longueur du
   texte. Le plafond à 3 lignes n'est qu'un garde-fou, les textes sont écrits
   pour tenir. */
.veh__desc {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--jast-body);
  margin: 0;
  min-height: 4.8em;              /* 3 x 1.6 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.veh__note { font-size: .75rem; line-height: 1.5; color: var(--jast-muted); margin: -.4rem 0 0; }

/* Chiffres clés, en lignes réglées : on les compare d'une carte à l'autre. */
.veh__stats { margin: 0; }
.veh__stats > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-top: 1px solid var(--jast-border);
}
.veh__stats > div:last-child { border-bottom: 1px solid var(--jast-border); }
.veh__stats dt {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--jast-muted);
}
.veh__stats dd {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1;
  color: var(--jast-ink);
  font-variant-numeric: tabular-nums;
}
/* Valeur pas encore renseignée : la ligne reste, la trame de la carte aussi,
   et la mention reste vraie tant que le chiffre n'est pas saisi. */
.veh__stats dd.is-ask {
  font-family: inherit;
  font-weight: 600;
  font-size: .8125rem;
  color: var(--jast-muted);
}

/* Palettes : le chiffre, puis le PLAN DE CHARGEMENT vu de dessus. Le viewBox
   est le même sur les sept cartes (celui du plus grand plancher, la semi), donc
   les plans sont à la même échelle et l'écart de surface se lit directement. */
.pal { --pal-h: 1.05rem; }
.pal__line { display: flex; align-items: baseline; gap: .45rem; margin: 0 0 .4rem; }
.pal__line:has(.pal__ask) { justify-content: space-between; margin-bottom: 0; }
.pal__n {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--jast-ink);
  font-variant-numeric: tabular-nums;
}
.pal__lbl { font-size: .75rem; font-weight: 600; color: var(--jast-muted); }
.pal__ask { font-size: .8125rem; font-weight: 600; color: var(--jast-muted); }

.plan { display: block; width: 100%; height: auto; }
.plan__sol {
  fill: var(--jast-lavender);
  stroke: var(--jast-border);
  stroke-width: 5;
}
[data-bs-theme="dark"] .plan__sol { fill: rgba(255, 255, 255, .05); }
.plan__pal { fill: var(--jast-navy); }

/* Vignettes de la légende, aux proportions d'une palette 80x120 vue de dessus :
   posée en long elle avance de 120 cm, posée en large de 80 seulement. */
.pal__t {
  display: block;
  flex: 0 0 auto;
  width: 21px;
  height: 14px;
  background: var(--jast-navy);
}
.pal__t--large { width: 14px; height: 21px; }

/* Équipements : pastilles à angles vifs. */
.veh__opts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.veh__opts li {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--jast-navy);
  background: var(--jast-lavender);
  padding: .3rem .55rem;
}
[data-bs-theme="dark"] .veh__opts li { background: rgba(255, 255, 255, .07); }
.veh__opts i { font-size: .875rem; }

/* Lien de pied de carte, poussé tout en bas : toutes les cartes se terminent
   sur la même ligne, qu'elles portent deux chiffres ou six. */
.veh__cta {
  margin-top: auto;
  min-height: 2.75rem;            /* cible tactile */
  padding-top: .9rem;
  border-top: 1px solid var(--jast-border);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  color: var(--jast-navy);
  text-decoration: none;
}
.veh__cta i { transition: transform .2s ease; }
.veh__cta:hover { color: var(--jast-red-ink); }
.veh__cta:hover i { transform: translateX(4px); }

.convoy__hint {
  margin-top: .875rem;
  font-size: .8125rem;
  color: var(--jast-muted);
}

@media (min-width: 576px) {
  .veh { flex-basis: 20.5rem; }
}

/* Secteurs clients */
.sector {
  display: flex;
  align-items: center;
  gap: .875rem;
  height: 100%;
  padding: 1rem 1.125rem;
  border: 1px solid var(--jast-border);
  border-radius: var(--jast-radius-sm);
  background: var(--bs-mode, #fff);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sector:hover {
  transform: translateY(-3px);
  border-color: var(--jast-navy);
  box-shadow: var(--jast-shadow-sm);
}
.sector i {
  font-size: 1.375rem;
  color: var(--jast-navy);
  flex-shrink: 0;
}
.sector span {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.25;
  color: var(--jast-ink);
  /* Sans min-width:0, un élément flex refuse de descendre sous la largeur de
     son plus long mot : « Agroalimentaire » débordait de sa carte à 320 px. */
  min-width: 0;
  overflow-wrap: break-word;
}
/* Sur fond bleu, les secteurs s'inversent. */
.bg-navy .sector {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.bg-navy .sector:hover { background: rgba(255, 255, 255, .11); border-color: var(--jast-yellow); }
.bg-navy .sector i     { color: var(--jast-yellow); }
.bg-navy .sector span  { color: #fff; }

/* Bande photo.
   Deux visuels de formats différents (un portrait, un carré) alignés sur une
   hauteur commune en desktop, empilés dans leur format naturel en mobile. */
.photo-band { display: flex; flex-direction: column; gap: 1rem; }
.photo-band > * { border-radius: var(--jast-radius); overflow: hidden; background: var(--jast-lavender); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-band > :first-child { aspect-ratio: 3 / 4; }
.photo-band > :last-child  { aspect-ratio: 4 / 3; }

@media (min-width: 768px) {
  .photo-band { flex-direction: row; height: clamp(16rem, 26vw, 22rem); }
  .photo-band > * { aspect-ratio: auto; }
  .photo-band > :first-child { flex: 0 0 34%; }
  .photo-band > :last-child  { flex: 1 1 auto; }
}

/* Parcours en étapes.
   Remplace la bande de chiffres « 2009 / J+0 / 7j/7 » : un prospect transport
   veut savoir ce qui se passe quand il appelle, pas l'année de création. */
.step {
  position: relative;
  padding-top: 2.75rem;
}
/* La liaison s'arrête pile dans la gouttière (g-md-3 = 1rem), pour ne pas
   passer sous la pastille suivante. Sur la dernière étape, on n'écrit
   simplement pas le <span> : `:last-child` ne marcherait pas ici, chaque
   étape étant seule dans sa colonne, elles seraient donc TOUTES dernières. */
.step__line {
  position: absolute;
  top: 1rem;
  left: 2.25rem;
  right: -1rem;
  height: 2px;
  background: var(--jast-border);
}
.step__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--jast-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.step__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--jast-ink);
  margin-bottom: .35rem;
}
/* Empilées sur mobile, la ligne de liaison horizontale n'a plus de sens. */
@media (max-width: 767.98px) {
  .step__line { display: none; }
  .step { padding-top: 0; padding-left: 3rem; min-height: 2rem; }
  .step__num { top: -.15rem; }
}

[data-bs-theme="dark"] .step__num { color: #000000; }

/* Clients : grille réglée par des filets fins.
   Le fond de la grille fait office de trait : chaque cellule est opaque et le
   gap de 1px laisse voir le fond. Les filets se placent donc tout seuls, quel
   que soit le nombre de clients, sans bordure extérieure à corriger. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--jast-border);
  border: 1px solid var(--jast-border);
}
.logo-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 6.5rem;
  padding: 1.25rem 1rem;
  background: var(--bs-mode, #fff);
}
.logo-cell__name {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--jast-ink);
  text-align: center;
  /* Même piège flex que `.sector` : sans min-width:0, un nom de client d'un
     seul mot refuse de se replier et sort de sa cellule à 320 px. */
  min-width: 0;
  overflow-wrap: break-word;
}
.logo-cell img {
  max-width: 100%;
  max-height: 2.75rem;
  width: auto;
  height: auto;
  display: block;
}

/* Le point d'information reprend le geste de la référence : un rond discret
   posé en exposant du nom, qui révèle un fait concret au survol ou au focus. */
.info-dot {
  position: relative;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  padding: 0;
  border: 1px solid var(--jast-border);
  border-radius: 50%;
  background: transparent;
  color: var(--jast-muted);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
/* Le rond ne fait que 18 px : on lui donne une zone de clic de 44 px sans le
   grossir visuellement, sinon il est intouchable au doigt. */
.info-dot::after {
  content: "";
  position: absolute;
  inset: -13px;
}
.info-dot:hover,
.info-dot:focus-visible {
  color: #fff;
  background: var(--jast-navy);
  border-color: var(--jast-navy);
}

/* Le thème n'habille pas les info-bulles : on les met à la charte. */
.tooltip .tooltip-inner {
  background: var(--jast-black);
  color: #fff;
  font-size: .8125rem;
  line-height: 1.45;
  max-width: 17rem;
  padding: .5rem .75rem;
  border-radius: 0;
  text-align: left;
}
.tooltip .tooltip-arrow::before { border-top-color: var(--jast-black); border-bottom-color: var(--jast-black); }
.tooltip.show { opacity: 1; }

/* Barre de disponibilité : l'état d'ouverture en direct. Le point coloré ne
   porte pas l'information à lui seul, le libellé la répète en toutes lettres. */
.dispo-etat {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
  font-weight: 700;
  margin: 0;
}
.dispo-point {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: #0b7a4b;
}
.dispo-point.is-astreinte { background: #6a3a02; }
.dispo-ouvert    { color: #0b7a4b; }
.dispo-astreinte { color: #6a3a02; }
[data-bs-theme="dark"] .dispo-point    { background: #57cf95; }
[data-bs-theme="dark"] .dispo-point.is-astreinte { background: #e8a33d; }
[data-bs-theme="dark"] .dispo-ouvert    { color: #57cf95; }
[data-bs-theme="dark"] .dispo-astreinte { color: #e8a33d; }

/* Grille d'offres : même geste que la grille clients, un filet de 1 px obtenu
   par un `gap` posé sur un fond de la couleur des filets. Remplace les séries
   de six cartes à icône identiques, qui sont la signature la plus visible
   d'une page fabriquée à la chaîne. */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--jast-border);
  border: 1px solid var(--jast-border);
}
.offer {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.5rem 1.5rem 1.375rem;
  background: var(--bs-mode, #fff);
  text-decoration: none;
  color: inherit;
  transition: background-color .2s ease;
}
a.offer:hover { background: var(--jast-lavender); }
.offer__num {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--jast-red-ink);
}
.offer__name {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--jast-ink);
}
.offer__desc {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--jast-body);
  margin: 0;
}
/* Tarif indicatif en pied de cellule : c'est l'information que le visiteur
   cherche en premier sur les pages de service, elle se lit comme un chiffre. */
.offer__prix {
  margin: .35rem 0 0;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--jast-ink);
  font-variant-numeric: tabular-nums;
}

.offer__go {
  margin-top: auto;
  padding-top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: .8125rem;
  color: var(--jast-navy);
}
.offer__go i { transition: transform .2s ease; }
a.offer:hover .offer__go i { transform: translateX(4px); }
/* Variante non cliquable : sert d'argumentaire, pas de lien. */
.offer.is-static { cursor: default; }

/* Spécialités : grille illustrée par le jeu d'images « métiers », qui partage
   un même rendu 3D pastel. C'est la seule série d'illustrations du projet
   réellement cohérente entre elles, donc la seule utilisable en grille. */
.spec-card {
  display: block;
  height: 100%;
  border: 1px solid var(--jast-border);
  border-radius: var(--jast-radius);
  overflow: hidden;
  background: var(--bs-mode, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.spec-card:hover {
  border-color: var(--jast-navy);
  box-shadow: var(--jast-shadow);
  transform: translateY(-4px);
}
.spec-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--jast-lavender);
}
.spec-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.spec-card:hover .spec-card__media img { transform: scale(1.05); }
.spec-card__body { padding: 1.125rem 1.25rem 1.375rem; }

/* Carte illustrée */
.media-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--jast-radius);
  background: var(--jast-lavender);
  text-decoration: none;
  color: inherit;
}
.media-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.media-card:hover .media-card__img { transform: scale(1.05); }
.media-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 27, 86, .92) 0%, rgba(0, 27, 86, .45) 48%, rgba(0, 27, 86, 0) 78%);
}
.media-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.25rem 1.375rem;
  color: #fff;
}
.media-card__body .card-h { color: #fff; }
.media-card__body .card-p { color: rgba(255, 255, 255, .85); }


/* ==========================================================================
   8. ACCESSIBILITÉ & MOUVEMENT
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible,
.form-control:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--jast-red);
  outline-offset: 2px;
  border-radius: var(--jast-radius-sm);
}

/* Cibles tactiles ≥ 44 px. inline-flex aligne aussi les couples icône + texte,
   qui sont partout sur le site. Hors périmètre : .btn-sm, .btn-close et les
   bascules de navbar, qui ont leurs propres dimensions. */
.btn:not(.btn-sm):not(.btn-close):not(.navbar-toggler) {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
}

/* Les colonnes de liens du footer sont serrées (21 px de haut) : correct à la
   souris, trop juste au doigt. On ne les espace que sous 992 px, pour ne pas
   étirer inutilement le footer en desktop. */
@media (max-width: 991.98px) {
  footer .nav-link,
  footer .list-inline-item > a,
  footer p > a[href^="tel:"],
  footer p > a[href^="mailto:"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .u-card, main.lp .u-card,
  .trust-badge, main.lp .trust-badge,
  .sector, .media-card__img,
  .card-link i, main.lp .card-link i {
    transition: none !important;
  }
  .u-card:hover, main.lp .u-card:hover,
  .trust-badge:hover, main.lp .trust-badge:hover,
  .sector:hover { transform: none !important; }
  .media-card:hover .media-card__img { transform: none !important; }
  .convoy__rail { scroll-behavior: auto; }
  .veh__cta i { transition: none !important; }
  .veh__cta:hover i { transform: none !important; }
}

/* ==========================================================================
   8 bis. RATTRAPAGE DES 14 PAGES « .lp »
   Ces pages portent chacune un <style> en dur qui définit sa PROPRE palette
   (--lp-ink, --lp-muted, --lp-tint, --lp-border). Elle n'a jamais été prévue
   pour le mode sombre, d'où du texte bleu nuit sur fond noir à 1,11:1, et elle
   ignore la charte JAST en clair. On la rebranche ici sur les jetons de la
   charte : un seul bloc corrige les quatorze pages, sans toucher à leur code.
   `[data-bs-theme] .lp` (0,2,0) l'emporte sur `.lp` (0,1,0) du <style> local.
   ========================================================================== */

:root .lp,
[data-bs-theme="light"] .lp {
  --lp-ink:    var(--jast-ink);
  --lp-muted:  var(--jast-muted);   /* #6b7280 tombait à 4,23:1 sur blanc */
  --lp-tint:   var(--jast-lavender);
  --lp-border: var(--jast-border);
}
[data-bs-theme="dark"] .lp {
  --lp-ink:    #ffffff;
  --lp-muted:  #98a1ad;
  --lp-tint:   #282c31;
  --lp-border: rgba(255, 255, 255, .10);
  --lp-shadow: none;
}

/* Fil d'Ariane : le thème pose deux gris en dur, illisibles sur les deux
   fonds (3,60:1 en clair pour l'élément courant, 3,34:1 en sombre pour les
   liens). Présent sur toutes les pages sauf l'accueil. */
.breadcrumb-item > a { color: var(--bs-link-color); }
.breadcrumb-item > a:hover { color: var(--jast-red-ink); }
.breadcrumb-item.active { color: var(--jast-muted); }

/* Étiquettes de formulaire : #85878a sur le fond clair des cartes, 3,31:1. */
.form-label,
.form-check-label { color: var(--jast-body); }

/* Bouton rouge adouci : le libellé est posé sur le fond de la page, pas sur un
   aplat, donc il lui faut un rouge dense en clair et un rouge pâle en sombre. */
.btn-danger-soft { --bs-btn-color: #c00a1e; color: #c00a1e; }
[data-bs-theme="dark"] .btn-danger-soft { --bs-btn-color: #ff8a97; color: #ff8a97; }

/* Mention d'astreinte : l'ambre foncé ne passe pas sur une carte sombre. */
[data-bs-theme="dark"] .lp-status-warn,
[data-bs-theme="dark"] main.lp .lp-status-warn { color: #e8a33d; }

/* Utilitaires de couleur : le thème les livre calibrés pour du texte sur fond
   sombre. Sur fond clair, `.text-success` tombe à 2,45:1 (c'est le badge
   « Disponible maintenant » du hero, présent sur dix pages). */
:root .text-success, [data-bs-theme="light"] .text-success { color: #0b7a4b !important; }
:root .text-danger,  [data-bs-theme="light"] .text-danger  { color: #c00a1e !important; }
:root .text-warning, [data-bs-theme="light"] .text-warning { color: #6a3a02 !important; }
:root .text-info,    [data-bs-theme="light"] .text-info    { color: #0a3a52 !important; }
[data-bs-theme="dark"] .text-success { color: #57cf95 !important; }
[data-bs-theme="dark"] .text-danger  { color: #ff8a97 !important; }
[data-bs-theme="dark"] .text-warning { color: #e8a33d !important; }
[data-bs-theme="dark"] .text-info    { color: #7fc9e8 !important; }

/* Messages d'alerte : le thème éclaircit le texte au point de le faire passer
   sous le seuil (3,91:1 pour la réussite). Ils servent de retour de formulaire
   sur /contact, ils doivent se lire du premier coup. */
:root .alert-success, [data-bs-theme="light"] .alert-success { --bs-alert-color: #0b4a2f; color: #0b4a2f; }
:root .alert-danger,  [data-bs-theme="light"] .alert-danger  { --bs-alert-color: #8a0715; color: #8a0715; }
:root .alert-warning, [data-bs-theme="light"] .alert-warning { --bs-alert-color: #6a3a02; color: #6a3a02; }
:root .alert-info,    [data-bs-theme="light"] .alert-info    { --bs-alert-color: #0a3a52; color: #0a3a52; }
/* En sombre le fond de l'alerte s'assombrit aussi : le texte doit s'éclaircir,
   sinon on remplace un problème par son symétrique. */
[data-bs-theme="dark"] .alert-success { --bs-alert-color: #7ddba6; color: #7ddba6; }
[data-bs-theme="dark"] .alert-danger  { --bs-alert-color: #ff8a97; color: #ff8a97; }
[data-bs-theme="dark"] .alert-warning { --bs-alert-color: #e8a33d; color: #e8a33d; }
[data-bs-theme="dark"] .alert-info    { --bs-alert-color: #7fc9e8; color: #7fc9e8; }
.alert-success strong, .alert-danger strong,
.alert-warning strong, .alert-info strong { color: inherit; }

/* En mode sombre, --bs-primary est éclairci pour servir de couleur de LIEN.
   Les aplats qui l'utilisent comme fond deviennent alors bleu clair, et le
   texte blanc posé dessus tombe à 2,14:1. Les aplats gardent le bleu profond. */
[data-bs-theme="dark"] .bg-primary { background-color: #0a1330 !important; }


/* ==========================================================================
   9. TÉLÉPHONE
   Ce que la grille Bootstrap ne règle pas toute seule : sous 576 px, une
   colonne sur deux ne fait que 170 px, et les composants dessinés pour du
   desktop y deviennent illisibles.
   ========================================================================== */

@media (max-width: 575.98px) {

  /* Les mots longs cassent plutôt que de dépasser de leur carte. */
  .card-h, main.lp .card-h,
  .veh__name,
  .sector span { overflow-wrap: break-word; }

  /* Spécialités : la carte verticale devient horizontale, image à gauche.
     Quatre visuels pleine largeur empilés feraient 1 500 px de section. */
  .spec-card, main.lp .spec-card {
    display: grid;
    grid-template-columns: 38% 1fr;
    align-items: stretch;
  }
  .spec-card__media { aspect-ratio: auto; height: 100%; min-height: 7.5rem; }
  .spec-card__body  { padding: .875rem 1rem 1rem; }
  .spec-card:hover  { transform: none; }

  /* Secteurs : sur deux colonnes il reste 98 px pour le texte, il faut
     resserrer le contenant plutôt que passer sur une seule colonne, sinon la
     liste des onze secteurs devient un mur. */
  .sector { padding: .75rem .875rem; gap: .625rem; border-radius: .5rem; }
  .sector i { font-size: 1.125rem; }
  .sector span { font-size: .8125rem; }
  .sector:hover { transform: none; }

  /* Grille clients : une cellule par ligne en dessous de deux colonnes
     devient trop haute, on resserre. */
  .logo-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .logo-cell { min-height: 5.5rem; padding: 1rem .5rem; gap: .3rem; }
  .logo-cell__name { font-size: .875rem; }

  /* Le surlignage déborde de 0,15 em de chaque côté du texte : sur une colonne
     de 290 px, ces 4 px sortent du titre. On resserre le débord. */
  .mark-jast::before { left: -.07em; right: -.07em; }

  /* Faits du hero : les filets verticaux entre deux lignes qui se replient
     n'ont plus de sens, on repasse en liste à puces discrète. */
  .hero-facts { gap: .4rem 1rem; }
  .hero-facts li { font-size: .875rem; }

  /* Titres de section : la valeur haute de clamp() reste trop grosse pour
     une colonne de 360 px quand le titre contient un mot long. */
  .section-title, main.lp .section-title { overflow-wrap: break-word; }

  /* Parcours en étapes : le numéro et le titre se serrent. */
  .step__num { width: 2.5rem; height: 2.5rem; font-size: 1rem; }

  /* Fil d'Ariane : 18 px de haut, impossible à viser au doigt. On l'aère sans
     grossir le texte, sinon il prend le pas sur le titre de la page. */
  .breadcrumb-item > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .breadcrumb { row-gap: 0; }

  /* Le convoi et sa légende. */
  .convoy__head { gap: .625rem 1rem; }
  .pal-legend { font-size: .75rem; gap: .3rem .875rem; }
  .pal-legend__note { display: none; }   /* redit ce que le titre dit déjà */
}