/* ============================================================================
   LE RELAIS RENOV · styles de page · reecrit le 2026-08-31
   Sur sa correction: « we are marketers ». Le sol est le lin, la carte est
   blanche et flotte dessus, le hero porte son texte SUR l'image, et rien sur
   cette page ne refroidit le lecteur.
   Aucun hex ici. Tout vient de theme.css.
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--u-ground);color:var(--u-ink);
  font-family:var(--u-ui);font-size:18px;line-height:1.6;   /* 18px verrouille */
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
figure{margin:0}   /* le navigateur met 40px de marge laterale par defaut */
a{color:var(--u-grass-deep)}
:focus-visible{outline:3px solid var(--u-grass);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr:focus{position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;z-index:99;
  min-height:56px;display:inline-flex;align-items:center;padding:0 1.1rem;background:var(--u-grass);
  color:#fff;border-radius:var(--u-r-pill);font-weight:600;text-decoration:none}
.center{text-align:center}
.u-wrap{max-width:1100px}

/* le rythme editorial des titres de section */
.h2{font-family:var(--u-display);font-weight:400;margin:.45rem 0 .7rem;
  font-size:clamp(1.65rem,1.2rem + 2vw,2.6rem);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.h2 em{font-style:italic;color:var(--u-grass)}
.lede{font-family:var(--u-text);font-size:1.1rem;line-height:1.62;color:var(--u-ink-soft);
  margin:0 0 1.3rem;max-width:60ch}
.center .lede{margin-inline:auto}
.u-sec{padding-block:clamp(46px,6vw,88px)}
.band--soft{background:var(--u-cream)}

/* ------------------------------------------------------------- L'EN TETE -- */
.hd{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--u-ground) 88%,transparent);
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--u-hair)}
.hd__in{max-width:1100px;margin-inline:auto;padding:10px 22px;display:flex;align-items:center;gap:12px}
.hd__b{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--u-ink);
  flex:0 0 auto;min-height:44px}
.hd__b svg{width:30px;height:30px;color:var(--u-grass)}
.hd__n{font-family:var(--u-display);font-size:1.12rem;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.hd__sp{margin-left:auto}
.hd__tel{display:inline-flex;align-items:center;gap:.45rem;min-height:56px;padding:0 .9rem;
  text-decoration:none;color:var(--u-ink);font-size:15px;font-weight:600;border-radius:var(--u-r-pill)}
.hd__tel svg{width:18px;height:18px}
.hd__tel:hover{background:var(--u-cream)}
.hd__sm{display:none}
@media(max-width:620px){.hd__tel span{display:none}.hd__lg{display:none}.hd__sm{display:inline}}
@media(max-width:380px){.hd__in{padding-inline:12px;gap:6px}.hd__n{font-size:.95rem}
  .hd__b svg{width:26px;height:26px}.hd .u-btn{padding-inline:.85rem;font-size:14px}}

/* ================================================================ LE HERO = */
/* Le texte est SUR l'image, comme il l'a demande. La carte d'ouverture reste
   au-dessus de la ligne de flottaison sur telephone: c'est la seule contrainte
   mesuree qui ne bouge pas, et elle est tenue par le flex column ci-dessous. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(92svh,760px);display:flex;align-items:flex-end}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,color-mix(in srgb,var(--u-ink) 46%,transparent) 0%,
                         color-mix(in srgb,var(--u-ink) 16%,transparent) 34%,
                         color-mix(in srgb,var(--u-ink) 52%,transparent) 78%,
                         color-mix(in srgb,var(--u-ink) 72%,transparent) 100%)}
.hero__in{width:100%;max-width:1100px;margin-inline:auto;padding:26px 22px 32px;
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:inherit}
.hero__txt{padding-top:8px}
.hero__chip{display:inline-flex;align-items:center;min-height:34px;padding:0 .9rem;
  border-radius:var(--u-r-pill);font-size:12.5px;font-weight:600;letter-spacing:.01em;
  background:color-mix(in srgb,#fff 20%,transparent);color:#fff;
  border:1px solid color-mix(in srgb,#fff 34%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero h1{font-family:var(--u-display);font-weight:400;color:#fff;margin:.7rem 0 .5rem;
  font-size:clamp(2rem,1.25rem + 3.1vw,3.5rem);line-height:1.06;letter-spacing:-.02em;
  text-wrap:balance;max-width:17ch;text-shadow:0 2px 22px rgba(0,0,0,.3)}
.hero h1 em{font-style:italic}
.hero__lede{font-family:var(--u-text);font-size:1.08rem;line-height:1.5;margin:0;max-width:44ch;
  color:color-mix(in srgb,#fff 90%,transparent);text-shadow:0 1px 14px rgba(0,0,0,.35)}
.hero__proof{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin:1rem 0 0;padding:0;
  font-size:13.5px;font-weight:600;color:color-mix(in srgb,#fff 92%,transparent)}
.hero__proof li{display:flex;align-items:center;gap:.4rem}
.hero__proof li::before{content:"";width:13px;height:7px;flex:0 0 auto;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translateY(-2px)}
@media(min-width:960px){
  .hero__in{flex-direction:row;align-items:flex-end;gap:52px;padding-block:80px 56px}
  .hero__txt{flex:1 1 54%}
  .hero .opener{flex:0 0 400px}
}

/* --------------------------------------- LA CARTE D'OUVERTURE, SUR L'IMAGE - */
.opener{padding:1.25rem;border-radius:var(--u-r-xl)}
.opener__k{display:flex;align-items:center;gap:.5rem;margin:0 0 .2rem;
  font-family:var(--u-ui);font-size:11.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--u-grass)}
