:root{
  --mpf-nuit:#04172B; --mpf-nuit-clair:#0D1C2C; --mpf-nuit-profond:#031527;
  --mpf-or:#FBB829; --mpf-or-sombre:#E5A31B;
  --mpf-blanc:#FFFFFF; --mpf-creme:#FCF9F7; --mpf-gris-bord:#E7E3DF;
  --mpf-texte:#0D1C2C; --mpf-texte-doux:#5A6672; --mpf-rouge:#D21B1B;
  --mpf-max:1180px; --mpf-gouttiere:20px;
  --mpf-section:clamp(3rem,7vw,5.5rem);
  --mpf-radius:14px; --mpf-radius-s:8px;
  --mpf-header:80px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--mpf-header) + 12px)}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--mpf-texte);
  line-height:1.65;background:var(--mpf-blanc);-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{font-family:'Archivo','Inter',system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--mpf-nuit);text-wrap:balance}
h1{font-size:clamp(1.9rem,6.4vw,3.6rem);line-height:1.03;font-weight:900}
h2{font-size:clamp(1.4rem,3.8vw,2.4rem);line-height:1.12;font-weight:800;margin-bottom:1rem}
h3{font-size:clamp(1.05rem,2.2vw,1.25rem);font-weight:700;margin-bottom:.5rem}
p{font-size:clamp(.95rem,1.6vw,1.05rem);color:var(--mpf-texte-doux);margin-bottom:1.4rem}
a{color:inherit}

.mpf-conteneur{max-width:var(--mpf-max);margin:0 auto;padding:0 var(--mpf-gouttiere);width:100%}
.mpf-section{padding:var(--mpf-section) 0}
.mpf-creme{background:var(--mpf-creme)}
.mpf-sombre{background:var(--mpf-nuit);color:var(--mpf-blanc)}
.mpf-sombre h1,.mpf-sombre h2,.mpf-sombre h3,
.mpf-hero h1,.mpf-hero h2,.mpf-hero h3,
.mpf-chiffres h2,.mpf-form h2,.mpf-form h3{color:var(--mpf-blanc)}
.mpf-centre{text-align:center}
.mpf-entete-section{max-width:720px;margin:0 auto clamp(2rem,4vw,3.5rem);text-align:center}
.mpf-entete-section p{margin-bottom:0}

/* Accessibilite : un lien d'evitement et un focus toujours visible. */
.mpf-evitement{position:absolute;left:-9999px;top:0;background:var(--mpf-or);
  color:var(--mpf-nuit);padding:.8rem 1.2rem;font-weight:700;z-index:2000}
.mpf-evitement:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:3px solid var(--mpf-or);outline-offset:2px}

/* ---------- En-tete ---------- */
.mpf-header{height:var(--mpf-header);background:var(--mpf-blanc);
  border-bottom:1px solid var(--mpf-gris-bord);position:sticky;top:0;z-index:1000}
.mpf-header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.mpf-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mpf-nuit);
  font-family:'Archivo',sans-serif;font-weight:900;font-size:1.05rem;line-height:1.05;flex-shrink:0}
.mpf-logo svg{width:30px;height:30px;color:var(--mpf-or);flex-shrink:0}
.mpf-logo small{display:block;font-size:.62rem;letter-spacing:.22em;font-weight:700;color:var(--mpf-texte-doux)}
.mpf-nav{display:flex;gap:1.4rem}
.mpf-nav a{text-decoration:none;font-weight:600;font-size:.82rem;text-transform:uppercase;
  white-space:nowrap;transition:color .15s}
.mpf-nav a:hover,.mpf-nav a[aria-current]{color:var(--mpf-or-sombre)}
.mpf-header-cta{background:var(--mpf-or);height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 1.4rem;text-decoration:none;color:var(--mpf-nuit);
  transition:background .15s;flex-shrink:0}
.mpf-header-cta:hover{background:var(--mpf-or-sombre)}
.mpf-header-cta strong{font-family:'Archivo',sans-serif;font-weight:800;font-size:.85rem;text-transform:uppercase}
.mpf-header-cta span{font-size:.68rem;font-weight:500;opacity:.75}
.mpf-burger{display:none;background:none;border:0;cursor:pointer;color:var(--mpf-nuit);padding:.4rem}

