/* =========================================================================
   GARAGE LAPLANTE - Sainte-Martine (Quebec)
   Feuille de style principale
   -------------------------------------------------------------------------
   Palette : noir dominant / jaune (actions et titres) / rouge (accent discret)
   Pour modifier les couleurs du site, changez uniquement les variables
   de la section « JETONS DE DESIGN » ci-dessous.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. JETONS DE DESIGN
   ------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --noir:        #0C0C0F;
  --noir-800:    #141419;
  --noir-700:    #1D1D24;
  --noir-600:    #2A2A33;

  --jaune:       #FFC80A;
  --jaune-clair: #FFD84D;
  --jaune-fonce: #E0AE00;
  /* Or foncé réservé au TEXTE sur fond clair (contraste suffisant) */
  --jaune-texte: #8A6800;

  --rouge:       #D6202B;
  --rouge-fonce: #A8151E;

  --blanc:       #FFFFFF;
  --gris-pale:   #F4F5F7;
  --gris-100:    #E7E8EC;
  --gris-300:    #C3C6CE;
  --gris-500:    #757985;
  --gris-700:    #4A4E59;

  /* Texte */
  --txt-sombre:  #14151A;
  --txt-moyen:   #4A4E59;
  --txt-clair:   rgba(255, 255, 255, .78);

  /* Typographie */
  --police-titre: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --police-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Mise en page */
  --largeur-max: 1200px;
  --rayon:       10px;
  --rayon-sm:    6px;
  --entete-h:    76px;

  /* Ombres */
  --ombre-sm: 0 1px 2px rgba(12, 12, 15, .06), 0 2px 8px rgba(12, 12, 15, .06);
  --ombre-md: 0 4px 12px rgba(12, 12, 15, .08), 0 12px 32px rgba(12, 12, 15, .10);
  --ombre-lg: 0 10px 40px rgba(12, 12, 15, .18);

  --transition: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* -------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.65;
  color: var(--txt-sombre);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .005em;
  margin: 0 0 .5em;
  text-transform: uppercase;
}

h1 { font-size: clamp(2.4rem, 6vw, 4.15rem); }
h2 { font-size: clamp(1.95rem, 4.2vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 3px;
  border-radius: 3px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--jaune);
  color: var(--noir);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 999;
}
.saut-contenu:focus { left: 8px; top: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------
   3. STRUCTURE ET TITRES DE SECTION
   ------------------------------------------------------------------------- */
.contenant {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: 22px;
}

.section { padding: clamp(60px, 8vw, 104px) 0; }
.section--pale  { background: var(--gris-pale); }
.section--noire { background: var(--noir); color: var(--blanc); }
.section--noire p { color: var(--txt-clair); }

.entete-section { max-width: 760px; margin-bottom: 46px; }
.entete-section--centre { margin-inline: auto; text-align: center; }

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--police-texte);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jaune-texte);
  margin-bottom: 14px;
}
.section--noire .surtitre,
.entete-page .surtitre,
.banniere .surtitre { color: var(--jaune); }
.surtitre::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--rouge);
  border-radius: 2px;
}
.entete-section--centre .surtitre::before { width: 20px; }

/* Sur fond clair : mot mis en valeur par un surlignage jaune (lisibilité
   maximale). Sur fond noir : le mot passe directement en jaune. */
.titre-souligne > span {
  background-image: linear-gradient(transparent 60%, rgba(255, 200, 10, .85) 60%);
  padding-inline: 2px;
}
.section--noire .titre-souligne > span,
.entete-page .titre-souligne > span {
  color: var(--jaune);
  background-image: none;
}

.intro {
  font-size: 1.08rem;
  color: var(--txt-moyen);
  max-width: 68ch;
}
.section--noire .intro { color: var(--txt-clair); }

/* -------------------------------------------------------------------------
   4. BOUTONS
   ------------------------------------------------------------------------- */
.btn {
  --btn-fond: var(--jaune);
  --btn-txt: var(--noir);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  min-height: 52px;
  border: 2px solid transparent;
  border-radius: var(--rayon-sm);
  background: var(--btn-fond);
  color: var(--btn-txt);
  font-family: var(--police-texte);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition),
              box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.btn:active { transform: translateY(0); }

.btn--jaune:hover { background: var(--jaune-clair); }