.opener__q{font-family:var(--u-display);font-weight:400;font-size:1.35rem;line-height:1.16;
  margin:.35rem 0 .9rem;letter-spacing:-.012em}
.opener__opts{display:grid;gap:9px}
.tile{display:flex;align-items:center;gap:.85rem;width:100%;min-height:64px;padding:0 1rem;
  background:var(--u-paper);border:1px solid var(--u-hair-2);border-radius:var(--u-r-tile);
  font:inherit;font-size:16px;font-weight:600;color:var(--u-ink);cursor:pointer;text-align:left;
  transition:border-color .18s var(--u-ease),background-color .18s var(--u-ease),transform .18s var(--u-ease)}
.tile svg{width:24px;height:24px;color:var(--u-grass);flex:0 0 auto}
.tile span{flex:1}
.tile i{font-style:normal;color:var(--u-ink-faint);font-size:20px;line-height:1}
.tile:hover{border-color:var(--u-grass);background:var(--u-grass-tint)}
.tile:active{transform:scale(.99)}
.tile--quiet{min-height:56px;font-size:15px;font-weight:500;color:var(--u-ink-soft);background:transparent}
.opener__micro{margin:.9rem 0 0;font-size:12.5px;color:var(--u-ink-faint);text-align:center}
.opener__micro b{color:var(--u-grass);font-weight:700}

