/* ---- le bandeau de cookies : moteur iubenda, habillage maison ----
   Par defaut il sort un pave juridique qui recouvre la moitie d'un telephone.
   Le texte est donc le notre (voir consentement()), et la carte ressemble au
   reste du site : coin arrondi, ombre douce, le vert pour accepter, un contour
   pour refuser — jamais un bouton gris qu'on n'ose pas cliquer. */
/* Sans ces trois « auto », le bandeau garde la hauteur de l'ecran : une colonne
   invisible de 432 px posee sur le heros, qui avale les clics du visiteur. */
/* iubenda pose ses propres classes sur le bandeau (.iubenda-cs-default-floating,
   .iubenda-cs-right…) : une regle qui ne vise que l'identifiant perd contre les
   siennes, meme en !important. D'ou les classes dans le selecteur. */
#iubenda-cs-banner,
#iubenda-cs-banner.iubenda-cs-default-floating,
#iubenda-cs-banner.iubenda-cs-default-floating.iubenda-cs-bottom.iubenda-cs-right{
 font-family:inherit !important;right:18px !important;left:auto !important;
 bottom:18px !important;top:auto !important;width:auto !important;height:auto !important;
 max-width:432px !important;z-index:99990 !important}
#iubenda-cs-banner .iubenda-cs-container{padding:0 !important;background:none !important;
 height:auto !important}
#iubenda-cs-banner .iubenda-cs-content{background:#fff !important;padding:20px 22px 18px !important;
 border:1px solid var(--trait) !important;border-radius:18px !important;
 box-shadow:0 26px 60px -22px rgba(9,32,30,.5) !important}
#iubenda-cs-banner .iubenda-cs-rationale{padding:0 !important;max-width:none !important}
.lim-ck .lim-ck-tete{display:flex;align-items:center;gap:9px;color:var(--vert);margin:0 0 8px}
.lim-ck .lim-ck-tete b{font-size:1.02rem;font-weight:700;color:var(--fonce)}
.lim-ck p{margin:0;font-size:.92rem;line-height:1.6;color:#41544e}
.lim-ck a{color:var(--teal);text-decoration:underline}
#iubenda-cs-banner .iubenda-cs-opt-group{display:flex !important;flex-wrap:wrap !important;
 gap:8px !important;margin:15px 0 0 !important}
#iubenda-cs-banner .iubenda-cs-opt-group button{margin:0 !important;font-family:inherit !important;
 font-size:.88rem !important;font-weight:700 !important;padding:11px 19px !important;
 border:1px solid transparent !important;border-radius:99px !important;box-shadow:none !important}
/* iubenda vise ses boutons avec `.iubenda-cs-btn-primary` : sans cette classe
   dans le selecteur, c'est sa regle qui gagne et le contour ne sort pas. */
#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn,
#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn.iubenda-cs-btn-primary{
 border:1px solid #c2d8d2 !important}
#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn{
 padding-left:10px !important;padding-right:10px !important;text-decoration:underline !important}