.btn--noir { --btn-fond: var(--noir); --btn-txt: var(--blanc); }
.btn--noir:hover { --btn-fond: var(--noir-700); }

.btn--contour-blanc {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(255, 255, 255, .45);
}
.btn--contour-blanc:hover { background: rgba(255, 255, 255, .1); border-color: var(--blanc); }

.btn--contour-noir {
  background: transparent;
  color: var(--noir);
  border-color: rgba(12, 12, 15, .25);
}
.btn--contour-noir:hover { background: rgba(12, 12, 15, .06); border-color: var(--noir); }

.btn--large { width: 100%; }
.btn--petit { padding: 11px 18px; min-height: 44px; font-size: .88rem; }

.groupe-btn { display: flex; flex-wrap: wrap; gap: 14px; }

/* Lien fleche */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .93rem;
  text-decoration: none;
  color: var(--txt-sombre);
  border-bottom: 2px solid var(--jaune);
  padding-bottom: 2px;
  transition: gap var(--transition), color var(--transition);
}
.lien-fleche svg { width: 17px; height: 17px; }
.lien-fleche:hover { gap: 13px; color: var(--jaune-texte); }
.section--noire .lien-fleche { color: var(--blanc); }
.section--noire .lien-fleche:hover { color: var(--jaune); }

/* -------------------------------------------------------------------------
   5. MARQUEURS D'INFORMATION MANQUANTE
   ------------------------------------------------------------------------- */

/* Soulignement rouge pointillé sur une donnée encore à confirmer */
.a-completer {
  border-bottom: 2px dotted var(--rouge);
  cursor: help;
  white-space: nowrap;
}
.etiquette-a-completer {
  display: inline-block;
  font-family: var(--police-texte);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rouge);
  background: rgba(214, 32, 43, .1);
  border: 1px dashed rgba(214, 32, 43, .5);
  border-radius: 999px;
  padding: 3px 10px;
  vertical-align: middle;
  white-space: nowrap;
}
.section--noire .etiquette-a-completer,
.carte-vedette .etiquette-a-completer,
.pied .etiquette-a-completer {
  color: #FF8A8A;
  background: rgba(214, 32, 43, .18);
  border-color: rgba(255, 138, 138, .55);
}

/* -------------------------------------------------------------------------
   6. EN-TETE ET NAVIGATION
   ------------------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--noir);
  border-bottom: 3px solid var(--rouge);
  transition: box-shadow var(--transition);
}
.entete.est-collee { box-shadow: 0 6px 24px rgba(0, 0, 0, .4); }

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--entete-h);
}

/* Signature textuelle temporaire - a remplacer par le logo officiel fourni */
.logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.logo__img { height: 46px; width: auto; }
.logo__texte {
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanc);
  font-style: italic;
  line-height: 1;
}
.logo__mention {
  display: block;
  font-family: var(--police-texte);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--jaune);
  font-style: normal;
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 10px 13px;
  font-size: .92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  border-radius: var(--rayon-sm);
  transition: color var(--transition), background-color var(--transition);
}
.nav a:hover { color: var(--jaune); background: rgba(255, 255, 255, .06); }
.nav a[aria-current="page"] { color: var(--jaune); }

.entete__actions { display: flex; align-items: center; gap: 12px; }

.tel-entete {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blanc);
  text-decoration: none;
  font-weight: 700;
  font-size: .98rem;
  white-space: nowrap;
}
.tel-entete svg { width: 20px; height: 20px; color: var(--jaune); }
.tel-entete:hover { color: var(--jaune); }

.burger {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--rayon-sm);
  color: var(--blanc);
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.burger svg { width: 24px; height: 24px; }
.burger[aria-expanded="true"] .burger__ouvrir { display: none; }
.burger .burger__fermer { display: none; }
.burger[aria-expanded="true"] .burger__fermer { display: block; }

