/* =====================================================================
   Atelier Couverture Alex — feuille de style unique.

   Charte « Ardoise & Cuivre » : le gris bleute de l'ardoise de schiste
   pour l'encre et les fonds sombres, la craie pour le fond clair, le
   cuivre pour l'accent — les trois matieres qu'un couvreur a dans les
   mains. Aucun degrade decoratif : des aplats, comme un toit.

   Sommaire
     01  Jetons
     02  Reprise et base
     03  Typographie
     04  Utilitaires de mise en page
     05  Boutons et liens
     07  En-tete, navigation, menu plein ecran
     08  Fil d'Ariane
     09  Hero
     10  Sections communes
     11  Cartes de prestation
     12  Etapes, chiffres, matieres
     13  Communes
     14  Avis
     15  FAQ
     16  Pages interieures (prose, reponse, reperes)
     17  Formulaire
     18  Bandeau CTA, pied de page, barre mobile
     19  Reveal et mouvement reduit
   ===================================================================== */


/* 01 — JETONS ======================================================== */
:root{
  /* Matieres */
  --ink:#12171B;          /* ardoise profonde */
  --ink-2:#1B222A;
  --ink-3:#27313A;
  --craie:#F7F4EF;        /* fond clair */
  --craie-2:#EFEAE2;
  --blanc:#FFFFFF;

  /* Cuivre — trois valeurs, trois usages.
     --cuivre       : texte et petits elements sur fond CLAIR (5,1:1)
     --cuivre-vif   : aplats, boutons, surfaces
     --cuivre-clair : texte et accents sur fond SOMBRE (7,0:1) */
  --cuivre:#A94D24;
  --cuivre-vif:#BE5729;
  --cuivre-clair:#E08A55;
  /* Accent TEXTE du contexte courant : redefini plus bas sur chaque
     enveloppe sombre. Tout accent typographique lit ce jeton. */
  --accent-txt:var(--cuivre);
  --cuivre-encre:#2A0F04;  /* texte pose SUR un aplat cuivre */

  /* Textes sur fond clair */
  --t1:#12171B;
  --t2:#4E5A62;
  --t3:#636E76;            /* le plus discret qui passe encore le AA */
  --ligne:#DFD8CD;
  --ligne-fine:#E8E2D9;

  /* Textes sur fond sombre */
  --d1:#F4F1EC;
  --d2:#AFBAC1;
  --d3:#838F96;          /* releve : 7D8990 tombait a 4,47:1 sur le pied */
  --ligne-d:rgba(255,255,255,.13);

  /* Typographie */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --texte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* Rythme */
  --shell:1220px;
  --gout:clamp(20px,5vw,40px);
  --sect:clamp(64px,9vw,124px);
  --r:14px;                /* rayon standard */
  --r-s:8px;

  --ombre:0 1px 2px rgba(18,23,27,.05),0 12px 32px -12px rgba(18,23,27,.14);
  --ombre-f:0 2px 4px rgba(18,23,27,.06),0 26px 60px -20px rgba(18,23,27,.28);
}

@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/fraunces-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(../fonts/fraunces-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* 02 — REPRISE ET BASE =============================================== */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Reserve la gouttiere de defilement en permanence : une page
     courte et une page longue ont ainsi la meme largeur utile, et le
     contenu ne se decale pas d'une page a l'autre. */
  scrollbar-gutter:stable;
}
body{
  margin:0;background:var(--craie);color:var(--t1);
  font-family:var(--texte);font-size:1.0625rem;line-height:1.65;
  font-feature-settings:"kern","liga";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--ligne);margin:0}

:focus-visible{outline:2px solid var(--cuivre-vif);outline-offset:3px;border-radius:2px}

::selection{background:var(--cuivre-vif);color:#fff}

/* Barre de defilement. ⚠ scrollbar-width/-color sur html desactive les
   ::-webkit-scrollbar sous Chromium : on n'applique la version standard
   que si la version webkit n'est PAS supportee. */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--craie-2)}
::-webkit-scrollbar-thumb{background:#C3BAAC;border-radius:99px;border:3px solid var(--craie-2)}
::-webkit-scrollbar-thumb:hover{background:var(--cuivre-vif)}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#C3BAAC var(--craie-2)}
}

.saut{
  position:fixed;top:10px;left:10px;z-index:400;
  background:var(--ink);color:var(--d1);padding:10px 16px;border-radius:8px;
  transform:translateY(-160%);transition:transform .2s;
}
.saut:focus{transform:none}


/* Contextes sombres : ils basculent l accent texte, une seule fois,
   au lieu d une surcharge par composant. */
.sect--sombre,.masthead,.bande-cta,.hero,.pied,.menu,.encart{--accent-txt:var(--cuivre-clair)}
.encart--clair{--accent-txt:var(--cuivre)}


/* 03 — TYPOGRAPHIE =================================================== */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:600;
  line-height:1.08;letter-spacing:-.018em;margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 90;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,1.35rem + 3.5vw,4.3rem)}
h2{font-size:clamp(1.85rem,1.15rem + 2.4vw,3.1rem)}
h3{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);line-height:1.2}
h4{font-size:1.1rem;line-height:1.3}

