/* BeDeo — feuille de style unique. Charte bedeo-charte-graphique v1.1.
   Titres en Archivo 800 (licence webfont Hazmat non confirmée), texte en Inter.
   Rythme de page : sections sombres (noir pétrole, pétrole 900, pétrole) et claires (blanc, gris brume) en alternance. */

/* Polices hébergées sur le site (SIL Open Font License) — aucun appel à Google */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/fonts/archivo-800-latin.woff2) format('woff2');
}

:root {
  --noir: #001D26;
  --petrole: #008090;
  --petrole-900: #00323A;
  --petrole-800: #004C57;
  --petrole-700: #00646F;
  --petrole-500: #1E9AA8;
  --petrole-400: #57B8C4;
  --petrole-100: #E8F4F6;
  --blanc: #FFFFFF;
  --brume: #F4F7F8;
  --bord: #E2E9EB;
  --froid: #B0BEC2;
  --texte-2: #4A5F66;
  --alerte: #C0492B;
  --filet-sombre: rgba(255, 255, 255, .15);

  --f-titre: 'Archivo', 'Arial Black', sans-serif;
  --f-texte: 'Inter', Arial, sans-serif;

  --max: 1200px;
  --marge: 48px;
  --header: 80px;
  --sortie: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
  font: 400 16px/1.65 var(--f-texte);
  -webkit-font-smoothing: antialiased;
}

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

::selection { background: var(--petrole); color: var(--blanc); }
input, textarea { caret-color: var(--petrole); }

a { color: var(--petrole-700); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; }
.sombre :focus-visible, .cta-bandeau :focus-visible { outline-color: var(--blanc); }

h1, h2, h3 { font-family: var(--f-titre); font-weight: 800; margin: 0; text-wrap: balance; }
h1 { font-size: 56px; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: 32px; line-height: 1.15; }
h3 { font-size: 24px; line-height: 1.25; }
p { margin: 0; }

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

.lien-evitement {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  background: var(--noir); color: var(--blanc); padding: 12px 16px;
}
.lien-evitement:focus { top: 16px; }

.conteneur { width: 100%; max-width: calc(var(--max) + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge); }

/* Icônes au trait (charte §8) : monochromes, terminaisons droites */
.icone {
  width: 32px; height: 32px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: butt; stroke-linejoin: miter;
  color: var(--petrole);
}
.sombre .icone { color: var(--petrole-400); }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-block;
  background: var(--petrole);
  color: var(--blanc);
  font: 600 16px/1 var(--f-texte);
  padding: 16px 32px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: background-color .15s ease, color .15s ease;
}
.bouton:hover { background: var(--noir); color: var(--blanc); text-decoration: none; }
.bouton--clair { background: var(--blanc); color: var(--noir); }
.bouton--clair:hover { background: var(--petrole-400); color: var(--noir); }
.bouton--petit { font-size: 14px; padding: 15px 24px; } /* 44 px de haut : cible tactile minimale */

/* ---------- A0.1 · En-tête et menu ---------- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: var(--blanc);
  border-bottom: 1px solid var(--bord);
}
.entete .conteneur { display: flex; align-items: center; gap: 32px; height: var(--header); }
.entete__logo { margin-right: auto; }
.entete__logo img { width: 160px; }
.entete__nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.entete__nav a {
  position: relative;
  display: block;
  padding: 8px 0;
  color: var(--noir);
  font: 600 14px/1 var(--f-texte);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.entete__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--petrole);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.entete__nav a:hover, .entete__nav a[aria-current="true"] { color: var(--petrole-700); text-decoration: none; }
.entete__nav a:hover::after, .entete__nav a[aria-current="true"]::after { transform: scaleX(1); }

.entete__menu {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  background: var(--blanc); color: var(--noir);
  border: 1px solid var(--noir); border-radius: 0;
  cursor: pointer;
}
.entete__menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; }
.entete__menu .icone-fermer { display: none; }
.entete__menu[aria-expanded="true"] { background: var(--noir); color: var(--blanc); }
.entete__menu[aria-expanded="true"] .icone-ouvrir { display: none; }
.entete__menu[aria-expanded="true"] .icone-fermer { display: block; }

/* ---------- Sections ---------- */

.section { padding: 96px 0; }
.section--brume { background: var(--brume); }
.section--noir { background: var(--noir); }
.section--profond { background: var(--petrole-900); }
.section--petrole { background: var(--petrole); }

.sombre { color: var(--blanc); }
.sombre h1, .sombre h2, .sombre h3 { color: var(--blanc); }

