/* CSS commun du site effetcumulatif.com — un seul fichier pour toutes les pages.
   Les blocs propres à une page vivent dans un fichier .css à côté de la page. */
@font-face{
  font-family:'Almarena Neue';
  src:url('fonts/AlmarenaNeue-Medium.woff2') format('woff2'),url('fonts/AlmarenaNeue-Medium.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Almarena Neue Display';
  src:url('fonts/AlmarenaNeue-Ds-Medium.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ── Jetons du site (pages de services) ── */
:root{
  --vert:#073032;        /* texte + fonds sombres */
  --orange:#F7613B;      /* titres de section + accents */
  --creme:#FEFAF7;       /* fond principal du site */
  --bleu-pale:#EDF5F7;   /* bandes claires */
  --blanc:#FFFFFF;
  --gris:#5b7375;
  --max:1160px;
  --pad:clamp(1.25rem,5vw,3rem);
  --rule:rgba(7,48,50,.14);
  --rule-clair:rgba(255,255,255,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:6rem}
body{
  font-family:'Almarena Neue','Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--vert);
  background:var(--creme);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}

/* ── Typographie : la hiérarchie des pages de services ── */
h1,h2,h3{font-family:'Almarena Neue','Helvetica Neue',Arial,sans-serif;font-weight:400}
.titre-geant{ /* le grand énoncé sombre, comme « Complices et partenaires… » */
  font-size:clamp(2.5rem,6vw,5.625rem);line-height:1;letter-spacing:-.02em;color:var(--vert);
  max-width:18ch;
}
.titre-section{ /* le titre orange de section, avec le filet à gauche */
  color:var(--orange);font-size:clamp(1.8rem,3vw,2.8125rem);line-height:1.05;letter-spacing:-.012em;
  position:relative;
}
.titre-section::before{
  content:"";position:absolute;right:100%;top:.62em;height:1.5px;width:50vw;
  background:var(--orange);margin-right:1.25rem;opacity:.85;
}
h2.sous-titre{font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:1.2;letter-spacing:-.012em;color:var(--vert)}
h3{font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.3;color:var(--vert)}
.accent{color:var(--orange)}
p.intro{font-size:20px;line-height:1.2;max-width:58ch}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(3.5rem,7vw,6rem)}

/* ── En-tête : réplique du site ── */
.entete{
  background:var(--blanc);position:sticky;top:0;z-index:80;
  border-bottom:1px solid rgba(7,48,50,.08);
}
.entete .wrap{max-width:none;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:19px;padding-inline:clamp(1.25rem,2.9vw,50px)}
.logo-lien{display:block}
.logo-lien svg{width:227px;max-width:46vw;height:auto;display:block;fill:var(--vert)}
.nav-bureau{display:none;align-items:center;gap:2.4rem}
.nav-bureau > div{position:relative}
.nav-declencheur{
  font-size:15px;line-height:20px;letter-spacing:normal;text-transform:uppercase;
  color:var(--vert);text-decoration:none;cursor:pointer;
  display:flex;align-items:center;gap:.4rem;padding-block:1.25rem;
  background:none;border:0;border-bottom:2px solid transparent;font-family:inherit;
}
.nav-declencheur::after{content:"";width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5.5px solid currentColor}
.nav-bureau > div:hover .nav-declencheur,
.nav-bureau > div:focus-within .nav-declencheur{border-bottom-color:var(--orange)}
.sous-menu{
  position:absolute;top:100%;left:0;
  background:var(--vert);min-width:max-content;
  box-shadow:0 22px 40px rgba(7,48,50,.28);border-radius:0;
  padding:10px 30px 10px 20px;display:none;
}
.nav-bureau > div:hover .sous-menu,
.nav-bureau > div:focus-within .sous-menu{display:block}
.sous-menu a{
  display:block;padding:10px 0;text-decoration:none;
  font-size:16px;line-height:20px;letter-spacing:normal;text-transform:uppercase;
  color:var(--orange);white-space:nowrap;
}
.sous-menu a:hover{color:var(--blanc)}
.sous-menu a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}
.btn-entete{
  background:var(--vert);color:var(--blanc);text-decoration:none;
  font-size:18px;line-height:18px;letter-spacing:normal;text-transform:uppercase;
  border-radius:25px;padding:10px 20px;white-space:nowrap;
  transition:background .16s ease;
}
.btn-entete:hover{background:#0d4447}

/* Menu mobile */
.nav-mobile{position:relative}
.nav-mobile > summary{
  list-style:none;cursor:pointer;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.6rem .9rem;border:1px solid var(--rule);border-radius:25px;
}
.nav-mobile > summary::-webkit-details-marker{display:none}
.nav-mobile[open] > summary{background:var(--bleu-pale)}
.panneau-mobile{
  position:absolute;right:0;top:calc(100% + .6rem);z-index:90;
  background:var(--blanc);min-width:265px;border-radius:4px;
  box-shadow:0 18px 44px rgba(7,48,50,.18);padding:1rem 0;
}
.panneau-mobile p{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding:.65rem 1.4rem .2rem}
.panneau-mobile a{display:block;padding:.5rem 1.4rem;text-decoration:none;font-size:.95rem}
.panneau-mobile a:hover{background:var(--bleu-pale)}
@media (min-width:1024px){
  .nav-bureau{display:flex}
  .nav-mobile{display:none}
}

/* ── Héros : grand énoncé sur le dégradé du site ── */
.heros{
  background:var(--creme) url('https://www.effetcumulatif.com/wp-content/uploads/2024/10/degrade-haut-scaled.jpg') no-repeat 50% 0 / cover;
  padding-block:clamp(4rem,9vw,8rem) clamp(3rem,6vw,5rem);
}
.heros .titre-geant em{font-style:normal;color:var(--vert);border-bottom:3px solid var(--orange)}
.heros .apercu{margin-top:2rem;font-size:20px;max-width:52ch;line-height:1.2}

/* ── Bloc titre orange + intro (le patron des pages de services) ── */
.presentation{padding-top:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.presentation .wrap{position:relative;z-index:1}
.filigrane-wp{
  position:absolute;top:10%;bottom:0;height:80%;width:auto;
  right:clamp(0px,3vw,70px);fill:var(--vert);opacity:.08;pointer-events:none;
}
@media (max-width:860px){.filigrane-wp{height:auto;width:230px;top:50%;bottom:auto;transform:translateY(-50%);right:-80px;opacity:.06}}
.presentation .titre-section{max-width:22ch}
.presentation p{margin-top:1.35rem;max-width:60ch}
.presentation p strong{font-weight:400}
.coordonnees-rapides{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}

/* ── Boutons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--vert);color:var(--blanc);text-decoration:none;
  border-radius:25px;padding:12px 24px;font-size:18px;letter-spacing:normal;text-transform:uppercase;
  border:1.5px solid transparent;transition:background .16s ease;
}
.btn:hover{background:#0d4447}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn svg{width:17px;height:17px;fill:currentColor;flex:none}
.btn-contour{background:transparent;color:var(--vert);border-color:var(--vert)}
.btn-contour:hover{background:rgba(7,48,50,.06)}
.sur-sombre .btn{background:var(--orange);color:#fff}
.sur-sombre .btn:hover{background:#e5522d}
.sur-sombre .btn-contour{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.55)}
.sur-sombre .btn-contour:hover{background:rgba(255,255,255,.08)}
.note-cta{font-size:.9rem;color:var(--gris);margin-top:.9rem}

/* ── Chiffres de preuve ── */
.preuve{background:var(--bleu-pale);padding-block:clamp(2.5rem,4.5vw,3.5rem)}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem clamp(1.5rem,4vw,3rem)}
.chiffre .n{font-size:clamp(2.1rem,3.8vw,3rem);line-height:1;color:var(--vert);letter-spacing:-.02em;display:block}
.chiffre p{font-size:.95rem;color:var(--gris);margin-top:.5rem;line-height:1.4}

/* ── Grille des pannes ── */
.pannes{margin-top:clamp(2.25rem,4.5vw,3.25rem);border-top:1px solid var(--rule)}
.panne-item{padding-block:1.8rem;border-bottom:1px solid var(--rule)}
.panne-item p{color:var(--gris);margin-top:.5rem;max-width:60ch}
.panne-item p strong{color:var(--vert);font-weight:400}
@media (min-width:860px){
  .pannes{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2rem,4vw,3.5rem)}
}

/* ── Étapes ── */
.etapes{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(2.25rem,4.5vw,3.25rem);border-top:1px solid var(--rule)}
.etape{padding-block:2rem;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:auto 1fr;gap:1.25rem 1.6rem;align-items:start}
.etape .num{color:var(--orange);font-size:1rem;padding-top:.25rem}
.etape p{color:var(--gris);margin-top:.55rem;max-width:60ch}
.etape p strong{color:var(--vert);font-weight:400}
@media (min-width:860px){
  .etapes{grid-template-columns:repeat(3,1fr);gap:0 clamp(1.5rem,3vw,2.5rem);border-top:none}
  .etape{border-top:1px solid var(--rule);border-bottom:none;grid-template-columns:1fr;gap:.9rem;padding-block:1.8rem}
}

/* ── Prix (bloc sombre, comme le pied du site) ── */
.prix{background:var(--vert);color:var(--blanc)}
.prix .titre-section::before{opacity:.65}
.prix .intro{color:rgba(237,245,247,.78)}
.prix .intro strong{color:var(--blanc);font-weight:400}
.matrice{margin-top:clamp(2.25rem,4.5vw,3.25rem);border-top:1px solid var(--rule-clair)}
.matrice-entete{
  display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1rem;padding-block:1rem;
  border-bottom:1px solid var(--rule-clair);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,245,247,.62);
}
.matrice-entete span:not(:first-child){text-align:right}
.ligne{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1rem;padding-block:1.75rem;border-bottom:1px solid var(--rule-clair);align-items:center}
.ligne .quoi h3{color:var(--blanc)}
.ligne .quoi p{font-size:.92rem;color:rgba(237,245,247,.62);margin-top:.45rem;max-width:34ch;line-height:1.45}
.ligne .montant{text-align:right;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1}
.ligne .montant.urgent{color:var(--orange)}
.ligne .montant small{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(237,245,247,.5);margin-top:.5rem}
.note-prix{margin-top:1.5rem;font-size:.9rem;color:rgba(237,245,247,.6)}
.prix .actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.9rem 1rem}