.sur-titre{
  font-family:var(--texte);font-size:.75rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent-txt);
  margin:0 0 .9rem;display:flex;align-items:center;gap:.7em;
}
.sur-titre::before{
  content:"";width:26px;height:2px;background:currentColor;flex:none;opacity:.6;
}
.sur-titre--centre{justify-content:center}

.chapeau{
  font-size:clamp(1.05rem,1rem + .4vw,1.24rem);line-height:1.6;color:var(--t2);
  max-width:62ch;
}
.sect--sombre .chapeau{color:var(--d2)}

/* Mot mis en valeur dans un titre : cuivre, jamais un autre poids —
   changer la graisse ferait bouger la ligne de base. */
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent-txt)}


/* 04 — UTILITAIRES DE MISE EN PAGE =================================== */
.shell{width:min(100% - var(--gout) * 2,var(--shell));margin-inline:auto}
.sect{padding-block:var(--sect);position:relative}
.sect--sombre{background:var(--ink);color:var(--d1)}
.sect--craie{background:var(--craie-2)}
.sect--serre{padding-block:clamp(48px,6vw,80px)}

.tete{max-width:64ch;margin-bottom:clamp(34px,4vw,58px)}
.tete--centre{margin-inline:auto;text-align:center}
.tete--centre .sur-titre{justify-content:center}
.tete p{margin-top:1rem}

/* Bande d'ardoise : le motif signature du site. Des rangs d'ardoises
   suggeres par deux degrades repetes, jamais une image. Sert de
   separateur et d'ambiance sur les fonds sombres. */
.ardoise{
  --a:26px;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px var(--a)),
    repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px calc(var(--a) * .62));
}
.filet{height:1px;background:var(--ligne);border:0}


/* 05 — BOUTONS ======================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.86em 1.5em;border-radius:99px;border:1px solid transparent;
  font-family:var(--texte);font-size:.95rem;font-weight:600;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:background-color .22s,color .22s,border-color .22s,transform .22s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn--accent{background:var(--cuivre-vif);color:#fff}
.btn--accent:hover{background:#A9481F}
.btn--ink{background:var(--ink);color:var(--d1)}
.btn--ink:hover{background:var(--ink-3)}
/* Bouton fantome : contour seul, qui s inverse au survol.
   ⚠ PAS de background:currentColor. La regle de survol changeait AUSSI
   la couleur du texte : currentColor se resolvait alors sur la NOUVELLE
   valeur, et l aplat prenait exactement la teinte de son texte — ton sur
   ton, bouton illisible. Les deux couleurs de l etat survole sont donc
   ecrites en toutes lettres, chacune dans son contexte. */
.btn--fantome{border-color:currentColor;color:inherit;background:transparent}
.btn--fantome:hover{background:var(--t1);color:var(--craie)}
/* Sur fond sombre, l inversion se fait dans l autre sens. */
.sect--sombre .btn--fantome:hover,.hero .btn--fantome:hover,
.bande-cta .btn--fantome:hover,.masthead .btn--fantome:hover,
.encart .btn--fantome:hover{background:var(--d1);color:var(--ink)}
.btn--sm{padding:.66em 1.15em;font-size:.875rem}
.btn--lg{padding:1.02em 1.9em;font-size:1rem}

/* Lien flechu : la fleche avance au survol. */
.lien-f{
  display:inline-flex;align-items:center;gap:.5em;
  font-weight:600;font-size:.95rem;text-decoration:none;color:var(--accent-txt);
}
.lien-f::after{content:"→";transition:transform .25s}
.lien-f:hover::after{transform:translateX(5px)}


/* 07 — EN-TETE ======================================================= */
.entete{
  position:fixed;inset:0 0 auto;z-index:100;
  background:var(--craie);border-bottom:1px solid var(--ligne);
  transition:background-color .3s,border-color .3s,box-shadow .3s;
}
.entete--hero{background:transparent;border-color:transparent}
.entete--hero .logo,.entete--hero .nav a,.entete--hero .btn-tel{color:var(--d1)}
.entete--hero .burger span{background:var(--d1)}
/* Au defilement, l'en-tete d'une page a hero reprend un fond opaque.
   ⚠ Le backdrop-filter cree un bloc conteneur : tout position:fixed
   place a l'interieur y resterait piege — c'est pourquoi le menu plein
   ecran est un frere du <header>, pas un enfant. */
.entete.est-fixe{
  background:rgba(247,244,239,.92);backdrop-filter:blur(14px);
  border-bottom-color:var(--ligne);box-shadow:0 10px 30px -22px rgba(18,23,27,.5);
}
.entete.est-fixe .logo,.entete.est-fixe .nav a,.entete.est-fixe .btn-tel{color:var(--t1)}
.entete.est-fixe .burger span{background:var(--t1)}

.entete__in{display:flex;align-items:center;gap:clamp(14px,2.4vw,38px);height:78px}
body{padding-top:78px}
.entete--hero{position:fixed}
body:has(.hero){padding-top:0}

