/* ==========================================================================
   Polices hébergées par M2KS — aucun appel à un service tiers
   ========================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}

/* ==========================================================================
   M2KS — feuille de style unique du site
   Grammaire de couleurs reprise du site en ligne (09/2026) :
   bleu #0A6CCF dominant (titres, liens, hero en dégradé vers #08386B),
   vert #69BE28 pour les accroches, boutons et bords de cartes,
   orange #F39200 en touche rare (cibles), blanc et bleu très pâle en fonds.
   Archivo (titres) · Inter (texte). Thème clair uniquement.
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */

html{color-scheme:light}
:root{
  --white:#FFFFFF;
  --soft:#F3F8FB;
  --soft-2:#E6F0F7;
  --ink:#1F2D35;
  --ink-2:#3B4A55;
  --muted:#62717A;
  --line:#DCE7EE;
  --line-strong:#C3D3DE;

  --blue:#0A6CCF;
  --blue-2:#08386B;
  --blue-soft:#E4F0FB;
  --green:#69BE28;
  --green-2:#457F19;
  --green-soft:#EEF8E4;
  --green-light:#9BE35A;   /* sur le bleu marine du pied de page : 7,6:1 */
  --green-clair-bleu:#C7FF94;  /* sur les degrades bleus du hero et du bandeau : 4,6 a 5,2:1 */
  --orange:#F39200;
  --orange-texte:#9E5D00;
  --orange-soft:#FDF0DC;

  --focus:#0A6CCF;
  --logo-light:block;
  --logo-dark:none;

  --f-display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --f-body:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-mono:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --gutter:20px;
  --maxw:1180px;
  --radius:22px;
  --radius-s:14px;
  --shadow:0 30px 70px -20px rgba(7,29,48,.28), 0 8px 24px -8px rgba(7,29,48,.10);
  --shadow-s:0 12px 32px -14px rgba(7,29,48,.18);
  --shadow-hover:0 40px 80px -24px rgba(7,29,48,.32);
  /* Bouton principal : le vert le plus clair qui garde 4,5:1 avec du blanc. */
  --grad-green:linear-gradient(135deg,#457F19 0%,#3C7215 100%);
  --grad-blue-soft:linear-gradient(180deg,#F3F8FB 0%,#FFFFFF 100%);
  --rule:1px solid var(--line);
  --hero-grad:linear-gradient(135deg,#0A6CCF 0%,#0B4F9E 55%,#08386B 100%);
}

/* --- 2. Base ------------------------------------------------------------- */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.12;
  text-wrap:balance;
  margin:0;
}

p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}

a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;padding:10px 14px;
  font-size:13px;border-radius:8px;
}
.skip:focus{left:8px;top:8px}

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

/* --- 3. Étiquettes ------------------------------------------------------- */

.label{
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--green-2);
}
.label--blue{color:var(--blue)}
.label--orange{color:var(--orange-texte)}
.label--green{color:var(--green-2)}

/* --- 4. En-tête ---------------------------------------------------------- */

.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:var(--rule);
}
.head-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:84px;
}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-mark{height:50px;width:auto}
.brand-text{display:block;line-height:1}
.brand-text b{
  display:block;font-family:var(--f-display);font-weight:800;font-size:27px;
  letter-spacing:-.02em;color:var(--ink);line-height:1;
}
.brand-text small{
  display:block;margin-top:5px;font-size:10.5px;font-weight:600;
  letter-spacing:.115em;text-transform:uppercase;color:var(--blue);white-space:nowrap;
}
@media (max-width:899px){
  .brand-mark{height:40px}
  .brand-text b{font-size:23px}
  .brand-text small{font-size:9px;letter-spacing:.09em}
}
@media (max-width:520px){
  .brand{gap:10px}
  .brand-mark{height:38px}
  .brand-text b{font-size:21px}
  .brand-text small{font-size:8.5px;letter-spacing:.07em}
  /* La ligne passe a la ligne : la hauteur minimale ne centre plus rien et le
     logo se collait au bord haut. On redonne la respiration explicitement. */
  .head-row{flex-wrap:wrap;padding-top:14px;padding-bottom:2px}
  .head-tel{width:100%;text-align:center;margin-top:10px;padding-block:10px}
}