@media(max-width:560px){
  /* Meme poids de selecteur qu'au-dessus, sinon la regle de bureau l'emporte
     et la carte se colle au bord gauche du telephone. */
  #iubenda-cs-banner,
  #iubenda-cs-banner.iubenda-cs-default-floating,
  #iubenda-cs-banner.iubenda-cs-default-floating.iubenda-cs-bottom.iubenda-cs-right{
   left:10px !important;right:10px !important;bottom:10px !important;
   width:auto !important;max-width:none !important}
}
:root{
  --vert:#17897f; --fonce:#193838; --teal:#1d7873; --jaune:#f6ba26; --nuit:#030304;
  --brume:#f8f9f9; --sauge:#98a69f; --trait:#d8dedd; --encre:#193838;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--encre);
 font-family:'Manrope',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Les titres et les boutons prennent la police d'affichage des formulaires :
   encadres dans le site, ils doivent avoir l'air d'y appartenir. */
h1,h2,h3,h4,.lim-cta,.fig-chip,.lim-lang-actuelle{
 font-family:'Schibsted Grotesk','Manrope',sans-serif}
a{color:var(--vert);text-decoration:none}
img{max-width:100%}
.lim-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---- en-tete ---- */
.lim-head{background:var(--fonce);color:#fff}
.lim-head .lim-wrap{display:flex;align-items:center;gap:24px;min-height:96px;flex-wrap:wrap}
.lim-logo{display:flex;align-items:center;flex:0 0 auto}
.lim-logo img{height:44px;width:auto;display:block}
.lim-nav{display:flex;gap:30px;margin-left:auto;align-items:center;flex-wrap:wrap}
.lim-nav .lim-nav-cta{display:none}   /* le menu deroulant les montre, pas le bandeau */
.lim-nav a{color:#fff;font-size:.94rem;font-weight:600;opacity:.94}
.lim-nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
/* Le bouton plein porte un liseré transparent de la meme epaisseur que celui du
   bouton cerne : sans lui, les deux boutons cote a cote differaient de 3 px. */
.lim-cta{background:var(--jaune);color:#193838 !important;font-weight:700;font-size:.94rem;
 padding:13px 22px;border-radius:8px;white-space:nowrap;border:1.5px solid transparent;
 box-sizing:border-box}
/* Le survol se voyait a peine : un bouton qui ne repond pas au passage de la
   souris, on ne sait pas s'il est cliquable. Il se souleve, il porte une ombre,
   et le bouton cerne se remplit — meme jaune, pas de couleur nouvelle. */
.lim-cta{transition:transform .13s ease,box-shadow .13s ease,background .13s ease,
 color .13s ease,filter .13s ease}
.lim-cta:hover{filter:brightness(1.06);text-decoration:none !important;
 transform:translateY(-2px);box-shadow:0 10px 22px rgba(246,186,38,.34)}
.lim-cta:active{transform:translateY(0);box-shadow:none}
/* Le second bouton, cerne de jaune : la meme importance, un autre public. */
.lim-cta-nu{background:transparent;color:var(--jaune) !important;
 border:1.5px solid var(--jaune)}
.lim-cta-nu:hover{background:var(--jaune);color:var(--fonce) !important;filter:none;
 transform:translateY(-2px);box-shadow:0 10px 22px rgba(246,186,38,.30)}
/* Trois liens, deux boutons et quatre langues sur une ligne : le bandeau se
   resserre un peu pour tenir jusqu'au bout sans se casser. */
.lim-head .lim-nav{gap:26px}
.lim-head .lim-cta{padding:10px 15px;font-size:.84rem}   /* deux boutons cote a cote : ils annoncent, ils ne crient pas */
/* Sur la page d'un formulaire, le bouton qui y mene pointe sur la page
   elle-meme : on le retire, et on garde celui de l'autre public. */
body.p-demande .lim-head .lim-cta:not(.lim-cta-nu){display:none}
body.p-travailler .lim-head .lim-cta-nu{display:none}
.lim-globe{display:inline-flex;align-items:center;color:rgba(255,255,255,.62)}
.lim-burger{display:none}
.lim-burger-btn{display:none;margin-left:auto;width:44px;height:44px;border-radius:8px;
 border:1.5px solid rgba(255,255,255,.28);background:transparent;cursor:pointer;
 align-items:center;justify-content:center;flex:none}
.lim-burger-btn span{display:block;width:20px;height:2px;background:#fff;position:relative}
.lim-burger-btn span:before,.lim-burger-btn span:after{content:"";position:absolute;left:0;
 width:20px;height:2px;background:#fff}
.lim-burger-btn span:before{top:-6px}.lim-burger-btn span:after{top:6px}

/* ---- selecteur de langue ---- */
.lim-lang{position:relative;display:flex;align-items:center;font-size:.84rem}
.lim-langtog{display:none}
.lim-lang-actuelle{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:700;
 font-size:.82rem;cursor:pointer;padding:8px 11px;border-radius:9px;
 border:1.5px solid rgba(255,255,255,.22);transition:background .13s ease}
.lim-lang-actuelle:hover{background:rgba(255,255,255,.1)}
.lim-lang-actuelle .lim-globe{color:rgba(255,255,255,.72);display:inline-flex}
/* La liste ne s'ouvre qu'au clic : quatre langues alignees en permanence
   pesaient autant que le menu lui-meme, pour un choix qu'on ne fait qu'une fois. */
.lim-lang-liste{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:60;
 flex-direction:column;gap:2px;min-width:76px;background:var(--fonce);
 border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:6px;
 box-shadow:0 14px 30px rgba(3,3,4,.42)}
.lim-langtog:checked ~ .lim-lang .lim-lang-liste{display:flex}
.lim-lang a{color:rgba(255,255,255,.72);font-weight:600;padding:7px 10px;border-radius:6px}
.lim-lang a:hover{color:#fff;background:rgba(255,255,255,.1)}
.lim-lang a[aria-current]{color:#193838;background:var(--jaune)}

/* ---- le bandeau sur telephone ----
   En haut de page : le logo, le menu, les quatre langues ouvertes. Le bouton
   du bandeau reste cache sur l'accueil — le heros a deja le sien, et deux
   boutons identiques l'un sous l'autre ne font qu'hesiter le visiteur.
   Des que ce bouton-la est passe, le bandeau se fixe et se resserre : petit
   logo, bouton court, menu, et la langue du moment qui ouvre les autres. */
@media(max-width:980px){
  .lim-head .lim-wrap{min-height:0;padding-top:14px;padding-bottom:14px;gap:12px}
  .lim-burger-btn{display:flex;margin-left:auto}
  .lim-lang{order:2;margin-left:0}
  .lim-nav{display:none;order:4;width:100%;flex-direction:column;gap:0;margin:6px 0 0;
   border-top:1px solid rgba(255,255,255,.14);padding-top:6px}
  .lim-nav a,.lim-nav .lim-nav-cta{font-size:.95rem;padding:13px 2px;display:block;
   border-bottom:1px solid rgba(255,255,255,.08)}
  .lim-nav a:last-child{border-bottom:none}
  /* Les deux appels n'entrent dans le menu QUE la ou ils manquent ailleurs :
     les repeter quand le bouton est deja a l'ecran, c'est dire deux fois la
     meme chose dans dix centimetres. Le bandeau colle en haut ne garde que
     « Devenir client·e » — l'autre passe donc dans le menu ; et sur une page de
     formulaire, ou les deux boutons sont caches, on propose l'autre public. */
  .lim-nav .lim-nav-cta{display:none;color:var(--jaune);font-weight:700}
  body.lim-fixe .lim-nav .lim-nav-am,
  body.p-demande .lim-nav .lim-nav-am,
  body.p-travailler .lim-nav .lim-nav-client,
  body.p-conditions .lim-nav .lim-nav-cta{display:block}
  .lim-burger:checked ~ .lim-nav{display:flex}
  .lim-head .lim-cta{order:3;width:100%;text-align:center;padding:11px 14px;
   font-size:.86rem}
  /* Sur telephone les deux boutons s'empilent pleine largeur : sur la
     banniere ils sont deja la, et sur une page de formulaire ils poussent
     le formulaire sous la ligne de flottaison. Ils restent dans le menu. */
  body.p-accueil .lim-head .lim-cta,
  body.p-demande .lim-head .lim-cta,
  body.p-travailler .lim-head .lim-cta,
  body.p-conditions .lim-head .lim-cta{display:none}

  body.lim-fixe{padding-top:60px}
  body.lim-fixe .lim-head{position:fixed;top:0;left:0;right:0;z-index:950;
   box-shadow:0 8px 22px rgba(3,3,4,.3)}
  body.lim-fixe .lim-head .lim-wrap{padding:9px 16px;gap:8px;flex-wrap:nowrap}
  body.lim-fixe .lim-logo img{height:26px}
  body.lim-fixe .lim-head .lim-cta{display:inline-block;order:0;width:auto;
   white-space:nowrap;margin-left:auto;padding:9px 11px;font-size:.7rem;
   border-radius:6px;line-height:1.2}
  body.lim-fixe .lim-head .lim-cta-nu{display:none}
  body.lim-fixe .lim-globe{display:none}
  body.lim-fixe .lim-burger-btn{margin-left:0;width:36px;height:36px;flex:none}
  body.lim-fixe .lim-burger-btn span,
  body.lim-fixe .lim-burger-btn span:before,
  body.lim-fixe .lim-burger-btn span:after{width:16px}
  /* Le deroulant est desormais le comportement normal ; le bandeau fixe ne
     fait plus que le resserrer. */
  body.lim-fixe .lim-lang{order:0;margin-left:0;flex:none}
  body.lim-fixe .lim-lang-actuelle{font-size:.76rem;padding:0 9px;height:36px;
   border-radius:6px}
  body.lim-fixe .lim-lang-liste a{display:block;padding:9px 20px;text-align:center;
   font-size:.86rem}
  /* Barre fixe, le menu ne peut plus s'ouvrir DANS la barre : elle est sur une
     seule ligne, et le menu la faisait gonfler en poussant les liens hors de
     l'ecran. Il descend donc en panneau, comme la liste des langues. */
  body.lim-fixe .lim-burger:checked ~ .lim-nav{position:absolute;top:100%;left:0;right:0;
   margin:0;padding:4px 16px 10px;background:var(--fonce);z-index:2;
   border-top:1px solid rgba(255,255,255,.14);box-shadow:0 12px 26px rgba(3,3,4,.4)}
}

/* ---- contenu ---- */
.lim-main{background:var(--brume);min-height:50vh}
/* Le titre, le chapo et le formulaire sont UNE seule page : leur donner deux
   fonds differents dessinait une bande blanche au-dessus du gris, et l'oeil y
   voyait une couture. Le hero ne peint donc plus rien — c'est le gris de
   .lim-main qui court d'un bout a l'autre. */
.lim-hero{background:transparent;padding:56px 0 24px}
.lim-hero h1{font-size:2.5rem;line-height:1.15;margin:0 0 18px;color:var(--fonce);
 letter-spacing:-.02em;max-width:24ch;text-wrap:balance}
.lim-hero p.lim-chapo{font-size:1.12rem;color:#4b5563;max-width:56ch;margin:0 0 14px}
/* La phrase qui demande quelque chose au visiteur ne peut pas avoir le meme
   poids que celle qui l'accueille. */
.lim-hero p.lim-appel{color:var(--fonce);font-weight:600;margin:0 0 28px}
.lim-hero .lim-cta{display:inline-block;padding:15px 26px;font-size:1rem}
.lim-hero .lim-second{display:inline-block;margin-left:14px;font-weight:600;color:var(--vert)}
.lim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:52px 0 64px}
.lim-carte{background:#fff;border:1px solid var(--trait);border-radius:8px;padding:26px 24px}
.lim-carte h3{margin:0 0 8px;font-size:1.06rem;color:var(--teal)}
.lim-carte p{margin:0;color:#4b5563;font-size:.95rem}
.lim-note{background:#fff7e0;border:1px solid var(--jaune);border-radius:8px;
 padding:14px 18px;margin:0 0 26px;font-size:.92rem;color:#6b5300}
@media(max-width:860px){
  .lim-hero{padding:38px 0 18px}
  .lim-hero h1{font-size:1.9rem;max-width:none}
  .lim-grid{grid-template-columns:1fr;padding:34px 0 44px}
  .lim-hero .lim-second{display:block;margin:16px 0 0}
}

/* Un titre que seuls les moteurs et les lecteurs d'ecran voient : la page en a
   besoin, mais le formulaire encadre affiche deja le sien. */
/* Le titre courait toute la largeur pendant que le formulaire, centre dans son
   cadre, restait au milieu : sur un grand ecran, les deux ne commencaient pas au
   meme endroit. Le contenu de ces pages prend donc la largeur du formulaire lui-
   meme (760 px, comme .chg dans la page encadree), et tout s'aligne. Le bandeau,
   lui, garde la pleine largeur. */
body.p-changer .lim-hero .lim-wrap, body.p-changer .lim-form .lim-wrap,
body.p-continuer .lim-hero .lim-wrap, body.p-continuer .lim-form .lim-wrap{
 max-width:760px;padding:0 20px}
body.p-changer .lim-hero h1, body.p-continuer .lim-hero h1{max-width:none}
.lim-head-nue .lim-wrap{justify-content:space-between}
.lim-head-nue .lim-langs-nues{display:flex;gap:6px}
.lim-head-nue .lim-langs-nues a{color:#cfe0dc;text-decoration:none;font-weight:700;
 font-size:.82rem;letter-spacing:.04em;padding:7px 11px;border-radius:99px}
.lim-head-nue .lim-langs-nues a[aria-current]{background:var(--jaune);color:var(--fonce)}
.lim-head-nue .lim-langs-nues a:hover{background:rgba(255,255,255,.12)}
.lim-head-nue .lim-langs-nues a[aria-current]:hover{background:var(--jaune)}

.lim-invisible{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- le formulaire, dans son cadre ---- */
.lim-form{padding:0 0 56px;background:transparent}
.lim-form.lim-seul{padding-top:26px}
.lim-form iframe{width:100%;border:0;min-height:420px;display:block;background:transparent}
/* Le cadre ouvrait a 420 px puis sautait a sa vraie hauteur des que le
   formulaire l'annonce : tout ce qui suit — le pied — descendait d'un coup.
   Mesure du 17-09 sur telephone, /aide-menagere/ : 0,173 de decalage cumule, la
   ou Google demande moins de 0,1. On part donc de la hauteur mesuree, un peu en
   dessous pour que le message d'ajustement reste maitre, et le pas devient
   invisible. A remesurer si un formulaire gagne ou perd une etape. */
body.p-demande .lim-form iframe{min-height:730px}
body.p-travailler .lim-form iframe{min-height:1140px}
body.p-continuer .lim-form iframe{min-height:880px}
@media(max-width:760px){
 body.p-demande .lim-form iframe{min-height:960px}
 body.p-travailler .lim-form iframe{min-height:1730px}
 body.p-continuer .lim-form iframe{min-height:1330px}
}
.lim-form .lim-secours{text-align:center;color:#6b7280;font-size:.9rem;padding:14px 0 0}
/* Ce qu'on regarde pendant que le questionnaire arrive. Trois barres, pas un
   tourniquet : elles ont la forme de ce qui va s'afficher, donc l'attente
   ressemble deja a la page. */
.lim-attente{display:flex;flex-direction:column;gap:14px;padding:26px 0 40px}
.lim-attente span{display:block;height:16px;border-radius:8px;background:var(--trait);
 animation:lim-respire 1.2s ease-in-out infinite}
.lim-attente span:nth-child(1){width:62%}
.lim-attente span:nth-child(2){width:88%;animation-delay:.15s}
.lim-attente span:nth-child(3){width:74%;animation-delay:.3s}
@keyframes lim-respire{0%,100%{opacity:.45}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.lim-attente span{animation:none;opacity:.6}}

/* ---- pied ---- */
.lim-bar{background:var(--nuit);color:#fff;padding:18px 0;border-top:1px solid rgba(255,255,255,.09)}
.lim-bar .lim-wrap{display:flex;gap:20px;flex-wrap:wrap;align-items:center;
 font-size:.86rem;color:rgba(255,255,255,.86)}
.lim-bar .lim-droite{margin-left:auto;color:rgba(255,255,255,.6)}
.lim-foot{background:var(--nuit);color:#fff;padding:44px 0 34px}
.lim-foot .lim-wrap{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.lim-foot img{height:64px;width:auto;display:block;margin-bottom:16px}
.lim-foot p{color:rgba(255,255,255,.72);font-size:.9rem;margin:0 0 10px;max-width:280px}
.lim-foot b{color:#fff;font-weight:700}
.lim-foot h4{font-size:.98rem;font-weight:700;margin:6px 0 14px;color:#fff}
.lim-foot ul{list-style:none;margin:0;padding:0}
.lim-foot li{margin:0 0 10px}
.lim-foot li a,.lim-foot .lim-contact a{color:rgba(255,255,255,.82);font-size:.92rem}
.lim-adresse{color:rgba(255,255,255,.82);font-size:.92rem;line-height:1.5;
 margin-top:14px}
.lim-foot li a:hover{color:#fff}
.lim-social{display:flex;gap:10px;margin-top:14px}
.lim-social a{width:40px;height:40px;border-radius:8px;background:var(--jaune);
 display:flex;align-items:center;justify-content:center}
.lim-social svg{width:20px;height:20px;fill:#193838}
.lim-legal{text-align:center;color:rgba(255,255,255,.45);font-size:.82rem;padding:22px 0 0}
.lim-legal a{color:rgba(255,255,255,.45)}
@media(max-width:860px){
  .lim-foot .lim-wrap{grid-template-columns:1fr 1fr;gap:26px}
  .lim-foot .lim-marque{grid-column:1 / -1}
}
@media(max-width:720px){
  /* Un bouton ne se coupe jamais en deux (`white-space:nowrap`) : c'est ce qui
     garde « Devenir client·e » d'un seul tenant. Mais « Encontrar minha
     colaboradora domestica » mesure 437 px insecables, et c'est toute la page
     qui debordait — la colonne d'une grille ne descend pas sous le plus large
     de ses contenus. Sur telephone, le bouton a donc le droit de passer a la
     ligne. Le bandeau colle en haut garde son `nowrap` : il est plus precis. */
  .lim-cta{white-space:normal}
  /* Le neerlandais soude ses mots : « dienstencheque-agentschap ». Quand un mot
     depasse la largeur de l'ecran, mieux vaut le couper que sortir du cadre. */
  h1,h2,h3,h4{overflow-wrap:break-word}

  /* Trois mentions alignees a gauche et une poussee a droite : sur un telephone
     elles retombaient l'une sous l'autre en marches d'escalier. Elles se
     centrent, les deux gages sur une ligne et la mention de droits sous eux. */
  .lim-bar{padding:14px 0}
  .lim-bar .lim-wrap{justify-content:center;gap:6px 18px;font-size:.78rem;
   text-align:center}
  .lim-bar .lim-droite{margin-left:0;flex:0 0 100%}

  /* Sur un telephone, le pied se lit en une colonne et devenait un long
     couloir. Les quatre services y sont de simples mots, deja annonces par
     « Nos services » du menu juste au-dessus : la colonne sort, et le contact
     remonte a sa place. */
  .lim-foot .lim-presta{display:none}
  /* « Explorez » recopie le menu du bandeau, qui est a deux doigts de la, et
     « Contact » annonce trois lignes qui se lisent seules : un courriel, un
     numero, une adresse. Sur un telephone ou tout s'empile, ces deux blocs ne
     faisaient qu'allonger le couloir. */
  .lim-foot .lim-explore{display:none}
  .lim-foot .lim-contact h4{display:none}
}
@media(max-width:520px){.lim-foot .lim-wrap{grid-template-columns:1fr}}
/* ================= accueil, d'apres la maquette ================= */
/* 660 px de film VISIBLE, comme sur /v2 — plus les 56 px que le bloc a cheval
   vient recouvrir en bas. Sans ce supplement, la banniere paraissait rognee et
   le film comme agrandi : c'etait le bloc qui mangeait le bas de l'image.
   65 px = la moitie de la carte a cheval, mesuree a 1200 px et au-dela. */
.fig-hero{position:relative;min-height:725px;display:flex;align-items:center;
 background:#0d2b28 center/cover no-repeat;color:#fff;text-align:left}
.fig-hero:before{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,rgba(9,32,30,.72),rgba(9,32,30,.55) 45%,rgba(9,32,30,.8))}
.fig-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fig-hero:before{z-index:1}
/* Le texte reste centre dans la partie VISIBLE : les 65 px recouverts sont
   ajoutes au bas du rembourrage, pas partages en deux. */
.fig-hero .lim-wrap{position:relative;z-index:2;width:100%;
 padding-top:80px;padding-bottom:145px}
.fig-chip{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.14em;
 text-transform:uppercase;padding:8px 16px;border-radius:99px}
.fig-chip svg{vertical-align:-3px;margin-right:7px;opacity:.9}
.fig-hero .fig-chip{background:rgba(255,255,255,.14);color:#fff;
 border:1px solid rgba(255,255,255,.28)}
/* Le titre tient sur deux lignes : etale sur toute la largeur d'un ecran de
   bureau, l'oeil doit revenir de trop loin pour attraper le debut de la ligne
   suivante. C'est aussi ce qui met « de confiance » a part. */
/* Le titre tombe en trois lignes, « de confiance » sur la sienne : c'est la
   mesure de la maquette, et c'est ce qui detache l'accent. */
.fig-hero h1{font-size:3.6rem;line-height:1.08;font-weight:700;margin:22px 0 0;
 letter-spacing:-.02em;max-width:17ch}
/* Le trait jaune separe le titre de ce qu'on fait, comme sur la maquette. */
.fig-hero h1 + .fig-trait{margin:22px 0 20px}
/* Pas de largeur imposee : la phrase tient sur une ligne dans les quatre
   langues, et « preparation de / repas » coupe en deux ne voulait plus rien
   dire. Sur un petit ecran elle se replie toute seule. */
.fig-hero p{font-size:1.06rem;color:rgba(255,255,255,.9);margin:0 0 30px}
.fig-hero .lim-cta{display:inline-block;padding:13px 28px;font-size:.95rem;border-radius:6px}
/* L'accent ne se coupe pas : « de » resté seul en fin de ligne et « confiance »
   tout seul en dessous ne formaient plus une expression. */
.fig-hero h1 .fig-accent{color:var(--jaune);white-space:nowrap}
/* Les deux portes ont la MEME largeur : c'est le meme geste, pour deux publics.
   Une largeur fixe aurait serre le neerlandais et gonfle l'anglais — les deux
   se partagent donc la place a egalite, quelle que soit la longueur du mot. */
.fig-portes{display:flex;gap:14px;flex-wrap:wrap;max-width:580px;margin:0}
.fig-portes .lim-cta{flex:1 1 0;min-width:210px;text-align:center}
/* Sur le film, la ligne de reserve n'est pas un slogan : elle ecarte tout de
   suite ceux qu'on ne peut pas servir. Discrete, mais lisible. */
.fig-hero p.fig-reserve{display:flex;align-items:center;gap:9px;max-width:none;
 margin:28px 0 0;font-size:.95rem;color:rgba(255,255,255,.82)}
.fig-hero p.fig-reserve svg{flex:none;opacity:.85}
/* Les trois reperes chevauchent la banniere : le bloc mord sur le film, et la
   page commence donc AVANT que le film ne finisse — l'oeil descend tout seul. */
/* Le bloc ne prend AUCUNE place dans le flux : le film touche directement la
   section suivante, et la carte est posee a cheval sur la couture. Des marges
   negatives laissaient une bande blanche de la hauteur qui depassait — ici il
   n'y a plus rien a depasser. */
.fig-atouts{position:relative;z-index:3;height:0}
.fig-atouts .lim-wrap{transform:translateY(-50%)}
.fig-atouts-carte{background:#fff;border:1px solid #e8e7e0;border-radius:18px;
 display:grid;grid-template-columns:repeat(3,1fr);
 box-shadow:0 18px 44px rgba(9,32,30,.12)}
.fig-atout{display:flex;align-items:center;gap:16px;padding:24px 26px}
.fig-atout + .fig-atout{border-left:1px solid #e2e8e1}
.fig-rond{flex:none;width:52px;height:52px;border-radius:50%;background:#e6ede7;
 color:var(--teal);display:flex;align-items:center;justify-content:center}
.fig-atout b{display:block;font-size:1.02rem;color:var(--fonce);margin:0 0 3px}
.fig-atout span{font-size:.9rem;color:#5d6f68;line-height:1.45}

/* ---- nos valeurs, en deux colonnes ---- */
.fig-valeurs{background:var(--fond-valeurs);color:var(--encre-valeurs);
 padding:110px 0 84px;text-align:center}
.fig-valeurs .fig-chip{background:var(--pastille-valeurs);color:var(--encre-valeurs);
 border:1px solid var(--trait-valeurs)}
.fig-valeurs h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.02em;
 margin:20px 0 12px}
.fig-valeurs .fig-intro{max-width:64ch;margin:0 auto 46px;font-size:1.04rem;
 color:var(--encre-valeurs);opacity:.82;line-height:1.6}
.fig-valcarte{background:#fff;border:1px solid #e8e7e0;border-radius:20px;
 padding:30px 30px 28px;display:flex;flex-direction:column;
 box-shadow:0 16px 40px rgba(9,32,30,.07)}
.fig-valcarte header{display:flex;gap:18px;align-items:flex-start}
.fig-valcarte h3{font-size:1.45rem;font-weight:700;color:var(--fonce);margin:0 0 8px}
.fig-valcarte header p{font-size:.96rem;color:#5d6f68;line-height:1.55;margin:0}
/* Le trait jaune : il separe la promesse de sa demonstration. */
.fig-trait{display:block;width:56px;height:3px;border-radius:2px;background:var(--jaune);
 margin:24px 0 20px}
.fig-checks{list-style:none;margin:0 0 26px;padding:0;flex:1}
.fig-checks li{display:flex;align-items:center;gap:12px;padding:11px 0;
 border-bottom:1px solid #edf1ea;font-size:.97rem;color:var(--fonce)}
.fig-checks li:last-child{border-bottom:none}
.fig-checks svg{flex:none}
.fig-valcarte .lim-cta{text-align:center;padding:15px 22px;border-radius:10px}
/* Le bouton des aides-menageres : le meme poids, sur une carte claire — cerne
   de fonce, il ne vole pas l'oeil au bouton client sans s'effacer pour autant. */
.lim-cta-sombre{background:transparent;color:var(--fonce) !important;
 border:1.5px solid var(--fonce)}
.lim-cta-sombre:hover{background:var(--fonce);color:#fff !important;filter:none}
.fig-note{margin:34px 0 0;font-size:.86rem;color:var(--encre-valeurs);opacity:.7}

/* ---- les trois prestations et le parcours : meme grammaire, deux habits ---- */
.fig-presta,.fig-parcours{background:var(--fond);color:var(--encre);
 padding:96px 0 100px;text-align:center}
.fig-presta .fig-chip,.fig-parcours .fig-chip{background:var(--pastille);
 color:var(--encre);border:1px solid var(--pastille-bord)}
.fig-presta h2,.fig-parcours h2{font-size:clamp(1.9rem,3.3vw,2.6rem);font-weight:700;
 letter-spacing:-.02em;margin:20px auto 12px}
.fig-presta h2{max-width:20ch}
.fig-presta .fig-intro,.fig-parcours .fig-intro{color:var(--doux);font-size:1.02rem;
 max-width:62ch;margin:0 auto}
.fig-trait-centre{margin-left:auto;margin-right:auto}
.fig-presta > .lim-wrap > .fig-trait,
.fig-parcours > .lim-wrap > .fig-trait{margin:22px auto 0}
.fig-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px;
 text-align:left}
.fig-presta-carte{background:var(--carte);border:1px solid var(--carte-bord);
 border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
 box-shadow:var(--ombre)}
/* La photo dit ce qu'un pictogramme ne dira jamais : que c'est une vraie
   personne qui vient, et a quoi ressemble l'heure qu'on achete. */
.fig-presta-photo{position:relative;aspect-ratio:16/10;background:#e6ede7}
.fig-presta-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Le medaillon fait la couture entre la photo et le texte. */
.fig-medaillon{position:absolute;left:22px;bottom:-27px;width:54px;height:54px;
 border-radius:50%;background:#fff;color:var(--teal);display:flex;align-items:center;
 justify-content:center;box-shadow:0 6px 18px rgba(9,32,30,.16)}
.fig-medaillon svg{width:24px;height:24px}
.fig-presta-corps{padding:42px 24px 26px;display:flex;flex-direction:column;flex:1}
.fig-rond-grand{width:78px;height:78px}
.fig-presta-carte h3{font-size:1.24rem;font-weight:700;color:var(--fonce);margin:0 0 10px}
.fig-presta-carte .fig-trait{margin:18px 0 16px}
.fig-presta-corps .fig-checks-min{margin-top:16px}
/* Le bouton se cale en bas : la premiere carte est la seule a en porter un, et
   sans ce calage il flottait au milieu de sa carte. */
.fig-presta-lien{margin-top:auto;text-align:center;padding:13px 18px;border-radius:10px}

.fig-presta-carte p{color:#5d6f68;font-size:.95rem;line-height:1.6;margin:0}
.fig-presta-corps > p:first-of-type{min-height:3.2em}
.fig-checks-min{list-style:none;margin:0;padding:0}
.fig-checks-min li{display:flex;align-items:center;gap:10px;padding:7px 0;
 font-size:.92rem;color:var(--fonce)}
.fig-checks-min svg{width:17px;height:17px;flex:none}

.fig-frais{background:var(--vert);color:#fff;padding:66px 0 76px;text-align:center}
.fig-frais h2{font-size:2.6rem;font-weight:700;margin:0 0 12px;letter-spacing:-.02em}
.fig-frais>.lim-wrap>p{color:rgba(255,255,255,.9);max-width:60ch;margin:0 auto 42px}
.fig-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;text-align:left}
.fig-carte{background:#fff;color:var(--encre);border-radius:12px;padding:30px 28px;
 box-shadow:0 18px 40px rgba(0,0,0,.12)}
.fig-carte h3{margin:0 0 20px;font-size:1.25rem;font-weight:600;color:var(--fonce)}
.fig-formule{background:#f1f7f5;border:1px solid #d6e7e3;border-radius:10px;
 padding:22px;text-align:center;margin-bottom:22px}
.fig-formule b{font-size:1.7rem;font-weight:700;color:var(--teal)}
.fig-formule span{display:block;color:#6b7280;font-size:.92rem;margin-top:6px}
.fig-liste{list-style:none;margin:0;padding:0}
.fig-liste li{display:flex;gap:12px;margin:0 0 16px}
.fig-liste li:last-child{margin-bottom:0}
.fig-tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--vert);color:#fff;
 display:flex;align-items:center;justify-content:center;font-size:.72rem;margin-top:2px}
.fig-liste b{display:block;font-size:.96rem;font-weight:600}
.fig-liste small{color:#6b7280;font-size:.86rem;line-height:1.5}
.fig-compare{border:1px solid var(--trait);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.fig-compare.on{background:var(--vert);border-color:var(--vert);color:#fff}
.fig-compare b{display:block;font-size:.98rem;margin-bottom:5px}
.fig-compare p{margin:0;font-size:.88rem;color:#6b7280;line-height:1.55}
.fig-compare.on p{color:rgba(255,255,255,.9)}
.fig-savoir{background:#fff8e6;border:1px solid #f3dfa6;border-radius:10px;padding:14px 16px}
.fig-savoir b{display:block;font-size:.9rem;margin-bottom:4px;color:#7a5c00}
.fig-savoir p{margin:0;font-size:.86rem;color:#6b5300;line-height:1.55}

.fig-pourquoi{background:#fff;padding:80px 0}
.fig-pourquoi .lim-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.fig-pourquoi h2{font-size:2.7rem;line-height:1.12;font-weight:700;margin:18px 0 18px;
 color:var(--fonce);letter-spacing:-.02em}
.fig-pourquoi>.lim-wrap>div>p{color:#4b5563;margin:0 0 26px;max-width:52ch}
.fig-pourquoi .fig-chip{background:#eef4f3;color:var(--teal)}
.fig-points{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--trait)}
.fig-points li{display:flex;gap:12px;align-items:center;padding:14px 0;
 border-bottom:1px solid var(--trait);font-weight:600;font-size:.98rem}
.fig-photo{border-radius:12px;overflow:hidden;box-shadow:0 20px 46px rgba(9,32,30,.16)}
.fig-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---- le parcours en quatre etapes ---- */
.fig-quatre{position:relative;display:grid;grid-template-columns:repeat(4,1fr);
 gap:22px;margin-top:78px}
/* Le fil pointille qui relie les quatre numeros : c'est lui qui dit que ce sont
   des ETAPES et pas quatre arguments cote a cote. Il court d'un centre de
   colonne a l'autre — 12,5 % de chaque cote sur quatre colonnes egales — et
   passe derriere les pastilles, qui l'interrompent en l'occultant. */
.fig-quatre:before{content:"";position:absolute;top:-29px;left:12.5%;right:12.5%;
 border-top:2px dotted var(--fil);z-index:0}
.fig-pas{position:relative;z-index:1;background:var(--carte);
 border:1px solid var(--carte-bord);border-radius:20px;padding:30px 24px 28px;
 display:flex;flex-direction:column;align-items:center;box-shadow:var(--ombre)}
/* Le numero vit AU-DESSUS de la carte, sur le fil. Pose a cheval sur le bord,
   il etait a moitie derriere la carte et le fil disparaissait avec lui : on ne
   voyait plus que des pointilles dans les intervalles. */
.fig-pas-num{position:absolute;top:-46px;left:50%;transform:translateX(-50%);z-index:2;
 display:flex;align-items:center;justify-content:center;width:34px;height:34px;
 border-radius:50%;background:var(--num);color:var(--num-encre);
 font-size:.95rem;font-weight:700}
.fig-pas h3{margin:18px 0 10px;font-size:1.06rem;font-weight:700;color:var(--fonce);
 line-height:1.35}
.fig-pas p{margin:0;font-size:.92rem;color:#5d6f68;line-height:1.6}
.fig-pas-note{margin:26px 0 26px;font-size:.86rem;color:var(--doux)}
/* Le seul lien qui sort du site dans tout le parcours : il se voit, mais il ne
   crie pas plus fort que le bouton qui suit. */
/* En ligne, pas en flex : quand le libelle passe sur deux lignes, la fleche
   doit suivre le dernier mot, pas se poser a cote du bloc. */
.fig-pas-lien{display:inline;margin:12px 0 0;color:var(--vert);font-weight:700;
 font-size:.88rem;text-decoration:underline;text-underline-offset:3px}
.fig-pas-lien:hover{color:var(--fonce)}
.fig-pas-lien svg{vertical-align:-1px;margin-left:5px;opacity:.8}
/* La note qui portait l'ecart avant le bouton a ete retiree : l'ecart, lui,
   reste necessaire — sans quoi le bouton monte sur les cartes. */
.fig-parcours .lim-cta{display:inline-block;margin-top:34px}

.fig-serv{background:#fff;padding:74px 0 80px;text-align:center;
 scroll-margin-top:80px}
.fig-serv .fig-chip{background:#eef4f3;color:var(--teal)}
.fig-serv h2{font-size:2.5rem;line-height:1.16;font-weight:700;margin:20px auto 12px;
 color:var(--fonce);max-width:22ch;letter-spacing:-.02em}
.fig-serv>.lim-wrap>p{color:#4b5563;max-width:66ch;margin:0 auto 42px}
.fig-cartes{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;text-align:left}
.fig-service{background:#fff;border:1px solid var(--trait);border-radius:12px;overflow:hidden;
 display:flex;flex-direction:column}
.fig-service img{display:block;width:100%;height:236px;object-fit:cover}
.fig-service .fig-corps{padding:24px;display:flex;flex-direction:column;flex:1}
.fig-service h3{margin:0 0 10px;font-size:1.22rem;font-weight:600;color:var(--fonce)}
.fig-service p{margin:0 0 22px;color:#4b5563;font-size:.92rem;flex:1}
.fig-service a{background:var(--vert);color:#fff;text-align:center;font-weight:600;
 font-size:.92rem;padding:13px 18px;border-radius:6px}
.fig-service a:hover{filter:brightness(1.07)}

/* ---- les temoignages ---- */
/* Sombre : c'est le tour du sombre dans l'alternance, et des cartes blanches
   sur fond fonce, c'est la forme la plus lisible qu'on sache donner a une
   citation. */
.fig-avis{background:var(--fonce);color:#fff;padding:96px 0 100px;text-align:center}
.fig-avis .fig-chip{background:rgba(255,255,255,.12);color:#fff;
 border:1px solid rgba(255,255,255,.24)}
.fig-avis h2{font-size:clamp(1.9rem,3.3vw,2.6rem);font-weight:700;color:#fff;
 margin:20px auto 12px;letter-spacing:-.02em;max-width:24ch}
.fig-avis .fig-intro{color:rgba(255,255,255,.82);font-size:1.02rem;margin:0 auto}
.fig-avis > .lim-wrap > .fig-trait{margin:22px auto 0}
.fig-avis-total{margin:18px 0 0;font-size:.95rem;color:rgba(255,255,255,.8)}
.fig-avis-total b{color:var(--jaune);font-size:1.35rem;vertical-align:-2px}
.fig-avis-piste{display:flex;gap:22px;text-align:left;align-items:stretch;
 overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
 padding:6px 2px 12px;margin:34px -2px 0;scrollbar-width:none}
.fig-avis-piste::-webkit-scrollbar{display:none}
.fig-avis-piste>*{flex:0 0 clamp(272px,31%,368px);scroll-snap-align:start}
.fig-fleches{display:flex;gap:10px;justify-content:center;margin-top:22px}
.fig-fleches[hidden]{display:none}
.fig-fleche{width:44px;height:44px;border-radius:50%;
 border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:1.1rem;line-height:1;cursor:pointer;
 display:flex;align-items:center;justify-content:center}
.fig-fleche:hover:not(:disabled){background:var(--jaune);border-color:var(--jaune);
 color:#193838}
.fig-fleche:disabled{opacity:.3;cursor:default}
.fig-fleche:focus-visible{outline:2px solid var(--jaune);outline-offset:3px}
/* La carte de la maquette : le visage et le guillemet en haut, le texte, le
   trait jaune, puis le nom. Rien d'autre — les etoiles etaient toutes a cinq. */
.fig-avis-carte{background:#fff;color:var(--encre);border:1px solid #e6ebe4;
 border-radius:18px;padding:26px 24px 24px;margin:0;display:flex;flex-direction:column;
 box-shadow:0 10px 30px rgba(9,32,30,.06)}
.fig-avis-carte header{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.fig-etoiles{display:inline-flex;gap:2px;color:var(--jaune);line-height:0;
 vertical-align:-2px}
.fig-etoiles .vide{color:#dbe2de}
.fig-avis-carte .fig-etoiles{margin:0 0 12px}
.fig-avis-total .fig-etoiles{margin-right:9px}
.fig-avis-total .fig-etoiles .vide{color:rgba(255,255,255,.28)}
.fig-avatar{width:48px;height:48px;border-radius:50%;background:#e6ede7;color:var(--teal);
 display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;
 flex:none;overflow:hidden}
.fig-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.fig-guillemet{font-family:Georgia,'Times New Roman',serif;font-size:3rem;line-height:.7;
 color:var(--teal);opacity:.85}
.fig-avis-carte blockquote{margin:0;font-size:.98rem;line-height:1.65;color:#41544e;
 flex:1;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.fig-avis-carte .fig-trait{margin:20px 0 14px}
.fig-avis-carte figcaption{display:block;font-size:.95rem}
.fig-avis-carte figcaption b{color:var(--fonce)}
.fig-avis-carte figcaption span{color:#7b8b85;font-size:.88rem;margin-left:5px}
.fig-avis-lien{display:inline-block;margin-top:30px;color:var(--jaune);font-weight:700;
 font-size:.96rem}
.fig-plus{align-self:flex-start;margin:10px 0 0;padding:0;border:0;background:none;
 color:var(--vert);font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;
 text-decoration:underline;text-underline-offset:3px}
.fig-plus[hidden]{display:none}
.fig-avis-carte.ouvert blockquote{-webkit-line-clamp:unset;display:block}
@media(max-width:980px){
  .fig-avis{padding:48px 0 54px}
  .fig-avis h2{font-size:1.7rem}
  .fig-avis-piste>*{flex:0 0 84%}
}

.fig-faq{background:var(--brume);padding:74px 0 84px}
.fig-faq .lim-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.fig-faq .fig-chip{background:#fff;color:var(--teal);border:1px solid var(--trait)}
.fig-faq h2{font-size:2.5rem;line-height:1.14;font-weight:700;margin:18px 0 22px;
 color:var(--fonce);letter-spacing:-.02em}
.fig-appel{background:#fff;border:1px solid var(--trait);border-radius:10px;padding:20px}
.fig-appel p{margin:0 0 14px;color:#4b5563;font-size:.94rem}
.fig-appel a{display:flex;align-items:center;justify-content:center;gap:9px;
 text-align:center;background:var(--vert);color:#fff;font-weight:600;
 padding:12px 16px;border-radius:6px;font-size:.92rem}
/* Le dessin WhatsApp n'a pas de taille a lui : sans ces deux lignes il sort en
   300 × 150 et fait exploser le bouton. */
.fig-appel a svg{width:18px;height:18px;flex:none;fill:currentColor}
.fig-appel a:hover{background:var(--fonce);text-decoration:none}
.fig-q{background:#fff;border:1px solid var(--trait);border-radius:10px;margin:0 0 14px;
 padding:0 22px}
.fig-q summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:700;font-size:1.02rem;
 color:var(--fonce);display:flex;align-items:center;gap:16px}
.fig-q summary::-webkit-details-marker{display:none}
.fig-q summary:after{content:"⌄";margin-left:auto;font-size:1.3rem;line-height:1;color:var(--vert);
 transition:transform .18s}
.fig-q[open] summary:after{transform:rotate(180deg)}
.fig-q p{margin:0;padding:0 0 22px;color:#4b5563;font-size:.95rem;line-height:1.65}

/* Le pied de page est noir : ce bloc l'etait aussi, et les deux ne faisaient
   plus qu'un grand pave sombre ou l'oeil ne trouvait plus la fin de la page.
   Le vert du bandeau du haut les separe, et referme la page sur la couleur
   par laquelle elle s'est ouverte. */
.fig-contact{background:var(--fonce);color:#fff;padding:74px 0 80px}
.fig-contact .lim-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.fig-contact .fig-chip{background:rgba(255,255,255,.1);color:#fff}
.fig-contact h2{font-size:2.5rem;line-height:1.14;font-weight:700;margin:20px 0 28px;
 letter-spacing:-.02em}
/* Le telephone et l'adresse ont quitte ce bloc : ils sont deja dans le pied de
   page, deux lignes plus bas, et les repeter en gros juste au-dessus donnait
   l'impression d'un second pied de page. Reste la carte, qui dit la seule chose
   que le pied ne dit pas : ou nous sommes. */
/* Une carte sans adresse ne dit rien : on y voit un quartier, pas une maison.
   L'adresse se pose dessus, et le tout mene a Google Maps — c'est le seul lien
   sortant de la page qu'on assume, parce qu'il repond a « c'est ou ? ». */
.fig-carte-img{position:relative;border-radius:12px;overflow:hidden}
.fig-carte-img img{display:block;width:100%;height:340px;object-fit:cover}
.fig-adresse{position:absolute;left:14px;right:14px;bottom:14px;display:flex;
 align-items:center;gap:12px;background:rgba(255,255,255,.96);color:var(--fonce);
 border-radius:10px;padding:12px 14px;box-shadow:0 10px 26px rgba(9,32,30,.22);
 font-size:.9rem;line-height:1.35}
.fig-adresse svg{flex:none;color:var(--vert)}
.fig-adresse b{display:block;font-weight:700}
.fig-adresse span{color:#5d6f68}
.fig-adresse:hover{background:#fff;text-decoration:none}
/* Le bandeau et le titre coiffent l'encadre : ils annoncent ce qu'on demande,
   l'encadre dit combien de temps ca prend. (Pas « fig-appel » : ce nom est deja
   celui de l'encadre « Appelez-nous » de la FAQ, dont la regle `a{background:
   var(--vert)}` repeignait le bouton jaune en vert.) */
.fig-demande h2{margin:20px 0 26px}
.fig-invite{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
 border-radius:12px;padding:32px 30px}
.fig-invite h3{margin:0 0 12px;font-size:1.35rem;font-weight:700}
.fig-invite p{margin:0 0 26px;color:rgba(255,255,255,.78);font-size:.96rem}
.fig-invite .lim-cta{display:inline-block;padding:15px 28px;font-size:.98rem}
.fig-invite .fig-deja{display:block;margin-top:18px;color:var(--jaune);font-weight:600;
 font-size:.92rem}

@media(max-width:980px){
  /* Une seule colonne : il n'y a plus rien a relier horizontalement. */
  /* En colonne, la pastille doit tomber DANS l'intervalle entre deux cartes.
     A 34 px d'intervalle et 46 px de remontee, elle mordait de 12 px sur la
     carte du dessus : le numero de l'etape 2 avait l'air de terminer
     l'etape 1. L'intervalle s'ouvre a 56 px et la pastille, haute de 34,
     s'y centre avec 11 px de part et d'autre. */
  .fig-quatre{grid-template-columns:1fr;margin-top:44px;gap:56px}
  .fig-quatre:before{display:none}
  .fig-pas-num{top:-45px}
  .fig-parcours{padding:64px 0 70px}
  .fig-trio{grid-template-columns:1fr}
  .fig-presta{padding:64px 0 70px}
  .fig-atouts{height:auto;margin-top:-34px;margin-bottom:-34px}
  .fig-atouts .lim-wrap{transform:none}
  .fig-atouts-carte{grid-template-columns:1fr}
  .fig-atout + .fig-atout{border-left:none;border-top:1px solid #e2e8e1}
  .fig-portes{gap:10px}
  /* « Devenir aide-menager·e », « Huishoudhulp worden », « Become a
     housekeeper » : aucune de ces etiquettes ne tient dans la moitie d'un
     telephone. Le seuil de 170 px les laisse cote a cote sur une tablette et
     les empile en dessous — empilees, elles restent plates, ce qui etait le
     reproche. */
  .fig-hero .lim-cta{padding:12px 20px;font-size:.9rem}
  /* 170 px les faisait tenir cote a cote sur un telephone — a 390 px chacune
     recevait 169 px, et « Devenir aide-menager·e » sortait de son cadre. La
     largeur minimale est donc celle du mot le plus long : en dessous, les deux
     passent l'une sous l'autre plutot que de deborder. */
  .fig-portes .lim-cta{min-width:190px}
  .fig-hero{min-height:520px}
  .fig-hero h1{font-size:2.4rem}
  .fig-duo,.fig-pourquoi .lim-wrap,.fig-faq .lim-wrap,.fig-contact .lim-wrap{
   grid-template-columns:1fr;gap:30px}
  /* Un element de grille refuse par defaut de descendre sous la largeur
     minimale de son contenu : sur un ecran de 320 px, la carte neerlandaise
     imposait 315 px a une colonne qui n'en avait que 272, et c'est la page
     entiere qui debordait. `min-width:0` lui rend le droit de retrecir. */
  .fig-duo>*,.fig-trio>*,.fig-cartes>*{min-width:0}
  .fig-etapes{grid-template-columns:1fr 1fr}
  .fig-frais h2,.fig-ts h2,.fig-serv h2,.fig-faq h2{font-size:1.9rem}
  /* « Simplifiez-vous la vie. » tenait sur deux lignes a cause du <br> pense
     pour l'ordinateur. Sur un telephone la coupure n'a plus de raison d'etre :
     le retour saute, et la taille suit la largeur de l'ecran pour que la phrase
     tienne d'un bord a l'autre, dans les quatre langues — le neerlandais est le
     plus long. */
  .fig-contact h2{font-size:min(1.9rem,6.1vw)}
  /* Le bandeau se cassait en deux lignes pour un mot : l'interlettrage se
     resserre juste assez pour qu'il tienne. */
  .fig-contact .fig-chip{font-size:.64rem;letter-spacing:.1em;padding:7px 13px}
  /* L'espace avant le <br> n'est pas une faute de frappe : il est avale par la
     coupure sur ordinateur, et c'est lui qui separe les deux morceaux quand la
     coupure disparait ici. Sans lui : « Simplifiez-vousla vie. » */
  .fig-demande h2 br{display:none}
  .fig-pourquoi h2{font-size:2rem}
}
@media(max-width:680px){
  /* Deux boutons pleine largeur l'un sur l'autre mangeaient le tiers du film.
     Ils gardent la pleine largeur — c'est ce qui se vise le mieux du pouce —
     mais deviennent nettement plus plats. */
  .fig-hero .lim-cta{padding:11px 16px;font-size:.88rem}
  .fig-hero h1{font-size:1.95rem}
  .fig-etapes,.fig-cartes{grid-template-columns:1fr}
  .fig-pourquoi,.fig-frais,.fig-ts,.fig-serv,.fig-faq,.fig-contact{padding:48px 0 54px}
}

:root{--fond-valeurs:#f5f5f1;--encre-valeurs:#193838;--pastille-valeurs:#e7efe9;--trait-valeurs:#d7e3d9}

.habit-clair{--fond:#f4f6f2;--encre:#193838;--pastille:#e7efe9;--pastille-bord:#d7e3d9;
 --doux:#5d6f68;--carte:#fff;--carte-bord:#e6ebe4;--fil:rgba(25,56,56,.3);
 --ombre:0 10px 30px rgba(9,32,30,.07);--num:#eaefe9;--num-encre:#5d6f68}
.habit-vert{--fond:#193838;--encre:#fff;--pastille:rgba(255,255,255,.12);
 --pastille-bord:rgba(255,255,255,.24);--doux:rgba(255,255,255,.82);--carte:#fbfcfa;
 --carte-bord:#e6ebe4;--fil:rgba(255,255,255,.5);
 --ombre:0 12px 34px rgba(3,15,14,.18);--num:#eaefe9;--num-encre:#5d6f68}
/* ================= le guide des titres-services ================= */
.ts-hero{background:var(--fonce);color:#fff;padding:70px 0 76px}
.ts-hero .fig-chip{background:rgba(255,255,255,.12);color:#fff}
.ts-hero h1{font-size:3rem;line-height:1.12;font-weight:700;margin:20px 0 22px;
 letter-spacing:-.02em;max-width:19ch}
.ts-hero p{color:rgba(255,255,255,.84);font-size:1.06rem;max-width:62ch;margin:0 0 14px}
.ts-hero .ts-resume{background:rgba(255,255,255,.07);border-left:3px solid var(--jaune);
 border-radius:0 8px 8px 0;padding:16px 20px;margin:22px 0;color:#fff;font-size:1.02rem}
.ts-chiffres{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 30px}
.ts-chiffre{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
 border-radius:10px;padding:16px 20px;min-width:180px}
.ts-chiffre b{display:block;font-size:1.7rem;font-weight:700;line-height:1.1;color:var(--jaune)}
.ts-chiffre span{display:block;font-size:.86rem;color:rgba(255,255,255,.76);margin-top:4px}
.ts-hero .lim-cta{display:inline-block;padding:15px 28px;font-size:1rem}

/* ---- corps + sommaire ----
   Douze sujets a la file dans une seule colonne blanche, separes par un filet :
   on ne voyait plus ou finissait l'un et ou commencait l'autre. Chaque sujet
   devient donc une carte posee sur un fond de brume, et les cartes sont
   reunies en quatre chapitres. Tout se joue dans la feuille de style et dans
   deux insertions faites apres coup : les traductions gardent leur balisage,
   il n'a pas fallu les refaire. */
.ts-corps{background:var(--brume);padding:30px 0 38px}
.ts-corps .lim-wrap{display:grid;grid-template-columns:1fr 280px;gap:56px;align-items:start}
.ts-somm{position:sticky;top:24px;order:2;background:var(--brume);border:1px solid var(--trait);
 border-radius:12px;padding:22px 20px}
.ts-somm h2{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);
 margin:0 0 10px}
/* Combien reste-t-il ? Sur trois mille mots, la question se pose. */
.ts-prog{height:3px;border-radius:99px;background:#dde9e6;overflow:hidden;margin:0 0 14px}
.ts-prog i{display:block;height:100%;width:0;border-radius:99px;
 background:linear-gradient(90deg,var(--vert),var(--jaune))}
.ts-somm li.ts-groupe{counter-increment:none;font-size:.67rem;font-weight:800;
 letter-spacing:.16em;text-transform:uppercase;color:var(--sauge);margin:16px 0 6px;
 padding:0 8px}
.ts-somm li.ts-groupe:first-child{margin-top:0}
.ts-somm ol{list-style:none;margin:0;padding:0;counter-reset:s}
.ts-somm li{counter-increment:s;margin:0 0 2px}
.ts-somm a{display:flex;gap:10px;padding:7px 8px;border-radius:6px;color:#41544e;
 font-size:.9rem;line-height:1.35}
.ts-somm a:before{content:counter(s);color:var(--sauge);font-weight:700;font-size:.78rem;
 min-width:14px}
.ts-somm a:hover{background:#fff;color:var(--vert)}
/* L'entree de la section qu'on est en train de lire. Un sommaire de treize
   lignes ne sert a rien s'il ne dit pas ou l'on en est : c'est justement sur
   une page longue qu'on se demande « il en reste combien ? ». */
.ts-somm a.ici{background:#fff;color:var(--vert);font-weight:600;
 box-shadow:inset 3px 0 0 var(--vert),0 1px 3px rgba(9,32,30,.07)}
.ts-somm a.ici:before{color:var(--vert)}
.ts-somm summary{display:none}

.ts-texte{min-width:0;counter-reset:ts}
.ts-texte section{counter-increment:ts;scroll-margin-top:100px;background:#fff;
 border:1px solid var(--trait);border-radius:16px;padding:26px 32px 18px;margin:0 0 14px;
 box-shadow:0 1px 2px rgba(9,32,30,.04),0 16px 34px -28px rgba(9,32,30,.55);
 transition:border-color .2s,box-shadow .2s}
/* La carte qu'on lit se detache a peine : assez pour repondre a « j'en suis
   ou ? », pas assez pour clignoter a chaque coup de molette. */
.ts-texte section.lu{border-color:#bcdcd6;
 box-shadow:0 1px 2px rgba(9,32,30,.05),0 20px 40px -28px rgba(23,137,127,.8)}
.ts-texte section:before{content:counter(ts,decimal-leading-zero);display:inline-block;
 font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--vert);background:#eef6f4;
 border-radius:7px;padding:5px 9px;margin:0 0 9px}
.ts-texte h2{font-size:1.6rem;line-height:1.22;font-weight:700;color:var(--fonce);
 margin:0 0 14px;letter-spacing:-.015em}

/* ---- les quatre chapitres ----
   Le trait s'efface vers la droite : il annonce une rupture sans couper la
   page en deux, ce qu'une regle pleine ferait quatre fois. */
.ts-chap{position:relative;margin:36px 0 18px;padding:0 2px 14px}
.ts-texte>.ts-chap:first-child{margin-top:4px}
.ts-chap:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:linear-gradient(90deg,var(--vert),rgba(23,137,127,0) 72%)}
.ts-chap span{display:block;font-size:.69rem;font-weight:800;letter-spacing:.2em;
 text-transform:uppercase;color:var(--sauge);margin:0 0 6px}
.ts-chap b{display:block;font-size:1.34rem;font-weight:700;color:var(--fonce);
 letter-spacing:-.012em;line-height:1.25}
.ts-texte .ts-chap p{margin:5px 0 0;color:#6b7c76;font-size:.94rem;line-height:1.5}
.ts-texte h3{font-size:1.1rem;font-weight:700;color:var(--teal);margin:26px 0 8px}
.ts-texte p{margin:0 0 14px;color:#41544e;font-size:1.02rem;line-height:1.72}
.ts-texte strong{color:var(--fonce)}
.ts-texte ul{margin:0 0 16px;padding:0;list-style:none}
.ts-texte ul li{position:relative;padding:5px 0 5px 26px;color:#41544e;line-height:1.6}
.ts-texte ul li:before{content:"";position:absolute;left:6px;top:14px;width:7px;height:7px;
 border-radius:50%;background:var(--vert)}
.ts-texte small{color:#6b7c76;font-size:.86rem;line-height:1.6;display:block}

/* ---- l'equation ---- */
.ts-equation{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
 background:#f1f7f5;border:1px solid #d6e7e3;border-radius:12px;padding:26px 20px;margin:6px 0 20px}
.ts-equation b{font-size:1.5rem;font-weight:700;color:var(--teal)}
.ts-equation span{font-size:1.5rem;color:var(--sauge)}

/* ---- roles ---- */
.ts-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:8px 0 18px}
.ts-role{background:#fff;border:1px solid var(--trait);border-radius:10px;padding:20px}
.ts-role h3{margin:0 0 8px;font-size:1.02rem;color:var(--fonce)}
.ts-role p{margin:0;font-size:.93rem}
.ts-role.on{background:var(--vert);border-color:var(--vert)}
.ts-role.on h3,.ts-role.on p{color:#fff}
.ts-role.on p{color:rgba(255,255,255,.9)}

/* ---- tableaux ---- */
.ts-tab{width:100%;border-collapse:collapse;margin:6px 0 16px;font-size:.96rem;
 border:1px solid var(--trait);border-radius:10px;overflow:hidden}
.ts-tab th{background:var(--vert);color:#fff;text-align:left;font-weight:600;font-size:.88rem;
 padding:13px 16px}
.ts-tab td{padding:13px 16px;border-top:1px solid var(--trait);color:#41544e}
.ts-tab tr:nth-child(even) td{background:#fafbfa}
.ts-tab td b{color:var(--fonce)}
.ts-defile{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- encadres ---- */
.ts-note{border-radius:10px;padding:18px 20px;margin:6px 0 18px;font-size:.98rem;
 line-height:1.65}
.ts-note b{display:block;margin-bottom:6px}
.ts-note.jaune{background:#fff8e6;border:1px solid #f3dfa6;color:#6b5300}
.ts-note.jaune b{color:#7a5c00}
.ts-note.verte{background:var(--vert);color:#fff}
.ts-note.verte b{color:#fff}
.ts-note.grise{background:var(--brume);border:1px solid var(--trait);color:#41544e}
.ts-note.grise b{color:var(--fonce)}

/* ---- etapes ---- */
.ts-etapes{list-style:none;margin:6px 0 18px;padding:0;counter-reset:e}
.ts-etapes li{counter-increment:e;position:relative;padding:0 0 22px 58px}
.ts-etapes li:before{content:counter(e);position:absolute;left:0;top:0;width:38px;height:38px;
 border-radius:10px;background:var(--vert);color:#fff;font-weight:800;font-size:1.05rem;
 display:flex;align-items:center;justify-content:center}
.ts-etapes li:after{content:"";position:absolute;left:18px;top:44px;bottom:2px;width:2px;
 background:var(--trait)}
.ts-etapes li:last-child:after{display:none}
.ts-etapes h3{margin:6px 0 6px;color:var(--fonce);font-size:1.04rem}
.ts-etapes p{margin:0 0 8px;font-size:.96rem}

/* ---- autorise / interdit ---- */
.ts-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 18px}
.ts-liste{border-radius:12px;padding:22px 22px 16px}
.ts-liste h3{margin:0 0 12px;font-size:1.02rem}
.ts-liste ul{margin:0;padding:0;list-style:none}
.ts-texte .ts-liste li{padding:7px 0 7px 30px;position:relative;font-size:.96rem;
 line-height:1.55}
.ts-texte .ts-liste li:before{position:absolute;left:0;top:6px;width:20px;height:20px;
 border-radius:50%;display:flex;align-items:center;justify-content:center;
 font-size:.72rem;font-weight:700;background:none}
.ts-oui{background:#f1f7f5;border:1px solid #cfe4df}
.ts-oui h3{color:var(--teal)}
.ts-texte .ts-oui li:before{content:"\2713";background:var(--vert);color:#fff}
.ts-non{background:#fdf3f2;border:1px solid #f2d6d3}
.ts-non h3{color:#a4453b}
.ts-texte .ts-non li:before{content:"\2715";background:#c8564a;color:#fff}

/* ---- deux formats ---- */
.ts-formats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 18px}
.ts-format{border:1px solid var(--trait);border-radius:12px;padding:22px}
.ts-format.prefere{border-color:var(--vert);box-shadow:0 10px 26px rgba(23,137,127,.12)}
.ts-format h3{margin:0 0 10px;color:var(--fonce)}
.ts-format .ts-tag{display:inline-block;background:var(--vert);color:#fff;font-size:.7rem;
 font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px;
 margin-bottom:10px}

/* ---- la FAQ et l'appel final ---- */
.ts-faq{background:var(--brume);border-top:1px solid var(--trait);padding:58px 0 72px}
.ts-faq h2{font-size:2.1rem;font-weight:700;color:var(--fonce);margin:0 0 8px;
 letter-spacing:-.02em;text-align:center}
.ts-faq>.lim-wrap>p{text-align:center;color:#4b5563;margin:0 auto 34px;max-width:60ch}
.ts-faq .fig-q{max-width:860px;margin-left:auto;margin-right:auto}

@media(max-width:980px){
  .ts-hero{padding:48px 0 52px}
  .ts-hero h1{font-size:2.1rem;max-width:none}
  /* « Je cherche une aide-menagere a Bruxelles » ne tient pas sur une ligne de
     telephone : .lim-cta interdit le retour a la ligne, on l'autorise ici. */
  .ts-hero .lim-cta{display:block;text-align:center;white-space:normal;padding:14px 18px}
  .ts-chiffre{flex:1 1 140px;min-width:0;padding:14px 16px}
  .ts-chiffre b{font-size:1.4rem}
  .ts-corps .lim-wrap{grid-template-columns:1fr;gap:0}
  .ts-somm{position:static;order:0;padding:0;background:transparent;border:0;margin:22px 0 0}
  .ts-somm summary{display:flex;align-items:center;justify-content:space-between;
   cursor:pointer;list-style:none;background:var(--brume);border:1px solid var(--trait);
   border-radius:10px;padding:14px 18px;font-weight:700;color:var(--fonce);font-size:.95rem}
  .ts-somm summary::-webkit-details-marker{display:none}
  .ts-somm summary:after{content:"\2304";font-size:1.2rem;color:var(--vert)}
  .ts-somm[open] summary{border-radius:10px 10px 0 0}
  .ts-somm h2{display:none}
  .ts-somm ol{border:1px solid var(--trait);border-top:0;border-radius:0 0 10px 10px;
   padding:8px 12px;background:#fff}
  .ts-corps .lim-wrap{padding-bottom:0}
  .ts-texte section{padding:22px 20px 14px;border-radius:14px;margin-bottom:12px}
  .ts-texte h2{font-size:1.38rem}
  .ts-chap{margin:28px 0 14px}
  .ts-chap b{font-size:1.18rem}
  .ts-roles,.ts-duo,.ts-formats{grid-template-columns:1fr}
  .ts-faq h2{font-size:1.7rem}
}
/* ================= les conditions generales =================
   Un document juridique se lit en une colonne etroite : au-dela d'une
   soixantaine de signes par ligne, l'oeil rate la ligne suivante, et personne
   ne relit deux fois un article de conditions. */
.cg-hero{background:var(--fonce);color:#fff;padding:56px 0 48px}
.cg-hero h1{font-size:clamp(1.7rem,4.2vw,2.5rem);line-height:1.15;font-weight:700;
 margin:16px 0 0;letter-spacing:-.02em;max-width:22ch}
.cg-hero .fig-chip{background:rgba(255,255,255,.12);color:#fff;
 border:1px solid rgba(255,255,255,.24)}
.cg-maj{margin:16px 0 0;color:rgba(255,255,255,.72);font-size:.92rem}
.cg-corps{background:var(--brume);padding:38px 0 60px}
.cg-corps .lim-wrap{max-width:820px}
.cg-fiche{background:#fff;border:1px solid var(--trait);border-radius:16px;
 padding:24px 26px;box-shadow:0 1px 2px rgba(9,32,30,.04)}
.cg-fiche dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0}
.cg-fiche dt{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
 color:var(--sauge);white-space:nowrap;padding-top:3px}
.cg-fiche dd{margin:0;color:var(--fonce);font-weight:600}
.cg-fiche dd a{color:var(--teal)}
.cg-fiche p{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--trait);
 color:#41544e;font-size:.96rem;line-height:1.65}
.cg-art{counter-reset:cg;margin:22px 0 0}
.cg-art section{counter-increment:cg;background:#fff;border:1px solid var(--trait);
 border-radius:16px;padding:24px 26px 18px;margin:0 0 12px;
 box-shadow:0 1px 2px rgba(9,32,30,.04)}
.cg-art h2{font-size:1.14rem;font-weight:700;color:var(--fonce);margin:0 0 12px;
 display:flex;gap:12px;align-items:baseline;letter-spacing:-.01em}
.cg-art h2:before{content:counter(cg,decimal-leading-zero);flex:none;font-size:.72rem;
 font-weight:800;letter-spacing:.1em;color:var(--vert);background:#eef6f4;
 border-radius:7px;padding:5px 9px}
.cg-art p{margin:0 0 10px;color:#41544e;font-size:1rem;line-height:1.72}
.cg-art a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.cg-pied{margin:26px 0 0;text-align:center;color:#6b7c76;font-size:.9rem}
@media(max-width:720px){
  .cg-hero{padding:40px 0 36px}
  .cg-corps{padding:26px 0 44px}
  .cg-fiche,.cg-art section{padding:20px 20px 14px;border-radius:14px}
  .cg-fiche dl{grid-template-columns:1fr;gap:3px 0}
  .cg-fiche dt{padding-top:10px}
}