/* ══════════════════════════════════════════════════════════════════════
   RENOV HOUSE — direction artistique

   Noir et vert, repris du logo : fond quasi noir (#0A0B0A, la teinte du
   logo), vert sauge #90A878 echantillonne directement dans le fichier
   fourni par le client, texte blanc casse.

   Parti pris « architecture haut de gamme » : peu de couleurs, beaucoup
   de vide, des filets fins plutot que des bordures, des majuscules
   espacees pour les libelles, et des photos qui occupent tout le cadre.
   Le vert ne sert qu'aux appels a l'action et aux reperes — jamais en
   aplat decoratif.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --noir:#0A0B0A;
  --noir-2:#101210;      /* surfaces */
  --noir-3:#161915;      /* surfaces marquees */
  --ligne:rgba(255,255,255,.09);
  --ligne-forte:rgba(255,255,255,.18);
  --texte:#EDEDE8;
  --doux:#BFC4B7;      /* remonte : #9EA298 passait mal sur le fond noir */
  --doux-2:#949A8B;
  --vert:#90A878;        /* echantillonne dans le logo */
  --vert-clair:#AFC59A;
  --vert-fonce:#6E8459;
  --sur-vert:#0A0B0A;
  --max:1220px;
  --ease:cubic-bezier(.22,1,.36,1);
  --jaune:#F0C24B;       /* trame de points du fond, reactive au curseur */
  /* Jost pour la lecture (geometrique, proche du Futura) et Cormorant
     Garamond pour les titres : le registre « architecture d'interieur »
     plutot que le registre « entreprise du batiment ». */
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --titre:"Cormorant Garamond",Cormorant,Garamond,Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--noir)}
body{margin:0;background:var(--noir);color:var(--doux);font-family:var(--sans);
  font-size:17px;line-height:1.75;font-weight:300;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--texte);text-decoration-color:var(--ligne-forte);text-underline-offset:3px}
a:hover{text-decoration-color:var(--vert)}
h1,h2,h3{color:var(--texte);font-family:var(--titre);line-height:1.06;margin:0 0 .5em;
  font-weight:500;letter-spacing:-.005em}
h1{font-size:clamp(2.7rem,6.4vw,4.6rem);font-weight:400}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1.15em}
strong{color:var(--texte);font-weight:500}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--vert);color:var(--sur-vert);padding:10px 16px;z-index:100}
.sur{display:inline-block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--vert);font-weight:700;margin-bottom:16px}

/* ── Boutons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 30px;border:1px solid transparent;border-radius:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:.9rem;letter-spacing:.04em;text-decoration:none;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.btn--accent{background:var(--vert);color:var(--sur-vert);border-color:var(--vert)}
.btn--accent:hover{background:var(--vert-clair);border-color:var(--vert-clair)}
.btn--ligne{background:transparent;color:var(--texte);border-color:var(--ligne-forte)}
.btn--ligne:hover{border-color:var(--vert);color:var(--vert)}
.btn--ghost{background:transparent;color:var(--doux);border-color:var(--ligne)}
.btn--ghost:hover{color:var(--texte);border-color:var(--ligne-forte)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}

/* ── En-tete ── */
.entete{position:sticky;top:0;z-index:50;background:rgba(10,11,10,.86);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--ligne);
  transition:box-shadow .3s,background-color .3s}
.entete__in{display:flex;align-items:center;gap:26px;min-height:82px;transition:min-height .3s var(--ease)}
.entete.compacte{background:rgba(10,11,10,.95)}
.entete.compacte .entete__in{min-height:64px}
/* Le logo fourni par le client, detoure de son cadre et rendu transparent
   (images/logo-renov-house-lockup.png). Il porte deja la baseline : pas de
   texte en plus. */
.marque{text-decoration:none;display:flex;align-items:center;flex:none}
.marque__logo{height:44px;width:auto;transition:height .3s var(--ease)}
.entete.compacte .marque__logo{height:34px}
.menu{display:flex;gap:28px;list-style:none;margin:0 0 0 auto;padding:0}
.menu a{text-decoration:none;font-size:.86rem;letter-spacing:.06em;color:var(--doux);
  padding:6px 0;position:relative;text-transform:uppercase;font-weight:500}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--vert);transition:right .35s var(--ease)}