.surtitre {
  display: block;
  font: 800 13px/1.5 var(--f-titre);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--petrole-700);
  margin-bottom: 16px;
}
.sombre .surtitre { color: var(--petrole-400); }

.titre-section { max-width: 800px; }
.titre-section::after {
  content: ""; display: block;
  width: 48px; height: 3px; background: var(--petrole);
  margin-top: 24px;
}
.sombre .titre-section::after { background: var(--petrole-400); }
.chapo { font-size: 18px; line-height: 1.6; color: var(--texte-2); max-width: 680px; margin-top: 24px; }
.sombre .chapo { color: var(--froid); }

.conclusion {
  margin-top: 48px;
  font: 800 22px/1.35 var(--f-titre);
  max-width: 760px;
  text-wrap: balance;
}

/* Carte : la coupe à 45° se creuse au survol (16 → 32 px).
   Le contour n'est pas une bordure CSS (rognée par clip-path, surtout quand la carte bouge) :
   la carte est peinte dans la couleur du contour (--trait), et ::before la recouvre du fond (--fond)
   en retrait de 1 px, coupe comprise. Le contour suit ainsi les quatre côtés et la diagonale. */
.carte {
  --coupe: 16px;
  --trait: var(--bord);
  --fond: var(--blanc);
  position: relative;
  isolation: isolate;
  background: var(--trait);
  padding: 32px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe)), calc(100% - var(--coupe)) 100%, 0 100%);
  transition: background-color .25s ease, clip-path .3s var(--sortie), transform .3s var(--sortie);
}
.carte::before {
  content: "";
  position: absolute; inset: 1px; z-index: -1;
  background: var(--fond);
  /* coupe intérieure plus courte de 2 − √2 ≈ 0,59 px : contour de 1 px aussi sur la diagonale */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--coupe) + .59px), calc(100% - var(--coupe) + .59px) 100%, 0 100%);
  transition: clip-path .3s var(--sortie);
}
.sombre .carte { --trait: var(--filet-sombre); --fond: var(--petrole-900); }
@media (hover: hover) {
  .carte:hover { --coupe: 32px; --trait: var(--petrole); transform: translateY(-4px); }
  .sombre .carte:hover { --trait: var(--petrole-400); }
}

/* Liste à puces carrées pétrole (problèmes, périmètre) */
.puces { list-style: none; margin: 0; padding: 0; }
.puces li { position: relative; padding-left: 22px; }
.puces li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; background: var(--petrole);
}

.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }

/* Symbole « O » du logo en filigrane (hero, conviction) : pétrole à 22 % sur noir pétrole ≈ pétrole 900.
   Image de fond plutôt que masque CSS, pour que le site s'affiche aussi ouvert en local. */
.filigrane { position: relative; overflow: hidden; }
.filigrane::before {
  content: "";
  position: absolute;
  background: url(assets/symbole-o-bedeo.png) center / contain no-repeat;
  opacity: .22;
  pointer-events: none;
}
.filigrane > .conteneur { position: relative; }

/* ---------- A1 · Hero (noir pétrole) ---------- */

.hero {
  background: var(--noir);
  min-height: 600px;
  display: flex; align-items: center;
  padding: 96px 0;
}
.hero::before { right: -160px; top: 50%; width: 640px; height: 652px; transform: translateY(-50%); }
.hero__contenu { max-width: 880px; }
/* Surtitre long (80 signes) : en bas de casse, il se lit d'un trait au lieu de trois lignes de capitales sur mobile */
.hero .surtitre { font-size: 15px; letter-spacing: .01em; text-transform: none; margin-bottom: 20px; }
.hero h1 { max-width: 760px; }
.hero__chapo { font-size: 20px; line-height: 1.6; color: var(--froid); margin-top: 24px; max-width: 620px; }
.hero__actions { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; }
.hero__zone { font: 500 14px/1.5 var(--f-texte); color: var(--froid); letter-spacing: .02em; }

@media (prefers-reduced-motion: no-preference) {
  .hero__contenu > * { animation: monter .8s var(--sortie) both; }
  .hero__contenu > :nth-child(2) { animation-delay: .08s; }
  .hero__contenu > :nth-child(3) { animation-delay: .16s; }
  .hero__contenu > :nth-child(4) { animation-delay: .24s; }
  .hero::before { animation: apparaitre 1.4s ease both; }
}
@keyframes monter { from { opacity: 0; transform: translateY(16px); } }
@keyframes apparaitre { from { opacity: 0; } }

/* ---------- A2 · BeDeo en bref (bandeau pétrole) ---------- */