.entete__actions{margin-left:auto;display:flex;align-items:center;gap:12px}

/* --- Logo : uniquement du HTML et du CSS ---------------------------- */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--t1)}
.logo__mark{
  --m:32px;
  width:var(--m);height:calc(var(--m) * .86);position:relative;flex:none;
}
.logo__mark i{
  position:absolute;left:0;right:0;display:block;background:var(--cuivre-vif);
  /* Un chevron plein : le rampant du toit. */
  clip-path:polygon(50% 0,100% 52%,100% 100%,50% 48%,0 100%,0 52%);
}
.logo__mark i:first-child{top:0;height:56%}
.logo__mark i:last-child{bottom:0;height:38%;opacity:.5}
.entete--hero .logo__mark i,.pied .logo__mark i{background:var(--cuivre-clair)}
.entete.est-fixe .logo__mark i{background:var(--cuivre-vif)}
.logo__mots{display:flex;flex-direction:column;line-height:1}
.logo__l1{
  font-family:var(--display);font-weight:600;font-size:1.07rem;letter-spacing:-.012em;
  font-variation-settings:"opsz" 60;
}
.logo__l2{
  font-family:var(--texte);font-size:.63rem;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cuivre);
  margin-top:.34em;
}
.entete--hero .logo__l2,.pied .logo__l2{color:var(--cuivre-clair)}
.entete.est-fixe .logo__l2{color:var(--cuivre)}
.logo--pied{color:var(--d1)}
.logo--pied .logo__mark{--m:36px}

/* --- Navigation ----------------------------------------------------- */
.nav{margin-left:clamp(8px,2vw,26px)}
.nav ul{display:flex;gap:clamp(12px,1.6vw,26px)}
.nav a{
  text-decoration:none;font-size:.94rem;font-weight:500;color:var(--t1);
  padding:6px 0;position:relative;transition:color .2s;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--cuivre-vif);transition:right .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.entete--hero .nav a::after,.entete--hero.est-fixe .nav a::after{background:var(--cuivre-clair)}
.entete.est-fixe .nav a::after{background:var(--cuivre-vif)}

.btn-tel{
  display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  font-weight:650;font-size:.95rem;color:var(--t1);white-space:nowrap;
}
.btn-tel__ic{
  width:32px;height:32px;border-radius:50%;flex:none;
  border:1px solid currentColor;opacity:.9;
  display:grid;place-items:center;
}
.btn-tel__ic svg{width:16px;height:16px}
.btn-tel:hover{color:var(--cuivre)}
.entete--hero .btn-tel:hover{color:var(--cuivre-clair)}