.menu a:hover,.menu a[aria-current]{color:var(--texte)}
.menu a:hover::after,.menu a[aria-current]::after{right:0}
/* Les huit metiers se deplient sous « Metiers ». Le lien reste cliquable
   et mene a la page d'ensemble : le menu raccourcit le chemin, il ne le
   remplace pas. Le creux entre l'onglet et le panneau est comble par un
   padding negatif, sinon le survol se perd entre les deux. */
.menu__parent{position:relative;padding-bottom:16px;margin-bottom:-16px}
.menu__sous{position:absolute;top:100%;left:-20px;min-width:262px;z-index:5;
  list-style:none;margin:0;padding:10px 0;background:rgba(12,14,12,.97);
  border:1px solid var(--ligne);backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.menu__parent:hover .menu__sous,.menu__parent:focus-within .menu__sous{
  opacity:1;visibility:visible;transform:none}
.menu__sous li{margin:0}
.menu__sous a{display:block;padding:10px 22px;font-size:.8rem;letter-spacing:.03em;
  text-transform:none;color:var(--doux);font-weight:400}
.menu__sous a::after{display:none}
.menu__sous a:hover{color:var(--texte);background:rgba(255,255,255,.045)}
.menu__bascule{display:none;background:none;border:0;color:var(--doux);font:inherit;
  font-size:1.35rem;line-height:1;padding:0 6px;cursor:pointer}
.entete__cta{padding:12px 22px}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;
  margin-left:auto;cursor:pointer}
.burger span{width:22px;height:1px;background:var(--texte);display:block}

/* ── Hero ─────────────────────────────────────────────────────────────
   Mise en page reprise de la maquette editoriale choisie par le client
   (frame Figma « tpl-05 » du pack Daily Hero) : grand titre serif coupe
   en trois lignes, un mot a l'or, une pastille photo glissee dans la
   derniere ligne, un rappel a droite, les vignettes de chantiers en bas
   a gauche et deux cartes flottantes en bas a droite.

   Seule la composition est reprise : les textes, les photos et les
   couleurs sont ceux de RENOV HOUSE. */
.hero{position:relative;min-height:min(94vh,880px);display:flex;align-items:center;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--noir) 3%,rgba(10,11,10,.58) 44%,rgba(10,11,10,.4) 100%),
             linear-gradient(to right,rgba(10,11,10,.88) 0%,rgba(10,11,10,.5) 46%,rgba(10,11,10,.72) 100%)}
.hero__in{position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);gap:58px;align-items:center;
  padding:112px 26px 104px}
.hero__titre{margin:0 0 36px;color:#fff;font-weight:400;line-height:.95;letter-spacing:-.015em;
  font-size:clamp(2.9rem,7.6vw,5.7rem)}
.hero__titre .l{display:block}
.hero__titre em{font-style:normal;color:var(--vert-clair)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-bottom:54px}
.hero__accroche{margin:0;max-width:36ch;font-size:.95rem;color:rgba(255,255,255,.84)}
.btn--pill{border-radius:999px;padding:16px 32px}
.hero__vignettes{display:inline-flex;align-items:center;gap:26px;text-decoration:none}
.hero__pile{display:inline-flex;align-items:center}
.hero__pile > *{width:54px;height:54px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.22);background:var(--noir-2);object-fit:cover;
  margin-right:-15px;transition:transform .4s var(--ease)}
.hero__pile > *:last-child{margin-right:0}
.hero__vignettes:hover .hero__pile > *{margin-right:-8px}
.hero__vignettes-txt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);
  transition:color .25s}
.hero__vignettes:hover .hero__vignettes-txt{color:var(--texte)}
.hero__aside{align-self:center;max-width:34ch;justify-self:end}
.hero__aside-t{font-family:var(--titre);font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15;
  color:#fff;margin:0 0 .6em}
.hero__aside-t em{font-style:italic;color:var(--vert-clair)}
.hero__aside p{font-size:.92rem;color:rgba(255,255,255,.84);margin-bottom:1.3em}
.hero__lien{display:inline-flex;align-items:center;gap:14px;text-decoration:none;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--texte)}
.hero__lien::after{content:"";width:34px;height:1px;background:var(--vert);
  transition:width .35s var(--ease)}
.hero__lien:hover::after{width:56px}
/* Cartes flottantes : elles ne portent rien d'unique — la note Google se
   retrouve plus bas dans la page — donc elles peuvent disparaitre sur
   les petits ecrans sans rien retirer au visiteur. */
.hero__cartes{position:absolute;z-index:3;bottom:64px;display:flex;align-items:flex-end;gap:14px;
  right:max(26px,calc((100vw - var(--max)) / 2 + 26px))}
