/* ============================================================
   TLA DÉMÉNAGEMENT — système de design
   Poppins · vert #61B22E · noir #1D1D1B
   Chaque composant fixe ses propres couleurs. Rien n'est hérité.
   ============================================================ */

:root{
  --noir:#1D1D1B;
  --noir-2:#262623;
  --noir-3:#33332F;
  --encre:#141412;

  --vert:#61B22E;
  --vert-clair:#7BD143;
  --vert-fonce:#4E9524;
  --vert-texte:#3B7A16;
  --vert-pale:#EFF8E8;

  --blanc:#FFFFFF;
  --gris-pale:#F5F4F0;
  --gris-2:#EBE9E3;
  --bordure:#E2E0D8;
  --bordure-n:#3B3B36;
  --texte:#1D1D1B;
  --texte-2:#56564F;
  --texte-n:#D6D4CC;
  --texte-n2:#9F9D95;

  --f:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1220px;
  --g:clamp(20px,5vw,60px);
  --r:12px;
  --rc:16px;
  --ease:cubic-bezier(.2,.75,.25,1);
}

@property --tour{syntax:'<angle>';initial-value:0deg;inherits:false}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--texte);
  font-family:var(--f);font-weight:400;font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
/* Aucun mauve nulle part : la couleur :visited du navigateur est neutralisée. */
a,a:link,a:visited,a:hover,a:focus,a:active{color:inherit;-webkit-tap-highlight-color:rgba(97,178,46,.2)}
/* Les boutons imposent leur couleur, quoi qu'il arrive. */
.btn-v,.btn-v:link,.btn-v:visited,.btn-v:hover{color:var(--noir)!important}
.btn-n,.btn-n:link,.btn-n:visited,.btn-n:hover{color:#FFFFFF!important}
.btn-b,.btn-b:link,.btn-b:visited{color:#FFFFFF!important}
.btn-b:hover{color:var(--vert-clair)!important}
.btn-c,.btn-c:link,.btn-c:visited{color:var(--texte)!important}
.btn-c:hover{color:var(--vert-texte)!important}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f);font-weight:700;line-height:1.08;
  letter-spacing:-.028em;color:var(--texte);text-wrap:balance}
p{margin:0 0 1.1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
:selection,::selection{background:var(--vert);color:#FFFFFF}
button,input,select,textarea{font-family:var(--f)}
/* Le thème parent peint tous les boutons en mauve (#605be5) au survol.
   On neutralise ici, à égalité de spécificité, avec !important. */
button,[type="submit"],[type="button"],[type="reset"],
button:hover,button:focus,button:active,
[type="submit"]:hover,[type="submit"]:focus,
[type="button"]:hover,[type="button"]:focus,
[type="reset"]:hover,[type="reset"]:focus{
  background-color:transparent;color:inherit;text-decoration:none;border-color:currentColor}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:4px}

/* ---------------- structure ---------------- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--g)}
.wrap-lg{max-width:1440px;margin:0 auto;padding-inline:var(--g)}
.sect{padding-block:clamp(60px,8vw,112px)}
.sect-s{padding-block:clamp(40px,5vw,68px)}

/* surfaces — chacune fixe TOUT explicitement */
.s-blanc{background:var(--blanc)}
.s-blanc h1,.s-blanc h2,.s-blanc h3,.s-blanc h4,.s-blanc p,.s-blanc li,.s-blanc td{color:var(--texte)}
.s-gris{background:var(--gris-pale)}
.s-gris h1,.s-gris h2,.s-gris h3,.s-gris h4,.s-gris p,.s-gris li,.s-gris td{color:var(--texte)}
.s-noir{background:var(--noir)}
.s-noir h1,.s-noir h2,.s-noir h3,.s-noir h4{color:var(--blanc)}
.s-noir p,.s-noir li{color:var(--texte-n)}
.s-encre{background:var(--encre)}
.s-encre h1,.s-encre h2,.s-encre h3,.s-encre h4{color:var(--blanc)}
.s-encre p,.s-encre li{color:var(--texte-n)}

/* ---------------- typographie ---------------- */
.h1{font-size:clamp(2.6rem,6.2vw,5rem);font-weight:800;letter-spacing:-.038em;line-height:1.02}
.h2{font-size:clamp(2rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.032em;line-height:1.06}
.h3{font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:700;letter-spacing:-.024em;line-height:1.14}
.h4{font-size:clamp(1.16rem,1.8vw,1.42rem);font-weight:700;letter-spacing:-.018em;line-height:1.24}
.h5{font-size:1.05rem;font-weight:600;letter-spacing:-.012em}

.sur{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--vert-texte);margin-bottom:18px}
.sur::before{content:'';width:24px;height:3px;background:var(--vert);border-radius:2px;flex:none}
.s-noir .sur,.s-encre .sur,.hero .sur,.pgh .sur{color:var(--vert-clair)}

.lede{font-size:clamp(1.06rem,1.6vw,1.26rem);line-height:1.62;max-width:60ch;color:var(--texte-2)}
.s-noir .lede,.s-encre .lede,.hero .lede,.pgh .lede{color:var(--texte-n)}
.mut{color:var(--texte-2)}
.s-noir .mut,.s-encre .mut,.hero .mut,.pgh .mut{color:var(--texte-n2)}
.sm{font-size:.925rem;line-height:1.65}
.xs{font-size:.815rem;line-height:1.6}
.vt{color:var(--vert-texte);font-weight:600}
.s-noir .vt,.s-encre .vt,.hero .vt,.pgh .vt{color:var(--vert-clair)}
.lbl{display:block;font-size:.71rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--vert-texte);margin-bottom:12px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------- boutons ---------------- */
.btn,.btn:visited{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r)!important;border:2px solid transparent;
  font-family:var(--f);font-size:.95rem;font-weight:600;line-height:1.1;
  text-decoration:none;cursor:pointer;
  transition:transform .22s var(--ease),background .22s var(--ease),
             color .22s var(--ease),border-color .22s var(--ease),box-shadow .28s var(--ease)}
