/* Essai Alys : feuille de style alignée sur la charte graphique Alys expérience (version 1.0, septembre 2026)
   Source : 3 RESSOURCES/Pièces jointes/Logos/Alys/Charte graphique - Alys.pdf
   Pétrole = structure (titres, boutons, pied de page); turquoise = lumière (surtitres, accents, appels).
   Poppins pour les titres, Mulish pour le texte. Grille de 4 px, sections de 96 px, contenu de 1200 px. */
:root{
  /* Pétrole */
  --petrole-100:#e6f1f5;
  --petrole-200:#c3e0e6;
  --petrole-300:#93c3cf;
  --petrole-400:#5aa3b4;
  --petrole-500:#2b8195;
  --petrole-600:#186d85;
  --petrole-700:#0e566e;
  --petrole-800:#0b4459;
  --petrole-900:#072d3d;
  /* Turquoise */
  --turquoise-100:#e3f8f6;
  --turquoise-200:#c4eeeb;
  --turquoise-300:#93e0dc;
  --turquoise-400:#5fd0cc;
  --turquoise-500:#36bfbb;
  --turquoise-600:#29a8a4;
  --turquoise-700:#21928e;
  --turquoise-800:#177c77;
  /* Gris teintés de pétrole */
  --gris-50:#f4f8f9;
  --gris-200:#e4e9ec;
  --gris-500:#5f6e76;
  --gris-800:#2a3a43;

  --texte:var(--gris-800);
  --texte-doux:var(--gris-500);
  --fond:#fff;
  --fond-doux:var(--gris-50);

  --ombre-legere:0 2px 10px rgba(14,86,110,.07);
  --ombre-moyenne:0 10px 30px rgba(14,86,110,.12);
  --courbe:cubic-bezier(.4,0,.2,1);
  --titres:"Poppins",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --corps:"Mulish",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--corps);
  color:var(--texte);
  background:var(--fond);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1264px;margin:0 auto;padding:0 32px}