/* Les six liens depassent la largeur d'un telephone. Ils passent donc sur deux
   lignes : l'ordre du site est conserve et aucun lien n'est hors ecran. */
.nav-mobile{
  display:flex;flex-wrap:wrap;column-gap:18px;row-gap:6px;
  border-top:var(--rule);padding-block:7px;
}
.nav-mobile a{
  font-size:13px;font-weight:600;color:var(--blue);white-space:nowrap;
}
.nav-mobile a[aria-current="page"]{color:var(--green-2)}
@media (min-width:900px){.nav-mobile{display:none}}

.nav{display:none;gap:20px;align-items:center}
@media (min-width:900px){.nav{display:flex}}
.nav a,.nav-group > button{white-space:nowrap;
  all:unset;cursor:pointer;font:inherit;
  font-size:15px;font-weight:600;color:var(--blue);
  padding-block:6px;border-bottom:2px solid transparent;
  display:inline-flex;gap:6px;align-items:center;
}
.nav a:hover,.nav-group:hover > button,.nav-group:focus-within > button,.nav-group.is-open > button{color:var(--blue-2)}
.nav a[aria-current="page"]{color:var(--green-2);border-bottom-color:var(--green)}
.nav-group{position:relative}
.nav-group > button::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.nav-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:-16px;min-width:270px;
  background:var(--white);border:var(--rule);border-radius:var(--radius-s);
  box-shadow:var(--shadow);padding:10px 0;z-index:110;
}
.nav-group--cibles .nav-menu{min-width:320px;columns:2;column-gap:0}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu,.nav-group.is-open .nav-menu{display:block}
.nav-menu a{
  display:block;padding:8px 18px;font-size:14px;font-weight:500;color:var(--ink-2);
  border-bottom:0;break-inside:avoid;
}
.nav-menu a:hover{color:var(--blue);background:var(--soft)}
.nav-menu-all{margin-top:6px;padding-top:12px !important;border-top:1px solid var(--line);color:var(--green-2) !important;font-weight:700 !important}

.head-tel{
  font-size:14.5px;font-weight:700;color:#fff;white-space:nowrap;
  background:var(--green-2);padding:10px 16px;border-radius:999px;
  transition:background .18s ease;
}
.head-tel:hover{background:var(--blue)}

/* --- 5. Hero ------------------------------------------------------------- */