/* Anneau vert qui fait le tour du contour. Le centre est masqué :
   la couleur ne peut pas déborder à l'intérieur du bouton. */
.btn::before{content:'';position:absolute;inset:-3px;border-radius:calc(var(--r) + 3px);
  padding:3px;pointer-events:none;
  background:conic-gradient(from var(--tour),
    transparent 0deg,transparent 232deg,var(--vert) 286deg,
    var(--vert-clair) 322deg,var(--vert) 346deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .28s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{opacity:1;animation:tourne 1.9s linear infinite}
/* anneau toujours actif, sans survol */
.btn-anneau::before{opacity:1;animation:tourne 2.6s linear infinite}
.btn-anneau:hover::before{animation-duration:1.5s}
@supports not (mask-composite: exclude){ .btn::before{display:none} }
@keyframes tourne{to{--tour:360deg}}

.btn-v,.btn-v:link,.btn-v:visited,button.btn-v:hover,button.btn-v:focus{background-color:var(--vert)!important;color:var(--noir);border-color:var(--vert)!important}
.btn-v:hover,.btn-v:visited:hover,button.btn-v:hover{background-color:var(--vert-clair)!important;border-color:var(--vert-clair)!important;transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(97,178,46,.34)}
.btn-n,.btn-n:link,.btn-n:visited,button.btn-n:focus{background-color:var(--noir)!important;color:var(--blanc);border-color:var(--noir)!important}
.btn-n:hover,.btn-n:visited:hover,button.btn-n:hover{background-color:var(--encre)!important;border-color:var(--encre)!important;transform:translateY(-3px);box-shadow:0 12px 26px rgba(29,29,27,.28)}
.btn-c,.btn-c:link,.btn-c:visited,button.btn-c:focus{background-color:var(--blanc)!important;color:var(--texte);border-color:var(--bordure)!important}
.btn-c:hover,.btn-c:visited:hover,button.btn-c:hover{border-color:var(--vert)!important;color:var(--vert-texte);background-color:var(--vert-pale)!important;transform:translateY(-3px)}
.btn-b,button.btn-b:focus{background-color:rgba(255,255,255,.04)!important;color:var(--blanc);border-color:rgba(255,255,255,.34)!important}
.btn-b:hover,.btn-b:visited:hover,button.btn-b:hover{border-color:var(--vert)!important;color:var(--vert-clair);background-color:rgba(97,178,46,.12)!important;transform:translateY(-3px)}
/* bouton pilule : l'anneau vert fait un tour propre et régulier */
.btn-pilule{--r:999px}
.btn-sm{padding:11px 19px;font-size:.87rem;border-radius:10px}
.btn-lg{padding:18px 34px;font-size:1.04rem}
.btn .fl{display:inline-block;transition:transform .26s var(--ease)}
.btn:hover .fl{transform:translateX(4px)}
.btns{display:flex;flex-wrap:wrap;gap:13px;align-items:center}

.lien,.lien:visited{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:.94rem;font-weight:600;text-decoration:none;color:var(--vert-texte);padding-bottom:4px}
.lien::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--vert);
  transform-origin:right;transform:scaleX(1);transition:transform .3s var(--ease)}
.lien:hover::after{transform:scaleX(0);transform-origin:left}
.lien .fl{transition:transform .26s var(--ease)}
.lien:hover .fl{transform:translateX(5px)}
.s-noir .lien,.s-encre .lien,.carte-n .lien{color:var(--vert-clair)}