/* ------------------------------------------------- LA BANDE DE CONFIANCE -- */
.band{background:var(--u-ink);color:#fff}
.band__l{list-style:none;margin:0;padding:16px 0;display:grid;gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));text-align:center}
@media(min-width:760px){.band__l{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:18px}}
.band__l li{display:flex;flex-direction:column;gap:1px}
.band__l b{font-size:1.2rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.band__l span{font-size:12.5px;color:color-mix(in srgb,#fff 68%,transparent)}

/* ------------------------------------------------------------ LE QUIZ ----- */
.qz{max-width:620px;margin-inline:auto;padding:1.6rem}
.qz__head{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem}
.qz__track{flex:1;height:6px;border-radius:99px;background:var(--u-sand);overflow:hidden}
.qz__track i{display:block;height:100%;width:16%;background:var(--u-grass);border-radius:99px;
  transition:width .34s var(--u-ease)}
@media (prefers-reduced-motion:reduce){.qz__track i{transition:none}}
.qz__step{font-size:13.5px;font-weight:600;color:var(--u-ink-soft);white-space:nowrap}
.qz h2{font-family:var(--u-display);font-weight:400;margin:0 0 .3rem;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,1.95rem);line-height:1.16;letter-spacing:-.015em}
.qz__sub{margin:0 0 1.1rem;font-size:14.5px;color:var(--u-ink-soft)}
.qz__opts{display:grid;gap:10px;margin-bottom:1rem}
.qz__opts--row{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.qz__opts--row .u-opt span{justify-content:center;padding-inline:.2rem;font-size:17px}
.qz__opts--row .u-opt span::before{display:none}
.qz__opts .u-opt span{min-height:64px;font-size:16px}
.opt--sm{min-height:64px;font-size:14.5px !important;font-weight:500 !important;line-height:1.4}
.qz__lock{margin:-.3rem 0 1rem;font-size:12.5px;color:var(--u-ink-faint)}
.qz .u-field input{min-height:58px;font-size:17px}
.qz__nav{display:flex;gap:10px;align-items:center}
.qz__back{background:none;border:0;font:inherit;font-size:15px;color:var(--u-ink-soft);
  cursor:pointer;min-height:56px;padding-inline:.7rem;border-radius:var(--u-r-pill)}
.qz__back:hover{background:var(--u-cream)}
.qz__err{color:var(--u-clay);font-size:14.5px;font-weight:600;margin:.2rem 0 .6rem}
.qz__badge{display:inline-flex;align-items:center;min-height:30px;padding:0 .8rem;
  border-radius:var(--u-r-pill);background:var(--u-grass-tint);color:var(--u-grass-deep);
  font-size:13px;font-weight:700;margin-bottom:.6rem}
.qz__amount{color:var(--u-grass);font-style:italic}
.qz__q3{font-family:var(--u-ui);font-size:1rem;font-weight:600;margin:1.3rem 0 .7rem}
.tag{background:var(--u-grass);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;
  border-radius:var(--u-r-pill);margin-left:.5rem}
.qz__ok{text-align:center}

/* ----------------------------------------------------- LES BLOCS SPLIT ---- */
.split{display:grid;gap:clamp(28px,4vw,54px);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--rev .split__t{order:2}
}
.kpis,.specs{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:12px}
@media(min-width:520px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpis li,.specs li{display:flex;flex-direction:column;gap:1px;background:var(--u-paper);
  border:1px solid var(--u-hair);border-radius:var(--u-r-tile);padding:.9rem 1.1rem}
.kpis b,.specs b{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--u-grass-deep);
  font-variant-numeric:tabular-nums;line-height:1.1}
.kpis span,.specs span{font-size:14px;color:var(--u-ink-soft)}

/* ------------------------------------------------------------ LE GRAPHE --- */
.chart{padding:1.5rem}
.chart__k{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--u-ink-faint);margin-bottom:1.1rem}
.chart__rows{display:grid;gap:1rem}
.chart__row{display:grid;gap:.35rem}
.chart__lbl{display:flex;justify-content:space-between;align-items:baseline;font-size:14.5px;font-weight:600}
.chart__lbl b{font-variant-numeric:tabular-nums;font-size:1.05rem}
.chart__bar{height:16px;border-radius:99px;background:var(--u-sand);overflow:hidden}
.chart__bar i{display:block;height:100%;border-radius:99px;background:var(--u-ochre);
  width:0;transition:width .8s var(--u-ease)}
.chart__row--win .chart__lbl{color:var(--u-grass-deep)}
.chart__row--win .chart__bar i{background:var(--u-grass)}
.chart__save{margin-top:.3rem;display:inline-flex;align-items:center;gap:.4rem;
  background:var(--u-grass-tint);color:var(--u-grass-deep);border-radius:var(--u-r-pill);
  padding:.4rem .9rem;font-size:14px;font-weight:700}
.chart__n{margin:1.1rem 0 0;font-size:12.5px;line-height:1.5;color:var(--u-ink-faint)}
@media (prefers-reduced-motion:reduce){.chart__bar i{transition:none}}

/* ------------------------------------------------------------- LE CALCUL -- */
.calc{padding:0;overflow:hidden;max-width:620px;margin:1.6rem auto 0}
.calc__r{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.3rem;border-bottom:1px solid var(--u-hair);font-size:15.5px}
.calc__r i{font-style:normal;color:var(--u-ink-faint);font-size:13.5px}
.calc__r b{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.calc__r--minus b{color:var(--u-grass)}
.calc__t{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:1.3rem;background:var(--u-grass-tint);font-size:1rem;font-weight:600;color:var(--u-grass-deep)}
.calc__t b{font-size:clamp(1.7rem,1.2rem + 2.2vw,2.5rem);font-weight:700;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;line-height:1}
.calc__t sup{font-size:.42em;vertical-align:super}
.calc__note{max-width:620px;margin:.9rem auto 0;font-size:12.5px;line-height:1.5;color:var(--u-ink-faint)}

/* --------------------------------------------------- ATLANTIC · LA VISU --- */
.shot{padding:2rem;display:grid;place-items:center;gap:1rem;background:var(--u-cream)}
.shot svg{width:100%;max-width:320px;color:var(--u-grass)}
.shot figcaption{font-size:13px;color:var(--u-ink-faint);text-align:center}

/* --------------------------------------------------------- LES 3 ETAPES -- */
.steps3{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:16px;counter-reset:s}
@media(min-width:840px){.steps3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps3 li{background:var(--u-paper);border:1px solid var(--u-hair);border-radius:var(--u-r-card);
  padding:1.5rem;display:flex;flex-direction:column;gap:.55rem}
.steps3__n{width:38px;height:38px;border-radius:var(--u-r-pill);background:var(--u-grass);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:16px;margin-bottom:.3rem}
.steps3 h3{margin:0;font-size:1.08rem;font-weight:600;letter-spacing:-.012em}
.steps3 p{margin:0;font-family:var(--u-text);font-size:1rem;line-height:1.55;color:var(--u-ink-soft)}

/* ----------------------------------------------------------- LA METHODE -- */
.mesure{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:16px;text-align:left}
@media(min-width:840px){.mesure{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mesure li{background:var(--u-paper);border:1px solid var(--u-hair);border-radius:var(--u-r-card);
  padding:1.4rem;display:flex;flex-direction:column;gap:.5rem}
.mesure svg{width:32px;height:32px;color:var(--u-grass)}
.mesure h3{margin:0;font-size:1.04rem;font-weight:600}
.mesure p{margin:0;font-family:var(--u-text);font-size:.99rem;line-height:1.55;color:var(--u-ink-soft)}

/* -------------------------------------------------------------- LE PIED -- */
.ft{background:var(--u-ink);color:color-mix(in srgb,#fff 74%,transparent);padding-block:44px 28px}
.ft .hd__n{color:#fff}
.ft .hd__b svg{color:color-mix(in srgb,#fff 74%,transparent)}
.ft__grid{display:grid;gap:26px}
@media(min-width:820px){.ft__grid{grid-template-columns:1.4fr 1fr 1.3fr}}
.ft h4{margin:0 0 .6rem;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:color-mix(in srgb,#fff 52%,transparent)}
.ft p,.ft li{font-size:14.5px;line-height:1.65;margin:0}
.ft b{color:#fff}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.ft a{color:#fff;text-decoration-color:color-mix(in srgb,#fff 40%,transparent)}
.ft ul a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.15rem}
.ft__end{border-top:1px solid color-mix(in srgb,#fff 16%,transparent);margin-top:26px;padding-top:18px;
  font-size:12.5px;line-height:1.5;color:color-mix(in srgb,#fff 52%,transparent)}

/* ---------------------------------------------------- LA BARRE COLLEE ----- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--u-ground) 92%,transparent);
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  border-top:1px solid var(--u-hair);transform:translateY(110%);transition:transform .3s var(--u-ease)}
.sticky.on{transform:translateY(0)}
.sticky .u-btn{width:100%}
@media(min-width:960px){.sticky{display:none}}
@media (prefers-reduced-motion:reduce){.sticky{transition:none}}

/* les cartes du kit heritent du sol lin, donc elles doivent rester blanches */
.u-card{background:var(--u-paper)}
.u-faq{border-top-color:var(--u-hair-2)}
.u-review{background:var(--u-paper)}

/* ============================================================================
   PASSE « MARKETEUR » · 2026-08-31 · sur ses trois corrections:
   du grain dans le fond, des cartes translucides, et on sort du noir.
   ========================================================================== */

/* --- LE GRAIN. Un lin imprime a du grain, un aplat n'en a pas. Bruit SVG en
       data URI, donc zero requete, plus deux halos chauds tres larges. ------ */
body{
  background-color:var(--u-ground);
  background-image:
    radial-gradient(1100px 620px at 12% -6%, color-mix(in srgb,var(--u-grass) 7%,transparent), transparent 62%),
    radial-gradient(900px 560px at 96% 22%, color-mix(in srgb,var(--u-ochre) 8%,transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,fixed;
  background-repeat:no-repeat,no-repeat,repeat;
}
.band--soft{position:relative;background:color-mix(in srgb,var(--u-cream) 76%,transparent)}

/* --- LES CARTES TRANSLUCIDES. Le verre refractif du kit, applique au blanc:
       le lin et son grain transparaissent, donc la carte flotte vraiment. --- */
.u-card,.qz,.kpis li,.specs li,.steps3 li,.mesure li,.u-review{
  background:color-mix(in srgb,var(--u-paper) 74%,transparent);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid color-mix(in srgb,#fff 68%,transparent);
  box-shadow:0 1px 2px rgba(20,40,30,.05), 0 18px 40px -22px rgba(20,40,30,.22);
  position:relative;
}
/* l'arete claire en haut, c'est elle qui fait lire le verre plutot que l'opacite */
.u-card::before,.qz::before,.steps3 li::before,.mesure li::before,.u-review::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,#fff 60%,transparent),transparent 42%);
}
.opener{background:color-mix(in srgb,var(--u-paper) 88%,transparent)}   /* sur photo: plus dense */
.calc,.chart,.shot{background:color-mix(in srgb,var(--u-paper) 82%,transparent)}
@supports not (backdrop-filter:blur(2px)){
  .u-card,.qz,.opener,.u-review{background:color-mix(in srgb,var(--u-paper) 96%,transparent)}
}

/* --- ON SORT DU NOIR. Le bandeau, le bloc de cloture et le pied passent en
       vert foret profond: meme poids visuel, aucune durete. ---------------- */
.band{background:var(--u-grass-deep);
  background-image:linear-gradient(120deg,var(--u-grass-deep),color-mix(in srgb,var(--u-grass) 82%,var(--u-ink)))}
.ft{background:var(--u-grass-deep);
  background-image:linear-gradient(160deg,var(--u-grass-deep),color-mix(in srgb,var(--u-grass-deep) 84%,var(--u-ink)))}
.u-ink{background:var(--u-grass-deep) !important;
  background-image:linear-gradient(135deg,var(--u-grass-deep),color-mix(in srgb,var(--u-grass) 70%,var(--u-ink))) !important}
.u-ink .u-btn--grass{background:var(--u-paper);color:var(--u-grass-deep)}
.u-ink .u-btn--grass:hover{background:var(--u-cream)}

/* --- LES AVIS GOOGLE, avec la vraie marque ---------------------------------- */
.u-review__g{display:flex;align-items:center;gap:.4rem}
.u-review__g img{width:15px;height:15px;flex:0 0 auto}
.gsum{display:flex;align-items:center;justify-content:center;gap:.7rem;flex-wrap:wrap;
  margin:0 auto 22px;padding:.7rem 1.2rem;width:max-content;max-width:100%;
  border-radius:var(--u-r-pill);background:color-mix(in srgb,var(--u-paper) 80%,transparent);
  border:1px solid var(--u-hair);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.gsum img{width:20px;height:20px}
.gsum b{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}
.gsum .u-stars svg{width:14px;height:14px}
.gsum span{font-size:13.5px;color:var(--u-ink-soft)}

/* --- LA QUESTION DE JEAN, en tete de chaque bloc ---------------------------- */
.jean{display:inline-flex;align-items:flex-start;gap:.6rem;margin:0 0 .3rem;
  font-family:var(--u-text);font-style:italic;font-size:1.02rem;line-height:1.45;
  color:var(--u-ink-soft);max-width:34ch}
.jean::before{content:"«";font-family:var(--u-display);font-size:1.7rem;line-height:.9;
  color:var(--u-grass);flex:0 0 auto}
.center .jean{text-align:left}

/* --- LES CHANTIERS ---------------------------------------------------------- */
.chantiers{display:grid;gap:14px;margin-top:1.6rem}
@media(min-width:700px){.chantiers{grid-template-columns:repeat(2,minmax(0,1fr))}}

.chantier{border-radius:var(--u-r-card);overflow:hidden;position:relative;isolation:isolate;
  border:1px solid color-mix(in srgb,#fff 60%,transparent);box-shadow:var(--u-sh-2);background:var(--u-cream)}
.chantier img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
  /* height:auto est obligatoire: l'attribut height=750 du HTML ecrase sinon
     l'aspect-ratio et l'image sort en portrait */
.chantier figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem 1rem .8rem;
  font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(12,26,18,.82))}

/* --- L'ELIGIBILITE, deux colonnes oui / non -------------------------------- */
.elig{display:grid;gap:14px;margin:1.6rem 0}
@media(min-width:700px){.elig{grid-template-columns:repeat(2,minmax(0,1fr))}}
.elig li{list-style:none;display:flex;gap:.85rem;align-items:flex-start;padding:1.1rem 1.2rem;
  border-radius:var(--u-r-tile);background:var(--u-grass-tint);border:1px solid transparent}
.elig li svg{width:22px;height:22px;color:var(--u-grass);flex:0 0 auto;margin-top:2px}
.elig li b{display:block;font-size:15.5px;font-weight:600}
.elig li span{font-size:14px;color:var(--u-ink-soft)}
.elig li.no{background:color-mix(in srgb,var(--u-sand) 55%,transparent)}
.elig li.no svg{color:var(--u-ink-faint)}

/* --- LE RAPPEL DE CTA sous chaque bloc ------------------------------------- */
.after{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:28px}
.after small{font-size:13px;color:var(--u-ink-faint)}

/* --- l'en tete debordait de 6px a 390: le bouton doit pouvoir retrecir ----- */
.hd .u-btn{white-space:nowrap;padding-inline:1rem;flex:0 1 auto;min-width:0}
@media(max-width:430px){.hd .u-btn{padding-inline:.8rem;font-size:14px}}

/* --- la legende de chantier: elle est posee sur une photo, donc le degrade
       doit porter le contraste tout seul, sans dependre de l'image dessous -- */
.chantier figcaption{
  background:linear-gradient(180deg,transparent,rgba(10,22,15,.62) 42%,rgba(10,22,15,.92));
  padding-top:2.2rem;text-shadow:0 1px 8px rgba(0,0,0,.5)}