/* ── Garantie ── */
.garantie{background:var(--bleu-pale)}
.garantie-boite{
  background:var(--blanc);border-radius:3px;border-left:3px solid var(--orange);
  padding:clamp(1.9rem,3.8vw,3rem);max-width:74ch;
}
.garantie-boite h2{margin-bottom:1.35rem}
.garantie-boite p{color:var(--gris);margin-bottom:1rem}
.garantie-boite p:last-child{margin-bottom:0}
.garantie-boite strong{color:var(--vert);font-weight:400}

/* ── Région ── */
.region .colonnes{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem);align-items:start}
@media (min-width:900px){.region .colonnes{grid-template-columns:1.2fr .8fr}}
.region p{color:var(--gris);margin-bottom:1rem;max-width:60ch}
.region p strong{color:var(--vert);font-weight:400}
.villes{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem}
.villes li{border:1px solid var(--rule);border-radius:25px;padding:.4rem 1rem;font-size:.92rem;color:var(--gris);background:var(--blanc)}
.villes li.ici{background:var(--vert);color:var(--blanc);border-color:transparent}
.portrait{max-width:320px}
.portrait img{border-radius:3px}
.portrait figcaption{margin-top:.8rem;font-size:.9rem;color:var(--gris)}
.portrait figcaption b{font-weight:400;color:var(--vert);display:block}