.menu-mobile {
  display: none;
  background: var(--noir-800);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 12px 22px 24px;
}
.menu-mobile.est-ouvert { display: block; }
.menu-mobile a {
  display: block;
  padding: 14px 4px;
  color: var(--blanc);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.menu-mobile a:hover, .menu-mobile a[aria-current="page"] { color: var(--jaune); }
.menu-mobile .groupe-btn { margin-top: 20px; }

/* Bascule de langue dans la barre de navigation : encadrée, pour se lire
   comme un bouton discret et ne pas se confondre avec une page du site. */
.nav__langue {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  padding: 5px 13px !important;
  font-size: .82rem !important;
  letter-spacing: .04em;
}
.nav__langue::after { display: none !important; }
.nav__langue:hover { border-color: var(--jaune); }
.menu-mobile .btn { flex: 1 1 160px; }

/* -------------------------------------------------------------------------
   7. BANNIERE D'ACCUEIL
   ------------------------------------------------------------------------- */
.banniere {
  position: relative;
  background: var(--noir);
  overflow: hidden;
}
.banniere__media { position: absolute; inset: 0; }
.banniere__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.banniere__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 10, 13, .95) 0%, rgba(10, 10, 13, .82) 38%, rgba(10, 10, 13, .38) 68%, rgba(10, 10, 13, .5) 100%),
    linear-gradient(180deg, rgba(10, 10, 13, .55) 0%, rgba(10, 10, 13, 0) 30%, rgba(10, 10, 13, .75) 100%);
}
.banniere__contenu {
  position: relative;
  padding: clamp(72px, 11vw, 132px) 0 clamp(96px, 12vw, 148px);
  max-width: 720px;
  color: var(--blanc);
}
.banniere__etiquette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-left: 3px solid var(--rouge);
  border-radius: 4px;
  padding: 7px 14px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 22px;
  backdrop-filter: blur(4px);
}
.banniere h1 { margin-bottom: 18px; text-shadow: 0 2px 24px rgba(0, 0, 0, .5); }
.banniere h1 span { color: var(--jaune); }
.banniere__sous-titre {
  font-size: clamp(1.06rem, 2.1vw, 1.3rem);
  color: rgba(255, 255, 255, .9);
  max-width: 34ch;
  margin-bottom: 30px;
}
.banniere__note {
  margin-top: 24px;
  font-size: .88rem;
  color: rgba(255, 255, 255, .68);
  display: flex;
  align-items: center;
  gap: 9px;
}
.banniere__note svg { width: 17px; height: 17px; color: var(--jaune); flex: none; }

/* -------------------------------------------------------------------------
   8. TROIS AVANTAGES (sous la banniere)
   ------------------------------------------------------------------------- */
.avantages { background: var(--noir-800); border-top: 1px solid rgba(255, 255, 255, .07); }
.avantages__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .08);
}
.avantage {
  background: var(--noir-800);
  padding: 34px 28px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.avantage__icone {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--jaune);
  color: var(--noir);
  border-radius: var(--rayon-sm);
}
.avantage__icone svg { width: 24px; height: 24px; }
.avantage h3 { color: var(--blanc); font-size: 1.16rem; margin-bottom: 5px; }
.avantage p { color: var(--txt-clair); font-size: .92rem; line-height: 1.55; }

/* -------------------------------------------------------------------------
   9. CARTES DE SERVICES
   ------------------------------------------------------------------------- */
.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}
.carte-service {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--gris-100);
  border-radius: var(--rayon);
  padding: 28px 26px 26px;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-service::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--jaune);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.carte-service:hover { transform: translateY(-4px); box-shadow: var(--ombre-md); border-color: var(--gris-300); }
.carte-service:hover::before { transform: scaleX(1); }
.carte-service__icone {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--noir);
  color: var(--jaune);
  border-radius: var(--rayon-sm);
  margin-bottom: 18px;
}
.carte-service__icone svg { width: 27px; height: 27px; }
.carte-service h3 { font-size: 1.28rem; margin-bottom: 8px; }
.carte-service p { font-size: .93rem; color: var(--txt-moyen); line-height: 1.6; }

.section--pale .carte-service { background: var(--blanc); }

/* -------------------------------------------------------------------------
   9 bis. MISE EN VEDETTE : PNEUS ET CLIMATISATION
   Deux blocs au-dessus de la grille des services, plus un bandeau dont le
   message suit la saison (voir « bandeauSaison » dans assets/js/main.js).
   ------------------------------------------------------------------------- */

/* --- Bandeau saisonnier --- */
.bandeau-saison {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  background: var(--noir);
  color: var(--blanc);
  border-left: 5px solid var(--jaune);
  border-radius: var(--rayon);
  padding: 22px 26px;
  margin-bottom: 26px;
  box-shadow: var(--ombre-sm);
}
.bandeau-saison__icone {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: var(--jaune);
  color: var(--noir);
  border-radius: 50%;
}
.bandeau-saison__icone svg { width: 25px; height: 25px; }
.bandeau-saison__texte { flex: 1 1 300px; }
.bandeau-saison strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.3rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 3px;
}
.bandeau-saison p { font-size: .95rem; color: var(--txt-clair); margin: 0; }