/* --- Burger --------------------------------------------------------- */
.burger{
  display:none;width:44px;height:44px;background:none;border:0;padding:0;
  position:relative;cursor:pointer;
}
.burger span{
  position:absolute;left:9px;right:9px;height:2px;background:var(--t1);
  top:50%;border-radius:2px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),opacity .2s;
}
.burger span:nth-child(1){transform:translateY(-7px)}
.burger span:nth-child(3){transform:translateY(7px)}
.burger[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

/* --- Menu plein ecran ----------------------------------------------- */
.menu{
  position:fixed;inset:0;z-index:95;background:var(--ink);color:var(--d1);
  overflow-y:auto;overscroll-behavior:contain;
  padding:96px 0 40px;
  opacity:0;transition:opacity .3s;
}
.menu[hidden]{display:none}
.menu.est-ouvert{opacity:1}
.menu__cols{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
.menu__nav a{
  font-family:var(--display);font-size:clamp(1.6rem,1.1rem + 1.9vw,2.5rem);
  font-weight:500;text-decoration:none;display:block;padding:.14em 0;
  transition:color .2s,transform .3s;
}
.menu__nav a:hover{color:var(--cuivre-clair);transform:translateX(6px)}
.menu__t{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cuivre-clair);margin:.4rem 0 1rem;
}
.menu__sec a{
  display:block;padding:.3em 0;text-decoration:none;color:var(--d2);font-size:.95rem;
  transition:color .2s;
}
.menu__sec a:hover{color:var(--d1)}
.menu__pied{
  margin-top:clamp(28px,4vw,52px);padding-top:26px;border-top:1px solid var(--ligne-d);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;
}
.menu__tel{
  font-family:var(--display);font-size:1.5rem;text-decoration:none;color:var(--d1);
}
.menu__tel:hover{color:var(--cuivre-clair)}
/* Menu ouvert : ON NE TOUCHE PAS AU DEFILEMENT DE LA PAGE.
   Premiere version : overflow:hidden sur html, puis scrollbar-gutter
   bascule en auto pour eviter la double barre, avec compensation de
   l'en-tete. Tout cela CHANGE LA LARGEUR UTILE de la page a
   l'ouverture : la mise en page derriere le voile se recalcule, et
   l'ouverture accroche. Le remede etait pire que le mal.

   Methode retenue, celle d'orealys : la page garde son ascenseur, tel
   quel, thumb compris — donc rien ne bouge, rien ne se recalcule.
   C'est Lenis qu'on arrete (lenis.stop()), ce qui suffit a figer la
   page derriere. Le panneau, lui, defile pour son propre compte grace
   a overscroll-behavior:contain, et son propre ascenseur est masque :
   il ne reste qu'une seule barre a l'ecran, celle de la page, exactement
   ou elle etait.

   Sans Lenis (tactile, ou mouvement reduit), le panneau est en
   position:fixed et couvre tout : la molette et le doigt atterrissent
   dessus, et overscroll-behavior arrete la chaine a sa frontiere. La
   page derriere reste immobile dans tous les cas. */
.menu{scrollbar-width:none}
.menu::-webkit-scrollbar{width:0;height:0}
/* Verrou de defilement du fond, pose dans TOUS les cas.
   Lenis n'arrete que la molette : l'ascenseur de la page restait
   attrapable a la souris, et faire glisser le curseur derriere le
   menu ouvert donnait a l'en-tete sa livree de page defilee — ou la
   croix de fermeture disparaissait.

   ⚠ LES DEUX SELECTEURS SONT NECESSAIRES. Sur html seul, la
   gouttiere reservee par scrollbar-gutter n'est pas conservee : la
   largeur utile passe de 1269 a 1280 px et toute la mise en page
   derriere le voile se recalcule — c'est ce qui faisait accrocher
   l'ouverture. En verrouillant AUSSI le corps de page, sa boite
   garde exactement sa largeur. Mesure a l'appui, avant et apres
   ouverture : corps 1269 px, en-tete 40..1229, texte du hero
   40..1229, titre 40..656 — strictement inchanges. Seul
   html.clientWidth bouge, sans effet visible.
   Ne pas « simplifier » en retirant body, et ne pas y ajouter de
   compensation en padding : les deux cassent l'egalite ci-dessus. */
html.menu-verrou,html.menu-verrou body{overflow:hidden}
/* Coupe aussi le rebond elastique du document : sous iOS, un
   overflow:hidden seul laisse encore la page « tirer » sous le doigt,
   ce qui fait bouger l en-tete fixe pendant que la barre d adresse se
   replie — c est ce qui donne l impression que la croix defile. */
html.menu-verrou{overscroll-behavior:none}
/* L en-tete reste AU-DESSUS du menu pour que la croix de fermeture
   reste atteignable — il lui faut donc un fond opaque, sinon les liens
   qui defilent passent au travers du mot-symbole. */
/* ⚠ SPECIFICITE. Ces regles doivent battre le jeu « .entete.est-fixe »
   (0,3,1), qui s'applique des que la page a defile de 24 px. Ecrites
   sans .entete.est-fixe, elles ne pesaient que (0,2,2) : la page
   defilee, le burger reprenait l'encre sombre SUR le fond sombre du
   menu — la croix de fermeture disparaissait purement et simplement.
   On repete donc .est-fixe dans le selecteur pour passer devant. */
html.menu-ouvert .entete,html.menu-ouvert .entete.est-fixe{
  background:var(--ink);border-bottom-color:var(--ligne-d);box-shadow:none;
}
html.menu-ouvert .entete.est-fixe .logo,html.menu-ouvert .entete.est-fixe .btn-tel,
html.menu-ouvert .entete.est-fixe .nav a,
html.menu-ouvert .entete .logo,html.menu-ouvert .entete .btn-tel,
html.menu-ouvert .entete .nav a{color:var(--d1)}
html.menu-ouvert .entete.est-fixe .logo__l2,html.menu-ouvert .entete .logo__l2{color:var(--cuivre-clair)}
html.menu-ouvert .entete.est-fixe .logo__mark i,html.menu-ouvert .entete .logo__mark i{background:var(--cuivre-clair)}
html.menu-ouvert .entete.est-fixe .burger span,html.menu-ouvert .entete .burger span{background:var(--d1)}


/* 08 — FIL D'ARIANE ================================================== */
.fil{border-bottom:1px solid var(--ligne-fine);background:var(--craie)}
.fil ol{display:flex;flex-wrap:wrap;gap:.45em;padding:14px 0;font-size:.83rem;color:var(--t3)}
.fil li+li::before{content:"›";margin-right:.45em;opacity:.6}
.fil a{text-decoration:none;color:var(--t2)}
.fil a:hover{color:var(--cuivre);text-decoration:underline}
.fil span{color:var(--t1)}


/* 09 — HERO ========================================================== */
.hero{
  position:relative;background:var(--ink);color:var(--d1);
  min-height:min(92svh,860px);display:flex;align-items:flex-end;
  padding:calc(78px + clamp(48px,10vw,120px)) 0 clamp(44px,6vw,76px);
  overflow:hidden;
}
.hero__fond{position:absolute;inset:0;z-index:0}
.hero__fond img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Voile : la photo doit rester lisible, le texte davantage. Un aplat
   en biais du bas-gauche, plus une passe uniforme pour le contraste. */
.hero__fond::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(18,23,27,.95) 0%,rgba(18,23,27,.88) 34%,rgba(18,23,27,.70) 62%,rgba(18,23,27,.80) 100%),
    linear-gradient(180deg,rgba(18,23,27,.70) 0%,transparent 30%,rgba(18,23,27,.55) 100%);
}
/* ⚠ PAS de width ici. .hero__in porte deja .shell : un width:100%
   aurait la MEME specificite, viendrait apres, et ecraserait la
   gouttiere du conteneur — le titre se collerait au bord de la
   fenetre. Meme piege que sur orealys. */