.hero__carte{border:1px solid rgba(255,255,255,.14);border-radius:16px;
  background:rgba(10,11,10,.6);backdrop-filter:blur(10px)}
.hero__carte--note{display:flex;align-items:center;gap:13px;padding:15px 22px}
.hero__carte--note svg{width:22px;height:22px;flex:none;color:var(--texte)}
.hero__carte-chiffre{display:flex;align-items:baseline;gap:9px;margin:0;font-family:var(--titre);
  font-size:1.8rem;line-height:1;color:#fff;font-weight:600}
.hero__carte-chiffre span{font-family:var(--sans);font-size:.78rem;letter-spacing:2px;color:var(--jaune)}
.hero__carte-txt{margin:5px 0 0;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux-2)}
.hero__carte--photo{position:relative;width:132px;height:96px;overflow:hidden;padding:0}
.hero__carte--photo img{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero__carte--photo span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(10,11,10,.92),transparent)}

/* Signature : la phrase que le client veut voir partout. */
.signature{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);
  padding:26px 0;text-align:center}
.signature p{margin:0;font-size:clamp(.95rem,1.7vw,1.15rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--doux);font-weight:500}
.signature strong{color:var(--vert);font-weight:500}

/* ── Sections ── */
.sect{padding:100px 0}
.sect--surface{background:rgba(16,18,16,.55)}
.tete{max-width:66ch;margin-bottom:52px}
.tete--centre{margin-left:auto;margin-right:auto;text-align:center}
.grille{display:grid;gap:1px;background:var(--ligne)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.grille--libre{background:none;gap:26px}

.carte{background:rgba(11,13,11,.58);padding:34px 30px;position:relative;
  transition:background .3s var(--ease)}
.grille--libre .carte{background:rgba(16,18,16,.58);border:1px solid var(--ligne)}
.carte h3{margin-bottom:.5em}
.carte p{margin:0;font-size:.94rem;color:var(--doux)}
.carte:hover{background:rgba(24,27,23,.75)}
.carte__mot{display:inline-block;margin-top:16px;font-size:.85rem;color:var(--vert);font-style:italic}
/* Sixieme case de la grille des villes : cinq villes pour trois colonnes
   laissaient un trou. Elle sert maintenant a ceux qui ne s'y trouvent pas. */
.carte--appel{background:rgba(20,23,19,.72)}
.carte--appel h3{color:var(--vert-clair)}
.carte--appel:hover{background:rgba(30,34,27,.85)}
a.carte{text-decoration:none;display:block}
a.carte::after{content:"→";position:absolute;right:28px;bottom:28px;color:var(--vert);
  opacity:0;transform:translateX(-6px);transition:.3s var(--ease)}
a.carte:hover::after{opacity:1;transform:none}

/* ── Galerie ── */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.gal--deux{grid-template-columns:repeat(2,1fr)}
.gal--une{grid-template-columns:1fr;max-width:820px}
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--noir-2)}
.gal img{width:100%;height:320px;object-fit:cover;transition:transform .9s var(--ease),opacity .4s}
.gal figure:hover img{transform:scale(1.05)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;
  font-size:.8rem;color:#fff;letter-spacing:.04em;
  background:linear-gradient(to top,rgba(10,11,10,.92),transparent)}
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.filtres button{padding:10px 20px;border:1px solid var(--ligne);background:transparent;
  color:var(--doux);font:inherit;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:.25s}
.filtres button:hover{color:var(--texte);border-color:var(--ligne-forte)}
.filtres button[aria-pressed="true"]{background:var(--vert);color:var(--sur-vert);border-color:var(--vert)}

/* ── Page metier ── */
.metier__intro{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}
.metier__img{margin:0;overflow:hidden;background:var(--noir-2)}
.metier__img img{width:100%;height:clamp(320px,42vw,520px);object-fit:cover}
.liste-check{list-style:none;padding:0;margin:0}
.liste-check li{padding-left:26px;position:relative;margin-bottom:13px;color:var(--doux)}
.liste-check li::before{content:"";position:absolute;left:0;top:.7em;width:11px;height:1px;background:var(--vert)}
.duo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ligne)}
.duo > div{background:rgba(11,13,11,.58);padding:34px 30px}
.duo h3{color:var(--vert-clair);font-size:1.25rem;letter-spacing:0}
.duo p{margin:0;font-size:.94rem}
.autres{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.autres a{display:inline-block;padding:9px 18px;border:1px solid var(--ligne);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--doux);
  transition:.25s}