/* ---------------- entête ---------------- */
.topbar{background:var(--encre);padding-block:9px;border-bottom:1px solid #2B2B27}
.topbar,.topbar div{color:#B3B1A8;font-size:.8rem}
.topbar .wrap-lg{display:flex;justify-content:space-between;align-items:center;gap:18px}
.topbar a,.topbar a:visited{color:#B3B1A8;text-decoration:none;transition:color .22s var(--ease)}
.topbar a:hover{color:var(--vert-clair)}
.topbar-d{display:flex;gap:24px;align-items:center}
.pastille{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--vert);
  margin-right:8px;box-shadow:0 0 0 0 rgba(97,178,46,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(97,178,46,0)}100%{box-shadow:0 0 0 0 rgba(97,178,46,0)}}

header.top{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.95);
  backdrop-filter:saturate(170%) blur(12px);border-bottom:1px solid var(--bordure);
  transition:box-shadow .3s var(--ease)}
header.top.colle{box-shadow:0 6px 26px rgba(29,29,27,.08)}
.nav{display:flex;align-items:center;gap:22px;padding-block:13px}
.marque{display:block;flex:none;text-decoration:none;line-height:0}
.marque img{height:62px;width:auto;display:block;transition:transform .3s var(--ease)}
.marque:hover img{transform:scale(1.04)}

.menu{margin-left:auto;display:flex;align-items:center;gap:2px}
.menu>a,.menu>a:visited,.menu>a:link,.dd>button{position:relative;font-family:var(--f);
  font-size:.9rem;font-weight:500;color:var(--texte);text-decoration:none;padding:10px 14px;
  background-color:transparent;background-image:none;border:0;appearance:none;-webkit-appearance:none;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-radius:10px;
  transition:color .22s var(--ease),background-color .22s var(--ease)}
/* survol et focus : vert de la marque, texte blanc. Jamais de couleur du navigateur. */
.menu>a:hover,.menu>a:focus,.menu>a:focus-visible,.menu>a:active,
.dd>button:hover,.dd>button:focus,.dd>button:focus-visible,.dd>button:active,
.dd:hover>button,.dd:focus-within>button{
  background-color:var(--vert)!important;color:#FFFFFF!important;outline:none}
.dd:hover>button .chev,.dd>button:hover .chev{color:#FFFFFF}
.menu>a::after,.dd>button::after{content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;
  background:var(--vert);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .26s var(--ease)}
.menu>a.actif::after{transform:scaleX(1)}
.menu>a:hover::after,.dd:hover>button::after{background:#FFFFFF;transform:scaleX(1)}

.menu>a.actif{color:var(--vert-texte);font-weight:600;background-color:transparent}
.dd{position:relative}
.dd>button .chev{font-size:.7em;transition:transform .26s var(--ease)}
.dd:hover>button .chev{transform:rotate(180deg)}
.dd-p{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--blanc);
  border:1px solid var(--bordure);border-radius:var(--rc);padding:9px;
  box-shadow:0 26px 60px rgba(29,29,27,.16);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s var(--ease)}
.dd:hover .dd-p,.dd:focus-within .dd-p{opacity:1;visibility:visible;transform:none}
.dd-p a,.dd-p a:visited,.dd-p a:link{display:block;padding:11px 14px;border-radius:10px;
  text-decoration:none;font-size:.88rem;font-weight:500;color:var(--texte);
  background-color:transparent;transition:all .2s var(--ease)}
.dd-p a:hover,.dd-p a:focus,.dd-p a:focus-visible,.dd-p a:active{
  background-color:var(--vert)!important;color:#FFFFFF!important;transform:translateX(3px);outline:none}
.dd-p a small{display:block;font-size:.75rem;font-weight:400;color:var(--texte-2);margin-top:2px}
.dd-p a:hover small,.dd-p a:focus small{color:rgba(255,255,255,.9)}
.dd-p a b{font-weight:700}
.dd-p hr{border:0;border-top:1px solid var(--bordure);margin:8px 5px}
.burger{display:none;margin-left:auto;width:46px;height:42px;border:1px solid var(--bordure);
  background:var(--blanc);border-radius:10px;cursor:pointer;font-size:18px;color:var(--texte)}

/* ---------------- grilles ---------------- */
.g{display:grid;gap:clamp(18px,2.2vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,5vw,68px);align-items:center}
.split-t{display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(30px,5vw,60px);align-items:start}
.split-i{display:grid;grid-template-columns:.94fr 1.06fr;gap:clamp(30px,5vw,68px);align-items:center}

/* ---------------- cartes ---------------- */
.carte{position:relative;background:var(--blanc);border:1px solid var(--bordure);
  border-radius:var(--rc);padding:clamp(22px,2.5vw,32px);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.carte::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--vert);
  transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease)}
.carte:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(29,29,27,.11);border-color:#D2D0C6}
.carte:hover::before{transform:scaleX(1)}
.carte h3,.carte h4,.carte h5{color:var(--texte)}
.carte p,.carte li,.carte td{color:var(--texte-2)}
a.carte,a.carte:visited{display:block;text-decoration:none;color:var(--texte)}
a.carte:hover h3,a.carte:hover h4{color:var(--vert-texte)}

.carte-n{background:var(--noir-2);border-color:var(--bordure-n)}
.carte-n h3,.carte-n h4,.carte-n h5{color:var(--blanc)}
.carte-n p,.carte-n li,.carte-n td{color:var(--texte-n)}
.carte-n .lbl{color:var(--vert-clair)}
.carte-n:hover{border-color:#4F4F48;box-shadow:0 18px 40px rgba(0,0,0,.42)}
a.carte-n{color:var(--texte-n)}
a.carte-n:hover h3,a.carte-n:hover h4{color:var(--vert-clair)}
.carte-v{border-color:var(--vert);border-width:2px}
.carte-v::before{transform:scaleX(1)}

/* ---------------- cartes « problème » (accueil) ---------------- */
.probs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px)}
.prob{position:relative;overflow:hidden;background:var(--blanc);
  border:1px solid var(--bordure);border-radius:20px;
  padding:clamp(30px,3vw,40px) clamp(26px,2.6vw,34px) clamp(30px,3vw,38px);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease)}
/* le gros chiffre fantôme */
.prob .no{position:absolute;top:-10px;right:14px;font-size:clamp(5.5rem,7vw,8rem);
  font-weight:800;line-height:1;letter-spacing:-.06em;color:var(--vert-pale);
  pointer-events:none;user-select:none;
  transition:color .38s var(--ease),transform .5s var(--ease)}
/* la barre verte à gauche */
.prob::before{content:'';position:absolute;left:0;top:22px;bottom:22px;width:4px;
  background:var(--vert);border-radius:0 4px 4px 0;
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
/* le reflet qui balaie */
.prob::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(97,178,46,.11) 50%,transparent 62%);
  transform:translateX(-115%);transition:transform .8s var(--ease)}
.prob:hover{transform:translateY(-7px);border-color:var(--vert);
  box-shadow:0 22px 50px rgba(97,178,46,.19)}
.prob:hover::before{transform:scaleY(1)}
.prob:hover::after{transform:translateX(115%)}
.prob:hover .no{color:var(--vert);transform:translateY(4px) scale(1.04)}
.prob .et{position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vert-texte);background:var(--vert-pale);
  padding:7px 13px;border-radius:100px;margin-bottom:20px;
  transition:background .3s var(--ease),color .3s var(--ease)}
.prob:hover .et{background:var(--vert);color:#FFFFFF}
.prob h3{position:relative;font-size:clamp(1.24rem,1.9vw,1.5rem);font-weight:700;
  letter-spacing:-.022em;line-height:1.24;color:var(--texte);margin-bottom:14px;max-width:20ch}
.prob p{position:relative;font-size:.955rem;line-height:1.68;color:var(--texte-2);margin:0}
.prob .sol{position:relative;display:flex;align-items:flex-start;gap:9px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--bordure);
  font-size:.9rem;font-weight:600;color:var(--vert-texte);line-height:1.5}
.prob .sol svg{flex:none;width:18px;height:18px;margin-top:2px}
@media(max-width:900px){.probs{grid-template-columns:1fr}}

/* ---------------- listes ---------------- */
.liste{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.liste li{position:relative;padding-left:32px;font-size:.95rem;line-height:1.6;color:var(--texte-2)}
.liste li::before{content:'';position:absolute;left:2px;top:.46em;width:14px;height:8px;
  border-left:2.5px solid var(--vert);border-bottom:2.5px solid var(--vert);
  transform:rotate(-45deg);transition:transform .26s var(--ease)}
.liste li:hover::before{transform:rotate(-45deg) scale(1.18)}
.s-noir .liste li,.s-encre .liste li,.carte-n .liste li,.hero .liste li{color:var(--texte-n)}

.etapes{list-style:none;padding:0;margin:0;display:grid;gap:22px;counter-reset:e}
.etapes li{counter-increment:e;position:relative;padding-left:62px}
.etapes li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:-2px;
  width:44px;height:44px;border-radius:12px;background:var(--vert-pale);color:var(--vert-texte);
  display:grid;place-items:center;font-size:.86rem;font-weight:700;transition:all .3s var(--ease)}
.etapes li:hover::before{background:var(--vert);color:var(--noir);transform:scale(1.08)}
.etapes li b{display:block;font-size:1.1rem;font-weight:700;color:var(--texte);margin-bottom:5px}
.etapes li span{display:block;font-size:.95rem;line-height:1.62;color:var(--texte-2)}
.s-noir .etapes li::before,.s-encre .etapes li::before{background:rgba(97,178,46,.17);color:var(--vert-clair)}
.s-noir .etapes li b,.s-encre .etapes li b{color:var(--blanc)}
.s-noir .etapes li span,.s-encre .etapes li span{color:var(--texte-n)}

/* ---------------- chiffres ---------------- */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bordure);
  border:1px solid var(--bordure);border-radius:var(--rc);overflow:hidden}
.chiffre{background:var(--blanc);padding:26px 22px;transition:background .3s var(--ease)}
.chiffre:hover{background:var(--vert-pale)}
.chiffre b{display:block;font-size:clamp(1.85rem,3.3vw,2.8rem);font-weight:800;letter-spacing:-.04em;
  line-height:1;margin-bottom:9px;color:var(--texte);font-variant-numeric:tabular-nums}
.chiffre span{display:block;font-size:.74rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texte-2);line-height:1.55}
.s-noir .chiffres,.s-encre .chiffres,.hero .chiffres,.pgh .chiffres{
  background:var(--bordure-n);border-color:var(--bordure-n)}
.s-noir .chiffre,.s-encre .chiffre,.hero .chiffre,.pgh .chiffre{background:var(--noir-2)}
.s-noir .chiffre:hover,.s-encre .chiffre:hover,.hero .chiffre:hover,.pgh .chiffre:hover{background:var(--noir-3)}
.s-noir .chiffre b,.s-encre .chiffre b,.hero .chiffre b,.pgh .chiffre b{color:var(--blanc)}
.s-noir .chiffre span,.s-encre .chiffre span,.hero .chiffre span,.pgh .chiffre span{color:var(--texte-n2)}

/* ---------------- tableaux ---------------- */
.tbl{overflow-x:auto;border:1px solid var(--bordure);border-radius:var(--rc);background:var(--blanc)}
table.t{width:100%;border-collapse:collapse;font-size:.92rem;min-width:540px;background:var(--blanc)}
table.t th{background:var(--gris-pale);color:var(--texte);text-align:left;padding:15px 18px;
  font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  border-bottom:1px solid var(--bordure)}
table.t td{padding:14px 18px;border-bottom:1px solid var(--bordure);vertical-align:top;
  line-height:1.55;color:var(--texte)}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background .22s var(--ease)}
table.t tbody tr:hover td{background:var(--vert-pale);color:var(--texte)}
table.t td b{font-weight:600;color:var(--texte)}
table.t .num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500;color:var(--texte)}
table.t .fort td{background:#FDF6E6}
table.t .fort td:first-child{box-shadow:inset 3px 0 0 #E8A317}
table.t .fort:hover td{background:#FBEFD5}

/* ---------------- accordéon ---------------- */
.faq{display:grid;gap:10px;max-width:880px}
details.q{border:1px solid var(--bordure);border-radius:var(--r);background:var(--blanc);
  overflow:hidden;transition:border-color .26s var(--ease),box-shadow .26s var(--ease)}
details.q:hover{border-color:#CFCDC3;box-shadow:0 6px 18px rgba(29,29,27,.06)}
details.q summary{cursor:pointer;list-style:none;padding:19px 58px 19px 22px;position:relative;
  font-size:1.03rem;font-weight:600;color:var(--texte);transition:color .22s var(--ease)}
details.q summary::-webkit-details-marker{display:none}
details.q summary:hover{color:var(--vert-texte)}
details.q summary i{position:absolute;right:22px;top:calc(50% - 9px);width:18px;height:18px}
details.q summary i::before,details.q summary i::after{content:'';position:absolute;
  background:var(--vert);border-radius:2px;transition:transform .3s var(--ease)}
details.q summary i::before{top:8px;left:0;width:18px;height:2px}
details.q summary i::after{top:0;left:8px;width:2px;height:18px}
details.q[open] summary{color:var(--vert-texte)}
details.q[open] summary i::after{transform:scaleY(0)}
details.q .r{padding:0 22px 22px;font-size:.96rem;line-height:1.72;color:var(--texte-2);max-width:76ch}
details.q .r a{color:var(--vert-texte);font-weight:600}

/* ---------------- encadrés ---------------- */
.note{border:1px solid var(--bordure);border-left:4px solid var(--vert);background:var(--vert-pale);
  padding:20px 24px;border-radius:var(--r);font-size:.95rem;line-height:1.68;color:var(--texte)}
.note p{color:var(--texte)}
.note b:first-child{display:block;font-size:.73rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--vert-texte);margin-bottom:8px}
.note.a{border-left-color:#E8A317;background:#FDF6E6}
.note.a b:first-child{color:#96690A}
.s-noir .note,.s-encre .note{background:rgba(97,178,46,.1);border-color:var(--bordure-n);
  border-left-color:var(--vert);color:var(--texte-n)}
.s-noir .note p,.s-encre .note p{color:var(--texte-n)}
.s-noir .note b:first-child,.s-encre .note b:first-child{color:var(--vert-clair)}

blockquote.cit{margin:0;padding:4px 0 4px 26px;border-left:4px solid var(--vert);
  font-size:clamp(1.2rem,2.1vw,1.6rem);font-weight:500;line-height:1.4;
  letter-spacing:-.018em;color:var(--texte)}
.s-noir blockquote.cit,.s-encre blockquote.cit{color:var(--blanc)}
blockquote.cit footer{font-size:.74rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texte-2);margin-top:16px}
.s-noir blockquote.cit footer,.s-encre blockquote.cit footer{color:var(--texte-n2)}

/* ---------------- photos ---------------- */
.ph{margin:0;position:relative;overflow:hidden;border-radius:var(--rc);
  aspect-ratio:var(--ar,4/3);background:var(--gris-2)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease)}
.ph:hover img{transform:scale(1.055)}
.ph-leg{position:absolute;left:14px;bottom:14px;background:rgba(29,29,27,.9);color:var(--blanc);
  font-size:.71rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border-radius:8px}

/* ---------------- fil d'ariane ---------------- */
.fil-n{background:var(--noir);border-bottom:1px solid var(--bordure-n)}
.fil{font-size:.78rem;font-weight:500;padding-block:16px;display:flex;gap:8px;
  flex-wrap:wrap;align-items:center;color:var(--texte-n2)}
.fil a,.fil a:visited{text-decoration:none;color:var(--texte-n2);transition:color .22s var(--ease)}
.fil a:hover{color:var(--vert-clair)}
.fil em{font-style:normal;color:var(--texte-n)}
.fil span{opacity:.4;color:var(--texte-n2)}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--noir);overflow:hidden}
.hero h1,.hero h2,.hero h3{color:var(--blanc)}
.hero p{color:var(--texte-n)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:62% 52%;opacity:.86;
  animation:kb 34s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.12) translate3d(-1.2%,-1.4%,0)}}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(97deg,rgba(29,29,27,.97) 0%,rgba(29,29,27,.9) 30%,rgba(29,29,27,.52) 62%,rgba(29,29,27,.2) 100%),
             linear-gradient(to top,rgba(29,29,27,.86) 0%,transparent 34%)}
.hero .wrap{position:relative;z-index:1}
.hero-in{padding-block:clamp(64px,9vw,124px)}
.hero-txt{max-width:660px}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(97,178,46,.15);
  border:1px solid rgba(97,178,46,.42);border-radius:100px;padding:8px 17px 8px 13px;
  font-size:.77rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vert-clair);margin-bottom:26px;transition:all .3s var(--ease)}
.badge:hover{background:rgba(97,178,46,.24);border-color:var(--vert)}
.badge .pt{width:7px;height:7px;border-radius:50%;background:var(--vert);flex:none;
  box-shadow:0 0 0 0 rgba(97,178,46,.7);animation:pulse 2.4s infinite}

.pgh{position:relative;background:var(--noir);overflow:hidden}
.pgh h1,.pgh h2,.pgh h3{color:var(--blanc)}
.pgh p{color:var(--texte-n)}
.pgh .wrap{position:relative;z-index:1}
.pgh-in{padding-block:clamp(44px,5.6vw,80px)}
.pgh-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.pgh-bg img{width:100%;height:100%;object-fit:cover;object-position:64% 50%;opacity:.3}
.pgh-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(95deg,var(--noir) 28%,rgba(29,29,27,.95) 56%,rgba(29,29,27,.66) 100%)}

/* ---------------- bande défilante ---------------- */
.bande{background:var(--vert);padding:14px 0;overflow:hidden;white-space:nowrap}
.bande-p{display:inline-block;animation:defile 40s linear infinite;color:var(--noir);
  font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.bande-p span{padding:0 26px}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- vignette article ---------------- */
.vig,.vig:visited{position:relative;display:flex;flex-direction:column;background:var(--blanc);
  border:1px solid var(--bordure);border-radius:var(--rc);overflow:hidden;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.vig::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--vert);
  transform:scaleX(0);transform-origin:left;transition:transform .36s var(--ease);z-index:2}
.vig:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(29,29,27,.11);border-color:#D2D0C6}
.vig:hover::before{transform:scaleX(1)}
.vig-c{padding:26px;display:flex;flex-direction:column;gap:11px;flex:1}
.vig-c .cat{font-size:.71rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--vert-texte)}
.vig-c h3{font-size:1.14rem;font-weight:700;letter-spacing:-.02em;line-height:1.28;color:var(--texte)}
.vig:hover .vig-c h3{color:var(--vert-texte)}
.vig-c p{font-size:.89rem;line-height:1.6;color:var(--texte-2);flex:1;margin:0}
.vig-c .meta{font-size:.73rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--texte-2)}

/* ---------------- bande CTA ---------------- */
.cta{position:relative;background:var(--vert);overflow:hidden}
.cta h2,.cta h3{color:var(--noir)}
.cta p,.cta .lede{color:#22400C}
.cta .sur{color:#1F3A0A}
.cta .sur::before{background:var(--noir)}
.cta::after{content:'';position:absolute;right:-100px;top:-100px;width:360px;height:360px;
  border:3px solid rgba(29,29,27,.14);border-radius:50%;animation:flotte 9s ease-in-out infinite}
@keyframes flotte{50%{transform:translate(-18px,18px) scale(1.05)}}
.cta .wrap{position:relative;z-index:1}
.cta .btn-c{background:transparent;border-color:rgba(29,29,27,.42);color:var(--noir)}
.cta .btn-c:hover,.btn-c:visited:hover{background:var(--noir);color:var(--vert);border-color:var(--noir)}

/* ---------------- bloc de conversion (bas de chaque page) ---------------- */
.conv .coord{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:34px}
.conv .coord-c{display:block;background:var(--blanc);border:1px solid var(--bordure);
  border-radius:var(--rc);padding:18px 20px;text-decoration:none;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
a.coord-c:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(29,29,27,.1);border-color:var(--vert)}
.conv .coord-c b,.conv a.coord-c:visited b{display:block;font-size:1.28rem;font-weight:700;color:var(--texte);
  letter-spacing:-.022em;margin-bottom:5px;word-break:break-word}
a.coord-c:hover b{color:var(--vert-texte)}
.conv .coord-c .lbl{margin-bottom:7px}
.conv .coord-c .sm{color:var(--texte-2)}

/* ---------------- avis Google ---------------- */
.avis-s{background:var(--encre)}
.avis-tete{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);
  align-items:end;margin-bottom:clamp(36px,4vw,52px)}
.avis-note{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  background:var(--noir-2);border:1px solid var(--bordure-n);border-radius:var(--rc);
  padding:22px 26px;text-decoration:none;min-width:212px;
  transition:border-color .28s var(--ease),transform .28s var(--ease),box-shadow .28s var(--ease)}
.avis-note:hover{border-color:var(--vert);transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(97,178,46,.2)}
.avis-note b{font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:#FFFFFF}
.avis-note .avis-nb{font-size:.83rem;font-weight:500;color:var(--texte-n2);margin-top:2px}
.avis-note .avis-lien{font-size:.83rem;font-weight:700;color:var(--vert-clair);margin-top:9px;
  display:inline-flex;align-items:center;gap:7px}
.avis-note:hover .fl{transform:translateX(4px)}
.avis-e{display:inline-flex;gap:3px;color:#F5A623;font-size:1rem;line-height:1}
.avis-e span{display:inline-block;opacity:1;transition:transform .26s var(--ease)}
.avis-c:hover .avis-e span{transform:translateY(-2px)}
.avis-c:hover .avis-e span:nth-child(2){transition-delay:.04s}
.avis-c:hover .avis-e span:nth-child(3){transition-delay:.08s}
.avis-c:hover .avis-e span:nth-child(4){transition-delay:.12s}
.avis-c:hover .avis-e span:nth-child(5){transition-delay:.16s}

.avis-g{columns:3;column-gap:20px}
.avis-c{break-inside:avoid;margin:0 0 20px;padding:26px 26px 22px;
  background:var(--blanc);border:1px solid transparent;border-radius:var(--rc);
  box-shadow:0 10px 28px rgba(0,0,0,.24);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.avis-c::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--vert) 0%,var(--vert-clair) 100%);
  transform:scaleY(0);transform-origin:top;transition:transform .38s var(--ease)}
.avis-c:hover{transform:translateY(-5px);border-color:var(--vert);
  box-shadow:0 22px 46px rgba(97,178,46,.22)}
.avis-c:hover::before{transform:scaleY(1)}
.avis-c blockquote{margin:14px 0 0;padding:0;border:0;font-size:.95rem;line-height:1.66;
  color:var(--texte);font-style:normal}
.avis-c figcaption{display:flex;align-items:center;gap:12px;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--bordure)}
.avis-av{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--vert);color:var(--noir);font-weight:800;font-size:1.02rem;line-height:1;
  transition:transform .3s var(--ease)}
.avis-c:hover .avis-av{transform:scale(1.09) rotate(-6deg)}
.avis-id{display:flex;flex-direction:column;min-width:0}
.avis-id b{font-size:.93rem;font-weight:700;color:var(--texte);line-height:1.25}
.avis-id span{font-size:.78rem;color:var(--texte-2);margin-top:2px}
@media(max-width:1040px){.avis-g{columns:2}
  .avis-tete{grid-template-columns:1fr;align-items:start}}
@media(max-width:640px){.avis-g{columns:1}}
/* carte du territoire */
.carte-geo{margin:26px 0 0;padding:0;position:relative;border-radius:var(--rc);overflow:hidden;
  border:1px solid var(--bordure);background:var(--gris-2);
  box-shadow:0 14px 34px rgba(29,29,27,.08);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.carte-geo:hover{box-shadow:0 20px 46px rgba(29,29,27,.14);transform:translateY(-3px)}
.carte-geo::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--vert) 0%,var(--vert-clair) 50%,var(--vert) 100%);z-index:2}
.carte-geo iframe{display:block;width:100%;height:clamp(240px,30vw,340px);border:0;
  filter:saturate(.88) contrast(1.03)}
.carte-geo figcaption{display:flex;align-items:center;gap:10px;
  background:var(--noir);color:var(--texte-n);padding:13px 18px;
  font-size:.83rem;font-weight:500;line-height:1.45}
.carte-geo figcaption .pt{width:9px;height:9px;border-radius:50%;background:var(--vert);flex:none;
  box-shadow:0 0 0 0 rgba(97,178,46,.6);animation:pouls 2.4s ease-out infinite}
@keyframes pouls{70%{box-shadow:0 0 0 11px rgba(97,178,46,0)}100%{box-shadow:0 0 0 0 rgba(97,178,46,0)}}
@media(max-width:720px){.carte-geo iframe{height:230px}}
.form-c{background:var(--blanc);border:1px solid var(--bordure);border-radius:20px;
  padding:clamp(24px,2.8vw,34px);display:grid;gap:15px;
  box-shadow:0 18px 44px rgba(29,29,27,.07)}
.form-c h3{color:var(--texte)}
.f-duo{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.f-l{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--texte-2);margin-bottom:8px}
.f-i{display:block;width:100%;padding:14px 16px;border:2px solid var(--bordure);border-radius:var(--r);
  font-family:var(--f);font-size:.97rem;background:var(--blanc);color:var(--texte);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.f-i:focus{outline:none;border-color:var(--vert)!important;box-shadow:0 0 0 4px rgba(97,178,46,.14)}
textarea.f-i{resize:vertical;min-height:100px}
.form-c .ok{background:var(--vert-pale);border:2px solid var(--vert);border-radius:var(--r);
  padding:14px 16px;font-size:.92rem;font-weight:600;color:var(--vert-fonce);margin:0}
@media(max-width:640px){.f-duo{grid-template-columns:1fr}}

/* ---------------- pied ---------------- */
footer.bas{background:var(--encre);padding-top:clamp(48px,6vw,76px)}
footer.bas h4{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blanc);margin-bottom:18px}
footer.bas p{color:var(--texte-n2);font-size:.92rem;line-height:1.68}
footer.bas a,footer.bas a:visited{display:block;color:var(--texte-n2);text-decoration:none;font-size:.9rem;
  line-height:2.05;transition:color .22s var(--ease),transform .22s var(--ease)}
footer.bas a:hover{color:var(--vert-clair);transform:translateX(3px)}
.bas-g{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.1fr;gap:34px}
.bas-logo{height:74px;width:auto;margin-bottom:18px;transition:transform .3s var(--ease)}
.bas-logo:hover{transform:scale(1.04)}
.bas-slogan{font-size:.84rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--vert-clair);margin:0 0 16px}
.bas-tel,.bas-tel:link,.bas-tel:visited{display:inline-block;font-size:1.32rem;font-weight:700;color:var(--blanc);
  text-decoration:none;line-height:1.5;transition:color .22s var(--ease)}
.bas-tel:hover{color:var(--vert-clair);transform:none}
.bas-fin{border-top:1px solid rgba(255,255,255,.11);margin-top:46px;padding-block:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.8rem;color:#6E6C64}
.bas-fin div{color:#6E6C64}
.bas-fin a{display:inline;font-size:.8rem;color:#6E6C64}
.bas-fin a:hover{color:var(--vert-clair);transform:none}

/* ---------------- barre mobile ---------------- */
.mob{display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--noir);
  border-top:2px solid var(--vert);padding:10px 12px;gap:10px}
.mob a{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;
  border-radius:10px;font-size:.88rem;font-weight:600;text-decoration:none}
.mob .t{background:var(--blanc);color:var(--noir)}
.mob .s{background:var(--vert);color:var(--noir)}

/* ---------------- article ---------------- */
.art{max-width:72ch}
.art h2{font-size:clamp(1.58rem,2.8vw,2.2rem);font-weight:700;margin:52px 0 16px;
  letter-spacing:-.026em;color:var(--texte)}
.art h3{font-size:1.22rem;font-weight:700;margin:34px 0 11px;letter-spacing:-.016em;color:var(--texte)}
.art p,.art li{font-size:1.04rem;line-height:1.76;color:var(--texte)}
.art>p:first-child{font-size:1.15rem;line-height:1.66;color:var(--texte-2)}
.art ul,.art ol{padding-left:24px;margin:0 0 1.25em}
.art li{margin-bottom:10px}
.art .tbl,.art .note,.art blockquote.cit{margin:32px 0}
.art a,.art a:visited{color:var(--vert-texte);font-weight:600;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:2px;text-decoration-color:rgba(97,178,46,.45);
  transition:text-decoration-color .22s var(--ease)}
.art a:hover{text-decoration-color:var(--vert)}
.lecture{position:fixed;top:0;left:0;height:3px;background:var(--vert);z-index:95;width:0;
  transition:width .1s linear;box-shadow:0 0 14px rgba(97,178,46,.6)}

/* ---------------- animations ----------------
   Pilotées par animation-timeline. Aucune dépendance au JavaScript :
   si le navigateur ne supporte pas, le contenu s'affiche normalement.
   ------------------------------------------------ */
@keyframes revele{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes revele-g{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes revele-d{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes revele-z{from{opacity:0;transform:scale(.955)}to{opacity:1;transform:none}}

@supports (animation-timeline: view()){
  /* uniquement dans les sections courantes — jamais dans le héros
     ni dans l'entête de page, qui restent toujours visibles */
  .sect [data-anim],.sect-s [data-anim]{
    animation:revele .8s var(--ease) both;animation-timeline:view();
    animation-range:entry 0% cover 24%}
  .sect [data-anim="left"],.sect-s [data-anim="left"]{animation-name:revele-g}
  .sect [data-anim="right"],.sect-s [data-anim="right"]{animation-name:revele-d}
  .sect [data-anim="scale"],.sect-s [data-anim="scale"]{animation-name:revele-z}
  .g>*:nth-child(2) [data-anim],.g>*:nth-child(2)[data-anim]{animation-range:entry -3% cover 28%}
  .g>*:nth-child(3) [data-anim],.g>*:nth-child(3)[data-anim]{animation-range:entry -6% cover 32%}
  .g>*:nth-child(4) [data-anim],.g>*:nth-child(4)[data-anim]{animation-range:entry -9% cover 36%}
}

/* Le héros et l'entête de page ne s'animent pas : contenu toujours visible. */

/* ---------------- responsive ---------------- */
@media(max-width:1120px){
  .menu{display:none}.burger{display:block}
  .bas-g{grid-template-columns:1fr 1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}
  .chiffres{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .g3,.split,.split-t,.split-i{grid-template-columns:1fr}
  .topbar-d a:not(.tel){display:none}
}
@media(max-width:640px){
  body{font-size:16px;padding-bottom:70px}
  .g2,.g4,.bas-g{grid-template-columns:1fr}
  .chiffres{grid-template-columns:1fr}
  .mob{display:flex}
  .sect{padding-block:48px}
  .marque img{height:48px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  html.js [data-anim]{opacity:1!important;transform:none!important}
  .hero-bg img{animation:none}
}