.hero__in{position:relative;z-index:1}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,64px);align-items:end}
.hero h1{max-width:15ch}
.hero__lieu{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.78rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--cuivre-clair);margin-bottom:1.1rem;
}
.hero__lieu::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.hero__p{margin-top:1.4rem;max-width:52ch;color:var(--d2);font-size:clamp(1.02rem,.98rem + .35vw,1.2rem)}
.hero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:2rem}

.hero__preuves{display:flex;flex-direction:column;gap:2px}
.hero__preuve{
  border-top:1px solid var(--ligne-d);padding:14px 0 14px 0;
  display:flex;gap:14px;align-items:flex-start;
}
.hero__preuve b{
  font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--cuivre-clair);
  line-height:1;flex:none;min-width:2.6em;
}
.hero__preuve span{color:var(--d2);font-size:.93rem;line-height:1.45}

/* La bande d'ardoise qui ferme le hero : un rappel du materiau, en
   CSS pur, qui sert aussi de transition vers le fond clair. */
.hero__ardoise{
  position:absolute;left:0;right:0;bottom:0;height:10px;z-index:2;
  background:var(--cuivre-vif);
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.24) 0 2px,transparent 2px 34px);
}


/* 10 — SECTIONS COMMUNES ============================================= */
.grille{display:grid;gap:clamp(18px,2.4vw,30px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Bloc « intro atelier » : photo + texte, la photo cadree en portrait. */
.duo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.duo--inv{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.duo__img{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-3)}
.duo__img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__img--large img{aspect-ratio:4/3}
/* Cartouche pose sur la photo : la signature de l'artisan. */
.duo__sceau{
  position:absolute;left:0;bottom:0;background:var(--cuivre-vif);color:#fff;
  padding:14px 20px;border-radius:0 var(--r) 0 0;
}
.duo__sceau b{display:block;font-family:var(--display);font-size:1.15rem;font-weight:600}
.duo__sceau span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;opacity:.92}

.puces{margin-top:1.6rem;display:grid;gap:.85rem}
.puces li{display:flex;gap:.85em;align-items:flex-start;line-height:1.5}
.puces li::before{
  content:"";width:9px;height:9px;flex:none;margin-top:.55em;
  background:var(--cuivre-vif);
  clip-path:polygon(50% 0,100% 52%,100% 100%,0 100%,0 52%);
}
.sect--sombre .puces li::before{background:var(--cuivre-clair)}


/* 11 — CARTES DE PRESTATION ========================================== */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.carte{
  display:flex;flex-direction:column;background:var(--blanc);
  border:1px solid var(--ligne-fine);border-radius:var(--r);overflow:hidden;
  text-decoration:none;color:inherit;position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
}
.carte:hover{transform:translateY(-5px);box-shadow:var(--ombre-f);border-color:transparent}
.carte__img{aspect-ratio:16/10;overflow:hidden;background:var(--craie-2)}
.carte__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.carte:hover .carte__img img{transform:scale(1.05)}
.carte__corps{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.carte h3{margin-bottom:.55rem}
.carte p{color:var(--t2);font-size:.95rem;margin-bottom:1.1rem}
.carte__lire{
  margin-top:auto;font-size:.88rem;font-weight:600;color:var(--cuivre);
  display:inline-flex;align-items:center;gap:.45em;
}
.carte__lire::after{content:"→";transition:transform .25s}
.carte:hover .carte__lire::after{transform:translateX(5px)}
/* Le numero de prestation, discret, dans l'angle. */
.carte__n{
  position:absolute;top:0;right:0;z-index:1;
  background:rgba(18,23,27,.72);color:var(--d1);backdrop-filter:blur(4px);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  padding:6px 11px;border-radius:0 0 0 10px;
}


/* 12 — ETAPES, CHIFFRES, MATIERES ==================================== */
.etapes{counter-reset:et;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.etape{position:relative;padding-top:26px;border-top:2px solid var(--ligne)}
.etape::before{
  counter-increment:et;content:"0" counter(et);
  position:absolute;top:-.72em;left:0;background:var(--craie);padding-right:12px;
  font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--cuivre);
  letter-spacing:.02em;
}
.sect--sombre .etape{border-top-color:var(--ligne-d)}
.sect--sombre .etape::before{background:var(--ink);color:var(--cuivre-clair)}
.sect--craie .etape::before{background:var(--craie-2)}
.etape h3{margin-bottom:.5rem;font-size:1.18rem}
.etape p{color:var(--t2);font-size:.94rem}
.sect--sombre .etape p{color:var(--d2)}

.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,34px)}
.chiffre{border-left:2px solid var(--cuivre-vif);padding-left:20px}
.sect--sombre .chiffre{border-left-color:var(--cuivre-clair)}
.chiffre__v{
  font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(2.5rem,1.8rem + 2.4vw,3.7rem);
  display:block;color:var(--t1);letter-spacing:-.02em;
}
.sect--sombre .chiffre__v{color:var(--d1)}
.chiffre__l{margin-top:.6rem;color:var(--t2);font-size:.93rem;line-height:1.45}
.sect--sombre .chiffre__l{color:var(--d2)}