.bref { padding: 56px 0; }
.bref__texte {
  max-width: 920px;
  padding-left: 24px;
  border-left: 3px solid var(--blanc);
  color: var(--blanc);
  font-size: 21px;
  line-height: 1.6;
}

/* ---------- A3 · Problèmes (blanc) ---------- */

.probleme h3 {
  display: flex; align-items: center; gap: 12px;
  font: 800 13px/1 var(--f-titre);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--petrole-700);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bord);
}
.probleme h3 .icone { width: 24px; height: 24px; color: var(--petrole); }
.probleme li {
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 17px;
  line-height: 1.5;
  border-bottom: 1px solid var(--bord);
}
.probleme li::before { top: 25px; }
.probleme li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- A4 · Conviction (noir pétrole) ---------- */

.conviction::before { left: -220px; bottom: -260px; width: 520px; height: 530px; }
.conviction .conteneur { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.conviction h2 { font-size: 44px; line-height: 1.08; }
.conviction p { font-size: 20px; line-height: 1.6; color: var(--froid); padding-top: 8px; }
.conviction strong { color: var(--petrole-400); font-weight: 600; }

/* ---------- A5 · Ce que BeDeo prend en charge (gris brume, 3 + 2) ---------- */

.domaines { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 48px; }
.domaine { grid-column: span 2; }
.domaine:nth-child(n + 4) { grid-column: span 3; }
.domaine .icone { margin-bottom: 24px; }
.domaine h3 { font-size: 20px; line-height: 1.3; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--bord); }
.domaine li { font-size: 16px; line-height: 1.55; }
.domaine li + li { margin-top: 10px; }

/* ---------- A6 · Méthode en carrousel (pétrole 900) ---------- */

.carrousel { margin-top: 48px; }
.carrousel__piste {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste:focus-visible { outline-offset: 4px; }

.etape {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start;
  background: var(--blanc);
  color: var(--noir);
  padding: 56px 64px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}
.sombre .etape h3 { color: var(--noir); }
.etape .etape__rang {
  font: 800 104px/.9 var(--f-titre);
  letter-spacing: -0.03em;
  color: var(--petrole);
}
.etape .etape__rang span {
  display: block;
  font-size: 13px; line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--petrole-700);
  margin-bottom: 16px;
}
.etape h3 { font-size: 36px; line-height: 1.1; margin-bottom: 16px; }
.etape p { font-size: 19px; line-height: 1.6; color: var(--texte-2); max-width: 640px; }

.carrousel__commandes { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; }
.carrousel__commandes[hidden] { display: none; }
.carrousel__points { display: flex; }
.carrousel__point {
  position: relative;
  width: 32px; height: 44px;
  padding: 0; border: 0; background: none;
  cursor: pointer;
}
.carrousel__point::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  background: var(--froid);
  transition: background-color .15s ease, width .15s ease;
}
.sombre .carrousel__point::before { background: rgba(255, 255, 255, .3); }
.carrousel__point:hover::before { background: var(--petrole-400); }
.carrousel__point[aria-current="true"]::before { background: var(--petrole); width: 22px; }
.sombre .carrousel__point[aria-current="true"]::before { background: var(--petrole-400); }
.carrousel__fleches { display: flex; gap: 8px; }
.carrousel__fleche {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  background: transparent; color: var(--noir);
  border: 1px solid var(--noir); border-radius: 0;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sombre .carrousel__fleche { color: var(--blanc); border-color: var(--blanc); }
.carrousel__fleche svg { width: 20px; height: 20px; }
.carrousel__fleche:hover:not([aria-disabled="true"]) { background: var(--noir); color: var(--blanc); }
.sombre .carrousel__fleche:hover:not([aria-disabled="true"]) { background: var(--blanc); color: var(--noir); }
.carrousel__fleche[aria-disabled="true"] { opacity: .3; cursor: default; }

/* ---------- A7 · Formats (blanc ; une carte sombre, une carte claire) ---------- */

.format { --coupe: 32px; padding: 48px; display: flex; flex-direction: column; }
.format h3 { font-size: 28px; }
.format__quand { font: 600 17px/1.4 var(--f-texte); color: var(--petrole-700); margin: 12px 0 24px; }
.format p + p { margin-top: 16px; }
.format__rythme {
  margin-top: auto;
  padding-top: 32px;
}
.format__rythme span {
  display: inline-block;
  background: var(--petrole-100);
  color: var(--petrole-700);
  font: 600 14px/1.3 var(--f-texte);
  padding: 8px 12px;
}
.format--sombre { --trait: var(--noir); --fond: var(--noir); color: var(--froid); }
.format--sombre h3 { color: var(--blanc); }
.format--sombre .format__quand { color: var(--petrole-400); }

/* ---------- A8 · Résultats (noir pétrole) ---------- */

.resultat { --coupe: 24px; }
.resultat .icone { margin-bottom: 24px; }
.resultat h3 { font-size: 20px; line-height: 1.3; margin-bottom: 12px; text-wrap: wrap; }
.resultat p { color: var(--texte-2); font-size: 15px; line-height: 1.6; }
.sombre .resultat p { color: var(--froid); }

/* ---------- A9 · FAQ (blanc) ---------- */

.faq { margin-top: 48px; max-width: 880px; border-top: 1px solid var(--bord); }
.faq details { border-bottom: 1px solid var(--bord); }
.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 24px 48px 24px 0;
  font: 600 18px/1.4 var(--f-texte);
  transition: color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 12px; height: 12px;
  border-right: 2px solid var(--petrole);
  border-bottom: 2px solid var(--petrole);
  transform: translateY(-75%) rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary { color: var(--petrole-700); }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { color: var(--petrole-700); }
.faq details p { padding: 0 48px 24px 0; color: var(--texte-2); max-width: 760px; }

/* ---------- A10 · Bandeau d'appel ---------- */

.cta-bandeau { padding: 96px 0; }
.cta-bandeau__bloc {
  background: var(--petrole);
  color: var(--blanc);
  padding: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 32px), calc(100% - 32px) 100%, 0 100%);
}
.cta-bandeau h2 { color: var(--blanc); font-size: 40px; }
.cta-bandeau p { margin-top: 12px; font-size: 18px; }

