/*
Theme Name: TS Cargo
Author: TS Cargo
Description: Thème bloc sur mesure de TS Cargo (transport médical et express, Liège). Conçu en maquette HTML puis converti en blocs natifs, entièrement modifiable dans l'éditeur.
Version: 1.0.10
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ts-cargo
Tags: block-theme, full-site-editing, business
*/

/* ===== MAQUETTE (maquette/styles.css) ===== */
/* =========================================================
   TS Cargo — maquette d'accueil
   Registre relevé sur la référence (CargoWave, 1600 px) :
   sans géométrique légère + serif à contraste pour les cartes,
   bleu de marque + azur + quatuor pastel, blanc froid / brume,
   bandes encartées à angles droits, cartes arrondies, pilules.
   ========================================================= */

:root {
  --bleu: #0270F0;
  --azur: #0497FE;
  --encre: #0A0A0A;
  --texte: #4A4D52;
  --discret: #8A8F96;
  --trait: #E5E7EB;
  --brume: #F4F6FA;
  --blanc: #FFFFFF;

  --anis: #D6ED93;
  --lavande: #B9BDFF;
  --menthe: #ADE8E6;
  --jaune: #FFEA62;
  --ciel: #80C2FB;
  --lavande-vive: #A1A5F8;
  --orange: #FF8422;

  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Fraunces', Georgia, serif;

  /* les bandes vont bord à bord (demande du client, 2026-10-06) ; marge + retrait ne servent
     plus qu'à placer la colonne de contenu : 120 px de chaque côté à 1600 px d'écran */
  --marge: clamp(12px, 5vw, 80px);
  --retrait: clamp(16px, 2.5vw, 40px);
  --largeur: 1360px;
  /* retrait intérieur des bandes pleine largeur : le contenu se cale sur la même colonne
     centrée de 1360 px que le reste de la page */
  --retrait-large: max(var(--marge) + var(--retrait), (100% - var(--largeur)) / 2);
  --hero-haut: 0px;

  --t-hero: clamp(42px, 5.25vw, 84px);
  --t-h2: clamp(30px, 3.5vw, 56px);
  --t-carte: clamp(24px, 2vw, 32px);
  --respiration: clamp(72px, 7.5vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- gabarits ---------- */
.enveloppe {
  --pad: calc(var(--marge) + var(--retrait));
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}
.bande { margin-inline: 0; }
.bande-brume { background: var(--brume); }
.section { padding-block: var(--respiration); }

.titre-section {
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
  hyphens: none;
}
.titre-centre { text-align: center; }
.chapo {
  margin: 20px auto 0;
  max-width: 560px;
  text-align: center;
  color: var(--texte);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- boutons : pilule + flèche dans un cercle ---------- */
.duo-bouton { display: flex; align-items: center; gap: 4px; }
.duo-centre { justify-content: center; }
.bouton-bleu, .bouton-blanc {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform .2s ease;
}
.bouton-bleu { background: var(--bleu); color: var(--blanc); }
.bouton-blanc { background: var(--blanc); color: var(--encre); }
.fleche {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  transition: transform .2s ease;
}
.fleche svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fleche-bleue { background: var(--bleu); color: var(--blanc); }
.fleche-blanche { background: var(--blanc); color: var(--encre); }
.duo-bouton:hover .fleche { transform: rotate(45deg); }

/* ---------- logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 500; letter-spacing: -0.03em; }
.logo-icone { width: 26px; height: 26px; fill: currentColor; }

/* =========================================================
   HERO — bande pleine page, angles droits, photo pleine
   ========================================================= */
/* Accueil : la bande vidéo occupe tout l'écran et reste en place ; la suite de la page
   glisse par-dessus pendant que la vidéo avance. Aucune zone de défilement vide :
   la section suivante commence juste sous la bande. */
.hero-piste {
  --hero-h: max(clamp(620px, 56.4vw, 902px), 100vh);
  position: sticky; top: 0; z-index: 0;
}
.hero-piste .hero { min-height: var(--hero-h); }
/* tout ce qui suit la bande passe au-dessus d'elle, sur fond opaque */
.hero-piste ~ * { position: relative; z-index: 1; }
.hero-piste ~ :where(:not(.bande-brume)) { background-color: var(--blanc); }
.hero {
  position: relative;
  margin: 0;
  min-height: clamp(620px, 56.4vw, 902px);
  display: flex; flex-direction: column;
  color: var(--blanc);
  background: #0b2a44;
  overflow: hidden;
  isolation: isolate;
}
.hero-photo, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%; z-index: -2;
  filter: saturate(1.3) brightness(1.35) contrast(1.05);
}
.hero-video { object-position: 50% 50%; filter: saturate(1.2) brightness(1.5) contrast(1.05); }
.hero-voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 25, 48, .35) 0%, rgba(3, 25, 48, 0) 22%),
    linear-gradient(0deg, rgba(3, 25, 48, .75) 0%, rgba(3, 25, 48, .15) 45%, rgba(3, 25, 48, 0) 70%),
    linear-gradient(90deg, rgba(3, 25, 48, .55) 0%, rgba(3, 25, 48, 0) 55%);
}
/* virage vers le bleu océan de la référence, sans effacer le sujet */
.hero-voile::before { content: ""; position: absolute; inset: 0; background: #0090F0; mix-blend-mode: color; opacity: .5; }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px var(--retrait-large) 0;
}
.nav .logo { color: var(--blanc); }
.nav-liens { display: flex; gap: 6px; }
.nav-pilule {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 14px;
  transition: background .2s;
}
.nav-pilule:hover { background: rgba(255, 255, 255, .24); }
.nav-devis { height: 44px; padding: 0 22px; font-size: 14px; }
.nav-burger { display: none; }

.hero-corps {
  flex: 1;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding: 0 var(--retrait-large) 50px;
}
.hero-surtitre { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 15px; }
.hero-surtitre a { text-decoration: underline; text-underline-offset: 3px; }
.point-vert { width: 8px; height: 8px; border-radius: 50%; background: var(--blanc); box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.hero-titre {
  font-size: var(--t-hero);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  hyphens: none;
}
.hero-cote { width: 320px; flex: none; padding-bottom: 6px; }
.hero-cote p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .88); margin-bottom: 28px; }

.hero-pied {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 0 var(--retrait-large);
  padding: 22px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px;
}
/* le filet se remplit au fil de la vidéo */
.hero-pied::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px;
  width: calc(var(--avance, 0) * 100%);
  background: var(--blanc);
}
.garanties { display: flex; align-items: center; gap: 14px; }
.garanties-pastilles { display: flex; }
.pastille {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blanc); color: var(--bleu);
  border: 2px solid var(--blanc);
}
.pastille + .pastille { margin-left: -9px; }
.pastille svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================================
   ENGAGEMENT — bande brume, énoncé centré, photo en stade
   ========================================================= */
.engagement { padding-block: clamp(72px, 8vw, 128px) clamp(72px, 8vw, 130px); }
.engagement-titre { max-width: 1180px; margin: 0 auto 40px; text-wrap: pretty; }