/* ── Témoignages ── */
.temoignages{background:var(--bleu-pale)}
.avis{display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(2.25rem,4.5vw,3.25rem);border-top:1px solid var(--rule)}
.avis blockquote{padding-block:2rem;border-bottom:1px solid var(--rule)}
.avis .panne{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.9rem;line-height:1.5}
.avis p{color:var(--vert);font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.55;max-width:68ch}
.avis footer{margin-top:.9rem;font-size:.9rem;color:var(--gris)}

/* ── FAQ ── */
.faq{margin-top:clamp(2rem,4vw,2.75rem)}
.faq details{border-bottom:1px solid var(--rule);padding-block:1.3rem}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;font-size:clamp(1rem,1.3vw,1.15rem);
  display:flex;justify-content:space-between;gap:1.5rem;align-items:start;line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:1.4rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--gris);margin-top:.9rem;max-width:66ch}

/* ── CTA final (bloc sombre) ── */
.final{background:var(--vert);color:var(--blanc)}
.final h2{color:var(--blanc);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.12;letter-spacing:-.015em;max-width:24ch}
.final p{margin-top:1.25rem;max-width:56ch;color:rgba(237,245,247,.78)}
.final .actions{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.9rem 1rem}
.final .rappel{margin-top:1.4rem;font-size:.92rem;color:rgba(237,245,247,.6)}
.final .rappel a{color:var(--blanc)}