/* En-tête */
.site-header{background:#fff;padding:16px 0;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(14,86,110,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{height:56px;width:auto;display:block}
.nav{display:flex;gap:32px;align-items:center}
.nav a{font-family:var(--titres);color:var(--petrole-900);text-decoration:none;font-weight:500;font-size:.95rem;padding:4px 0;transition:color .16s var(--courbe)}
.nav a:hover{color:var(--petrole-600)}
.nav a.active{color:var(--petrole-700);font-weight:600;box-shadow:inset 0 -2px 0 var(--turquoise-500)}

/* Boutons : pastilles. Pétrole sur fond clair, turquoise sur fond foncé (texte pétrole 900). */
.cta{
  display:inline-block;
  background:var(--petrole-700);
  color:#fff;
  font-family:var(--titres);
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  padding:14px 30px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  line-height:1.4;
  transition:background .16s var(--courbe),transform .12s var(--courbe);
}
.cta:hover{background:var(--petrole-800)}
.cta:active{transform:scale(.97)}
.section-dark .cta{background:var(--turquoise-500);color:var(--petrole-900)}
.section-dark .cta:hover{background:var(--turquoise-600)}
.cta-small{padding:10px 22px;font-size:.9rem}
.lien-secondaire{display:inline-block;margin-top:16px;color:var(--petrole-700);font-weight:700;text-decoration:underline;text-underline-offset:4px;font-size:.92rem}

/* Sections : fluidité, aucun trait de séparation, on distingue par les fonds */
.section{padding:96px 0}
.section-soft{background:var(--fond-doux)}
.section-dark{background:var(--petrole-900);color:#fff}
.eyebrow{
  display:block;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  color:var(--turquoise-800);
  margin-bottom:12px;
}
.section-dark .eyebrow{color:var(--turquoise-400)}
h1,h2,h3{font-family:var(--titres);color:var(--petrole-900)}
h1{
  font-size:clamp(2.25rem,4.6vw,3.75rem);
  letter-spacing:-.02em;
  line-height:1.1;
  font-weight:700;
  max-width:860px;
}
.section-dark h1{color:#fff}
.section-dark h1 em{font-style:normal;color:var(--turquoise-400)}
h2{
  font-size:clamp(1.75rem,3vw,2.25rem);
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:16px;
  max-width:820px;
  font-weight:700;
}
.section-dark h2{color:#fff}
.intro{max-width:720px;color:var(--texte-doux);margin-bottom:48px;font-size:1.125rem}
.section-dark .intro{color:var(--petrole-200)}

/* Bloc principal : pétrole 700 avec halos doux (trame de points retirée à la demande de Phil, 17 octobre 2026) */
.hero,.section-dark:has(.cta-final),.carte-sombre{
  position:relative;
  overflow:hidden;
  background-color:var(--petrole-700);
  background-image:
    radial-gradient(ellipse 60% 80% at 92% 0%,rgba(54,191,187,.18),transparent 70%),
    radial-gradient(ellipse 50% 70% at 0% 100%,rgba(7,45,61,.55),transparent 70%);
}
.hero{padding:112px 0 120px}
.hero .sous-titre{max-width:680px;color:var(--petrole-100);font-size:1.125rem;margin:24px 0 40px}
.preuve-ligne{margin-top:48px;font-size:.875rem;color:var(--petrole-200);display:flex;flex-wrap:wrap;gap:8px 28px}
.preuve-ligne span{display:inline-flex;align-items:center;gap:10px}
.preuve-ligne span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--turquoise-500)}

/* Méthode : six étapes sur l'accueil, trois aspects métier sur les fiches */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 56px;margin-top:56px}
.etape::before{content:"";display:block;width:32px;height:3px;border-radius:2px;background:var(--turquoise-500);margin-bottom:20px}
.etape h3{font-size:1.375rem;letter-spacing:-.01em;line-height:1.25;margin-bottom:8px;font-weight:600}
.etape p{color:var(--texte-doux)}
.section[id],.carte-formulaire{scroll-margin-top:112px}
.revue-note{padding:16px 0;background:var(--turquoise-100);color:var(--petrole-800);font-size:.875rem}
.revue-note a{color:var(--petrole-700);font-weight:700}
:focus-visible{outline:3px solid var(--turquoise-500);outline-offset:3px}

/* Problèmes */
.problemes{display:grid;grid-template-columns:1fr 1fr;gap:56px 80px;margin-top:56px}
.probleme h3{font-size:1.375rem;letter-spacing:-.01em;line-height:1.25;margin-bottom:8px;font-weight:600}
.probleme p{color:var(--texte-doux)}
.phrase-pont{
  margin-top:72px;
  font-family:var(--titres);
  font-size:clamp(1.25rem,2.2vw,1.625rem);
  font-weight:600;
  color:var(--petrole-700);
  max-width:760px;
  letter-spacing:-.01em;
  line-height:1.35;
}

/* Listes éditoriales (offres) : sans cartes ni icônes, petit trait turquoise */
.bloc-liste{margin-top:48px;display:grid;gap:8px}
.offre{padding:24px 0;max-width:780px}
.bloc-liste > .offre{min-width:0}
.offre::before{content:"";display:block;width:32px;height:3px;border-radius:2px;background:var(--turquoise-500);margin-bottom:16px}
.offre h3{font-size:1.375rem;letter-spacing:-.01em;line-height:1.3;margin-bottom:6px;font-weight:600;transition:color .16s var(--courbe)}
.offre p{color:var(--texte-doux)}
.offre .promesse{color:var(--turquoise-800);font-weight:700;margin-top:8px;display:block}
a.offre{text-decoration:none;display:block;transition:transform .2s var(--courbe)}
a.offre:hover{transform:translateX(6px)}
a.offre:hover h3{color:var(--turquoise-800)}
.grand-groupe{margin-top:72px}
.grand-groupe:first-of-type{margin-top:0}
.grand-groupe > h2{font-size:clamp(1.375rem,2.2vw,1.75rem);color:var(--petrole-700)}

/* Pourquoi Alys : cartes légères, deux par deux */
.pourquoi-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.carte-pourquoi{background:#fff;border-radius:18px;padding:32px;box-shadow:var(--ombre-legere)}
.carte-pourquoi h3{font-size:1.25rem;line-height:1.3;margin-bottom:8px;font-weight:600}
.carte-pourquoi p{color:var(--texte-doux)}

/* Témoignages de l'accueil : lecture calme, une seule colonne */
.section-temoignages{background:var(--gris-50)}
.section-temoignages .wrap{max-width:884px}
.temoignages-entete{margin-bottom:56px}
.temoignages-entete h2{margin-bottom:0}
.temoignage{margin:0;min-width:0}
.temoignage + .temoignage{margin-top:48px;padding-top:48px;border-top:1px solid var(--petrole-200)}
.temoignage blockquote{font-size:1.1875rem;line-height:1.9;font-weight:400;color:var(--texte)}
.temoignage blockquote p + p{margin-top:20px}
.temoignage figcaption{display:flex;flex-direction:column;gap:4px;margin-top:28px;font-size:.875rem;line-height:1.6;color:var(--texte-doux)}
.temoignage figcaption strong{font-family:var(--titres);font-size:1rem;font-weight:600;color:var(--petrole-900);margin-bottom:2px}
@media (max-width:680px){
  .temoignages-entete{margin-bottom:36px}
  .temoignage blockquote{font-size:1.0625rem;line-height:1.85}
  .temoignage + .temoignage{margin-top:36px;padding-top:36px}
}

/* Diagnostic */
.diagnostic-box{max-width:780px;margin:0}
.diagnostic-box .cta{margin-top:24px}

/* Citation */
.citation-grande{
  font-family:var(--titres);
  font-size:clamp(1.625rem,3vw,2.25rem);
  letter-spacing:-.02em;
  line-height:1.25;
  font-weight:600;
  color:var(--petrole-900);
  max-width:820px;
  padding-left:24px;
  box-shadow:inset 4px 0 0 var(--turquoise-500);
}
.signature-mots{
  margin-top:28px;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:800;
  color:var(--turquoise-800);
}

/* Page de service */
.situation-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.92fr);gap:72px;align-items:start}
.situation-intro p{color:var(--texte-doux);margin-top:16px;max-width:60ch}
.carte-formulaire{background:#fff;border-radius:18px;padding:36px;box-shadow:var(--ombre-moyenne);border-top:4px solid var(--turquoise-500)}
.carte-formulaire h2{font-size:1.375rem;margin-bottom:6px;line-height:1.25}
.carte-formulaire .sous-carte{color:var(--texte-doux);font-size:.9rem;margin-bottom:24px}
.champ-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.resultat-grid,.reassurance-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.reassurance-grid h2{max-width:18ch}
.reassurance-grid p{color:var(--petrole-100);font-size:1.0625rem}
.faq-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start}
.faq-list{display:grid;gap:12px}
.faq-list details{background:var(--fond-doux);border-radius:12px;padding:18px 24px;transition:background .16s var(--courbe)}
.faq-list details[open]{background:var(--petrole-100)}
.faq-list summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-family:var(--titres);font-weight:600;color:var(--petrole-900);cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;color:var(--turquoise-800);font-size:1.5rem;line-height:1;transition:transform .2s var(--courbe)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin-top:10px;color:var(--texte)}