.stade {
  display: flex; align-items: center; justify-content: center;
  margin-top: clamp(48px, 5.5vw, 88px);
}
.demi { flex: none; display: block; }
.demi-ciel    { width: clamp(30px, 6.9vw, 110px); aspect-ratio: 1 / 2; background: var(--ciel);         border-radius: 999px 0 0 999px; }
.demi-lavande { width: clamp(40px, 8.75vw, 140px); aspect-ratio: 1 / 2; background: var(--lavande-vive); border-radius: 999px 0 0 999px; }
.demi-menthe  { width: clamp(40px, 8.4vw, 134px); aspect-ratio: 1 / 2; background: var(--menthe);       border-radius: 0 999px 999px 0; }
.demi-orange  { width: clamp(30px, 7.2vw, 115px); aspect-ratio: 1 / 2; background: var(--orange);       border-radius: 0 999px 999px 0; }
.stade-photo {
  position: relative;
  flex: 0 1 862px;
  aspect-ratio: 862 / 360;
  border-radius: 999px;
  overflow: hidden;
}
.stade-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* cartes d'interface posées sur les photos */
.carte-ui {
  position: absolute;
  background: var(--blanc);
  color: var(--encre);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px -18px rgba(10, 30, 60, .45);
  font-size: 12px;
}
.carte-ui-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.carte-ui-tete strong { font-weight: 500; font-size: 13px; }
.points { color: var(--discret); letter-spacing: 1px; font-size: 10px; }
.carte-ui-ligne { display: flex; justify-content: space-between; color: var(--texte); margin-bottom: 8px; }
.jauge { position: relative; height: 4px; border-radius: 4px; background: var(--trait); }
.jauge span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--bleu); }
.jauge i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--bleu); }
.stade-carte { left: 58%; top: 50%; width: 262px; }

/* =========================================================
   SERVICES — carrousel de cartes photo, titres en serif
   ========================================================= */
.services-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 3.8vw, 60px); }
.carrousel-fleches { display: flex; gap: 12px; padding-bottom: 8px; }
.rond { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: transform .2s; }
.rond svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rond-blanc { background: var(--blanc); color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait); }
.rond-bleu { background: var(--bleu); color: var(--blanc); }
.rond:hover { transform: scale(1.06); }

/* la piste démarre sur la colonne de contenu et déborde jusqu'au bord de bande */
.carrousel { margin-inline: 0; overflow: hidden; }
.carrousel-piste {
  /* la piste déborde jusqu'aux bords de l'écran ; la première carte reste calée sur la colonne de contenu */
  --debut: max(var(--marge) + var(--retrait), (100% - var(--largeur)) / 2);
  display: flex; gap: 23px;
  padding-inline: var(--debut);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--debut);
  scrollbar-width: none;
}
.carrousel-piste::-webkit-scrollbar { display: none; }
.carte-service {
  position: relative;
  flex: 0 0 clamp(270px, 34.6vw, 554px);
  aspect-ratio: 554 / 563;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
  color: var(--blanc);
}
.carte-service img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-service::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10, 14, 22, .78) 0%, rgba(10, 14, 22, .25) 32%, rgba(10, 14, 22, 0) 55%);
}
.carte-service:hover img { transform: scale(1.04); }
.carte-service-texte { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; }
.carte-service h3 { font-family: var(--serif); font-size: var(--t-carte); font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 8px; }
.carte-service p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); max-width: 420px; }
.etiquette {
  display: inline-block; margin-bottom: 12px;
  padding: 4px 10px; border-radius: 4px;
  background: rgba(10, 14, 22, .55);
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
}

/* =========================================================
   ÉTAPES — quatre cartes pastel
   ========================================================= */
.etapes { padding-top: 0; }
.etapes-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 23px;
  margin: clamp(40px, 3.6vw, 58px) 0 clamp(40px, 4.4vw, 70px);
}
.etape {
  display: flex; flex-direction: column;
  min-height: 411px;
  padding: 24px 24px 0;
  border-radius: 12px;
  overflow: hidden;
}
.etape-anis { background: var(--anis); }
.etape-lavande { background: var(--lavande); }
.etape-menthe { background: var(--menthe); }
.etape-jaune { background: var(--jaune); }
.etape-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blanc); font-size: 13px; font-weight: 500; margin-bottom: 22px; }
.etape h3 { font-family: var(--serif); font-size: clamp(22px, 1.85vw, 30px); font-weight: 400; line-height: 1.12; letter-spacing: -0.01em; margin-bottom: 12px; }
.etape > p { font-size: 15px; line-height: 1.5; color: rgba(10, 10, 10, .72); margin-bottom: 24px; }

.mini {
  margin-top: auto;
  background: var(--blanc);
  border-radius: 10px 10px 0 0;
  padding: 16px 16px 18px;
  font-size: 11px;
}
.mini-form label { display: block; font-weight: 500; margin-bottom: 10px; }
.mini-form label span { display: block; margin-top: 5px; padding: 6px 9px; border: 1px solid var(--trait); border-radius: 6px; font-weight: 400; color: var(--discret); }
.mini-form label:last-child { margin-bottom: 0; }