/* ---------- Boutons ---------- */
.mpf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--mpf-or);color:var(--mpf-nuit);font-family:'Archivo',sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.92rem;
  padding:1rem 1.7rem;border-radius:var(--mpf-radius-s);border:0;text-decoration:none;
  cursor:pointer;transition:background .15s,transform .15s;text-align:center}
.mpf-btn:hover{background:var(--mpf-or-sombre);transform:translateY(-1px)}
.mpf-btn--ligne{background:transparent;border:2px solid var(--mpf-or);color:var(--mpf-or)}
.mpf-btn--ligne:hover{background:var(--mpf-or);color:var(--mpf-nuit)}
.mpf-btn--large{width:100%}
.mpf-btn-note{display:block;margin-top:.8rem;font-size:.78rem;opacity:.75}

/* ---------- Hero ---------- */
.mpf-hero{position:relative;background:var(--mpf-nuit);color:var(--mpf-blanc);
  padding:clamp(2.5rem,6vw,4.5rem) 0;overflow:hidden}
.mpf-hero-fond{position:absolute;inset:0 0 0 auto;width:62%;
  background-size:cover;background-position:center}
.mpf-hero-fond::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--mpf-nuit) 0%,rgba(4,23,43,.75) 45%,rgba(4,23,43,.25) 100%)}
.mpf-hero-inner{position:relative;z-index:2;max-width:660px}
.mpf-fil{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.72rem;text-transform:uppercase;
  font-weight:700;color:var(--mpf-or);margin-bottom:1.2rem;list-style:none}
.mpf-fil a{text-decoration:none}
.mpf-fil a:hover{text-decoration:underline}
.mpf-fil li:not(:last-child)::after{content:"/";margin-left:.45rem;opacity:.5}
.mpf-hero h1 span{color:var(--mpf-or)}
.mpf-hero p{color:rgba(255,255,255,.85);max-width:34em}
.mpf-atouts{display:flex;flex-wrap:wrap;gap:1.4rem;margin:1.8rem 0 2rem;list-style:none}
.mpf-atouts li{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem;min-width:0}
.mpf-atouts svg{color:var(--mpf-or);flex-shrink:0}

/* ---------- Bandeau de chiffres ---------- */
.mpf-chiffres{background:var(--mpf-nuit-clair);color:var(--mpf-blanc);padding:1.8rem 0;
  border-top:1px solid rgba(255,255,255,.07)}
.mpf-chiffres ul{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;list-style:none}
.mpf-chiffres li{display:flex;align-items:center;gap:.9rem;min-width:0}
.mpf-chiffres .rond{width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:rgba(251,184,41,.12);color:var(--mpf-or);display:flex;align-items:center;justify-content:center}
.mpf-chiffres strong{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:1.05rem}
.mpf-chiffres span{font-size:.8rem;opacity:.7}

/* ---------- Cartes ---------- */
.mpf-grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.mpf-carte{background:var(--mpf-blanc);border:1px solid var(--mpf-gris-bord);
  border-radius:var(--mpf-radius);overflow:hidden;min-width:0;
  box-shadow:0 1px 2px rgba(4,23,43,.04),0 8px 24px rgba(4,23,43,.05);
  transition:transform .25s,box-shadow .25s}
.mpf-carte:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(4,23,43,.06),0 16px 36px rgba(4,23,43,.09)}
.mpf-carte-img{position:relative;aspect-ratio:16/10;background:#e9e4df;overflow:visible}
.mpf-carte-img img{width:100%;height:100%;object-fit:cover}
.mpf-carte-pastille{position:absolute;bottom:-17px;left:20px;width:36px;height:36px;
  background:var(--mpf-or);border:4px solid var(--mpf-blanc);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--mpf-nuit)}
.mpf-carte-corps{padding:2rem 1.4rem 1.5rem}
.mpf-carte-corps p:last-child{margin-bottom:0}

/* ---------- Bloc sols ---------- */
.mpf-deux-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem);align-items:start}
.mpf-deux-cols>*{min-width:0}
.mpf-carte-geo{aspect-ratio:4/3;border-radius:var(--mpf-radius);overflow:hidden;
  border:1px solid var(--mpf-gris-bord);background:#eceae6}
.mpf-carte-geo iframe{width:100%;height:100%;border:0;display:block}
.mpf-fiche{margin-top:1.4rem;border-top:1px solid var(--mpf-gris-bord)}
.mpf-fiche-ligne{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--mpf-gris-bord);font-size:.92rem}
.mpf-fiche-lib{color:var(--mpf-texte-doux);min-width:0}
.mpf-fiche-val{font-weight:700;text-align:right;min-width:0}
.mpf-badge{display:inline-block;padding:.15rem .6rem;border-radius:5px;font-size:.72rem;
  font-weight:800;text-transform:uppercase;color:var(--mpf-blanc);letter-spacing:.02em}