.hero{
  position:relative;overflow:hidden;
  background:var(--hero-grad);
  color:#fff;
  padding-block:clamp(36px,8vw,104px) clamp(96px,15vw,210px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(700px 420px at 85% 10%,rgba(105,190,40,.22),transparent 60%),
    radial-gradient(600px 400px at 10% 100%,rgba(255,255,255,.10),transparent 60%);
}
.hero::after{
  content:"";position:absolute;right:-6%;bottom:-18%;width:min(56vw,620px);aspect-ratio:1;
  pointer-events:none;opacity:.07;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23fff' stroke-width='18'%3E%3Cg transform='rotate(45 200 200)'%3E%3Crect x='40' y='40' width='150' height='150' rx='26'/%3E%3Crect x='210' y='40' width='150' height='150' rx='26'/%3E%3Crect x='40' y='210' width='150' height='150' rx='26'/%3E%3Crect x='210' y='210' width='150' height='150' rx='26'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.hero > .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:36px;align-items:center}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px}
}
.hero .label{color:var(--green-clair-bleu);font-size:12.5px}
.hero h1{font-size:clamp(31px,5.8vw,66px);font-weight:800;margin-block:16px 0;color:#fff;letter-spacing:-.03em;line-height:1.06}
/* Sous 380 px le titre repassait sur quatre lignes et renvoyait les boutons
   sous la ligne de flottaison : un cran de moins suffit a revenir a trois. */
@media (max-width:380px){.hero h1{font-size:29px}}
.hero .lede{color:#DCE9F7;font-size:clamp(16px,1.6vw,18.5px);max-width:56ch;margin-top:20px}
.hero .lede--strong{color:#fff;font-weight:600;font-size:clamp(18px,1.9vw,21px);margin-top:18px}
.hero .btn--line{color:#fff;border-color:rgba(255,255,255,.55);backdrop-filter:blur(6px)}
.hero .btn--line:hover{background:#fff;color:var(--blue-2);border-color:#fff}

.hero-side{display:flex;flex-direction:column;gap:14px;position:relative}
.hero-card{
  position:relative;background:var(--white);color:var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:visible;
}
.hero-card .shot{border:0;border-radius:var(--radius) var(--radius) 0 0;box-shadow:none}
.hero-card .shot img{aspect-ratio:16/10}
.hero-card .shot figcaption{display:none}
.hero-card-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px}
.hero-card-body h3,.hero-card-body .carte-titre{font-size:21px;color:var(--blue-2);font-weight:700;letter-spacing:-.01em}
.hero-card-body .checks li{font-size:15px}
.hero-card-body a.more{font-weight:700;color:var(--green-2);font-size:15px}
.hero-card-body a.more:hover{color:var(--blue)}
.hero-chips{position:absolute;top:16px;left:16px;display:flex;gap:8px;z-index:3;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  font-size:12.5px;font-weight:700;color:var(--blue-2);box-shadow:var(--shadow-s);
}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}
@media (max-width:600px){.hero-chips .chip:nth-child(n+3){display:none}}

.hero .note{
  background:rgba(255,255,255,.96);color:var(--ink-2);border-left:0;
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;
}
.hero .note b{color:var(--blue-2)}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* preuves en ligne fine, dans le hero */
.hero-proofs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;
  margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22);
  max-width:620px;
}
@media (min-width:620px){.hero-proofs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-proofs li{display:flex;flex-direction:column;gap:2px}
.hero-proofs b{
  font-family:var(--f-display);font-weight:800;font-size:17px;color:#fff;letter-spacing:-.02em;
  display:flex;align-items:center;gap:7px;
}
.hero-proofs b::before{
  content:"";width:17px;height:17px;flex-shrink:0;border-radius:50%;background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
.hero-proofs span{font-size:12.5px;color:#BCD3EC;line-height:1.35;padding-left:24px}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-body);font-size:15px;font-weight:700;
  padding:15px 26px;border:2px solid transparent;border-radius:999px;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--hot{background:var(--grad-green);color:#fff;border-color:transparent;box-shadow:0 12px 28px -10px rgba(60,114,21,.55)}
.btn--hot:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(60,114,21,.65)}
.btn--line{background:transparent;color:var(--blue);border-color:var(--blue)}
.btn--line:hover{background:var(--blue);color:#fff}
.btn .arrow{font-size:14px}

/* hero centré (variante A) */
.hero--centre .hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center;gap:0}
.hero--centre h1{max-width:19ch;margin-inline:auto}
.hero--centre .lede{margin-inline:auto}
.hero--centre .cta-row{justify-content:center}
.hero--centre .hero-proofs{
  grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto;
  justify-items:center;text-align:left;
}
@media (min-width:700px){.hero--centre .hero-proofs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hero-familles{
  display:grid;gap:18px 30px;margin-top:38px;padding-top:30px;
  border-top:1px solid rgba(255,255,255,.22);max-width:940px;width:100%;text-align:left;
}
@media (min-width:760px){.hero-familles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.hero-familles li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.hero-familles li::before{
  content:"";width:10px;height:10px;border-radius:50%;margin-top:8px;background:var(--fam-dot,var(--green));
}
.hero-familles .f-pro{--fam-dot:var(--orange)}
.hero-familles .f-patrimoine{--fam-dot:#7FB6F2}
.hero-familles .f-particulier{--fam-dot:var(--green-light)}
.hero-familles b{display:block;color:#fff;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.hero-familles span{display:block;font-size:13.5px;color:#BCD3EC;line-height:1.45}

/* --- 6. Bandeau relevé (preuves) — carte flottante sous le hero ---------- */

.releve{background:transparent;border:0;position:relative;z-index:2;padding-block:clamp(36px,4.5vw,56px) 0}
.releve-inner{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:2px solid var(--green);
}
@media (min-width:760px){.releve-inner{grid-template-columns:repeat(4,minmax(0,1fr))}}
.releve-item{
  padding:22px 24px 8px 0;display:grid;grid-template-columns:1fr;gap:6px;
  position:relative;
}
.releve-item::before{
  content:"";width:36px;height:36px;border-radius:12px;background:var(--green-soft);margin-bottom:8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F9C1E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:19px;background-position:center;background-repeat:no-repeat;
}

.releve-item b{
  font-family:var(--f-display);font-weight:800;font-size:23px;
  letter-spacing:-.03em;color:var(--blue);line-height:1.1;font-variant-numeric:tabular-nums;
}
.releve-item span{font-size:14px;color:var(--muted);line-height:1.45}

/* --- 7. Sections --------------------------------------------------------- */

.sec{padding-block:clamp(64px,8vw,112px)}
.sec--surface{background:var(--soft)}

.sec-head{margin-bottom:10px}
.sec-head::after{display:none}
.sec-title{display:grid;gap:14px;margin-bottom:44px;max-width:68ch}
.sec-title h2,.duo-text h2,.contact-grid h2{
  font-size:clamp(30px,4vw,46px);font-weight:800;color:var(--blue-2);letter-spacing:-.03em;line-height:1.08;
}
.sec-title h2 em,.duo-text h2 em{font-style:normal;color:var(--blue)}
.sec-title p{color:var(--ink-2);font-size:17px}

/* --- 8. Les trois portes — cartes flottantes sur le hero ---------------- */

.sec--portes{
  padding-block:0 clamp(52px,6vw,84px);
  margin-top:clamp(-170px,-13vw,-110px);
  position:relative;z-index:3;
}

.portes{display:grid;gap:20px}
@media (min-width:860px){.portes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.porte{
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
  border-left:5px solid var(--green);
  padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.porte:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.porte-num{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.porte h3,.porte h2{font-size:22px;color:var(--blue-2)}
.porte p{color:var(--ink-2);font-size:15.5px;flex:1}
.porte a{
  font-weight:700;font-size:15px;color:var(--green-2);align-self:flex-start;
}
.porte a::after{content:" →"}
.porte a:hover{color:var(--blue)}

/* --- 9. Métiers — cartes premium à icônes ------------------------------- */

.metiers{display:grid;gap:22px}
@media (min-width:640px){.metiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.metiers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.metier{
  position:relative;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-s);
  padding:0 28px 30px;display:flex;flex-direction:column;gap:12px;
  border:1px solid transparent;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.metier-photo{
  position:relative;margin:0 -28px 22px;aspect-ratio:16/10;overflow:hidden;background:var(--soft-2);
}
.metier-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.metier:hover .metier-photo img{transform:scale(1.05)}
.metier-photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(8,56,107,.35))}
.metier-photo .shot-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);text-align:center;padding:16px}
.metier-photo.is-missing img{display:none}
.metier::after{
  content:"";position:absolute;right:0;bottom:0;transform:translate(30%,50%);
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,var(--blue-soft),transparent 70%);opacity:0;transition:opacity .25s ease;
}
.metier:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--line)}
.metier:hover::after{opacity:1}
.metier h3{font-size:22px;color:var(--blue-2);letter-spacing:-.02em;position:relative}
.metier p{color:var(--ink-2);font-size:15.5px;flex:1;position:relative}
.metier-go{font-weight:700;color:var(--blue);font-size:15px;display:inline-flex;gap:8px;align-items:center;position:relative}
.metier-go::after{content:"→";transition:transform .2s ease}
.metier:hover .metier-go::after{transform:translateX(4px)}

/* --- 9b. Cibles (axe 2) ------------------------------------------------- */

.cibles{display:grid;gap:18px}
@media (min-width:640px){.cibles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.cibles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sec .cibles{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
@media (min-width:960px){#exploitation .cibles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cible{
  position:relative;background:var(--white);border-radius:var(--radius-s);box-shadow:var(--shadow-s);
  padding:26px 22px 24px;display:flex;flex-direction:column;gap:10px;
  transition:transform .2s ease,box-shadow .2s ease;overflow:hidden;
}
.cible::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--fam,linear-gradient(90deg,var(--orange),#FFB547))}
.cible--pro{--fam:linear-gradient(90deg,var(--orange),#FFB547);--fam-soft:var(--orange-soft);--fam-ink:var(--orange)}
.cible--patrimoine{--fam:linear-gradient(90deg,var(--blue),#4A9BEA);--fam-soft:var(--blue-soft);--fam-ink:var(--blue)}
.cible--particulier{--fam:linear-gradient(90deg,var(--green-2),var(--green));--fam-soft:var(--green-soft);--fam-ink:var(--green-2)}
.cible-legend{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:22px;font-size:13.5px;color:var(--ink-2);font-weight:600}
.cible-legend span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:8px;vertical-align:-1px;background:var(--fam)}
.cible:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.cible h3{font-size:17.5px;color:var(--blue-2);letter-spacing:-.01em}
.cible p{color:var(--ink-2);font-size:14px;flex:1}
.cible small{
  font-size:12.5px;color:var(--muted);line-height:1.5;
  padding-top:10px;border-top:1px solid var(--line);
}
.cible span{font-size:14px;font-weight:700;color:var(--green-2)}
.cible:hover span{color:var(--blue)}

/* --- 10. Piliers --------------------------------------------------------- */

.piliers{display:grid;gap:20px}
@media (min-width:800px){.piliers{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pilier{
  position:relative;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-s);
  padding:34px 30px 32px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
}
.pilier::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--blue),var(--green));
}
.pilier h3{font-size:21px;color:var(--blue-2)}
.pilier p{color:var(--ink-2);font-size:15.5px}

/* --- 11. Méthode / besoins ---------------------------------------------- */

.etapes{display:grid;gap:20px;list-style:none;padding:0;margin:0}
@media (min-width:760px){.etapes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.etape{
  position:relative;overflow:hidden;
  background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-s);
  padding:30px 28px 30px;display:flex;flex-direction:column;gap:10px;
}
.etape-kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2)}
.etape::after{content:attr(data-num);
  position:absolute;right:18px;top:6px;font-family:var(--f-display);font-weight:800;
  font-size:88px;line-height:1;letter-spacing:-.05em;color:var(--blue-soft);pointer-events:none;user-select:none;
}
.etape h3,.etape p{position:relative}
.etape h3{font-size:20px;color:var(--blue-2)}
.etape p{color:var(--ink-2);font-size:15px}

/* --- 12. Bloc à deux colonnes ------------------------------------------- */

.duo{display:grid;gap:30px}
@media (min-width:860px){
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
  .duo--wide-left{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
.duo-text{display:flex;flex-direction:column;gap:16px}
.duo-text p{color:var(--ink-2)}
.duo-text a{color:var(--blue);font-weight:600;border-bottom:1px solid currentColor}

.checks{display:flex;flex-direction:column;gap:10px}
.checks li{
  position:relative;padding-left:32px;
  font-size:15.5px;color:var(--ink-2);line-height:1.55;
}
.checks li::before{
  content:"";position:absolute;left:0;top:3px;
  width:20px;height:20px;border-radius:50%;background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hero .hero-card .label{color:var(--blue)}

/* coches colorées par famille, en écho à la section cibles */
.checks--familles li::before{background-color:var(--fam-dot,var(--green))}
.checks--familles .f-pro{--fam-dot:var(--orange)}
.checks--familles .f-patrimoine{--fam-dot:var(--blue)}
.checks--familles .f-particulier{--fam-dot:var(--green-2)}

/* --- 13. Visuels --------------------------------------------------------- */

.shot{position:relative;background:var(--soft-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;position:relative;z-index:1}
.shot figcaption{
  position:relative;z-index:2;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue-2);padding:10px 14px;background:var(--white);
}
.shot-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted);text-align:center;padding:16px;line-height:1.6;
}
.shot.is-missing img{display:none}

.gal{display:grid;gap:22px}
@media (min-width:700px){.gal{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gal .shot{border-radius:var(--radius);box-shadow:var(--shadow-s);transition:transform .25s ease,box-shadow .25s ease}
.gal .shot:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.gal .shot img{aspect-ratio:4/5;transition:transform .5s ease}
.gal .shot:hover img{transform:scale(1.04)}
.gal .shot figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(8,56,107,.85));color:#fff;
  font-size:13px;font-weight:600;letter-spacing:.03em;text-transform:none;
}

/* --- 14. Tableau d'informations ----------------------------------------- */

.infos{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-s);overflow:hidden;margin:0}
.infos-row{display:grid;gap:2px 24px;padding:16px 24px;border-bottom:var(--rule)}
.infos-row:last-child{border-bottom:0}
@media (min-width:700px){.infos-row{grid-template-columns:220px 1fr;align-items:baseline}}
.infos-row dt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.infos-row dd{margin:0;color:var(--ink-2);font-size:15px}

/* --- 15. Encart ---------------------------------------------------------- */

.note{
  border-left:5px solid var(--green);background:var(--green-soft);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  padding:16px 18px;font-size:15px;color:var(--ink-2);
}
.note b{color:var(--blue-2);font-weight:700}

/* --- 16. Bandeau de contact --------------------------------------------- */

.contact-band{position:relative;overflow:hidden;background:var(--hero-grad);color:#fff;padding-block:clamp(64px,8vw,104px)}
.contact-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 90% 0%,rgba(105,190,40,.22),transparent 60%);pointer-events:none}
.contact-band > .wrap{position:relative;z-index:1}
.contact-grid{display:grid;gap:24px}
@media (min-width:820px){
  .contact-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
}
.contact-band .label{color:var(--green-clair-bleu)}
.contact-grid h2{color:#fff}
.contact-grid p{color:#E4EEF9;margin-top:12px;max-width:52ch}
.contact-tel{
  font-family:var(--f-display);font-weight:800;font-size:clamp(28px,4vw,40px);
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;
}
.contact-tel:hover{color:var(--green-light)}
.contact-band .btn--hot{background:var(--green);color:var(--blue-2);border-color:var(--green)}
.contact-band .btn--hot:hover{background:#fff;border-color:#fff;color:var(--blue-2)}

/* --- 17. Pied de page ---------------------------------------------------- */

.site-foot{background:var(--blue-2);color:#D9E6F2;padding-block:44px 26px;font-size:14.5px}
.site-foot .brand-mark{height:44px}
.site-foot .brand-text b{color:#fff}
.site-foot .brand-text small{color:var(--green-light);white-space:nowrap;font-size:8.8px;letter-spacing:.05em}
.foot-grid{display:grid;gap:30px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px}}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h4,.foot-col .foot-titre{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-light);margin-bottom:4px}
.foot-col a,.foot-col p{color:#D9E6F2;font-size:14.5px}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-bottom{
  margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;
  font-size:12.5px;color:#A9BED2;
}
.foot-bottom a:hover{color:#fff}

/* --- 18. Fil d'Ariane ---------------------------------------------------- */

.crumb{padding-block:12px;border-bottom:var(--rule);font-size:13px;color:var(--muted);background:var(--white)}
.crumb a{color:var(--blue);font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb span{color:var(--ink-2)}

/* --- 19. FAQ ------------------------------------------------------------- */

.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--white);border-radius:var(--radius-s);box-shadow:var(--shadow-s);padding:0 22px}
.faq summary{
  cursor:pointer;list-style:none;padding-block:18px;
  font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--blue-2);
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--green-soft);color:var(--green-2);font-weight:700;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--blue)}
.faq-body{padding-bottom:18px;color:var(--ink-2);font-size:15px;max-width:70ch}

/* L'en-tête est collant : on réserve sa hauteur pour qu'une arrivée par ancre
   ne masque pas le titre de la section visée. */
#verifier,#demande{scroll-margin-top:0}
@media (max-width:899px){#verifier,#demande{scroll-margin-top:106px}}

/* ======= Carte des zones ======= */
.carte-bloc{display:grid;gap:22px;justify-items:center}
.carte-zones{width:100%;max-width:640px;height:auto;display:block}
.carte-zones .c-nom{
  font-family:var(--f-body);font-size:13px;font-weight:600;fill:var(--ink-2);
  paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;
}
.carte-zones .c-nom--lille{font-size:16px;font-weight:800;fill:var(--blue-2)}
.carte-zones .c-km{font-family:var(--f-body);font-size:11.5px;font-weight:600;fill:var(--muted);
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.carte-legende{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.carte-legende li{display:flex;align-items:center;gap:8px}
.pastille{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.pastille--1{background:#457F19}
.pastille--2{background:#0A6CCF}
.pastille--3{background:#F39200}
@media (max-width:560px){
  .carte-zones .c-nom{font-size:15px}
  .carte-zones .c-nom--lille{font-size:18px}
}

/* ======= Verificateur de commune ======= */
.verif{display:grid;gap:22px}
@media (min-width:860px){.verif{grid-template-columns:.85fr 1.15fr;align-items:start}}
.verif-saisie{
  background:var(--soft);border:var(--rule);border-radius:var(--radius-s);padding:20px 22px;
}
.verif-saisie label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.verif-duo{display:grid;grid-template-columns:110px 1fr;gap:10px}
.verif-duo input{
  font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:10px;background:#fff;color:var(--ink);min-width:0;
}
.verif-duo input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.verif-saisie select{
  width:100%;font:inherit;font-size:15.5px;padding:12px 14px;border:1px solid var(--line-strong);
  border-radius:10px;background:#fff;color:var(--ink);cursor:pointer;
}
.verif-saisie select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.verif-saisie small{display:block;margin-top:14px;font-size:13px;color:var(--ink-2);line-height:1.5}
.verif-reponse{
  background:#fff;border:var(--rule);border-left:5px solid var(--green-2);
  border-radius:var(--radius-s);padding:20px 22px;box-shadow:var(--shadow-s);
}
.verif-reponse h3{font-size:19px;color:var(--blue-2);margin:10px 0 8px}
.verif-reponse--repos{border-left-color:var(--line-strong);box-shadow:none;background:var(--soft)}
.verif-reponse--repos h3{margin-top:0}
.verif-paliers{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
.verif-paliers li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.verif-paliers li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--line-strong)}
.verif-paliers b{color:var(--ink)}
.verif-invite{font-size:14px;color:var(--muted);margin:0}
.verif-reponse p{color:var(--ink-2);font-size:15px;margin-bottom:10px}
.verif-attente{color:var(--ink-2);font-size:15px;margin:0}
.verif-etat{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;
}
.verif-etat--oui{background:var(--green-soft);color:#3C7215}
.verif-etat--projet{background:var(--orange-soft);color:var(--orange-texte)}
.verif-reponse--projet{border-left-color:var(--orange)}
.verif-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px}
.verif-tel{font-weight:600;font-size:14.5px;color:var(--blue)}

/* ======= Formulaire ======= */
.form-wrap{display:grid;gap:30px}
@media (min-width:920px){.form-wrap{grid-template-columns:1.35fr .9fr;align-items:start}}
.form{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-s);padding:clamp(22px,3vw,34px);display:grid;gap:18px}
.field{display:grid;gap:7px}
.field--duo{display:grid;gap:18px}
@media (min-width:620px){.field--duo{grid-template-columns:1fr 1fr}}
.field label{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15.5px;color:var(--ink);background:var(--white);
  border:1px solid var(--line-strong);border-radius:12px;padding:13px 14px;width:100%;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.field small{font-size:13px;color:var(--muted)}
.form .btn{justify-self:start}
.form-legal{font-size:13px;color:var(--muted);line-height:1.5}
.form-aside{display:grid;gap:16px}
.form-aside .note{margin:0}

/* ======= Prose (pages légales) ======= */
.prose{max-width:78ch;display:flex;flex-direction:column;gap:18px}
.prose h2{font-family:var(--f-display);font-weight:700;font-size:23px;color:var(--blue-2);letter-spacing:-.02em;margin-top:14px}
.prose h3{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--ink)}
.prose p,.prose li{color:var(--ink-2);font-size:15.5px;line-height:1.7}
.prose ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.prose a{color:var(--blue);font-weight:600;border-bottom:1px solid currentColor}

/* ======= Zones d'intervention ======= */
.zones{display:grid;gap:18px}
@media (min-width:700px){.zones{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.zones{grid-template-columns:repeat(3,minmax(0,1fr))}}
.zone{background:var(--white);border-radius:var(--radius-s);box-shadow:var(--shadow-s);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.zone h3,.zone h2{font-size:18px;color:var(--blue-2)}
.zone p{color:var(--ink-2);font-size:14.5px}
.zone ul{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--muted)}
.zone li::after{content:" ·";color:var(--line-strong)}
.zone li:last-child::after{content:""}

/* ======= Divers ======= */
.duo--wide-left{align-items:center}
@media (min-width:860px){.duo--wide-left{grid-template-columns:1.25fr .85fr}}
.duo--reverse .duo-text{order:2}
.sec-anchor{scroll-margin-top:90px}
.lien-metiers{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.lien-metiers a{
  font-size:14px;font-weight:600;color:#0963C0;background:var(--blue-soft);
  border-radius:999px;padding:8px 15px;transition:background .2s ease,color .2s ease;
}
.lien-metiers a:hover{background:var(--blue);color:#fff}

/* ======= Champ fichiers ======= */
.field input[type="file"]{
  font:inherit;font-size:14.5px;color:var(--ink-2);background:var(--soft);
  border:1px dashed var(--line-strong);border-radius:12px;padding:14px;width:100%;cursor:pointer;
}
.field input[type="file"]:hover{border-color:var(--blue);background:var(--blue-soft)}
.fichiers{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.fichiers span{
  font-size:13.5px;color:var(--ink-2);background:var(--green-soft);
  border-radius:9px;padding:8px 12px;display:flex;align-items:center;gap:12px;
}
/* le nom occupe la place libre : le poids et la croix restent groupes a droite */
.fichiers span > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fichier-retirer{
  all:unset;cursor:pointer;margin-left:10px;width:22px;height:22px;flex:0 0 22px;
  display:inline-grid;place-items:center;border-radius:50%;
  font-size:17px;line-height:1;color:var(--ink-2);background:rgba(7,29,48,.07);
}
.fichier-retirer:hover{background:#FDECEC;color:#9B2C2C}
.fichier-retirer:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fichier-note{color:var(--ink-2);font-size:12.5px;font-weight:500}
.fichiers b{color:#3C7215;font-weight:700;font-size:12.5px}   /* 5,31:1 sur le fond vert pâle */

/* ======= Consentement ======= */
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer}
.consent input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--line-strong);border-radius:7px;background:var(--white);
  cursor:pointer;transition:background .15s ease,border-color .15s ease;
}
.consent input[type="checkbox"]:checked{
  background:var(--green-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-color:var(--green-2);
}
.consent input[type="checkbox"]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.consent span{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.consent a{color:var(--blue);font-weight:600;border-bottom:1px solid currentColor}

/* ======= Messages de validation ======= */
.form-erreur{
  background:#FDECEC;border-left:4px solid #D14343;border-radius:10px;
  padding:13px 16px;font-size:14.5px;color:#8A2A2A;line-height:1.5;
}
.champ-msg{color:#C0392B;font-weight:600}
.champ-msg--info{color:var(--ink-2);font-weight:500;font-size:13.5px}
.champ-msg button{
  font:inherit;font-weight:700;color:var(--blue);background:none;border:0;
  padding:0;cursor:pointer;text-decoration:underline;
}
.field input:user-invalid{border-color:#D14343;box-shadow:0 0 0 3px rgba(209,67,67,.12)}

@media (min-width:900px) and (max-width:1120px){.nav{gap:14px}.nav a,.nav-group > button{font-size:14.5px}}