/* Comparatif ardoise / tuile */
.matieres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.matiere{
  background:var(--blanc);border:1px solid var(--ligne-fine);border-radius:var(--r);
  padding:clamp(24px,3vw,38px);position:relative;overflow:hidden;
}
.matiere::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--cuivre-vif);
}
.matiere--b::before{background:var(--ink-3)}
.matiere h3{margin-bottom:.4rem}
.matiere__sous{color:var(--t3);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.1rem}
.matiere ul{margin-top:1.2rem;display:grid;gap:.8rem}
.matiere li{display:flex;gap:.75em;font-size:.95rem;line-height:1.5;color:var(--t2)}
.matiere li::before{content:"—";color:var(--cuivre);flex:none}


/* 13 — COMMUNES ====================================================== */
.communes{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.commune{
  display:flex;flex-direction:column;gap:.3rem;
  padding:15px 19px;border:1px solid var(--ligne);border-radius:var(--r-s);
  background:var(--blanc);text-decoration:none;color:inherit;
  transition:border-color .22s,background-color .22s,transform .22s;
}
.commune:hover{border-color:var(--cuivre-vif);transform:translateY(-2px)}
.commune b{font-weight:600;font-size:1rem;line-height:1.25}
.commune span{color:var(--t3);font-size:.8rem}
/* Variante en rangee, pour une liste de liens courts (une prestation
   et sa fleche) ou le nom ne passe jamais a la ligne. */
.commune--ligne{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.commune--ligne span{white-space:nowrap;transition:transform .25s}
.commune--ligne:hover span{transform:translateX(4px)}
.sect--sombre .commune{background:rgba(255,255,255,.035);border-color:var(--ligne-d);color:var(--d1)}
.sect--sombre .commune span{color:var(--d3)}
.sect--sombre .commune:hover{border-color:var(--cuivre-clair);background:rgba(255,255,255,.07)}

/* Pastilles de maillage interne, en bas de page */
.pastilles{display:flex;flex-wrap:wrap;gap:9px}
.pastille{
  display:inline-block;padding:.5em 1em;border-radius:99px;
  border:1px solid var(--ligne);background:var(--blanc);
  font-size:.87rem;text-decoration:none;color:var(--t2);
  transition:border-color .2s,color .2s;
}
.pastille:hover{border-color:var(--cuivre-vif);color:var(--cuivre)}
.sect--sombre .pastille{background:transparent;border-color:var(--ligne-d);color:var(--d2)}
.sect--sombre .pastille:hover{border-color:var(--cuivre-clair);color:var(--cuivre-clair)}


/* 14 — AVIS ========================================================== */
.avis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.avis__c{
  background:var(--blanc);border:1px solid var(--ligne-fine);border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;
}
.sect--sombre .avis__c{background:rgba(255,255,255,.04);border-color:var(--ligne-d)}
.etoiles{color:var(--cuivre-vif);letter-spacing:.16em;font-size:.95rem;margin-bottom:.9rem}
.sect--sombre .etoiles{color:var(--cuivre-clair)}
.avis__t{font-size:.99rem;line-height:1.6;margin-bottom:1.3rem}
.avis__q{margin-top:auto;display:flex;align-items:center;gap:11px;padding-top:1rem;border-top:1px solid var(--ligne-fine)}
.sect--sombre .avis__q{border-top-color:var(--ligne-d)}
.avis__i{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--craie-2);color:var(--cuivre);font-weight:700;font-size:.95rem;
}
.sect--sombre .avis__i{background:rgba(255,255,255,.08);color:var(--cuivre-clair)}
.avis__n{font-weight:600;font-size:.94rem;line-height:1.25}
.avis__v{color:var(--t3);font-size:.82rem}
.sect--sombre .avis__v{color:var(--d3)}


/* 15 — FAQ =========================================================== */
.faq{max-width:78ch;margin-inline:auto}
/* Le titre d une FAQ de page interieure doit se caler sur les autres
   h2 du corps (.prose h2), pas sur l echelle des titres de section. */
.faq>h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)}
.faq details{border-bottom:1px solid var(--ligne);padding:2px 0}
.faq summary{
  list-style:none;cursor:pointer;padding:1.15em 44px 1.15em 0;position:relative;
  font-family:var(--display);font-size:clamp(1.05rem,1rem + .4vw,1.28rem);font-weight:600;
  line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:8px;top:50%;background:var(--cuivre-vif);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .3s;
}
.faq summary::before{width:16px;height:2px;right:8px;transform:translateY(-50%)}
.faq summary::after{width:2px;height:16px;right:15px;transform:translateY(-50%)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq__r{padding:0 clamp(0px,4vw,52px) 1.5em 0;color:var(--t2);max-width:70ch}
.sect--sombre .faq details{border-bottom-color:var(--ligne-d)}
.sect--sombre .faq summary::before,.sect--sombre .faq summary::after{background:var(--cuivre-clair)}
.sect--sombre .faq__r{color:var(--d2)}


/* 16 — PAGES INTERIEURES ============================================= */
/* Masthead : titre pleine largeur, sous-titre DESSOUS. En deux
   colonnes, un titre court laisse un vide et les longs noms de
   commune se retrouvent ecrases. */
.masthead{
  background:var(--ink);color:var(--d1);position:relative;overflow:hidden;
  padding-block:clamp(50px,7vw,92px);
}
.masthead__fond{position:absolute;inset:0;z-index:0;opacity:.3}
.masthead__fond img{width:100%;height:100%;object-fit:cover}
.masthead__fond::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,var(--ink) 12%,rgba(18,23,27,.7) 100%);
}
.masthead .shell{position:relative;z-index:1}
.masthead h1{max-width:20ch}
.masthead__p{margin-top:1.2rem;max-width:62ch;color:var(--d2);font-size:clamp(1.02rem,.98rem + .3vw,1.16rem)}
.masthead__meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:1.8rem;
  font-size:.85rem;color:var(--d3);
}
.masthead__meta b{color:var(--cuivre-clair);font-weight:600}