.autres a:hover{color:var(--vert);border-color:var(--vert)}

/* ── Photos d'illustration ─────────────────────────────────────────────
   Quelques images de banque servent a montrer un materiel ou un ouvrage
   type que le client n'a pas encore en photo. Elles sont toujours
   signalees : le site promet par ailleurs que les realisations montrees
   sont de vrais chantiers, cette promesse ne doit pas se diluer. */
.illus{margin-top:12px;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--doux-2)}
.illus-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px}
.illus-grille--une{grid-template-columns:1fr;max-width:660px}
.illus-grille figure{margin:0}
.illus-grille img{width:100%;height:320px;object-fit:cover;background:var(--noir-2)}
.illus-grille figcaption{margin-top:12px;font-size:.74rem;letter-spacing:.06em;color:var(--doux-2)}

/* Mention RGE, sur les metiers ouvrant droit aux aides. */
.rge{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:14px 18px;
  border:1px solid var(--ligne);background:rgba(16,18,16,.55);font-size:.86rem;color:var(--doux)}
.rge b{flex:none;padding:5px 10px;border:1px solid var(--vert-fonce);color:var(--vert-clair);
  font-size:.68rem;font-weight:600;letter-spacing:.16em}

/* ── Avis Google, presents sur chaque page ──────────────────────────
   Les trois avis sont recopies mot pour mot depuis la fiche Google de
   l'entreprise, et le bloc renvoie vers cette fiche : le visiteur peut
   verifier. Rien n'est reecrit ni resume. */
.avis{border-top:1px solid var(--ligne);background:rgba(16,18,16,.55);padding:82px 0}
.avis__tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:26px;margin-bottom:40px}
.avis__tete h2{margin:0}
.avis__note{display:flex;align-items:center;gap:15px;border:1px solid var(--ligne);
  padding:14px 22px;background:rgba(10,11,10,.55);flex:none}
.avis__note > svg{width:24px;height:24px;flex:none}
.avis__ligne{display:flex;align-items:baseline;gap:10px;margin:0}
.avis__chiffre{font-family:var(--titre);font-size:2rem;line-height:1;color:var(--texte);font-weight:600}
.avis__etoiles{color:var(--jaune);letter-spacing:3px;font-size:.95rem}
.avis__compte{margin:4px 0 0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--doux-2)}
.avis__liste{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.avis__carte{margin:0;display:flex;flex-direction:column;padding:30px 28px;
  background:rgba(11,13,11,.58);border:1px solid var(--ligne);transition:border-color .35s var(--ease)}
.avis__carte:hover{border-color:rgba(240,194,75,.4)}
.avis__carte > .avis__etoiles{margin-bottom:14px}
.avis__carte p{flex:1;margin:0;font-family:var(--titre);font-size:1.2rem;line-height:1.55;
  color:var(--texte)}
.avis__pied{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:17px;
  border-top:1px solid var(--ligne)}
.avis__ini{flex:none;width:34px;height:34px;border-radius:50%;background:rgba(240,194,75,.14);
  color:var(--jaune);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:500}
.avis__qui{display:flex;flex-direction:column;line-height:1.4}
.avis__qui strong{font-size:.92rem;color:var(--texte);font-weight:500}
.avis__qui span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--doux-2)}
.avis__bas{margin:34px 0 0}
.avis .btn svg{width:17px;height:17px}

/* ── Page « Nos metiers » : les huit en grille ── */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mcarte{position:relative;display:block;text-decoration:none;overflow:hidden;
  background:rgba(11,13,11,.58);border:1px solid var(--ligne);
  transition:border-color .4s var(--ease),transform .4s var(--ease),background .4s var(--ease)}
.mcarte:hover{border-color:rgba(144,168,120,.5);background:rgba(20,22,19,.72);transform:translateY(-3px)}
.mcarte__img{margin:0;overflow:hidden;background:var(--noir-2)}
.mcarte__img img{width:100%;height:200px;object-fit:cover;opacity:.7;
  transition:transform .9s var(--ease),opacity .5s}
.mcarte:hover .mcarte__img img{transform:scale(1.06);opacity:.95}
.mcarte__txt{padding:24px 24px 28px}
.mcarte__num{font-size:.66rem;letter-spacing:.2em;font-weight:600;color:var(--vert);
  font-variant-numeric:tabular-nums}