/* ---------- A0.2 · Pied de page ---------- */

.pied { background: var(--noir); color: var(--froid); font-size: 14px; padding: 64px 0 32px; }
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--petrole-400); }
.pied__haut { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: 48px; }
.pied__logo img { width: 180px; }
.pied__baseline { margin-top: 24px; max-width: 380px; line-height: 1.6; }
.pied address { font-style: normal; line-height: 1.8; }
.pied ul { list-style: none; margin: 0; padding: 0; line-height: 1.8; }
.pied__bas {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--filet-sombre);
  font-size: 12px;
  display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
}
.nowrap { white-space: nowrap; }

/* ---------- Pages intérieures (contact, légal, service) ---------- */

.page-titre { background: var(--noir); color: var(--blanc); padding: 64px 0; position: relative; overflow: hidden; }
.page-titre h1 { font-size: 44px; line-height: 1.1; color: var(--blanc); }
.page-titre p { color: var(--froid); font-size: 18px; margin-top: 16px; max-width: 640px; }
.page-titre a { color: var(--blanc); text-decoration: underline; text-underline-offset: 3px; }

.contact .conteneur { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }

.formulaire { display: grid; gap: 24px; }
.formulaire .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.champ label { display: block; font: 600 14px/1.4 var(--f-texte); margin-bottom: 8px; }
.champ input, .champ textarea {
  width: 100%;
  font: 400 16px/1.5 var(--f-texte);
  color: var(--noir);
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 0;
  padding: 12px 16px;
  -webkit-appearance: none; appearance: none;
}
.champ textarea { min-height: 176px; resize: vertical; }
.champ input:focus, .champ textarea:focus {
  outline: 2px solid rgba(0,128,144,.25);
  outline-offset: 0;
  border-color: var(--petrole);
}
.champ input::placeholder, .champ textarea::placeholder { color: #6B7E85; }
.formulaire__rgpd { font-size: 13px; color: var(--texte-2); }
.formulaire__note { font-size: 14px; color: var(--texte-2); margin-bottom: -8px; }
.formulaire__piege { display: none; }

.encart { background: var(--brume); padding: 32px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%); }
.encart + .encart { margin-top: 24px; }
.encart h2 { font-size: 22px; margin-bottom: 16px; }
.encart ol { margin: 0; padding-left: 24px; }
.encart li + li { margin-top: 8px; }
.encart .gros { font: 600 18px/1.5 var(--f-texte); }