/* Encadre « reponse courte » : le bloc que les moteurs generatifs
   citent. Il repond a la question, sans marketing, en tete de page. */
.reponse{
  background:var(--blanc);border:1px solid var(--ligne);border-left:4px solid var(--cuivre-vif);
  border-radius:0 var(--r) var(--r) 0;padding:clamp(22px,2.6vw,32px);
  max-width:82ch;
}
.reponse__t{
  font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cuivre);margin-bottom:.7rem;
}
.reponse p{font-size:1.08rem;line-height:1.62;margin:0}

/* Reperes techniques : des faits verifiables, en tableau lisible. */
.reperes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--ligne);border:1px solid var(--ligne);border-radius:var(--r);
  overflow:hidden;
}
.repere{background:var(--craie);padding:20px 22px}
.repere dt{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--t3);margin-bottom:.45rem}
.repere dd{margin:0;font-weight:600;font-size:1rem;line-height:1.35}

/* Corps redactionnel */
.prose{max-width:72ch}
.prose h2{margin:2.4em 0 .6em;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:2em 0 .5em}
.prose p{color:var(--t2)}
.prose strong{color:var(--t1);font-weight:600}
.prose ul{margin:1.1em 0;display:grid;gap:.7rem}
.prose ul li{display:flex;gap:.8em;color:var(--t2)}
.prose ul li::before{content:"";width:8px;height:8px;flex:none;margin-top:.6em;background:var(--cuivre-vif);clip-path:polygon(50% 0,100% 52%,100% 100%,0 100%,0 52%)}

/* Mise en page a deux colonnes des pages interieures : corps + aside
   collant (rappel telephone, liens utiles). */
.page-2c{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(32px,4.5vw,72px);align-items:start}
.aside{position:sticky;top:100px;display:grid;gap:18px}
.encart{
  background:var(--ink);color:var(--d1);border-radius:var(--r);
  padding:26px 26px 28px;
}
.encart h3{font-size:1.25rem;margin-bottom:.55rem}
.encart p{color:var(--d2);font-size:.93rem;margin-bottom:1.2rem}
.encart .btn{width:100%}
.encart__tel{
  display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;
  color:var(--cuivre-clair);text-decoration:none;margin-bottom:.35rem;
}
.encart__h{font-size:.82rem;color:var(--d3);margin-bottom:1.3rem}
.encart--clair{background:var(--blanc);color:var(--t1);border:1px solid var(--ligne-fine)}
.encart--clair p{color:var(--t2)}
.encart--clair h3{font-size:1.05rem;margin-bottom:.9rem}
.encart--clair ul{display:grid;gap:.55rem}
.encart--clair a{font-size:.92rem;text-decoration:none;color:var(--t2)}
.encart--clair a:hover{color:var(--cuivre);text-decoration:underline}

/* Blocs alternes texte / image des pages prestation */
.blocs{display:grid;gap:clamp(30px,4vw,54px)}
.bloc{display:grid;gap:.7rem}
.bloc h3{color:var(--t1)}
.bloc p{color:var(--t2);max-width:72ch}


/* 17 — FORMULAIRE ==================================================== */
.form{display:grid;gap:16px}
.form__l{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.champ{display:grid;gap:.4rem}
.champ label{font-size:.85rem;font-weight:600;color:var(--t1)}
.champ label span{color:var(--cuivre);font-weight:400}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:.98rem;color:var(--t1);
  padding:.78em 1em;border:1px solid var(--ligne);border-radius:var(--r-s);
  background:var(--blanc);width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.champ textarea{min-height:150px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--cuivre-vif);box-shadow:0 0 0 3px rgba(190,87,41,.14);
}
.rgpd{display:flex;gap:.75em;align-items:flex-start;font-size:.86rem;color:var(--t2);line-height:1.5}
.rgpd input{margin-top:.25em;accent-color:var(--cuivre-vif);width:17px;height:17px;flex:none}
/* Champ leurre : seuls les robots le remplissent. Hors ecran plutot
   que display:none, que certains robots detectent. */
.leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alerte{padding:16px 20px;border-radius:var(--r-s);font-size:.94rem;line-height:1.5}
.alerte--ok{background:#E7F2EA;border:1px solid #B9D9C3;color:#1D4F31}
.alerte--ko{background:#FBECE7;border:1px solid #F0C7B8;color:#8A2F12}


/* 18 — BANDEAU CTA, PIED, BARRE MOBILE =============================== */
.bande-cta{
  background:var(--ink);color:var(--d1);position:relative;overflow:hidden;
  padding-block:clamp(48px,6vw,80px);
}
.bande-cta::before{
  content:"";position:absolute;inset:0;opacity:.55;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 19px);
}
.bande-cta__in{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(22px,3vw,54px);align-items:center;
}
.bande-cta__t{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.5rem);max-width:18ch}
.bande-cta__p{margin-top:.9rem;color:var(--d2);max-width:52ch}
.bande-cta__act{display:flex;flex-wrap:wrap;gap:12px}

.pied{background:var(--ink-2);color:var(--d2);padding-block:clamp(48px,6vw,76px) 28px}
.pied__haut{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(26px,3.4vw,52px);padding-bottom:clamp(32px,4vw,52px);
}
.pied__pitch{margin:1.3rem 0;font-size:.93rem;line-height:1.6;max-width:40ch;color:var(--d2)}
.pied__contact{display:grid;gap:.4rem;font-size:.94rem}
.pied__contact a{text-decoration:none;color:var(--d1);font-weight:500}
.pied__contact a:hover{color:var(--cuivre-clair)}
.pied__t{
  font-size:.72rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--cuivre-clair);margin:0 0 1.05rem;
}
.pied__col ul{display:grid;gap:.5rem}
.pied__col a{font-size:.92rem;text-decoration:none;transition:color .2s}
.pied__col a:hover{color:var(--d1)}
.pied__bas{
  border-top:1px solid var(--ligne-d);padding-top:22px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-size:.83rem;color:var(--d3);
}
.pied__bas p{margin:0}
.pied__mentions a{color:var(--d3);text-decoration:none}
.pied__mentions a:hover{color:var(--d1);text-decoration:underline}

.barre-mobile{display:none}


/* 19 — REVEAL ET MOUVEMENT REDUIT ==================================== */
/* Les etats initiaux ne sont poses que si le JS est la (html.js) :
   sans JS, rien ne disparait. */
html.js [data-reveal]{opacity:0;transform:translateY(22px)}
html.js [data-reveal].est-vu{opacity:1;transform:none}
html.js .ligne-masque{overflow:hidden}
html.js .ligne-masque>span{display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html.js [data-reveal]{opacity:1;transform:none}
}


/* ===================== ADAPTATIONS D'ECRAN ========================== */
@media (max-width:1080px){
  .cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .avis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-2c{grid-template-columns:minmax(0,1fr)}
  .aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pied__haut{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1024px){
  .nav,.entete__devis{display:none}
  .burger{display:block}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:34px}
  .menu__cols{grid-template-columns:minmax(0,1fr)}
  .menu__sec{border-top:1px solid var(--ligne-d);padding-top:18px}
  .menu__sec ul{columns:2;column-gap:24px}
}

@media (max-width:820px){
  .duo,.duo--inv{grid-template-columns:minmax(0,1fr)}
  .duo__img img{aspect-ratio:4/3}
  .matieres{grid-template-columns:minmax(0,1fr)}
  .bande-cta__in{grid-template-columns:minmax(0,1fr)}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:720px){
  body{padding-bottom:64px}
  .entete__in{height:66px}
  body{padding-top:66px}
  body:has(.hero){padding-top:0}
  .btn-tel__n{display:none}
  .cartes,.avis{grid-template-columns:minmax(0,1fr)}
  .etapes{grid-template-columns:minmax(0,1fr)}
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
  .form__l{grid-template-columns:minmax(0,1fr)}
  .aside{grid-template-columns:minmax(0,1fr)}
  .pied__haut{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero{min-height:auto;padding-top:calc(66px + 68px)}
  .menu{padding-top:84px}
  .menu__sec ul{columns:1}

  /* Barre d'appel collante : sur telephone, c'est le premier chemin
     de conversion d'un site de couvreur. */
  .barre-mobile{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:var(--ligne-d);
  }
  .barre-mobile__a{
    background:var(--ink);color:var(--d1);text-decoration:none;
    text-align:center;padding:16px 8px;font-weight:600;font-size:.94rem;
  }
  .barre-mobile__a--tel{background:var(--cuivre-vif);color:#fff}
  html.menu-ouvert .barre-mobile{display:none}
}

@media (max-width:420px){
  .logo__l1{font-size:.99rem}
  .logo__mark{--m:28px}
  .btn{padding:.8em 1.25em}
}