.mcarte h2{font-size:1.5rem;margin:.3em 0 .35em}
.mcarte p{margin:0;font-size:.9rem;color:var(--doux)}
.mcarte__mot{display:block;margin-top:16px;font-size:.85rem;color:var(--vert);font-style:italic}
.mcarte__fleche{position:absolute;right:22px;bottom:24px;color:var(--vert);opacity:0;
  transform:translateX(-6px);transition:.35s var(--ease)}
.mcarte:hover .mcarte__fleche{opacity:1;transform:none}

/* ── Fond : trame de points, reveillee par le curseur ───────────────
   La toile est posee par main.js et reste derriere tout le contenu.
   Les sections passent en fonds semi-opaques pour la laisser voir. */
.fond{position:fixed;inset:0;z-index:0;pointer-events:none;display:block}
main{position:relative;z-index:1}

/* ── Formulaire ── */
.form{display:grid;gap:20px;max-width:640px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ label{font-size:.72rem;font-weight:700;color:var(--doux);letter-spacing:.16em;text-transform:uppercase}
.champ input,.champ textarea,.champ select{padding:14px 15px;border:1px solid var(--ligne);
  background:var(--noir-2);font:inherit;font-size:.97rem;color:var(--texte);border-radius:0}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:none;border-color:var(--vert)}
.champ textarea{min-height:140px;resize:vertical}
.champ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--vert) 50%),
  linear-gradient(135deg,var(--vert) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.rgpd{font-size:.8rem;color:var(--doux-2)}
.pot{position:absolute;left:-9999px}

/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--ligne);padding:20px 0}
.faq summary{cursor:pointer;font-family:var(--titre);font-weight:500;color:var(--texte);font-size:1.25rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--vert);font-size:1.4rem;line-height:1;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin:16px 0 0;color:var(--doux)}
.faq details[open] p{animation:deplie .4s var(--ease)}
@keyframes deplie{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Divers ── */
.fil{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--doux-2);padding:26px 0 0}
.fil a{color:var(--doux-2);text-decoration:none}
.fil a:hover{color:var(--vert)}
.bande{background:rgba(22,25,21,.62);padding:70px 0;border-top:1px solid var(--ligne)}
.bande__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.bande h2{margin-bottom:.3em}
.bande p{margin:0}
.legal{max-width:76ch}
.legal h2{margin-top:2.2em;font-size:1.3rem}

/* ── Pied ── */
.pied{position:relative;z-index:1;background:rgba(8,9,8,.8);border-top:1px solid var(--ligne);padding:70px 0 0}
.pied a{color:var(--doux);text-decoration:none}
.pied a:hover{color:var(--vert)}
.pied__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.pied__logo{height:46px;width:auto;margin:0 0 18px}
.pied__rge{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:.78rem;color:var(--doux-2)}
.pied__rge span{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid var(--vert-fonce);
  color:var(--vert-clair);font-size:.66rem;font-weight:600;letter-spacing:.16em}
.pied__txt{font-size:.9rem;margin-bottom:16px}
.pied__t{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--doux-2);
  font-weight:700;margin:0 0 16px}
.pied__liste{list-style:none;margin:0;padding:0;font-size:.9rem}
.pied__liste li{margin-bottom:9px}
.pied__soc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.pied__soc a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--ligne);color:var(--doux);transition:color .25s,border-color .25s,background .25s}
.pied__soc a:hover{color:var(--vert);border-color:var(--vert);background:rgba(144,168,120,.08)}
.pied__soc svg{width:17px;height:17px}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  border-top:1px solid var(--ligne);padding:24px 0;font-size:.8rem;color:var(--doux-2)}
.pied__bas p{margin:0}

/* ── Appel flottant + cookies ── */
.appel-flottant{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:60;
  background:var(--vert);color:var(--sur-vert);text-decoration:none;padding:16px;
  align-items:center;justify-content:center;gap:10px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.appel-flottant svg{width:19px;height:19px}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;background:var(--noir-3);
  border:1px solid var(--ligne-forte);padding:20px 22px;box-shadow:0 16px 50px rgba(0,0,0,.6);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;max-width:780px;margin:0 auto}
/* Sans cette regle, le display:flex ci-dessus ecrase le display:none que le
   navigateur applique a [hidden] : le bandeau ne se fermerait jamais. */