.mpf-badge--eleve{background:var(--mpf-rouge)}
.mpf-badge--modere{background:var(--mpf-or);color:var(--mpf-nuit)}
.mpf-badge--faible{background:#6B7784}
.mpf-source{display:inline-flex;align-items:center;gap:.35rem;margin-top:.8rem;
  font-size:.78rem;color:var(--mpf-texte-doux);text-decoration:none}
.mpf-source:hover{color:var(--mpf-or-sombre);text-decoration:underline}

/* ---------- Etapes ---------- */
.mpf-etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.mpf-etape{padding:1.8rem;min-width:0}
.mpf-etape .num{display:block;font-family:'Archivo',sans-serif;font-size:2.2rem;
  font-weight:900;color:var(--mpf-or);margin-bottom:.6rem;line-height:1}

/* ---------- Zone d'intervention ---------- */
.mpf-communes{display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.5rem;
  margin:1.4rem 0 1.8rem;list-style:none}
.mpf-communes li{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;min-width:0}
.mpf-puce{width:9px;height:9px;border-radius:50%;background:var(--mpf-or);flex-shrink:0}
.mpf-vignettes{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.mpf-vignette{aspect-ratio:1;border-radius:var(--mpf-radius-s);overflow:hidden;
  background:var(--mpf-nuit-clair);border:1px solid rgba(255,255,255,.1)}
.mpf-vignette img{width:100%;height:100%;object-fit:cover}

/* ---------- Villes proches ---------- */
.mpf-proches{list-style:none;border-top:1px solid var(--mpf-gris-bord);margin-top:1.4rem}
.mpf-proches li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.6rem 0;border-bottom:1px solid var(--mpf-gris-bord);font-size:.92rem}
.mpf-proches a{text-decoration:none;font-weight:600;min-width:0}
.mpf-proches a:hover{color:var(--mpf-or-sombre);text-decoration:underline}
.mpf-proches .km{color:var(--mpf-texte-doux);font-size:.85rem;white-space:nowrap;flex-shrink:0}
.mpf-lien-fort{display:inline-block;margin-top:1rem;font-weight:700;font-size:.88rem;text-decoration:none}
.mpf-lien-fort:hover{color:var(--mpf-or-sombre)}

/* ---------- Formulaire ---------- */
.mpf-form{background:var(--mpf-nuit-profond);color:var(--mpf-blanc);
  padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--mpf-radius);
  border:1px solid rgba(255,255,255,.06)}