/* --- Duo de services en vedette --- */
.duo-vedette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  margin-bottom: 34px;
}
.carte-vedette {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--noir);
  border-radius: var(--rayon);
  padding: 30px 28px 28px;
  overflow: hidden;
  box-shadow: var(--ombre-md);
}
/* Filet jaune permanent : c'est ce qui distingue une carte en vedette des
   cartes ordinaires, où le filet n'apparaît qu'au survol. */
.carte-vedette::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--jaune);
}
.carte-vedette__haut {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.carte-vedette__icone {
  width: 58px; height: 58px; flex: none;
  display: grid; place-items: center;
  background: var(--jaune);
  color: var(--noir);
  border-radius: var(--rayon-sm);
}
.carte-vedette__icone svg { width: 31px; height: 31px; }
.carte-vedette h3 {
  font-size: 1.5rem;
  color: var(--blanc);
  margin: 0 0 6px;
}
.carte-vedette__marque {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jaune);
  border: 1px solid rgba(255, 200, 10, .45);
  border-radius: 999px;
  padding: 3px 11px;
}
.carte-vedette > p { font-size: .95rem; color: var(--txt-clair); line-height: 1.65; }
.carte-vedette .liste-cochee { margin: 20px 0 0; }
.carte-vedette .liste-cochee li { color: var(--txt-clair); font-size: .93rem; }
/* Pousse le bouton en bas : les deux cartes s'alignent même si l'une a un
   texte plus long que l'autre. */
.carte-vedette .groupe-btn { margin-top: auto; padding-top: 24px; }
.carte-vedette .etiquette-a-completer { margin-top: 14px; }

/* Intertitre qui sépare les deux vedettes du reste de la grille. */
.titre-reste {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-500);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.titre-reste::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gris-100);
}

.note-services {
  margin-top: 34px;
  padding: 18px 22px;
  background: var(--blanc);
  border-left: 4px solid var(--rouge);
  border-radius: var(--rayon-sm);
  box-shadow: var(--ombre-sm);
  font-size: .92rem;
  color: var(--txt-moyen);
}

/* -------------------------------------------------------------------------
   10. SECTIONS EN DEUX COLONNES (essence, a propos)
   ------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.duo--inverse .duo__media { order: 2; }

/* z-index:1 crée un contexte d'empilement : l'équerre jaune décorative
   (::after) reste visible derrière l'image sans passer sous la section. */
.duo__media { position: relative; z-index: 1; }
.duo__media img {
  width: 100%;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-lg);
}
.duo__media::after {
  content: "";
  position: absolute;
  left: -14px; bottom: -14px;
  width: 108px; height: 108px;
  border-left: 5px solid var(--jaune);
  border-bottom: 5px solid var(--jaune);
  border-radius: 0 0 0 var(--rayon);
  z-index: -1;
}
.duo--inverse .duo__media::after { left: auto; right: -14px; border-left: 0; border-right: 5px solid var(--jaune); border-radius: 0 0 var(--rayon) 0; }

/* -------------------------------------------------------------------------
   10 bis. SOUS-SECTION « HOMMAGE À LA FAMILLE LAPLANTE »
   Un encart plus calme que le reste de la page : fond pâle, texte centré
   sur une largeur confortable à lire, puis les documents d'archives
   présentés l'un au-dessus de l'autre, chacun sur un carton blanc.
   ------------------------------------------------------------------------- */
.hommage {
  margin-top: 70px;
  padding: 52px 40px 46px;
  background: var(--gris-pale);
  border-top: 4px solid var(--jaune);
  border-radius: var(--rayon);
}
.hommage__entete { text-align: center; margin-bottom: 28px; }
.hommage__entete .surtitre::before { width: 20px; }
.hommage__entete h3 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-top: 6px; }

/* Le texte de l'hommage est tout en italique : c'est une voix à part dans
   la page, plus personnelle que le reste du contenu. La formule qui résume
   l'engagement du garage est en gras — donc en gras italique. */
