/* ==========================================================================
   Transport Lacote — Feuille de style « premium »
   Typographie : Inter (titres et texte) — palette marine & ambre
   Polices auto-hébergées (conformité RGPD : aucune requête vers Google)
   ========================================================================== */

/* Inter — police variable, sous-ensembles latin + latin étendu (œ, Œ…) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --encre: #081625;
  --marine: #0d2137;
  --marine-2: #123049;
  --marine-3: #1a3e5c;
  --ambre: #f57411;
  --ambre-vif: #f57411;
  --ambre-fonce: #d9620a;
  --ambre-texte: #be5708;   /* #f57411 foncé : petit texte orange lisible sur blanc */ /* contraste ≥ 4,5:1 sur fond blanc (RGAA/WCAG AA) */
  --degrade-ambre: linear-gradient(120deg, #f57411, #f57411);
  --fond: #f6f8fb;
  --carte: #ffffff;
  --trait: #e4eaf2;
  --texte: #46566a;
  --titre: #0e2033;
  --rayon: 16px;
  --rayon-s: 10px;
  --ombre-douce: 0 1px 2px rgba(8, 22, 37, 0.05), 0 8px 24px -12px rgba(8, 22, 37, 0.14);
  --ombre-forte: 0 2px 4px rgba(8, 22, 37, 0.06), 0 22px 44px -18px rgba(8, 22, 37, 0.28);
  --police-titres: "Inter", "Noto Sans", Arial, sans-serif;
  --police-texte: "Inter", "Noto Sans", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  font-family: var(--police-texte);
  color: var(--texte);
  line-height: 1.7;
  background: var(--carte);
  font-size: 1.03rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

::selection { background: var(--ambre); color: var(--encre); }

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

.conteneur {
  width: min(1440px, 92%);
  margin-inline: auto;
}

/* Lien d'évitement (accessibilité clavier) */

.acces-rapide {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--encre);
  color: #fff;
  font-weight: 700;
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}

.acces-rapide:focus { left: 0; }

h1, h2, h3 {
  font-family: var(--police-titres);
  color: var(--titre);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Animations d'entrée (CSS pur, aucun JavaScript)
   -------------------------------------------------------------------------- */

@keyframes montee {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

.heros-grille > div:first-child { animation: montee 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.heros-panneau { animation: montee 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.18s backwards; }
.carte-bref { animation: montee 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.36s backwards; }
.entete-page h1, .entete-page p { animation: montee 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.entete-page p { animation-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   En-tête / navigation
   -------------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 22, 37, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px -14px rgba(8, 22, 37, 0.45);
}

.entete::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--degrade-ambre);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: #fff;
}

.logo svg { flex-shrink: 0; }

.logo-texte { line-height: 1.2; }

.logo-texte strong {
  display: block;
  font-family: var(--police-titres);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.logo-texte span {
  font-size: 0.68rem;
  color: var(--ambre-vif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-principale ul {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  list-style: none;
}

.nav-principale a {
  color: rgba(226, 236, 246, 0.85);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.13s;
}

.nav-principale a:not(.btn-tel)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--degrade-ambre);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-principale a:hover,
.nav-principale a[aria-current="page"] { color: #fff; }

.nav-principale a:hover::after,
.nav-principale a[aria-current="page"]::after { transform: scaleX(1); }

.btn-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--degrade-ambre);
  color: var(--encre) !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(245, 116, 17, 0.65);
  transition: transform 0.14s, box-shadow 0.14s;
}

.btn-tel:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(245, 116, 17, 0.75);
}

/* Menu mobile 100 % CSS : case à cocher masquée + étiquette « burger » */

.menu-case {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.bouton-menu {
  display: none;
  cursor: pointer;
  padding: 0.4rem;
}

.bouton-menu span {
  display: block;
  width: 26px;
  height: 2.5px;
  background: #fff;
  margin: 5.5px 0;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.menu-case:checked ~ .bouton-menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-case:checked ~ .bouton-menu span:nth-child(2) { opacity: 0; }
.menu-case:checked ~ .bouton-menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.menu-case:focus-visible ~ .bouton-menu {
  outline: 3px solid var(--ambre);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Héros
   -------------------------------------------------------------------------- */

.heros {
  position: relative;
  color: #fff;
  padding: 6.5rem 0 9.5rem;
  background: radial-gradient(1100px 520px at 85% -10%, rgba(245, 116, 17, 0.22), transparent 60%),
              radial-gradient(900px 600px at -10% 110%, rgba(38, 99, 148, 0.35), transparent 55%),
              linear-gradient(160deg, var(--encre) 20%, var(--marine) 55%, var(--marine-2));
  overflow: hidden;
}

.heros::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(720px 480px at 30% 40%, rgba(0,0,0,0.85), transparent 75%);
  -webkit-mask-image: radial-gradient(720px 480px at 30% 40%, rgba(0,0,0,0.85), transparent 75%);
}

.heros .conteneur { position: relative; }

.heros-grille {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(245, 116, 17, 0.14);
  border: 1px solid rgba(245, 116, 17, 0.4);
  color: var(--ambre-vif);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.heros h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  font-weight: 800;
  margin-bottom: 1.3rem;
}

.heros h1 em {
  font-style: normal;
  background: var(--degrade-ambre);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.heros p.accroche {
  font-size: 1.16rem;
  color: rgba(214, 228, 240, 0.92);
  margin-bottom: 2.2rem;
  max-width: 33rem;
  font-weight: 400;
}

.heros-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* « Ils nous font confiance » + lien vers les avis Google */
.bandeau-confiance {
  padding: 4.5rem 0 3.5rem;
  text-align: center;
  border-bottom: 1px solid var(--trait);
}

/* Grand titre centré + « Une liste non exhaustive », comme sur le modèle JBL Conseil */
.confiance-titre {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  color: var(--titre);
  margin-bottom: 0.6rem;
}

.confiance-sous-titre {
  color: var(--texte);
  margin-bottom: 3rem;
}

.confiance-logos {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5rem 3rem;
  margin: 0 0 3rem;
  padding: 0;
}

/* Logos des clients : hauteurs ajustées à l'œil (un logo carré doit être plus haut
   qu'un logo en longueur pour paraître de même taille) */
.confiance-logos img { display: block; width: auto; height: 62px; }
.confiance-logos .logo-lapeyre { height: 58px; }
.confiance-logos .logo-but { height: 86px; }
.confiance-logos .logo-amazon { height: 50px; }

.avis-google {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: #fff;
  color: var(--titre);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px -10px rgba(14, 32, 51, 0.3);
}

.avis-google:hover { border-color: var(--ambre); }

.avis-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #4285f4;
  color: #4285f4;
  font-weight: 800;
  font-family: Arial, sans-serif;
}

/* « Pourquoi nous choisir ? » : icône dans un carré arrondi, titre, texte, centrés */
.section-pourquoi { text-align: center; }
.section-pourquoi h2 { margin-bottom: 0.8rem; }

.pourquoi-sous-titre {
  max-width: 44rem;
  margin: 0 auto 3rem;
}

.pourquoi-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem 2.2rem;
}

.pourquoi-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 14px;
  background: var(--fond);
  border: 1px solid var(--trait);
  margin-bottom: 1rem;
}

.pourquoi-icone svg { width: 28px; height: 28px; }
.pourquoi h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.pourquoi p { max-width: 20rem; margin: 0 auto; }

@media (max-width: 860px) { .pourquoi-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pourquoi-grille { grid-template-columns: 1fr; } }

/* Zone d'intervention : la carte à gauche, le texte à droite, sur fond bleu nuit */
.section-zone {
  background: radial-gradient(900px 500px at 15% 40%, rgba(38, 99, 148, 0.45), transparent 60%),
              linear-gradient(150deg, var(--marine), var(--marine-2));
  color: rgba(214, 228, 240, 0.92);
}

.zone-grille {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 3rem;
  align-items: center;
}

.zone-carte img { width: 100%; height: auto; display: block; }

.section-zone h2 { color: #fff; }
.section-zone h2 em { font-style: normal; color: var(--ambre-vif); }
.section-zone .sur-titre { color: var(--ambre-vif); }
.section-zone p strong { color: #fff; }
.zone-texte .heros-actions { margin: 1.8rem 0 1.6rem; }

.zone-liens {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.5rem;
  padding: 0;
  margin: 0;
}

.zone-liens a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.zone-liens a::before { content: "› "; color: var(--ambre-vif); }
.zone-liens a:hover { color: var(--ambre-vif); }

@media (max-width: 900px) {
  .zone-grille { grid-template-columns: 1fr; gap: 2rem; }
}

/* « Des solutions pour tous » : onglets Particuliers / Professionnels sans JavaScript */
.solutions-onglets {
  display: flex;
  width: max-content;
  margin: 0 auto 2.2rem;
  padding: 0.3rem;
  border: 1.5px solid var(--marine-3);
  border-radius: 999px;
  background: #fff;
}

.solutions-onglets input { position: absolute; opacity: 0; pointer-events: none; }

.solutions-onglets label {
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  color: var(--titre);
  cursor: pointer;
}

.solutions-onglets input:checked + label { background: var(--marine-3); color: #fff; }
.solutions-onglets input:focus-visible + label { outline: 3px solid var(--ambre); outline-offset: 2px; }

.solutions-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

.solutions-pros { display: none; }
.solutions:has(#pour-pros:checked) .solutions-pros { display: grid; }
.solutions:has(#pour-pros:checked) .solutions-particuliers { display: none; }

.carte-solution {
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  padding: 1.6rem 1.4rem;
  border-radius: var(--rayon);
  background: #fff;
  box-shadow: 0 10px 30px -14px rgba(14, 32, 51, 0.28);
  transition: transform 0.16s, box-shadow 0.16s;
}

.carte-solution:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -16px rgba(14, 32, 51, 0.35); }

.carte-solution h3 {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--titre);
}

.carte-solution p { margin-top: auto; padding-top: 1.4rem; }

.carte-solution a {
  margin-top: 1rem;
  font-weight: 700;
  color: var(--ambre-texte);
  text-decoration: none;
}

.carte-solution a:hover { text-decoration: underline; }

@media (max-width: 1000px) { .solutions-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .solutions-grille { grid-template-columns: 1fr; } .carte-solution { min-height: 0; } }

/* Héros sur une seule colonne : le titre prend toute la largeur */
.heros-simple h1 { max-width: 78rem; }
.heros-simple p.accroche { max-width: 58rem; }

/* Barre « devis rapide » : carte blanche juste sous le menu, avant le titre */
.devis-rapide {
  margin: 3rem 0 0;
  padding: 1.4rem 1.6rem 1.1rem;
  border-radius: var(--rayon);
  background: #fff;
  color: var(--texte);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.55);
}

.devis-rapide-titre {
  font-family: var(--police-titres);
  font-weight: 800;
  color: var(--titre);
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.devis-rapide-ligne {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 0.75rem;
}

.devis-rapide-ligne input {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #c9d3df;
  background: #fff;
  color: var(--titre);
  font: inherit;
  font-weight: 600;
}

.devis-rapide-ligne input::placeholder { color: #6b7a8c; }

.devis-rapide-ligne input:focus {
  outline: 3px solid var(--ambre);
  outline-offset: 1px;
}

.devis-rapide-accord {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--texte);
}

.devis-rapide-accord input { margin-top: 0.25rem; accent-color: var(--ambre); }

.devis-rapide-ligne select {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border-radius: 12px;
  border: 1px solid #c9d3df;
  background: #fff;
  color: var(--titre);
  font: inherit;
  font-weight: 600;
}

.devis-rapide-ligne select:focus { outline: 3px solid var(--ambre); outline-offset: 1px; }
.devis-rapide-ligne select:invalid { color: #6b7a8c; }

/* Deux étapes sans JavaScript : la case cachée « dr-suite » bascule de l'une à l'autre */
.dr-suite { position: absolute; opacity: 0; pointer-events: none; }

.dr-etape1 { grid-template-columns: repeat(3, 1fr) auto; }
.dr-ligne-coord { grid-template-columns: auto repeat(4, 1fr) auto; }

.dr-etape2, .dr-num2 { display: none; }
.devis-rapide:has(.dr-suite:checked) .dr-etape1,
.devis-rapide:has(.dr-suite:checked) .dr-num1 { display: none; }
.devis-rapide:has(.dr-suite:checked) .dr-etape2 { display: block; }
.devis-rapide:has(.dr-suite:checked) .dr-num2 { display: inline-block; }

/* Tant que l'étape 1 n'est pas remplie, on ne peut pas passer à la suivante */
.dr-continuer { cursor: pointer; }
.devis-rapide:has(.dr-etape1 :invalid) .dr-continuer {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.dr-etape-num {
  margin-left: 0.6rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(245, 116, 17, 0.14);
  color: var(--ambre-texte);
  font-family: var(--police-texte, inherit);
  font-size: 0.78rem;
  font-weight: 700;
  vertical-align: middle;
}

.dr-retour {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  align-self: center;
  border-radius: 50%;
  border: 1px solid #c9d3df;
  color: var(--titre);
  font-size: 1.2rem;
  cursor: pointer;
}

.dr-retour:hover { border-color: var(--ambre); }

@media (max-width: 900px) {
  .devis-rapide-ligne, .dr-etape1 { grid-template-columns: 1fr 1fr; }
  .dr-ligne-coord { grid-template-columns: 1fr 1fr; }
  .devis-rapide-ligne .btn { grid-column: 1 / -1; }
  .dr-retour { grid-column: 1 / -1; width: auto; height: 2.6rem; border-radius: 12px; }
}

@media (max-width: 520px) {
  .devis-rapide-ligne, .dr-etape1, .dr-ligne-coord { grid-template-columns: 1fr; }
}

/* Texte lu par les lecteurs d'écran, invisible à l'écran */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.9rem;
  border-radius: 12px;
  font-family: var(--police-titres);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  transition: transform 0.14s, box-shadow 0.14s, background 0.14s, border-color 0.14s;
}

.btn-primaire {
  background: var(--degrade-ambre);
  color: var(--encre);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 30px -10px rgba(245, 116, 17, 0.6);
}

.btn-primaire:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 20px 38px -12px rgba(245, 116, 17, 0.72);
}

.btn-secondaire {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}

.btn-secondaire:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-3px);
}

/* Panneau vitrine du héros */

.heros-panneau {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 1.9rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}

.heros-panneau h2 {
  color: #fff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1.2rem;
  font-weight: 700;
}

.heros-panneau ul { list-style: none; display: grid; gap: 1rem; }

.heros-panneau li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: #e7eff7;
  font-weight: 600;
  font-size: 0.98rem;
}

.heros-panneau li .ico {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: rgba(245, 116, 17, 0.16);
  border: 1px solid rgba(245, 116, 17, 0.35);
}

/* --------------------------------------------------------------------------
   Sections génériques
   -------------------------------------------------------------------------- */

.section { padding: 5.4rem 0; }
.section-grise { background: var(--fond); }

.sur-titre {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ambre-texte);
  margin-bottom: 0.9rem;
}

.sur-titre::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--degrade-ambre);
  border-radius: 2px;
}

h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; margin-bottom: 1.1rem; }

h3 { font-size: 1.18rem; font-weight: 700; margin-bottom: 0.55rem; }

.intro-section { max-width: 46rem; margin-bottom: 2.8rem; font-size: 1.08rem; }

/* --------------------------------------------------------------------------
   Cartes de services
   -------------------------------------------------------------------------- */

.grille-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.7rem;
}

.carte-service {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 2rem 1.7rem 1.9rem;
  box-shadow: var(--ombre-douce);
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s, border-color 0.18s;
}

.carte-service::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--degrade-ambre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte-service:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-forte);
  border-color: rgba(245, 116, 17, 0.4);
}

.carte-service:hover::before { transform: scaleX(1); }

.carte-service .icone {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: linear-gradient(140deg, var(--marine), var(--marine-3));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 10px 20px -10px rgba(13, 33, 55, 0.55);
}

.carte-service .icone svg { width: 27px; height: 27px; }

.carte-service h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s;
}

.carte-service h3 a:hover { color: var(--ambre-fonce); }

/* --------------------------------------------------------------------------
   Listes, colonnes, chiffres
   -------------------------------------------------------------------------- */

/* Liens dans le contenu */

main p a:not(.btn), main .liste-coche a, main .reponse a {
  color: var(--marine-3);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(245, 116, 17, 0.55);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.12s, text-decoration-color 0.12s;
}

main p a:not(.btn):hover, main .liste-coche a:hover, main .reponse a:hover {
  color: var(--ambre-texte);
  text-decoration-color: var(--ambre-texte);
}

.liste-coche { list-style: none; display: grid; gap: 0.7rem; }

.liste-coche li { padding-left: 2rem; position: relative; }

.liste-coche li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(245, 116, 17, 0.14);
  color: var(--ambre-fonce);
  font-weight: 800;
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deux-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2rem;
  align-items: start;
}

/* Texte + image côte à côte ; la rangée suivante est séparée */
.texte-image { align-items: center; }
.texte-image + .texte-image { margin-top: 4.5rem; }

/* Emplacement réservé, en attendant la vraie photo */
.emplacement-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon);
  border: 2px dashed var(--trait);
  background: var(--fond);
  color: var(--texte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   « Transport Lacote en bref » — bandeau vitrine flottant sous le héros
   -------------------------------------------------------------------------- */

.section-bref {
  position: relative;
  z-index: 5;
  margin-top: -4.6rem;
}

.carte-bref {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 22px;
  box-shadow: var(--ombre-forte);
  padding: 2.1rem 2.4rem 2.3rem;
  overflow: hidden;
}

.carte-bref::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--degrade-ambre);
}

.carte-bref .titre-bref {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  font-family: var(--police-titres);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ambre-texte);
  margin-bottom: 1.6rem;
}

.carte-bref .titre-bref::before,
.carte-bref .titre-bref::after {
  content: "";
  height: 2px;
  width: clamp(24px, 8vw, 90px);
  background: var(--degrade-ambre);
  border-radius: 2px;
  opacity: 0.6;
}

.grille-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.2rem;
  text-align: center;
}

.chiffre {
  padding: 1.4rem 1rem 1.3rem;
  border-radius: var(--rayon);
  background: var(--fond);
  border: 1px solid var(--trait);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s, border-color 0.16s;
}

.chiffre:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombre-douce);
  border-color: rgba(245, 116, 17, 0.4);
}

.chiffre strong {
  display: block;
  font-family: var(--police-titres);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--titre);
}

.chiffre strong::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: var(--degrade-ambre);
  margin: 0.5rem auto 0.6rem;
}

.chiffre span { color: var(--texte); font-weight: 600; font-size: 0.9rem; }

/* Libellé long (« 6 départements », « Une prise en charge complète ») */
.chiffre-long strong { font-size: 1.45rem; }

/* --------------------------------------------------------------------------
   Bandeau d'appel à l'action
   -------------------------------------------------------------------------- */

.bandeau-cta {
  position: relative;
  background: radial-gradient(600px 220px at 85% 20%, rgba(245, 116, 17, 0.28), transparent 60%),
              linear-gradient(150deg, var(--encre), var(--marine-2));
  color: #fff;
  border: 1px solid rgba(245, 116, 17, 0.28);
  border-radius: 22px;
  padding: 3rem 2.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  box-shadow: var(--ombre-forte);
  overflow: hidden;
}

.bandeau-cta h2 { color: #fff; margin-bottom: 0.4rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.bandeau-cta p { color: rgba(214, 228, 240, 0.85); }

.bandeau-cta .btn-primaire { font-size: 1.08rem; padding: 1.05rem 2.1rem; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

.formulaire {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 20px;
  box-shadow: var(--ombre-forte);
  padding: 2.4rem;
  max-width: 46rem;
  position: relative;
  overflow: hidden;
}

.formulaire::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--degrade-ambre);
}

.champs-groupe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.champ { margin-bottom: 1.15rem; }

.champ label {
  display: block;
  font-weight: 600;
  color: var(--titre);
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
}

.champ label .requis { color: var(--ambre-texte); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.78rem 0.95rem;
  border: 1.5px solid #d5deea;
  border-radius: var(--rayon-s);
  font: inherit;
  font-size: 0.98rem;
  color: var(--titre);
  background: #fbfcfe;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--ambre);
  box-shadow: 0 0 0 4px rgba(245, 116, 17, 0.16);
}

.champ textarea { min-height: 130px; resize: vertical; }

.champ .aide { font-size: 0.83rem; color: #7b8a9c; margin-top: 0.3rem; }

.formulaire .btn-primaire {
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 1.05rem;
}

.mention-rgpd { font-size: 0.8rem; color: #7b8a9c; margin-top: 1.1rem; line-height: 1.6; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq details {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 14px;
  box-shadow: var(--ombre-douce);
  margin-bottom: 0.9rem;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.faq details[open] { box-shadow: var(--ombre-forte); border-color: rgba(245, 116, 17, 0.45); }

.faq summary {
  cursor: pointer;
  padding: 1.15rem 3.2rem 1.15rem 1.5rem;
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--titre);
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(245, 116, 17, 0.13);
  color: var(--ambre-fonce);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}

.faq details[open] summary::after {
  content: "–";
  transform: translateY(-50%) rotate(180deg);
  background: var(--degrade-ambre);
  color: var(--encre);
}

.faq .reponse { padding: 0 1.5rem 1.3rem; }

/* --------------------------------------------------------------------------
   Page de validation
   -------------------------------------------------------------------------- */

.validation {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
  padding: 5.5rem 0;
}

.validation .rond-succes {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(140deg, #dff7e8, #c2eed4);
  color: #178a4c;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.7rem;
  box-shadow: 0 18px 36px -16px rgba(23, 138, 76, 0.45);
}

/* --------------------------------------------------------------------------
   Coordonnées / cartes d'information
   -------------------------------------------------------------------------- */

.carte-info {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 20px;
  box-shadow: var(--ombre-forte);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.carte-info::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--degrade-ambre);
}

.carte-info dl { display: grid; gap: 1.1rem; }

.carte-info dt {
  font-weight: 700;
  color: var(--ambre-texte);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  margin-bottom: 0.15rem;
}

.carte-info dd { color: var(--titre); }

.carte-info dd a { color: var(--marine-3); font-weight: 700; text-decoration: none; }
.carte-info dd a:hover { color: var(--ambre-fonce); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.pied {
  background: linear-gradient(180deg, var(--encre), #050e18);
  color: #93a9be;
  padding: 3.6rem 0 1.6rem;
  font-size: 0.94rem;
  border-top: 3px solid;
  border-image: var(--degrade-ambre) 1;
}

.pied-grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.4rem;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.pied h2, .pied h3 {
  color: #fff;
  font-size: 0.86rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}

.pied ul { list-style: none; display: grid; gap: 0.5rem; }

.pied a { color: #93a9be; text-decoration: none; transition: color 0.12s; }
.pied a:hover { color: var(--ambre-vif); }

.pied address { font-style: normal; line-height: 1.9; }

.pied-bas {
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.7rem;
  font-size: 0.82rem;
  color: #6d8298;
}

/* --------------------------------------------------------------------------
   Fil d'Ariane & en-tête de page interne
   -------------------------------------------------------------------------- */

.fil-ariane {
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  padding: 0.85rem 0;
  font-size: 0.86rem;
}

.fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fil-ariane li + li::before { content: "›"; margin-right: 0.45rem; color: #9fb0c2; }
.fil-ariane a { color: var(--marine-3); text-decoration: none; font-weight: 600; }
.fil-ariane a:hover { color: var(--ambre-fonce); }
.fil-ariane [aria-current] { color: var(--texte); }

.entete-page {
  position: relative;
  background: radial-gradient(800px 320px at 85% -20%, rgba(245, 116, 17, 0.2), transparent 60%),
              linear-gradient(150deg, var(--encre), var(--marine-2));
  color: #fff;
  padding: 4rem 0 4.2rem;
  overflow: hidden;
}

.entete-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

.entete-page .conteneur { position: relative; }

.entete-page h1 {
  color: #fff;
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 800;
  margin-bottom: 0.7rem;
}

.entete-page p { color: rgba(212, 226, 239, 0.9); max-width: 44rem; font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .heros-grille, .deux-colonnes, .pied-grille { grid-template-columns: 1fr; }
  .heros { padding: 4.2rem 0 7.6rem; }
  .section { padding: 4rem 0; }
  .carte-bref { padding: 1.7rem 1.4rem 1.9rem; }
}

@media (max-width: 780px) {
  .bouton-menu { display: block; }

  .nav-principale {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(8, 22, 37, 0.97);
    backdrop-filter: blur(14px);
    display: none;
    box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .menu-case:checked ~ .nav-principale { display: block; }

  .nav-principale ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.6rem 4.5%;
  }

  .nav-principale li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .nav-principale li:last-child { border-bottom: none; padding: 0.9rem 0; }
  .nav-principale a { display: block; padding: 0.9rem 0.2rem; }
  .nav-principale a:not(.btn-tel)::after { display: none; }

  .champs-groupe { grid-template-columns: 1fr; }
  .formulaire { padding: 1.6rem; }
  .bandeau-cta { padding: 2.2rem 1.6rem; }
}

/* ==========================================================================
   Composants ajoutés lors de la refonte 2026
   (flotte, étapes, encarts, listes négatives, variantes de boutons)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Flotte de véhicules
   -------------------------------------------------------------------------- */

.grille-flotte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.7rem;
}

.carte-flotte {
  position: relative;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.9rem 1.7rem;
  box-shadow: var(--ombre-douce);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s, border-color 0.18s;
}

.carte-flotte:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-forte);
  border-color: rgba(245, 116, 17, 0.4);
}

.carte-flotte .flotte-nb {
  font-family: var(--police-titres);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ambre-fonce);
  margin-bottom: 0.55rem;
  letter-spacing: -0.03em;
}

.carte-flotte h3 { margin-bottom: 0.6rem; }

.note-flotte {
  margin-top: 1.7rem;
  padding: 1rem 1.3rem;
  background: rgba(245, 116, 17, 0.08);
  border-left: 4px solid var(--ambre);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  font-size: 0.97rem;
  max-width: 48rem;
}

/* --------------------------------------------------------------------------
   Étapes numérotées (déroulé d'une prestation)
   -------------------------------------------------------------------------- */

.etapes {
  list-style: none;
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.7rem;
  margin-top: 0.5rem;
}

.etapes li {
  counter-increment: etape;
  position: relative;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 2.6rem 1.6rem 1.7rem;
  box-shadow: var(--ombre-douce);
}

.etapes li::before {
  content: counter(etape);
  position: absolute;
  top: -1.1rem;
  left: 1.5rem;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--degrade-ambre);
  color: var(--encre);
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(245, 116, 17, 0.8);
}

.etapes h3 { margin-bottom: 0.5rem; }

/* Le numéro est déjà dans le compteur : on masque celui du texte du titre. */
.etapes h3 { font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   Encart de mise en avant
   -------------------------------------------------------------------------- */

.encart {
  margin-top: 1.4rem;
  padding: 1.2rem 1.4rem;
  background: var(--fond);
  border: 1px solid var(--trait);
  border-left: 4px solid var(--ambre);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
}

.encart h3 { margin-bottom: 0.4rem; font-size: 1.05rem; }
.encart p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Liste « ce que nous ne faisons pas »
   -------------------------------------------------------------------------- */

.liste-croix { list-style: none; display: grid; gap: 0.7rem; margin-top: 0.4rem; }

.liste-croix li { padding-left: 2rem; position: relative; }

.liste-croix li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: rgba(70, 86, 106, 0.12);
  color: #5b6b7f;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Utilitaires de mise en page (remplacent les anciens styles en ligne)
   -------------------------------------------------------------------------- */

.apres-grille { margin-top: 2rem; }
.apres-liste { margin-top: 1.2rem; }
.sous-section { margin-top: 2rem; }
.bloc-faq { max-width: 52rem; margin-top: 1.6rem; }
.conteneur-texte { max-width: 50rem; }
.titre-formulaire { margin-bottom: 1.2rem; }
.carte-contact-page { margin-top: 1.4rem; }
.validation-texte { margin-top: 0.8rem; }
.validation-actions { justify-content: center; margin-top: 2rem; }

.deux-colonnes .deux-colonnes { gap: 2.4rem; }

/* Variante de bouton secondaire sur fond clair */
.btn-secondaire.btn-sombre { color: var(--marine-2); border-color: var(--marine-2); }
.btn-secondaire.btn-sombre:hover { background: var(--marine-2); color: #fff; }

/* Variante de pastille sur fond clair */
.chip-clair {
  color: var(--ambre-texte);
  background: rgba(245, 116, 17, 0.1);
  border-color: rgba(245, 116, 17, 0.4);
}

/* Horaires rappelés dans le pied de page */
.pied-horaires {
  margin-top: 0.9rem;
  color: #93a9be;
  font-size: 0.92rem;
}

/* Les sections consécutives de même fond ne doivent pas doubler l'espacement */
.section + .section-grise, .section-grise + .section { margin-top: 0; }

@media (max-width: 960px) {
  .carte-flotte .flotte-nb { font-size: 2.2rem; }
}

/* --------------------------------------------------------------------------
   Rythme vertical du contenu rédactionnel
   (le reset met toutes les marges à zéro : on les redonne, uniquement dans
   <main> et uniquement entre blocs de texte qui se suivent — les cartes,
   formulaires et listes stylées gardent leurs propres espacements.)
   -------------------------------------------------------------------------- */

main p + p,
main p + ul,
main p + ol,
main ul + p,
main ol + p,
main p + dl,
main dl + p { margin-top: 1.05rem; }

main p + h3,
main ul + h3,
main ol + h3 { margin-top: 1.9rem; }

main p + h2,
main ul + h2 { margin-top: 2.2rem; }

/* --------------------------------------------------------------------------
   Pictogrammes : dimensionnement optique
   Sans taille explicite, un SVG sans attributs width/height remplit sa
   pastille bord à bord. On fixe le rapport picto/pastille à ~50 %, qui est
   la proportion qui « respire » correctement.
   -------------------------------------------------------------------------- */

.heros-panneau li .ico svg { width: 21px; height: 21px; }
.carte-service .icone svg  { width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   Savoir-faire : six preuves concrètes + la déclaration de fin
   -------------------------------------------------------------------------- */

.grille-savoir {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.8rem 2.6rem;
}

.savoir { display: flex; gap: 1.05rem; align-items: flex-start; }

.savoir .pastille {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 116, 17, 0.12);
  border: 1px solid rgba(245, 116, 17, 0.3);
}

.savoir .pastille svg { width: 23px; height: 23px; }

.savoir h3 { font-size: 1.04rem; margin-bottom: 0.35rem; }
.savoir p { font-size: 0.97rem; }

.manifeste {
  margin-top: 3rem;
  padding: 2.1rem 2.3rem;
  border-radius: var(--rayon);
  background: linear-gradient(140deg, var(--marine), var(--marine-3));
  color: rgba(214, 228, 240, 0.9);
  box-shadow: var(--ombre-forte);
  position: relative;
  overflow: hidden;
  max-width: 54rem;
}

.manifeste::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--degrade-ambre);
}

.manifeste-titre {
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.manifeste p:last-child { margin-top: 0; }

@media (max-width: 620px) {
  .manifeste { padding: 1.6rem 1.5rem; }
  .savoir .pastille { width: 42px; height: 42px; border-radius: 12px; }
  .savoir .pastille svg { width: 21px; height: 21px; }
}

/* --------------------------------------------------------------------------
   Classes de substitution aux attributs style= en ligne
   La politique de sécurité du contenu (CSP) interdit « style-src 'self' » les
   attributs style= : le piège à robots des formulaires serait resté visible
   et l'anti-spam inopérant.
   -------------------------------------------------------------------------- */

.piege { display: none; }
.encart-espace { margin-top: 1.6rem; }
.validation-espace { margin-top: 2rem; }

/* ==========================================================================
   Thème clair (inspiré de Big Déménagement) — bleu de la marque Transport Lacote
   Tout est regroupé ici : supprimer ce bloc rend au site son thème sombre d'origine.
   ========================================================================== */

:root {
  --bleu: #199ed7;          /* bleu du visuel « couleur » de Transport Lacote */
  --bleu-bouton: #199ed7;   /* fond de bouton : texte blanc lisible (contraste 4,6:1) */
  --bleu-texte: #147ca9;    /* #199ed7 foncé : petit texte bleu lisible sur blanc */    /* petit texte bleu sur blanc (contraste 5,3:1) */
  --bleu-pale: #eef6fb;
  --bleu-pale-2: #d9ecf7;
}

/* En-tête blanc */
.entete {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--trait);
  box-shadow: 0 6px 20px -14px rgba(14, 32, 51, 0.25);
}
.entete::before { background: var(--bleu); }
.logo { color: var(--titre); }
.logo-texte span { color: var(--bleu-texte); }
.nav-principale a { color: var(--titre); }
.nav-principale a:hover,
.nav-principale a[aria-current="page"] { color: var(--bleu-texte); }
.nav-principale a:not(.btn-tel)::after { background: var(--bleu); }
.btn-tel {
  background: var(--bleu-bouton);
  color: #fff !important;
  box-shadow: 0 8px 20px -8px rgba(25, 158, 215, 0.6);
}
.btn-tel:hover { box-shadow: 0 12px 26px -8px rgba(25, 158, 215, 0.7); }
.bouton-menu span { background: var(--titre); }