/* Historique */
.histoire{margin-top:56px;display:grid;gap:48px;max-width:820px}
.histoire .reperage{display:grid;grid-template-columns:160px 1fr;gap:32px;align-items:start}
.histoire .annee{font-family:var(--titres);font-size:2rem;font-weight:700;color:var(--turquoise-800);letter-spacing:-.02em;line-height:1.1}
.histoire h3{font-size:1.25rem;margin-bottom:6px;font-weight:600}
.histoire p{color:var(--texte-doux)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:72px;align-items:start;margin-top:56px}
.contact-grid > *{min-width:0}
form.contact{max-width:580px}
.champ{margin-bottom:18px}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:block;font-size:.875rem;font-weight:700;color:var(--petrole-900);margin-bottom:6px}
.optionnel{color:var(--texte-doux);font-weight:400}
input,textarea{
  width:100%;
  padding:13px 16px;
  border:1px solid var(--gris-200);
  border-radius:12px;
  font-size:1rem;
  font-family:inherit;
  color:var(--texte);
  background:#fff;
  transition:border-color .16s var(--courbe),box-shadow .16s var(--courbe);
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--turquoise-500);box-shadow:0 0 0 3px rgba(54,191,187,.3)}
.note-form{margin-top:16px;font-size:.85rem;color:var(--texte-doux)}
/* Case piège contre les robots : hors écran, invisible pour les personnes */
.hp-champ{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cta:disabled{opacity:.7;cursor:wait}
.form-erreur{margin-top:16px;padding:14px 18px;border-radius:12px;background:#fdecee;color:#8a1f2d;font-size:.92rem;font-weight:600}
.form-erreur a{color:#8a1f2d}
.form-erreur:focus{outline:none}
/* Page de confirmation */
.merci-suite{text-align:center}
.merci-suite h2,.merci-suite .intro{margin-left:auto;margin-right:auto}
.merci-suite .intro{margin-bottom:32px}
.merci-actions{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:center;align-items:center}
.note-form a{color:var(--petrole-700);font-weight:700}
.carte-coords{background:#fff;border-radius:18px;padding:36px;box-shadow:var(--ombre-moyenne);border-top:4px solid var(--turquoise-500)}
.carte-coords h3{font-size:1rem;margin:0 0 4px;font-weight:600}
.carte-coords p{color:var(--texte-doux);font-size:.95rem;margin-bottom:20px}
.carte-coords a{color:var(--petrole-700);font-weight:700;text-decoration:none;display:inline-block;padding:3px 0}
.carte-coords a:hover{text-decoration:underline}
.conformite{margin-top:8px;padding-top:20px;font-size:.8rem;color:var(--texte-doux)}
.carte-coords a,.note-form a,.footer p{overflow-wrap:anywhere}

/* Rythme des sections : chaque section a sa propre mise en page pour varier la descente */

/* Haut de page centré (pages de service) */
.hero-centre .wrap{text-align:center}
.hero-centre h1{margin:0 auto;max-width:900px}
.hero-centre .sous-titre{margin-left:auto;margin-right:auto}

/* En-tête centré (parcours, Pourquoi Alys, FAQ) */
.section-parcours .wrap > .eyebrow,.section-parcours .wrap > h2,.section-parcours .wrap > .intro,
.section-centre .wrap > .eyebrow,.section-centre .wrap > h2,.section-centre .wrap > .intro{text-align:center;margin-left:auto;margin-right:auto}

/* Parcours : étapes reliées par une ligne, un point turquoise par étape, sans numéro */
.section-parcours .etapes{--n:3;position:relative;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:32px;text-align:center;margin-top:64px}
.section-parcours .etapes.parcours-6{--n:6;gap:24px}
.section-parcours .etapes::before{
  content:"";position:absolute;top:7px;height:2px;border-radius:2px;
  left:calc((100% - (var(--n) - 1) * 32px) / var(--n) / 2);
  right:calc((100% - (var(--n) - 1) * 32px) / var(--n) / 2);
  background:linear-gradient(90deg,var(--turquoise-200),var(--turquoise-500),var(--turquoise-200));
}
.section-parcours .etapes.parcours-6::before{
  left:calc((100% - 5 * 24px) / 12);
  right:calc((100% - 5 * 24px) / 12);
}
.section-parcours .etape{position:relative}
.section-parcours .etape::before{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--turquoise-500);margin:0 auto 28px;box-shadow:0 0 0 6px var(--fond-doux)}
.section-parcours .parcours-6 .etape h3{font-size:1.25rem}
.section-parcours .parcours-6 .etape p{font-size:.95rem}

/* Titre à gauche qui reste en place, liste à droite, phrase de pont en grand (accueil, problème) */
.section-split .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:0 88px;align-items:start}
.split-tete{position:sticky;top:120px}
.section-split .problemes{grid-template-columns:1fr;gap:40px;margin-top:0}
.section-split .probleme{padding-left:28px;box-shadow:inset 3px 0 0 var(--turquoise-200)}
.section-split .phrase-pont{grid-column:1/-1;text-align:center;margin:104px auto 0;max-width:860px;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.3}

/* Pourquoi Alys : quatre cartes côte à côte avec filet turquoise */
.section-centre .pourquoi-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px}
.section-centre .carte-pourquoi{border-top:4px solid var(--turquoise-500)}

/* Services de l'accueil : trois familles en colonnes */
.colonnes-offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:8px}
.colonnes-offres .grand-groupe{margin-top:0}
.colonnes-offres .grand-groupe > h2{font-size:1.5rem;line-height:1.25;min-height:2.5em;color:var(--petrole-900)}
.colonnes-offres .bloc-liste{margin-top:16px}
.colonnes-offres .offre h3{font-size:1.15rem}
.colonnes-offres .offre p{font-size:.95rem}