.hommage__texte {
  max-width: 62ch;
  margin: 0 auto 44px;
  font-style: italic;
}
.hommage__texte p { margin-bottom: 16px; }
.hommage__texte p:last-child { margin-bottom: 0; }
.hommage__texte strong { font-weight: 700; color: var(--txt-sombre); }

/* Les deux documents : carton blanc, l'un sous l'autre, centrés. */
.hommage__figure {
  max-width: 900px;
  margin: 0 auto 26px;
  background: var(--blanc);
  border: 1px solid var(--gris-100);
  border-radius: var(--rayon);
  padding: 18px;
  box-shadow: var(--ombre-sm);
}
.hommage__figure:last-child { margin-bottom: 0; }
.hommage__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon-sm);
}
.hommage__figure figcaption {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--gris-100);
  font-size: .86rem;
  line-height: 1.6;
  color: var(--gris-700);
  text-align: center;
}

.pastille-media {
  position: absolute;
  right: 18px; bottom: 18px;
  background: var(--noir);
  color: var(--blanc);
  border-left: 3px solid var(--jaune);
  border-radius: var(--rayon-sm);
  padding: 12px 18px;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: var(--ombre-md);
  max-width: 74%;
}
.pastille-media strong { display: block; color: var(--jaune); font-size: .95rem; }

.liste-cochee { list-style: none; display: grid; gap: 13px; margin: 26px 0; }
.liste-cochee li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; }
.liste-cochee svg {
  width: 22px; height: 22px; flex: none;
  color: var(--noir);
  background: var(--jaune);
  border-radius: 50%;
  padding: 4px;
  margin-top: 2px;
}
.section--noire .liste-cochee li { color: var(--txt-clair); }

/* -------------------------------------------------------------------------
   11. POURQUOI NOUS CHOISIR
   ------------------------------------------------------------------------- */
.grille-atouts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 18px;
  list-style: none;
}
.atout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--noir-800);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rayon);
  padding: 22px 20px;
  transition: border-color var(--transition), transform var(--transition), background-color var(--transition);
}
.atout:hover { border-color: rgba(255, 200, 10, .5); transform: translateY(-3px); background: var(--noir-700); }
.atout svg { width: 26px; height: 26px; color: var(--jaune); flex: none; }
.atout h3 { font-size: 1.08rem; color: var(--blanc); margin-bottom: 3px; }
.atout p { font-size: .88rem; color: var(--txt-clair); line-height: 1.5; margin: 0; }

/* -------------------------------------------------------------------------
   12. AVIS CLIENTS
   ------------------------------------------------------------------------- */
.avis-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  background: var(--blanc);
  border: 1px solid var(--gris-100);
  border-radius: var(--rayon);
  padding: 28px 30px;
  box-shadow: var(--ombre-sm);
  margin-bottom: 28px;
}
.avis-note {
  font-family: var(--police-titre);
  font-size: 3.4rem;
  line-height: 1;
  font-weight: 700;
  color: var(--noir);
}
.avis-note small { font-size: 1.2rem; color: var(--gris-500); }
/* Barre d'étoiles : la couche « plein » est rognée en largeur pour rendre
   la note exacte (4,4 / 5 = 88 %). Voir index.html, section « Avis ». */
.avis-etoiles { position: relative; display: inline-block; line-height: 0; }
.avis-etoiles__fond,
.avis-etoiles__plein { display: flex; gap: 3px; }
.avis-etoiles__fond { color: var(--gris-300); }
.avis-etoiles__plein {
  position: absolute;
  top: 0; left: 0;
  color: var(--jaune-fonce);
  overflow: hidden;
}
.avis-etoiles svg { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }

/* Logo d'un réseau partenaire (Uni-Pro). Ne jamais déformer : seule la
   hauteur est fixée, la largeur suit. */
.logo-partenaire { display: block; height: auto; width: 190px; max-width: 100%; }
.avis-resume__texte { flex: 1 1 240px; }
.avis-resume__texte p { font-size: .9rem; color: var(--txt-moyen); margin: 6px 0 0; }

.grille-avis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  list-style: none;
  margin-bottom: 30px;
}
.carte-avis {
  background: var(--blanc);
  border: 1px dashed var(--gris-300);
  border-radius: var(--rayon);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
}
.carte-avis__guillemet { color: var(--jaune); font-family: var(--police-titre); font-size: 2.6rem; line-height: .6; }
.carte-avis p { font-size: .94rem; color: var(--gris-500); font-style: italic; }
.carte-avis footer { margin-top: auto; font-size: .84rem; color: var(--gris-500); font-weight: 600; }