.mpf-form h2{color:var(--mpf-blanc);font-size:clamp(1.3rem,2.6vw,1.7rem)}
.mpf-form>p{color:rgba(255,255,255,.65);font-size:.92rem;margin-bottom:1.6rem}
.mpf-form-grille{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.mpf-champ{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.mpf-champ--plein{grid-column:1 / -1}
.mpf-champ label{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85)}
.mpf-champ .oblig{color:var(--mpf-or)}
.mpf-champ input,.mpf-champ select,.mpf-champ textarea{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;padding:.8rem;color:var(--mpf-blanc);font-family:inherit;
  font-size:.95rem;width:100%}
.mpf-champ input::placeholder,.mpf-champ textarea::placeholder{color:rgba(255,255,255,.35)}
.mpf-champ select option{background:var(--mpf-nuit)}
.mpf-champ input:focus,.mpf-champ select:focus,.mpf-champ textarea:focus{
  border-color:var(--mpf-or);background:rgba(255,255,255,.09)}
.mpf-champ--erreur input,.mpf-champ--erreur select,.mpf-champ--erreur textarea{border-color:var(--mpf-rouge)}
.mpf-form-pied{margin-top:1.4rem;text-align:center}
.mpf-form-note{display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.75rem;color:rgba(255,255,255,.45);margin-top:.9rem}
.mpf-piege{position:absolute;left:-9999px}
.mpf-message{padding:.9rem 1.1rem;border-radius:var(--mpf-radius-s);margin-bottom:1.2rem;font-size:.9rem}
.mpf-message--ok{background:rgba(35,160,90,.16);border:1px solid rgba(35,160,90,.5);color:#B7F0CE}
.mpf-message--ko{background:rgba(210,27,27,.14);border:1px solid rgba(210,27,27,.5);color:#FFC9C9}

/* ---------- Pied de page ---------- */
.mpf-footer{background:var(--mpf-nuit);color:var(--mpf-blanc);padding:clamp(2.5rem,5vw,4rem) 0 1.6rem}
.mpf-footer-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(1.6rem,3vw,3rem);margin-bottom:2.5rem}
.mpf-footer-grille>*{min-width:0}
.mpf-footer h2{font-family:'Archivo',sans-serif;font-size:.85rem;letter-spacing:.08em;
  margin-bottom:1.2rem;color:var(--mpf-blanc)}
.mpf-footer ul{list-style:none}
.mpf-footer li{margin-bottom:.7rem}
.mpf-footer a{color:rgba(255,255,255,.62);text-decoration:none;font-size:.9rem;transition:color .15s}
.mpf-footer a:hover{color:var(--mpf-or)}
.mpf-footer .intro{font-size:.86rem;color:rgba(255,255,255,.5);margin-top:1rem}
.mpf-footer-contact{font-size:.9rem;color:rgba(255,255,255,.62)}
.mpf-footer-contact strong{color:var(--mpf-blanc);font-size:1.05rem}
.mpf-footer-bas{padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;
  font-size:.78rem;color:rgba(255,255,255,.42)}

/* ---------- Points de rupture ---------- */
@media (max-width:900px){
  .mpf-nav{display:none;position:absolute;top:var(--mpf-header);left:0;width:100%;
    background:var(--mpf-blanc);flex-direction:column;gap:0;padding:.5rem 0;
    border-bottom:1px solid var(--mpf-gris-bord);box-shadow:0 12px 24px rgba(4,23,43,.08)}
  .mpf-nav.ouvert{display:flex}
  .mpf-nav a{padding:.85rem var(--mpf-gouttiere);font-size:.95rem}
  .mpf-burger{display:block;order:3}
  .mpf-header-cta{order:2;padding:0 1rem}
  .mpf-header-cta span{display:none}
  .mpf-grille-3,.mpf-etapes,.mpf-deux-cols,.mpf-footer-grille{grid-template-columns:1fr}
  .mpf-chiffres ul{grid-template-columns:1fr 1fr}
  .mpf-hero-fond{width:100%;opacity:.28}
  .mpf-hero-fond::after{background:linear-gradient(180deg,rgba(4,23,43,.8),rgba(4,23,43,.95))}
}
/* Police du systeme agrandie : c'est l'en-tete qui casse en premier, parce
   que logo + burger + bouton se disputent une largeur fixe. Chaque piece doit
   pouvoir maigrir. */
@media (max-width:700px){
  .mpf-header-inner{gap:.4rem}
  .mpf-logo{font-size:.92rem;min-width:0}
  .mpf-logo>span{overflow:hidden;text-overflow:ellipsis}
  .mpf-logo svg{width:26px;height:26px}
  .mpf-header-cta{padding:0 .85rem}
  .mpf-header-cta strong{font-size:.78rem}
  .mpf-burger svg{width:26px;height:26px}
}
@media (max-width:430px){
  /* Sous cette largeur, le libelle du bouton ne tient plus : on garde l'action
     (le bouton reste, au meme endroit) et on laisse tomber le mot. */
  .mpf-header-cta strong{font-size:0;position:relative}
  .mpf-header-cta strong::after{content:"Devis";font-size:.8rem}
  .mpf-header-inner{padding-left:12px;padding-right:0}
  .mpf-burger{padding:.2rem;margin-right:6px}
  .mpf-header-cta{padding:0 .7rem}
}

@media (max-width:640px){
  /* Une mesure par ligne : un libelle d'un seul mot ne peut pas se replier,
     il finirait tronque des que la police du telephone est agrandie. */
  .mpf-chiffres ul{grid-template-columns:1fr;gap:1rem}
  .mpf-atouts{flex-direction:column;gap:.7rem}
  .mpf-communes{grid-template-columns:1fr}
  .mpf-form-grille{grid-template-columns:1fr}
  .mpf-fiche-ligne{font-size:.88rem}
  .mpf-footer-bas{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