/* Énoncé : une grande phrase centrée, seule (pages de service, résultat) */
.section-enonce .resultat-grid{grid-template-columns:1fr;gap:24px;text-align:center;justify-items:center}
.section-enonce .eyebrow{display:none}
.section-enonce h2{font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.12;max-width:22ch;margin:0 auto}
.section-enonce .intro{margin:0 auto;max-width:640px}

/* Réassurance : carte pétrole posée sur fond clair (pages de service) */
.carte-sombre{max-width:1200px;margin:0 auto;padding:72px 80px;border-radius:24px;color:#fff;box-shadow:var(--ombre-moyenne);grid-template-columns:1fr;gap:20px}
.carte-sombre h2{max-width:24ch;font-size:clamp(1.75rem,3.4vw,2.6rem)}
.carte-sombre p{max-width:640px;font-size:1.125rem}
.carte-sombre h2{color:#fff}
.carte-sombre .eyebrow{color:var(--turquoise-400)}

/* Questions fréquentes : une seule colonne centrée */
.section-faq-centre .faq-grid{grid-template-columns:1fr;max-width:820px;margin:0 auto;gap:40px}
.section-faq-centre .faq-grid > div:first-child{text-align:center}
.section-faq-centre .faq-grid > div:first-child h2{margin:0 auto}

/* CTA final : centré, en écho au haut de page */
.cta-final{text-align:center}
.cta-final h2,.cta-final p{margin-left:auto;margin-right:auto}
.cta-final p{color:var(--petrole-100);max-width:640px;margin:16px auto 32px;font-size:1.125rem}

/* Pied de page */
.footer{background:var(--petrole-900);color:var(--petrole-200);padding:72px 0 40px}
.footer-grid{display:grid;grid-template-columns:1.2fr .6fr .8fr;gap:48px;align-items:start}
.footer-grid > *{min-width:0}
.logo-footer{height:72px;width:auto;display:block;margin-bottom:20px}
.footer .slogan{font-family:var(--titres);color:var(--turquoise-400);font-weight:600;font-size:1rem}
.footer-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--turquoise-400);margin-bottom:14px}
.footer a{color:#fff;text-decoration:none;font-weight:600;display:inline-block;padding:3px 0}
.footer a:hover{color:var(--turquoise-400)}
.footer nav{display:grid;gap:10px}
.footer p{font-size:.92rem;margin-bottom:8px}
.footer-legal{margin-top:56px;font-size:.8rem;color:var(--petrole-300);display:grid;gap:6px}

/* Apparition discrète au défilement (activée par reveal.js) */
.reveal-on .reveal{opacity:0;transform:translateY(12px);transition:opacity .32s var(--courbe),transform .32s var(--courbe)}
.reveal-on .reveal.vu{opacity:1;transform:none}

/* Badge d'essai */
.badge-essai{
  position:fixed;
  right:14px;bottom:14px;
  background:var(--petrole-900);
  color:#fff;
  border-radius:999px;
  padding:9px 16px;
  font-size:.75rem;
  display:flex;gap:12px;align-items:center;
  box-shadow:var(--ombre-moyenne);
  z-index:60;
}
.badge-essai span{color:var(--petrole-200);font-weight:600}
.badge-essai a{color:var(--turquoise-400);font-weight:800;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:4px 2px}
/* Espace sous le pied de page pour que le badge d'essai ne cache rien (à retirer avec le badge) */
.footer{padding-bottom:112px}

/* Lien d'évitement : visible seulement au clavier */
.lien-evitement{position:absolute;left:16px;top:-60px;z-index:100;background:var(--petrole-900);color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;text-decoration:none;transition:top .16s var(--courbe)}
.lien-evitement:focus{top:12px}

@media (max-width:980px){
  .etapes{grid-template-columns:1fr 1fr;gap:40px}
  .problemes{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .histoire .reperage{grid-template-columns:1fr;gap:8px}
  .situation-layout,.resultat-grid,.reassurance-grid,.faq-grid{grid-template-columns:1fr;gap:44px}
  .section-centre .pourquoi-grid{grid-template-columns:1fr 1fr}
  .colonnes-offres{grid-template-columns:1fr;gap:48px}
  .colonnes-offres .grand-groupe > h2{min-height:0}
  .section-split .wrap{grid-template-columns:1fr}
  .split-tete{position:static;margin-bottom:40px}
  .section-split .phrase-pont{margin-top:72px}
  /* Parcours vertical : ligne à gauche, un point par étape */
  .section-parcours .etapes,.section-parcours .etapes.parcours-6{grid-template-columns:1fr;gap:32px;text-align:left;max-width:560px;margin-left:auto;margin-right:auto}
  .section-parcours .etapes::before,.section-parcours .etapes.parcours-6::before{left:7px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:var(--turquoise-200)}
  .section-parcours .etape{padding-left:44px}
  .section-parcours .etape::before{position:absolute;left:0;top:6px;margin:0}
  .carte-sombre{padding:56px 48px}
}
@media (max-width:680px){
  .wrap{padding:0 20px}
  .site-header{position:static}
  .header-inner{flex-direction:column;gap:12px;text-align:center}
  .nav{flex-wrap:wrap;justify-content:center;gap:20px}
  .section{padding:64px 0}
  .hero{padding:64px 0 72px}
  .etapes,.pourquoi-grid,.section-centre .pourquoi-grid{grid-template-columns:1fr}
  .carte-sombre{margin:0 12px;padding:40px 26px;border-radius:18px}
  .section-split .probleme{padding-left:20px}
  .deux-colonnes,.champ-grid{grid-template-columns:1fr}
  .logo{height:48px}
  .carte-formulaire,.carte-coords,.carte-pourquoi{padding:26px}
  .badge-essai{left:10px;right:10px;justify-content:center;gap:10px;padding:8px 12px;font-size:.68rem;white-space:nowrap}
}
@media (max-width:380px){
  .nav{gap:12px}
  .nav a{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cta,a.offre,.nav a,.offre h3{transition:none}
  .reveal-on .reveal{opacity:1;transform:none;transition:none}
}

/* Page Contact : coordonnées à gauche, même carte formulaire que les pages de service */
.coordonnees h3{font-size:1rem;margin:28px 0 2px;font-weight:600}
.coordonnees h2 + h3{margin-top:20px}
.coordonnees p{margin-top:0}
.coordonnees a{color:var(--petrole-700);font-weight:700;text-decoration:none;display:inline-block;padding:3px 0}
.coordonnees a:hover{text-decoration:underline}
.coordonnees .conformite{margin-top:32px;font-size:.85rem;max-width:44ch}
@media (max-width:980px){
  .situation-layout > .coordonnees{order:2}
}