/* ── Pied : réplique du site ── */
.pied{background:var(--vert);color:#EDF5F7;padding-block:clamp(3rem,6vw,4.5rem) 2rem;font-size:20px;line-height:30px}
.pied .wrap{max-width:none;padding-inline:clamp(1.25rem,5vw,86px)}
.pied .grille{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule-clair);border-bottom:1px solid var(--rule-clair)}
.pied .cellule{padding:1.75rem 0;border-bottom:1px solid var(--rule-clair)}
.pied .cellule:last-child{border-bottom:0}
.pied svg{width:235px;max-width:60vw;height:auto;fill:var(--blanc)}
.pied h4{font-size:20px;line-height:20px;letter-spacing:normal;text-transform:uppercase;font-weight:400;color:#EDF5F7;margin-bottom:1.25rem}
.pied a{color:#EDF5F7;text-decoration:underline;text-underline-offset:2px}
.pied ul{list-style:none}
.pied li{margin-bottom:.4rem}
.pied .cellule p,.pied .cellule ul{font-size:17px;line-height:26px}
.pied .cellule ul li{margin-bottom:.55rem}
.pied .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:1.5rem;font-size:14px;line-height:21px;color:#71898A}
.pied .legal a{color:#71898A}
.pied .sociaux{display:flex;gap:1.15rem;margin-top:2rem}
.pied .sociaux a{display:block}
.pied .sociaux svg{width:26px;height:26px;fill:#EDF5F7}
@media (min-width:700px){
  .pied .grille{grid-template-columns:1fr 1fr}
  .pied .cellule{padding:2rem;border-right:1px solid var(--rule-clair)}
  .pied .cellule:nth-child(odd){padding-left:0}
  .pied .cellule:nth-child(even){border-right:0;padding-right:0}
  .pied .cellule:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1200px){
  .pied .grille{grid-template-columns:.85fr 1.15fr 1.05fr 1.25fr}
  .pied .cellule{padding:2rem;border-bottom:0;border-right:1px solid var(--rule-clair)}
  .pied .cellule:nth-child(odd){padding-left:2rem}
  .pied .cellule:nth-child(even){border-right:1px solid var(--rule-clair);padding-right:2rem}
  .pied .cellule:first-child{padding-left:0}
  .pied .cellule:last-child{border-right:0;padding-right:0}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── Bandeau de consentement aux témoins (Loi 25, art. 8.1) ── */
.temoins{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--vert);color:var(--blanc);box-shadow:0 -8px 30px rgba(7,48,50,.25)}
.temoins[hidden]{display:none}
.temoins-boite{padding-block:1.15rem 1.25rem;display:grid;gap:1rem;align-items:center}
@media (min-width:900px){.temoins-boite{grid-template-columns:1.35fr auto;gap:2rem}}
.temoins-texte{margin:0;font-size:.95rem;line-height:1.5;color:rgba(237,245,247,.85);max-width:62ch}
.temoins-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem .9rem}
.temoins-actions .btn-contour{border-color:rgba(255,255,255,.5);color:var(--blanc)}
.temoins-actions .btn-contour:hover{background:var(--blanc);color:var(--vert)}
.temoins-lien{color:rgba(237,245,247,.7);font-size:.88rem}
.temoins-lien:hover{color:var(--blanc)}
.temoins-actions .btn:not(.btn-contour){background:var(--blanc);color:var(--vert);border-color:var(--blanc)}
.temoins-actions .btn:not(.btn-contour):hover{background:var(--orange);color:var(--blanc);border-color:var(--orange)}