.texte-legal { max-width: 760px; }
.texte-legal h2 { font-size: 24px; margin: 48px 0 16px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p, .texte-legal ul { margin: 0 0 16px; }
.texte-legal ul { padding-left: 24px; }
.texte-legal li + li { margin-top: 8px; }
.texte-legal .maj { color: var(--texte-2); font-size: 14px; }

/* ---------- Apparition au défilement (activée par site.js, coupée si mouvement réduit) ---------- */

.a-reveler { opacity: 0; transform: translateY(24px); }
.a-reveler.revele {
  opacity: 1; transform: none;
  transition: opacity .7s ease var(--delai, 0s), transform .7s var(--sortie) var(--delai, 0s);
}

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

@media (max-width: 1080px) {
  .grille-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Menu replié derrière le bouton « Menu » en dessous de 1024 px */
@media (max-width: 1023px) {
  .entete .conteneur { gap: 12px; }
  .js .entete__menu { display: grid; }
  .js .entete__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - var(--header)); overflow-y: auto;
    background: var(--noir);
    border-bottom: 3px solid var(--petrole);
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .js.menu-ouvert .entete__nav { visibility: visible; opacity: 1; transform: none; }
  .js .entete__nav :focus-visible { outline-color: var(--blanc); }
  .js .entete__nav ul {
    flex-direction: column; gap: 0;
    max-width: calc(var(--max) + 2 * var(--marge)); margin: 0 auto;
    padding: 8px var(--marge) 24px;
  }
  .js .entete__nav a { padding: 20px 0; color: var(--blanc); font-size: 15px; border-bottom: 1px solid var(--filet-sombre); }
  .js .entete__nav a::after { display: none; }
  .js .entete__nav a:hover, .js .entete__nav a[aria-current="true"] { color: var(--petrole-400); }
  /* Sans JavaScript : les liens restent visibles sur une deuxième ligne */
  html:not(.js) .entete .conteneur { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
  html:not(.js) .entete__nav { order: 3; width: 100%; }
  html:not(.js) .entete__nav ul { flex-wrap: wrap; gap: 0 20px; }
}

@media (max-width: 900px) {
  :root { --marge: 20px; --header: 64px; }
  .entete__logo img { width: 140px; }
  .section, .cta-bandeau { padding: 64px 0; }
  .bref { padding: 40px 0; }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  .hero { min-height: 0; padding: 64px 0 80px; }
  .hero::before { width: 420px; height: 428px; right: -200px; top: auto; bottom: -140px; transform: none; }
  .hero__chapo { font-size: 18px; }
  .bref__texte { font-size: 18px; padding-left: 20px; }
  .grille-2, .grille-3, .domaines, .conviction .conteneur, .contact .conteneur, .pied__haut { grid-template-columns: 1fr; }
  .grille-2, .grille-3, .grille-4, .domaines { gap: 16px; margin-top: 32px; }
  .domaine, .domaine:nth-child(n + 4) { grid-column: auto; }
  .conclusion { margin-top: 32px; font-size: 20px; }
  .conviction::before { width: 360px; height: 367px; left: auto; right: -160px; bottom: -180px; }
  .conviction .conteneur { gap: 24px; }
  .conviction h2, .cta-bandeau h2 { font-size: 30px; }
  .conviction p { font-size: 18px; }
  .carrousel { margin-top: 32px; }
  .carrousel__piste { gap: 16px; }
  .etape { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px 40px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%); }
  .etape .etape__rang { font-size: 64px; }
  .etape h3 { font-size: 28px; }
  .etape p { font-size: 17px; }
  .format { padding: 32px; }
  .cta-bandeau__bloc { padding: 48px 24px; }
  .contact .conteneur { gap: 48px; }
  .page-titre h1 { font-size: 30px; }
  .pied__haut { gap: 32px; }
}

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

@media (max-width: 560px) {
  .bouton--petit { padding: 15.5px 14px; font-size: 13px; }
  .formulaire .duo { grid-template-columns: 1fr; }
  .hero__actions .bouton { width: 100%; text-align: center; }
  .carte, .format, .encart { padding: 24px; }
  .pied__bas { flex-direction: column; }
}

@media (max-width: 420px) {
  .entete .conteneur { gap: 10px; }
  .entete__logo img { width: 128px; }
}

@media (max-width: 359px) {
  .entete__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carte, .carte::before, .carrousel__point::before, .carrousel__fleche, .entete__nav, .entete__nav a::after { transition: none; }
}

@media print {
  .entete, .cta-bandeau, .filigrane::before, .carrousel__commandes { display: none; }
  .hero, .page-titre, .sombre, .section--petrole { background: none; color: var(--noir); }
  .sombre h1, .sombre h2, .sombre h3, .bref__texte, .page-titre h1 { color: var(--noir); }
  .carrousel__piste { display: block; overflow: visible; }
  .etape + .etape { margin-top: 16px; }
  .a-reveler { opacity: 1; transform: none; }
}