/* Haut de page clair : blanc vers bleu très pâle */
.heros {
  color: var(--titre);
  background: radial-gradient(900px 520px at 92% -5%, var(--bleu-pale-2), transparent 62%),
              linear-gradient(180deg, #fff 0%, var(--bleu-pale) 100%);
}
.heros::before {
  background-image: linear-gradient(rgba(25, 158, 215, 0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(25, 158, 215, 0.06) 1px, transparent 1px);
}
.heros h1 { color: var(--titre); }
.heros h1 em {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--bleu);
}
.heros p.accroche { color: var(--texte); }
.heros .btn-secondaire {
  background: #fff;
  color: var(--titre);
  border-color: #c9d3df;
}
.heros .btn-secondaire:hover { border-color: var(--bleu); color: var(--bleu-texte); }

/* Formulaire de devis : carte blanche bordée de bleu pâle */
.devis-rapide {
  border: 1px solid var(--bleu-pale-2);
  box-shadow: 0 18px 40px -24px rgba(14, 60, 100, 0.35);
}
.dr-etape-num { background: var(--bleu-pale); color: var(--bleu-texte); }

/* En-tête des pages intérieures */
.entete-page {
  color: var(--titre);
  background: radial-gradient(800px 320px at 90% -20%, var(--bleu-pale-2), transparent 60%),
              linear-gradient(180deg, #fff, var(--bleu-pale));
}
.entete-page h1 { color: var(--titre); }
.entete-page p { color: var(--texte); }

/* Accents de titres : bleu (l'orange reste réservé aux boutons d'action) */
.sur-titre { color: var(--bleu-texte); }
.sur-titre::before { background: var(--bleu); }
.carte-bref .titre-bref { color: var(--bleu-texte); }
.carte-bref .titre-bref::before,
.carte-bref .titre-bref::after { background: var(--bleu); }
.chiffre strong::after { background: var(--bleu); }

@media (max-width: 780px) {
  .nav-principale { background: rgba(255, 255, 255, 0.99); }
}

/* --------------------------------------------------------------------------
   « En bref » façon JBL Conseil : carte en dégradé bleu, chiffres qui défilent,
   icônes dans des cercles. Aucun JavaScript : le compteur est un nombre CSS animé
   (@property). Le vrai nombre reste dans le texte pour Google et les lecteurs d'écran.
   -------------------------------------------------------------------------- */

@property --n {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

.carte-bref {
  background: var(--bleu);
  border: 0;
  color: #fff;
  padding: 2.6rem 2.4rem 2.8rem;
}
.carte-bref::before { display: none; }
.carte-bref .titre-bref { color: #fff; }
.carte-bref .titre-bref::before,
.carte-bref .titre-bref::after { background: rgba(255, 255, 255, 0.7); }

.chiffre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 0;
  padding: 0.6rem 0.5rem;
}
.chiffre:hover { transform: none; box-shadow: none; }
.chiffre strong::after { display: none; }
.chiffre .chiffre-nombre {
  color: #fff;
  font-family: var(--police-titres);
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.chiffre .chiffre-unite {
  color: #fff;
  font-family: var(--police-titres);
  font-size: 1.45rem;
  font-weight: 700;
  margin-top: 0.3rem;
}
.chiffre .chiffre-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-weight: 500;
  margin-top: 0.35rem;
  max-width: 16rem;
}

.chiffre-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-top: auto;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}
.chiffre-icone svg { width: 34px; height: 34px; }
.chiffre .chiffre-desc { margin-bottom: 1.3rem; }

/* Le compteur animé remplace visuellement le vrai nombre */
.nombre-reel {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.chiffre .compteur { font: inherit; color: inherit; margin: 0; }
.compteur::before {
  counter-reset: n var(--n);
  content: counter(n);
  animation: 2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
.compteur-16::before { --n: 16; animation-name: compte-16; }
.compteur-5::before  { --n: 5;  animation-name: compte-5; }
.compteur-6::before  { --n: 6;  animation-name: compte-6; }
@keyframes compte-16 { from { --n: 0; } to { --n: 16; } }
@keyframes compte-5  { from { --n: 0; } to { --n: 5; } }
@keyframes compte-6  { from { --n: 0; } to { --n: 6; } }

/* Les navigateurs récents déclenchent le compte quand le bloc arrive à l'écran */
@supports (animation-timeline: view()) {
  .compteur::before {
    animation-duration: auto;
    animation-delay: 0s;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compteur::before { animation: none; }
}

@media (max-width: 620px) {
  .chiffre .chiffre-nombre { font-size: 2.8rem; }
}

/* --------------------------------------------------------------------------
   Particulier / Professionnel : deux grandes cartes colorées (modèle JBL Conseil)
   -------------------------------------------------------------------------- */

.section-espaces { text-align: center; padding-bottom: 5.5rem; }
.espaces-avant { font-size: 1.15rem; color: var(--texte); margin-bottom: 0.4rem; }
.section-espaces h2 { max-width: 46rem; margin: 0 auto 1rem; }
.section-espaces h2 em { font-style: normal; color: var(--bleu); }
.espaces-intro { max-width: 44rem; margin: 0 auto 3rem; }

.espaces-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  max-width: 64rem;
  margin: 0 auto;
}

.espace {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 2rem 2.2rem 3.6rem;
  border-radius: var(--rayon);
  color: #fff;
  text-decoration: none;
  transition: transform 0.16s, box-shadow 0.16s;
}
.espace:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.espace:focus-visible { outline: 3px solid var(--titre); outline-offset: 3px; }

/* Orange foncé : le texte blanc reste lisible (contraste ≥ 4,5:1) */
.espace-particuliers { background: #f57411; }
.espace-pros { background: #199ed7; }

.espace-filigrane {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  opacity: 0.22;
}
.espace-filigrane svg { width: 96px; height: 96px; }

.espace-type { font-size: 1.15rem; opacity: 0.95; margin-bottom: 0.5rem; }
.espace-titre {
  font-family: var(--police-titres);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 74%;
  margin-bottom: 0.9rem;
}
.espace-texte { font-size: 1rem; line-height: 1.65; }

/* Bouton rond à cheval sur le bas de la carte */
.espace-fleche {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: var(--marine);
  border: 4px solid #fff;
}
.espace-fleche svg { width: 26px; height: 26px; }
.espace-pros .espace-fleche { background: var(--marine); }

@media (max-width: 760px) {
  .espaces-grille { grid-template-columns: 1fr; gap: 3.6rem; }
}

/* --------------------------------------------------------------------------
   Avis clients (fin de page) : en attendant la fiche Google
   -------------------------------------------------------------------------- */

.avis-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
.avis-entete h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 0; }
.avis-entete > p { max-width: 22rem; margin: 0; }

.avis-carte {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.2rem 2.4rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: #fff;
}
.avis-g-grand { width: 4.6rem; height: 4.6rem; font-size: 2.2rem; border-width: 1px; border-color: var(--trait); flex-shrink: 0; }
.avis-corps { flex: 1; }
.avis-type {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte);
}
.avis-titre {
  font-family: var(--police-titres);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--titre);
  margin: 0.3rem 0 0.4rem;
}
.avis-corps p:last-child { max-width: 36rem; }

@media (max-width: 760px) {
  .avis-entete, .avis-carte { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Haut de page v2 : texte + photo à gauche, formulaire de devis en carte à droite
   -------------------------------------------------------------------------- */

.heros-v2 { padding: 4rem 0 9.5rem; }
.heros-v2-grille {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: start;
}
.heros-v2 h1 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); }
.heros-v2 p.accroche { max-width: 38rem; }

.heros-photo { position: relative; margin-top: 2.4rem; }
.heros-photo .emplacement-image { aspect-ratio: 16 / 7; background: #fff; }
.heros-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  background: #fff;
  color: var(--titre);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: var(--ombre-douce);
}
.heros-badge svg { width: 18px; height: 18px; display: block; }

/* La carte formulaire */
.devis-carte {
  position: relative;
  background: #fff;
  border-radius: var(--rayon);
  border-top: 4px solid var(--ambre);
  box-shadow: 0 24px 50px -26px rgba(14, 60, 100, 0.4);
  padding: 1.8rem 2rem 1.6rem;
  color: var(--texte);
}
.dc-suite { position: absolute; opacity: 0; pointer-events: none; }

.dc-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.dc-icone {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--bleu-pale);
}
.dc-icone svg { width: 22px; height: 22px; }
.dc-etape { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; color: var(--texte); }

.dc-titre {
  font-family: var(--police-titres);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--titre);
  margin-bottom: 0.5rem;
}
.dc-sous-titre { font-size: 0.95rem; margin-bottom: 1.4rem; }

.dc-champ { margin-bottom: 1.1rem; border: 0; padding: 0; min-width: 0; }
.dc-champ label, .dc-champ legend {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: var(--titre);
  font-size: 0.93rem;
  margin-bottom: 0.45rem;
  padding: 0;
}
.dc-champ legend { display: block; }
.dc-champ .requis { color: var(--ambre-texte); margin-left: 0.25rem; margin-right: auto; }
.dc-facultatif { font-weight: 500; font-size: 0.8rem; color: #6b7a8c; }

.dc-champ input, .dc-champ select {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid #c9d3df;
  border-radius: 8px;
  background: #fff;
  color: var(--titre);
  font: inherit;
}
.dc-champ input:focus, .dc-champ select:focus { outline: 3px solid var(--bleu); outline-offset: 0; border-color: var(--bleu); }

.dc-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }

/* Bascule Particulier / Professionnel */
.dc-bascule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  padding: 0.3rem;
  border-radius: 10px;
  background: var(--fond);
  border: 1px solid var(--trait);
}
.dc-bascule input { position: absolute; opacity: 0; pointer-events: none; }
.dc-bascule label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 0.5rem;
  border-radius: 8px;
  color: var(--texte);
  cursor: pointer;
}
.dc-bascule label svg { width: 17px; height: 17px; display: block; }
.dc-bascule input:checked + label { background: var(--marine); color: #fff; }
.dc-bascule input:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 1px; }

.dc-continuer, .dc-envoyer { width: 100%; margin-top: 0.4rem; cursor: pointer; border: 0; font: inherit; font-family: var(--police-titres); font-weight: 700; }
.dc-note { text-align: center; font-size: 0.8rem; color: #6b7a8c; margin-top: 0.8rem; }
.dc-accord { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; margin: 0.3rem 0 1rem; }
.dc-accord input { margin-top: 0.25rem; accent-color: var(--ambre); }
.dc-retour {
  display: block;
  text-align: center;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bleu-texte);
  cursor: pointer;
}

/* Bascule entre les deux étapes (sans JavaScript) */
.dc-etape2, .dc-num2 { display: none; }
.devis-carte:has(.dc-suite:checked) .dc-etape1,
.devis-carte:has(.dc-suite:checked) .dc-num1 { display: none; }
.devis-carte:has(.dc-suite:checked) .dc-etape2 { display: block; }
.devis-carte:has(.dc-suite:checked) .dc-num2 { display: inline; }

/* Tant que l'étape 1 n'est pas remplie, le bouton reste grisé */
.devis-carte:has(.dc-etape1 :invalid) .dc-continuer {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

@media (max-width: 960px) {
  .heros-v2-grille { grid-template-columns: 1fr; }
  .heros-photo { display: none; }
}
@media (max-width: 480px) {
  .dc-deux { grid-template-columns: 1fr; }
  .devis-carte { padding: 1.5rem 1.2rem; }
}

/* --------------------------------------------------------------------------
   Haut de page v2 : tailles relevées sur la maquette de référence (écran 1920 px)
   -------------------------------------------------------------------------- */

.heros-v2 { padding: 2.8rem 0 9rem; }
.heros-v2 .heros-v2-grille {
  width: min(1220px, 92%);
  grid-template-columns: 677fr 477fr;   /* colonnes de la maquette */
  align-items: center;
  gap: 4rem;
}
.heros-v2 h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.9rem);    /* 62 px */
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-top: 0;
  margin-bottom: 2.2rem;
}
.heros-v2 p.accroche {
  font-size: 1.06rem;      /* 17 px */
  line-height: 1.8;        /* 30 px */
  max-width: 31rem;        /* ~495 px */
  margin-bottom: 1.8rem;
}
.heros-v2 .heros-actions .btn { padding: 0.85rem 1.6rem; font-size: 0.95rem; }
.heros-v2 .heros-photo { margin-top: 2.6rem; }
.heros-v2 .heros-photo .emplacement-image { aspect-ratio: 677 / 252; border-radius: 6px; }

.devis-carte { padding: 1.9rem 1.9rem 1.6rem; border-radius: 8px; }
.dc-icone { width: 2.6rem; height: 2.6rem; }
.dc-icone svg { width: 20px; height: 20px; }
.dc-etape { font-size: 0.78rem; }
.dc-titre { font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; }
.dc-sous-titre { font-size: 0.95rem; margin-bottom: 1.6rem; }
.dc-champ { margin-bottom: 1.25rem; }
.dc-champ label, .dc-champ legend { font-size: 0.95rem; margin-bottom: 0.5rem; }
.dc-champ input, .dc-champ select {
  height: 46px;            /* hauteur des champs de la maquette */
  padding: 0 0.85rem;
  font-size: 0.95rem;
  border-radius: 4px;
}
.dc-bascule { border-radius: 4px; padding: 0.2rem; }
.dc-champ .dc-bascule label { margin: 0; justify-content: center; padding: 0.55rem 0.5rem; border-radius: 3px; font-size: 0.95rem; }
.dc-continuer, .dc-envoyer { height: 48px; padding: 0 1rem; border-radius: 4px; font-size: 0.95rem; }


/* --------------------------------------------------------------------------
   Formulaire : champs propres aux particuliers / aux professionnels
   -------------------------------------------------------------------------- */