/* -------------------------------------------------------------------------
   13. FORMULAIRE
   ------------------------------------------------------------------------- */
.carte-formulaire {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--ombre-lg);
  border-top: 5px solid var(--jaune);
  color: var(--txt-sombre);
}
/* La carte blanche conserve un texte foncé même placée dans une section
   noire (sinon les paragraphes héritent du blanc et deviennent illisibles). */
.section--noire .carte-formulaire p { color: inherit; }
.formulaire { display: grid; gap: 20px; }
.formulaire__ligne { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.formulaire__ligne--trois { grid-template-columns: repeat(3, 1fr); }

.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label {
  font-size: .87rem;
  font-weight: 600;
  color: var(--txt-sombre);
}
.champ label .requis { color: var(--rouge); }
.champ .aide { font-size: .8rem; color: var(--gris-500); font-weight: 400; }

.champ input,
.champ select,
.champ textarea {
  font-family: var(--police-texte);
  font-size: .97rem;
  color: var(--txt-sombre);
  background: var(--blanc);
  border: 1.5px solid var(--gris-300);
  border-radius: var(--rayon-sm);
  padding: 13px 14px;
  width: 100%;
  min-height: 50px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.champ select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4E59' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 42px; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--jaune-fonce);
  box-shadow: 0 0 0 3px rgba(255, 200, 10, .3);
}
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] { border-color: var(--rouge); }
.champ .erreur { font-size: .82rem; color: var(--rouge); font-weight: 600; display: none; }
.champ .erreur.est-visible { display: block; }

.groupe-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.groupe-radio label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--rayon-sm);
  padding: 11px 16px;
  cursor: pointer;
  font-weight: 500;
  font-size: .93rem;
  transition: border-color var(--transition), background-color var(--transition);
}
.groupe-radio label:hover { border-color: var(--gris-500); }
.groupe-radio input { accent-color: var(--noir); width: 18px; height: 18px; }
.groupe-radio input:checked + span { font-weight: 700; }
.groupe-radio label:has(input:checked) { border-color: var(--noir); background: var(--gris-pale); }

.consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--gris-pale);
  border-radius: var(--rayon-sm);
  padding: 16px 18px;
  font-size: .89rem;
  line-height: 1.55;
}
.consentement input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--noir); }

.avis-formulaire {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--gris-100);
  border-left: 4px solid var(--rouge);
  background: #FFF9F9;
  border-radius: var(--rayon-sm);
  padding: 15px 18px;
  font-size: .88rem;
  color: var(--txt-moyen);
}
.avis-formulaire svg { width: 20px; height: 20px; color: var(--rouge); flex: none; margin-top: 2px; }

.message-formulaire {
  display: none;
  gap: 12px;
  align-items: flex-start;
  border-radius: var(--rayon-sm);
  padding: 16px 18px;
  font-size: .93rem;
  font-weight: 500;
}
.message-formulaire.est-visible { display: flex; }
.message-formulaire--succes { background: #EDF9F0; border: 1px solid #A9DDB8; color: #1E6C36; }
.message-formulaire--erreur { background: #FDF0F1; border: 1px solid #F0B7BB; color: #9C1720; }
.message-formulaire svg { width: 21px; height: 21px; flex: none; margin-top: 1px; }

.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* -------------------------------------------------------------------------
   14. CONTACT ET CARTE
   ------------------------------------------------------------------------- */
.grille-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 4vw, 52px); align-items: start; }

.liste-coordonnees { list-style: none; display: grid; gap: 22px; margin-bottom: 30px; }
.liste-coordonnees li { display: flex; gap: 16px; align-items: flex-start; }
.liste-coordonnees .ico {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--jaune);
  color: var(--noir);
  border-radius: var(--rayon-sm);
}
.liste-coordonnees .ico svg { width: 22px; height: 22px; }
.liste-coordonnees h3 { font-size: 1rem; margin-bottom: 3px; }
.liste-coordonnees a { text-decoration: none; font-weight: 600; }
.liste-coordonnees a:hover { color: var(--jaune-texte); }
.section--noire .liste-coordonnees a:hover { color: var(--jaune); }