.cookies[hidden]{display:none}
.cookies p{margin:0;font-size:.86rem;flex:1 1 320px;color:var(--doux)}
.cookies__btns{display:flex;gap:10px}
.cookies .btn{padding:11px 20px;font-size:.84rem}
.progres{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.progres span{display:block;height:100%;width:0;background:var(--vert)}
@supports (animation-timeline: scroll()){
  .js .progres span{width:100%;transform-origin:0 50%;transform:scaleX(0);
    animation:avance linear both;animation-timeline:scroll(root)}
  @keyframes avance{to{transform:scaleX(1)}}
}

/* ══════════════════════ MOUVEMENT ══════════════════════
   Conditionne a `.js` posee par un script inline dans le <head> : sans
   JavaScript, aucune de ces regles ne s'applique et la page reste
   entierement lisible. */
.js .ent{opacity:0;transform:translateY(20px);animation:entree .75s var(--ease) forwards;
  animation-delay:var(--d,0s)}
@keyframes entree{to{opacity:1;transform:none}}
/* :where() ramene la specificite a zero : sans lui, `.js .sect .tete`
   (3 classes) l'emporterait sur `.js .vu` (2 classes) et l'element
   recevrait sa classe tout en restant invisible. */
.js :where(.sect .tete,.carte,.mcarte,.avis__carte,.gal figure,.grille > *,.duo > div,
           .faq details,.bande__in > *,.metier__intro > *){
  opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .vu{opacity:1;transform:none}
.js .hero__img{animation:respire 24s var(--ease) forwards;transform-origin:52% 45%}
@keyframes respire{from{transform:scale(1.07)}to{transform:scale(1)}}
@supports (animation-timeline: view()){
  .js .hero__in{animation:glisse linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
  @keyframes glisse{to{transform:translateY(-40px);opacity:.25}}
}

@media (max-width:1180px){
  .hero__cartes{display:none}
}
@media (max-width:980px){
  .hero{min-height:0}
  .hero__in{grid-template-columns:1fr;gap:40px;padding:84px 26px 76px;align-items:start}
  .hero__aside{justify-self:start;max-width:46ch;padding-top:4px;
    border-top:1px solid rgba(255,255,255,.14)}
  .hero__aside-t{padding-top:26px}
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .avis__liste{grid-template-columns:1fr}
  .metier__intro{grid-template-columns:1fr;gap:32px}
  .g4,.g3,.duo{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .pied__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:16px}
  .hero__titre{margin-bottom:28px}
  .hero__actions{gap:20px;margin-bottom:40px}
  .hero__accroche{max-width:none}
  .hero__vignettes{gap:18px}
  .hero__pile > *{width:46px;height:46px}
  .mgrid{grid-template-columns:1fr}
  .illus-grille{grid-template-columns:1fr}
  .illus-grille img{height:240px}
  .avis{padding:60px 0}
  .avis__note{width:100%}
  .sect{padding:66px 0}
  .entete__cta{display:none}
  .burger{display:flex}
  .menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;
    background:var(--noir-2);border-bottom:1px solid var(--ligne);padding:8px 26px 20px;display:none}
  .menu.ouvert{display:flex}
  .menu a{display:block;padding:14px 0;border-bottom:1px solid var(--ligne)}
  .menu__parent{position:static;display:flex;flex-wrap:wrap;align-items:center;
    padding-bottom:0;margin-bottom:0}
  .menu__parent > a{flex:1}
  .menu__bascule{display:block;padding:12px 6px;border-bottom:1px solid var(--ligne)}
  .menu__sous{position:static;flex-basis:100%;display:none;opacity:1;visibility:visible;
    transform:none;border:0;background:none;box-shadow:none;padding:4px 0 10px 16px;
    backdrop-filter:none;min-width:0}
  .menu__sous.ouvert{display:block}
  .menu__sous a{padding:11px 0;font-size:.85rem;border-bottom:1px solid var(--ligne)}
  .g2,.g3,.g4,.gal,.duo{grid-template-columns:1fr}
  .pied__grid{grid-template-columns:1fr}
  .appel-flottant{display:flex}
  body{padding-bottom:80px}
  .cookies{bottom:88px}
  .gal img{height:250px}
}
@media (prefers-reduced-motion: reduce){
  .js .ent,.js :where(.sect .tete,.carte,.mcarte,.avis__carte,.gal figure,.grille > *,.duo > div,
  .faq details,.bande__in > *,.metier__intro > *){opacity:1!important;transform:none!important;
    animation:none!important;transition:none!important}
  .js .hero__img,.js .hero__in,.js .progres span{
    animation:none!important;transform:none!important}
  .btn:hover,.carte:hover,.gal figure:hover img{transform:none}
  html{scroll-behavior:auto}
}