.devis-carte .dc-si-pro { display: none; }
.devis-carte:has(#dc-pro:checked) .dc-si-pro { display: block; }
.devis-carte:has(#dc-pro:checked) .dc-deux.dc-si-pro { display: grid; }
.devis-carte:has(#dc-pro:checked) .dc-si-part { display: none; }
.dc-champ label .dc-facultatif { margin-left: auto; }

/* « Continuer » grisé tant que la liste du profil choisi n'est pas renseignée */
.devis-carte:has(#dc-part:checked):has(#dc-besoin-part option[value=""]:checked) .dc-continuer,
.devis-carte:has(#dc-pro:checked):has(#dc-besoin-pro option[value=""]:checked) .dc-continuer,
/* « Envoyer » grisé : Nom + Prénom pour un particulier, Société pour un pro */
.devis-carte:has(#dc-part:checked):has(#dc-nom:placeholder-shown, #dc-prenom:placeholder-shown) .dc-envoyer,
.devis-carte:has(#dc-pro:checked):has(#dc-societe:placeholder-shown) .dc-envoyer {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

/* « En bref » sans icônes */
.chiffre .chiffre-desc { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Bandeau final « Les meubles bougent. »
   -------------------------------------------------------------------------- */

.bandeau-slogan {
  background: var(--marine);
  color: rgba(214, 228, 240, 0.92);
  padding: 5.5rem 0;
}
.slogan-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.bandeau-slogan .sur-titre { color: var(--ambre); }
.bandeau-slogan .sur-titre::before { background: var(--ambre); }
.bandeau-slogan h2 {
  color: #fff;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0;
}
.bandeau-slogan h2 em { font-style: normal; color: var(--ambre); }
.bandeau-slogan p { font-size: 1.08rem; line-height: 1.75; margin-bottom: 1rem; }
.bandeau-slogan .btn { margin-top: 0.8rem; }

@media (max-width: 860px) { .slogan-grille { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Cartes d'avis Google (remplies avec la liste AVIS_GOOGLE de contenu.py)
   -------------------------------------------------------------------------- */

.avis-resume {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.8rem;
  color: var(--titre);
  text-decoration: none;
}
.avis-resume strong { font-family: var(--police-titres); font-size: 1.6rem; }
.etoiles { color: #fbbc04; letter-spacing: 0.08em; }
.etoile-vide { color: #dadce0; }

.avis-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.4rem;
}
.avis-client {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.4rem;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-douce);
}
.avis-client header { display: flex; align-items: center; gap: 0.7rem; }
.avis-client header > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.avis-client header strong { color: var(--titre); }
.avis-client header small { color: #6b7a8c; }
.avis-initiale {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--bleu); color: #fff; font-weight: 700;
}
.avis-g-petit { width: 1.4rem; height: 1.4rem; font-size: 0.8rem; border-width: 1px; }
.avis-texte {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.avis-client a { margin-top: auto; font-weight: 600; color: var(--bleu); text-decoration: none; }


/* --------------------------------------------------------------------------
   Départements desservis, sous le slogan
   -------------------------------------------------------------------------- */

.heros-departements {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -0.8rem 0 1.6rem;
  padding: 0;
  font-style: italic;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--titre);
}

/* Message d'erreur du formulaire (rempli par devis.js, en texte seul) */
.dc-erreur {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  background: #fdecea;
  color: #8a1c12;
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Lisibilité : sur les fonds #199ed7 et #f57411, le texte blanc n'atteint
   qu'un contraste de 3,0 et 2,8 (il faut 4,5). Le texte y passe en bleu nuit
   (contraste 5,4 à 5,8) ; les couleurs de fond restent exactement celles de la marque.
   -------------------------------------------------------------------------- */

.btn-tel { color: var(--titre) !important; }
.btn-tel svg { stroke: currentColor; }

.carte-bref,
.carte-bref .titre-bref,
.chiffre .chiffre-nombre,
.chiffre .chiffre-unite,
.chiffre .chiffre-desc { color: var(--titre); }
.carte-bref .titre-bref::before,
.carte-bref .titre-bref::after { background: rgba(14, 32, 51, 0.45); }

.espace { color: var(--titre); }
.espace-filigrane { opacity: 0.18; }
.espace-filigrane svg { stroke: var(--titre); }

.avis-initiale { background: var(--bleu-texte); }
.avis-client a { color: var(--bleu-texte); }


/* --------------------------------------------------------------------------
   Bandeau des prestations sous le haut de page : un texte à la fois.
   Les 4 éléments sont superposés ; chacun apparaît 3 s à tour de rôle (12 s au total).
   -------------------------------------------------------------------------- */

.bandeau-prestations { background: var(--marine); overflow: hidden; }
.bandeau-prestations ul {
  position: relative;
  list-style: none;
  height: 4.2rem;
  margin-inline: auto;
  padding: 0;
}
.bandeau-prestations li {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  animation: un-a-la-fois 12s infinite;
}
.bandeau-prestations li:nth-child(2) { animation-delay: 3s; }
.bandeau-prestations li:nth-child(3) { animation-delay: 6s; }
.bandeau-prestations li:nth-child(4) { animation-delay: 9s; }
.bandeau-prestations:hover li,
.bandeau-prestations:focus-within li { animation-play-state: paused; }

.bandeau-prestations a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  text-decoration: none;
}
.bandeau-prestations a:hover { color: var(--ambre); }
.bandeau-prestations svg { width: 26px; height: 26px; display: block; }

@keyframes un-a-la-fois {
  0%        { opacity: 0; visibility: visible; transform: translateX(40vw); }
  5%, 20%   { opacity: 1; visibility: visible; transform: translateX(0); }
  25%       { opacity: 0; visibility: hidden; transform: translateX(-40vw); }
  100%      { opacity: 0; visibility: hidden; transform: translateX(-40vw); }
}

/* Mouvement réduit demandé par le visiteur : les 4 prestations fixes, côte à côte */
@media (prefers-reduced-motion: reduce) {
  .bandeau-prestations ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem 3rem;
    height: auto;
    padding: 1.3rem 0;
  }
  .bandeau-prestations li { position: static; opacity: 1; visibility: visible; animation: none; }
}

/* « En bref » ne chevauche plus le haut de page : il vient après le bandeau */
.section-bref { margin-top: 0; padding-bottom: 4.5rem; }
.heros-v2 { padding-bottom: 4.5rem; }


/* Date trop proche : invitation à téléphoner (affichée par devis.js) */
.dc-date-aide {
  margin-top: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  background: #fff4ec;
  border-left: 3px solid var(--ambre);
  color: var(--titre);
  font-size: 0.88rem;
}
.dc-date-aide a { color: var(--ambre-texte); font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------------------------------
   « Votre besoin. Notre métier. » : onglets + cartes bleu nuit numérotées
   -------------------------------------------------------------------------- */

.besoin-entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.2rem;
}
.besoin-entete h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
}
.besoin-entete > p { margin: 0; text-align: left; line-height: 1.7; }

.besoin-onglets {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  margin-bottom: 1.8rem;
  border-radius: 4px;
  background: var(--fond);
  border: 1px solid var(--trait);
}
.besoin-onglets input { position: absolute; opacity: 0; pointer-events: none; }
.besoin-onglets label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  border-radius: 3px;
  font-weight: 600;
  color: var(--texte);
  cursor: pointer;
}
.besoin-onglets label svg { width: 17px; height: 17px; display: block; }
.besoin-onglets input:checked + label { background: var(--marine); color: #fff; }
.besoin-onglets input:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 2px; }

.besoin-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
/* 4 cartes (enseignes, page Nos références) : 2 × 2 plutôt que 3 + 1 (2026-10-28) */
.besoin-grille.besoin-grille-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .besoin-grille.besoin-grille-4 { grid-template-columns: 1fr; } }
.besoin-pros { display: none; }
.besoin:has(#besoin-pro:checked) .besoin-pros { display: grid; }
.besoin:has(#besoin-pro:checked) .besoin-particuliers { display: none; }

.carte-besoin {
  display: flex;
  flex-direction: column;
  min-height: 22rem;
  padding: 1.9rem 1.8rem 1.8rem;
  background: var(--marine);
  color: rgba(214, 228, 240, 0.85);
  border-radius: 4px;
  transition: transform 0.16s, box-shadow 0.16s;
}
.carte-besoin:hover { transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.carte-besoin-haut { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.6rem; }
.carte-besoin-icone svg { width: 36px; height: 36px; display: block; }
.carte-besoin-num { font-weight: 700; color: rgba(214, 228, 240, 0.7); }
.carte-besoin-sur-titre { font-size: 0.85rem; font-weight: 600; color: rgba(214, 228, 240, 0.7); margin: 0 0 0.4rem; }
.carte-besoin h3 { font-size: 1.65rem; letter-spacing: -0.02em; margin: 0 0 0.9rem; }
.carte-besoin h3 a { color: #fff; text-decoration: none; }
.carte-besoin h3 a:hover { color: var(--ambre); }
.carte-besoin > p:not(.carte-besoin-sur-titre) { line-height: 1.7; margin: 0; }
.carte-besoin-devis {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: 2rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.carte-besoin-devis::after { content: ""; width: 2rem; height: 2px; background: var(--ambre); transition: width 0.16s; }
.carte-besoin-devis:hover::after { width: 3rem; }

.lien-fleche { color: var(--bleu-texte); font-weight: 700; text-decoration: none; }
.lien-fleche::after { content: " →"; }

@media (max-width: 960px) {
  .besoin-grille { grid-template-columns: 1fr; }
  .carte-besoin { min-height: 0; }
  .besoin-entete { flex-direction: column; align-items: flex-start; }
}

/* Les 4 chiffres « en bref » alignés : pas de marge héritée des paragraphes */
.grille-chiffres .chiffre { margin: 0; }

/* « Ils nous font confiance » : fond gris très clair, titre plus proche des logos */
.bandeau-confiance { background: #F3F6F8; border-bottom: 0; }
.bandeau-confiance .confiance-titre { margin-bottom: 2.6rem; }
/* Le fond blanc des fichiers logos se fond dans le gris (le blanc « disparaît ») */
.confiance-logos img { mix-blend-mode: multiply; }

/* Onglets « Pour les particuliers / professionnels » : arrondis comme le bouton
   téléphone du menu et les boutons du haut de page */
.besoin-onglets { border-radius: 999px; padding: 0.3rem; }
.besoin-onglets label { border-radius: 999px; padding: 0.65rem 1.4rem; }

/* En-tête des pages intérieures : fond bleu de la marque (plus lisible que le blanc).
   Texte bleu nuit : contraste 5,4 sur #199ed7 (le blanc n'atteindrait que 3,0). */
.entete-page {
  background: radial-gradient(800px 320px at 90% -20%, rgba(255, 255, 255, 0.18), transparent 60%),
              var(--bleu);
  color: var(--titre);
}
.entete-page h1 { color: var(--titre); }
.entete-page p { color: var(--titre); }

/* Menu à 6 entrées : les libellés ne se coupent jamais ; l'espacement se resserre
   sur les écrans moyens avant le passage au menu « burger » */
.nav-principale a { white-space: nowrap; }
.logo-texte strong { white-space: nowrap; }
@media (max-width: 1240px) {
  .nav-principale ul { gap: 1.2rem; }
  .nav-principale a { font-size: 0.88rem; }
  .btn-tel { padding: 0.55rem 1rem !important; }
}
@media (max-width: 1080px) {
  .logo-texte span { display: none; }
  .nav-principale ul { gap: 0.9rem; }
}
/* Écrans moyens : logo réduit à l'icône, bouton téléphone réduit au combiné
   (le numéro reste lu par les lecteurs d'écran) */
@media (min-width: 781px) and (max-width: 1000px) {
  .logo-texte { display: none; }
  .btn-tel { font-size: 0 !important; gap: 0; padding: 0.7rem !important; }
  .btn-tel svg { width: 18px; height: 18px; }
}


/* --------------------------------------------------------------------------
   « Notre façon de travailler » : processus en 6 étapes reliées par un fil
   -------------------------------------------------------------------------- */

.processus {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2.4rem;
  margin: 2.6rem 0 3rem;
  padding: 0;
  counter-reset: none;
}
.processus-etape { position: relative; padding-top: 4.4rem; }

/* Le fil qui relie les étapes d'une même rangée */
.processus-etape::before {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 3.4rem;
  right: -2.4rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--bleu) 0 8px, transparent 8px 14px);
}
.processus-etape:nth-child(3n)::before, .processus-etape:last-child::before { display: none; }

.processus-num {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--ambre);
  color: var(--encre);
  font-family: var(--police-titres);
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: 0 0 0 6px var(--fond);
}
.processus-moment {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bleu-texte);
}
.processus-etape h3 { font-size: 1.2rem; margin: 0 0 0.5rem; }
.processus-etape p:last-child { margin: 0; line-height: 1.65; }

@media (max-width: 960px) {
  .processus { grid-template-columns: 1fr 1fr; }
  .processus-etape:nth-child(3n)::before { display: block; }
  .processus-etape:nth-child(2n)::before { display: none; }
}
/* Téléphone : une colonne, le fil devient vertical */
@media (max-width: 600px) {
  .processus { grid-template-columns: 1fr; gap: 2rem; }
  .processus-etape { padding: 0 0 0 4.4rem; }
  .processus-etape::before, .processus-etape:nth-child(3n)::before {
    display: block;
    top: 3.4rem;
    left: 1.55rem;
    right: auto;
    bottom: -2rem;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, var(--bleu) 0 8px, transparent 8px 14px);
  }
  .processus-etape:last-child::before { display: none; }
}

/* Les cartes « processus » n'ont ni fond ni cadre */
.processus-etape { background: none; border: 0; box-shadow: none; }

/* Départements sous la description, précédés de l'épingle */
.heros-v2 .heros-departements {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: -0.6rem 0 1.8rem;
}
.heros-departements svg { width: 17px; height: 17px; display: block; flex-shrink: 0; }


/* « Pourquoi nous choisir ? » : lien vers la page Qui sommes-nous ? */
.pourquoi-lien { margin-top: 1.8rem; text-align: center; }

/* Étapes : 4 sur une ligne */
.processus { grid-template-columns: repeat(4, 1fr); }
.processus-etape:nth-child(3n)::before { display: block; }
.processus-etape:last-child::before { display: none; }
@media (max-width: 960px) {
  .processus { grid-template-columns: 1fr 1fr; }
  .processus-etape:nth-child(2n)::before { display: none; }
}

/* Avis : la date se lit « Avis Google · mois année » */
.avis-client header small { white-space: nowrap; }

/* « En savoir plus » aligné à gauche, sous la carte « en bref » */
.section-pourquoi .pourquoi-lien { text-align: left; }
/* La carte « en bref » sans titre : un peu moins haute */
.carte-bref { padding-top: 2.2rem; }

/* 5 étapes sur une ligne */
.processus { grid-template-columns: repeat(5, 1fr); gap: 3rem 2rem; }
.processus-etape::before { right: -2rem; }
@media (max-width: 1100px) {
  .processus { grid-template-columns: repeat(3, 1fr); }
  .processus-etape:nth-child(3n)::before { display: none; }
}
@media (max-width: 760px) {
  .processus { grid-template-columns: 1fr 1fr; }
  .processus-etape:nth-child(3n)::before { display: block; }
  .processus-etape:nth-child(2n)::before { display: none; }
}


/* --------------------------------------------------------------------------
   Fonds gris pour rythmer la page d'accueil
   -------------------------------------------------------------------------- */
.bandeau-confiance, .section-avis { background: #f2f3f5; }

/* --------------------------------------------------------------------------
   Carte interactive de la zone d'intervention (assets/img/carte-zone.svg)
   -------------------------------------------------------------------------- */
.zone-grille { grid-template-columns: minmax(0, 470px) 1fr; gap: 4rem; }
.zone-carte { max-width: 470px; }
.carte-zone { width: 100%; height: auto; display: block; overflow: visible; }

.carte-dep {
  fill: #ffffff;
  stroke: var(--marine);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: fill 0.15s;
}
.carte-dep-aude { fill: var(--ambre); stroke-width: 2.4; }
a .carte-dep { cursor: pointer; }
a:hover .carte-dep, a:focus-visible .carte-dep { fill: var(--bleu); }
a:hover .carte-dep-aude, a:focus-visible .carte-dep-aude { fill: var(--ambre-fonce); }
.carte-dep-sans-page:hover { fill: #e6eef5; }
.carte-zone a:focus-visible { outline: none; }
.carte-zone a:focus-visible .carte-dep { stroke: var(--ambre); stroke-width: 4; }

.carte-nom-dep {
  font: 700 15px var(--police-texte);
  fill: var(--marine-3);
  text-anchor: middle;
  pointer-events: none;
}
.carte-nom-aude { fill: var(--marine); font-size: 24px; }

.carte-ville { cursor: pointer; }
.carte-ville-zone { fill: transparent; }
.carte-ville-point {
  fill: var(--marine);
  stroke: #fff;
  stroke-width: 2;
  transition: r 0.15s, fill 0.15s;
}
.carte-ville-nom {
  font: 700 13px var(--police-texte);
  fill: var(--marine);
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.carte-ville:hover .carte-ville-point,
.carte-ville:focus-visible .carte-ville-point { fill: var(--bleu); r: 11; }
.carte-ville:hover .carte-ville-nom,
.carte-ville:focus-visible .carte-ville-nom { opacity: 1; }

.carte-depot path { fill: var(--marine); stroke: #fff; stroke-width: 2.5; }
.carte-depot circle { fill: var(--ambre); }

.carte-aide {
  margin: 0.8rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(214, 228, 240, 0.85);
}

@media (max-width: 900px) {
  .zone-grille { grid-template-columns: 1fr; }
  .zone-carte { margin: 0 auto; }
  /* Sur écran tactile, les noms de villes restent affichés */
  .carte-ville-nom { opacity: 1; }
}
.carte-nom-dep { font-size: 19px; }
.carte-nom-aude { font-size: 24px; }
.carte-ville-nom { font-size: 19px; }

/* 3 avis : une ligne de 3 cartes */
.avis-grille { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .avis-grille { grid-template-columns: 1fr; } }

/* « En savoir plus sur Transport Lacote » centré */
.pourquoi-lien, .section-pourquoi .pourquoi-lien { text-align: center; }


/* --------------------------------------------------------------------------
   Zone d'intervention v2 : texte + fiche du département à gauche,
   carte dans un panneau à droite (modèle « Tout près de chez vous »)
   -------------------------------------------------------------------------- */
.zone-radio { position: absolute; opacity: 0; pointer-events: none; }
.section-zone .zone-grille { grid-template-columns: 1fr 1.15fr; gap: 4.5rem; align-items: center; }
.section-zone h2 { font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; }
.section-zone .zone-texte > p { font-size: 1.05rem; line-height: 1.8; max-width: 30rem; }

/* Fiche du département choisi */
.zone-fiche { display: none; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); padding: 1.4rem 0; margin: 2rem 0 1.6rem; }
.zone-fiche-haut { display: flex; align-items: center; gap: 1.4rem; }
.zone-fiche-num { font-family: var(--police-titres); font-weight: 800; font-size: 2rem; color: var(--ambre-vif); min-width: 2.6rem; }
.zone-fiche-nom { flex: 1; display: flex; flex-direction: column; }
.zone-fiche-nom strong { color: #fff; font-size: 1.1rem; }
.zone-fiche-nom strong a { color: #fff; text-decoration: none; }
.zone-fiche-nom strong a:hover { color: var(--ambre-vif); }
.zone-fiche-nom small { color: rgba(214,228,240,0.75); font-size: 0.88rem; margin-top: 0.2rem; }
.zone-fiche-pin svg { width: 22px; height: 22px; display: block; }
.zone-fiche-villes { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding: 0; margin: 1rem 0 0 4rem; }
.zone-fiche-villes a { color: rgba(214,228,240,0.92); font-size: 0.9rem; text-decoration: none; }
.zone-fiche-villes a::before { content: "› "; color: var(--ambre-vif); }
.zone-fiche-villes a:hover { color: #fff; }
.zone-trajet { padding-top: 0; }

/* Panneau de la carte */
.zone-panneau {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 1.6rem 1.8rem 1.8rem;
}
.zone-panneau-haut {
  display: flex; justify-content: space-between;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(214,228,240,0.85); margin-bottom: 1.4rem;
}
.zone-panneau-nb { color: var(--ambre-vif); }
.zone-panneau .carte-zone { max-width: 560px; margin: 0 auto; }

.carte-zone .carte-dep { cursor: pointer; outline: none; }
.carte-zone .carte-dep path {
  fill: #23415f; stroke: var(--marine); stroke-width: 2; stroke-linejoin: round;
  transition: fill 0.15s;
}
.carte-zone .carte-dep:hover path { fill: #2d5275; }
.carte-zone .carte-dep:focus-visible path { stroke: var(--ambre-vif); stroke-width: 3; }
.carte-dep-num, .carte-dep-nom { fill: #fff; text-anchor: middle; pointer-events: none; }
.carte-dep-num { font: 800 26px var(--police-titres); }
.carte-dep-nom { font: 600 15px var(--police-texte); }

.zone-panneau .carte-aide { margin: 1rem 0 1rem; text-align: center; color: rgba(214,228,240,0.85); font-size: 0.88rem; }
.zone-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.zone-liste label {
  padding: 0.65rem 0.8rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 3px;
  color: #fff; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.15s;
}
.zone-liste label span { color: rgba(214,228,240,0.7); margin-right: 0.3rem; }
.zone-liste label:hover { background: rgba(255,255,255,0.06); }

/* Département choisi : carte, liste et fiche */

@media (max-width: 960px) {
  .section-zone .zone-grille { grid-template-columns: 1fr; }
  .zone-liste { grid-template-columns: 1fr 1fr; }
}

/* Le groupe <g class="carte-dep"> ne doit pas transmettre de contour à ses textes */
.carte-zone g.carte-dep { fill: none; stroke: none; stroke-width: 0; }
.carte-zone .carte-dep text { stroke: none; }
.carte-dep-nom { font-size: 17px; }
.zone-liste label { white-space: nowrap; font-size: 0.8rem; padding: 0.65rem 0.55rem; overflow: hidden; text-overflow: ellipsis; }


/* Zone d'intervention v3 : carte à gauche, texte à droite ; villes en liens sous la carte */
.section-zone .zone-grille { grid-template-columns: 1.1fr 1fr; }
.carte-zone .carte-dep { cursor: default; }
.carte-zone .carte-lien .carte-dep { cursor: pointer; }
.carte-zone .carte-dep-aude path { fill: var(--ambre-vif); }
.carte-zone .carte-dep-aude text { fill: var(--encre); }
.carte-zone .carte-lien:hover .carte-dep path,
.carte-zone .carte-lien:focus-visible .carte-dep path { fill: var(--ambre-vif); }
.carte-zone .carte-lien:hover .carte-dep text,
.carte-zone .carte-lien:focus-visible .carte-dep text { fill: var(--encre); }
.carte-zone .carte-lien:hover .carte-dep-aude path { fill: var(--ambre-fonce); }
.carte-zone .carte-lien:focus-visible .carte-dep path { stroke: #fff; stroke-width: 3; }

.zone-liste { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.zone-liste a {
  display: block;
  padding: 0.65rem 0.6rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 3px;
  color: #fff; font-weight: 600; font-size: 0.86rem; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.15s, color 0.15s;
}
.zone-liste a span { color: rgba(214,228,240,0.7); margin-right: 0.3rem; }
.zone-liste a:hover, .zone-liste a:focus-visible { background: var(--ambre-vif); border-color: var(--ambre-vif); color: var(--encre); }
.zone-liste a:hover span, .zone-liste a:focus-visible span { color: var(--encre); }
.section-zone h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1.12; }


/* Sous la carte : chaque département et ses villes */
.zone-villes { margin: 1.4rem 0 0; display: grid; gap: 0; }
.zone-villes > div {
  display: grid; grid-template-columns: 11.5rem 1fr; gap: 1rem;
  padding: 0.6rem 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.zone-villes dt { font-weight: 700; color: #fff; font-size: 0.9rem; white-space: nowrap; }
.zone-villes dt span { color: var(--ambre-vif); margin-right: 0.35rem; }
.zone-villes dd { margin: 0; color: rgba(214,228,240,0.85); font-size: 0.88rem; line-height: 1.6; }
.zone-villes a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,179,64,0.6); text-underline-offset: 3px; }
.zone-villes a:hover { color: var(--ambre-vif); }
.zone-villes dt a { text-decoration: none; }
.zone-sur-demande { font-style: italic; color: rgba(214,228,240,0.65); }
@media (max-width: 560px) { .zone-villes > div { grid-template-columns: 1fr; gap: 0.2rem; } }


.carte-zone .carte-dep-aude path, .carte-zone .carte-lien:hover .carte-dep path, .carte-zone .carte-lien:focus-visible .carte-dep path { fill: var(--ambre-vif); }
.carte-zone .carte-lien:hover .carte-dep-aude path { fill: var(--ambre); }


/* ==========================================================================
   Palette « couleurs suggestions » (coolors.co/0d2137-f15025-ffffff-e6e8e6-568ea3)
     Prussian Blue #0D2137 (fonds foncés, titres) · Blazing Flame #F15025 (actions)
     Blanc #FFFFFF · Alabaster Grey #E6E8E6 (fonds clairs) · Air Force Blue #568EA3 (couleur secondaire)
   Nuances ajoutées pour la lisibilité (contraste >= 4,5:1) : #D8380E petit texte orange
   sur fond clair, #4B7B8D petit texte bleu sur fond clair. Sur l'orange et le bleu,
   le texte est en Prussian Blue (4,6:1), jamais en blanc (3,6:1).
   Tout est regroupé ici : supprimer ce bloc rend les couleurs précédentes.
   ========================================================================== */
:root {
  --encre: #0d2137;
  --marine: #0d2137;
  --titre: #0d2137;
  --ambre: #f15025;
  --ambre-vif: #f15025;
  --ambre-fonce: #d8380e;
  --ambre-texte: #d8380e;
  --degrade-ambre: linear-gradient(120deg, #f15025, #f15025);
  --bleu: #568ea3;
  --bleu-texte: #4b7b8d;
  --fond: #e6e8e6;
  --bleu-pale: #f3f4f3;
  --bleu-pale-2: #e6e8e6;
}

/* Fonds clairs : Alabaster Grey */
.bandeau-confiance, .section-avis, .section-grise { background: #e6e8e6; }

/* Texte posé sur l'orange ou le bleu : Prussian Blue */
.btn-tel, .btn-primaire { color: var(--encre) !important; }
.carte-bref, .carte-bref .titre-bref, .chiffre .chiffre-nombre, .chiffre .chiffre-unite,
.chiffre .chiffre-desc, .entete-page, .entete-page h1, .entete-page p, .espace,
.processus-num { color: var(--encre); }
.espace-particuliers { background: var(--ambre); }
.espace-pros { background: #568ea3; }
.espace-filigrane svg { stroke: var(--encre); }

/* --------------------------------------------------------------------------
   Carte : un clic sur un département affiche ses villes sous la carte
   -------------------------------------------------------------------------- */
.zone-radio { position: absolute; opacity: 0; pointer-events: none; }
.carte-zone .carte-dep { cursor: pointer; outline: none; }
.carte-zone .carte-dep path { fill: rgba(255,255,255,0.1); stroke: var(--marine); }
.carte-zone .carte-dep:hover path { fill: rgba(255,255,255,0.2); }
.carte-zone .carte-dep:focus-visible path { stroke: #fff; stroke-width: 3; }
.carte-zone .carte-dep text { fill: #fff; }

.zone-choix { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 1rem 0 0; }
.zone-choix label {
  min-width: 2.8rem; padding: 0.35rem 0.6rem; text-align: center;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
  color: rgba(255,255,255,0.85); font-weight: 700; font-size: 0.85rem; cursor: pointer;
}
.zone-choix label:hover { background: rgba(255,255,255,0.08); }

.zone-dep-villes { display: none; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.14); }
.zone-dep-titre { margin: 0 0 0.6rem; color: #fff; font-weight: 700; }
.zone-dep-titre span { color: var(--ambre); margin-right: 0.3rem; }
.zone-dep-titre a { color: #fff; }
.zone-dep-villes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0; }
.zone-dep-villes li {
  padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88); font-size: 0.86rem;
}
.zone-dep-villes li a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ambre); }
.zone-dep-villes li a:hover { color: var(--ambre); }

#zone:has(#zone-11:checked) .carte-dep[data-dep="11"] path { fill: var(--ambre); }
#zone:has(#zone-11:checked) .carte-dep[data-dep="11"] text { fill: var(--encre); }
#zone:has(#zone-11:checked) .zone-choix label[for="zone-11"] { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
#zone:has(#zone-11:checked) .zone-dep-villes[data-dep="11"] { display: block; }
#zone:has(#zone-31:checked) .carte-dep[data-dep="31"] path { fill: var(--ambre); }
#zone:has(#zone-31:checked) .carte-dep[data-dep="31"] text { fill: var(--encre); }
#zone:has(#zone-31:checked) .zone-choix label[for="zone-31"] { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
#zone:has(#zone-31:checked) .zone-dep-villes[data-dep="31"] { display: block; }
#zone:has(#zone-34:checked) .carte-dep[data-dep="34"] path { fill: var(--ambre); }
#zone:has(#zone-34:checked) .carte-dep[data-dep="34"] text { fill: var(--encre); }
#zone:has(#zone-34:checked) .zone-choix label[for="zone-34"] { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
#zone:has(#zone-34:checked) .zone-dep-villes[data-dep="34"] { display: block; }
#zone:has(#zone-66:checked) .carte-dep[data-dep="66"] path { fill: var(--ambre); }
#zone:has(#zone-66:checked) .carte-dep[data-dep="66"] text { fill: var(--encre); }
#zone:has(#zone-66:checked) .zone-choix label[for="zone-66"] { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
#zone:has(#zone-66:checked) .zone-dep-villes[data-dep="66"] { display: block; }
#zone:has(#zone-81:checked) .carte-dep[data-dep="81"] path { fill: var(--ambre); }
#zone:has(#zone-81:checked) .carte-dep[data-dep="81"] text { fill: var(--encre); }
#zone:has(#zone-81:checked) .zone-choix label[for="zone-81"] { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
#zone:has(#zone-81:checked) .zone-dep-villes[data-dep="81"] { display: block; }
#zone:has(#zone-09:checked) .carte-dep[data-dep="09"] path { fill: var(--ambre); }
#zone:has(#zone-09:checked) .carte-dep[data-dep="09"] text { fill: var(--encre); }
#zone:has(#zone-09:checked) .zone-choix label[for="zone-09"] { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
#zone:has(#zone-09:checked) .zone-dep-villes[data-dep="09"] { display: block; }
#zone:has(.zone-radio:focus-visible) .zone-choix { outline: 2px solid var(--ambre); outline-offset: 4px; }
.section-zone .zone-dep-titre a { color: #fff; text-decoration: underline; text-decoration-color: var(--ambre); text-underline-offset: 3px; }


/* Étapes de l'accueil : mêmes cartes que la page Prestations, 5 sur une ligne */
.etapes-5 { grid-template-columns: repeat(5, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.etape-moment {
  margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bleu-texte);
}
@media (max-width: 1100px) { .etapes-5 { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; } }
@media (max-width: 700px)  { .etapes-5 { grid-template-columns: 1fr; } }

/* Bleu clair : #648DE5 (texte bleu nuit dessus : 5,0:1) ; #3B6EDE pour le petit texte bleu sur blanc */
:root { --bleu: #648de5; --bleu-texte: #3b6ede; }
.espace-pros { background: #648de5; }

/* ==========================================================================
   Aucun dégradé : couleurs unies partout
   ========================================================================== */
.heros, .heros-v2 { background: var(--bleu-pale); }
.heros::before, .entete-page::before { display: none; }
.entete-page { background: var(--bleu); }
.section-zone { background: var(--marine); }
.bandeau-cta { background: var(--marine); }
.pied { background: var(--marine); }
.heros-panneau { background: rgba(255, 255, 255, 0.06); }
.carte-service .icone { background: var(--marine); }
.manifeste { background: var(--marine); }
.validation .rond-succes { background: var(--ambre); }
.btn-primaire, .btn-tel, .chiffre strong::after, .carte-bref::before,
.entete::before, .nav-principale a:not(.btn-tel)::after { background-image: none; }
.btn-primaire { background: var(--ambre); }
.btn-tel { background: var(--bleu); }


/* Zone d'intervention : pas de tiret devant le sur-titre */
.section-zone .sur-titre::before { display: none; }

/* Bleu clair : #4381C1. Le texte posé dessus passe en blanc (4,1:1, meilleur que le
   bleu nuit à 4,0:1) ; petit texte bleu sur blanc : #3c78b6 (4,6:1) */
:root { --bleu: #4381c1; --bleu-texte: #3c78b6; }
.espace-pros { background: #4381c1; }
.btn-tel { color: #fff !important; }
.btn-tel svg { stroke: #fff; }
.carte-bref, .carte-bref .titre-bref, .chiffre .chiffre-nombre, .chiffre .chiffre-unite,
.chiffre .chiffre-desc, .entete-page, .entete-page h1, .entete-page p, .espace-pros { color: #fff; }
.carte-bref .titre-bref::before, .carte-bref .titre-bref::after { background: rgba(255,255,255,0.6); }
.espace-pros .espace-filigrane svg { stroke: #fff; }


/* Bleu clair : #3083dc (texte blanc dessus : 3.9:1) ; petit texte bleu sur blanc : #2376cf */
:root { --bleu: #3083dc; --bleu-texte: #2376cf; }
.espace-pros { background: #3083dc; }


/* --------------------------------------------------------------------------
   Avis Google : note + carrousel « Derniers avis vérifiés »
   -------------------------------------------------------------------------- */
.avis-tete { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2.6rem; }
.avis-badge {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
  padding: 0.35rem 0.85rem; border-radius: 999px; background: #fff; border: 1px solid var(--trait);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte);
}
.avis-badge .avis-g { width: 1.3rem; height: 1.3rem; font-size: 0.75rem; border-width: 1px; }
.avis-tete h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); }

.avis-note {
  flex: 0 0 22rem; display: block; padding: 1.2rem 1.4rem 1.3rem; background: #fff;
  border-radius: 10px; border: 1px solid var(--trait); text-decoration: none; color: var(--titre);
  box-shadow: var(--ombre-douce);
  border-top: 4px solid; border-image: linear-gradient(90deg, #4285f4 25%, #ea4335 25% 50%, #fbbc04 50% 75%, #34a853 75%) 1;
}
.avis-note-haut { display: flex; align-items: center; gap: 0.5rem; color: var(--texte); font-size: 0.9rem; }
.avis-note-bas { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.4rem; }
.avis-note-bas strong { font-family: var(--police-titres); font-size: 2.8rem; line-height: 1; color: var(--titre); }
.avis-note-bas .etoiles { font-size: 1.3rem; }
.avis-note-lien { margin-left: auto; color: var(--bleu-texte); font-weight: 600; font-size: 0.9rem; }
.avis-note:hover .avis-note-lien { text-decoration: underline; }

.avis-barre { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.avis-derniers { margin: 0; font-weight: 800; color: var(--titre); font-size: 1.1rem; }
.avis-derniers span { color: var(--bleu); margin-right: 0.3rem; }
.avis-fleches { display: flex; gap: 0.5rem; }
.avis-fleche {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--trait); background: #fff;
  color: var(--titre); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.avis-fleche:hover { border-color: var(--bleu); color: var(--bleu-texte); }

.avis-carrousel {
  list-style: none; margin: 0; padding: 0.3rem 0.1rem 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.25rem) / 3);
  gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.avis-carrousel .avis-client { scroll-snap-align: start; }
.avis-carrousel:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
@media (max-width: 960px) { .avis-carrousel { grid-auto-columns: 75%; } .avis-tete { flex-direction: column; align-items: flex-start; } .avis-note { flex-basis: auto; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .avis-carrousel { scroll-behavior: auto; } }

/* Bande aux couleurs Google en haut de la note seulement */
.avis-note { position: relative; overflow: hidden; border: 1px solid var(--trait); border-image: none; padding-top: 1.45rem; }
.avis-note::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #4285f4 25%, #ea4335 25% 50%, #fbbc04 50% 75%, #34a853 75%);
}
.avis-note-lien { white-space: nowrap; }
.avis-note { flex-basis: 24rem; }


/* ==========================================================================
   Hiérarchie de l'accueil (document « hiérarchie complète »)
   ========================================================================== */

/* H1 : le métier + la zone ; « Tout simplement. » en accroche */
.heros-v2 h1 { margin-bottom: 0.4rem; }
.h1-zone {
  display: block; margin-top: 0.6rem;
  font-size: 0.42em; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; color: var(--texte);
}
.h1-accroche {
  margin: 0 0 1.6rem; font-family: var(--police-titres); font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.8rem); letter-spacing: -0.03em; line-height: 1.1; color: var(--bleu);
}

/* Bouton « Demander un devis » dans le menu */
.btn-devis {
  display: inline-flex; align-items: center; padding: 0.6rem 1.15rem !important;
  border-radius: 999px; background: var(--ambre); color: var(--encre) !important;
  font-weight: 700; white-space: nowrap;
}
.btn-devis::after { display: none !important; }
.btn-devis:hover { background: var(--ambre-fonce); }
@media (max-width: 1240px) { .btn-devis { padding: 0.55rem 0.9rem !important; } }

/* Zone : sous-titre sous le H2 */
.zone-sous-titre { font-family: var(--police-titres); font-size: 1.35rem; font-weight: 700; color: #fff; margin: -0.4rem 0 1.2rem; }
.zone-sous-titre em { font-style: normal; color: var(--ambre-vif); }

/* « Pourquoi choisir » : chiffre = preuve, puis avantage expliqué */
.carte-bref .chiffre { text-align: center; }
.chiffre-nombre-texte { font-variant-numeric: normal; }
.chiffre .chiffre-unite { font-size: 1.05rem; opacity: 0.95; }
.chiffre-titre { margin: 0.9rem 0 0.35rem; font-size: 1.1rem; color: #fff; }
.chiffre .chiffre-desc { font-size: 0.92rem; line-height: 1.55; max-width: 15rem; }

/* « Ils nous font confiance » : lien vers les prestations pro */
.confiance-lien { margin: 1.2rem 0 0; }

/* Étapes : 3 cartes + bouton */
.etapes-3 { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
@media (max-width: 860px) { .etapes-3 { grid-template-columns: 1fr; row-gap: 2.4rem; } }
.etapes-action { margin: 2.4rem 0 0; }

/* « Quelques mots sur Transport Lacote » */
.mots-grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.mots-grille h2 { margin: 0; }
.mots-grille p { font-size: 1.05rem; line-height: 1.8; margin-top: 0; }
@media (max-width: 860px) { .mots-grille { grid-template-columns: 1fr; gap: 1rem; } }


/* Prestations & tarifs : « Pourquoi pas de grille tarifaire », mise en page type Dribbble
   (image + carte d'appel qui la chevauche à gauche, texte et liste à coches à droite) */
.prix-grille { display: grid; grid-template-columns: 1fr 1.05fr; gap: 4.5rem; align-items: center; }
.prix-visuel { position: relative; padding: 0 2.5rem 5rem 0; }
.prix-visuel .emplacement-image { aspect-ratio: 5 / 4; border-radius: 18px; }
.prix-appel {
  position: absolute; right: 0; bottom: 0; width: min(19rem, 62%);
  display: flex; flex-direction: column;
  background: var(--bleu); color: #fff; border-radius: 16px;
  padding: 1.6rem 1.5rem 1.5rem; box-shadow: var(--ombre-forte);
}
.prix-appel h3 { color: #fff; font-size: 1.35rem; margin: 0 0 0.6rem; }
.prix-appel p { color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.4rem; }
.prix-appel .prix-appel-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: #fff; color: var(--titre); border-radius: 999px;
  padding: 0.75rem 1.2rem; font-weight: 700; text-decoration: none;
}
.prix-appel .prix-appel-tel:hover { background: rgba(255, 255, 255, 0.88); }
.prix-texte h2 { margin-bottom: 1rem; }
.prix-texte h2 em { font-style: normal; color: var(--bleu); }
.prix-sous-titre { font-size: 1.1rem; margin: 1.8rem 0 1rem; }
.prix-facteurs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.prix-facteurs li { position: relative; padding-left: 2.1rem; line-height: 1.55; }
.prix-facteurs li::before {
  content: ""; position: absolute; left: 0; top: 0.1rem; width: 1.35rem; height: 1.35rem;
  border-radius: 50%; background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.prix-facteurs strong { display: block; color: var(--titre); font-size: 1.05rem; }
.prix-facteurs span { display: block; font-size: 0.95rem; }
@media (max-width: 900px) {
  .prix-grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .prix-visuel { padding: 0 0 4rem; max-width: 34rem; }
  .prix-appel { width: min(19rem, 80%); }
}
.prix-facteurs span a { color: var(--bleu-texte); text-underline-offset: 2px; }

/* Tarifs : pas de trait devant « La transparence d'abord » */
.section-prix .sur-titre::before { display: none; }

/* Prestations & tarifs : secteurs en pastilles (capture Dribbble « Area We Service ») */
.section-secteurs-pastilles { text-align: center; }
.section-secteurs-pastilles .sur-titre::before { display: none; }
.section-secteurs-pastilles h2 em { font-style: normal; color: var(--bleu); }
.section-secteurs-pastilles .intro-section { margin-left: auto; margin-right: auto; }
.pastilles-secteurs {
  list-style: none; margin: 2.4rem auto 0; padding: 0; max-width: 56rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 1.8rem;
}
.pastilles-secteurs .pastille {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-weight: 700; font-size: 1.05rem; color: var(--titre); text-decoration: none;
}
.pastille-repere {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: #fff; border: 1px solid var(--trait); color: var(--texte);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pastille-repere svg { width: 15px; height: 15px; }
.pastilles-secteurs a:hover .pastille-repere,
.pastilles-secteurs a:focus-visible .pastille-repere { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.pastilles-secteurs a:hover { color: var(--bleu-texte); }
.pastilles-action { margin: 2.6rem 0 0; }

/* Qui sommes-nous : atouts façon Dribbble « From Pickup to Disposal »
   (titre + bouton à gauche, cartes 2 par 2 à droite, la première en bleu plein) */
.atouts-grille { display: grid; grid-template-columns: 1fr 1.9fr; gap: 3.5rem; align-items: start; }
.atouts-entete { position: sticky; top: 7rem; }
.atouts-entete h2 { margin-bottom: 1rem; }
.atouts-entete h2 em, .faq-entete h2 em { font-style: normal; color: var(--bleu); }
.atouts-entete p { margin: 0 0 1.6rem; }
.atouts-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.atout {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 16px;
  box-shadow: var(--ombre-douce); padding: 1.8rem 1.7rem 1.9rem;
}
.atout-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--fond); color: var(--titre); margin-bottom: 1.6rem;
}
.atout-icone svg { width: 24px; height: 24px; }
.atout h3 { font-size: 1.3rem; margin: 0 0 0.6rem; }
.atout p { margin: 0; font-size: 0.97rem; line-height: 1.6; }
.atout:first-child { background: var(--bleu); border-color: var(--bleu); }
.atout:first-child .atout-icone { background: #fff; }
.atout:first-child h3, .atout:first-child p { color: #fff; }
.atout a { color: var(--bleu-texte); }
@media (max-width: 900px) {
  .atouts-grille { grid-template-columns: 1fr; gap: 2rem; }
  .atouts-entete { position: static; }
}
@media (max-width: 560px) { .atouts-cartes { grid-template-columns: 1fr; } }

/* Prestations & tarifs : FAQ façon Dribbble « questions »
   (titre à gauche, accordéon à droite, question ouverte en bleu plein) */
.faq-grille { display: grid; grid-template-columns: 1fr 1.35fr; gap: 3.5rem; align-items: start; }
.faq-entete { position: sticky; top: 7rem; }
.faq-entete .sur-titre::before { display: none; }
.faq-entete h2 { margin-bottom: 1rem; }
.faq-colonnes details { border-radius: 12px; border-color: transparent; box-shadow: var(--ombre-douce); }
.faq-colonnes summary::after {
  content: ""; width: 22px; height: 22px; background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.faq-colonnes details[open] { background: var(--bleu); border-color: var(--bleu); box-shadow: var(--ombre-forte); }
.faq-colonnes details[open] summary { color: #fff; }
.faq-colonnes details[open] summary::after {
  content: ""; transform: translateY(-50%) rotate(180deg);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7fd8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.faq-colonnes details[open] .reponse { color: rgba(255, 255, 255, 0.92); }
.faq-colonnes details[open] .reponse a { color: #fff; }
@media (max-width: 900px) {
  .faq-grille { grid-template-columns: 1fr; gap: 1.8rem; }
  .faq-entete { position: static; }
}

/* Bandeau d'annonce tout en haut (capture Dribbble « annonce ») */
.bandeau-annonce { background: var(--titre); color: #fff; font-size: 0.86rem; font-weight: 500; }
.bandeau-annonce .conteneur {
  display: flex; align-items: center; gap: 1.6rem; min-height: 2.6rem; padding-top: 0.35rem; padding-bottom: 0.35rem;
}
.ba-item { display: inline-flex; align-items: center; gap: 0.45rem; color: #fff; text-decoration: none; }
.ba-item svg { width: 15px; height: 15px; flex: none; }
.ba-horaires { opacity: 0.85; }
.ba-droite { margin-left: auto; display: inline-flex; gap: 1.6rem; }
a.ba-item:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .ba-horaires { display: none; } }
@media (max-width: 640px) {
  .ba-adresse, .ba-mail { display: none; }
  .bandeau-annonce .conteneur { justify-content: center; }
  .ba-droite { margin: 0; }
}

/* Étapes avec pictogrammes et flèches courbes (capture Dribbble « étape ») */
.section-etapes-icones h2 em { font-style: normal; color: var(--bleu); }
.section-etapes-icones .sur-titre::before { display: none; }
.etapes-icones {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem;
}
.etapes-icones li { position: relative; text-align: center; }
.ei-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: #fff; color: var(--titre); box-shadow: var(--ombre-douce); margin-bottom: 1.2rem;
}
.ei-icone svg { width: 26px; height: 26px; }
.etapes-icones li:first-child .ei-icone { background: var(--bleu); color: #fff; }
.etapes-icones li:not(:last-child)::after {
  content: ""; position: absolute; top: 0.9rem; left: calc(50% + 3.2rem);
  width: calc(100% - 6.4rem + 2.4rem); height: 2.2rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' fill='none' stroke='%230e2033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 C 35 40, 80 38, 112 22'/%3E%3Cpath d='M102 18 L113 22 L105 30'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 0.75;
}
.etapes-icones li:nth-child(even)::after { transform: scaleY(-1); }
.etapes-icones h3 { font-size: 1.2rem; margin: 0 0 0.6rem; }
.etapes-icones p { margin: 0 auto; max-width: 17rem; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 960px) {
  .etapes-icones { grid-template-columns: 1fr 1fr; row-gap: 2.8rem; }
  .etapes-icones li::after { display: none; }
}
@media (max-width: 560px) { .etapes-icones { grid-template-columns: 1fr; } }

/* Accueil : badge Google sous les boutons du héros (capture « google badge ») */
.badge-google {
  display: inline-flex; flex-direction: column; gap: 0.15rem; margin-top: 1.6rem;
  padding-left: 1.1rem; border-left: 2px solid var(--trait); text-decoration: none; color: var(--texte);
}
.bg-etoiles { color: #fbbc05; letter-spacing: 0.12em; font-size: 1.05rem; line-height: 1; }
.bg-ligne { display: inline-flex; align-items: baseline; gap: 0.55rem; }
.bg-logo { font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.bg-logo span:nth-child(1), .bg-logo span:nth-child(4) { color: #4285f4; }
.bg-logo span:nth-child(2), .bg-logo span:nth-child(6) { color: #ea4335; }
.bg-logo span:nth-child(3) { color: #fbbc05; }
.bg-logo span:nth-child(5) { color: #34a853; }
.bg-note { font-size: 0.95rem; font-weight: 600; color: var(--titre); }
.badge-google:hover .bg-note { text-decoration: underline; text-underline-offset: 3px; }

/* Formulaire : message « secteur non desservi » */
/* Messages d'erreur des villes : même encadré que l'aide de la date souhaitée */
.dc-erreur-champ {
  margin-top: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 4px;
  background: #fff4ec; border-left: 3px solid var(--ambre); color: var(--titre);
  font-size: 0.88rem;
}

/* Pied de page : coordonnées façon capture « footer » */
.pied-coord address { font-style: normal; display: grid; gap: 0.85rem; margin: 1.6rem 0 1.8rem; }
.pied-logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #fff; }
.pied-logo strong { display: block; font-family: var(--police-titres); font-size: 1.2rem; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; }
.pied-logo strong + span { display: block; font-size: 0.85rem; opacity: 0.8; }
.pied-ligne { display: flex; align-items: center; gap: 0.8rem; color: inherit; text-decoration: none; line-height: 1.4; }
.pied-ligne small { opacity: 0.75; font-size: 0.85em; }
a.pied-ligne:hover { text-decoration: underline; text-underline-offset: 3px; }
.pied-rond {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.95;
}
.pied-rond svg { width: 12px; height: 12px; }
.pied-contact { background: var(--ambre); color: var(--encre); border-radius: 8px; padding: 0.8rem 1.5rem; font-weight: 700; }
.pied-contact:hover { background: var(--ambre-fonce); }
.pied .pied-contact, .pied .pied-contact:hover { color: var(--encre); text-decoration: none; }
/* Le bandeau orange remplace le liseré bleu du haut de l'en-tête */
.entete::before { display: none; }

/* Zones d'intervention : villes en pastilles cliquables entières, sans soulignement,
   pastille orange au survol */
.zone-dep-villes li { padding: 0; overflow: hidden; }
.zone-dep-villes li a {
  display: block; padding: 0.3rem 0.75rem; border-radius: 999px;
  color: #fff; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.zone-dep-villes li a:hover,
.zone-dep-villes li a:focus-visible { background: var(--ambre); color: var(--encre); }
.zone-dep-titre a { text-decoration: none; }
.zone-dep-titre a:hover { color: var(--ambre); }

/* « Pourquoi choisir » : descriptions sans gras */
.chiffre .chiffre-desc { font-weight: 400; }

/* Accueil : « Votre projet, étape par étape » en 3 étapes à pictogrammes */
.etapes-icones.ei-3 { grid-template-columns: repeat(3, 1fr); }
.ei-moment {
  margin: 0 0 0.3rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bleu-texte);
}
@media (max-width: 960px) { .etapes-icones.ei-3 { grid-template-columns: 1fr; } }

/* Accueil : bouton « Commencer mon devis » centré sous les étapes */
.etapes-action-centre { text-align: center; }

/* Prestations : « Ce que nous savons faire » façon « From Pickup » */
.atout-lien { display: inline-block; margin-top: 1rem; font-weight: 700; font-size: 0.92rem; color: var(--titre); text-decoration: none; }
.atout-lien:hover { color: var(--bleu-texte); }
.atout:first-child .atout-lien { color: #fff; }
.atouts-entete .sur-titre::before { display: none; }

/* Rubrique « Nos conseils » (articles du blog) */
.articles-entete { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.articles-entete h2 { margin: 0; }
.articles-entete h2 em { font-style: normal; color: var(--bleu); }
.section-articles .sur-titre::before { display: none; }
.grille-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.carte-article {
  display: flex; flex-direction: column; background: var(--carte); border-radius: 16px;
  box-shadow: var(--ombre-douce); padding: 1.6rem 1.5rem 1.5rem;
}
.article-cat { margin: 0 0 0.7rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bleu-texte); }
.carte-article h3 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.carte-article h3 a { color: var(--titre); text-decoration: none; }
.carte-article h3 a:hover { color: var(--bleu-texte); }
.carte-article p { font-size: 0.94rem; line-height: 1.6; margin: 0 0 1.2rem; }
.article-lire { margin-top: auto; font-weight: 700; font-size: 0.92rem; color: var(--titre); text-decoration: none; }
.article-lire:hover { color: var(--bleu-texte); }

/* Pages d'article */
.article-corps { max-width: 46rem; }
.article-corps h2 { font-size: 1.5rem; margin: 2.4rem 0 0.8rem; }
.article-corps h2:first-child { margin-top: 0; }
.article-corps p, .article-corps li { font-size: 1.04rem; line-height: 1.8; }
.article-retour { margin-top: 2.6rem; }
.articles-entete .btn-secondaire { color: var(--titre); border: 1.5px solid var(--titre); background: transparent; }
.articles-entete .btn-secondaire:hover { background: var(--titre); color: #fff; }

/* Bulle d'aide « Une question ? » (assets/js/chat.js) */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: 0.8rem; }
.chat-bouton {
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ambre); color: var(--encre); box-shadow: 0 10px 28px rgba(13, 33, 55, 0.28);
  display: flex; align-items: center; justify-content: center; transition: transform 0.15s;
}
.chat-bouton:hover { transform: translateY(-2px); }
.chat-bouton svg { width: 26px; height: 26px; }
.chat-ouvert .chat-bouton { background: var(--titre); color: #fff; }
.chat-panneau {
  width: min(360px, calc(100vw - 40px)); max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(13, 33, 55, 0.3);
}
.chat-panneau[hidden] { display: none; }
.chat-entete { display: flex; align-items: center; justify-content: space-between; background: var(--titre); color: #fff; padding: 0.95rem 1.1rem; }
.chat-titre { margin: 0; font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; color: #fff; }
.chat-sous-titre { margin: 0; font-size: 0.8rem; opacity: 0.8; }
.chat-fermer { background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
.chat-fil { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--fond); }
.chat-msg { max-width: 88%; padding: 0.65rem 0.85rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; }
.chat-msg p { margin: 0; }
.chat-nous { align-self: flex-start; background: #fff; color: var(--titre); border-bottom-left-radius: 4px; }
.chat-moi { align-self: flex-end; background: var(--titre); color: #fff; border-bottom-right-radius: 4px; }
.chat-lien { display: inline-block; margin-top: 0.4rem; font-weight: 700; color: var(--bleu-texte); text-decoration: none; }
.chat-lien:hover { text-decoration: underline; }
.chat-choix { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.8rem; border-top: 1px solid var(--trait); max-height: 40%; overflow-y: auto; }
.chat-question {
  border: 1px solid var(--trait); background: #fff; color: var(--titre); border-radius: 999px;
  padding: 0.4rem 0.75rem; font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: none;
}
.chat-question:hover, .chat-question:focus-visible { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
.chat-appel { font-weight: 700; }
@media (max-width: 520px) { .chat { right: 12px; bottom: 12px; } }

/* Cartes articles : image en haut (photo ou illustration) */
.carte-article { padding: 0; overflow: hidden; }
.article-texte { display: flex; flex-direction: column; flex: 1; padding: 1.3rem 1.5rem 1.5rem; }
.article-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.article-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.carte-article:hover .article-image img { transform: scale(1.04); }
.article-illu { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.article-illu svg { width: 64px; height: 64px; }
.article-illu-devis  { background: #dbe8f7; color: var(--bleu-texte); }
.article-illu-horloge { background: #fde3d8; color: #b8350f; }
.article-illu-maison { background: var(--titre); color: #fff; }
.article-illu-meuble { background: var(--bleu); color: #fff; }

/* Nous rejoindre : « Pourquoi nous rejoindre » avec une image à droite, sans tiret */
.section-rejoindre .sur-titre::before { display: none; }
.rejoindre-grille { align-items: center; }
.rejoindre-image { aspect-ratio: 1 / 1; border-radius: 18px; }
.sous-section-premiere { margin-top: 0; }

/* ==========================================================================
   Contrastes WCAG AA (2026-10-06) et orange adouci
   - bleu un peu plus foncé : texte blanc dessus 5,1:1 (au lieu de 3,9)
   - petits textes bleus : 6,0:1 sur blanc, 4,9:1 sur gris clair
   - orange moins vif (#f26a3d) : texte bleu nuit dessus 5,4:1 (au lieu de 4,6)
   ========================================================================== */
:root {
  --bleu: #226fc4;
  --bleu-bouton: #226fc4;
  --bleu-texte: #1d64b0;
  --ambre: #f26a3d;
  --ambre-vif: #f26a3d;
  --ambre-fonce: #dc5428;
  --ambre-texte: #c94a1f;
  --degrade-ambre: linear-gradient(120deg, #f26a3d, #f26a3d);
}
/* Petits textes sur fond bleu : blanc plein */
.chiffre .chiffre-desc, .prix-appel p, .faq-colonnes details[open] .reponse,
.atout:first-child p, .entete-page p, .espace-pros p { color: #fff; }

/* Accueil : ligne des départements remontée sous le titre */
.heros-departements-haut { margin: 0.6rem 0 0.4rem; }
.espace-pros { background: var(--bleu); }

/* Nous rejoindre, d'après la capture « hiring » */
.avantages { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.avantage {
  display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 12px;
  box-shadow: var(--ombre-douce); padding: 0.85rem 1.1rem; line-height: 1.5; color: var(--texte);
}
.avantage strong { color: var(--titre); }
.avantage-icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.avantage-icone svg { width: 18px; height: 18px; }
.avantage-bleu .avantage-icone { background: var(--bleu); }
.avantage-orange .avantage-icone { background: var(--ambre-texte); }
.avantage-nuit .avantage-icone { background: var(--titre); }

.section-offre { text-align: center; padding-top: 0; }
.offre-titre-section em { font-style: normal; color: var(--bleu); }
.carte-offre {
  max-width: 34rem; margin: 2rem auto 0; text-align: left; background: var(--bleu); color: #fff;
  border-radius: 20px; padding: 1.8rem 1.8rem 1.6rem; box-shadow: var(--ombre-forte);
}
.offre-haut { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.offre-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--titre); }
.offre-avatar svg { width: 24px; height: 24px; }
.carte-offre h3 { color: #fff; font-size: 1.25rem; margin: 0; }
.offre-lieu { margin: 0.15rem 0 0; color: #fff; opacity: 0.9; font-size: 0.92rem; }
.carte-offre > p { color: #fff; line-height: 1.6; margin: 0 0 1.1rem; }
.offre-etiquettes { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.offre-etiquettes li { background: rgba(255, 255, 255, 0.18); color: #fff; border-radius: 999px; padding: 0.35rem 0.85rem; font-size: 0.85rem; font-weight: 600; }
.offre-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.offre-bas span { font-weight: 700; color: #fff; }

/* Accueil : pas d'écart entre la ligne des départements et « Tout simplement. » */
.heros-departements-haut { margin-bottom: 0; }
.heros-departements-haut + .h1-accroche { margin-top: 0.3rem; }
.heros-v2 .heros-departements-haut { margin: 0.5rem 0 0; align-items: flex-start; }
.heros-departements-haut svg { margin-top: 0.2em; }
.heros-departements-haut { flex-wrap: nowrap; }
.heros-departements .insecable { white-space: nowrap; }

/* Nous rejoindre : pictogrammes des avantages tous en bleu foncé */
.avantage .avantage-icone { background: var(--titre); }
.section-offre { padding-top: 5.4rem; }

/* Badge Google : lien « Voir nos avis Google » à côté de la note */
.bg-voir { font-size: 0.9rem; font-weight: 600; color: var(--bleu-texte); margin-left: 0.4rem; padding-left: 0.6rem; border-left: 1px solid var(--trait); }
.badge-google:hover .bg-voir { text-decoration: underline; text-underline-offset: 3px; }
.badge-google:hover .bg-note { text-decoration: none; }

/* Formulaire : message unique pour les villes, pleine largeur */
.dc-erreur-villes { margin: -0.4rem 0 1rem; }

/* Accueil : « Tout simplement. » puis la ligne des départements */
.heros-v2 .h1-accroche { margin: 0.3rem 0 0; }
.heros-v2 .heros-departements-haut { margin: 0.6rem 0 1.6rem; }

/* Formulaires : sans bordure orange en haut */
.devis-carte { border-top: 0; }
.formulaire::before { display: none; }

/* Bulle d'aide masquée tant que le haut de l'accueil est visible (voir chat.js) */
.chat { transition: opacity 0.25s, transform 0.25s, visibility 0.25s; }
.chat.chat-cache { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }

/* Accueil : moins d'espace vide sous le formulaire, avant le bandeau des prestations */
.heros-v2 { padding-bottom: 2.8rem; }

/* Accueil (écran d'ordinateur) : le haut de page + la bande des prestations remplissent
   exactement l'écran, sans bande blanche en bas. 72px = menu, 4.2rem = bande bleu nuit. */
@media (min-width: 1000px) {
  .heros-v2 {
    min-height: calc(100vh - 72px - 4.2rem);
    min-height: calc(100svh - 72px - 4.2rem);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 2rem; padding-bottom: 2rem;
  }
}

/* Accueil : bouton « Appeler » en bleu (même bleu que le bouton téléphone du menu) */
.btn-appel-bleu { background: var(--bleu) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(34, 111, 196, 0.28) !important; }
.btn-appel-bleu:hover { background: var(--bleu-texte) !important; }

/* Orange encore adouci (2026-10-07) : #f38b65, texte bleu nuit dessus 6,7:1 */
:root {
  --ambre: #f38b65;
  --ambre-vif: #f38b65;
  --ambre-fonce: #e5734c;
  --ambre-texte: #b5532f;
  --degrade-ambre: linear-gradient(120deg, #f38b65, #f38b65);
}
#pourquoi .chiffre .chiffre-desc { font-style: italic; }

/* Badge Google plus discret */
.badge-google { margin-top: 1.2rem; padding-left: 0.8rem; gap: 0.1rem; }
.bg-etoiles { font-size: 0.8rem; }
.bg-logo { font-size: 1.05rem; }
.bg-note { font-size: 0.82rem; }

/* Tous les titres H2 en 36px (2026-10-07). Sur téléphone, 28px pour éviter les
   coupures de mots sur des écrans de 360px de large. */
h2, main h2, .section h2, .section-zone h2, .bandeau-cta h2, .bandeau-slogan h2,
.article-corps h2, .avis-entete h2, .avis-tete h2, .titre-formulaire { font-size: 36px !important; }
@media (max-width: 600px) {
  h2, main h2, .section h2, .section-zone h2, .bandeau-cta h2, .bandeau-slogan h2,
  .article-corps h2, .avis-entete h2, .avis-tete h2, .titre-formulaire { font-size: 28px !important; }
}
#zone .zone-dep-titre a { text-decoration: none !important; }

/* Boutons d'action : ombre très légère (l'ombre forte donnait un effet « touche ») */
.btn, .btn-primaire, .btn-tel, .btn-devis, .btn-appel-bleu, .prix-appel-tel, .pied-contact,
.dc-continuer, .dc-envoyer {
  box-shadow: 0 2px 6px rgba(13, 33, 55, 0.12) !important;
}
.btn:hover, .btn-primaire:hover, .btn-tel:hover, .btn-devis:hover, .btn-appel-bleu:hover,
.prix-appel-tel:hover, .pied-contact:hover {
  box-shadow: 0 4px 10px rgba(13, 33, 55, 0.16) !important;
}
.btn-secondaire { box-shadow: none !important; }

/* Étapes : bulles plus marquées */
.ei-icone { box-shadow: 0 12px 28px rgba(13, 33, 55, 0.18), 0 2px 6px rgba(13, 33, 55, 0.08); }
.etapes-icones li:first-child .ei-icone { box-shadow: 0 12px 28px rgba(34, 111, 196, 0.38), 0 2px 6px rgba(13, 33, 55, 0.1); }

/* Nous rejoindre : photo détourée du livreur sur un fond bleu arrondi (capture « hiring ») */
.rejoindre-visuel {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  background: var(--bleu); border-radius: 22px; overflow: hidden;
  aspect-ratio: 1 / 1; padding-top: 2rem;
}
.rejoindre-visuel img { width: 66%; height: auto; display: block; }
/* Nous rejoindre : photo du livreur sans fond bleu */
.rejoindre-visuel { background: none; border-radius: 0; aspect-ratio: auto; padding-top: 0; }
.rejoindre-visuel img { width: 72%; }
.heros-v2 .heros-departements-haut { margin-bottom: 4rem; }
.section-grise .prix-visuel .emplacement-image { background: #fff; }

/* Hauts de page des pages intérieures : même fond clair que l'accueil (2026-10-07) */
.entete-page { background: var(--bleu-pale) !important; }
.entete-page h1 { color: var(--titre) !important; }
.entete-page p { color: var(--texte) !important; }

/* Nous rejoindre : l'offre et le détail du poste à gauche, le formulaire fixe à droite */
.candidature-grille { align-items: start; }
.candidature-grille .offre-titre-section { margin-top: 0; }
.candidature-grille .carte-offre { max-width: none; margin: 1.4rem 0 0.6rem; }
@media (min-width: 900px) {
  .candidature-formulaire { position: sticky; top: 92px; }
}

/* Nous rejoindre : l'offre sur toute la largeur, au-dessus des missions et du formulaire */
#candidature .carte-offre { max-width: none; margin: 1.4rem 0 3rem; }
#candidature .offre-titre-section { margin-top: 0; }
/* Contact : carte « Nous joindre » sans liseré orange */
.carte-info::before { display: none; }
#candidature .offre-bas { justify-content: flex-end; margin-top: -0.4rem; }
#candidature .offre-etiquettes { margin-bottom: 0; }
#candidature .carte-offre { margin-top: 0; }
/* Nous rejoindre : formulaire de candidature moins large */
@media (min-width: 900px) {
  .candidature-grille { grid-template-columns: 1.5fr 1fr; }
}

/* Plus de petits sur-titres au-dessus des titres H2, sur tout le site (2026-10-07).
   Le texte reste dans le code : supprimer cette règle pour les faire revenir. */
.sur-titre { display: none !important; }

/* Prestations & tarifs : photo des livreurs à la place de « Image à venir » */
.prix-photo { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 72% 30%; border-radius: 18px; }
.prix-photo { aspect-ratio: 4 / 3; }

/* Cartes « Notre savoir-faire » / atouts : toutes blanches, bleu seulement au survol */
.atout:first-child { background: var(--carte); border-color: var(--trait); }
.atout:first-child .atout-icone { background: var(--fond); }
.atout:first-child h3 { color: var(--titre); }
.atout:first-child p { color: var(--texte); }
.atout { transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.atout:hover { background: var(--bleu); border-color: var(--bleu); transform: translateY(-3px); }
.atout:hover .atout-icone { background: #fff; }
.atout:hover h3, .atout:hover p { color: #fff !important; }
.atout:hover a { color: #fff; }

/* Prestations : les cartes du savoir-faire sur toute la largeur, sans colonne de titre */
.atouts-cartes-large { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .atouts-cartes-large { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .atouts-cartes-large { grid-template-columns: 1fr; } }

/* Haut des pages intérieures : boutons d'action sous la phrase d'introduction */
.entete-actions { margin-top: 1.6rem; }
.entete-actions .btn-secondaire { background: #fff; color: var(--titre); border: 1px solid var(--trait); }
.entete-actions .btn-secondaire:hover { border-color: var(--bleu); color: var(--bleu-texte); }

/* Tarifs : sans la carte « Un prix ferme », la photo n'a plus besoin de marge pour elle */
.prix-visuel { padding: 0; }
/* Accueil : plus d espace entre « Votre besoin, notre métier. » et les onglets */
.besoin-entete { margin-bottom: 2.4rem !important; }
.section-besoin .besoin-onglets { margin-top: 1.4rem; }
/* Cartes « Votre besoin » sans icône : hauteur selon le contenu */
.carte-besoin { min-height: 0; }
.carte-besoin .carte-besoin-devis { margin-top: 1.8rem; }
/* Cartes « Votre besoin » en bleu clair (2026-10-07) */
.carte-besoin { background: var(--bleu) !important; color: #fff !important; }
.carte-besoin > p { color: #fff !important; }
.carte-besoin h3 a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.carte-besoin-devis { color: #fff !important; }
.carte-besoin-devis::after { background: #fff; }
/* Nous rejoindre : listes des missions et du profil en retrait (alinéa) */
.candidature-grille .liste-coche { padding-left: 3rem; }
/* Nous rejoindre : missions en simple liste à points */
.liste-points { list-style: disc; margin: 0 0 1rem; padding-left: 3rem; display: grid; gap: 0.55rem; }
.liste-points li { padding-left: 0.3rem; line-height: 1.6; }
.liste-points li::marker { color: var(--titre); }
.candidature-grille .liste-points { margin-top: 1.2rem; padding-left: 4.2rem; }
.candidature-grille .liste-points + h3, .candidature-grille h3 + .liste-points { margin-top: 1rem; }
.candidature-grille .liste-points + h3 { margin-top: 2.2rem; }

/* Accueil, « Votre besoin, notre métier » : cartes au style de la page Prestations */
.besoin-grille .atout { display: flex; flex-direction: column; }
.besoin-grille .atout h3 a { color: inherit; text-decoration: none; }
.besoin-grille .atout .atout-lien { margin-top: auto; padding-top: 1.2rem; }
.besoin-grille .atout:hover .atout-lien { color: #fff; }
.besoin-grille .atout:first-child .atout-lien { color: var(--bleu-texte); }
.besoin-grille .atout:hover .atout-lien, .besoin-grille .atout:first-child:hover .atout-lien { color: #fff; }
/* Zones d intervention : carte sans cadre */
.zone-panneau { background: none; border: 0; padding: 0; }
/* Zones d intervention : texte sur toute la largeur de sa colonne */
.section-zone .zone-texte > p { max-width: none; }
.confiance-logos { margin-bottom: 0; }

/* « Ils nous font confiance » : titre de niveau 3, plus discret qu'un titre de section */
.bandeau-confiance h3.confiance-titre { font-size: 1.5rem; font-weight: 400; }

/* Zones d intervention : texte centré verticalement par rapport à la carte + villes.
   Les 6 listes de villes sont superposées dans la même case : la colonne de gauche
   garde la hauteur de la plus longue (l'Aude), donc le texte ne bouge plus quand on
   change de département. Seule la liste du département choisi est visible. */
@media (min-width: 961px) {
  .section-zone .zone-grille { align-items: center; }
  .zone-panneau { display: grid; grid-template-columns: minmax(0, 1fr); }
  .zone-panneau .zone-dep-villes { display: block; visibility: hidden; grid-row: 10; grid-column: 1; }
  #zone:has(#zone-11:checked) .zone-dep-villes[data-dep="11"],
  #zone:has(#zone-31:checked) .zone-dep-villes[data-dep="31"],
  #zone:has(#zone-34:checked) .zone-dep-villes[data-dep="34"],
  #zone:has(#zone-66:checked) .zone-dep-villes[data-dep="66"],
  #zone:has(#zone-81:checked) .zone-dep-villes[data-dep="81"],
  #zone:has(#zone-09:checked) .zone-dep-villes[data-dep="09"] { visibility: visible; }
}

/* Séparateur entre « Ils nous font confiance » et les avis clients (même fond gris) :
   fine ligne en haut du bloc des avis, de la largeur du contenu */
.bandeau-confiance + script + .section-avis > .conteneur { border-top: 1px solid rgba(13, 33, 55, 0.15); padding-top: 3.5rem; }
.bandeau-confiance + script + .section-avis { padding-top: 0; }

/* Haut de page avec photo de fond (ex. Prestations & tarifs) : l'image est déjà
   assombrie en bleu nuit, donc texte en blanc. Image indiquée dans la page (style). */
.entete-page.entete-photo { background-color: var(--marine) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; padding: 5.5rem 0; }
.entete-page.entete-photo::before { display: none; }
.entete-page.entete-photo h1 { color: #fff !important; }
.entete-page.entete-photo p { color: rgba(255, 255, 255, 0.88) !important; }

/* Tarifs (« Pourquoi nous n'affichons pas de grille tarifaire ? ») : photo retirée,
   le texte occupe seul la largeur */
.prix-grille { grid-template-columns: minmax(0, 1fr); }

/* Accueil : photo de fond du haut de page (image déjà assombrie en bleu nuit),
   textes de gauche passés en clair pour rester lisibles. Le formulaire ne change pas. */
.heros.heros-v2 {
  background: var(--marine) url("../img/photos/accueil-demenagement.jpg") center / cover no-repeat;
}
.heros-v2 h1 { color: #fff; }
.heros-v2 .h1-accroche { color: var(--ambre); }
.heros-v2 .heros-departements { color: rgba(255, 255, 255, 0.88); }
.heros-v2 .heros-departements svg { stroke: #fff; }
.heros-v2 .badge-google { border-left-color: rgba(255, 255, 255, 0.3); color: #fff; }
.heros-v2 .bg-note { color: #fff; }

/* Bandeau des prestations (tout en haut de l'accueil) : version plus fine, façon barre d'annonce */
.bandeau-prestations ul { height: 2.6rem; }
.bandeau-prestations a { font-size: 0.95rem; gap: 0.55rem; }
.bandeau-prestations svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) {
  .bandeau-prestations ul { height: auto; padding: 0.6rem 0; }
}

/* Menu plus haut (+25px environ) : sur l'écran de référence, la photo de l'accueil
   descend ainsi jusqu'en bas de l'écran, sans bande blanche */
.entete .conteneur { padding-block: 1.65rem; }

/* « Un transporteur local, secteur par secteur » (page Prestations) : fond bleu nuit,
   comme le bloc de la carte de l'accueil ; textes en clair */
.section-secteurs-pastilles { background: var(--marine); color: rgba(255, 255, 255, 0.85); }
.section-secteurs-pastilles h2 { color: #fff; }
.section-secteurs-pastilles h2 em { color: var(--ambre-vif); }
.section-secteurs-pastilles .sur-titre { color: var(--ambre-vif); }
.section-secteurs-pastilles .intro-section { color: rgba(255, 255, 255, 0.85); }
.section-secteurs-pastilles .pastille { color: #fff; }
.section-secteurs-pastilles .pastille-repere { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.section-secteurs-pastilles .pastilles-secteurs a:hover { color: var(--ambre-vif); }
.section-secteurs-pastilles .pastilles-secteurs a:hover .pastille-repere,
.section-secteurs-pastilles .pastilles-secteurs a:focus-visible .pastille-repere { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }

/* Nouveaux logos clients (2026-10-07) : hauteurs ajustées selon leur forme */
.confiance-logos .logo-chateau-dax { height: 48px; }
.confiance-logos .logo-chez-vous { height: 74px; }
.confiance-logos .logo-caz-la-cuisine { height: 68px; mix-blend-mode: normal; border-radius: 6px; }

/* « Ils nous font confiance » : logos sur une seule ligne qui défilent en continu.
   La liste contient les logos 2 fois : on la décale de la moitié de sa largeur, puis
   on recommence, sans à-coup. Pause au survol. Espacement en marge droite (et non en
   « gap ») pour que les deux moitiés soient exactement égales. Le fond de la bande est
   repris sur la liste pour que le fondu des logos (blanc invisible) fonctionne. */
.confiance-defile { overflow: hidden; }
.confiance-defile .confiance-logos {
  flex-wrap: nowrap; justify-content: flex-start; gap: 0;
  width: max-content; margin: 0;
  background: #e6e8e6;
  animation: logos-defile 45s linear infinite;
}
.confiance-defile .confiance-logos li { flex-shrink: 0; padding-right: 4.5rem; }
.confiance-defile:hover .confiance-logos { animation-play-state: paused; }
@keyframes logos-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Téléphone : frise qu'on fait glisser au doigt (assets/js/frise.js pose la classe et
   déplace la liste) ; le défilement vertical de la page reste possible */
.confiance-defile.frise-tactile { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.confiance-defile.frise-tactile .confiance-logos { animation: none; will-change: transform; }
.confiance-defile.frise-tactile img { -webkit-user-drag: none; pointer-events: none; }

/* Mouvement réduit demandé par le visiteur : logos fixes, sur plusieurs lignes, sans la copie */
@media (prefers-reduced-motion: reduce) {
  .confiance-defile .confiance-logos { flex-wrap: wrap; justify-content: center; width: auto; gap: 2rem 0; animation: none; }
  .confiance-defile .confiance-logos li[aria-hidden="true"] { display: none; }
}

/* Bande de logos sans titre : même espace au-dessus et en dessous */
.bandeau-confiance { padding: 2.8rem 0; }

/* Nouveau logo (pictogramme camion + électroménager) dans le menu et le pied de page */
.logo-image { display: block; flex-shrink: 0; width: auto; height: 42px; }
.pied-logo .logo-image { height: 38px; }

/* ESSAI (2026-10-07) — Accueil, « Votre projet, étape par étape », d'après la capture
   « étapes » (nextories) : une étape par ligne, en zigzag. Grande illustration d'un côté,
   numéro dans un rond blanc + titre + texte de l'autre ; on alterne à chaque étape.
   Pour annuler l'essai : supprimer ce bloc jusqu'à « FIN ESSAI ». */
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones)::before { display: none; }   /* pas de fond gris ni d'arc (demande du 2026-10-07) */
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .conteneur { position: relative; }
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones {
  display: block; counter-reset: etape; max-width: 56rem; margin: 3rem auto 0; padding: 0;
}
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li {
  display: grid; grid-template-columns: 15rem 3.6rem minmax(0, 1fr); column-gap: 1.8rem;
  align-items: start; padding: 2.4rem 0; text-align: left; counter-increment: etape;
}
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li::after { display: none; }
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li::before {          /* numéro dans un rond blanc */
  content: counter(etape); grid-column: 2; grid-row: 1 / span 2; align-self: start;
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 18px rgba(13, 33, 55, 0.12);
  font-family: var(--police-titres); font-weight: 800; font-size: 1.5rem; color: var(--titre);
}
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones .ei-icone {            /* grande illustration */
  grid-column: 1; grid-row: 1 / span 2; justify-self: center; align-self: center;
  width: 8.5rem; height: 8.5rem; border-radius: 0; margin: 0;
  background: none !important; box-shadow: none !important; color: var(--bleu) !important;
}
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones .ei-icone svg { width: 100%; height: 100%; stroke-width: 1.3; }
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones h3 {
  grid-column: 3; grid-row: 1; margin: 0.5rem 0 0.8rem;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--titre);
}
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones p { grid-column: 3; grid-row: 2; margin: 0; max-width: 24rem; font-size: 0.98rem; }
/* une étape sur deux : texte à gauche, illustration à droite */
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even) { grid-template-columns: 3.6rem minmax(0, 1fr) 15rem; }
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even)::before { grid-column: 1; }
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even) .ei-icone { grid-column: 3; }
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even) h3,
:is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even) p { grid-column: 2; }
@media (max-width: 760px) {
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li,
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even) { grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 1rem; padding: 1.6rem 0; }
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones .ei-icone { display: none; }
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li::before,
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even)::before { grid-column: 1; }
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones h3, :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones p,
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even) h3,
  :is(#savoir-faire, .heros-contact ~ main .section-etapes-icones) .etapes-icones li:nth-child(even) p { grid-column: 2; }
}
/* FIN ESSAI étapes en zigzag */

/* Bande des logos partenaires plus basse (2026-10-08) : moins d'espace autour,
   logos un peu plus petits (même proportions entre eux) */
.bandeau-confiance { padding: 1.6rem 0; }
.confiance-defile .confiance-logos img { height: 46px; }
.confiance-defile .confiance-logos .logo-lapeyre { height: 43px; }
.confiance-defile .confiance-logos .logo-but { height: 64px; }
.confiance-defile .confiance-logos .logo-amazon { height: 37px; }
.confiance-defile .confiance-logos .logo-chateau-dax { height: 36px; }
.confiance-defile .confiance-logos .logo-chez-vous { height: 55px; }
.confiance-defile .confiance-logos .logo-caz-la-cuisine { height: 50px; }
.confiance-defile .confiance-logos li { padding-right: 3.5rem; }

/* Avis : sans le libellé « Derniers avis vérifiés », les flèches restent calées à droite */
.avis-barre { justify-content: flex-end; }

/* « Pourquoi choisir Transport Lacote ? » : titre et phrase calés à gauche (2026-10-08) */
.section-pourquoi h2, .section-pourquoi .pourquoi-sous-titre { text-align: left; }
.section-pourquoi .pourquoi-sous-titre { margin-left: 0; margin-right: auto; }

/* « Votre besoin, notre métier. » : description sous le titre (et non plus à droite) */
.section-besoin .besoin-entete { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.section-besoin .besoin-entete > p { max-width: 44rem; }

/* Avis : lien « Voir tous les avis » remis seul, à droite du titre (2026-10-08) */
.avis-tous { color: var(--bleu-texte); font-weight: 600; white-space: nowrap; text-decoration: none; }
.avis-tous:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Formulaire de devis en 3 étapes (2026-10-08) : 1. projet, 2. précisions (étage, accès,
   détail du transport), 3. coordonnées. Sans JavaScript : #dc-suite affiche l'étape 2,
   #dc-suite2 l'étape 3. */
.dc-etape-precisions { display: none; }
.devis-carte:has(#dc-suite:checked) .dc-etape-precisions { display: block; }
.devis-carte:has(#dc-suite:checked) .dc-etape2 { display: none; }
.devis-carte:has(#dc-suite2:checked) .dc-etape1,
.devis-carte:has(#dc-suite2:checked) .dc-etape-precisions { display: none; }
.devis-carte:has(#dc-suite2:checked) .dc-etape2 { display: block; }
/* « Continuer » de l'étape 2 grisé tant que « Que faut-il transporter ? » est vide */
.devis-carte:has(.dc-etape-precisions :invalid) .dc-continuer2 { opacity: 0.5; pointer-events: none; box-shadow: none; }
/* Petits intertitres de l'étape 2 */
.dc-groupe {
  margin: 1.4rem 0 0.8rem; padding-top: 1rem; border-top: 1px solid var(--trait);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte);
}
.dc-sous-titre + .dc-groupe { border-top: 0; padding-top: 0; margin-top: 0.6rem; }
.dc-champ textarea {
  width: 100%; padding: 0.8rem 0.95rem; border: 1px solid #c9d3df; border-radius: 8px;
  background: #fff; color: var(--titre); font: inherit; resize: vertical; min-height: 5.5rem;
}
.dc-champ textarea:focus { outline: 3px solid var(--bleu); outline-offset: 0; border-color: var(--bleu); }
.dc-continuer2 + .dc-retour { margin-top: 0.8rem; }

/* Page Contact : haut de page comme l'accueil (photo, texte à gauche, formulaire à droite) */
.heros-contact .heros-chapeau { color: rgba(255, 255, 255, 0.9); font-size: 1.15rem; line-height: 1.7; max-width: 34rem; margin: 1rem 0 1.8rem; }
.heros-contact .heros-horaires { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; margin: 0 0 1.8rem; }

/* Page Contact, « Nous situer » : carte Google Maps à droite du texte (2026-10-08) */
.carte-google { border-radius: 12px; overflow: hidden; box-shadow: var(--ombre-douce); min-height: 22rem; }
.carte-google iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; }

/* Menu : « Aude & départements voisins » sous le nom, en petites capitales orange
   (orange foncé : lisible en petit sur le fond blanc du menu) */
.entete .logo-texte span { display: block; margin-top: 0.15rem; color: var(--ambre-texte); }
@media (max-width: 1080px) { .entete .logo-texte span { display: none; } }

/* Page Contact : 4 cartes de coordonnées côte à côte (d'après l'exemple Big Déménagement) */
.coordonnees-cartes {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem;
}
.coordonnees-cartes li {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: #fff; border: 1px solid var(--trait); border-radius: 14px;
  padding: 1.6rem 1.5rem; box-shadow: var(--ombre-douce);
}
.coord-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.8rem; height: 2.8rem; border-radius: 10px; margin-bottom: 0.9rem;
}
.coord-icone svg { width: 22px; height: 22px; }
.coord-bleu { background: #e8f0fa; color: var(--bleu-texte); }
.coord-orange { background: #fdeee7; color: var(--ambre-texte); }
.coord-libelle { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texte); }
.coord-valeur { font-weight: 700; color: var(--titre); line-height: 1.45; overflow-wrap: anywhere; }
a.coord-valeur { text-decoration: none; }
a.coord-valeur:hover { color: var(--bleu-texte); text-decoration: underline; }
.coord-note { font-size: 0.88rem; color: var(--texte); line-height: 1.5; }
@media (max-width: 1000px) { .coordonnees-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .coordonnees-cartes { grid-template-columns: 1fr; } }

/* ESSAI (2026-10-08) — Page Contact, « Nos coordonnées » façon Uberdem : texte à gauche,
   coordonnées à droite en liste (pictogramme orange, intitulé orange, information dessous),
   sans cadre. Pour revenir aux 4 cartes : supprimer ce bloc jusqu'à « FIN ESSAI ». */
.section-coordonnees .coordonnees-cartes { grid-template-columns: 1fr; gap: 1.8rem; }
.section-coordonnees .coordonnees-cartes li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.15rem;
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
}
.section-coordonnees .coord-icone {
  grid-column: 1; grid-row: 1 / span 3; align-self: start;
  width: 2.6rem; height: 2.6rem; margin: 0; border-radius: 0; background: none; color: var(--ambre-texte);
}
.section-coordonnees .coord-icone svg { width: 26px; height: 26px; }
.section-coordonnees .coord-libelle {
  grid-column: 2; font-size: 1.2rem; letter-spacing: 0; text-transform: none;
  font-family: var(--police-titres); font-weight: 700; color: var(--ambre-texte);
}
.section-coordonnees .coord-valeur { grid-column: 2; font-weight: 600; font-size: 0.98rem; color: var(--titre); }
.section-coordonnees .coord-note { grid-column: 2; font-size: 0.88rem; }
/* FIN ESSAI coordonnées façon Uberdem */

/* ==========================================================================
   Page Contact sur le modèle d'Uberdem (2026-10-08)
   ========================================================================== */
/* Haut de page : photo, fil d'Ariane, titre orange, deux boutons (pas de formulaire) */
.heros-contact { padding: 6rem 0 6.5rem; }
.heros-contact .heros-fil { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 1rem; }
.heros-contact .heros-fil a { color: #fff; text-decoration: none; }
.heros-contact .heros-fil a:hover { text-decoration: underline; }
.heros-contact h1 { color: #fff !important; }
.heros-contact .heros-actions .btn-secondaire { background: var(--marine); color: #fff; border-color: var(--marine); }
/* Coordonnées à gauche, formulaire de devis à droite */
.contact-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; align-items: center; }
.contact-infos .coordonnees-cartes { margin-top: 2rem; }
@media (max-width: 960px) { .contact-grille { grid-template-columns: 1fr; gap: 3rem; } }
/* Étapes sur fond orangé clair */
.heros-contact ~ main .section-etapes-icones,
main .section-coordonnees + .section-etapes-icones { background: #fdf2ec; }
/* 4 tuiles de réassurance, la première mise en avant en orange */
.reassurance { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
.reassurance li {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  text-align: center; font-weight: 700; color: var(--titre); line-height: 1.4;
  background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 1.8rem 1.2rem;
  box-shadow: var(--ombre-douce);
}
.reassurance-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 10px; background: var(--ambre); color: #fff;
}
.reassurance-icone svg { width: 24px; height: 24px; }
.reassurance li:first-child { background: linear-gradient(135deg, var(--ambre), #f5a77f); border-color: transparent; color: var(--titre); }
.reassurance li:first-child .reassurance-icone { background: #fff; color: var(--ambre-texte); }
@media (max-width: 960px) { .reassurance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .reassurance { grid-template-columns: 1fr; } }
/* Carte Google Maps en grand, sous le texte */
.section-plan .deux-colonnes { align-items: start; }
.carte-google-large { margin-top: 2.4rem; min-height: 26rem; }
.carte-google-large iframe { min-height: 26rem; }

/* Avis : pas de barre de défilement sous les cartes (les flèches en haut à droite suffisent ;
   la liste défile toujours au doigt, à la molette et au clavier) */
.avis-carrousel { scrollbar-width: none; -ms-overflow-style: none; }
.avis-carrousel::-webkit-scrollbar { display: none; }

/* Page Contact : haut de page à la même taille que celui des autres pages (hors accueil) :
   pas de hauteur « plein écran », mêmes marges, même taille de titre et de texte */
.heros.heros-v2.heros-contact { min-height: 0; display: block; padding: 4rem 0 4.2rem; }
.heros-contact h1 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); line-height: 1.2; letter-spacing: normal; margin: 0 0 0.7rem; }
.heros-contact .heros-chapeau { font-size: 1.1rem; max-width: 44rem; margin: 0 0 1.6rem; }

/* Contact, « Nous situer » : temps de trajet sous le texte (et non plus à côté) */
.plan-texte { max-width: 52rem; }
.plan-texte .liste-coche { margin-top: 1.2rem; }

/* Contact : titre et texte de gauche alignés en haut, au niveau de « Téléphone » */
.contact-grille { align-items: start; }
.contact-infos h2 { margin-top: 0; }

/* Contact : « Une question, un devis ? Parlons-en. » reste accroché en haut de l'écran
   pendant qu'on fait défiler les coordonnées, comme le titre de la FAQ */
@media (min-width: 961px) {
  .contact-infos { position: sticky; top: 7rem; }
}
.contact-infos h2 em { font-style: normal; color: var(--bleu); }

/* Pied de page : pictogrammes des coordonnées sans cercle autour (2026-10-08),
   un peu plus grands pour garder la même présence */
.pied-rond { border: 0; border-radius: 0; width: 1.2rem; height: 1.2rem; }
.pied-rond svg { width: 17px; height: 17px; }

/* Contact, « Votre transport, tout simplement » : fond blanc (au lieu de l'orangé clair)
   et fine ligne de séparation au-dessus, de la largeur du contenu (2026-10-08) */
.heros-contact ~ main .section-etapes-icones,
main .section-coordonnees + .section-etapes-icones { background: #fff; padding-top: 0; }
main .section-coordonnees + .section-etapes-icones > .conteneur {
  border-top: 1px solid rgba(13, 33, 55, 0.15); padding-top: 4.5rem;
}

/* Pied de page : coordonnées alignées sur le nom « Transport Lacote » (et non sur le logo).
   Décalage = largeur du logo (38 px de haut × 302/160) + l'espace logo-nom (0.75rem). */
.pied-coord address { padding-left: calc(38px * 302 / 160 + 0.75rem); }

/* Contact après inversion (2026-10-08) : coordonnées → « Un dépôt au centre de la zone »
   → logos → avis → « Votre transport, tout simplement » → FAQ.
   Séparateur fin au-dessus des étapes (après les avis) et au-dessus du plan (après les
   coordonnées, les deux sur fond blanc). */
.heros-contact ~ main .section-etapes-icones { background: #fff; padding-top: 0; }
.heros-contact ~ main .section-etapes-icones > .conteneur,
.heros-contact ~ main .section-coordonnees + .section-plan > .conteneur {
  border-top: 1px solid rgba(13, 33, 55, 0.15); padding-top: 4.5rem;
}
.heros-contact ~ main .section-coordonnees + .section-plan { padding-top: 0; }

/* Contact : titre « Ils nous font confiance » au-dessus de la frise des logos */
.confiance-titre-section { text-align: center; margin: 0 0 3.2rem; color: var(--titre); }
.bandeau-confiance:has(.confiance-titre-section) { padding: 4rem 0 3rem; }

/* ESSAI (2026-10-08) — logos partenaires en gris ; chacun reprend ses couleurs au survol.
   Pour annuler : supprimer ces 3 lignes. */
.confiance-logos img { filter: grayscale(1); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.confiance-logos img:hover { filter: none; opacity: 1; }

/* Prestations : en-tête du bloc des prestations centré (surtitre, titre avec une partie en
   bleu, phrase), d'après la capture « APERCU-couleurs-wcag » */
.section-besoin .besoin-entete.besoin-entete-centre { align-items: center; text-align: center; gap: 0.6rem; }
.besoin-entete-centre .sur-titre { color: var(--texte); font-size: 1.05rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.besoin-entete-centre .sur-titre::before { display: none; }
.besoin-entete-centre h2 { max-width: 46rem; margin: 0 auto; }
.besoin-entete-centre h2 em { font-style: normal; color: var(--bleu); }
.besoin-entete-centre > p { max-width: 44rem; margin: 0.4rem auto 0; text-align: center; }
.besoin-entete-centre ~ .besoin .besoin-onglets { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

/* Prestations : en-tête du bloc des prestations et onglets calés à gauche (2026-10-08) */
.section-besoin .besoin-entete.besoin-entete-centre { align-items: flex-start; text-align: left; }
.besoin-entete-centre h2, .besoin-entete-centre > p { margin-left: 0; margin-right: 0; text-align: left; }
.besoin-entete-centre ~ .besoin .besoin-onglets { margin-left: 0; margin-right: 0; }

/* Bloc de fin de page « Parlons de votre projet » : fond orange, texte + téléphone à gauche,
   formulaire de devis à droite (page Prestations, d'après la capture « sous faq ») */
.section-devis-final { background: var(--ambre); }
.devis-final-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 4.5rem; align-items: center; }
.devis-final-texte h2 { color: var(--titre); margin: 0 0 1rem; }
.devis-final-texte p { color: var(--titre); font-size: 1.15rem; line-height: 1.7; max-width: 34rem; margin: 0 0 1.8rem; }
.devis-final-tel {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--marine); color: #fff !important; border: 0; text-decoration: none;
}
.devis-final-tel:hover { background: var(--encre); }
.section-devis-final .devis-carte { box-shadow: 0 24px 48px -20px rgba(13, 33, 55, 0.45); }
@media (max-width: 960px) { .devis-final-grille { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Prestations, « Cinq camions… » : texte et cartes à gauche, photo à droite (2026-10-08) */
.flotte-deux-colonnes { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.flotte-texte .grille-flotte { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.flotte-visuel img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 70% 40%;
  border-radius: 18px; box-shadow: var(--ombre-douce);
}
@media (max-width: 960px) {
  .flotte-deux-colonnes { grid-template-columns: 1fr; gap: 2.5rem; }
  .flotte-visuel img { aspect-ratio: 16 / 9; }
}

/* Bloc « Parlons de votre projet » (Prestations) : mêmes colonnes et même écart texte /
   formulaire que le haut de l'accueil (largeur 1220 px, colonnes 677/477, écart 4rem) */
.devis-final-grille { width: min(1220px, 92%); grid-template-columns: 677fr 477fr; gap: 4rem; }
@media (max-width: 960px) { .devis-final-grille { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Contact, « Un dépôt au centre de la zone » : titre + texte à gauche, temps de trajet à droite */
.plan-texte.plan-deux-colonnes {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 4rem; align-items: center;
}
.plan-deux-colonnes .liste-coche { margin-top: 0; }
@media (max-width: 960px) { .plan-texte.plan-deux-colonnes { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Prestations, « Cinq camions… » : cartes des camions les unes sous les autres */
.flotte-texte .grille-flotte { grid-template-columns: 1fr; gap: 1rem; }

/* Contact, « Ils nous font confiance » : fond bleu nuit, titre et logos en blanc (2026-10-08).
   Les logos n'existent qu'en couleur sur fond blanc : on les passe en noir et blanc, on les
   inverse (le fond blanc devient noir, le logo devient clair), puis le mode « screen » fait
   disparaître le noir sur le bleu nuit. Pour un rendu parfait, il faudrait des versions
   blanches officielles des logos. */
.heros-contact ~ main .bandeau-confiance { background: var(--marine); }
.heros-contact ~ main .confiance-titre-section { color: #fff; }
.heros-contact ~ main .confiance-defile .confiance-logos { background: var(--marine); }
.heros-contact ~ main .confiance-logos img,
.heros-contact ~ main .confiance-logos img:hover {
  filter: grayscale(1) contrast(1.4) invert(1); mix-blend-mode: screen; opacity: 0.9;
}
/* Caz la Cuisine : déjà blanc sur fond foncé, pas d'inversion */
.heros-contact ~ main .confiance-logos .logo-caz-la-cuisine,
.heros-contact ~ main .confiance-logos .logo-caz-la-cuisine:hover { filter: grayscale(1) contrast(1.4); }

/* Nous rejoindre (2026-10-08) : « Conduire pour un artisan… » sur fond bleu nuit et la FAQ
   qui suit sur fond gris clair (comme les autres sections grises) ; titres et textes posés
   sur le bleu nuit passent en blanc (les cartes blanches restent telles quelles). */
.section-rejoindre { background: var(--marine) !important; }
.section-rejoindre h2 { color: #fff; }
.section-rejoindre .sur-titre { color: var(--ambre); }
.section-rejoindre .rejoindre-grille > div:first-child > p { color: rgba(255, 255, 255, 0.85); }
.section-rejoindre + .faq { background: #e6e8e6; }

/* ==========================================================================
   Espacement identique entre tous les blocs (2026-10-08)
   Une seule valeur pour le haut et le bas de chaque bloc de contenu, sur toutes les
   pages. Les blocs précédés d'une ligne de séparation mettent ce même espace sous la
   ligne. La bande des logos de l'accueil reste une bande fine (ce n'est pas un bloc).
   Pour régler l'espacement de tout le site : changer --espace-bloc ci-dessous.
   ========================================================================== */
:root { --espace-bloc: 5rem; }
@media (max-width: 760px) { :root { --espace-bloc: 3.5rem; } }

main > section.section,
main > section.bandeau-slogan,
main > section.bandeau-confiance:has(.confiance-titre-section) {
  padding-top: var(--espace-bloc) !important;
  padding-bottom: var(--espace-bloc) !important;
}
/* Blocs avec ligne de séparation en haut : pas d'espace au-dessus de la ligne,
   l'espace habituel en dessous */
main > .bandeau-confiance + script + section.section-avis,
.heros-contact ~ main > .section-coordonnees + section.section-plan { padding-top: 0 !important; }
main > .bandeau-confiance + script + section.section-avis > .conteneur,
.heros-contact ~ main > .section-coordonnees + section.section-plan > .conteneur { padding-top: var(--espace-bloc) !important; }

/* Accueil, « Pourquoi choisir Transport Lacote ? » (2026-10-08), d'après la capture
   « exemple accueil » : petit libellé, titre et description à gauche, photo arrondie à
   droite avec un chiffre clé posé dessus ; les 4 chiffres viennent en dessous. */
.pourquoi-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem;
  align-items: center; margin-bottom: 3.5rem; text-align: left;
}
.pourquoi-etiquette {
  display: inline-block; margin-bottom: 1rem; padding: 0.3rem 0.8rem; border-radius: 999px;
  background: var(--fond); border: 1px solid var(--trait); font-size: 0.8rem; font-weight: 600; color: var(--titre);
}
.pourquoi-intro h2, .pourquoi-intro .pourquoi-sous-titre { text-align: left; margin-left: 0; margin-right: 0; }
.pourquoi-intro .pourquoi-sous-titre { margin-bottom: 0; max-width: 34rem; }
.pourquoi-visuel { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--ombre-douce); }
.pourquoi-visuel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 40%; }
.pourquoi-visuel::after {   /* léger dégradé en bas pour que le chiffre reste lisible */
  content: ""; position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(to top, rgba(13, 33, 55, 0.75), transparent);
}
.pourquoi-badge {
  position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 1; margin: 0;
  display: flex; flex-direction: column; color: #fff; line-height: 1.2;
}
.pourquoi-badge strong { font-family: var(--police-titres); font-size: 2rem; font-weight: 800; }
.pourquoi-badge span { font-size: 0.9rem; opacity: 0.9; }
@media (max-width: 960px) { .pourquoi-intro { grid-template-columns: 1fr; gap: 2rem; } }
/* Photo « Pourquoi choisir » sans chiffre posé dessus : plus besoin du dégradé sombre */
.pourquoi-visuel::after { display: none; }

/* Chaque bloc de contenu occupe au moins toute la hauteur de l'écran, sous le menu
   (environ 97 px, il reste accroché en haut) ; contenu centré verticalement.
   Grands écrans seulement : sur téléphone, cela créerait de grands vides.
   Un bloc plus haut que l'écran garde simplement sa hauteur naturelle. (2026-10-08) */
:root { --hauteur-menu: 97px; }
@media (min-width: 961px) and (min-height: 600px) {
  main > section.section {
    min-height: calc(100vh - var(--hauteur-menu));
    min-height: calc(100svh - var(--hauteur-menu));
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* « Pourquoi choisir » : le texte s'arrête au même niveau que la fin du titre
   (même largeur pour les deux), texte justifié pour un bord droit net */
.pourquoi-intro .pourquoi-sous-titre { max-width: none; text-align: left; hyphens: manual; }

/* Prestations, cartes des camions : le nombre et l'intitulé sur une même ligne
   (« 3 camions de 20 m³ »), la description en dessous */
.flotte-texte .carte-flotte {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.7rem; align-items: baseline;
}
.flotte-texte .carte-flotte .flotte-nb { margin: 0; }
.flotte-texte .carte-flotte h3 { margin: 0; }
.flotte-texte .carte-flotte > p:not(.flotte-nb) { grid-column: 1 / -1; margin-top: 0.6rem; }

/* Prestations, camions : sans effet de carte (ni cadre, ni ombre, ni fond, ni mouvement au
   survol) ; une fine ligne sépare les camions */
.flotte-texte .grille-flotte { gap: 0; }
.flotte-texte .carte-flotte,
.flotte-texte .carte-flotte:hover {
  background: none; border: 0; border-radius: 0; box-shadow: none; transform: none;
  padding: 1.3rem 0;
}
.flotte-texte .carte-flotte + .carte-flotte { border-top: 1px solid var(--trait); }


/* Exception : le bandeau « Une question sur votre transport ? » ne prend pas tout l'écran
   et garde peu d'espace autour de lui (accueil, Prestations, Contact) */
main > section.section:has(> .conteneur > .bandeau-cta) {
  min-height: 0;
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

/* Haut de page avec photo (Prestations) plus haut, pour mieux voir l'image ;
   photo recadrée vers le haut (visages), texte centré verticalement (2026-10-08) */
.entete-page.entete-photo {
  min-height: min(68vh, 640px); display: flex; align-items: center;
  background-position: center 30% !important;
}
.entete-page.entete-photo > .conteneur { width: min(1440px, 92%); }
@media (max-width: 760px) { .entete-page.entete-photo { min-height: 0; } }

/* Recrutement, Qui sommes-nous (option « entete_grand ») et Contact : haut de page à la
   même hauteur que celui de Prestations (avec photo), contenu centré verticalement */
.entete-page.entete-grand,
.heros.heros-v2.heros-contact {
  min-height: min(68vh, 640px); display: flex; align-items: center;
}
.entete-page.entete-grand > .conteneur,
.heros.heros-v2.heros-contact > .conteneur { width: min(1440px, 92%); }
@media (max-width: 760px) {
  .entete-page.entete-grand, .heros.heros-v2.heros-contact { min-height: 0; }
}

/* Exception : « Un transporteur local, secteur par secteur » garde son espacement d'origine
   (5.4rem en haut et en bas), sans remplir tout l'écran */
main > section.section.section-secteurs-pastilles {
  min-height: 0;
  padding-top: 5.4rem !important;
  padding-bottom: 5.4rem !important;
}

/* Recrutement : haut de page sur fond bleu clair (option « entete_classe ») */
.entete-page.entete-bleu { background: #e3eefa !important; }

/* ==========================================================================
   Transitions en biais entre les sections (2026-10-08), d'après la capture « transition »
   (MesDépanneurs) : chaque section de couleur commence et finit par une ligne en biais,
   qui monte de gauche à droite (haut et bas parallèles). Les sections blanches restent
   droites. --biais règle la pente ; on ajoute autant d'espace intérieur pour que le
   contenu ne soit jamais rogné.
   ========================================================================== */
:root { --biais: clamp(36px, 6vw, 110px); }
main > section.section-grise,
main > section.section-zone,
main > section.section-secteurs-pastilles,
main > section.section-rejoindre,
main > section.section-devis-final {
  clip-path: polygon(0 var(--biais), 100% 0, 100% calc(100% - var(--biais)), 0 100%);
  padding-top: calc(var(--espace-bloc) + var(--biais)) !important;
  padding-bottom: calc(var(--espace-bloc) + var(--biais)) !important;
}
/* « secteur par secteur » garde son espacement d'origine, plus la place du biais */
main > section.section.section-secteurs-pastilles {
  padding-top: calc(5.4rem + var(--biais)) !important;
  padding-bottom: calc(5.4rem + var(--biais)) !important;
}

/* « Vos questions, nos réponses » : fond blanc sur toutes les pages (2026-10-08),
   donc sans biais (les biais ne concernent que les sections de couleur) */
main > section.faq,
main > section.faq.section-grise,
.section-rejoindre + .faq { background: #fff !important; }
main > section.faq.section-grise {
  clip-path: none;
  padding-top: var(--espace-bloc) !important;
  padding-bottom: var(--espace-bloc) !important;
}

/* Biais en bas de tous les hauts de page (accueil, Contact, pages intérieures), même pente
   que les sections : un triangle de la couleur de la bande qui suit (fil d'Ariane ou bande
   des logos, gris clair --fond) est dessiné en bas, ce qui raccorde le biais sans laisser
   de triangle blanc. Le contenu garde la place du biais en dessous. (2026-10-08) */
.heros, .entete-page { position: relative; }
.heros::after, .entete-page::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  height: var(--biais); background: var(--fond); pointer-events: none;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.heros.heros-v2, .entete-page { padding-bottom: calc(2.5rem + var(--biais)) !important; }

/* ==========================================================================
   Avis clients (2026-10-08), d'après la capture « avis clients 2 » (perlib.fr) :
   texte à gauche, deux colonnes de cartes qui défilent en continu de bas en haut à droite,
   avec un fondu en haut et en bas. Chaque colonne contient ses avis deux fois : on la fait
   monter de la moitié de sa hauteur puis on recommence, sans à-coup. Pause au survol.
   ========================================================================== */
.avis-defile-grille {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center;
}
.avis-defile-texte h2 { margin: 0 0 1rem; }
.avis-defile-texte p { margin: 0 0 1.6rem; max-width: 26rem; font-size: 1.05rem; line-height: 1.7; }
.avis-colonnes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  height: 560px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.avis-colonne {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  animation: avis-monte 42s linear infinite;
}
.avis-colonne .avis-client { margin: 0 0 1.2rem; }   /* espacement en marge (et non « gap ») : boucle exacte */
.avis-colonne-2 { animation-duration: 50s; animation-delay: -17s; }   /* décalée et un peu plus lente */
.avis-colonnes:hover .avis-colonne { animation-play-state: paused; }
@keyframes avis-monte { from { transform: translateY(0); } to { transform: translateY(-50%); } }

@media (max-width: 960px) {
  .avis-defile-grille { grid-template-columns: 1fr; gap: 2rem; }
  .avis-colonnes { grid-template-columns: 1fr; height: 480px; }
  .avis-colonne-2 { display: none; }
}
/* Mouvement réduit demandé par le visiteur : pas de défilement, tous les avis visibles */
@media (prefers-reduced-motion: reduce) {
  .avis-colonnes { height: auto; -webkit-mask-image: none; mask-image: none; }
  .avis-colonne { animation: none; }
  .avis-colonne .avis-client[aria-hidden="true"] { display: none; }
  .avis-colonne-2 { display: flex; }
}

/* Fil d'Ariane et bande des logos de l'accueil sur fond blanc (2026-10-08).
   Le triangle du biais en bas des hauts de page prend donc la couleur blanche. */
.fil-ariane { background: #fff; }
main > .bandeau-confiance:not(:has(.confiance-titre-section)),
main > .bandeau-confiance:not(:has(.confiance-titre-section)) .confiance-defile .confiance-logos { background: #fff; }
.heros::after, .entete-page::after { background: #fff; }

/* « Ils en parlent mieux que nous » : fond blanc (2026-10-08) */
main > section.section-avis { background: #fff; }

/* Accueil : la frise des logos suit l'inclinaison du biais du haut de page (même pente,
   calculée à partir de --biais) et défile d'un bord à l'autre de l'écran. La frise est un
   peu plus large que l'écran pour que ses extrémités ne se voient pas une fois inclinée ;
   la bande coupe ce qui dépasse (pas de défilement horizontal de la page). (2026-10-08) */
main > .bandeau-confiance:not(:has(.confiance-titre-section)) {
  overflow: hidden;
  padding: 2.6rem 0 !important;
}
main > .bandeau-confiance:not(:has(.confiance-titre-section)) .confiance-defile {
  width: 110vw;
  margin-left: calc(50% - 55vw);
  transform: rotate(-3.4deg);                                   /* navigateurs anciens */
  transform: rotate(calc(-1 * atan2(var(--biais), 100vw)));     /* pente exacte du biais */
}

/* Accueil, « Votre projet, étape par étape » : sans les pictogrammes (2026-10-08) ;
   les étapes s'alignent les unes sous les autres : numéro à gauche, titre et texte à droite */
#savoir-faire .etapes-icones .ei-icone { display: none !important; }
#savoir-faire .etapes-icones { max-width: 44rem; }
#savoir-faire .etapes-icones li,
#savoir-faire .etapes-icones li:nth-child(even) {
  grid-template-columns: 3.6rem minmax(0, 1fr); padding: 1.6rem 0;
}
#savoir-faire .etapes-icones li::before,
#savoir-faire .etapes-icones li:nth-child(even)::before { grid-column: 1; }
#savoir-faire .etapes-icones h3, #savoir-faire .etapes-icones p,
#savoir-faire .etapes-icones li:nth-child(even) h3,
#savoir-faire .etapes-icones li:nth-child(even) p { grid-column: 2; }
#savoir-faire .etapes-icones li + li { border-top: 1px solid var(--trait); }
/* Fil d'Ariane sans ligne de séparation en dessous */
.fil-ariane { border-bottom: 0; }

/* Dernière section de la page (ex. « Parlons de votre projet » en orange sur Prestations) :
   biais en haut seulement ; le bas reste droit pour toucher le pied de page sans triangle
   blanc entre les deux (2026-10-08) */
main > section:last-child:is(.section-grise, .section-zone, .section-secteurs-pastilles, .section-rejoindre, .section-devis-final) {
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
  padding-bottom: var(--espace-bloc) !important;
}

/* Accueil, « Votre projet, étape par étape » : titre, description et bouton à gauche,
   les 4 étapes à droite (2026-10-08). */
@media (min-width: 961px) {
  #savoir-faire > .conteneur {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    grid-template-rows: auto auto 1fr; column-gap: 5rem; align-items: start;
  }
  #savoir-faire > .conteneur > h2 { grid-column: 1; grid-row: 1; margin-top: 0; }
  #savoir-faire > .conteneur > .intro-section { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  #savoir-faire > .conteneur > .etapes-action { grid-column: 1; grid-row: 3; align-self: start; text-align: left; margin-top: 2rem; }
  #savoir-faire > .conteneur > .etapes-icones { grid-column: 2; grid-row: 1 / span 3; margin: 0; max-width: none; }
  #savoir-faire .etapes-icones li:first-child { padding-top: 0; }
}

/* Prestations, « Particulier ou professionnel : un service à votre mesure » : plus de
   largeur maximale (héritée de l'époque où le titre était centré) ; le titre et la phrase
   vont jusqu'au bout de la ligne */
.besoin-entete-centre h2, .section-besoin .besoin-entete.besoin-entete-centre > p { max-width: none; }

/* Tous les boutons du site ont la même forme : coins à peine arrondis (4 px), d'après la
   capture « boutons » (transporteur.com) — menu, blocs, formulaires, pied de page */
.btn, .btn-primaire, .btn-secondaire, .btn-tel, .btn-devis, .btn-appel-bleu,
.dc-continuer, .dc-envoyer, .devis-final-tel, .pied-contact, .prix-appel-tel,
.nav-principale .btn-tel, .nav-principale .btn-devis, .bandeau-cta .btn,
button[type="submit"] { border-radius: 4px !important; }

/* Accueil : bande des logos rapprochée du haut de page (moins d'espace sous le biais).
   Fond transparent : en remontant, la bande ne recouvre pas la photo. (2026-10-08) */
main > .bandeau-confiance:not(:has(.confiance-titre-section)) {
  padding-top: 0 !important;
  margin-top: -1.2rem;
  background: transparent;
  position: relative; z-index: 2;
}
main > .bandeau-confiance:not(:has(.confiance-titre-section)) .confiance-defile .confiance-logos { background: #fff; }
/* La frise inclinée dépasse vers le haut à droite : la bande ne coupe que sur les côtés */
main > .bandeau-confiance:not(:has(.confiance-titre-section)) { overflow: hidden; overflow-x: clip; overflow-y: visible; }

/* Prestations, « Cinq camions… » : galerie des vraies photos des camions, deux colonnes qui
   défilent de bas en haut (même principe que les avis de l'accueil), fondu en haut et en
   bas, pause au survol (2026-10-08) */
.flotte-galerie {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  height: 640px; overflow: hidden; align-self: stretch;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.galerie-colonne { list-style: none; margin: 0; padding: 0; animation: avis-monte 46s linear infinite; }
.galerie-colonne li { margin: 0 0 1rem; }
.galerie-colonne-2 { animation-duration: 54s; animation-delay: -20s; }
.flotte-galerie:hover .galerie-colonne { animation-play-state: paused; }
.flotte-galerie img,
.flotte-visuel.flotte-galerie img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 14px; box-shadow: none;
}
@media (max-width: 960px) { .flotte-galerie { height: 460px; } }
@media (prefers-reduced-motion: reduce) {
  .flotte-galerie { height: auto; -webkit-mask-image: none; mask-image: none; }
  .galerie-colonne { animation: none; }
  .galerie-colonne li[aria-hidden="true"] { display: none; }
}

/* Accueil, description de « Votre besoin, notre métier. » sur une seule ligne (grand écran) */
.section-besoin .besoin-entete > p { max-width: none !important; }

/* Nous rejoindre : formulaire de candidature à droite de toute l'offre (carte bleue,
   missions, profil) et fixe pendant qu'on fait défiler l'offre (2026-10-08) */
@media (min-width: 961px) {
  #candidature .candidature-grille { align-items: start; }
  #candidature .candidature-formulaire { position: sticky; top: 120px; align-self: start; }
  #candidature .carte-offre { margin: 0 0 2.4rem; }
}

/* Contact : photo de fond propre (personne au téléphone), au lieu de celle de l'accueil */
.heros.heros-v2.heros-contact {
  background: var(--marine) url("../img/photos/contact.jpg") center 40% / cover no-repeat;
}

/* Nous rejoindre, « Conduire pour un artisan… » (2026-10-08) :
   - titre sur une seule ligne (colonne de gauche plus large, titre un peu plus petit) ;
   - la photo du livreur descend jusqu'au bas du bloc : alignée en bas, la marge du bas
     est annulée pour elle ; le biais du bloc coupe les jambes en diagonale.
   Le bloc garde sa hauteur naturelle (pas de plein écran), pour que le bas du contenu
   soit aussi le bas du bloc. */
@media (min-width: 961px) {
  main > section.section.section-rejoindre { min-height: 0; }
  .section-rejoindre .rejoindre-grille { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; }
  .section-rejoindre h2 { white-space: nowrap; font-size: clamp(1.5rem, 2.25vw, 2.25rem) !important; }
  .section-rejoindre .rejoindre-grille > div:first-child { align-self: center; }
  .section-rejoindre .rejoindre-visuel {
    align-self: end;
    margin-bottom: calc(-1 * (var(--espace-bloc) + var(--biais)));
  }
}
@media (min-width: 961px) {
  .section-rejoindre .rejoindre-visuel img { width: 100%; max-width: 420px; }
}
@media (min-width: 961px) {
  .section-rejoindre .rejoindre-visuel img { width: auto; max-width: 100%; height: 620px; object-fit: contain; }
}

/* Contact, « Un dépôt au centre de la zone » : plus d'espace avant la carte Google Maps */
.carte-google-large { margin-top: 4.5rem; }

/* Nous rejoindre : le livreur remonté pour que ses pieds s'arrêtent juste au-dessus du
   biais du bas (au lieu d'être coupés par lui) */
@media (min-width: 961px) {
  .section-rejoindre .rejoindre-visuel {
    margin-bottom: calc(-1 * (var(--espace-bloc) + 0.7 * var(--biais)));
  }
}

/* Nous rejoindre, avantages : sans carte blanche, texte blanc directement sur le bleu nuit ;
   pictogramme dans un rond orange pour rester visible */
.section-rejoindre .avantage {
  background: none; box-shadow: none; border-radius: 0; padding: 0.55rem 0;
  color: rgba(255, 255, 255, 0.82);
}
.section-rejoindre .avantage strong { color: #fff; }
.section-rejoindre .avantage .avantage-icone { background: var(--ambre); }
.section-rejoindre .avantage .avantage-icone svg { stroke: var(--marine); }

/* Nous rejoindre, avantages : pictogrammes remplacés par une coche verte (2026-10-08) */
.section-rejoindre .avantage .avantage-icone {
  width: 1.9rem; height: 1.9rem; background: #22c55e; border-radius: 50%;
}
.section-rejoindre .avantage .avantage-icone svg { display: none; }
.section-rejoindre .avantage .avantage-icone::before {
  content: ""; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Texte sélectionné à la souris sur un fond orange : surlignage bleu nuit, texte blanc
   (l'orange habituel ne se verrait pas sur l'orange) */
.section-devis-final ::selection { background: var(--marine); color: #fff; }
.section-devis-final .devis-carte ::selection { background: var(--ambre); color: var(--encre); }

/* Prestations, « Notre flotte » : la liste des camions en retrait (alinéa) sous le texte */
.flotte-texte .grille-flotte { padding-left: 2.5rem; }

/* Qui sommes-nous : pas de ligne de séparation entre les logos et les avis */
main:has(.section-atouts) > .bandeau-confiance + script + .section-avis > .conteneur { border-top: 0; }

/* Accueil, « Qui sommes-nous ? » sans photo : texte sur toute la largeur ;
   « Découvrir l'entreprise » devient un vrai bouton orange, centré sous les chiffres */
.pourquoi-intro { grid-template-columns: 1fr; margin-bottom: 3rem; }
.pourquoi-intro .pourquoi-texte { max-width: 56rem; }
.section-pourquoi .pourquoi-lien { text-align: center; margin-top: 2.6rem; }
/* Accueil, « Qui sommes-nous ? » : texte sur toute la largeur du contenu */
.pourquoi-intro .pourquoi-texte { max-width: none; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : texte à gauche, photo à droite */
@media (min-width: 961px) {
  .pourquoi-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3.5rem; }
}

/* Prestations, « Ce qui fait le prix » : les 4 facteurs en retrait (alinéa), comme la
   liste des camions */
.prix-facteurs { padding-left: 2.5rem; }

/* Qui sommes-nous, « L'artisan transporteur de l'Aude » : photo à droite du texte */
.photo-histoire { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 65% center; border-radius: 18px; box-shadow: var(--ombre-douce); align-self: center; }
/* Accueil, « Transport Lacote, qui sommes-nous ? » sans photo : une seule colonne */
.pourquoi-intro { grid-template-columns: 1fr !important; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : texte sur la moitié gauche (comme
   s'il y avait une photo à droite), bouton juste sous le texte, au-dessus des chiffres */
@media (min-width: 961px) {
  .pourquoi-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important; }
}
.pourquoi-texte .pourquoi-lien { text-align: left !important; margin: 1.8rem 0 0 !important; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : les 4 chiffres à droite du texte,
   en cartes empilées les unes sous les autres (2026-10-08) */
.pourquoi-intro { align-items: center; margin-bottom: 0; }
.pourquoi-intro .carte-bref {
  background: none !important; box-shadow: none !important; border-radius: 0; padding: 0 !important; margin: 0;
}
.pourquoi-intro .carte-bref::before, .pourquoi-intro .carte-bref::after { display: none !important; }
.pourquoi-intro .grille-chiffres { display: grid; grid-template-columns: 1fr; gap: 0.9rem; }
.pourquoi-intro .chiffre {
  display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); column-gap: 1.2rem; align-items: center;
  text-align: left; background: var(--bleu); border-radius: 14px; padding: 1.1rem 1.4rem;
  box-shadow: var(--ombre-douce); color: #fff;
}
.pourquoi-intro .chiffre .chiffre-nombre { grid-row: 1 / span 2; justify-self: center; font-size: 2.6rem; margin: 0; }
.pourquoi-intro .chiffre .chiffre-unite { margin: 0; }
.pourquoi-intro .chiffre .chiffre-desc { margin: 0.15rem 0 0; }
.pourquoi-intro .chiffre::after, .pourquoi-intro .chiffre-nombre::after { display: none !important; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : les 4 chiffres à droite en liste,
   d'après la capture « plus comme ça » : fine barre bleue à gauche, éléments en gris clair,
   un seul mis en avant (foncé, en gras, avec sa phrase) ; la mise en avant passe de l'un
   à l'autre toutes les 4 secondes. Remplace la version en cartes. (2026-10-08) */
.pourquoi-intro .grille-chiffres {
  gap: 0; border-left: 3px solid var(--bleu); padding: 0.4rem 0 0.4rem 2.2rem;
}
.pourquoi-intro .chiffre {
  display: block; background: none; box-shadow: none; border-radius: 0; padding: 0.7rem 0;
  color: #9aa6b4; text-align: left;
  animation: chiffre-actif 16s infinite;
}
.pourquoi-intro .chiffre .chiffre-nombre,
.pourquoi-intro .chiffre .chiffre-unite {
  display: inline; font-family: var(--police-titres); font-size: 1.25rem; font-weight: 600;
  color: inherit; margin: 0;
}
.pourquoi-intro .chiffre .chiffre-nombre { margin-right: 0.35rem; }
.pourquoi-intro .chiffre .chiffre-desc {
  display: block; max-height: 0; overflow: hidden; opacity: 0; margin: 0;
  font-style: normal; font-size: 1rem; line-height: 1.6; color: var(--texte);
  animation: chiffre-desc 16s infinite;
}
.pourquoi-intro .chiffre:nth-child(2), .pourquoi-intro .chiffre:nth-child(2) .chiffre-desc { animation-delay: 4s; }
.pourquoi-intro .chiffre:nth-child(3), .pourquoi-intro .chiffre:nth-child(3) .chiffre-desc { animation-delay: 8s; }
.pourquoi-intro .chiffre:nth-child(4), .pourquoi-intro .chiffre:nth-child(4) .chiffre-desc { animation-delay: 12s; }
.pourquoi-intro .chiffre:nth-child(n+2) { animation-fill-mode: backwards; }
@keyframes chiffre-actif {
  0%, 23%  { color: var(--titre); font-weight: 700; }
  27%, 100% { color: #9aa6b4; }
}
@keyframes chiffre-desc {
  0%, 23%  { max-height: 6rem; opacity: 1; margin-top: 0.4rem; }
  27%, 100% { max-height: 0; opacity: 0; margin-top: 0; }
}
.pourquoi-intro .grille-chiffres:hover .chiffre,
.pourquoi-intro .grille-chiffres:hover .chiffre-desc { animation-play-state: paused; }
/* Mouvement réduit : tous les chiffres affichés en entier, sans alternance */
@media (prefers-reduced-motion: reduce) {
  .pourquoi-intro .chiffre { animation: none; color: var(--titre); }
  .pourquoi-intro .chiffre .chiffre-desc { animation: none; max-height: none; opacity: 1; margin-top: 0.3rem; }
}
/* Décalages négatifs : chaque chiffre démarre déjà « au bon moment » du cycle, donc seul
   le premier est mis en avant au chargement */
.pourquoi-intro .chiffre:nth-child(2), .pourquoi-intro .chiffre:nth-child(2) .chiffre-desc { animation-delay: -12s; }
.pourquoi-intro .chiffre:nth-child(3), .pourquoi-intro .chiffre:nth-child(3) .chiffre-desc { animation-delay: -8s; }
.pourquoi-intro .chiffre:nth-child(4), .pourquoi-intro .chiffre:nth-child(4) .chiffre-desc { animation-delay: -4s; }
.pourquoi-intro .chiffre .chiffre-desc { font-style: normal !important; }

/* Liste des chiffres interactive : au survol (souris) ou après un clic / Entrée, l'élément
   visé est mis en avant et l'alternance automatique s'arrête */
.pourquoi-intro .chiffre { cursor: pointer; transition: color 0.2s; }
.pourquoi-intro .chiffre:focus-visible { outline: 2px solid var(--bleu); outline-offset: 4px; border-radius: 4px; }
.pourquoi-intro .grille-chiffres.choisi .chiffre { animation: none; color: #9aa6b4; font-weight: 600; }
.pourquoi-intro .grille-chiffres.choisi .chiffre .chiffre-desc { animation: none; max-height: 0; opacity: 0; margin-top: 0; }
.pourquoi-intro .grille-chiffres.choisi .chiffre.actif { color: var(--titre); }
.pourquoi-intro .grille-chiffres.choisi .chiffre.actif .chiffre-desc { max-height: 6rem; opacity: 1; margin-top: 0.4rem; }
.pourquoi-intro .chiffre .chiffre-desc { transition: max-height 0.3s, opacity 0.3s, margin-top 0.3s; }
/* Phrases des chiffres sur toute la largeur de la colonne (plus de largeur maximale) */
.pourquoi-intro .chiffre .chiffre-desc { max-width: none; width: 100%; }
.pourquoi-intro .chiffre .chiffre-desc br { display: none; }

/* Liste des chiffres : barre verticale fine et noire */
.pourquoi-intro .grille-chiffres { border-left: 1px solid #000; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : hauteur naturelle (pas plein écran),
   pour un écart normal avec « Votre besoin, notre métier. » */
main > section.section.section-pourquoi { min-height: 0; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : retour au grand encadré bleu des
   4 chiffres sous le texte, bouton centré en dessous (2026-10-08) */
.pourquoi-intro { margin-bottom: 3rem !important; }
.section-pourquoi > .conteneur > .pourquoi-lien { text-align: center !important; margin-top: 2.6rem !important; }
/* Accueil, « Transport Lacote, qui sommes-nous ? » : un peu plus d'espace au-dessus */
main > section.section.section-pourquoi { padding-top: calc(var(--espace-bloc) + 4.5rem) !important; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : description sur toute la largeur et
   lien « Découvrir l'entreprise » aligné à gauche (2026-10-08) */
.pourquoi-intro { grid-template-columns: 1fr !important; }
.pourquoi-intro .pourquoi-texte { max-width: none !important; }
.section-pourquoi > .conteneur > .pourquoi-lien { text-align: left !important; }

/* Accueil : frise des logos entre « Transport Lacote, qui sommes-nous ? » et « Nos services »
   (2026-10-08). Elle ne suit plus le biais de la photo : droite, sans remontée, mais
   toujours d'un bord à l'autre de l'écran. */
main > .section-pourquoi ~ .bandeau-confiance {
  margin-top: 0 !important; padding: 2.8rem 0 !important;
}
main > .section-pourquoi ~ .bandeau-confiance .confiance-defile { transform: none !important; width: 100vw; margin-left: calc(50% - 50vw); }
/* « Qui sommes-nous ? » suit maintenant directement le haut de page */
main > section.section.section-pourquoi { padding-top: var(--espace-bloc) !important; }

/* Nous rejoindre : case d'accord pour le traitement des données, au-dessus du bouton */
.candidature-accord { margin: 0.4rem 0 1.2rem; color: var(--texte); }
.candidature-accord label { cursor: pointer; line-height: 1.5; }
.candidature-accord span { color: var(--ambre-texte); }

/* Accueil, « Votre projet, étape par étape » : les textes des étapes s'étalent jusqu'au bord
   droit de la page (plus de largeur maximale qui les faisait revenir à la ligne) */
#savoir-faire .etapes-icones p, #savoir-faire .etapes-icones h3 { max-width: none !important; }
#savoir-faire > .conteneur > .etapes-icones { max-width: none !important; }

/* Accueil, « Transport Lacote, qui sommes-nous ? » : chiffres sans fond bleu ;
   textes passés en foncé, grand chiffre en bleu (2026-10-08) */
.section-pourquoi > .conteneur > .carte-bref {
  background: none !important; box-shadow: none !important; border-radius: 0; padding: 0.5rem 0 0 !important;
}
.section-pourquoi > .conteneur > .carte-bref::before,
.section-pourquoi > .conteneur > .carte-bref::after { display: none !important; }
.section-pourquoi > .conteneur > .carte-bref .chiffre-nombre { color: var(--bleu) !important; }
.section-pourquoi > .conteneur > .carte-bref .chiffre-unite { color: var(--bleu) !important; }
.section-pourquoi > .conteneur > .carte-bref .chiffre-desc { color: var(--texte) !important; }

/* Nom du site « Transportlacote.fr » à la place du logo (2026-10-08) : écrit tel quel
   (sans capitales forcées), plus de pictogramme ni de mention sous le nom */
.logo-texte strong, .pied-logo strong { text-transform: none !important; letter-spacing: -0.01em !important; }
.entete .logo-texte strong { font-size: 1.35rem; }
.pied-logo strong { font-size: 1.35rem; }
/* Pied de page : coordonnées alignées sur le nom (il n'y a plus de logo à décaler) */
.pied-coord address { padding-left: 0 !important; }

/* Sans la bande d'annonce, le haut de l'accueil remplit l'écran sous le menu seul */
@media (min-width: 1000px) {
  .heros-v2:not(.heros-contact) { min-height: calc(100vh - 97px); min-height: calc(100svh - 97px); }
}

/* Frise des logos avec titre « Ils nous font confiance » : même rendu partout (accueil et
   Contact) : fond bleu nuit, titre et logos en blanc (2026-10-08) */
main > .bandeau-confiance:has(.confiance-titre-section) { background: var(--marine) !important; }
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-titre-section { color: #fff; }
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-defile .confiance-logos { background: var(--marine) !important; }
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img,
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img:hover {
  filter: grayscale(1) contrast(1.4) invert(1); mix-blend-mode: screen; opacity: 0.9;
}
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos .logo-caz-la-cuisine,
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos .logo-caz-la-cuisine:hover { filter: grayscale(1) contrast(1.4); }

/* Pied de page : ligne orange du haut plus fine (1 px au lieu de 3) ;
   nom « transportlacote.fr » toujours en minuscules */
.pied { border-top-width: 1px !important; border-top-style: solid !important; }
.logo-texte strong, .pied-logo strong { text-transform: lowercase !important; }

/* Qui sommes-nous : plus d'espace sous le bandeau final « Un projet de livraison ou de
   déménagement ? », avant le pied de page */
main:has(.section-atouts) > section.section:last-child:has(> .conteneur > .bandeau-cta) { padding-bottom: 5rem !important; }

/* Pied de page : liens Facebook et Instagram (à la place des coordonnées) */
.pied-reseaux { list-style: none; display: flex; gap: 0.8rem; margin: 1.6rem 0 0; padding: 0; }
.pied-reseaux a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pied-reseaux a:hover, .pied-reseaux a:focus-visible { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
.pied .pied-reseaux { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; }
.pied .pied-reseaux li { margin: 0 !important; }

/* Pied de page, barre du bas : © à gauche, liens légaux à droite séparés par « | »
   (d'après la capture « footer 2 ») */
.pied-bas { align-items: center; }
.pied-bas p { margin: 0; }
.pied-legal { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.pied-legal li + li::before { content: "|"; margin: 0 0.6rem; opacity: 0.5; }
.pied-legal a { color: inherit; text-decoration: none; }
.pied-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied .pied-legal { display: flex !important; flex-direction: row !important; }
.pied .pied-legal li { margin: 0 !important; }

/* (2026-10-09)
   - Accueil, « Votre projet, étape par étape » : moins d'espace en haut et en bas.
   - Pages intérieures (prestations, villes, articles…) : les blocs ne remplissent plus
     tout l'écran, l'écart entre sections redevient l'espacement normal.
   - Bandeau d'appel placé en fin de page (ex. « Un meuble ou un électroménager à faire
     livrer ? ») : plus d'espace en dessous, avant le pied de page. */
main > section.section#savoir-faire {
  min-height: 0;
  padding-top: calc(var(--espace-bloc) * 0.6) !important;
  padding-bottom: calc(var(--espace-bloc) * 0.6) !important;
}
.fil-ariane ~ main > section.section { min-height: 0; }
main > section.section:last-child:has(> .conteneur > .bandeau-cta) { padding-bottom: 5rem !important; }

/* Pages intérieures (prestations…) : toutes les bulles des étapes en blanc, y compris la
   première (qui était bleue) (2026-10-09) */
.fil-ariane ~ main .etapes-icones li:first-child .ei-icone {
  background: #fff !important; color: var(--titre) !important;
  box-shadow: 0 12px 28px rgba(13, 33, 55, 0.18), 0 2px 6px rgba(13, 33, 55, 0.08) !important;
}

/* Nous rejoindre : « Conduire pour un artisan… » a la même colonne de gauche que l'offre
   (« Vos missions ») : même proportion, même écart, textes sans largeur maximale, pour que
   les deux s'arrêtent au même niveau à droite (2026-10-09) */
@media (min-width: 961px) {
  .section-rejoindre .rejoindre-grille { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) !important; gap: 3.2rem; }
  .section-rejoindre .rejoindre-grille > div:first-child > p,
  .section-rejoindre .avantages { max-width: none !important; }
}
/* Le titre tient aussi dans la colonne de gauche (une ligne, taille ajustée à la colonne) */
@media (min-width: 961px) {
  .section-rejoindre h2 { font-size: clamp(1.2rem, 1.72vw, 1.95rem) !important; white-space: nowrap; max-width: 100%; }
}
/* Titre « Conduire pour un artisan… » : taille normale des titres, retour à la ligne si
   besoin, dans la colonne de gauche */
.section-rejoindre h2 { white-space: normal !important; font-size: 36px !important; }
/* Nous rejoindre : livreur agrandi (toujours ancré en bas du bloc) */
@media (min-width: 961px) {
  .section-rejoindre .rejoindre-visuel img { height: 720px !important; width: auto; max-width: 100%; object-fit: contain; }
}

/* Articles (conseils) : texte sur toute la largeur de la page (2026-10-09) */
.article-corps { max-width: none !important; }
.article-corps p, .article-corps li, .article-corps h2, .article-corps h3 { max-width: none !important; }

/* Pied de page : toutes les villes desservies, par département, sur toute la largeur,
   juste au-dessus de la ligne de séparation (2026-10-09) */
.pied-villes { grid-column: 1 / -1; margin-top: 0.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.pied-villes h3 { margin-bottom: 0.9rem; }
.pied-villes-dep { margin: 0 0 0.55rem; font-size: 0.86rem; line-height: 1.75; color: #9fb1c4; }
.pied-villes-dep strong { color: #fff; font-weight: 600; margin-right: 0.4rem; }
.pied-villes-dep a, .pied-villes-dep span { white-space: nowrap; }
.pied-villes-dep a + a::before, .pied-villes-dep a + span::before, .pied-villes-dep span + a::before {
  content: "·"; margin: 0 0.45rem; color: #6d8298;
}
.pied-villes-dep a { color: inherit; text-decoration: none; }
.pied-villes-dep a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Accueil : frise « Ils nous font confiance » identique à celle de Contact : dans la
   largeur du contenu (plus d'un bord à l'autre de l'écran), même espacement (2026-10-09) */
main > .section-pourquoi ~ .bandeau-confiance {
  overflow: visible !important; padding: var(--espace-bloc) 0 !important;
}
main > .section-pourquoi ~ .bandeau-confiance .confiance-defile {
  width: auto !important; margin-left: 0 !important; transform: none !important; overflow: hidden !important;
}
/* Pied de page : villes en une seule liste alphabétique, sans ligne au-dessus */
.pied-villes { border-top: 0 !important; padding-top: 0.4rem !important; }
/* Pied de page : villes séparées seulement par un espace (pas de point) */
.pied-villes-dep a + a::before, .pied-villes-dep a + span::before, .pied-villes-dep span + a::before { content: none !important; }
.pied-villes-dep { display: flex; flex-wrap: wrap; column-gap: 1.1rem; row-gap: 0.1rem; }

/* ==========================================================================
   Pages d'articles (2026-10-09), d'après la capture « engie »
   ========================================================================== */
.article-grille { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.article-cote { position: sticky; top: 120px; display: grid; gap: 1.6rem; }
.article-sommaire-titre { font-family: var(--police-titres); font-weight: 700; font-size: 1.1rem; color: var(--titre); margin: 0 0 0.8rem; }
.article-sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--trait); }
.article-sommaire li a {
  display: block; padding: 0.45rem 0 0.45rem 1rem; margin-left: -2px; border-left: 2px solid transparent;
  color: var(--bleu-texte); text-decoration: none; font-size: 0.92rem; line-height: 1.4;
}
.article-sommaire li a:hover { border-left-color: var(--bleu); color: var(--titre); }
.article-cote-cta {
  border: 1px solid var(--trait); border-radius: 14px; padding: 1.3rem; box-shadow: var(--ombre-douce); background: #fff;
}
.article-cote-cta p { margin: 0 0 0.9rem; font-size: 0.92rem; }
.article-cote-cta .btn { width: 100%; justify-content: center; }
.article-cote-tel { display: block; text-align: center; margin-top: 0.7rem; font-size: 0.88rem; color: var(--bleu-texte); }
.article-bulle-titre { font-family: var(--police-titres); font-weight: 700; color: var(--titre); margin: 0 0 0.4rem !important; }

.article-meta { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.6rem; font-size: 0.88rem; color: var(--texte); }
.article-categorie { background: var(--bleu); color: #fff; border-radius: 4px; padding: 0.2rem 0.6rem; font-weight: 600; font-size: 0.78rem; }

.article-resume { background: #e8f0fa; border-radius: 12px; padding: 1.4rem 1.6rem; margin: 0 0 2.4rem; }
.article-resume-titre { font-family: var(--police-titres); font-weight: 700; color: var(--titre); margin: 0 0 0.8rem; }
.article-resume ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }

.article-bulle {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;
  margin: 2rem 0; padding: 1.4rem 1.6rem; border: 1px solid var(--trait); border-left: 4px solid var(--ambre);
  border-radius: 12px; box-shadow: var(--ombre-douce); background: #fff;
}
.article-bulle p { margin: 0; }
.article-bulle .btn { flex: none; }

.article-retenir { margin: 3rem 0 2.4rem; padding-left: 1.6rem; border-left: 3px solid var(--bleu); }
.article-retenir ol { list-style: none; counter-reset: retenir; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.article-retenir li { counter-increment: retenir; display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.8rem; align-items: start; }
.article-retenir li::before {
  content: counter(retenir); display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 4px; background: var(--bleu); color: #fff; font-size: 0.8rem; font-weight: 700;
}
.article-plus ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.45rem; }

.article-fin {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 3rem 0 1.6rem;
  padding: 1.6rem 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.article-fin p { margin: 0 0 0.8rem; font-weight: 600; color: var(--titre); }
.article-utile-boutons { display: flex; gap: 0.6rem; }
.article-utile-boutons button, .article-partage button {
  font: inherit; font-size: 0.9rem; cursor: pointer; background: #fff; color: var(--titre);
  border: 1px solid var(--trait); border-radius: 4px; padding: 0.45rem 0.9rem;
}
.article-utile-boutons button:hover, .article-partage button:hover { border-color: var(--bleu); }
.article-utile-merci { color: var(--bleu-texte) !important; }
.article-partage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.article-partage a {
  display: inline-block; font-size: 0.9rem; text-decoration: none; color: var(--titre);
  border: 1px solid var(--trait); border-radius: 4px; padding: 0.45rem 0.9rem;
}
.article-partage a:hover { border-color: var(--bleu); color: var(--bleu-texte); }

@media (max-width: 960px) {
  .article-grille { grid-template-columns: 1fr; gap: 2rem; }
  .article-cote { position: static; }
  .article-cote-cta { display: none; }
  .article-bulle { flex-direction: column; align-items: flex-start; }
  .article-fin { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hub « Nos conseils » (2026-10-09), d'après la capture « hub articles »
   ========================================================================== */
.hub-radio { position: absolute; opacity: 0; pointer-events: none; }
.hub-intro { max-width: 46rem; margin: 0 auto 2.4rem; text-align: center; font-size: 1.05rem; line-height: 1.7; }
.hub-onglets { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 2.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--trait); }
.hub-onglets label {
  cursor: pointer; padding: 0.5rem 1rem; border: 1px solid var(--trait); border-radius: 4px;
  font-weight: 600; font-size: 0.92rem; color: var(--titre); background: #fff;
}
.hub-onglets label span { color: var(--texte); font-weight: 400; margin-left: 0.2rem; }
#hub:has(#cat-tous:checked) label[for="cat-tous"] { background: var(--marine); color: #fff; border-color: var(--marine); }
.hub-onglets label:hover { border-color: var(--bleu); }
#hub:has(.hub-radio:checked) label span { color: inherit; opacity: 0.75; }
#hub:has(.hub-radio:focus-visible) .hub-onglets { outline: 2px solid var(--bleu); outline-offset: 6px; }
.hub-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
.hub-carte {
  display: flex; flex-direction: column; border: 1px solid var(--trait); border-radius: 12px;
  overflow: hidden; background: #fff; box-shadow: var(--ombre-douce); transition: transform 0.15s, box-shadow 0.15s;
}
.hub-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre-forte); }
.hub-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fond); }
.hub-image img, .hub-image .article-illu { display: flex; width: 100%; height: 100%; object-fit: cover; }
.hub-carte-corps { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.3rem 1.4rem; }
.hub-meta { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.7rem; font-size: 0.8rem; color: var(--texte); }
.hub-cat { background: #e8f0fa; color: var(--bleu-texte); border-radius: 4px; padding: 0.15rem 0.55rem; font-weight: 600; }
.hub-carte h2 { font-size: 1.15rem !important; line-height: 1.35; margin: 0 0 0.6rem; }
.hub-carte h2 a { color: var(--titre); text-decoration: none; }
.hub-carte h2 a:hover { color: var(--bleu-texte); }
.hub-carte-corps > p:not(.hub-meta) { font-size: 0.92rem; line-height: 1.6; margin: 0 0 1rem; }
.hub-lire { margin-top: auto; font-weight: 600; font-size: 0.9rem; color: var(--bleu-texte); text-decoration: none; }
.hub-lire:hover { text-decoration: underline; text-underline-offset: 3px; }
.section-hub-sujets h2 { text-align: center; margin-bottom: 1.8rem; }
.hub-sujets { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.hub-sujet {
  display: flex; align-items: center; justify-content: center; min-height: 4.2rem; padding: 0.8rem 1rem;
  border: 1px solid var(--trait); border-radius: 12px; background: #fff; box-shadow: var(--ombre-douce);
  font-weight: 600; color: var(--titre); text-decoration: none; text-align: center;
}
.hub-sujet:hover { border-color: var(--bleu); color: var(--bleu-texte); }
@media (max-width: 960px) { .hub-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hub-grille { grid-template-columns: 1fr; } }

/* Articles : partage en icônes rondes ; catégorie sous la bulle de la colonne de gauche */
.article-fin { grid-template-columns: 1fr; }
.article-partage { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.article-partage p { margin: 0 !important; }
.article-partage a, .article-partage button {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0 !important; border-radius: 50% !important; color: var(--titre);
}
.article-partage a:hover, .article-partage button:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.article-copier.copie { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.article-cote-tag { margin: 0; }

/* Articles : « Ce qu'il faut retenir » dans une bulle, comme « Résumé de l'article » */
.article-retenir {
  background: #e8f0fa; border-left: 0 !important; border-radius: 12px;
  padding: 1.4rem 1.6rem !important;
}
.article-retenir h2 { font-size: 1.15rem !important; margin: 0 0 0.9rem !important; }

/* Logos partenaires (2026-10-09) : en gris, chacun reprend ses couleurs au survol, sans
   pastille. Les fichiers des logos ont été passés en fond transparent, et le texte noir
   d'Amazon, Château d'Ax, Electro Dépôt, Chez vous et Promen en blanc (version « fond foncé »
   des marques), pour rester lisibles sur le bandeau bleu nuit. Remplace les anciens réglages
   (gris de l'ESSAI du 2026-10-08, logos inversés en blanc). */
.confiance-logos img,
main > .bandeau-confiance .confiance-logos img {
  filter: grayscale(1) !important; opacity: 0.6 !important; mix-blend-mode: normal !important;
  transition: filter 0.25s, opacity 0.25s;
}
.confiance-logos img:hover,
main > .bandeau-confiance .confiance-logos img:hover { filter: none !important; opacity: 1 !important; }

/* Pied de page : les villes desservies à la même taille et couleur que les autres liens du
   pied de page (2026-10-09) */
.pied-villes-dep { font-size: inherit !important; color: #93a9be !important; line-height: 1.9 !important; }

/* Accueil : bloc « Conseils & outils » après le slogan, d'après la capture « ce bloc »
   (2026-10-09) : sur-titre orange, titre centré, trois cartes blanches. */
.section-outils { background: #fff; }
/* En-tête au format de « Réussir son déménagement ou sa livraison » (.articles-entete) :
   titre à gauche, bouton « Voir tous nos conseils » à droite (2026-10-09) */
.outils-entete p { margin: 0.7rem 0 0; color: var(--texte); }
.outils-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.outil-carte {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--trait); border-radius: 6px; padding: 1.7rem 1.6rem 1.6rem;
  box-shadow: var(--ombre-douce); transition: box-shadow 0.15s, transform 0.15s;
}
.outil-carte:hover { box-shadow: var(--ombre-forte); transform: translateY(-2px); }
.outil-icone { color: var(--ambre); width: 1.5rem; height: 1.5rem; margin-bottom: 1.6rem; }
.outil-icone svg { width: 100%; height: 100%; }
.outil-carte h3 { font-size: 1.2rem; margin: 0 0 1rem; }
.outil-carte h3 a { color: var(--titre); text-decoration: none; }
.outil-carte h3 a::after { content: ""; position: absolute; inset: 0; }   /* toute la carte cliquable */
.outil-carte p { margin: 0 0 1.1rem; font-size: 0.94rem; flex: 1; }
.outil-lien { color: var(--bleu-texte); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.outil-lien span { color: var(--ambre); }
@media (max-width: 960px) { .outils-grille { grid-template-columns: 1fr; } }
/* Bloc court, suivi du pied de page : pas de hauteur plein écran (comme section-pourquoi) */
main > section.section.section-outils { min-height: 0; }
/* Accueil, « étape par étape » sur fond gris (2026-10-09) : la place du biais en haut et en
   bas, sinon le titre est rogné par la ligne en biais */
main > section#savoir-faire.section-grise {
  padding-top: calc(var(--espace-bloc) + var(--biais)) !important;
  padding-bottom: calc(var(--espace-bloc) + var(--biais)) !important;
}
/* Le bloc des zones (bleu nuit) remonte d'un biais pour se raccorder au gris d'« étape par
   étape » : les deux lignes en biais sont parallèles, plus de bande blanche entre les deux */
main > section#savoir-faire.section-grise + section.section-zone { margin-top: calc(-1 * var(--biais)); }

/* Accueil, « Votre besoin, notre métier » (ex-« Nos services ») : titre, phrase, onglets et
   lien centrés (2026-10-09) */
#prestations .besoin-entete { align-items: center !important; text-align: center; }
#prestations .besoin-entete > p { text-align: center; }
#prestations .besoin-onglets { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
#prestations .apres-grille { text-align: center; }
/* Sur téléphone : tout aligné à gauche (Nathaëlle, 2026-10-28) */
@media (max-width: 760px) {
  #prestations .besoin-entete { align-items: flex-start !important; text-align: left; }
  #prestations .besoin-entete > p { text-align: left; }
  #prestations .besoin-onglets { margin-left: 0; margin-right: 0; }
  #prestations .apres-grille { text-align: left; }
}

/* Accueil, « Votre projet, étape par étape » : le biais du haut penche dans l'autre sens
   (descend de gauche à droite) ; le bas ne change pas, pour rester raccordé au bloc des zones */
main > section#savoir-faire.section-grise {
  clip-path: polygon(0 0, 100% var(--biais), 100% calc(100% - var(--biais)), 0 100%);
}
/* Accueil, « qui sommes-nous ? » : lien « Découvrir l'entreprise » centré (2026-10-09) */
main > .section-pourquoi > .conteneur > .pourquoi-lien { text-align: center !important; }

/* ==========================================================================
   Page « Conseils & outils » (conseils-outils.html), d'après la capture « conseils » (2026-10-09)
   ========================================================================== */
.guides-entete { text-align: center; max-width: 46rem; margin: 0 auto 2.6rem; }
.guides-entete h2 { margin: 0 0 0.8rem; }
.guides-entete h2 em { font-style: normal; color: var(--bleu-texte); }
.guides-entete p { margin: 0; color: var(--texte); }
.section-guides .article-lire span { color: var(--ambre); }

/* « Trois vérifications utiles » : fond bleu nuit, trois cartes à filet clair */
main > section.section-verifs { background: var(--marine); }
.section-verifs .guides-entete h2 { color: #fff; }
.section-verifs .guides-entete p { color: rgba(255, 255, 255, 0.8); }
.verifs-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.verifs-grille li {
  margin: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px; padding: 1.6rem 1.5rem 1.7rem;
}
.verif-num { display: block; color: var(--ambre); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.08em; margin-bottom: 0.9rem; }
.verifs-grille h3 { color: #fff; font-size: 1.1rem; margin: 0 0 0.6rem; }
.verifs-grille p { color: rgba(255, 255, 255, 0.78); font-size: 0.94rem; margin: 0; line-height: 1.6; }
.verifs-lien { text-align: center; margin: 2.2rem 0 0; }
.section-verifs .lien-fleche { color: #fff; }
@media (max-width: 960px) { .verifs-grille { grid-template-columns: 1fr; } }
/* Blocs de cette page : hauteur naturelle, pas plein écran */
main > section.section.section-guides, main > section.section.section-verifs { min-height: 0; }
/* Haut de page bleu nuit, texte blanc */
.entete-page.entete-nuit { background: var(--marine) !important; }
.entete-page.entete-nuit h1 { color: #fff !important; }
.entete-page.entete-nuit p { color: rgba(255, 255, 255, 0.85) !important; }
.entete-page.entete-nuit .btn-secondaire { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; }
.entete-page.entete-nuit .btn-secondaire:hover { background: #fff !important; color: var(--marine) !important; }
/* Bande orange de fin : texte à gauche, bouton bleu nuit à droite */
main > section.section.section-cta-conseils { min-height: 0; }
.cta-conseils { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cta-conseils h2 { margin: 0 0 0.6rem; color: var(--marine) !important; }
.cta-conseils p { margin: 0; color: var(--marine); }
.cta-conseils-btn { background: var(--marine) !important; color: #fff !important; border: 0; }
.cta-conseils-btn:hover { background: var(--encre) !important; }

/* Menu à six entrées (ajout de « Conseils & outils », 2026-10-09) : sur les écrans moyens,
   entrées resserrées ; en dessous de 1180 px, menu repliable (trois traits), comme sur
   téléphone, car les six entrées et les deux boutons ne tiennent plus sur une ligne. */
@media (min-width: 781px) and (max-width: 1440px) {
  .nav-principale ul { gap: 1.05rem !important; }
  .nav-principale a { font-size: 0.86rem !important; }
  .nav-principale .btn-tel, .nav-principale .btn-devis { padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
}
@media (min-width: 781px) and (max-width: 1180px) {
  .bouton-menu { display: block; }
  .logo-texte { display: inline !important; }
  .nav-principale {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    background: #fff !important; backdrop-filter: none; box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid var(--trait);
  }
  .menu-case:checked ~ .nav-principale { display: block; }
  .nav-principale ul { flex-direction: column; align-items: stretch; gap: 0 !important; padding: 0.6rem 4.5%; }
  .nav-principale li { border-bottom: 1px solid var(--trait); }
  .nav-principale li:last-child { border-bottom: none; padding: 0.9rem 0; }
  .nav-principale a { display: block; padding: 0.9rem 0.2rem; font-size: 1rem !important; }
  .nav-principale a:not(.btn-tel)::after { display: none; }
  .btn-tel { font-size: 1rem !important; gap: 0.5rem; padding: 0.9rem 1rem !important; }
}

/* « Combien de place faut-il prévoir ? » (page Conseils & outils, 2026-10-09) : texte et
   bouton à gauche, les trois étapes du simulateur à droite. Le simulateur complet a sa page
   (simulateur-volume.html, styles dans assets/css/simulateur.css). */
main > section.section.section-simulateur { min-height: 0; }
.simu-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.simu-texte h2 { margin: 0 0 1rem; }
.simu-texte p { color: var(--texte); line-height: 1.7; }
.simu-note { font-size: 0.88rem; margin-top: 1rem; }
.simu-carte { background: #fff; border-radius: 8px; padding: 1.8rem; box-shadow: var(--ombre-forte); }
.simu-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.simu-etapes li { margin: 0; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.simu-etapes strong { display: block; color: var(--titre); margin-bottom: 0.2rem; }
.simu-etapes li > span:last-child { color: var(--texte); font-size: 0.94rem; line-height: 1.55; }
.simu-num { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #eef3fc; color: var(--bleu-texte); font-weight: 700; }
@media (max-width: 960px) { .simu-grille { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* « Les bons outils, avant de prendre la route » (page Conseils & outils) : deux cartes
   centrées, reprises de .outil-carte (accueil), pictogramme dans un rond bleu clair */
main > section.section.section-bons-outils { min-height: 0; }
.bons-outils-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; gap: 1.2rem; }
.outil-rond { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #eef3fc; color: var(--bleu-texte); margin-bottom: 1.3rem; }
.outil-rond svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 640px) { .bons-outils-grille { grid-template-columns: minmax(0, 1fr); } }

/* Formulaire de devis : inventaire joint depuis le simulateur de volume (2026-10-09) */
.dc-inventaire { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 8px; background: #eaf2fb; color: var(--titre); font-weight: 600; font-size: 0.9rem; }
.dc-inventaire[hidden] { display: none; }

/* Bandes « Quel est votre besoin ? » (Prestations) et « Votre projet prend forme ? »
   (Conseils) : bord du haut droit, sans biais (2026-10-10) */
main > section.section.section-cta-conseils,
main > section.section.section-cta-conseils:last-child {
  clip-path: none;
  padding-top: var(--espace-bloc) !important;
  padding-bottom: var(--espace-bloc) !important;
}
/* Texte et bouton toujours côte à côte sur ordinateur, même quand la phrase est longue */
@media (min-width: 761px) {
  .cta-conseils { flex-wrap: nowrap; }
  .cta-conseils > div { flex: 1 1 auto; min-width: 0; max-width: 52rem; }
  .cta-conseils-btn { flex: 0 0 auto; white-space: nowrap; }
}

/* Nous rejoindre, « Conduire pour un artisan… » : bas du bloc droit, sans biais ; le
   livreur reste posé sur le bord du bas (2026-10-10) */
main > section.section.section-rejoindre {
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
  padding-bottom: var(--espace-bloc) !important;
}
@media (min-width: 961px) {
  .section-rejoindre .rejoindre-visuel { margin-bottom: calc(-1 * var(--espace-bloc)) !important; }
}
.section-rejoindre .rejoindre-visuel img { display: block; margin-left: auto; margin-right: auto; object-position: center bottom; }

/* Conseils, « Estimation indicative… » : en italique, icône « i » devant (2026-10-10) */
.simu-note { display: flex; align-items: flex-start; gap: 0.5rem; }
.simu-note em { font-style: italic; }
.simu-note-icone { flex: 0 0 auto; margin-top: 0.12em; color: var(--marine); }

/* « Un transporteur local, secteur par secteur » : bas du bloc droit, sans biais (2026-10-10) */
main > section#secteurs:is(.section-grise, .section-secteurs-pastilles) {
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
}
main > section.section#secteurs.section-secteurs-pastilles { padding-bottom: 5.4rem !important; }
main > section.section#secteurs.section-grise { padding-bottom: var(--espace-bloc) !important; }

/* Conseils, « Les bons outils… » : la phrase d'intro tient sur une ligne (2026-10-10) */
.section-bons-outils .guides-entete { max-width: none; }
@media (min-width: 900px) { .section-bons-outils .guides-entete p { white-space: nowrap; } }

/* Plus de bloc « plein écran » (règle du 2026-10-08) : chaque bloc reprend sa hauteur
   naturelle, sans grand vide au-dessus et en dessous des blocs courts (2026-10-10).
   Le haut de page de l'accueil (.heros-v2) reste à la hauteur de l'écran. */
@media (min-width: 961px) and (min-height: 600px) {
  main > section.section { min-height: 0; }
}

/* Accueil, chiffres : animation pilotée par assets/js/chiffres.js (2026-10-10).
   L'ancien compteur CSS (lié au défilement) est désactivé : le nombre est écrit dans
   .compteur et le script le fait compter quand le bloc arrive à l'écran. */
.grille-chiffres .compteur::before { content: none; animation: none; }
.grille-chiffres .compteur { font-variant-numeric: tabular-nums; }
.chiffres-anim .chiffre {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.chiffres-anim .chiffre.chiffre-visible { opacity: 1; transform: none; }

/* Bas droit, sans biais (2026-10-10) : « Votre projet, étape par étape » (accueil),
   « Du premier appel au meuble monté » (Prestations), « Combien de place faut-il
   prévoir ? » (Conseils & outils), « Un artisan qui met du cœur à l'ouvrage »
   (Qui sommes-nous). Le biais du haut est conservé. */
main > section.section-grise:is(.section-etapes-icones, .section-simulateur, .section-atouts) {
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
  padding-bottom: var(--espace-bloc) !important;
}
/* Accueil : le bloc qui suit « Votre projet, étape par étape » (Nos zones d'intervention)
   commence lui aussi par un bord droit, sinon la séparation resterait en biais */
main > section.section-etapes-icones.section-grise + section.section-zone {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biais)), 0 100%);
  padding-top: var(--espace-bloc) !important;
}

/* Accueil, « Transport Lacote, qui sommes-nous ? » (2026-10-11) : les 4 chiffres
   resserrés au centre au lieu d'occuper toute la largeur */
#pourquoi .grille-chiffres { max-width: 1120px; margin-left: auto; margin-right: auto; gap: 3.5rem; }

/* Bandeau « Combien de m³ avez-vous à transporter ? » : plus d'air au-dessus et en dessous (2026-10-11) */
.section-bandeau-simu { padding: 7.5rem 0; }

/* Page Simulateur de volume : tout le fond en bleu foncé (2026-10-11) */
body:has(.section-simulateur-app) { background: var(--marine); }
body:has(.section-simulateur-app) main,
body:has(.section-simulateur-app) .fil-ariane,
body:has(.section-simulateur-app) .section { background: var(--marine) !important; }
body:has(.section-simulateur-app) .fil-ariane,
body:has(.section-simulateur-app) .fil-ariane span { color: rgba(255, 255, 255, 0.75) !important; }
body:has(.section-simulateur-app) .fil-ariane a { color: #fff !important; }
body:has(.section-simulateur-app) .entete-page::after { display: none; }
body:has(.section-simulateur-app) .entete-page { padding-bottom: 2.5rem !important; }

/* Page Simulateur de volume : menu du haut en bleu foncé aussi, pour une page immersive (2026-10-11) */
body:has(.section-simulateur-app) .entete {
  background: var(--marine) !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; box-shadow: none !important;
}
body:has(.section-simulateur-app) .logo,
body:has(.section-simulateur-app) .logo-texte strong { color: #fff !important; }
body:has(.section-simulateur-app) .nav-principale a:not(.btn-tel):not(.btn-devis) { color: rgba(255, 255, 255, 0.88) !important; }
body:has(.section-simulateur-app) .nav-principale a:not(.btn-tel):not(.btn-devis):hover,
body:has(.section-simulateur-app) .nav-principale a[aria-current="page"] { color: #fff !important; }
body:has(.section-simulateur-app) .nav-principale a:not(.btn-tel)::after { background: #fff !important; }
body:has(.section-simulateur-app) .bouton-menu span { background: #fff !important; }
@media (max-width: 1180px) {
  body:has(.section-simulateur-app) .nav-principale { background: var(--marine) !important; border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
  body:has(.section-simulateur-app) .nav-principale li { border-bottom-color: rgba(255, 255, 255, 0.1) !important; }
}

/* ==========================================================================
   Articles, d'après la capture « template article » (2026-10-11)
   ========================================================================== */
.art-conteneur { max-width: 1180px; }

/* En-tête blanc : catégorie, titre, chapô, infos de lecture, grande photo légendée */
.art-entete { background: #fff; padding: 0.4rem 0 0; }
/* Titre et chapô sur toute la largeur, comme la photo (2026-10-11) */
.art-entete .conteneur > *:not(.art-photo) { max-width: none; }
.art-surtitre {
  margin: 0 0 0.7rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bleu-texte);
}
.art-entete h1 { margin: 0 0 1rem; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.14; color: var(--titre); }
.art-chapo { margin: 0 0 1.1rem; font-size: 1.08rem; line-height: 1.65; color: #5a6878; }
.art-meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0 0 2rem; font-size: 0.8rem; color: #6b7886; }
.art-meta > span > span { margin-right: 0.2rem; }
.art-photo { position: relative; margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 2.9 / 1; background: var(--marine); }
.art-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-photo figcaption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; padding: 0.6rem 0.9rem; border-radius: 4px;
  background: rgba(13, 33, 55, 0.9); color: #fff; font-size: 0.84rem; font-weight: 700;
}

/* Texte à gauche, colonne à droite qui suit la lecture */
.art-section { padding: 3.6rem 0 4.5rem; background: #fff; }
.art-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4.5rem; align-items: start; }
.art-corps { max-width: 760px; color: #4a5866; font-size: 1rem; line-height: 1.7; }
.art-corps > p { margin: 0 0 1.1rem; }
.art-corps h2 {
  margin: 2.8rem 0 1rem; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--titre);
  scroll-margin-top: 110px;
}
.art-corps a:not(.btn) { color: var(--bleu-texte); text-decoration: underline; text-underline-offset: 2px; }

.art-reponse {
  margin: 0 0 1.6rem; padding: 1.3rem 1.5rem; border-left: 4px solid #f38b65;
  background: #fdf1eb; border-radius: 0 6px 6px 0;
}
.art-reponse p { margin: 0; color: #4a5866; }
.art-reponse strong { color: var(--titre); }

.art-guide { margin: 0 0 1rem; padding: 1.4rem 1.5rem; background: #eef0f0; border-radius: 6px; }
.art-guide-titre { margin: 0 0 0.7rem; font-family: var(--police-titres); font-weight: 700; color: var(--titre); }
.art-guide ul { margin: 0; padding-left: 1.2rem; }
.art-guide li { margin: 0.35rem 0; }
.art-guide a { color: var(--titre) !important; text-decoration: none !important; font-size: 0.92rem; }
.art-guide a:hover { color: var(--bleu-texte) !important; }

/* Intertitres numérotés : pastille bleue */
.art-corps h2.art-etape { display: flex; align-items: center; gap: 0.9rem; font-size: 1.25rem; margin-top: 2.2rem; }
.art-num {
  flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--bleu); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700;
}

/* Listes : cases cochées (en grille si les éléments sont courts) */
.art-cases { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; }
.art-cases-grille { grid-template-columns: 1fr 1fr; }
.art-cases li {
  position: relative; margin: 0; padding: 0.8rem 1rem 0.8rem 2.4rem; border: 1px solid #dfe4e8; border-radius: 6px;
  font-size: 0.92rem; color: var(--titre); background: #fff;
}
.art-cases-grille li { font-weight: 700; }
.art-cases li::before { content: "✓"; position: absolute; left: 1rem; top: 0.8rem; color: var(--bleu); font-weight: 700; }

/* « Le conseil de l'équipe » */
.art-conseil { margin: 2.4rem 0 0.6rem; padding: 1.6rem 1.6rem 1.7rem; background: var(--marine); border-radius: 6px; color: #fff; }
.art-conseil p { margin: 0; color: rgba(255, 255, 255, 0.85); }
.art-conseil .art-conseil-sur {
  margin-bottom: 1rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f38b65;
}
.art-conseil .art-conseil-titre { margin-bottom: 0.6rem; font-family: var(--police-titres); font-size: 1.1rem; font-weight: 700; color: #fff; }

/* Checklist « Ce qu'il faut retenir » */
.art-checklist { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid #dfe4e8; border-radius: 6px; }
.art-checklist li { margin: 0; border-bottom: 1px solid #dfe4e8; }
.art-checklist li:last-child { border-bottom: 0; }
.art-checklist label { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem 1rem; cursor: pointer; font-size: 0.92rem; }
.art-checklist input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; accent-color: var(--bleu); }
.art-checklist input:checked + span { color: #8a96a3; text-decoration: line-through; }

/* Appel au simulateur, en fin d'article */
.art-simulateur { margin-top: 2.8rem; }
.art-simulateur h2 { margin-top: 0 !important; }
.art-simulateur p { margin: 0 0 1.2rem; }

/* Colonne de droite : sommaire + encart foncé */
.art-cote { position: sticky; top: 110px; display: grid; gap: 1.2rem; }
.art-sommaire { padding: 1.3rem 1.3rem 0.9rem; border: 1px solid #dfe4e8; border-radius: 6px; background: #fff; box-shadow: 0 4px 14px -8px rgba(13, 33, 55, 0.18); }
.art-sommaire-titre { margin: 0 0 0.6rem; font-family: var(--police-titres); font-weight: 700; color: var(--titre); }
.art-sommaire ul { list-style: none; margin: 0; padding: 0; }
.art-sommaire li { border-bottom: 1px solid #e7ebee; }
.art-sommaire li:last-child { border-bottom: 0; }
.art-sommaire a { display: block; padding: 0.55rem 0; font-size: 0.84rem; color: #5a6878; text-decoration: none; }
.art-sommaire a:hover { color: var(--bleu-texte); }
.art-cote-cta { padding: 1.4rem 1.3rem 1.5rem; background: var(--marine); border-radius: 6px; color: rgba(255, 255, 255, 0.85); font-size: 0.86rem; line-height: 1.6; }
.art-cote-cta p { margin: 0 0 1rem; }
.art-cote-cta .art-cote-cta-titre { margin-bottom: 0.7rem; font-family: var(--police-titres); font-size: 0.98rem; font-weight: 700; color: #fff; }
.art-cote-cta .btn { padding: 0.65rem 1rem; font-size: 0.86rem; }

/* « À lire également » */
.art-lire { padding: 4rem 0 4.5rem; background: #eef0f0; }
.art-lire h2 { margin: 0 0 1.6rem; font-size: clamp(1.5rem, 2.4vw, 1.9rem); color: var(--titre); }
.art-lire-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.art-lire-carte { padding: 1.5rem 1.4rem; background: #fff; border-radius: 6px; box-shadow: 0 4px 14px -10px rgba(13, 33, 55, 0.25); }
.art-lire-cat { margin: 0 0 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu-texte); }
.art-lire-carte h3 { margin: 0 0 0.6rem; font-size: 1.02rem; line-height: 1.3; }
.art-lire-carte h3 a { color: var(--titre); text-decoration: none; }
.art-lire-carte p { margin: 0 0 1rem; font-size: 0.84rem; line-height: 1.6; color: #5a6878; }
.art-lire-lien { font-size: 0.84rem; font-weight: 700; color: var(--bleu-texte); text-decoration: none; }

@media (max-width: 960px) {
  .art-grille { grid-template-columns: 1fr; gap: 2.5rem; }
  .art-cote { position: static; }
  .art-lire-grille { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .art-photo { aspect-ratio: 16 / 10; }
  .art-photo figcaption { left: 0.8rem; bottom: 0.8rem; font-size: 0.78rem; }
  .art-cases-grille { grid-template-columns: 1fr; }
}

/* Articles : intertitres à la taille de la capture (la règle générale « H2 en 36px » est
   trop grande dans une colonne de lecture), fil d'Ariane et bande orange alignés sur l'article */
main .art-corps h2 { font-size: 28px !important; }
main .art-corps h2.art-etape { font-size: 21px !important; }
main .art-lire h2 { font-size: 30px !important; }
body:has(.art-entete) .fil-ariane .conteneur,
body:has(.art-entete) .section-cta-conseils .conteneur { max-width: 1180px; }
@media (max-width: 600px) {
  main .art-corps h2 { font-size: 24px !important; }
  main .art-corps h2.art-etape { font-size: 19px !important; }
  main .art-lire h2 { font-size: 26px !important; }
}
@media (max-width: 960px) {
  .art-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .art-entete h1 { font-size: 1.75rem; overflow-wrap: break-word; }
}

/* Articles (2026-10-11, suite) : ampoule à la place du libellé « Le conseil de l'équipe »,
   photo en haut des cartes « À lire également » */
.art-conseil-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
  margin-bottom: 0.9rem; border-radius: 50%; background: rgba(243, 139, 101, 0.14);
}
.art-conseil-icone svg { width: 1.45rem; height: 1.45rem; }
.art-lire-carte { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.art-lire-image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--marine); }
.art-lire-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.art-lire-carte:hover .art-lire-image img { transform: scale(1.04); }
.art-lire-image .article-illu { height: 100%; }
.art-lire-texte { padding: 1.3rem 1.4rem 1.5rem; }

/* « Le conseil de l'équipe » : titre sur la même ligne que l'ampoule, texte dessous (2026-10-11) */
.art-conseil { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; align-items: center; }
.art-conseil .art-conseil-icone { margin-bottom: 0; }
.art-conseil .art-conseil-titre { margin-bottom: 0; }
.art-conseil > p:last-child { grid-column: 1 / -1; margin-top: 0.8rem; }

/* « Vous avez plusieurs objets à transporter ? » : même encart foncé que le conseil de l'équipe,
   avec un carton à la place de l'ampoule (2026-10-11) */
.art-simulateur.art-conseil { margin-top: 2.8rem; }
main .art-corps .art-simulateur h2.art-conseil-titre {
  margin: 0 !important; font-size: 1.1rem !important; line-height: 1.35; color: #fff;
}
.art-simulateur.art-conseil > p { grid-column: 1 / -1; margin: 0.8rem 0 1.2rem; }
.art-simulateur.art-conseil > .btn { grid-column: 1 / -1; justify-self: start; }

/* FAQ en dernière section (Prestations…) : la règle « dernière section grise » lui remettait
   un biais en haut, qui rognait le haut du titre « Vos questions » ; la FAQ, sur fond blanc,
   reste sans biais (2026-10-11) */
main > section.faq.section-grise:last-child { clip-path: none; }

/* Prestations, sans « Notre flotte » : les étapes (gris) touchent les secteurs (bleu foncé) ;
   le biais du bleu passe sur le gris au lieu de laisser un triangle blanc (2026-10-11) */
main > section.section-etapes-icones.section-grise:has(+ section.section-secteurs-pastilles) {
  padding-bottom: calc(var(--espace-bloc) + var(--biais)) !important;
}
main > section.section-etapes-icones.section-grise + section.section-secteurs-pastilles {
  margin-top: calc(-1 * var(--biais));
}

/* ==========================================================================
   Qui sommes-nous, d'après la capture « qui sommes nous 3 » (2026-10-11)
   ========================================================================== */
.entete-surtitre { display: block; margin-bottom: 0.9rem; color: var(--ambre) !important; }
.entete-surtitre::before { display: none !important; }
.qsn-intro-grille { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
.qsn-intro h2 { margin: 0; }
.qsn-intro h2 em { font-style: normal; color: var(--bleu); }
.qsn-intro-accroche { font-weight: 700; color: var(--titre); font-size: 1.08rem; line-height: 1.6; margin: 0 0 1rem; }
.qsn-chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 3.5rem 0 0;
  background: var(--bleu); border-radius: 12px; box-shadow: var(--ombre-forte); overflow: hidden;
}
.qsn-chiffres div { padding: 1.6rem 1rem; text-align: center; }
.qsn-chiffres div + div { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.qsn-chiffres dt { font-family: var(--police-titres); font-weight: 800; font-size: 2rem; line-height: 1.1; color: #fff; }
.qsn-chiffres dd { margin: 0.35rem 0 0; font-size: 0.85rem; color: rgba(255, 255, 255, 0.9); }
@media (max-width: 900px) {
  .qsn-intro-grille { grid-template-columns: 1fr; gap: 1.2rem; }
  .qsn-chiffres { grid-template-columns: repeat(2, 1fr); }
  .qsn-chiffres div:nth-child(3) { border-left: 0; }
  .qsn-chiffres div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.25); }
}
.qsn-intro .sur-titre { color: var(--ambre-texte); }
/* Les surtitres, masqués ailleurs depuis le 2026-10-07, reviennent sur cette page (capture) */
body:has(.qsn-intro) .sur-titre {
  display: block !important; margin-bottom: 0.8rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
body:has(.qsn-intro) .sur-titre::before { display: none !important; }
body:has(.qsn-intro) .entete-page h1 { max-width: 12.5em; }

/* Accueil, zone d'intervention : surtitre, pastilles des départements et case
   « Votre commune est-elle desservie ? » (capture « suggestion zone », 2026-10-11) */
.section-zone .zone-texte > .sur-titre {
  display: block !important; margin: 0 0 0.8rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambre);
}
.section-zone .zone-texte > .sur-titre::before { display: none !important; }
.zone-pastilles { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 1.6rem; padding: 0; }
.zone-pastilles a {
  display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: #fff; text-decoration: none;
}
.zone-pastilles a:hover, .zone-pastilles a:focus-visible { background: #fff; color: var(--marine); }
.zone-verif {
  padding: 1.3rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.zone-verif .zone-verif-titre { margin: 0 0 1rem; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; color: #fff; }
.zone-verif-ligne { display: flex; gap: 0.5rem; }
.zone-verif-ligne input {
  flex: 1; min-width: 0; padding: 0.75rem 1rem; border: 0; border-radius: 6px;
  font: inherit; font-size: 0.95rem; color: var(--titre); background: #fff;
}
.zone-verif-ligne .btn { padding-left: 1.2rem; padding-right: 1.2rem; }
.zone-verif-aide { margin: 0.6rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); }
.zone-verif-reponse { margin: 0; font-size: 0.92rem; line-height: 1.55; color: #fff; }
.zone-verif-reponse:not(:empty) { margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 6px; background: rgba(255, 255, 255, 0.08); }
.zone-verif-reponse.zone-verif-oui { border-left: 3px solid #4cc38a; }
.zone-verif-reponse.zone-verif-non, .zone-verif-reponse.zone-verif-inconnu { border-left: 3px solid var(--ambre); }
@media (max-width: 520px) { .zone-verif-ligne { flex-direction: column; } }
.section-zone .zone-texte h2 { font-size: clamp(2rem, 3vw, 2.9rem); line-height: 1.1; } .section-zone .zone-texte h2 em { color: #fff; }
/* Vérification de commune : choix proposés, repère sur la carte, pastille de la ville */
.zone-verif-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.7rem; }
.zone-verif-choix button {
  padding: 0.35rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
  background: transparent; font: inherit; font-size: 0.82rem; font-weight: 600; color: #fff; cursor: pointer;
}
.zone-verif-choix button:hover, .zone-verif-choix button:focus-visible { background: #fff; color: var(--marine); }
.zone-verif-reponse.zone-verif-choix-liste, .zone-verif-reponse.zone-verif-choix { border-left: 3px solid #fff; }
.carte-zone .carte-repere { pointer-events: none; }
.carte-repere-halo { fill: rgba(255, 255, 255, 0.25); animation: repere-pulse 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.carte-repere-point { fill: #fff; stroke: var(--marine); stroke-width: 2.5; }
.carte-repere-nom {
  font-family: var(--police-titres); font-weight: 800; font-size: 17px; fill: #fff;
  paint-order: stroke; stroke: var(--marine); stroke-width: 5px; stroke-linejoin: round;
}
@keyframes repere-pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .carte-repere-halo { animation: none; } }
.zone-dep-villes a.zone-ville-trouvee { background: #fff !important; color: var(--marine) !important; }
/* Vérification en deux étapes : département puis commune (2026-10-11) */
.zone-verif-etapes { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0.8rem; }
.zone-verif-etape { display: grid; gap: 0.45rem; }
.zone-verif-etape > span { font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.zone-verif-etape b {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: 0.35rem;
  border-radius: 50%; background: var(--ambre); color: var(--encre); font-size: 0.78rem;
}
.zone-verif-etape select {
  width: 100%; padding: 0.75rem 2.2rem 0.75rem 0.9rem; border: 0; border-radius: 6px;
  font: inherit; font-size: 0.95rem; color: var(--titre); background-color: #fff; cursor: pointer;
}
.zone-verif-etape select:disabled { opacity: 0.55; cursor: not-allowed; }
.zone-verif-etape select:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
@media (max-width: 600px) { .zone-verif-etapes { grid-template-columns: 1fr; } }
.zone-verif-etape input {
  width: 100%; padding: 0.75rem 0.9rem; border: 0; border-radius: 6px;
  font: inherit; font-size: 0.95rem; letter-spacing: 0.08em; color: var(--titre); background: #fff;
}
.zone-verif-etape input:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }
.zone-verif-etapes { grid-template-columns: 0.8fr 1.4fr; }
@media (max-width: 600px) { .zone-verif-etapes { grid-template-columns: 1fr; } }
/* Plus de cadre « carte » autour de la vérification, ni sous la réponse (2026-10-11) */
.section-zone .zone-verif { padding: 0; border: 0; border-radius: 0; background: none; }
.section-zone .zone-verif-reponse:not(:empty) { background: none; padding: 0.2rem 0 0.2rem 0.9rem; border-radius: 0; }
.carte-zone.carte-avec-repere .carte-dep text { opacity: 0.2; transition: opacity 0.2s; }
/* « Votre commune est-elle desservie ? » : plus d'air entre les textes (2026-10-11) */
.section-zone .zone-verif .zone-verif-titre { margin-bottom: 2.6rem; }
.section-zone .zone-verif-etape { gap: 0.7rem; }
.section-zone .zone-verif-reponse:not(:empty) { margin-top: 1.6rem; line-height: 1.7; }
.section-zone .zone-texte .heros-actions { margin-top: 2.2rem; }
/* Liens dans une réponse de FAQ ouverte (fond bleu) : blancs et bien soulignés (2026-10-11) */
.faq-colonnes details[open] .reponse a {
  color: #fff !important; font-weight: 700;
  text-decoration: underline !important; text-decoration-color: #fff !important;
  text-decoration-thickness: 2px !important; text-underline-offset: 4px;
  background: none !important; border-bottom: 0 !important; box-shadow: none !important;
}
.faq-colonnes details[open] .reponse a:hover,
.faq-colonnes details[open] .reponse a:focus-visible {
  background: #fff !important; color: var(--bleu) !important; text-decoration: none !important;
  border-radius: 3px; outline: 0;
}


/* Vérification du trajet : départ et arrivée (2026-10-11) */
.zone-verif-point {
  display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 0.6rem 0.8rem;
  margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0;
}
.zone-verif-point legend {
  grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 0.7rem; padding: 0;
  font-weight: 700; color: #fff;
}
.zone-verif-point legend b {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: 0.4rem;
  border-radius: 50%; background: var(--ambre); color: var(--encre); font-size: 0.78rem;
}
.zone-verif-point .zone-verif-etape > span { font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 600px) { .zone-verif-point { grid-template-columns: 1fr; } }
.carte-zone .carte-dep.carte-dep-choisi path { fill: var(--ambre); }
.carte-zone .carte-dep.carte-dep-choisi text { fill: var(--encre); }
.carte-trajet { stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 6; stroke-linecap: round; pointer-events: none; }
.carte-repere-arrivee .carte-repere-point { fill: var(--marine); stroke: #fff; stroke-width: 3; }
/* Conseils & outils : bord du haut droit au-dessus de « Votre trajet est-il dans notre zone ? »
   (le bas garde son biais) (2026-10-11) */
main > section.section-simulateur + section.section-zone {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--biais)), 0 100%) !important;
  padding-top: var(--espace-bloc) !important;
}
/* Nous rejoindre : fiche de poste sans fond bleu ; les pastilles gardent leur couleur
   (le bleu éclairci qu'elles avaient sur la carte bleue, texte blanc) (2026-10-11) */
#candidature .carte-offre { background: none; box-shadow: none; border-radius: 0; padding: 0; color: var(--texte); }
#candidature .carte-offre h3 { color: var(--titre); }
#candidature .offre-lieu { color: var(--texte); opacity: 1; }
#candidature .carte-offre > p { color: var(--texte); }
#candidature .offre-etiquettes li { background: #4a89cf; color: #fff; }

/* Qui sommes-nous, suite de la page d'après la capture « qui sommes nous 3 » (2026-10-11) */
.qsn-chiffres { background: #568ea3; }
.qsn-chiffres dt { color: var(--titre); }
.qsn-chiffres dd { color: var(--titre); opacity: 0.85; }
.qsn-chiffres div + div { border-left-color: rgba(14, 32, 51, 0.15); }
main > section.qsn-histoire, main > section.qsn-engagements, main > section.qsn-equipe,
main > section.qsn-ancrage, main > section.qsn-cta { clip-path: none; margin-top: 0; }
.qsn-histoire h2 em, .qsn-engagements h2 em, .qsn-ancrage h2 em { font-style: normal; color: var(--bleu); }
.qsn-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.qsn-histoire { background: var(--fond); }
.qsn-photo { position: relative; margin: 0; border-radius: 10px; overflow: hidden; box-shadow: var(--ombre-forte); }
.qsn-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1.2; object-fit: cover; }
.qsn-photo figcaption {
  position: absolute; left: 1.1rem; bottom: 1.1rem; padding: 0.45rem 0.8rem; border-radius: 4px;
  background: var(--marine); color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.qsn-frise { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.3rem; }
.qsn-frise li { position: relative; padding-left: 1.6rem; }
.qsn-frise li::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; background: var(--ambre);
}
.qsn-frise li:not(:last-child)::after {
  content: ""; position: absolute; left: 0.27rem; top: 1.15rem; bottom: -1.3rem; width: 1px;
  background: rgba(242, 106, 61, 0.45);
}
.qsn-frise strong { display: block; color: var(--titre); font-size: 0.95rem; }
.qsn-frise span { display: block; margin-top: 0.2rem; font-size: 0.88rem; }
.qsn-centre { max-width: 46rem; margin: 0 auto 2.6rem; text-align: center; }
.qsn-centre p { margin: 0.6rem 0 0; }
.qsn-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.qsn-carte { padding: 1.6rem; border: 1px solid var(--trait); border-radius: 10px; background: #fff; box-shadow: var(--ombre-douce); }
.qsn-carte-icone {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem;
  border-radius: 50%; background: var(--bleu-pale, #eef6fb); color: var(--bleu);
}
.qsn-carte-icone svg { width: 20px; height: 20px; }
.qsn-carte h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.qsn-carte p { margin: 0; font-size: 0.92rem; }
.qsn-equipe { background: var(--marine); color: rgba(255, 255, 255, 0.82); }
.qsn-equipe h2 { color: #fff; }
.qsn-deux-equipe { align-items: start; }
.qsn-coches { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.qsn-coches li { position: relative; padding-left: 1.6rem; color: #fff; font-weight: 500; }
.qsn-coches li::before { content: "✓"; position: absolute; left: 0; color: var(--ambre); font-weight: 800; }
.qsn-mosaique { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.9rem; height: 26rem; }
.qsn-mosaique img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.qsn-mosaique-grande { grid-row: 1 / 3; }
.qsn-flotte {
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 2.6rem; align-items: center;
  margin-top: 4rem; padding: 2rem; border-radius: 12px; background: #fff; color: var(--texte);
}
.qsn-flotte > img { width: 100%; height: 100%; max-height: 20rem; object-fit: cover; border-radius: 8px; }
.qsn-flotte h2 { color: var(--titre); font-size: clamp(1.5rem, 2.2vw, 2rem); }
.qsn-flotte ul { margin: 1rem 0 1.6rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: 0.92rem; }
.qsn-aude {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
  min-height: 21rem; padding: 2rem; border-radius: 10px; background: var(--marine); text-align: center;
}
.qsn-aude-nom {
  margin: 0; font-family: var(--police-titres); font-weight: 800; font-size: clamp(3.5rem, 7vw, 5.5rem);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ambre); line-height: 1;
}
.qsn-aude-voisins { margin: 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); }
.qsn-deps { margin: 1.2rem 0 1.8rem; padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.qsn-deps a { color: var(--texte) !important; font-weight: 400 !important; text-decoration: none !important; }
.qsn-deps a:hover { color: var(--bleu-texte) !important; text-decoration: underline !important; }
.qsn-cta { background: var(--ambre); }
.qsn-cta .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.qsn-cta h2 { margin: 0 0 0.4rem; color: var(--encre); }
.qsn-cta p { margin: 0; color: var(--encre); }
.qsn-cta-btn { background: var(--marine) !important; color: #fff !important; border: 0; }
.qsn-cta-btn:hover { background: var(--encre) !important; }
@media (max-width: 900px) {
  .qsn-deux, .qsn-flotte { grid-template-columns: 1fr; gap: 2rem; }
  .qsn-cartes { grid-template-columns: 1fr; }
  .qsn-mosaique { height: 20rem; }
}
.qsn-mosaique { grid-template-rows: repeat(2, minmax(0, 1fr)); } .qsn-mosaique img { min-height: 0; display: block; }
body:has(.qsn-intro) main .sur-titre { color: var(--ambre-texte) !important; } body:has(.qsn-intro) .qsn-equipe > .conteneur > .qsn-deux .sur-titre { color: var(--ambre) !important; }
/* Bloc trajet : carte calée à gauche, colonne de droite plus large, « Départ » et « Arrivée »
   sur la même ligne que leurs champs (2026-10-11) */
@media (min-width: 901px) {
  .section-zone .zone-grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; }
  .zone-panneau .carte-zone { margin: 0; max-width: 540px; }
  .zone-verif-point { grid-template-columns: 6.5rem minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: end; margin-bottom: 1.1rem; }
  .zone-verif-point legend { grid-column: 1; grid-row: 1; width: auto; margin: 0; padding: 0 0 0.85rem; white-space: nowrap; }
}
.zone-verif-point .zone-verif-etape input, .zone-verif-point .zone-verif-etape select { height: 3rem; box-sizing: border-box; padding-top: 0; padding-bottom: 0; } .zone-verif-point .zone-verif-etape { align-self: end; }
/* Bloc trajet : chaque ligne (Départ, Arrivée) dans sa carte (2026-10-11) */
.section-zone .zone-verif-point {
  padding: 1rem 1.2rem 1.2rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background: rgba(255, 255, 255, 0.05); box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.6);
}
@media (min-width: 901px) { .section-zone .zone-verif-point { margin-bottom: 0.9rem; } }
/* Ligne Arrivée : « Code postal » et « Commune » masqués à l'écran sur ordinateur (déjà lus
   au-dessus, ligne Départ), gardés pour les lecteurs d'écran et sur téléphone (2026-10-11) */
@media (min-width: 901px) {
  .zone-verif-point[data-sens="arrivee"] .zone-verif-etape > span {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .zone-verif-point[data-sens="arrivee"] { padding-top: 1.2rem; }
  .zone-verif-point[data-sens="arrivee"] legend { padding-bottom: 0.75rem; }
}

/* Nous rejoindre, d'après la capture « nous rejoindre » (2026-10-11) */
body:has(.rj-poste) .sur-titre {
  display: block !important; margin-bottom: 0.8rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambre-texte) !important;
}
body:has(.rj-poste) .sur-titre::before { display: none !important; }
body:has(.rj-poste) .entete-surtitre { color: var(--ambre) !important; }
body:has(.rj-poste) .entete-page h1 { max-width: 13em; }
main > section.rj-quotidien, main > section.rj-poste, main > section.rj-metier,
main > section.rj-candidature { clip-path: none; margin-top: 0; }
.rj-quotidien h2 em, .rj-poste h2 em, .rj-metier h2 em { font-style: normal; color: var(--bleu); }
.rj-poste { background: var(--fond); }
.rj-poste-grille { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 3.5rem; align-items: start; }
.rj-pastille {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.4rem; padding: 0.4rem 0.9rem;
  border-radius: 999px; background: var(--bleu-pale, #eef6fb); color: var(--bleu-texte);
  font-size: 0.8rem; font-weight: 700;
}
.rj-pastille span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ambre); }
.rj-fiche { padding: 2rem; border: 1px solid var(--trait); border-radius: 12px; background: #fff; box-shadow: var(--ombre-forte); }
.rj-fiche-haut { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding-bottom: 1.3rem; border-bottom: 1px solid var(--trait); }
.rj-fiche-haut h3 { margin: 0 0 0.4rem; font-size: 1.45rem; }
.rj-fiche-haut p { margin: 0; font-size: 0.92rem; }
.rj-badge {
  flex: none; padding: 0.45rem 0.8rem; border-radius: 6px; background: var(--marine); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}
.rj-fiche-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.4rem 0; }
.rj-fiche-colonnes h4 { margin: 0 0 0.9rem; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--titre); }
.rj-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: 0.88rem; }
.rj-coches li { position: relative; padding-left: 1.4rem; }
.rj-coches li::before { content: "✓"; position: absolute; left: 0; color: var(--bleu); font-weight: 800; }
.rj-conditions { margin: 0 0 1.5rem; padding: 1rem 1.2rem; border-radius: 8px; background: #f1f4f7; }
.rj-conditions strong { display: block; margin-bottom: 0.3rem; font-size: 0.9rem; color: var(--titre); }
.rj-conditions p { margin: 0; font-size: 0.86rem; }
.rj-metier-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.rj-coches-ronds { margin-top: 1.6rem; gap: 0.8rem; font-size: 0.92rem; color: var(--titre); }
.rj-coches-ronds li { padding-left: 2.1rem; }
.rj-coches-ronds li::before {
  top: -0.1rem; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border-radius: 50%; background: var(--bleu-pale, #eef6fb); font-size: 0.8rem;
}
.rj-intervention { padding: 2.2rem; border-radius: 12px; background: var(--marine); color: rgba(255, 255, 255, 0.85); }
.rj-intervention h3 { margin: 0 0 1.4rem; color: #fff; font-size: 1.4rem; }
.rj-intervention dl { margin: 0; }
.rj-intervention dl div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.rj-intervention dl div:first-child { border-top: 0; padding-top: 0; }
.rj-intervention dt { font-weight: 700; font-size: 0.85rem; color: var(--ambre); }
.rj-intervention dd { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.rj-candidature { background: var(--ambre); color: var(--encre); }
.rj-candidature .sur-titre { color: rgba(8, 22, 37, 0.55) !important; }
.rj-candidature h2 { color: var(--encre); }
.rj-candidature ul { margin: 1.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.rj-candidature-grille { display: grid; grid-template-columns: 1fr 0.9fr; gap: 4rem; align-items: center; }
.rj-formulaire .formulaire { padding: 2rem; border-radius: 12px; background: #fff; box-shadow: 0 30px 60px -30px rgba(8, 22, 37, 0.45); color: var(--texte); }
.rj-formulaire .titre-formulaire { margin: 0 0 0.4rem; font-size: 1.6rem; }
.rj-form-intro { margin: 0 0 1.4rem; font-size: 0.88rem; }
.rj-formulaire textarea { width: 100%; resize: vertical; }
.rj-envoyer { width: 100%; background: var(--marine) !important; color: #fff !important; border: 0; }
.rj-envoyer:hover { background: var(--encre) !important; }
@media (max-width: 900px) {
  .rj-poste-grille, .rj-metier-grille, .rj-candidature-grille, .rj-fiche-colonnes { grid-template-columns: 1fr; gap: 2rem; }
}

/* « Ils nous font confiance » sur fond gris (2026-10-11), accueil et Contact : titre foncé,
   logos en gris foncé uni (le texte de certains logos a été passé en blanc pour le bleu nuit) */
main > .bandeau-confiance:has(.confiance-titre-section),
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-defile .confiance-logos { background: var(--fond) !important; }
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-titre-section { color: var(--titre) !important; }
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img { filter: grayscale(1) !important; opacity: 0.75 !important; }
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img:is([src$="amazon.png"], [src$="chateau-dax.png"], [src$="chez-vous.png"], [src$="electro-depot.png"], [src$="promen.png"]) {
  filter: grayscale(1) invert(1) !important; opacity: 0.7 !important;
}
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img:hover { opacity: 1 !important; }

/* Prestations : « Préparez les informations utiles », chiffres et zone, d'après les captures
   « infos utiles » et « infos utiles 2 » (2026-10-11) */
/* (surtitres des blocs « infos utiles » retirés à sa demande ; règle gardée sans effet) */
main > :is(.pr-outils, .pr-zone) .sur-titre {
  display: block !important; margin-bottom: 0.8rem; font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambre-texte) !important;
}
main > :is(.pr-outils, .pr-zone) .sur-titre::before { display: none !important; }
main > section.pr-outils, main > section.pr-chiffres, main > section.pr-zone { clip-path: none; margin-top: 0; }
.pr-outils h2 em, .pr-zone h2 em { font-style: normal; color: var(--bleu); }
.pr-outils-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; max-width: 1180px; margin: 0 auto; }
.pr-outil {
  display: grid; grid-template-columns: 7.5rem 1fr; overflow: hidden;
  border: 1px solid var(--trait); border-radius: 10px; background: #fff; box-shadow: var(--ombre-douce);
}
.pr-outil-icone { display: grid; place-items: center; }
.pr-outil-icone svg { width: 34px; height: 34px; }
.pr-outil-bleu .pr-outil-icone { background: #e6f0fc; color: var(--bleu); }
.pr-outil-orange .pr-outil-icone { background: #fde6dc; color: var(--ambre-fonce); }
.pr-outil > div { padding: 1.7rem 1.6rem; }
.pr-outil h3 { margin: 0 0 0.7rem; font-size: 1.25rem; }
.pr-outil p { margin: 0 0 1rem; font-size: 0.93rem; }
.pr-outil-lien { font-weight: 700; font-size: 0.92rem; color: var(--bleu-texte); text-decoration: none; }
.pr-outil-lien:hover { text-decoration: underline; }
.pr-chiffres { background: var(--marine); padding-top: 3.2rem !important; padding-bottom: 3rem !important; }
.pr-chiffres-liste { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.pr-chiffres-liste div { padding: 0.4rem 1rem; text-align: center; }
.pr-chiffres-liste div + div { border-left: 1px solid rgba(255, 255, 255, 0.15); }
.pr-chiffres-liste dt { font-family: var(--police-titres); font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.9rem); color: var(--ambre); }
.pr-chiffres-liste dd { margin: 0.3rem 0 0; font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); }
.pr-chiffres-lien { margin: 2rem 0 0; text-align: center; }
.pr-chiffres-lien a { color: #fff !important; font-weight: 700; font-size: 0.95rem; text-decoration: underline !important; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.6) !important; }
.pr-zone .qsn-centre { margin-bottom: 0; }
.pr-zone-pastilles { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.6rem 0 2rem; padding: 0; }
.pr-zone-pastilles a {
  display: inline-block; padding: 0.45rem 0.95rem; border: 1px solid #cfd8e2; border-radius: 999px;
  font-size: 0.88rem; font-weight: 600; color: var(--titre) !important; text-decoration: none !important; background: #fff;
}
.pr-zone-pastilles a:hover { border-color: var(--bleu); color: var(--bleu-texte) !important; }
@media (max-width: 900px) {
  .pr-outils-cartes { grid-template-columns: 1fr; }
  .pr-chiffres-liste { grid-template-columns: 1fr 1fr; gap: 1.4rem 0; }
  .pr-chiffres-liste div:nth-child(3) { border-left: 0; }
}
/* Prestations : « Pourquoi nous n'affichons pas de grille tarifaire ? » sur fond gris (2026-10-11) */
main > section.section-prix#tarifs { background: var(--fond); padding-top: var(--espace-bloc) !important; padding-bottom: var(--espace-bloc) !important; }
/* Tous les hauts de page bleu nuit (Prestations, Qui sommes-nous, Nous rejoindre, Contact,
   Conseils & outils, simulateur) : bord du bas droit, comme Conseils & outils (2026-10-11) */
.entete-page.entete-nuit::after { display: none !important; }
main .entete-page.entete-nuit, .entete-page.entete-nuit { padding-bottom: 5rem !important; }

/* Prestations : titre « Particulier ou professionnel » et son texte centrés (2026-10-12) */
#savoir-faire-prestations .besoin-entete.besoin-entete-centre { align-items: center !important; text-align: center; }
#savoir-faire-prestations .besoin-entete-centre h2,
#savoir-faire-prestations .besoin-entete-centre > p { margin-left: auto; margin-right: auto; text-align: center; }
#savoir-faire-prestations .besoin-onglets { display: flex; width: fit-content; margin-left: auto !important; margin-right: auto !important; }

/* Qui sommes-nous (2026-10-12) : chiffres sur fond bleu clair ; bloc « Une équipe présente »
   (équipe + flotte réunies) avec la galerie de camions qui défile à droite, centrée en hauteur */
.qsn-chiffres { background: var(--bleu) !important; }
.qsn-chiffres dt, .qsn-chiffres dd { color: #fff !important; opacity: 1; }
.qsn-chiffres div + div { border-left-color: rgba(255, 255, 255, 0.3); }
.qsn-deux-equipe { align-items: center; }
.qsn-equipe .flotte-galerie { height: 560px; }
.qsn-equipe-btn { margin-top: 2rem; }
@media (max-width: 960px) { .qsn-equipe .flotte-galerie { height: 460px; } }

/* Qui sommes-nous : plus d'espace entre les sections (2026-10-12) */
body:has(.qsn-intro) { --espace-bloc: 6.5rem; }
@media (max-width: 760px) { body:has(.qsn-intro) { --espace-bloc: 4.5rem; } }

/* Qui sommes-nous raccourci d'après la capture « notre histoire » (2026-10-12) */
.qsn-histoire { background: #fff !important; }
.qsn-depuis {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 15rem; padding: 2.4rem 2rem; border-radius: 12px; background: #dcebf7 !important; text-align: center;
}
.qsn-depuis-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--bleu-texte);
}
.qsn-depuis-icone svg { width: 30px; height: 30px; }
.qsn-depuis-titre { margin: 0.4rem 0 0; font-family: var(--police-titres); font-weight: 800; font-size: 1.6rem; color: var(--titre); }
.qsn-depuis p:last-child { margin: 0; color: var(--bleu-texte); }
.qsn-histoire h2 { margin: 0 0 1.2rem; }
.qsn-mission { background: var(--fond); }
.qsn-cartes-2 { grid-template-columns: repeat(2, 1fr); max-width: 60rem; margin: 0 auto; }
.qsn-carte-lien { display: inline-block; margin-top: 1rem; color: var(--bleu-texte); font-weight: 600; text-decoration: none; }
.qsn-carte-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.qsn-carte p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.qsn-engagements { background: #fff; }
.qsn-engagements h2.qsn-centre { margin-bottom: 2.6rem; }
.qsn-valeurs .qsn-carte { text-align: center; }
.qsn-valeurs .qsn-carte-icone { margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .qsn-cartes-2 { grid-template-columns: 1fr; } }
.qsn-mission .qsn-carte p a { color: var(--texte) !important; text-decoration-color: currentColor !important; font-weight: 400 !important; }
/* Notre histoire seule, sans l'encadré « Depuis 2010 » (2026-10-12) : texte calé à gauche */
.qsn-histoire-texte { max-width: none; margin: 0; text-align: left; }
.qsn-histoire-texte p { max-width: none !important; }
/* Qui sommes-nous, « Une équipe présente » sur fond blanc (2026-10-12) */
.qsn-equipe { background: #fff !important; color: var(--texte) !important; }
.qsn-equipe h2 { color: var(--titre) !important; }
/* Qui sommes-nous, bloc « Notre flotte » (2026-10-12) : fond gris clair entre l'équipe et
   les cartes mission / zone (qui passent sur fond blanc), « Nos valeurs » en gris clair */
.qsn-flotte-bloc { background: #fff; }   /* fond blanc (2026-10-12) */
.qsn-flotte-bloc h2 { margin: 0 0 0.8rem; }
.qsn-flotte-intro { margin: 0 0 2.2rem; }
.qsn-flotte-bloc .grille-flotte { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .qsn-flotte-bloc .grille-flotte { grid-template-columns: 1fr; } }
.qsn-mission { background: #fff !important; }
.qsn-engagements { background: #fff !important; }   /* fond blanc (2026-10-12) */
/* Qui sommes-nous : histoire et flotte en un seul bloc (2026-10-12). Cartes des camions en
   lignes compactes (chiffre à gauche) ; la galerie prend la hauteur de la colonne de texte */
.qsn-deux-equipe { align-items: stretch; }
.qsn-flotte-titre { margin: 2.4rem 0 0.6rem; font-size: clamp(1.4rem, 2vw, 1.75rem); color: var(--titre); }
.qsn-flotte-liste { grid-template-columns: 1fr !important; gap: 0.9rem !important; margin-top: 1.4rem; }
.qsn-flotte-liste .carte-flotte {
  display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; align-items: baseline;
  padding: 1.1rem 1.3rem;
}
.qsn-flotte-liste .carte-flotte .flotte-nb { grid-row: 1 / 3; margin: 0; font-size: 2.2rem; }
.qsn-flotte-liste .carte-flotte h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.qsn-flotte-liste .carte-flotte p:last-child { margin: 0; font-size: 0.92rem; line-height: 1.6; }
@media (min-width: 901px) {
  .qsn-equipe .flotte-galerie { height: auto; min-height: 560px; contain: size; }
}

/* Pages de prestations (livraison, déménagement, montage, palettes, tournées) : les blocs à deux
   colonnes passent l'un sous l'autre, sur toute la largeur (2026-10-12) */
.colonnes-empilees > div > p, .colonnes-empilees h2, .colonnes-empilees ul { max-width: none !important; }
.colonnes-empilees .colonne-suite { margin-top: 3rem; }

/* « Quatre raisons… » (Tournées entreprises) : sans les flèches entre pictogrammes (2026-10-12) */
.sans-fleches .etapes-icones li::after { display: none !important; }
.section-etapes-icones.sans-fleches { background: var(--fond) !important; }   /* fond gris (2026-10-12) */

/* Tournées entreprises : bas de l'en-tête droit, sans biais (2026-10-12).
   La page est repérée par son bloc « Quatre raisons… » (.sans-fleches) */
body:has(.sans-fleches) .entete-page::after { display: none; }
body:has(.sans-fleches) .entete-page { padding-bottom: 2.5rem !important; }

/* Articles : plus d'espace entre le fil d'Ariane et le titre (2026-10-12) */
.art-entete { padding-top: 2.2rem !important; }
/* Articles : temps de lecture, date et auteur écrits plus grand (2026-10-12) */
.art-meta { font-size: 0.95rem !important; }
/* Articles : moins d'espace entre temps de lecture / date / auteur et la photo (2026-10-12) */
.art-meta { margin-bottom: 1rem !important; }

/* Qui sommes-nous, « Notre flotte » : sans effet carte (ni fond, ni bordure, ni ombre) (2026-10-12) */
.qsn-flotte-liste .carte-flotte {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important; transform: none !important;
}
.qsn-flotte-liste { gap: 1.4rem !important; }

/* Prestations, « Ce qui fait le prix » : pictogrammes ronds en ligne, sans flèches (2026-10-12) */
.prix-facteurs-icones { margin-top: 1.6rem; }
.prix-grille { gap: 0 !important; }
.prix-facteurs-icones .etapes-icones { margin-top: 0 !important; }

/* Nous rejoindre : fiche de poste en texte à gauche, formulaire de candidature à droite
   (2026-10-12) */
.rj-poste-grille.rj-poste-formulaire { grid-template-columns: 1fr 0.9fr; gap: 4rem; }
.rj-poste-formulaire h3 { margin: 2rem 0 0.7rem; font-size: 1.25rem; }
@media (max-width: 900px) { .rj-poste-grille.rj-poste-formulaire { grid-template-columns: 1fr; gap: 2.5rem; } }
.prix-facteurs-icones { margin-top: 2.6rem !important; }   /* air sous « Ce qui fait le prix : » */
.rj-quotidien-btn { text-align: center; margin: 2.4rem 0 0; }   /* bouton vers le formulaire (2026-10-12) */
.rj-poste { background: #fff !important; }   /* poste et formulaire sur fond blanc, « Une intervention type » en gris (2026-10-12) */

/* « Ce que nous faisons / ne faisons pas » (Déménagement, Prestations) : coches vertes et
   croix rouges, à la manière des « do / don't » (2026-10-12). Les autres listes gardent
   leurs coches orange. Pas dans les articles : leurs coches restent orange partout (2026-10-26). */
section:has(.liste-croix):not(.art-section) .liste-coche li::before { background: rgba(22, 163, 74, 0.14); color: #15803d; }
.liste-croix li::before { background: rgba(220, 38, 38, 0.12) !important; color: #b91c1c !important; }

/* Tous les bords de blocs droits, sur tout le site (2026-10-13) : la pente des biais
   passe à 0 (les clip-path, triangles et marges qui en dépendent deviennent droits) */
:root { --biais: 0px !important; }

/* Nous rejoindre : formulaire de candidature mis en avant, carte bleu marine (2026-10-13) */
.rj-formulaire .formulaire { background: var(--marine) !important; color: #fff !important; box-shadow: 0 30px 60px -30px rgba(8, 22, 37, 0.6); }
.rj-formulaire .titre-formulaire, .rj-formulaire label { color: #fff !important; }
.rj-formulaire .rj-form-intro, .rj-formulaire .mention-rgpd { color: rgba(255, 255, 255, 0.75) !important; }
.rj-formulaire .mention-rgpd a { color: #fff !important; }
.rj-formulaire .requis { color: var(--ambre) !important; }
.rj-formulaire input[type="file"] { color: var(--texte) !important; }
.rj-envoyer { background: var(--ambre) !important; color: var(--marine) !important; }
.rj-envoyer:hover { background: #fff !important; color: var(--marine) !important; }

/* Déménagement : « ce que nous faisons / ne faisons pas » en tableau à deux colonnes,
   en-têtes vert et rouge (2026-10-13). Placé sous le bloc gris des étapes depuis le
   2026-10-13 : il garde son espace normal au-dessus du titre */
.oui-non { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.6rem; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; background: #fff; }
.oui-non-col { padding: 0 1.8rem 1.8rem; }
.oui-non-col h3 { margin: 0 -1.8rem 1.3rem; padding: 1rem 1.8rem; font-size: 1.05rem; }
.oui-non-oui h3 { background: rgba(22, 163, 74, 0.1); color: #15803d; }
.oui-non-non h3 { background: rgba(220, 38, 38, 0.08); color: #b91c1c; }
.oui-non-non { border-left: 1px solid var(--trait); }
.section-oui-non .apres-liste { margin-top: 1.4rem; }
@media (max-width: 760px) {
  .oui-non { grid-template-columns: 1fr; }
  .oui-non-non { border-left: 0; border-top: 1px solid var(--trait); }
}
.entete-page .conteneur > p { max-width: none !important; }   /* phrase sous le titre sur toute la largeur, toutes les pages (2026-10-13) */

/* Accueil, « Transport Lacote, qui sommes-nous ? » : texte à gauche, photo à droite
   (2026-10-13) */
.pourquoi-intro.pourquoi-avec-photo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important; gap: 3.5rem; align-items: center; margin-bottom: 0; }
.pourquoi-avec-photo .pourquoi-lien { text-align: left; margin-top: 1.6rem; }
.pourquoi-photo { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--ombre-forte); }
.pourquoi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 960px) { .pourquoi-intro.pourquoi-avec-photo { grid-template-columns: 1fr !important; gap: 2rem; } }

/* Frise des logos (accueil et Contact) : sans le titre « Ils nous font confiance », logos
   dans leurs vraies couleurs (2026-10-13). Fond bleu nuit, car Amazon, Château d'Ax,
   Electro Dépôt et Promen ont leur texte en blanc ; Maisons du Monde et Chez vous, au texte
   foncé, sont posés sur une pastille blanche pour rester lisibles. Le titre reste dans la
   page, masqué : les réglages de la frise s'appuient dessus. */
main > .bandeau-confiance .confiance-titre-section { display: none !important; }
main > .bandeau-confiance:has(.confiance-titre-section),
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-defile .confiance-logos { background: var(--marine) !important; }
main > .bandeau-confiance .confiance-logos img,
main > .bandeau-confiance .confiance-logos img:hover,
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img,
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img:hover,
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos img:is([src$="amazon.png"], [src$="chateau-dax.png"], [src$="chez-vous.png"], [src$="electro-depot.png"], [src$="promen.png"]),
main > .bandeau-confiance:has(.confiance-titre-section) .confiance-logos .logo-caz-la-cuisine {
  filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important;
}
main > .bandeau-confiance .confiance-logos img:is([src$="maisons-du-monde.png"], [src$="chez-vous.png"]) {
  background: #fff; border-radius: 6px; padding: 4px 8px; box-sizing: content-box;
}

/* Hauts de page avec photo (Prestations, Qui sommes-nous, Nous rejoindre, Conseils) et
   Contact moins hauts (2026-10-13) */
@media (min-width: 761px) {
  .entete-page.entete-photo, .entete-page.entete-grand, .heros.heros-v2.heros-contact { min-height: min(46vh, 420px) !important; }
}

/* Haut de page « photo claire » des pages de prestations, d'après la capture « head »
   (2026-10-13) : photo lumineuse, voile bleu nuit seulement à gauche sous le texte,
   fil d'Ariane en blanc posé en haut de la photo */
.entete-page.entete-clair {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: min(56vh, 520px) !important; padding: 4.5rem 0 4rem !important;
  background-position: center !important;
}
.entete-page.entete-clair::before {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(13, 33, 55, 0.82) 0%, rgba(13, 33, 55, 0.55) 38%, rgba(13, 33, 55, 0) 72%);
}
.entete-page.entete-clair > * { position: relative; z-index: 1; }
.entete-page.entete-clair > .fil-ariane {
  position: absolute; top: 0; left: 0; right: 0; background: transparent !important; border: 0 !important; padding: 1.1rem 0;
}
.entete-clair .fil-ariane, .entete-clair .fil-ariane a, .entete-clair .fil-ariane span, .entete-clair .fil-ariane li::before { color: #fff !important; }
.entete-clair .fil-ariane a { font-weight: 700; }
.entete-page.entete-clair h1 { color: #fff !important; max-width: 16em; }
.entete-page.entete-clair .conteneur > p { color: rgba(255, 255, 255, 0.92) !important; max-width: 36rem !important; }
@media (max-width: 760px) {
  .entete-page.entete-clair { min-height: 0 !important; padding: 4rem 0 3rem !important; }
  .entete-page.entete-clair::before { background: rgba(13, 33, 55, 0.62); }
}

/* Bloc « Votre trajet est-il dans notre zone ? » : carte non cliquable, phrase d'explication
   sous le titre (2026-10-13) */
.carte-zone .carte-dep { cursor: default !important; }
.section-zone .zone-verif .zone-verif-titre { margin-bottom: 0.8rem !important; }
.zone-verif-intro { margin: 0 0 2rem; color: rgba(255, 255, 255, 0.85); }

/* Première bulle des étapes en blanc sur toutes les pages intérieures : la règle
   « .fil-ariane ~ main » ne marchait plus depuis que le fil d'Ariane est dans le haut de
   page photo (2026-10-13) */
body:has(.fil-ariane) main .etapes-icones li:first-child .ei-icone {
  background: #fff !important; color: var(--titre) !important;
  box-shadow: 0 12px 28px rgba(13, 33, 55, 0.18), 0 2px 6px rgba(13, 33, 55, 0.08) !important;
}

/* Qui sommes-nous : « Notre histoire » sur toute la largeur, flotte et photos en dessous
   (2026-10-13) */
.qsn-histoire-large { margin-bottom: 3rem; }
.qsn-histoire-large p { max-width: none !important; }
.qsn-deux-equipe .qsn-flotte-titre { margin-top: 0 !important; }
.qsn-chiffres-histoire { margin: 0 0 3.5rem; }   /* chiffres au-dessus de « Notre flotte » (2026-10-13) */

/* Déménagement, « ce que nous faisons / ne faisons pas » : sans effet carte (ni cadre, ni
   fond, ni bandeau coloré), deux colonnes simples ; titres gardés en vert et rouge (2026-10-13) */
.oui-non { border: 0 !important; border-radius: 0 !important; background: none !important; gap: 3rem; overflow: visible; }
.oui-non-col { padding: 0 !important; }
.oui-non-col h3 { margin: 0 0 1rem !important; padding: 0 !important; background: none !important; font-size: 1.2rem; }
.oui-non-non { border: 0 !important; }

/* Qui sommes-nous : les 4 chiffres sans fond bleu, texte foncé et nombres en bleu ;
   plus d'espace avant « Notre flotte » (2026-10-13) */
.qsn-chiffres-histoire { margin-bottom: 5.5rem !important; }
.qsn-chiffres-histoire .carte-bref { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
.qsn-chiffres-histoire .chiffre .chiffre-nombre { color: var(--bleu) !important; }
.qsn-chiffres-histoire .chiffre .chiffre-unite { color: var(--titre) !important; }
.qsn-chiffres-histoire .chiffre .chiffre-desc { color: var(--texte) !important; }
.qsn-chiffres-histoire.qsn-chiffres-fin { margin-bottom: 0 !important; }   /* plus de flotte juste en dessous (2026-10-13) */
.qsn-engagements { background: var(--fond) !important; }   /* « Nos valeurs » sur fond gris, entre histoire et flotte en blanc (2026-10-13) */

/* Déménagement, « ce que nous faisons / ne faisons pas » : phrase sous le titre, trait
   vertical entre les deux colonnes et trait sous le bloc (2026-10-13) */
.oui-non-intro { margin: 0 0 0.4rem; }
.oui-non { padding: 1.8rem 0 !important; border-top: 1px solid var(--trait) !important; border-bottom: 1px solid var(--trait) !important; gap: 0 !important; }
.oui-non-oui { padding-right: 2.5rem !important; }
.oui-non-non { border-left: 1px solid var(--trait) !important; padding-left: 2.5rem !important; }
@media (max-width: 760px) {
  .oui-non-oui { padding: 0 0 1.6rem !important; }
  .oui-non-non { border-left: 0 !important; border-top: 1px solid var(--trait) !important; padding: 1.6rem 0 0 !important; }
}
.oui-non { border-top: 0 !important; padding-top: 1.2rem !important; }   /* pas de trait entre la phrase et le tableau (2026-10-13) */

/* Conseils & outils, « Combien de place faut-il prévoir ? » : les 3 étapes du calculateur
   avec le même visuel que « Votre projet, étape par étape » de l'accueil (numéro dans un
   rond blanc, titre en capitales, trait entre les étapes, sans carte) (2026-10-13) */
.simu-carte.simu-apercu { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; }
.simu-apercu .simu-etapes { gap: 0; }
.simu-apercu .simu-etapes li { grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 1.8rem; padding: 1.6rem 0; }
.simu-apercu .simu-etapes li:first-child { padding-top: 0; }
.simu-apercu .simu-etapes li + li { border-top: 1px solid var(--trait); }
.simu-apercu .simu-num {
  width: 3.4rem; height: 3.4rem; background: #fff; box-shadow: 0 6px 18px rgba(13, 33, 55, 0.12);
  font-family: var(--police-titres); font-weight: 800; font-size: 1.5rem; color: var(--titre);
}
.simu-apercu .simu-etapes strong {
  margin: 0.5rem 0 0.8rem; font-family: var(--police-titres); font-size: 1.05rem;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--titre);
}
.simu-apercu .simu-etapes li > span:last-child { font-size: 0.98rem; }
.simu-apercu .simu-etapes li + li { border-top: 0 !important; }   /* comme l'accueil : pas de trait entre les étapes */

/* Numéros d'étapes (accueil « Votre projet, étape par étape » et Conseils & outils
   « Combien de place faut-il prévoir ? ») plus lisibles : rond bleu plein, chiffre blanc
   (2026-10-13) */
#savoir-faire .etapes-icones li::before,
#savoir-faire .etapes-icones li:nth-child(even)::before,
.simu-apercu .simu-num { background: var(--bleu) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(34, 111, 196, 0.3) !important; }
.oui-non { border-bottom: 0 !important; padding-bottom: 0 !important; }   /* plus de trait sous le tableau (2026-10-13) ; seul le trait vertical reste */

/* Menus déroulants (formulaire de l'accueil, vérificateur de zone…) : flèche du site, bien
   décollée du bord droit, au lieu de la flèche du navigateur collée au bord (2026-10-13) */
select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230d2137' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 1rem center !important;
  background-size: 12px 8px !important; padding-right: 2.8rem !important;
}
select::-ms-expand { display: none; }

/* Nouveaux logos (2026-10-13) : sur le bandeau bleu nuit, pastille blanche pour les logos
   à texte foncé (Chez vous, Electro Dépôt, Château d'Ax) ; Maisons du Monde, désormais en
   blanc, n'en a plus besoin */
main > .bandeau-confiance .confiance-logos img[src$="maisons-du-monde.png"] { background: none !important; padding: 0 !important; }
main > .bandeau-confiance .confiance-logos img:is([src$="chez-vous.png"], [src$="electro-depot.png"], [src$="chateau-dax.png"]) {
  background: #fff; border-radius: 6px; padding: 6px 10px; box-sizing: content-box;
}
.colonnes-empilees > div + div { margin-top: 3rem; }   /* pages villes : textes les uns sous les autres (2026-10-13) */

/* Pages de prestations : ligne « Nous intervenons dans… » avant la FAQ (2026-10-13) */
main > section.section-zones-lien { padding-top: 0 !important; }   /* bandeau zone : collé au bloc du dessus */
.zones-lien { margin: 0; color: var(--texte); }
.bandeau-boutons { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: flex-end; }   /* pages villes : téléphone + devis côte à côte (2026-10-13) */

/* Logos partenaires harmonisés (2026-10-13) : même « poids » visuel pour tous. La hauteur
   dépend de la forme du logo (surface à peu près égale) : un logo long est moins haut qu'un
   logo carré ; BUT et Caz la Cuisine, blocs pleins, un peu réduits. Mêmes valeurs partout. */
main > .bandeau-confiance .confiance-logos img { width: auto !important; max-width: none !important; }
main > .bandeau-confiance .confiance-logos .logo-ikea { height: 44px !important; }
main > .bandeau-confiance .confiance-logos .logo-lapeyre { height: 40px !important; }
main > .bandeau-confiance .confiance-logos .logo-but { height: 54px !important; }
main > .bandeau-confiance .confiance-logos .logo-amazon { height: 41px !important; }
main > .bandeau-confiance .confiance-logos .logo-electro-depot { height: 37px !important; }
main > .bandeau-confiance .confiance-logos .logo-maisons-du-monde { height: 39px !important; }
main > .bandeau-confiance .confiance-logos .logo-chateau-dax { height: 38px !important; }
main > .bandeau-confiance .confiance-logos .logo-promen { height: 53px !important; }
main > .bandeau-confiance .confiance-logos .logo-caz-la-cuisine { height: 50px !important; }
main > .bandeau-confiance .confiance-logos .logo-chez-vous { height: 36px !important; }
/* logos sur pastille blanche : un cran plus petits, la pastille les grossit à l'œil */
main > .bandeau-confiance .confiance-logos .logo-electro-depot { height: 32px !important; }
main > .bandeau-confiance .confiance-logos .logo-chateau-dax { height: 33px !important; }
main > .bandeau-confiance .confiance-logos .logo-chez-vous { height: 32px !important; }
.section-zones-lien .bandeau-cta p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Nous rejoindre, « Une intervention type » : alinéa en début de texte (2026-10-13) */
.etapes-icones.ei-3 p { text-indent: 1.5em; }

/* Candidature : message d'erreur de la case d'accord sous le texte, pas à côté (2026-10-13) */
.candidature-accord { flex-wrap: wrap; }
.candidature-accord label { flex: 1 1 0; min-width: 0; }
.candidature-accord .dc-erreur-champ { flex-basis: 100%; margin-bottom: 0; }

/* Prestations & tarifs, « Pourquoi nous n'affichons pas de grille tarifaire ? » :
   plus d'air entre titre, paragraphe et facteurs ; paragraphe moins large (2026-10-13) */
.section-prix .prix-texte h2 { margin-bottom: 1.5rem; }
.section-prix .prix-texte p { max-width: 60rem; }
.section-prix .prix-facteurs-icones { margin-top: 4rem !important; }

/* Accueil sur téléphone (2026-10-13) : la règle « Haut de page v2 » gardait 2 colonnes et
   poussait le formulaire de devis hors de l'écran. Une colonne sous 960 px ; sur
   téléphone, ni formulaire de devis ni photo « Transport Lacote, qui sommes-nous ? » */
@media (max-width: 960px) {
  .heros-v2 .heros-v2-grille { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .heros-v2 .devis-court { display: none; }
  .pourquoi-photo { display: none; }
}

/* Bloc zone (accueil, Conseils & outils) sur téléphone (2026-10-13) : une colonne sous
   960 px (une règle plus bas dans le fichier gardait 2 colonnes), et pas de carte */
@media (max-width: 960px) {
  .section-zone .zone-grille { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .section-zone .zone-panneau { display: none; }
}

/* Téléphone (2026-10-13) : textes et icônes alignés à gauche sur les blocs centrés,
   onglets sans icône, fil d'Ariane qui ne chevauche plus le titre */
@media (max-width: 768px) {
  /* les blocs d'étapes (« Une intervention type », « Ce qui fait le prix »…) restent
     centrés, comme sur ordinateur */
  .rj-quotidien-btn { text-align: left; }
  /* « Pour les particuliers / Pour les professionnels » */
  .besoin-onglets label > span[aria-hidden] { display: none; }
  /* « Particulier ou professionnel : un service à votre mesure » */
  .section-besoin .besoin-entete.besoin-entete-centre { align-items: flex-start; text-align: left; }
  .besoin-entete-centre > p { text-align: left; }
  /* « Un déménagement bien préparé » */
  .guides-entete { text-align: left; }
  /* le fil d'Ariane passe sur 2 lignes : il reprend sa place au-dessus du titre */
  .entete-page.entete-clair { padding-top: 1.2rem !important; }
  .entete-page.entete-clair > .fil-ariane { position: static; padding: 0 0 1.6rem; width: 100%; align-self: stretch; }
  /* même titre centré sur Prestations & tarifs (règle plus précise plus haut) */
  #savoir-faire-prestations .besoin-entete.besoin-entete-centre { align-items: flex-start !important; text-align: left; }
  #savoir-faire-prestations .besoin-entete-centre h2,
  #savoir-faire-prestations .besoin-entete-centre > p { margin-left: 0; margin-right: 0; text-align: left; }
}

/* Blocs d'étapes à icônes (« Une intervention type », « De votre demande au dernier meuble
   remonté », « Du devis au meuble debout »…) : titre centré, sur tous les écrans
   (2026-10-13). Sauf « Votre projet, étape par étape » de l'accueil, mis en page à part */
.section-etapes-icones:not(#savoir-faire) > .conteneur > :is(h2, .sur-titre, .intro-section) {
  text-align: center; margin-left: auto; margin-right: auto;
}

/* « Pourquoi nous n'affichons pas de grille tarifaire ? » : titre et paragraphe centrés,
   comme les blocs d'étapes (2026-10-13) */
.section-prix .prix-texte { text-align: center; }
.section-prix .prix-texte p { margin-left: auto; margin-right: auto; }

/* Articles (texte SEO du 2026-10-13) : un paragraphe qui suit une liste n'y est plus collé,
   et deux encadrés de fin à la suite gardent un écart entre eux */
.art-corps > ul + p { margin-top: 1.1rem; }
.art-cta-fin + .art-simulateur { margin-top: 1.4rem !important; }

/* Accueil, « Votre projet, étape par étape » : le numéro est écrit dans la page
   (<span class="ei-num">) au lieu d'être dessiné par le CSS ; un seul numéro par étape
   pour les outils SEO (2026-10-13). Même rond bleu qu'avant. */
#savoir-faire .etapes-icones li::before,
#savoir-faire .etapes-icones li:nth-child(even)::before { content: none !important; display: none !important; }
#savoir-faire .etapes-icones .ei-num {
  grid-column: 1; grid-row: 1 / span 2; align-self: start;
  display: flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--bleu); color: #fff; box-shadow: 0 6px 18px rgba(34, 111, 196, 0.3);
  font-family: var(--police-titres); font-weight: 800; font-size: 1.5rem;
}
.ei-num { display: none; }   /* ailleurs, s'il réapparaît, pas de numéro en double */
#savoir-faire .etapes-icones .ei-num { display: flex; }

/* Pages « liste de liens » (zone d'intervention, spécialités, déménagement entre villes),
   d'après les captures du 2026-10-13 : bandeau de titre bleu avec une pointe, intro
   centrée, liens en trois colonnes sur fond gris */
/* fond blanc à sa demande (2026-10-13) : plus de pointe, qui ne se verrait pas */
.liste-bandeau { background: #fff; text-align: left; padding: 3.2rem 0 0; }   /* à gauche comme les autres pages (2026-10-13) */
.liste-bandeau h1 { color: var(--titre) !important; margin: 0; font-size: clamp(2rem, 4vw, 3rem); }
.liste-intro { padding: 1.4rem 0 3rem; }
.liste-intro p { max-width: none !important; margin: 0; text-align: left; line-height: 1.75; }   /* toute la largeur (2026-10-13) */
.liste-liens-colonnes { columns: 3; column-gap: 2.4rem; margin: 0; padding: 0 0 0 1.2rem; }
.liste-liens-colonnes li { break-inside: avoid; margin: 0 0 0.45rem; color: var(--bleu); }
.liste-liens-colonnes a { color: var(--bleu-texte); text-decoration: none; }
.liste-liens-colonnes a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .liste-liens-colonnes { columns: 2; } }
@media (max-width: 560px) { .liste-liens-colonnes { columns: 1; } }
/* liste sur fond blanc, juste sous l'intro : pas de grand vide entre les deux */
main > section.liste-liens { padding-top: 0 !important; }
.liste-liens-titre { font-size: 1.4rem; margin: 0 0 1rem; }
.liste-liens-colonnes + .liste-liens-titre { margin-top: 2.4rem; }

/* Pages villes : tableau « Déménager depuis … » (distances par la route, 2026-10-13) */
.distances-tableau { margin-top: 1.6rem; max-width: 46rem; overflow-x: auto; }
.distances-tableau table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--trait); border-radius: 12px; overflow: hidden; }
.distances-tableau th, .distances-tableau td { padding: 0.75rem 1.1rem; text-align: left; border-bottom: 1px solid var(--trait); font-size: 0.97rem; }
.distances-tableau thead th { background: var(--fond); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte); }
.distances-tableau tbody tr:last-child th, .distances-tableau tbody tr:last-child td { border-bottom: 0; }
.distances-tableau tbody th { font-weight: 600; }
.distances-tableau tbody th a { color: var(--titre); text-decoration: none; }
.distances-tableau tbody th a:hover { color: var(--bleu-texte); }
.distances-tableau tbody th span { color: var(--texte); font-weight: 400; }
.distances-tableau td:nth-child(2) { font-weight: 700; color: var(--titre); white-space: nowrap; }
.distances-tableau td:last-child { text-align: right; white-space: nowrap; }
.distances-tableau td:last-child a { color: var(--bleu-texte); font-weight: 600; }
.distances-plus { margin: 1.2rem 0 0; }

/* Déménagement de proximité : « Quelques trajets de déménagement » (2026-10-13) */
.trajets-courants { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.trajets-courants a {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem;
  background: #fff; border: 1px solid var(--trait); border-radius: 10px; color: var(--titre) !important;
  font-weight: 600; text-decoration: none;
}
.trajets-courants a:hover { border-color: var(--bleu); color: var(--bleu-texte) !important; }
.trajets-courants a span { color: var(--texte); font-weight: 400; font-size: 0.9rem; white-space: nowrap; }
.trajets-tous { margin: 1.8rem 0 0; }
@media (max-width: 960px) { .trajets-courants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .trajets-courants { grid-template-columns: 1fr; } }

/* Bulle d'aide en parcours guidé (2026-10-13) : les choix restent toujours visibles en
   entier (au plus 6 boutons) ; c'est la conversation au-dessus qui défile */
.chat-choix { max-height: none !important; flex-shrink: 0; }
.chat-retour { background: transparent; border-style: dashed; }

/* ==========================================================================
   Bulle d'aide façon messagerie (WhatsApp / Messenger), 2026-10-13 : en-tête avec
   photo de profil, bulles avec l'heure, « … écrit », et en bas, à la place du champ de
   saisie, les réponses toutes prêtes
   ========================================================================== */
.chat-panneau { width: min(380px, calc(100vw - 24px)); height: min(600px, calc(100vh - 110px)); max-height: none; border-radius: 20px; }
.chat-entete { justify-content: flex-start; gap: 0.75rem; padding: 0.8rem 1rem; background: var(--titre); }
.chat-entete-titres { flex: 1; min-width: 0; }
.chat-titre { font-size: 1rem; }
.chat-sous-titre { font-size: 0.78rem; opacity: 0.75; }
.chat-avatar {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--bleu); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-end;
}
.chat-avatar svg { width: 17px; height: 17px; }
.chat-avatar-entete { width: 40px; height: 40px; align-self: center; background: #fff; color: var(--bleu); position: relative; }
.chat-avatar-entete svg { width: 22px; height: 22px; }
.chat-avatar-vide { background: transparent; }
/* Logo du site comme photo de profil (2026-10-26) */
.chat-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.chat-avatar-entete { background: transparent; }

/* fond de conversation : léger motif de points, comme les messageries */
.chat-fil {
  gap: 0.25rem; padding: 1rem 0.8rem;
  background-color: #eef1f4;
  background-image: radial-gradient(rgba(13, 33, 55, 0.06) 1px, transparent 1px);
  background-size: 14px 14px;
}
.chat-ligne { display: flex; align-items: flex-end; gap: 0.45rem; }
.chat-ligne-moi { justify-content: flex-end; }
.chat-ligne + .chat-ligne { margin-top: 0.15rem; }
.chat-ligne-nous + .chat-ligne-moi, .chat-ligne-moi + .chat-ligne-nous { margin-top: 0.7rem; }

.chat-msg {
  position: relative; max-width: 78%; padding: 0.5rem 0.75rem 0.35rem; border-radius: 16px;
  font-size: 0.9rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(13, 33, 55, 0.08);
}
.chat-nous { background: #fff; color: var(--titre); border-bottom-left-radius: 4px; }
.chat-moi { background: var(--bleu); color: #fff; border-bottom-right-radius: 4px; }
.chat-suite.chat-nous { border-top-left-radius: 6px; }
.chat-suite.chat-moi { border-top-right-radius: 6px; }
.chat-heure { display: block; text-align: right; margin-top: 0.15rem; font-size: 0.68rem; opacity: 0.6; }
.chat-moi .chat-heure { opacity: 0.8; }
.chat-lien { display: block; margin-top: 0.45rem; padding-top: 0.45rem; border-top: 1px solid var(--trait); }

/* « … écrit » */
.chat-ecrit { display: inline-flex; gap: 4px; padding: 0.75rem 0.85rem; }
.chat-ecrit span { width: 7px; height: 7px; border-radius: 50%; background: #9aa7b4; animation: chat-points 1s infinite ease-in-out; }
.chat-ecrit span:nth-child(2) { animation-delay: 0.15s; }
.chat-ecrit span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-points { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-ecrit span { animation: none; } }

/* barre du bas : les réponses toutes prêtes à la place du champ de saisie */
.chat-composeur { flex-shrink: 0; background: #fff; border-top: 1px solid var(--trait); padding: 0.55rem 0.7rem 0.75rem; }
.chat-composeur-titre { margin: 0 0 0.45rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte); }
.chat-choix { padding: 0; border-top: 0; gap: 0.4rem; }
.chat-choix:empty { min-height: 1.9rem; }
.chat-question {
  border: 1.5px solid var(--bleu); color: var(--bleu-texte); background: #fff; font-weight: 600;
  padding: 0.42rem 0.8rem; font-size: 0.82rem;
}
.chat-question:hover, .chat-question:focus-visible { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.chat-retour { border-color: var(--trait); color: var(--texte); border-style: solid; font-weight: 500; }
.chat-appel { border-color: var(--ambre); background: var(--ambre); color: var(--encre); }
.chat-appel:hover { background: var(--ambre-fonce, var(--ambre)); color: var(--encre); }
.chat-autre { border-color: var(--ambre); background: var(--ambre); color: var(--encre); }
.chat-autre:hover, .chat-autre:focus-visible { background: var(--titre); border-color: var(--titre); color: #fff; }

/* Contact : carte Google Maps chargée au clic (2026-10-13) */
.carte-google[data-carte-google]:not(.carte-chargee) { display: flex; align-items: center; justify-content: center; background: var(--fond); border: 1px solid var(--trait); }
.carte-consentement { max-width: 30rem; padding: 2rem 1.6rem; text-align: center; }
.carte-consentement-titre { font-family: var(--police-titres); font-weight: 700; font-size: 1.15rem; color: var(--titre); margin: 0 0 0.6rem; }
.carte-consentement p { margin: 0 0 1.2rem; font-size: 0.95rem; }
.carte-ouvrir { display: block; margin-top: 0.9rem; font-weight: 600; color: var(--bleu-texte); }
.carte-afficher { border: 0; cursor: pointer; font: inherit; font-weight: 700; }

/* Simulateur : texte sous l'outil pour le SEO (2026-10-13) */
.sim-guide > * { max-width: none; }   /* toute la largeur (2026-10-26) */
.sim-guide h2 + * { margin-top: 1rem; }
.sim-guide p + h2, .sim-guide ol + h2 { margin-top: 2.6rem; }
.sim-guide-etapes { padding-left: 1.3rem; }
.sim-guide-etapes li { margin-bottom: 0.7rem; line-height: 1.7; }
/* la page du simulateur a un fond bleu nuit : la partie texte reprend le fond blanc du site */
body:has(.section-simulateur-app) main > section.section-sim-guide { background: #fff !important; color: var(--texte) !important; }
.section-sim-guide h2 { color: var(--titre) !important; }
.section-sim-guide p, .section-sim-guide li { color: var(--texte) !important; }
.section-sim-guide strong { color: var(--titre) !important; }
.section-sim-guide a { color: var(--bleu-texte) !important; }

/* ---------- Article « devis immédiat » (2026-10-26) ---------- */
/* Checklist à cocher : chaque case ouvre son champ, puis envoi vers la demande de devis */
.ald { margin: 0 0 1.6rem; }
.ald-liste { list-style: none; margin: 0 0 1rem; padding: 0; border: 1px solid #dfe4e8; border-radius: 6px; background: #fff; }
.ald-ligne { margin: 0; border-bottom: 1px solid #dfe4e8; }
.ald-ligne:last-child { border-bottom: 0; }
.ald-coche { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; cursor: pointer; font-weight: 600; color: var(--titre); }
.ald-coche input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--bleu); }
/* Bas de liste : aide du calculateur s'il manque une information, même encart foncé que
   « Plusieurs meubles… » (2026-10-26) */
.ald-manque.art-conseil { margin: 1rem 0 0.6rem; }
.ald-manque[hidden], #ald-complet[hidden] { display: none; }
.ald-lien { grid-column: 1 / -1; justify-self: start; margin: 0.9rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.85) !important; text-decoration: underline; }
.ald-lien:hover { color: #fff !important; }

/* Exemples d'objets avec leurs dimensions habituelles : fiches non cliquables */
.ald-exemples { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.ald-exemples li { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.9rem; row-gap: 0.15rem; align-content: center; margin: 0; padding: 0.6rem 1rem 0.6rem 0.6rem; border-radius: 6px; background: var(--bleu-pale); }
/* Dessin du simulateur de volume devant chaque exemple (_gen_illustrations_exemples.py, 2026-10-26) */
.ald-ex-img { grid-row: 1 / 3; align-self: center; width: 100%; height: auto; }
.ald-ex-nom { align-self: end; }
.ald-ex-dim { align-self: start; }
.ald-ex-nom { font-weight: 700; color: var(--titre); }
.ald-ex-dim { font-size: 0.88rem; color: var(--bleu-texte); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .ald-exemples { grid-template-columns: 1fr; }
}

/* Encarts foncés des articles avec un bouton (appel, calculateur) : texte puis bouton sous
   le titre (2026-10-26) */
.art-conseil > .art-conseil-titre + p { grid-column: 1 / -1; margin-top: 0.8rem; }
.art-conseil:not(.art-simulateur) > .btn { grid-column: 1 / -1; justify-self: start; margin-top: 1.2rem; }

/* Page Nos références : logos en grille de cases bleu nuit, comme la frise « Ils nous font
   confiance » (certains logos sont blancs), pastille blanche pour les logos à texte foncé (2026-10-26) */
.ref-intro { max-width: 46rem; margin-bottom: 2rem; }
.ref-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ref-logos li { display: flex; align-items: center; justify-content: center; height: 120px; padding: 1.2rem; border-radius: 6px; background: var(--marine); }
.ref-logos img:is([src$="chez-vous.png"], [src$="electro-depot.png"], [src$="chateau-dax.png"], [src$="caz-la-cuisine.png"]) { padding: 6px 10px; border-radius: 6px; background: #fff; box-sizing: content-box; max-height: 52px; }
.ref-logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 64px; }
@media (max-width: 900px) { .ref-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ref-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ref-logos li { height: 96px; } }

/* Qui sommes-nous : photo du camion à droite du texte (2026-10-26) */
.qsn-histoire-photo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.qsn-histoire-img { display: block; width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 900px) { .qsn-histoire-photo { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Téléphone (2026-10-26) */
@media (max-width: 768px) {
  /* Accueil : départements à droite de l'épingle, pas en dessous */
  .heros-v2 .heros-departements { flex-wrap: nowrap; align-items: flex-start; }
  .heros-v2 .heros-departements svg { margin-top: 0.2rem; }
  /* « Pour les particuliers / Pour les professionnels » : texte centré sur ses 2 lignes */
  .besoin-onglets label { justify-content: center; text-align: center; }
  /* Bandeaux « Demandez dès maintenant un devis » : boutons à gauche, comme ailleurs */
  .bandeau-boutons { justify-content: flex-start; }
  /* « Combien de place faut-il prévoir ? » : les étapes avant le bouton */
  .simu-grille { display: flex; flex-direction: column; align-items: stretch; }
  .simu-texte { display: contents; }
  .simu-texte .simu-bouton { order: 2; margin: 0; }
}

/* Articles (2026-10-26) : encart « Un transport à prévoir ? » de la colonne de droite au format
   des autres encarts foncés ; sommaire sous la réponse rapide sur téléphone */
.art-cote .art-cote-encart { margin: 0; }
.art-sommaire-mobile { display: none; }
@media (max-width: 960px) {
  .art-sommaire-mobile { display: block; margin: 1.8rem 0 2rem; }
  main .art-corps .art-sommaire-mobile a { color: #5a6878; text-decoration: none; font-weight: 400; }
  /* sommaire déjà sous la réponse rapide, et « Un transport à prévoir ? » redit l'encart de fin */
  .art-cote { display: none; }
}

/* Carte de la zone (2026-10-26) : cercle du rayon d'intervention autour de Carcassonne */
.carte-zone .carte-rayon { fill: rgba(34, 111, 196, 0.08); stroke: var(--bleu); stroke-width: 2.5; stroke-dasharray: 8 6; pointer-events: none; }
.carte-zone .carte-centre { fill: #e2412e; stroke: #fff; stroke-width: 2; pointer-events: none; }

/* Aveyron et Tarn-et-Garonne (2026-10-26) : en partie dans le rayon, non cliquables */
.carte-zone .carte-voisin path { fill: #1b3550; stroke: var(--marine); stroke-width: 2; stroke-linejoin: round; }
/* 2026-10-27 : noms et numéros écrits comme ceux des autres départements */

/* « Nos transports dans/à… » (pages départements et communes) : même survol que les
   cartes de Prestations & tarifs, fond bleu et texte blanc (2026-10-27) */
.section-nos-transports .carte-service { transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.section-nos-transports .carte-service::before { display: none; }
.section-nos-transports .carte-service:hover {
  background: var(--bleu); border-color: var(--bleu); transform: translateY(-3px); box-shadow: var(--ombre-douce);
}
.section-nos-transports .carte-service:hover h3,
.section-nos-transports .carte-service:hover p,
.section-nos-transports .carte-service:hover a { color: #fff !important; }

/* Présentation de l'accueil en 2 paragraphes (2026-10-27) */
.pourquoi-intro .pourquoi-sous-titre + .pourquoi-sous-titre { margin-top: 0.9em; }

/* Bandeau de consentement Google Analytics (2026-10-27, assets/js/consentement.js) :
   « Refuser » et « Accepter » ont exactement le même poids (CNIL) */
.consentement { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000;
  max-width: 46rem; margin: 0 auto; padding: 1.1rem 1.25rem; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.9rem 1.25rem; background: var(--marine); color: #fff;
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.consentement[hidden] { display: none; }
.consentement p { flex: 1 1 22rem; margin: 0; font-size: 0.92rem; line-height: 1.5; }
.consentement a { color: #fff; text-decoration: underline; }
.consentement-boutons { display: flex; gap: 0.6rem; }
.consentement-bouton { min-width: 7.5rem; padding: 0.65rem 1.1rem; border: 2px solid #fff;
  border-radius: 8px; background: #fff; color: var(--marine); font: inherit; font-weight: 700;
  cursor: pointer; }
.consentement-bouton:hover, .consentement-bouton:focus-visible { background: transparent; color: #fff; }


/* Téléphone (2026-10-28) : alignés à gauche « Pourquoi nous n'affichons pas de grille
   tarifaire ? » (Prestations), « Préparez les informations utiles » (Prestations) et
   « Ce qui compte au quotidien » (Nous rejoindre) ; centrés sur ordinateur */
@media (max-width: 768px) {
  .section-prix .prix-texte { text-align: left; }
  .section-prix .prix-texte p { margin-left: 0; margin-right: 0; }
  .pr-outils .qsn-centre, .rj-quotidien .qsn-centre { text-align: left; margin-left: 0; margin-right: 0; }
  /* « Une intervention type » (Nous rejoindre) : le titre seul, les étapes restent centrées */
  .rj-intervention-type > .conteneur > h2 { text-align: left !important; }
}

/* Paragraphe qui suit un encart bleu nuit (calculateur, conseil) : un vrai espace au-dessus,
   sinon le texte colle à l'encart (2026-10-28) */
main .art-corps .art-conseil + p { margin-top: 2rem; }

/* Menu mobile ou aide (chatbot) ouverts : le reste de la page passe sous un voile bleu nuit,
   pour que le menu et la fenêtre d'aide ressortent (2026-10-28). Le voile reste sous l'en-tête
   (z-index 100) pour le menu, sous la bulle d'aide (z-index 900) pour le chatbot. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: rgba(13, 33, 55, 0.6); opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
body:has(.menu-case:checked)::after { z-index: 99; opacity: 1; visibility: visible; }
body:has(.chat.chat-ouvert)::after { z-index: 899; opacity: 1; visibility: visible; }
@media (min-width: 1181px) { body:has(.menu-case:checked):not(:has(.chat.chat-ouvert))::after { opacity: 0; visibility: hidden; } }
/* Menu mobile ouvert : panneau blanc plein, la page ne transparaît plus derrière les liens */
@media (max-width: 1180px) { .menu-case:checked ~ .nav-principale { background: #fff !important; backdrop-filter: none !important; } }
/* Menu mobile : boutons Téléphone et Devis plus hauts, texte centré (capture WhatsApp 2026-10-28) */
@media (max-width: 1180px) {
  .menu-case:checked ~ .nav-principale .btn-tel,
  .menu-case:checked ~ .nav-principale .btn-devis {
    display: flex !important; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 56px; padding: 1rem !important; font-size: 1.05rem !important; text-align: center;
  }
}

/* Accueil, mobile (2026-10-28) : moins d'espace entre les départements et les deux boutons,
   photo recadrée sur le couple (à gauche de l'image) au lieu du centre */
@media (max-width: 760px) {
  .heros-v2 .heros-departements-haut { margin-bottom: 1.4rem !important; }
  .heros.heros-v2 { background-position: 22% center; }
}