.option { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--trait); border-radius: 8px; margin-bottom: 8px; }
.option > span:nth-child(2) { flex: 1; }
.option b { display: block; font-weight: 500; font-size: 12px; }
.option small { color: var(--discret); font-size: 10px; }
.option-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--brume); }
.option-ico svg { width: 15px; height: 15px; fill: none; stroke: var(--encre); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.option-active { border-color: transparent; background: #F1F3FF; }
.radio { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--discret); }
.radio-ok { border: 0; background: #22A06B radial-gradient(circle, #fff 0 2px, transparent 2.5px); }
.jours { display: flex; justify-content: space-between; gap: 4px; margin-top: 4px; }
.jours span { flex: 1; text-align: center; font-size: 9px; color: var(--discret); padding: 5px 0; border-radius: 6px; }
.jours b { display: block; color: var(--encre); font-size: 12px; font-weight: 500; }
.jours .jour-actif { background: var(--brume); }

.mini-suivi strong { display: block; font-weight: 500; font-size: 12px; margin-bottom: 18px; }
.suivi-ligne { position: relative; display: flex; justify-content: space-between; padding-top: 18px; }
.suivi-ligne::before { content: ""; position: absolute; left: 6px; right: 6px; top: 5px; height: 2px; background: linear-gradient(90deg, var(--bleu) 0 42%, var(--trait) 42%); }
.suivi-ligne span { position: relative; font-size: 10px; color: var(--discret); }
.suivi-ligne span::before { content: ""; position: absolute; left: 0; top: -18px; width: 12px; height: 12px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--trait); }
.suivi-ligne span.fait { color: var(--encre); }
.suivi-ligne span.fait::before { border-color: var(--bleu); background: var(--bleu); }
.suivi-ligne span:last-child { text-align: right; }
.suivi-ligne span:last-child::before { left: auto; right: 0; }

.mini-ok { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 22px 26px; }
.badge { width: 56px; height: 56px; }
.badge path:first-child { fill: #FFF4D6; stroke: var(--orange); stroke-width: 1.6; stroke-linejoin: round; }
.badge .coche { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mini-ok span { font-family: var(--serif); font-size: 14px; }

/* =========================================================
   POURQUOI — photo + carte jauge, liste dépliable
   ========================================================= */
.pourquoi { padding-top: 0; }
.pourquoi-grille {
  display: grid; grid-template-columns: 820fr 447fr; gap: clamp(32px, 3.1vw, 48px);
  align-items: start;
  margin-top: clamp(40px, 4.2vw, 68px);
  padding-inline: 22px 23px;
}
.pourquoi-photo { position: relative; aspect-ratio: 820 / 478; border-radius: 12px; overflow: hidden; }
.pourquoi-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pourquoi-carte { left: 24px; bottom: 24px; width: 210px; }
.arc { position: relative; text-align: center; margin: -4px 0 10px; }
.arc svg { width: 120px; height: 64px; fill: none; stroke-width: 12; }
.arc-fond { stroke: var(--brume); }
.arc-plein { stroke: var(--bleu); stroke-dasharray: 157; stroke-dashoffset: 0; }
.arc b { position: absolute; left: 0; right: 0; top: 28px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.arc small { display: block; color: var(--discret); font-size: 10px; margin-top: -2px; }
.legende li { display: flex; align-items: center; gap: 8px; color: var(--texte); padding: 3px 0; }
.legende i { width: 7px; height: 7px; border-radius: 50%; }
.l-bleu { background: var(--bleu); } .l-vert { background: #9BCB4A; } .l-ciel { background: var(--ciel); }

.accordeon-item { border-bottom: 1px solid var(--trait); }
.accordeon-item:first-child { border-top: 1px solid var(--trait); }
.accordeon-titre {
  display: block; width: 100%; text-align: left;
  padding: 24px 0;
  font-size: 17px; color: var(--texte);
  transition: color .2s;
}
.accordeon-titre:hover { color: var(--encre); }
.accordeon-corps { display: none; padding-bottom: 26px; margin-top: -10px; }
.accordeon-corps b { display: block; font-size: clamp(32px, 3vw, 48px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; }
.accordeon-corps p { font-size: 14px; color: var(--texte); max-width: 380px; }
.accordeon-actif { border-top-color: var(--bleu) !important; }
.accordeon-item:has(+ .accordeon-actif) { border-bottom-color: var(--bleu); }
.accordeon-actif .accordeon-titre { color: var(--bleu); }
.accordeon-actif .accordeon-corps { display: block; }

/* =========================================================
   POUR QUI — bande brume, rangée de volets photo
   ========================================================= */
.pourqui { padding-block: clamp(72px, 8.5vw, 136px) clamp(64px, 7.5vw, 120px); }
.bandeau-photos { display: flex; gap: 18px; margin-top: clamp(40px, 3.6vw, 58px); }
.volet { flex: 191 1 0; min-width: 0; cursor: pointer; transition: flex-grow .5s cubic-bezier(.3, .7, .2, 1); }
.volet-actif { flex-grow: 730; cursor: default; }
.volet-cadre { position: relative; height: clamp(320px, 30.6vw, 490px); border-radius: 10px; overflow: hidden; }
.volet-cadre img { width: 100%; height: 100%; object-fit: cover; }
.volet-texte {
  position: absolute; left: 24px; right: 24px; bottom: 22px;
  color: var(--blanc); font-size: 17px; line-height: 1.45;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.volet-cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 14, 22, .7), rgba(10, 14, 22, 0) 45%); opacity: 0; transition: opacity .3s; }
.volet-actif .volet-texte { opacity: 1; transform: none; transition-delay: .25s; z-index: 1; }
.volet-actif .volet-cadre::after { opacity: 1; }
.volet figcaption { padding-top: 14px; font-size: 13px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.volet figcaption b { display: block; font-weight: 500; }
.volet figcaption span { color: var(--discret); font-size: 12px; }

/* =========================================================
   CE QUE NOUS TRANSPORTONS — liste géante + photo
   ========================================================= */
.transporte-grille {
  display: grid; grid-template-columns: 1fr 713px; gap: 48px;
  align-items: center;
  margin-top: clamp(40px, 2.8vw, 46px);
}
.liste-geante { padding-left: 8px; }
.lg-item {
  display: table;
  padding: 2px 10px;
  margin-left: -10px;
  border-radius: 6px;
  font-size: clamp(22px, 2.15vw, 34px);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #D2D4D8;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.lg-item:hover { color: #9EA2A8; }
.lg-item.lg-actif { color: var(--encre); background: #EEF0F3; }
.lg-photos { position: relative; aspect-ratio: 713 / 531; border-radius: 12px; overflow: hidden; }
.lg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.lg-photo.lg-actif { opacity: 1; }

/* =========================================================
   TRANSPORT GÉNÉRAL — rangée de cartes industrie
   (gabarit de la rangée « Latest Insights » de la référence)
   ========================================================= */
.industries { padding-top: clamp(64px, 7vw, 112px); }
.industries-tete {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 40px;
  margin-bottom: clamp(32px, 3.2vw, 52px);
}
.industries-tete p { max-width: 400px; margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--texte); }
.industries-rangee {
  display: flex; justify-content: center; gap: 24px;
  margin-inline: 0;
  overflow: hidden;
}
.carte-industrie {
  position: relative; flex: 0 0 clamp(240px, 20.1vw, 322px);
  aspect-ratio: 322 / 441;
  border-radius: 12px; overflow: hidden;
  color: var(--blanc);
}
.carte-industrie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-industrie::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 22, .72) 0%, rgba(10, 14, 22, .2) 38%, rgba(10, 14, 22, 0) 60%, rgba(10, 14, 22, .25) 100%);
}
.carte-industrie:hover img { transform: scale(1.04); }
.carte-industrie-haut { position: absolute; z-index: 1; left: 20px; right: 20px; top: 20px; }
.carte-industrie-haut .etiquette { margin-bottom: 10px; }
.carte-industrie h3 { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.duo-mini { position: absolute; z-index: 1; right: 16px; bottom: 16px; display: flex; gap: 3px; }
.duo-mini span, .duo-mini i {
  display: inline-grid; place-items: center;
  height: 34px; border-radius: 999px; background: var(--blanc); color: var(--encre);
}
.duo-mini span { padding: 0 16px; font-size: 12px; font-weight: 500; }
.duo-mini i { width: 34px; }
.duo-mini svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.duo-mini:hover svg { transform: rotate(45deg); }

/* =========================================================
   APPEL FINAL — bloc azur arrondi
   ========================================================= */
.appel-section { padding-top: clamp(24px, 3vw, 48px); }
.appel {
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(420px, 38.8vw, 621px);
  border-radius: 20px;
  background: var(--azur);
  color: var(--blanc);
  overflow: hidden;
  isolation: isolate;
}
.appel-texte { position: relative; z-index: 1; padding: clamp(40px, 5vw, 80px); max-width: 840px; }
.appel-texte p { font-size: 15px; color: rgba(255, 255, 255, .85); margin: 22px 0 36px; max-width: 470px; }
.appel-photo {
  position: absolute; right: 0; top: 0;
  width: 58%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  z-index: -1;
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
/* grille de la référence : une colonne à gauche, trois colonnes de 228 px à droite */
.pied { --col: clamp(150px, 14.25vw, 228px); --gout: clamp(20px, 3.1vw, 50px); padding-block: clamp(56px, 4vw, 64px) 56px; font-size: 13px; }
.pied-colonnes { display: grid; grid-template-columns: var(--col) 1fr var(--col) var(--col) var(--col); column-gap: var(--gout); }
.pied-colonnes .pied-liste:nth-child(n+2) { grid-column: span 1; }
.pied-colonnes .pied-liste:nth-child(2) { grid-column: 3; }
.pied-liste li { padding: 12px 0; border-top: 1px solid var(--trait); }
.pied-liste li:last-child { border-bottom: 1px solid var(--trait); }
.pied-liste a:hover { color: var(--bleu); }
.souligne { text-decoration: underline; text-underline-offset: 3px; }

.pied-urgence {
  display: grid; grid-template-columns: var(--col) 1fr auto; align-items: center; column-gap: var(--gout);
  margin: 48px 0 0 calc(var(--col) + 2 * var(--gout) + (100% - 4 * var(--col) - 4 * var(--gout)));
  padding: 14px 0;
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.pied-urgence a { color: var(--texte); }
.pied-urgence-action { color: var(--discret) !important; }

.pied-bas { display: grid; grid-template-columns: 1fr var(--col) var(--col) var(--col); column-gap: var(--gout); align-items: end; margin-top: clamp(56px, 4.5vw, 72px); }
.logo-grand { font-size: clamp(40px, 4.4vw, 70px); gap: 16px; letter-spacing: -0.04em; }
.logo-grand .logo-icone { width: .95em; height: .95em; color: var(--bleu); }
.pied-legal { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.pied-legal small { color: #B5B9BF; font-size: 11px; }

/* =========================================================
   PAGES INTERNES — composants dérivés de l'accueil
   ========================================================= */
.nav-pilule[aria-current="page"] { background: rgba(255, 255, 255, .3); }

/* sur l'accueil ces sections suivent toujours une autre section ; après une bande, elles reprennent leur respiration */
.bande + .etapes, .bande + .pourquoi, .bande + .appel-section { padding-top: var(--respiration); }

/* bande d'en-tête de page : même bande que l'accueil, plus basse, photo fixe */
.hero-page { min-height: clamp(540px, 40vw, 640px); }
/* Comme l'accueil (demande du client, 2026-10-06) : la photo d'en-tête occupe tout l'écran,
   reste en place, et la page glisse par-dessus. Les bandes sans photo (404, mentions légales)
   gardent leur hauteur. Sélecteurs à faible spécificité (:where) pour ne pas écraser
   le bouton WhatsApp flottant de la maquette, qui suit l'en-tête dans le document. */
.hero-page:where(:not(.hero-simple)) {
  min-height: max(clamp(540px, 40vw, 640px), 100vh);
  position: sticky; top: 0; z-index: 0;
}
.hero-page:where(:not(.hero-simple)) ~ * { position: relative; z-index: 1; }
.hero-page:where(:not(.hero-simple)) ~ :where(:not(.bande-brume)) { background-color: var(--blanc); }
.hero-page .hero-titre { font-size: clamp(40px, 4.6vw, 74px); }
.hero-page .hero-photo { filter: saturate(1.1) brightness(1.05); }
.hero-page .hero-photo-sombre { filter: saturate(1.3) brightness(1.35) contrast(1.05); }
.fil { opacity: .9; }
.fil a { text-decoration: none !important; opacity: .75; }
.fil a:hover { opacity: 1; }

/* liste dépliable dont chaque élément choisit la photo */
.pourquoi-photo .pq-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.pourquoi-photo .pq-photo.pq-actif { opacity: 1; }
.pourquoi-grille-haute .pourquoi-photo { aspect-ratio: 820 / 600; }
.puces { margin-top: 14px; display: grid; gap: 8px; }
.puces li { position: relative; padding-left: 18px; font-size: 14px; color: var(--texte); max-width: 400px; }
.puces li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu); }

/* carte pastel dont le bas porte une icône plutôt qu'une mini-interface */
.mini-icone { display: flex; align-items: center; gap: 12px; padding-block: 18px 22px; }
.mini-icone .rond-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brume); color: var(--bleu); }
.mini-icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mini-icone span:last-child { font-family: var(--serif); font-size: 15px; line-height: 1.3; }
.etapes-grille-courte .etape { min-height: 340px; }

/* destinations : liste typographique à filets */
.destinations { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 64px); margin-top: clamp(40px, 3.6vw, 58px); }
.destination {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--trait);
  font-size: clamp(22px, 2.15vw, 34px); letter-spacing: -0.02em; line-height: 1.25;
}
.destination:nth-last-child(-n+2) { border-bottom: 1px solid var(--trait); }
.destination span { font-size: 15px; letter-spacing: 0; color: var(--discret); white-space: nowrap; }
.note { margin-top: 18px; font-size: 13px; color: var(--discret); }

/* devis & contact */
.contact { padding-block: clamp(64px, 7vw, 112px); }
.contact-grille { display: grid; grid-template-columns: 820fr 447fr; gap: clamp(32px, 3.1vw, 48px); align-items: start; }
.formulaire { background: var(--blanc); border-radius: 12px; padding: clamp(24px, 2.6vw, 40px); }
.formulaire h2 { font-size: clamp(26px, 2.2vw, 36px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
.formulaire > p { color: var(--texte); font-size: 15px; margin-bottom: 28px; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.champ { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
.champ-large { grid-column: 1 / -1; }
.champ input, .champ select, .champ textarea {
  width: 100%; font: inherit; font-size: 15px; font-weight: 400; color: var(--encre);
  padding: 12px 14px; border: 1px solid var(--trait); border-radius: 8px; background: var(--blanc);
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(2, 112, 240, .15); }
.champ .facultatif { color: var(--discret); font-weight: 400; }
.consentement { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--texte); }
.consentement input { margin-top: 2px; accent-color: var(--bleu); }
.formulaire-envoi { grid-column: 1 / -1; margin-top: 6px; }
.formulaire-envoi button.bouton-bleu { cursor: pointer; border: 0; font: inherit; font-size: 15px; font-weight: 500; }
.formulaire-merci { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 8px; background: #F1F3FF; font-size: 14px; }
.formulaire.envoye .formulaire-merci { display: block; }

.carte-urgence { position: relative; overflow: hidden; border-radius: 20px; background: var(--azur); color: var(--blanc); padding: 32px; margin-bottom: 28px; }
.carte-urgence h2 { font-size: clamp(26px, 2.2vw, 36px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.carte-urgence p { font-size: 15px; color: rgba(255, 255, 255, .85); margin: 12px 0 24px; }
.carte-urgence .duo-bouton + .duo-bouton { margin-top: 10px; }
.coord-liste li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--trait); }
.coord-liste li:last-child { border-bottom: 1px solid var(--trait); }
.coord-liste small { font-size: 12px; color: var(--discret); }
.coord-liste a, .coord-liste span { font-size: 19px; letter-spacing: -0.01em; }
.coord-liste a:hover { color: var(--bleu); }

/* questions fréquentes : liste dépliable pleine largeur */
.faq { max-width: 900px; margin: clamp(40px, 3.6vw, 58px) auto 0; }
.faq .accordeon-titre { font-size: 19px; color: var(--encre); padding: 26px 40px 26px 0; position: relative; }
.faq .accordeon-titre::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; color: var(--bleu); transition: transform .2s; }
.faq .accordeon-actif .accordeon-titre { color: var(--bleu); }
.faq .accordeon-actif .accordeon-titre::after { transform: translateY(-50%) rotate(45deg); }
.faq .accordeon-corps p { max-width: 720px; font-size: 15px; }

/* bouton WhatsApp flottant, dans le bleu de la marque */
.whatsapp-flottant {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bleu); color: var(--blanc);
  box-shadow: 0 12px 28px -10px rgba(2, 112, 240, .7);
  transition: transform .2s;
}
.whatsapp-flottant:hover { transform: scale(1.06); }
.whatsapp-flottant svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.whatsapp-flottant svg path:last-child { fill: currentColor; stroke: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .nav-liens { display: none; }
  .nav-burger { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; border-radius: 50%; background: rgba(255, 255, 255, .12); }
  .nav-burger span { display: block; width: 18px; height: 1.5px; background: currentColor; }
  .nav.ouvert .nav-liens {
    display: flex; flex-direction: column; position: absolute; top: 80px; left: var(--retrait); right: var(--retrait); z-index: 5;
    padding: 8px; border-radius: 16px; background: rgba(3, 25, 48, .92);
  }
  .transporte-grille { grid-template-columns: 1fr 1fr; }
  .pourquoi-grille { padding-inline: 0; }
}

@media (max-width: 900px) {
  /* en mobile, pas d'épinglage : la vidéo tourne simplement en boucle */
  /* en mobile, pas de bande épinglée : la vidéo tourne en boucle et la page défile normalement */
  .hero-piste { position: relative; top: auto; }
  .hero-page:where(:not(.hero-simple)) { position: relative; min-height: clamp(620px, 56.4vw, 902px); }
  .hero-piste .hero { min-height: clamp(620px, 56.4vw, 902px); }
  .industries-tete { flex-direction: column; gap: 0; }
  .industries-rangee {
    justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: 0; padding-inline: calc(var(--marge) + var(--retrait)); gap: 14px;
  }
  .industries-rangee::-webkit-scrollbar { display: none; }
  .carte-industrie { flex-basis: 72vw; max-width: 322px; scroll-snap-align: center; }
  /* les deux cartes de bord ne servent qu'au débordement du grand écran */
  .carte-industrie:first-child, .carte-industrie:last-child { display: none; }
  .hero-corps { flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero-cote { width: auto; max-width: 420px; }
  .etapes-grille { grid-template-columns: 1fr 1fr; }
  .pourquoi-grille { grid-template-columns: 1fr; }
  .transporte-grille { grid-template-columns: 1fr; }
  .lg-photos { order: -1; }
  .bandeau-photos { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
  .volet, .volet-actif { flex: 0 0 72%; scroll-snap-align: center; }
  .volet .volet-texte { opacity: 1; transform: none; }
  .volet .volet-cadre::after { opacity: 1; }
  .pied-colonnes, .pied-bas { grid-template-columns: 1fr 1fr; }
  .pied-urgence { margin-left: 0; }
  .contact-grille { grid-template-columns: 1fr; }
  .destinations { grid-template-columns: 1fr; }
  .destination:nth-last-child(2) { border-bottom: 0; }
  .appel-photo { width: 100%; opacity: .35; -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 600px) {
  .nav-devis { display: none; }
  .hero, .hero-piste .hero { min-height: 640px; }
  .hero-pied { flex-direction: column; align-items: flex-start; }
  .defiler { display: none; }
  .garanties { align-items: flex-start; }
  .chapo br, .titre-section br { display: none; }
  .etapes-grille { grid-template-columns: 1fr; }
  .etape { min-height: 0; }
  .hero-corps { padding-top: 48px; }
  .stade-photo { flex-basis: 74%; aspect-ratio: 1 / 1.1; }
  .demi { width: 6.5%; }
  .stade-carte { left: 10%; right: 10%; top: auto; bottom: 9%; width: auto; padding: 10px 12px; }
  .stade-carte .carte-ui-tete strong { font-size: 11px; }
  .pourquoi-photo { aspect-ratio: 1 / 1; }
  .services-tete { align-items: flex-start; flex-direction: column; }
  .carte-service { flex-basis: 82vw; }
  .pied-colonnes, .pied-bas { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .hero-page:where(:not(.hero-simple)) { min-height: 640px; }
  .pied-urgence { grid-template-columns: 1fr auto; }
  .pied-urgence span { grid-column: 1 / -1; }
  .whatsapp-flottant { right: 14px; bottom: 14px; }
}

/* =========================================================
   ADAPTATIONS GUTENBERG
   La feuille de la maquette (au-dessus) reste la source du design.
   Ici : uniquement ce que le passage en blocs natifs change dans le DOM
   (figure.wp-block-image, div.wp-block-group, paragraphes à la place des
   boutons et des spans), les icônes devenues CSS, et l'en-tête en template part.
   ========================================================= */

/* ---------- socle WordPress ---------- */
body { overflow-x: clip; }
img { height: auto; } /* l'attribut height des blocs image l'emporterait sinon */
/* filet de sécurité à spécificité nulle — le vrai réglage est blockGap: 0px dans theme.json */
:where(.wp-block-group) > :where(*), :where(.wp-block-buttons) { margin-block: 0; }
:where(.wp-site-blocks) > * { margin-block: 0; }
figure.wp-block-image, figure.wp-block-video { margin: 0; }
/* à spécificité nulle : une règle .wp-block-list écraserait les marges des listes de la maquette (.puces) */
:where(.wp-block-list) { list-style: none; margin: 0; padding: 0; }
/* flow-root : la marge haute de la bande d'en-tête ne doit pas traverser .wp-site-blocks,
   sinon l'en-tête (positionné par rapport à lui) descend d'autant */
.wp-site-blocks { position: relative; display: flow-root; }

/* couche photo / vidéo qui remplit son conteneur */
figure.remplir { position: absolute; inset: 0; margin: 0; }
figure.remplir img, figure.remplir video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   EN-TÊTE (template part) — posé sur la bande d'en-tête de page
   ========================================================= */
.wp-site-blocks > header.wp-block-template-part {
  position: absolute; z-index: 20;
  top: var(--hero-haut); left: 0; right: 0; /* bande d'en-tête pleine largeur */
  pointer-events: none;
}
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px var(--retrait-large) 0;
  color: var(--blanc);
  pointer-events: auto;
}
.entete .logo a, .logo-grand a { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.logo a::before {
  content: ""; flex: none; width: 26px; height: 26px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 6h11l7 10-7 10H3l7-10z'/%3E%3Cpath opacity='.55' d='M15 6h7l7 10-7 10h-7l7-10z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 6h11l7 10-7 10H3l7-10z'/%3E%3Cpath opacity='.55' d='M15 6h7l7 10-7 10h-7l7-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.logo-grand a::before { width: .95em; height: .95em; background: var(--bleu); }

.nav-liens .wp-block-navigation__container { gap: 6px; }
.nav-liens .wp-block-navigation-item__content {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 20px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--blanc);
  font-size: 14px;
  transition: background .2s;
}
.nav-liens .wp-block-navigation-item__content:hover { background: rgba(255, 255, 255, .24); }
.nav-liens .current-menu-item > .wp-block-navigation-item__content,
.nav-liens .wp-block-navigation-item__content.est-courant { background: rgba(255, 255, 255, .3); }
.nav-liens .wp-block-navigation__responsive-container-open { color: var(--blanc); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: none; place-items: center; }
/* le panneau mobile s'ouvre blanc sur blanc sans ceci : le CSS du bloc est imprimé après cette feuille */
.wp-block-navigation.nav-liens .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(3, 25, 48, .97) !important;
  color: var(--blanc) !important;
  padding: 28px 24px;
}
.wp-block-navigation.nav-liens .is-menu-open .wp-block-navigation__container { gap: 10px; align-items: flex-start; }
.wp-block-navigation.nav-liens .is-menu-open .wp-block-navigation-item__content { font-size: 18px; height: 52px; padding: 0 22px !important; }

.nav-devis .wp-block-button__link { height: 44px !important; padding: 0 22px !important; margin-right: 0 !important; font-size: 14px !important; }
.nav-devis .wp-block-button__link::after { content: none !important; }
.nav-devis { margin-left: 0; }

/* =========================================================
   BOUTONS — pilule + flèche dans un cercle (pseudo-élément du lien)
   ========================================================= */
.duo-bouton { display: flex; align-items: center; gap: 0; }
.duo-centre { justify-content: center; }
.wp-block-button.b-bleu, .wp-block-button.b-blanc, .wp-block-button.b-mini { display: inline-block; background: none; border: 0; padding: 0; border-radius: 0; }
/* le CSS du bloc pose width:100% et height:100% sur le lien (largeur personnalisée) : on revient au contenu */
.wp-block-button.b-bleu .wp-block-button__link,
.wp-block-button.b-blanc .wp-block-button__link,
.wp-block-button.b-mini .wp-block-button__link { width: auto; }
.wp-block-button.b-bleu .wp-block-button__link,
.wp-block-button.b-blanc .wp-block-button__link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; margin-right: 52px;
  border-radius: 999px;
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1;
  white-space: nowrap;
}
.wp-block-button.b-bleu .wp-block-button__link { background: var(--bleu); color: var(--blanc); }
.wp-block-button.b-blanc .wp-block-button__link { background: var(--blanc); color: var(--encre); }
.wp-block-button.b-bleu .wp-block-button__link::after,
.wp-block-button.b-blanc .wp-block-button__link::after {
  content: ""; position: absolute; top: 0; left: calc(100% + 4px);
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6 5h5v5'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform .2s ease;
}
.wp-block-button.b-blanc .wp-block-button__link::after {
  background-color: var(--blanc);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6 5h5v5'/%3E%3C/svg%3E");
}
.wp-block-button .wp-block-button__link:hover::after { transform: rotate(45deg); }

/* =========================================================
   EN-TÊTE DE PAGE (bande) — la navigation n'est plus dans la bande
   ========================================================= */
.hero { padding-top: 68px; } /* place de la navigation : 24 px de marge + 44 px de pilules */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 25, 48, .35) 0%, rgba(3, 25, 48, 0) 22%),
    linear-gradient(0deg, rgba(3, 25, 48, .75) 0%, rgba(3, 25, 48, .15) 45%, rgba(3, 25, 48, 0) 70%),
    linear-gradient(90deg, rgba(3, 25, 48, .55) 0%, rgba(3, 25, 48, 0) 55%);
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: #0090F0; mix-blend-mode: color; opacity: .5; }
.hero > .hero-photo, .hero > .hero-video { z-index: -2; }
.hero-photo img, .hero-video video { object-position: 60% 50%; }
.hero-video video { object-position: 50% 50%; }
.hero-surtitre::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blanc); box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.hero-surtitre.fil::before { content: none; }
.hero-surtitre a { color: inherit; }
.defiler a { color: inherit; }
.garanties::before {
  content: ""; flex: none; width: 84px; height: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 34'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='17' cy='17' r='17'/%3E%3Ccircle cx='42' cy='17' r='17'/%3E%3Ccircle cx='67' cy='17' r='17'/%3E%3C/g%3E%3Cg fill='none' stroke='%230270F0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(8 8) scale(.75)'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/g%3E%3Cg transform='translate(33 8) scale(.75)'%3E%3Cpath d='M10 14.5V5a2 2 0 1 1 4 0v9.5a4 4 0 1 1-4 0z'/%3E%3Cpath d='M12 10v6'/%3E%3C/g%3E%3Cg transform='translate(58 8) scale(.75)'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.6 3.5 5.4 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.4-3.5-8.5s1-5.9 3.5-8.5z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   STADE — les quatre demi-disques deviennent deux pseudo-éléments
   ========================================================= */
.stade { --r1: clamp(30px, 6.9vw, 110px); --r2: clamp(40px, 8.75vw, 140px); --r3: clamp(40px, 8.4vw, 134px); --r4: clamp(30px, 7.2vw, 115px); }
.stade::before, .stade::after { content: ""; flex: none; }
.stade::before {
  width: calc(var(--r1) + var(--r2)); height: calc(2 * var(--r2));
  background:
    radial-gradient(circle at 100% 50%, var(--ciel) var(--r1), transparent calc(var(--r1) + .5px)) 0 50% / var(--r1) calc(2 * var(--r1)) no-repeat,
    radial-gradient(circle at 100% 50%, var(--lavande-vive) var(--r2), transparent calc(var(--r2) + .5px)) 100% 50% / var(--r2) calc(2 * var(--r2)) no-repeat;
}
.stade::after {
  width: calc(var(--r3) + var(--r4)); height: calc(2 * var(--r3));
  background:
    radial-gradient(circle at 0 50%, var(--menthe) var(--r3), transparent calc(var(--r3) + .5px)) 0 50% / var(--r3) calc(2 * var(--r3)) no-repeat,
    radial-gradient(circle at 0 50%, var(--orange) var(--r4), transparent calc(var(--r4) + .5px)) 100% 50% / var(--r4) calc(2 * var(--r4)) no-repeat;
}

/* cartes d'interface : en-tête, points, jauge dessinée en CSS */
.carte-ui-tete::after { content: "•••"; color: var(--discret); letter-spacing: 1px; font-size: 10px; }
.a-jauge { --j: 50%; }
/* la barre fait 4 px dans le flux comme dans la maquette ; la poignée de 14 px déborde de 5 px de part et d'autre */
.a-jauge::after {
  content: ""; display: block; height: 14px; margin: -5px 0;
  background:
    radial-gradient(circle 7px at var(--j) 50%, var(--blanc) 0 4.5px, var(--bleu) 5px 7px, transparent 7.5px),
    linear-gradient(var(--bleu), var(--bleu)) 0 50% / var(--j) 4px no-repeat,
    linear-gradient(var(--trait), var(--trait)) 0 50% / 100% 4px no-repeat;
}
.jauge-35 { --j: 35%; } .jauge-50 { --j: 50%; } .jauge-64 { --j: 64%; } .jauge-72 { --j: 72%; } .jauge-100 { --j: 100%; }

/* =========================================================
   CARROUSEL — flèches en paragraphes, carte entière cliquable
   ========================================================= */
.rond { cursor: pointer; font-size: 0; color: transparent; }
.rond::before { content: ""; width: 14px; height: 14px; background: currentColor; }
.rond-blanc::before, .rond-bleu::before {
  -webkit-mask: var(--fl) center / contain no-repeat; mask: var(--fl) center / contain no-repeat;
}
.rond-blanc::before { background: var(--encre); }
.rond-bleu::before { background: var(--blanc); }
.carrousel-prec { --fl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 8H3M7 4 3 8l4 4'/%3E%3C/svg%3E"); }
.carrousel-suiv { --fl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E"); }

.carte-service, .carte-industrie { isolation: isolate; }
.carte-service { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px 22px; }
.carte-service > .remplir, .carte-industrie > .remplir { z-index: -2; }
.carte-service::after, .carte-industrie::after { z-index: -1; }
.carte-service-texte { position: static; }
.carte-service h3 a { color: inherit; }
.carte-service h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* l'étiquette est devenue un paragraphe : la règle « .carte-service p » de la maquette ne doit pas l'atteindre */
.carte-service .etiquette, .carte-industrie .etiquette { font-size: 11px; color: var(--blanc); max-width: none; line-height: 1.5; }

/* =========================================================
   ÉTAPES — mini-interfaces recomposées en paragraphes
   ========================================================= */
.etape > .etape-num { font-size: 13px; line-height: 1; margin-bottom: 22px; color: var(--encre); }
.mini-libelle { font-weight: 500; margin-bottom: 5px; }
.mini-saisie { padding: 6px 9px; border: 1px solid var(--trait); border-radius: 6px; color: var(--discret); margin-bottom: 10px; }
.mini-form .mini-saisie:last-child { margin-bottom: 0; }

.option::after { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--discret); }
.option-active::after { border: 0; background: #22A06B radial-gradient(circle, #fff 0 2px, transparent 2.5px); }
/* le paragraphe garde un flux de texte normal (gras, retour à la ligne, détail) : l'icône est posée à gauche */
.option-txt { flex: 1; position: relative; min-height: 28px; padding-left: 38px; font-size: 11px; color: var(--discret); line-height: 1.5; }
.option-txt strong { color: var(--encre); font-weight: 500; font-size: 12px; }
.option-txt em { font-style: normal; font-size: 10px; }
.option-txt::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 7px; background: var(--brume) var(--ico) center / 15px no-repeat; }
.jours p { flex: 1; text-align: center; font-size: 9px; color: var(--discret); padding: 5px 0; border-radius: 6px; line-height: 1.5; }
.jours p strong { color: var(--encre); font-size: 12px; font-weight: 500; }
.jours .jour-actif { background: var(--brume); }

.mini-titre { font-size: 12px; margin-bottom: 0; } /* le strong porte déjà les 18 px (règle .mini-suivi strong) */
.mini-titre strong { font-weight: 500; }
.suivi-ligne p { position: relative; font-size: 10px; color: var(--discret); }
.suivi-ligne p::before { content: ""; position: absolute; left: 0; top: -18px; width: 12px; height: 12px; border-radius: 50%; background: var(--blanc); border: 2px solid var(--trait); box-sizing: border-box; }
.suivi-ligne p.fait { color: var(--encre); }
.suivi-ligne p.fait::before { border-color: var(--bleu); background: var(--bleu); }
.suivi-ligne p:last-child { text-align: right; }
.suivi-ligne p:last-child::before { left: auto; right: 0; }

.mini-ok p { font-family: var(--serif); font-size: 14px; }
.mini-ok p::before {
  content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4l5 3.6 6.1-.3 2.2 5.7 5.2 3.3-1.7 5.9 1.7 5.9-5.2 3.3-2.2 5.7-6.1-.3L24 44l-5-3.6-6.1.3-2.2-5.7-5.2-3.3 1.7-5.9-1.7-5.9 5.2-3.3 2.2-5.7 6.1.3z' fill='%23FFF4D6' stroke='%23FF8422' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='m17 24 5 5 9-10' fill='none' stroke='%23FF8422' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mini-icone p { display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 15px; line-height: 1.3; }
.mini-icone p::before { content: ""; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brume) var(--ico) center / 22px no-repeat; }

/* icônes (traits bleus ou encre), utilisées par les pastilles d'options et les cartes d'engagement */
.ico-eclair  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 13h6l-1 8 8-10h-6z'/%3E%3C/svg%3E"); }
.ico-agenda  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); }
.ico-tel     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.ico-message { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z'/%3E%3C/svg%3E"); }
.mini-icone .ico-horloge  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230270F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.mini-icone .ico-thermo   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230270F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14.5V5a2 2 0 1 1 4 0v9.5a4 4 0 1 1-4 0z'/%3E%3Cpath d='M12 10v6'/%3E%3C/svg%3E"); }
.mini-icone .ico-bouclier { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230270F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5c0 4.5 3 8.2 7 10 4-1.8 7-5.5 7-10V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.mini-icone .ico-eclair   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230270F0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 13h6l-1 8 8-10h-6z'/%3E%3C/svg%3E"); }

/* =========================================================
   POURQUOI — jauge en arc et légende en CSS
   ========================================================= */
.pourquoi-photo img { width: 100%; height: 100%; object-fit: cover; }
.pourquoi-photo .pq-photo { height: 100%; }
/* la maquette réservait 64 px de SVG en ligne (+ l'espace sous la ligne de base) avant la légende */
.arc { position: relative; text-align: center; margin: -4px 0 10px; padding-top: 67px; font-size: 10px; color: var(--discret); line-height: 15px; }
.arc::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 120px; height: 60px; margin-left: -60px;
  background: radial-gradient(circle at 50% 100%, transparent 0 43.5px, var(--bleu) 44px 56px, transparent 56.5px);
}
.arc br { display: none; }
.arc strong { position: absolute; left: 0; right: 0; top: 28px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--encre); }
.legende li { display: flex; align-items: center; gap: 8px; color: var(--texte); padding: 3px 0; }
.legende li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); }
.legende li:nth-child(2)::before { background: #9BCB4A; }
.legende li:nth-child(3)::before { background: var(--ciel); }

.accordeon-titre { cursor: pointer; }
.accordeon-corps .accordeon-chiffre { font-size: clamp(32px, 3vw, 48px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; color: var(--encre); max-width: none; }

/* =========================================================
   POUR QUI — légendes des volets
   ========================================================= */
.volet-nom { padding-top: 14px; font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.volet-role { font-size: 12px; color: var(--discret); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   LISTE GÉANTE et RANGÉE INDUSTRIE
   ========================================================= */
.lg-photos img { width: 100%; height: 100%; object-fit: cover; }
.duo-mini { position: absolute; z-index: 1; right: 16px; bottom: 16px; }
.wp-block-button.b-mini .wp-block-button__link {
  position: relative; display: inline-flex; align-items: center;
  height: 34px; padding: 0 16px; margin-right: 37px;
  border-radius: 999px; background: var(--blanc); color: var(--encre);
  font-size: 12px; font-weight: 500;
}
.wp-block-button.b-mini .wp-block-button__link::after {
  content: ""; position: absolute; top: 0; left: calc(100% + 3px); width: 34px; height: 34px; border-radius: 50%;
  background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230A0A0A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6 5h5v5'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform .2s;
}

/* =========================================================
   APPEL FINAL
   ========================================================= */
.appel > .appel-photo { position: absolute; right: 0; top: 0; left: auto; width: 58%; height: 100%; }
.appel-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* =========================================================
   À PROPOS — destinations
   ========================================================= */
.destination em { font-style: normal; font-size: 15px; letter-spacing: 0; color: var(--discret); white-space: nowrap; }

/* =========================================================
   CONTACT — Contact Form 7 et coordonnées
   ========================================================= */
.formulaire .wpcf7 { margin-top: 0; }
.formulaire .wpcf7-form-control-wrap { display: block; }
/* sinon le champ reste en ligne dans son enrobage et garde l'espace sous la ligne de base (+6 px sur la zone de texte) */
.formulaire .wpcf7-form-control-wrap > input, .formulaire .wpcf7-form-control-wrap > select, .formulaire .wpcf7-form-control-wrap > textarea { display: block; }
.champ { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
.formulaire .wpcf7-not-valid-tip { font-size: 12px; font-weight: 400; color: #C2410C; margin-top: 6px; }
.formulaire .wpcf7-not-valid { border-color: #C2410C !important; }
.formulaire .wpcf7-response-output { margin: 18px 0 0 !important; padding: 14px 16px !important; border-radius: 8px; border: 0 !important; background: #F1F3FF; font-size: 14px; }
.formulaire .wpcf7-spinner { display: none; }
/* la zone de réponse reste masquée tant qu'aucun envoi n'a eu lieu (sans dépendre de la feuille de CF7) */
.formulaire form.init .wpcf7-response-output, .formulaire .wpcf7-response-output:empty { display: none; }
.consentement .wpcf7-list-item { margin: 0; }
.consentement label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; }
.consentement input { margin-top: 2px; accent-color: var(--bleu); }
.formulaire-envoi { position: relative; display: inline-flex; gap: 4px; }
.formulaire-envoi .wpcf7-submit {
  height: 48px; padding: 0 28px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bleu); color: var(--blanc); font: inherit; font-size: 15px; font-weight: 500;
}
.formulaire-envoi::after {
  content: ""; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6 5h5v5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.carte-urgence .duo-bouton + .duo-bouton { margin-top: 10px; }
.coord { padding: 18px 0; border-top: 1px solid var(--trait); }
.coord:last-child { border-bottom: 1px solid var(--trait); }
.coord-lib { font-size: 12px; color: var(--discret); margin-bottom: 4px; }
.coord-val { font-size: 19px; letter-spacing: -0.01em; }
.coord-val a:hover { color: var(--bleu); }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.pied-urgence p a { color: var(--texte); }
.pied-urgence .pied-urgence-action a { color: var(--discret); }
.pied-legal-lib { color: #B5B9BF; font-size: 11px; }
.whatsapp-flottant a { position: absolute; inset: 0; font-size: 0; color: transparent; border-radius: 50%; }
.whatsapp-flottant::before {
  content: ""; width: 26px; height: 26px; background: var(--blanc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8.8 8.2c.2-.4.5-.4.8-.4h.5c.2 0 .4.1.5.4l.7 1.6c.1.2 0 .5-.1.7l-.5.6c-.1.1-.1.3 0 .5.4.8 1.4 1.8 2.3 2.2.2.1.4.1.5 0l.6-.6c.2-.2.4-.2.7-.1l1.5.7c.3.1.4.3.4.6v.5c0 .3-.1.6-.4.8-.5.4-1.3.6-2 .4-2.2-.6-4.2-2.6-4.8-4.8-.2-.6-.1-1.3.3-1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M8.8 8.2c.2-.4.5-.4.8-.4h.5c.2 0 .4.1.5.4l.7 1.6c.1.2 0 .5-.1.7l-.5.6c-.1.1-.1.3 0 .5.4.8 1.4 1.8 2.3 2.2.2.1.4.1.5 0l.6-.6c.2-.2.4-.2.7-.1l1.5.7c.3.1.4.3.4.6v.5c0 .3-.1.6-.4.8-.5.4-1.3.6-2 .4-2.2-.6-4.2-2.6-4.8-4.8-.2-.6-.1-1.3.3-1.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   BANDE SANS PHOTO (404, actualités)
   ========================================================= */
.hero-simple { min-height: clamp(420px, 32vw, 520px); }

/* =========================================================
   TEXTE LÉGAL — une colonne de lecture
   ========================================================= */
.texte-legal-colonne { max-width: 820px; }
.texte-legal .legal-titre { font-size: clamp(24px, 2vw, 30px); line-height: 1.25; margin: 48px 0 14px; }
.texte-legal .legal-titre:first-child { margin-top: 0; }
.texte-legal p { font-size: 16px; line-height: 1.7; color: var(--texte); margin-bottom: 12px; }
.texte-legal p a { color: var(--bleu); text-decoration: underline; text-underline-offset: 3px; }
.texte-legal p strong { color: var(--encre); font-weight: 500; }

/* =========================================================
   RESPONSIVE — compléments
   ========================================================= */
/* six liens depuis l'ajout de « Déménagement » : le menu reste sur une ligne jusqu'au burger (1180 px) */
@media (max-width: 1440px) {
  .nav-liens .wp-block-navigation__container { gap: 4px; }
  .nav-liens .wp-block-navigation-item__content { padding: 0 14px !important; }
}
@media (max-width: 1360px) {
  .entete { gap: 16px; }
  .nav-liens .wp-block-navigation-item__content { padding: 0 11px !important; font-size: 13px; }
  .nav-devis .wp-block-button__link { padding: 0 18px !important; font-size: 13px !important; }
}
/* le bloc navigation ne passe en burger que sous 600 px ; la maquette le fait dès 1180 px */
@media (max-width: 1180px) {
  /* la maquette masquait .nav-liens (sa liste de liens) : ici c'est le bloc entier, burger compris,
     et le burger passe tout à droite, après « Demander un devis », comme dans la maquette */
  .wp-block-navigation.nav-liens { display: flex; order: 3; margin-left: 12px; }
  .entete .nav-devis { order: 2; margin-left: auto; }
  .wp-block-navigation.nav-liens .wp-block-navigation__responsive-container-open { display: grid !important; }
  .wp-block-navigation.nav-liens .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
}
@media (max-width: 900px) {
  .hero { padding-top: 76px; }
  /* la 2e liste du pied est placée en colonne 3 sur grand écran : sur 2 colonnes (ou 1), cette règle
     créait une colonne implicite qui débordait de l'écran dès qu'un libellé s'allongeait */
  .pied-colonnes .pied-liste:nth-child(2) { grid-column: auto; }
}
@media (max-width: 600px) {
  .stade { --r1: 6vw; --r2: 6vw; --r3: 6vw; --r4: 6vw; }
  .stade-photo { flex-basis: 74%; aspect-ratio: 1 / 1.1; }
  .nav-devis { display: none; }
  .wp-block-button.b-bleu .wp-block-button__link, .wp-block-button.b-blanc .wp-block-button__link { padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }