*{box-sizing:border-box}html{scroll-behavior:smooth;overscroll-behavior-y:none}body{margin:0;color:#11233e;font-family:Inter,Arial,sans-serif;background:#fff;line-height:1.6;overscroll-behavior-y:none}.container{width:min(1160px,calc(100% - 40px));margin:auto}.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:20}.topbar{background:#6f922d;color:#fff;font-size:13px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:42px;padding:5px 0}
.topbar-phone{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:15px;font-weight:600;padding:5px 9px;margin-left:-9px;border-radius:9px;transition:background .18s ease}
.topbar-phone b{font-weight:800;letter-spacing:.4px;white-space:nowrap}
.topbar-phone .ico{width:17px;height:17px;flex:none}
.topbar-phone:hover{background:#ffffff26}
.topbar-phone:hover .ico{animation:ring .7s ease}
.topbar-phone:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes ring{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg)}30%{transform:rotate(12deg)}45%{transform:rotate(-9deg)}60%{transform:rotate(7deg)}75%{transform:rotate(-4deg)}}
.topbar-badges{display:flex;align-items:center;gap:13px;white-space:nowrap}.header{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);z-index:10;border-bottom:1px solid #e9eef3}.nav{height:82px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;color:#082e6d;text-decoration:none;min-width:255px}.brand img{width:62px;height:62px;object-fit:contain}.brand span{display:flex;flex-direction:column}.brand b{font:700 19px Poppins}.brand small{font-size:9px;letter-spacing:1.4px;color:#6f922d}.nav nav{display:flex;gap:24px;margin-left:auto}.nav nav a,.footer-grid a{color:inherit;text-decoration:none}.nav nav a:hover{color:#6f922d}.actions{display:flex;align-items:center;gap:6px}.phone{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:#082e6d;text-decoration:none;white-space:nowrap}.header-avail{display:none;align-items:center;gap:5px;height:42px;padding:0 10px;border-radius:21px;background:#edf3e3;color:#082e6d;font:800 12px Inter;white-space:nowrap}.header-avail .ico{width:15px;height:15px;flex:none;color:#72952f}.phone .ico{width:16px;height:16px;flex:none;color:#72952f}.phone:hover .ico{animation:ring .7s ease}.phone:focus-visible{outline:2px solid #72952f;outline-offset:3px;border-radius:6px}.lang{border:0;background:none;cursor:pointer;font-weight:700;color:#637083;text-decoration:none}.lang.active{color:#72952f}.menu{display:none}.hero{background:linear-gradient(120deg,#f9fbf8 0 55%,#eef4e9 55%);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1fr 1fr;min-height:630px;align-items:center;gap:54px}.hero-copy{min-width:0}.eyebrow{font-size:13px;letter-spacing:2px;color:#72952f;font-weight:800}.hero h1{font:800 clamp(42px,5vw,67px)/1.05 Poppins;margin:15px 0;color:#082e6d}
html:lang(nl) .hero h1{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.hero h1 em{font-style:normal;color:#6f922d;font-size:.65em}.hero h2{font:700 27px Poppins;margin:0}.lead{font-size:18px;max-width:610px}.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.btn{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:12px 18px;border-radius:11px;text-decoration:none;border:1px solid transparent;font-weight:800;cursor:pointer;font:700 14px Inter}.primary{background:#72952f;color:white}.whatsapp{background:#082e6d;color:white}.outline{border-color:#cbd5df;color:#082e6d;background:white}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #10233b1c}.hero-media{position:relative}.hero-media img{width:100%;border-radius:28px;box-shadow:0 25px 70px #082e6d2e;display:block;aspect-ratio:1.2/1;object-fit:cover}.availability{position:absolute;left:-25px;bottom:35%;background:white;border-left:5px solid #72952f;border-radius:12px;box-shadow:0 10px 25px #082e6d25;padding:16px 22px;display:flex;flex-direction:column}.availability small{color:#68768a}.availability .avail-ico{display:none}.availability .avail-text{display:contents}.trust{margin-top:-35px;position:relative}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.trust-card{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid #e2e8ec;border-radius:18px;background:#fff;box-shadow:0 8px 24px #082e6d0d;transition:.2s}.trust-card:hover{transform:translateY(-5px);border-color:#b7c98e;box-shadow:0 15px 38px #082e6d14}.trust-card .card-icon{margin-bottom:0;flex:none}.trust-card>div:not(.card-icon){min-width:0}.trust-card b{display:block;font:700 18px Poppins;color:#082e6d}.trust-card small{display:block;font-size:14px;color:#667486;margin-top:2px}
html:lang(nl) .trust-card b,html:lang(nl) .trust-card small{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.section{padding:95px 0}.soft{background:#f5f7f2}.heading{text-align:center;max-width:720px;margin:0 auto 45px}.heading h2,.heading h1,.contact h2,.soin-hero-copy h1{font:700 clamp(30px,4vw,44px) Poppins;color:#082e6d;margin:8px 0}.heading p{color:#637083}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{padding:26px;border:1px solid #e2e8ec;border-radius:18px;background:#fff;transition:.2s}.card:hover{transform:translateY(-5px);border-color:#b7c98e;box-shadow:0 15px 38px #082e6d14}.card h3{font:700 18px Poppins;color:#082e6d}.card p{font-size:14px;color:#667486}.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.profile{display:grid;grid-template-columns:110px 1fr;gap:22px;background:white;padding:28px;border-radius:20px;box-shadow:0 8px 24px #082e6d0d}.avatar{width:105px;height:130px;border-radius:15px;background:linear-gradient(145deg,#082e6d,#1b6190);display:grid;place-items:center;color:white;font:800 42px Poppins}.avatar.green{background:linear-gradient(145deg,#577724,#91b348)}.profile>div:not(.avatar){min-width:0}.profile h3{font:700 26px Poppins;margin:0;color:#082e6d}.profile b{color:#6f922d}.profile p{font-size:14px}
html:lang(nl) .profile b,html:lang(nl) .profile p{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}blockquote{margin:35px auto 0;max-width:920px;text-align:center;font:600 24px Poppins;color:#082e6d}.chips{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.chips span{padding:8px 13px;border-radius:30px;background:#edf3e3;color:#405a17;font-weight:700;font-size:14px}.muted{color:#68768a}.inami{background:#082e6d;color:white;padding:30px 0}.inami .container{display:grid;grid-template-columns:auto auto 1fr;gap:30px;align-items:center}.inami .container>div{display:flex;gap:10px;white-space:nowrap;min-width:0}.inami b{white-space:normal}
html:lang(nl) .inami b{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.inami span{color:#aaca65}.inami p{margin:0;color:#dce5ef}.contact{background:linear-gradient(145deg,#f6f9f2,#fff)}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px}.contact-box{display:flex;flex-direction:column;gap:10px;margin-top:28px}form{background:white;padding:34px;border:1px solid #e0e7ec;border-radius:22px;box-shadow:0 18px 55px #082e6d12}form h3{font:700 23px Poppins;margin-top:0}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.full{grid-column:1/-1}label span{display:block;font-size:13px;font-weight:700;margin-bottom:6px}input,textarea{width:100%;font:inherit;padding:12px 13px;border:1px solid #cbd5df;border-radius:9px;background:#fff}input:focus,textarea:focus{outline:3px solid #86a94a30;border-color:#72952f}.consent{display:flex;gap:10px;margin:15px 0}.consent input{width:auto}.consent span{font-weight:500}.privacy{display:flex;align-items:flex-start;gap:10px;font-size:12px;background:#f6f8f3;padding:12px 14px;border-radius:8px;border:1px dashed #cbd5df;color:#566274}footer{background:#061f48;color:white;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:35px}.footer-grid>div{display:flex;flex-direction:column;gap:8px}.footbrand{color:white}.footbrand img{width:auto;height:48px}.legal{border-top:1px solid #ffffff24;margin-top:35px;padding-top:20px;display:flex;justify-content:space-between;color:#bac8d9;font-size:13px}.legal a{color:inherit;text-decoration:none}.legal a:hover{text-decoration:underline}.floating{display:none;position:fixed;right:18px;bottom:18px;width:55px;height:55px;border-radius:50%;place-items:center;background:#72952f;color:white;text-decoration:none;box-shadow:0 10px 25px #0003;z-index:15;transform:translateZ(0)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:980px){/* .phone{display:none} supprimé */.nav nav{gap:13px}.cards{grid-template-columns:repeat(2,1fr)}.hero-grid{min-height:auto;padding:70px 0}.hero h1{font-size:48px}}@media(max-width:760px){.container{width:min(100% - 28px,1160px)}.topbar .container{justify-content:flex-start;overflow:auto;white-space:nowrap}.hero{background:linear-gradient(#f9fbf8,#eff4e9)}.hero-grid{grid-template-columns:1fr;padding:6px 0 50px;gap:14px}.hero h1{font-size:42px;margin:4px 0}.hero h1 em{font-size:.58em}.lead{margin:4px 0 0}.cta{margin-top:10px}.hero-media{order:-1}.hero-media img{aspect-ratio:1.7/1;border-radius:20px}.availability{display:none}.header-avail{display:flex;order:1}.actions{order:2}.menu{order:3}.cta{display:grid}.trust{margin-top:-30px}.trust-grid{grid-template-columns:1fr}.section{padding:56px 0}.cards,.team-grid,.contact-grid{grid-template-columns:1fr}.inami .container{grid-template-columns:1fr;gap:12px}.profile{grid-template-columns:75px 1fr;padding:20px}.avatar{width:72px;height:95px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.legal{flex-direction:column;gap:8px}.floating{display:grid}}

/* --- Bouton d'appel du hero : numéro visible pour les personnes âgées / lignes fixes --- */
.btn-call{gap:11px;text-align:left;line-height:1.15}
.btn-call .ico,.whatsapp .ico{width:21px;height:21px;flex:none}
.whatsapp .ico{color:#a8d473}
.whatsapp{gap:8px}
.btn-call-text{display:flex;flex-direction:column;gap:1px}
.btn-call-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;opacity:.9}
.btn-call-number{font-size:18px;font-weight:800;letter-spacing:.3px;white-space:nowrap}

/* --- Accessibilité : transitions et focus visibles au clavier --- */
.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:focus-visible{outline:3px solid #082e6d;outline-offset:3px}
.primary:focus-visible{outline-color:#fff}
.whatsapp:focus-visible{outline-color:#fff}
.outline:focus-visible{outline-color:#082e6d}
.nav nav a:focus-visible{outline:2px solid #72952f;outline-offset:3px;border-radius:4px}
.lang:focus-visible{outline:2px solid #72952f;outline-offset:3px;border-radius:4px}
.menu:focus-visible{outline:2px solid #082e6d;outline-offset:3px;border-radius:6px}
.contact-item:focus-visible{outline:2px solid #72952f;outline-offset:3px}

/* --- Hero : entrée en cascade au chargement --- */
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-copy>*,.hero-media{animation:heroIn .65s cubic-bezier(.16,1,.3,1) both}
.hero-copy>*:nth-child(1){animation-delay:0s}
.hero-copy>*:nth-child(2){animation-delay:.08s}
.hero-copy>*:nth-child(3){animation-delay:.16s}
.hero-copy>*:nth-child(4){animation-delay:.24s}
.hero-copy>*:nth-child(5){animation-delay:.32s}
.hero-media{animation-delay:0s}

/* --- Soins : cartes par catégorie, prestations dépliables, icônes Health Icons --- */
.cards{grid-template-columns:repeat(2,1fr)}
@media(max-width:999px){.cards{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column}
.card-icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:16px;border-radius:14px;background:#edf3e3}
.card-icon svg{width:40px;height:40px;color:#082e6d}
/* Équilibrage optique : les 4 icônes Health Icons n'ont pas le même poids
   visuel une fois dessinées (bandage-adhesive occupe toute la diagonale,
   palliative-care flotte au centre). Échelle mesurée par surface d'encre
   réelle à 40px (pixels remplis sur un rendu 40x40), pas par boîte
   englobante — voir le résumé de tâche pour le détail des mesures.
   N'affecte ni les tracés (le sprite plus haut reste inchangé) ni le
   carré de fond #EDF3E3 (.card-icon), seulement l'icône elle-même. */
.card-icon svg use[href="#icon-nurse"]{transform:scale(1.06);transform-box:view-box;transform-origin:center}
.card-icon svg use[href="#icon-bandage"]{transform:scale(1.13);transform-box:view-box;transform-origin:center}
.card-icon svg use[href="#icon-glucose"]{transform:scale(.79);transform-box:view-box;transform-origin:center}
.card-icon svg use[href="#icon-palliative"]{transform:scale(1.2);transform-box:view-box;transform-origin:center}
.card-intro{margin:0 0 14px}
.card-list{margin:0;padding:0;list-style:none;font-size:14.5px;color:#667486}
.card-list li{position:relative;padding:5px 0 5px 22px}
.card-list li::before{content:"";position:absolute;left:3px;top:14px;width:7px;height:7px;border-radius:50%;background:#72952f}
.card-list li:nth-child(n+4){display:none}
.card.open .card-list li:nth-child(n+4){display:block;animation:cardLiIn .3s ease both}
@keyframes cardLiIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.card-more{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 15px;border:1px solid #cbd5df;border-radius:9px;background:#fff;color:#082e6d;font:700 13px Inter;cursor:pointer;min-height:44px;transition:background .2s ease,border-color .2s ease}
.card-more:hover{background:#edf3e3;border-color:#b7c98e}
.card-more:focus-visible{outline:3px solid #082e6d;outline-offset:3px}
.card-more .chev{width:15px;height:15px;transition:transform .25s ease}
.card.open .card-more .chev{transform:rotate(180deg)}
.card.open{border-color:#b7c98e;box-shadow:0 15px 38px #082e6d14}
@media (hover:hover) and (min-width:1000px){.card:hover .card-list li:nth-child(n+4){display:block}}

/* Lien "en savoir plus" d'une carte de soins vers sa page dédiée : même habillage
   visuel que .card-more (bouton bordé, mêmes tokens), mais classe distincte car
   c'est un simple lien, pas le bouton de dépliement de la liste (script.js cible
   .card-more spécifiquement pour le mécanisme d'ouverture/fermeture). */
.card-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 15px;border:1px solid #cbd5df;border-radius:9px;background:#fff;color:#082e6d;font:700 13px Inter;text-decoration:none;min-height:44px;transition:background .2s ease,border-color .2s ease}
.card-link:hover{background:#edf3e3;border-color:#b7c98e}
.card-link:focus-visible{outline:3px solid #082e6d;outline-offset:3px}
.card-link svg{width:15px;height:15px}
.care-more{text-align:center;margin-top:32px;color:#3a4a5c}
.care-more .card-link{margin-top:0;margin-left:8px}

/* Compense le header collant (.header, 82px de haut, position:sticky) pour
   que les sections cibles d'une ancre arrivent visibles sous le header,
   qu'il s'agisse d'un clic sur la page elle-meme ou d'une arrivee depuis une
   autre page (ex. lien du footer d'une page de soins vers /fr/#contact). */
#accueil,#soins,#equipe,#secteur,#contact{scroll-margin-top:90px}

/* Apparition en fondu des icônes à l'entrée dans le viewport, une seule fois */
.card-icon{opacity:0;transform:translateY(10px)}
.card.seen .card-icon{animation:cardIconIn .6s cubic-bezier(.16,1,.3,1) both}
.card.seen:nth-child(2) .card-icon{animation-delay:.08s}
.card.seen:nth-child(3) .card-icon{animation-delay:.16s}
.card.seen:nth-child(4) .card-icon{animation-delay:.24s}
@keyframes cardIconIn{to{opacity:1;transform:none}}
.trust-card.seen .card-icon{animation:cardIconIn .6s cubic-bezier(.16,1,.3,1) both}
.trust-card.seen:nth-child(2) .card-icon{animation-delay:.08s}
.trust-card.seen:nth-child(3) .card-icon{animation-delay:.16s}

/* --- Icônes Lucide : badges topbar, réassurance, secteur, INAMI, contact --- */
.topbar-badges span{display:inline-flex;align-items:center;gap:6px}
.topbar-badges .ico{width:14px;height:14px;flex:none}
.inami .container{align-items:start}
.inami div{align-items:center;margin-top:6px}
.inami span{display:inline-flex;align-items:center}
.inami span svg{width:20px;height:20px;flex:none}
.floating svg{width:26px;height:26px}

/* --- Notre engagement : piliers dans la grille .cards, sans les mécanismes des cartes de soins ---
   Fusionné avec l'ancienne section "Pourquoi choisir" (voir CONTENT.md) : 5 piliers désormais. */
.pillar{padding:26px;border:1px solid #e2e8ec;border-radius:18px;background:#fff;text-align:center}
.pillar-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:14px;background:#edf3e3}
.pillar-icon svg{width:32px;height:32px;color:#082e6d}
.pillar h3{font:700 18px Poppins;color:#082e6d;margin:0 0 8px}
.pillar p{font-size:14px;color:#667486;margin:0}
.pillar:last-child{grid-column:1/-1}
@media(max-width:760px){.pillar:last-child{grid-column:auto}}

/* --- Secteur : carte interactive (10 communes desservies), reprise de docs/secteur-design-v4.html.
   Tout est scopé sous #secteur pour ne pas interférer avec les classes génériques du
   reste du site (h2, .lead, .cta existent déjà ailleurs avec d'autres règles). --- */
#secteur .area-panel{background:#fff;border:1px solid #e2e8ec;border-radius:28px;box-shadow:0 20px 60px #082e6d0f;padding:44px}
#secteur .area-top{display:grid;grid-template-columns:37% 1fr;gap:38px;align-items:center}
#secteur .eyebrow{display:flex;align-items:center;gap:12px}
#secteur .eyebrow::after{content:"";width:46px;height:2px;background:#72952f;border-radius:2px;opacity:.45}
#secteur h2{font:700 clamp(30px,3.4vw,44px)/1.12 Poppins;color:#082e6d;margin:14px 0 14px;letter-spacing:-.6px}
#secteur .area-lead{color:#637083;margin:0 0 26px}
#secteur .area-minis{display:flex;flex-wrap:wrap;gap:10px 0;margin-bottom:28px}
#secteur .area-mini{flex:1 1 33%;display:flex;align-items:center;gap:11px;padding-right:14px}
#secteur .area-mini i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#edf3e3;flex:none}
#secteur .area-mini i svg{width:19px;height:19px;stroke:#72952f;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#secteur .area-mini b{display:block;font:700 14.5px Inter;color:#082e6d;line-height:1.25}
#secteur .area-mini small{color:#667486;font-size:12.5px}
#secteur .area-cta{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:14px 26px;border-radius:14px;background:#72952f;color:#fff;text-decoration:none;font:700 15px Inter;box-shadow:0 10px 24px #72952f40;transition:transform .18s ease,box-shadow .18s ease}
#secteur .area-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px #72952f52}
#secteur .area-cta:focus-visible{outline:3px solid #082e6d;outline-offset:3px}
#secteur .area-cta svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#secteur .area-note{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:#667486;font-size:13px}
#secteur .area-note svg{width:15px;height:15px;stroke:#72952f;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* carte : positions et tracé de zone calculés (projection + enveloppe convexe élargie),
   repris tels quels de la maquette — voir areaCoords / AREA_ZONE_PATH dans script.js */
#secteur .area-map{position:relative;aspect-ratio:1.62/1;border-radius:22px;overflow:visible;background:linear-gradient(160deg,#f9fbf8,#eef4e9)}
#secteur .area-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#secteur .area-zone{fill:#72952f21;stroke:#72952f57;stroke-width:.45;stroke-dasharray:2.2 2.6;opacity:0;transition:opacity 1s ease}
#secteur .area-map.on .area-zone{opacity:1}
#secteur .area-guide{stroke:#72952f80;stroke-width:.3;stroke-dasharray:1.2 1.8;opacity:0;transition:opacity .7s ease .3s}
#secteur .area-map.on .area-guide{opacity:.55}
#secteur .area-comet{stroke:#72952f;stroke-width:.85;stroke-linecap:round;stroke-dasharray:.11 .89;stroke-dashoffset:1;opacity:0}
#secteur .area-map.on .area-comet{animation:areaTravel .8s cubic-bezier(.3,0,.5,1) forwards;animation-delay:var(--t)}
#secteur .area-comet.replay{animation:areaTravel .8s cubic-bezier(.3,0,.5,1) forwards}
@keyframes areaTravel{0%{stroke-dashoffset:1;opacity:0}12%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* pin en goutte + ombre portée + étiquette à côté */
#secteur .area-pin{position:absolute;transform:translate(-50%,-100%);opacity:0;display:flex;align-items:center;gap:7px}
#secteur .area-map.on .area-pin{animation:areaDrop .5s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--t)}
@keyframes areaDrop{from{opacity:0;transform:translate(-50%,-135%)}to{opacity:1;transform:translate(-50%,-100%)}}
#secteur .area-pin[data-side="l"]{flex-direction:row-reverse;transform:translate(-50%,-100%)}
#secteur .area-pinico{width:25px;height:25px;fill:#72952f;flex:none;filter:drop-shadow(0 5px 5px #082e6d38);transition:transform .2s ease}
#secteur .area-pin .area-tag{background:#fff;border:1px solid #e2e8ec;border-radius:9px;padding:5px 11px;font:700 12.5px Inter;color:#082e6d;white-space:nowrap;box-shadow:0 4px 12px #082e6d17;transition:.2s}
#secteur .area-pin.main .area-pinico{width:34px;height:34px;fill:#082e6d;filter:drop-shadow(0 7px 7px #082e6d4d)}
#secteur .area-pin.main .area-tag{background:#082e6d;border-color:#082e6d;color:#fff;font-size:13.5px;padding:7px 14px}
#secteur .area-pin.act .area-tag{border-color:#b7c98e;background:#edf3e3}
#secteur .area-pin.act .area-pinico{transform:scale(1.14)}

/* communes en cartes cliquables */
#secteur .area-communes{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-top:34px}
#secteur .cmn{display:flex;align-items:center;gap:10px;padding:14px 14px;background:#fff;border:1px solid #e2e8ec;border-radius:14px;cursor:pointer;text-align:left;font:700 14px Inter;color:#082e6d;transition:.2s}
#secteur .cmn .area-pinico{width:19px;height:19px;filter:none}
#secteur .cmn span{flex:1}
#secteur .cmn .chev{width:16px;height:16px;stroke:#cbd5df;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:.2s}
#secteur .cmn:hover,#secteur .cmn:focus-visible{border-color:#b7c98e;background:#f8faf5;box-shadow:0 8px 20px #082e6d12}
#secteur .cmn:hover .chev,#secteur .cmn:focus-visible .chev{stroke:#72952f;transform:translateX(2px)}
#secteur .cmn:focus-visible{outline:3px solid #082e6d;outline-offset:2px}
#secteur .muted{margin-top:18px}

@media(max-width:1000px){
  #secteur .area-panel{padding:28px}
  #secteur .area-top{grid-template-columns:1fr;gap:28px}
  #secteur .area-map{aspect-ratio:1.5/1}
  #secteur .area-communes{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  #secteur .area-panel{padding:22px;border-radius:20px}
  #secteur .area-map{display:none}
  #secteur .area-mini{flex:1 1 100%}
  #secteur .area-cta{width:100%;justify-content:center}
  #secteur .area-communes{grid-template-columns:1fr;margin-top:22px}
}

/* --- Contact : blocs coordonnées cliquables, encadré de disponibilité --- */
.contact-item{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1px solid #e2e8ec;border-radius:18px;color:#11233e;text-decoration:none;transition:border-color .2s ease,background .2s ease}
.contact-item:hover{border-color:#b7c98e;background:#f8faf5}
.contact-item-icon{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:14px;background:#edf3e3;color:#082e6d}
.contact-item--phone .contact-item-icon,.contact-item--whatsapp .contact-item-icon{color:#72952f}
.contact-item-icon svg{width:22px;height:22px}
.contact-item-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.contact-item{min-width:0}
.contact-item-text small{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#68768a}
.contact-item-text b{font-size:17px;font-weight:800;color:#082e6d;overflow-wrap:anywhere}
.availability-box{display:flex;align-items:flex-start;gap:12px;margin-top:14px;padding:16px;border-radius:14px;background:#edf3e3}
.availability-box svg{width:22px;height:22px;flex:none;color:#082e6d;margin-top:1px}
.availability-box p{margin:0;display:flex;flex-direction:column;gap:2px}
.availability-box b{color:#082e6d;font-size:14px}
.availability-box span{font-size:13px;color:#405a17}
.privacy svg{width:18px;height:18px;flex:none;color:#637083;margin-top:1px}

/* --- Footer : 4 colonnes, pastilles et boutons de contact sur fond marine --- */
.footer-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.footer-chips span{padding:6px 12px;border-radius:30px;background:#ffffff1a;color:#fff;font-weight:700;font-size:12.5px}
.footer-contact{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.footer-contact-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:#ffffff1a;color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;transition:background .2s ease}
.footer-contact-btn:hover{background:#ffffff2e}
.footer-contact-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.footer-contact-btn svg{width:18px;height:18px;flex:none;color:#aaca65}
@media(max-width:980px) and (min-width:761px){.footer-grid{grid-template-columns:1fr 1fr}}

/* --- Barre d'appel : topbar desktop, bandeau plein largeur sur mobile --- */
@media(max-width:980px){
  .topbar-badges span:nth-child(n+5){display:none}
  .topbar-phone{font-size:14px}
}
@media(max-width:760px){
  .topbar-inner{justify-content:center;padding:0}
  .topbar-badges{display:none}
  .topbar-phone{width:100%;justify-content:center;margin:0;padding:6px 0;border-radius:0;font-size:16px}
  .topbar-phone .ico{width:18px;height:18px}
}

/* --- Correctif débordement horizontal : le nav desktop (liens + téléphone + FR/NL) ne
   tenait plus dans la largeur disponible dès 884px et débordait jusqu'à 760px (mesuré :
   117px de débordement à 768px). Le seuil de bascule vers le menu hamburger, auparavant
   760px, est relevé à 900px pour couvrir toute la plage concernée ; le numéro reste
   joignable dans le header sticky, en bouton compact. --- */
@media(max-width:900px){
  .nav{height:70px;justify-content:space-between}
  .brand{min-width:0}
  .brand img{width:52px;height:52px}
  .brand span{display:none}
  .menu{display:block;margin-left:14px;order:2;border:0;background:#eef3e7;border-radius:9px;padding:9px 12px;font-size:21px}
  .nav nav{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;padding:18px 24px;flex-direction:column;box-shadow:0 10px 25px #082e6d18}
  .nav nav.open{display:flex}
  .actions{margin-left:auto;order:1;gap:0}
  .actions>span,.lang{display:none}
  .phone{width:42px;height:42px;padding:0;justify-content:center;background:#eef3e7;border-radius:50%}
  .phone .num{display:none}
  .phone .ico{width:19px;height:19px}
}
/* --- Densité mobile : la page paraissait trop aérée sous 760px --- */
@media(max-width:760px){
  .card-icon,.pillar-icon{margin-bottom:8px}
  .card-list li{padding:3px 0 3px 20px}
  .footbrand img{width:auto;height:40px}
  .nav{height:60px}
  .nav nav{top:60px}
}
/* --- Qui sommes-nous : bloc "Travailler en binôme", pleine largeur sur fond marine ---
   .duo est un enfant direct de la section (pas de .container englobant), donc déjà
   pleine largeur sans artifice de "full-bleed" ; on neutralise seulement le padding-bottom
   de la section pour éviter une bande claire sous le bloc marine. */
#equipe{padding-bottom:0}
.duo{position:relative;background:#082e6d;color:#fff;padding:104px 0;overflow:hidden}
.duo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 12%,rgba(168,212,115,.13),transparent 42%),radial-gradient(circle at 84% 88%,rgba(168,212,115,.09),transparent 46%)}
.duo>.container{position:relative}
.duo-head{text-align:center;max-width:760px;margin:0 auto}
.duo-eye{font:800 13px Inter;letter-spacing:2.4px;color:#a8d473}
.duo h2{font:700 clamp(30px,4vw,46px) Poppins;margin:12px 0 0;color:#fff;letter-spacing:-.5px}
.duo-intro{font-size:19px;color:#c9d7ea;margin:18px auto 0;max-width:640px}
.duo-pull{position:relative;max-width:900px;margin:52px auto 0;text-align:center;font:600 clamp(21px,2.5vw,30px)/1.42 Poppins;color:#a8d473;letter-spacing:-.3px}
.duo-pull::before{content:"";display:block;width:54px;height:3px;border-radius:3px;background:#a8d473;margin:0 auto 26px}
.duo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:62px}
.duo-item{padding:0 34px;border-left:1px solid rgba(255,255,255,.14)}
.duo-item:first-child{border-left:0;padding-left:0}
.duo-item:last-child{padding-right:0}
.duo-item i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(168,212,115,.14);margin-bottom:18px}
.duo-item i svg{width:23px;height:23px;stroke:#a8d473;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.duo-item p{margin:0;font-size:15.5px;color:#d7e2f0}
@media(max-width:900px){
  .duo{padding:64px 0}
  .duo-grid{grid-template-columns:1fr;gap:32px;margin-top:44px}
  .duo-item{padding:0;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:26px}
  .duo-item:first-child{border-top:0;padding-top:0}
  .duo-pull{margin-top:40px}
  .duo-intro{font-size:17px}
}

/* Apparition en fondu des icônes à l'entrée dans le viewport, une seule fois (même principe que .card-icon) */
.duo-item i{opacity:0;transform:translateY(10px)}
.duo.seen .duo-item i{animation:cardIconIn .6s cubic-bezier(.16,1,.3,1) both}
.duo.seen .duo-item:nth-child(2) i{animation-delay:.08s}
.duo.seen .duo-item:nth-child(3) i{animation-delay:.16s}

/* --- Gabarit commun des pages de contenu long format : pages légales
   (mentions légales, confidentialité) et pages de soins dédiées (soins de
   plaies, etc.). Aucune des classes de titres existantes (.heading h2,
   .card h3...) ne convient à une page de texte suivi, d'où ce petit bloc
   dédié. Nommage neutre (.content-page/.content-body, plus "legal-*")
   depuis que les pages de soins le réutilisent aussi (étape 4 de la
   migration) — .legal-updated et .legal-todo restent tels quels, propres
   aux pages légales. Mêmes tokens que le reste du site, rien de nouveau. */
.content-page .heading{text-align:left;margin:0 0 10px;max-width:none}
.content-page .legal-updated{color:#68768a;font-size:14px;margin:0 0 40px}
.content-body{max-width:760px}
.content-body h3{font:700 20px Poppins;color:#082e6d;margin:36px 0 12px}
html:lang(nl) .content-body h3{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
.content-body h3:first-child{margin-top:0}
.content-body p{margin:0 0 14px;color:#3a4a5c;overflow-wrap:anywhere}
.content-body ul{margin:0 0 14px;padding-left:20px;color:#3a4a5c}
.content-body li{margin:4px 0;overflow-wrap:anywhere}
.legal-todo{display:inline;background:#fff3cd;color:#7a5c00;padding:1px 6px;border-radius:4px;font-weight:700}
/* Liste à puce verte (.card-list) réutilisée dans le texte suivi d'une page de
   soins : sur la grille de cartes de l'accueil, .card-list masque les éléments
   au-delà de 3 tant que .card n'a pas la classe .open (dépliement au clic sur
   .card-more, voir script.js). Cette troncature n'a pas lieu d'être ici : la
   liste fait partie du texte de la page et doit s'afficher entièrement.
   Seul l'habillage visuel (puce verte) est repris. */
.content-body .card-list{margin:0 0 14px}
.content-body .card-list li:nth-child(n+4){display:block}

/* --- En-tete des pages de soins dediees (src/_includes/_soin-header.njk),
   d'apres la maquette fournie (entete-pages-soins.html) : meme degrade que
   le hero de l'accueil (.hero), pictogramme dans un carre blanc surelevé
   avec un carre vert pale imbrique. La maquette utilise deux rayons (34px,
   24px) et une couleur d'ombre (rgba(8,46,109,.09)) qui n'existent pas
   ailleurs sur le site : repris avec les rayons deja en place (28px, comme
   .hero-media img/.area-panel ; 14px, comme .card-icon/.pillar-icon) et la
   meme couleur d'ombre que .area-pin .area-tag (#082e6d17 = rgba(8,46,109,
   .09), memes decimales) — aucune nouvelle couleur, aucun nouveau rayon. Le
   h1 partage la meme regle que .heading h1 (voir plus haut) plutot que
   d'etre duplique. */
.soin-hero{background:linear-gradient(120deg,#f9fbf8 0 55%,#eef4e9 55%);overflow:hidden}
.soin-hero-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;padding:56px 0}
.soin-hero-copy{min-width:0}
.soin-hero-copy h1{max-width:14ch;margin:12px 0 14px}
html:lang(nl) .soin-hero-copy h1{-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
.soin-hero-copy .lead{margin:0}
.soin-pictogram{display:grid;place-items:center;width:168px;height:168px;flex:none;position:relative;border-radius:28px;background:#fff;box-shadow:0 14px 40px #082e6d17}
.soin-pictogram::before{content:"";position:absolute;inset:14px;border-radius:14px;background:#edf3e3}
.soin-pictogram svg{position:relative;width:86px;height:86px;color:#082e6d}
.soin-pictogram--thin svg{width:78px;height:78px}
@media(max-width:820px){
  .soin-hero-grid{grid-template-columns:1fr;padding:34px 0;gap:20px;text-align:center}
  .soin-pictogram{order:-1;margin:0 auto;width:104px;height:104px}
  .soin-pictogram::before{inset:10px}
  .soin-pictogram svg{width:54px;height:54px}
  .soin-pictogram--thin svg{width:50px;height:50px}
  .soin-hero-copy h1{max-width:none}
}
/* Facteurs d'echelle des icones Health Icons (poids d'encre inegal entre
   traces) : nurse/bandage/palliative reprennent telles quelles les valeurs
   des cartes de l'accueil (.card-icon) ; glucose est recalculee pour ce
   contexte (1.15 au lieu de .79 des cartes) — voir CONTENT.md, section
   "En-tete avec pictogramme", pour le detail du raisonnement. Verifie
   visuellement a la taille de ce composant (86px). */
.soin-pictogram svg use[href="#icon-nurse"]{transform:scale(1.06);transform-box:view-box;transform-origin:center}
.soin-pictogram svg use[href="#icon-bandage"]{transform:scale(1.13);transform-box:view-box;transform-origin:center}
.soin-pictogram svg use[href="#icon-glucose"]{transform:scale(1.15);transform-box:view-box;transform-origin:center}
.soin-pictogram svg use[href="#icon-palliative"]{transform:scale(1.2);transform-box:view-box;transform-origin:center}

/* Neutralise les transitions/animations existantes ; ajouter ici toute
   nouvelle règle transition/animation introduite dans les étapes suivantes
   (même sélecteur, valeur "none") pour qu'elle reste couverte. */
@media(prefers-reduced-motion:reduce){
  .topbar-phone,.card,.btn,.trust-card{transition:none}
  .topbar-phone:hover .ico,.phone:hover .ico{animation:none}
  .hero-copy>*,.hero-media{animation:none}
  .card-icon{opacity:1;transform:none}
  .card.seen .card-icon{animation:none}
  .card.open .card-list li:nth-child(n+4){animation:none}
  .card-more,.card-more .chev{transition:none}
  .contact-item,.footer-contact-btn{transition:none}
  .duo-item i{opacity:1;transform:none}
  .duo.seen .duo-item i{animation:none}
  .trust-card.seen .card-icon{animation:none}
  #secteur .area-map.on .area-pin{animation:none;opacity:1;transform:translate(-50%,-100%)}
  #secteur .area-map.on .area-comet,#secteur .area-comet.replay{animation:none;opacity:0}
  #secteur .area-map.on .area-zone{opacity:1}
  #secteur .area-map.on .area-guide{opacity:.55}
  #secteur .area-zone,#secteur .area-guide,#secteur .area-cta,#secteur .cmn,#secteur .area-pinico,#secteur .area-pin .area-tag{transition:none}
}

/* Honeypot anti-spam du formulaire de contact (worker/validate.js) : masque
   visuellement et pour les lecteurs d'ecran (aria-hidden sur le conteneur,
   tabindex="-1" sur le champ), mais reste dans le DOM normal (pas
   display:none) pour que les robots simples le remplissent quand meme.
   Meme decalage hors ecran que .skip, sans son comportement :focus. */
.hp-field{position:absolute;left:-9999px}
/* Message de succes/erreur du formulaire (#formStatus, deja aria-live).
   Couleurs deja utilisees ailleurs sur le site : vert de marque pour le
   succes, brun d'avertissement de .legal-todo pour l'erreur. */
#formStatus{font-weight:700;margin-top:10px}
#formStatus.success{color:#72952f}
#formStatus.error{color:#7a5c00}
/* Lien vers la politique de confidentialite complete, dans l'encadre RGPD
   du formulaire (memes couleurs que les liens de pied de page). */
.privacy a{color:#082e6d;font-weight:700}
.privacy a:focus-visible{outline:2px solid #082e6d;outline-offset:2px}