.horaire { list-style: none; display: grid; gap: 2px; }
.horaire li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--gris-100);
  font-size: .94rem;
}
.section--noire .horaire li { border-color: rgba(255, 255, 255, .1); }
.horaire li span:first-child { font-weight: 600; }
.horaire li span:last-child { color: var(--txt-moyen); }
.section--noire .horaire li span:last-child { color: var(--txt-clair); }

.carte-geo {
  position: relative;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--noir-700);
  min-height: 420px;
  box-shadow: var(--ombre-md);
}
.carte-geo iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.carte-geo__invite {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  padding: 32px;
  background: linear-gradient(160deg, var(--noir-700), var(--noir));
  color: var(--blanc);
}
.carte-geo__invite svg { width: 40px; height: 40px; color: var(--jaune); }
.carte-geo__invite p { font-size: .9rem; color: var(--txt-clair); max-width: 42ch; }

.encadre-social { display: flex; gap: 12px; flex-wrap: wrap; }
.bouton-social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--gris-300);
  border-radius: var(--rayon-sm);
  padding: 11px 17px;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}
.bouton-social svg { width: 19px; height: 19px; }
.bouton-social:hover { border-color: var(--noir); background: var(--noir); color: var(--blanc); }
.section--noire .bouton-social { border-color: rgba(255, 255, 255, .25); color: var(--blanc); }
.section--noire .bouton-social:hover { background: var(--jaune); color: var(--noir); border-color: var(--jaune); }

/* Bande d'appel a l'action */
.bande-cta {
  background: var(--jaune);
  color: var(--noir);
  padding: clamp(38px, 5vw, 60px) 0;
}
.bande-cta__contenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.bande-cta h2 { margin-bottom: 6px; }
.bande-cta p { font-weight: 500; max-width: 52ch; }

/* -------------------------------------------------------------------------
   15. PIED DE PAGE
   ------------------------------------------------------------------------- */
.pied { background: var(--noir); color: var(--txt-clair); border-top: 3px solid var(--rouge); }
.pied__grille {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 60px 0 46px;
}
.pied h3 {
  color: var(--blanc);
  font-size: 1.05rem;
  letter-spacing: .06em;
  margin-bottom: 18px;
}
.pied ul { list-style: none; display: grid; gap: 10px; }
.pied a { color: var(--txt-clair); text-decoration: none; font-size: .92rem; }
.pied a:hover { color: var(--jaune); }
.pied p { font-size: .92rem; }
.pied .logo { margin-bottom: 18px; }

/* --- Bande des programmes et partenaires ---------------------------------
   Quatre logos cliquables, sans texte. Leurs formats sont très différents
   (Uni-Pro fait 4,5 fois plus large que haut, Stox à peine 1,9). Pour qu'ils
   paraissent de la même taille, ils ne sont pas alignés sur une largeur
   commune mais centrés dans une case de hauteur fixe, contenus par
   « object-fit: contain ». Chacun garde donc ses proportions, sans jamais
   être étiré. */
.pied__programmes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 20px;
  margin-top: 46px;
  padding: 34px 0 36px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.pied__programmes li { display: flex; justify-content: center; }
/* La case du logo EST le lien : la zone cliquable épouse donc exactement le
   logo, sans déborder sur le vide autour. */
.programme__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  max-width: 100%;
}
/* La hauteur est fixée en dur, et non par « max-height ». Deux logos sont en
   SVG : dans une case qui s'ajuste à son contenu, un SVG n'a pas de taille
   intrinsèque fiable et disparaît si on ne lui en impose pas une. Avec une
   hauteur définie, la largeur se déduit du rapport d'origine.
   Équilibre optique : à hauteur égale, une pastille pleine (OK Pneus) pèse
   beaucoup plus lourd à l'œil qu'un logotype ajouré, et un logo empilé
   (Stox) paraît plus petit. Chaque hauteur est donc réglée séparément. */
.programme__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: opacity var(--transition);
}
.programme--unipro  .programme__logo img { height: 44px; }
.programme--stox    .programme__logo img { height: 58px; }
.programme--okpneus .programme__logo img { height: 38px; }
.programme--nexpart .programme__logo img { height: 44px; }

/* Le logo s'éclaircit légèrement au survol : le lien réagit sans que la
   charte du partenaire soit altérée. */
.programme__logo:hover img { opacity: .8; }
.programme__logo:focus-visible {
  outline: 2px solid var(--jaune);
  outline-offset: 8px;
  border-radius: var(--rayon-sm);
}

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 22px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  font-size: .85rem;
}
.pied__liens-legaux { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
/* Crédit du concepteur : même graisse que les liens légaux, mais en retrait,
   pour qu'il se lise sans concurrencer les mentions obligatoires. */
.pied__credit { color: rgba(255, 255, 255, .55); }
.pied__credit a { color: rgba(255, 255, 255, .78); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.pied__credit a:hover { color: var(--jaune); border-bottom-color: var(--jaune); }
.pied__liens-legaux button {
  background: none; border: 0; padding: 0;
  color: var(--txt-clair); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.pied__liens-legaux button:hover { color: var(--jaune); }

.icones-sociales { display: flex; gap: 10px; }
.icones-sociales a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--rayon-sm);
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.icones-sociales svg { width: 20px; height: 20px; }
.icones-sociales a:hover { background: var(--jaune); color: var(--noir); border-color: var(--jaune); }

/* -------------------------------------------------------------------------
   16. BARRE MOBILE FIXE
   ------------------------------------------------------------------------- */
.barre-mobile {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--noir);
  border-top: 2px solid var(--jaune);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  gap: 9px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
.barre-mobile .btn { flex: 1; padding: 12px 10px; min-height: 50px; font-size: .9rem; }

/* -------------------------------------------------------------------------
   17. PAGES DE CONTENU (legal)
   ------------------------------------------------------------------------- */
.entete-page {
  background: var(--noir);
  color: var(--blanc);
  padding: clamp(52px, 7vw, 84px) 0;
  border-bottom: 3px solid var(--jaune);
}
.entete-page h1 { margin-bottom: 12px; }
.entete-page p { color: var(--txt-clair); max-width: 62ch; }
.fil-ariane { font-size: .84rem; color: rgba(255, 255, 255, .6); margin-bottom: 16px; }
.fil-ariane a { color: var(--jaune); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }

.texte-legal { max-width: 78ch; }
.texte-legal h2 { font-size: 1.6rem; margin-top: 42px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h3 { font-size: 1.15rem; margin-top: 26px; }
.texte-legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 8px; margin-bottom: 18px; }
.texte-legal table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92rem; }
.texte-legal th, .texte-legal td { text-align: left; padding: 12px 14px; border: 1px solid var(--gris-100); vertical-align: top; }
.texte-legal th { background: var(--gris-pale); font-weight: 700; }
.tableau-defilant { overflow-x: auto; }

/* -------------------------------------------------------------------------
   18. ANIMATIONS AU DEFILEMENT
   ------------------------------------------------------------------------- */
.anim {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
}
.anim.est-visible { opacity: 1; transform: none; }
.anim--d1 { transition-delay: .08s; }
.anim--d2 { transition-delay: .16s; }
.anim--d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* -------------------------------------------------------------------------
   19. ADAPTATION AUX ECRANS
   ------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .pied__grille { grid-template-columns: 1fr 1fr; gap: 34px; }
  .pied__programmes { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .grille-contact { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .nav, .entete__actions .tel-entete { display: none; }
  .burger { display: inline-flex; }
  .avantages__grille { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .duo--inverse .duo__media { order: 0; }
  .duo__media::after { display: none; }
  .barre-mobile { display: flex; }
  body { padding-bottom: 74px; }
}

@media (max-width: 700px) {
  .hommage { margin-top: 46px; padding: 34px 20px 30px; }
  .hommage__figure { padding: 12px; }
  .bandeau-saison { padding: 20px; }
  .bandeau-saison .btn { width: 100%; justify-content: center; }
  .carte-vedette { padding: 26px 22px 24px; }

  body { font-size: 16px; }
  .formulaire__ligne,
  .formulaire__ligne--trois { grid-template-columns: 1fr; }
  .banniere__contenu { padding-block: 62px 78px; }
  .avis-resume { padding: 22px; }
  .pied__grille { grid-template-columns: 1fr; }
  .pied__programmes { margin-top: 36px; padding: 28px 0 32px; }
  .bande-cta__contenu { flex-direction: column; align-items: flex-start; }
  .groupe-btn .btn { flex: 1 1 100%; }
}