/* =========================================================
   Kaya Peinture — Strasbourg
   Direction artistique : éditorial plein écran (variante C)
   Bricolage Grotesque XXL · photo immersive · orange chantier
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Palette */
  --encre:      #111312;   /* texte principal, fonds sombres */
  --papier:     #fbfbfa;   /* fond principal */
  --papier-2:   #f2f2f0;   /* surfaces claires alternées */
  --gris:       #656b66;   /* texte secondaire — 5,27:1 sur papier */
  --ligne:      #e3e4e1;
  --blanc:      #fff;

  --orange:     #ff4d17;   /* accent : aplats, puces, survols */
  --orange-cta: #cc3608;   /* fonds de bouton — 5,12:1 avec du texte blanc */
  --orange-txt: #cc3608;   /* texte orange sur fond clair — 4,95:1 */

  /* Typographie */
  --titre: "Bricolage Grotesque", system-ui, sans-serif;
  --texte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rythme */
  --max:      1320px;
  --g:        clamp(1.25rem, 4vw, 3rem);
  --section:  clamp(4rem, 8vw, 7rem);
  --r:        4px;         /* rayon minimal : le style est net, pas arrondi */
  --ombre:    0 24px 60px -32px rgba(17, 19, 18, .55);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, .97rem + .15vw, 1.05rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .96;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(3rem, 1.2rem + 7vw, 8rem); text-wrap: balance; }
h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); }
p  { margin: 0 0 1.1em; }

a { color: var(--orange-txt); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible { outline: 3px solid var(--orange-cta); outline-offset: 3px; }

/* La nav passe en position:fixed : sans cette compensation, un clic sur une ancre
   amène le titre visé derrière la barre. */
section[id], main[id], h2[id] { scroll-margin-top: 90px; }
.hero :focus-visible, .ruban :focus-visible, .ite :focus-visible,
.cta-final :focus-visible, .pied :focus-visible, .barre-mobile :focus-visible {
  outline-color: var(--blanc);
}
/* L'en-tête est un descendant de .hero : une fois fixé sur fond clair,
   il doit récupérer un contour foncé, sinon le focus devient invisible. */
.entete--fixe :focus-visible { outline-color: var(--orange-cta); }

.shell { width: min(100% - 2 * var(--g), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--encre); color: var(--papier);
  padding: .8rem 1.2rem; z-index: 999;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* Repère de section : petit carré orange + libellé */
.surtitre {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-txt);
  margin: 0 0 1.2rem;
}
.surtitre::before { content: ""; width: 9px; height: 9px; background: var(--orange); flex: none; }
.titre-section { max-width: 20ch; }
.chapo { font-size: 1.1rem; color: var(--gris); max-width: 58ch; }

/* ---------- 3. Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem 1.8rem;
  font-family: var(--texte); font-size: 1rem; font-weight: 600;
  border: 1.5px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn--orange  { background: var(--orange-cta); color: var(--blanc); }
.btn--orange:hover { background: #b52d04; }


.btn--clair   { background: var(--papier); color: var(--encre); }
.btn--fantome { border-color: rgba(255,255,255,.45); color: var(--blanc); background: transparent; }
.btn--fantome:hover { background: rgba(255,255,255,.14); }

/* ---------- 4. Bandeau de démonstration ---------- */
.bandeau-demo {
  background: var(--orange); color: #2b0d02;
  font-size: .88rem; text-align: center;
  padding: .65rem var(--g); margin: 0;
  position: relative; z-index: 60;
}

/* ---------- 5. Navigation ----------
   Superposée au hero puis fixée avec fond dès que la photo est dépassée. */
.entete {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.entete--fixe {
  position: fixed; top: 0;
  background: rgba(251, 251, 250, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ligne);
}
.entete__barre { display: flex; align-items: center; gap: 2rem; padding: 1.4rem 0; }

.logo {
  font-family: var(--titre); font-weight: 800;
  font-size: 1.35rem; letter-spacing: -.05em;
  color: var(--blanc); text-decoration: none; margin-right: auto;
  display: flex; align-items: baseline; gap: .1rem;
}
.logo i { color: var(--orange); font-style: normal; }
.entete--fixe .logo { color: var(--encre); }

.nav { display: flex; align-items: center; gap: 1.9rem; }
.nav a {
  color: rgba(255,255,255,.85); text-decoration: none;
  font-size: .95rem; font-weight: 500;
}
.nav a:hover { color: var(--blanc); }
.entete--fixe .nav a { color: var(--gris); }
.entete--fixe .nav a:hover { color: var(--encre); }

.tel-entete {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: .95rem;
  color: var(--blanc); text-decoration: none; white-space: nowrap;
}
.entete--fixe .tel-entete { color: var(--encre); }

.burger {
  display: none; background: none; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.5); border-radius: var(--r);
  padding: .5rem .6rem;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--blanc); }
.burger span + span { margin-top: 4px; }
.entete--fixe .burger { border-color: var(--ligne); }
.entete--fixe .burger span { background: var(--encre); }

/* ---------- 6. Hero plein écran ---------- */
.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--encre);
}
.hero__fond { position: absolute; inset: 0; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; }
/* Dégradé : lisibilité de la nav en haut, du titre en bas */
.hero__fond::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(17,19,18,.66) 0%, rgba(17,19,18,.14) 36%, rgba(17,19,18,.88) 100%);
}
.hero__in {
  position: relative;
  padding-block: 8rem clamp(2.5rem, 5vw, 4rem);
  color: var(--blanc);
}
.kicker {
  display: inline-block; background: var(--orange-cta); color: #fff;  /* 5,12:1 */
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: .45rem 1rem; margin-bottom: 1.6rem;
}
.hero h1 { color: var(--blanc); margin-bottom: 0; }
.hero__bas {
  display: flex; justify-content: space-between; align-items: end;
  gap: 2.5rem; margin-top: 2.5rem; flex-wrap: wrap;
}
.hero__bas p { color: rgba(255,255,255,.86); max-width: 42ch; margin: 0; font-size: 1.06rem; }
.hero__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------- 7. Ruban des prestations ---------- */
.ruban { background: var(--encre); color: var(--papier); overflow: hidden; padding: .95rem 0; }
.ruban__piste { display: flex; width: max-content; animation: defile 38s linear infinite; }
.ruban__groupe { display: flex; gap: 3rem; padding-right: 3rem; }
.ruban__groupe span {
  display: flex; align-items: center; gap: 3rem;
  font-family: var(--titre); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -.02em; white-space: nowrap;
}
.ruban__groupe span::after { content: ""; width: 7px; height: 7px; background: var(--orange); flex: none; }
@keyframes defile { to { transform: translateX(-50%); } }
.ruban:hover .ruban__piste { animation-play-state: paused; }
.ruban[data-pause="true"] .ruban__piste { animation-play-state: paused; }

/* WCAG 2.2.2 : toute animation automatique doit pouvoir être arrêtée,
   au clavier comme au toucher — le survol ne suffit pas. */
.ruban { position: relative; }
.ruban__pause {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 2;
  /* Le texte défile en continu sous le bouton : fond opaque obligatoire,
     avec un fondu à gauche pour que le texte disparaisse proprement. */
  background: linear-gradient(90deg, rgba(17,19,18,0) 0, var(--encre) 1.6rem, var(--encre) 100%);
  color: var(--papier); border: 0;
  padding: 0 var(--g) 0 2.6rem;
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.ruban__pause:hover { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .ruban__piste { animation: none; } }

/* ---------- 8. Chiffres ---------- */
.stats__grille { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ligne); }
.stats__item { padding: clamp(2rem, 4vw, 3.2rem) 1.5rem clamp(2rem, 4vw, 3.2rem) 0; }
.stats__item + .stats__item { border-left: 1px solid var(--ligne); padding-left: 1.5rem; }
.stats__chiffre {
  display: block; font-family: var(--titre); font-weight: 800;
  font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem); letter-spacing: -.05em; line-height: 1;
}
.stats__label { display: block; color: var(--gris); font-size: .92rem; margin-top: .5rem; }

/* ---------- 9. Services en lignes éditoriales ---------- */
.service {
  display: grid; grid-template-columns: 70px 1.05fr 1.35fr auto;
  gap: 2rem; align-items: center;
  padding: 2rem 0; border-top: 1px solid var(--ligne);
  text-decoration: none; color: inherit;
  transition: background .2s ease, padding-left .2s ease;
}
.services__liste .service:last-child { border-bottom: 1px solid var(--ligne); }
.service:hover { padding-left: 1rem; background: linear-gradient(90deg, rgba(255,77,23,.07), transparent 65%); }
.service__n { font-family: var(--titre); font-weight: 600; color: var(--orange-txt); font-size: .95rem; }
.service h3 { margin: 0; }
.service p { color: var(--gris); margin: 0; font-size: .97rem; }
.service__f {
  width: 44px; height: 44px; border: 1.5px solid var(--ligne); border-radius: 50%;
  display: grid; place-items: center; flex: none; transition: .2s;
}
.service:hover .service__f { background: var(--orange-cta); border-color: var(--orange-cta); color: var(--blanc); }

/* ---------- 10. Section ITE ---------- */
.ite { background: var(--encre); color: var(--papier); }
.ite h2 { color: var(--papier); }
.ite .surtitre { color: var(--orange); }
.ite p { color: rgba(251,251,250,.82); }
.ite__grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ite__visuel { overflow: hidden; }
.ite__visuel img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.ite__note {
  font-size: .87rem; color: rgba(251,251,250,.55);
  border-left: 2px solid var(--orange); padding-left: 1rem; margin-top: 2rem;
}
/* Les trois couches d'une façade isolée */
.couches { list-style: none; padding: 0; margin: 2.2rem 0; }
.couches li {
  display: grid; grid-template-columns: 46px 1fr; gap: 1.2rem; align-items: center;
  padding: 1rem 0; border-top: 1px solid rgba(251,251,250,.14);
}
.couches b { display: block; font-family: var(--titre); font-weight: 600; font-size: 1.02rem; }
.couches small { color: rgba(251,251,250,.6); }
.couches i { height: 34px; display: block; }

/* ---------- 11. Réalisations ---------- */
.realisations__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1.2rem; margin-top: 3rem; }
.realisation { text-decoration: none; color: inherit; display: block; }
.realisation__img { overflow: hidden; aspect-ratio: 4/3; background: var(--papier-2); }
.realisation__img img { width: 100%; height: 100%; object-fit: cover; }
.realisation__lieu {
  display: block; font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--orange-txt); margin: 1.1rem 0 .4rem;
}
.realisation h3 { font-size: 1.18rem; margin: 0 0 .35rem; }
.realisation p { color: var(--gris); font-size: .93rem; margin: 0; }

/* ---------- 12. Pourquoi Kaya ---------- */
.pourquoi { background: var(--papier-2); }
.pourquoi__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2rem; margin-top: 3rem; }
.atout { border-top: 3px solid var(--orange); padding-top: 1.2rem; }
.atout h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.atout p { color: var(--gris); font-size: .95rem; margin: 0; }

/* ---------- 13. Avis ---------- */
.avis__grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.avis { background: var(--papier-2); padding: 2rem 1.8rem; display: flex; flex-direction: column; margin: 0; }
.avis__etoiles { display: flex; gap: .18rem; color: var(--orange-txt); margin-bottom: 1.1rem; }
.avis blockquote { margin: 0 0 1.4rem; font-size: 1rem; }
.avis figcaption { margin-top: auto; font-weight: 600; font-size: .93rem; }
.avis figcaption span { display: block; font-weight: 400; color: var(--gris); }

/* ---------- 14. Devis ---------- */
.devis__grille { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.devis__accroche { position: sticky; top: 100px; }
.devis__arguments { list-style: none; padding: 0; margin: 2rem 0 0; }
.devis__arguments li {
  display: grid; grid-template-columns: 22px 1fr; gap: .9rem;
  align-items: start; margin-bottom: 1.1rem; font-size: .96rem;
}
.devis__arguments svg { color: var(--orange-txt); margin-top: .25rem; }
.devis__tel {
  display: block; margin-top: 2rem; padding: 1.5rem 1.7rem;
  background: var(--encre); color: var(--papier); text-decoration: none;
}
.devis__tel small { display: block; font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(251,251,250,.6); }
.devis__tel strong { display: block; font-family: var(--titre); font-weight: 800; font-size: 1.75rem; letter-spacing: -.03em; margin-top: .35rem; }

.formulaire { background: var(--papier-2); padding: clamp(1.6rem, 3vw, 2.6rem); }
.champ { margin-bottom: 1.15rem; }
.champ label, .groupe > legend { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .4rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .8rem .95rem; font: inherit; font-size: .97rem;
  color: var(--encre); background: var(--blanc);
  border: 1.5px solid var(--ligne); border-radius: var(--r);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--encre); outline-offset: 1px; }
.champ textarea { min-height: 110px; resize: vertical; }
.champ--duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.aide { font-size: .84rem; color: var(--gris); margin: .35rem 0 0; }

.groupe { border: 0; padding: 0; margin: 0 0 1.15rem; }
.puces { display: flex; flex-wrap: wrap; gap: .5rem; }
.puce input { position: absolute; opacity: 0; width: 0; height: 0; }
.puce span {
  display: block; padding: .55rem 1rem;
  border: 1.5px solid var(--ligne); border-radius: var(--r);
  font-size: .9rem; font-weight: 500; cursor: pointer;
  background: var(--blanc); color: var(--gris); transition: .15s;
}
.puce input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.puce input:focus-visible + span { outline: 3px solid var(--orange-cta); outline-offset: 2px; }

.depot {
  display: block; position: relative; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--ligne); border-radius: var(--r);
  padding: 1.5rem; background: var(--blanc);
}
.depot:hover { border-color: var(--orange-cta); }
.depot:focus-within { outline: 3px solid var(--orange-cta); outline-offset: 3px; border-color: var(--orange-cta); }
.depot svg { color: var(--orange-txt); margin: 0 auto .6rem; }
.depot b { display: block; font-size: .96rem; }
.depot small { color: var(--gris); font-size: .84rem; }
.depot input { position: absolute; opacity: 0; width: 0; height: 0; }

.mention-rgpd {
  font-size: .82rem; line-height: 1.55; color: var(--gris);
  background: var(--blanc); border-left: 3px solid var(--orange);
  padding: .95rem 1.1rem; margin-bottom: 1.2rem;
}
.consentement {
  display: grid; grid-template-columns: 20px 1fr; gap: .75rem; align-items: start;
  font-size: .87rem; color: var(--gris); margin-bottom: 1.4rem;
}
.consentement input { margin-top: .25rem; accent-color: var(--orange-cta); width: 18px; height: 18px; }

/* Piège à robots : masqué visuellement sans `display:none`, que certains robots détectent. */
.piege {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Confirmation affichée à la place du formulaire une fois la demande partie. */
.confirmation {
  background: var(--papier-2);
  border-top: 4px solid var(--orange);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.6rem, 3vw, 2.6rem);
  text-align: center;
}
.confirmation:focus { outline: none; }
.confirmation svg { color: var(--orange-cta); margin: 0 auto 1.2rem; }
.confirmation h3 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .8rem; }
.confirmation p { color: var(--gris); max-width: 42ch; margin-inline: auto; }
.confirmation .btn { margin-top: 1.2rem; }

.champ--invalide { border-color: var(--orange-cta) !important; background: #fff6f3 !important; }
.puces--erreur { outline: 2px dashed var(--orange-cta); outline-offset: 6px; }
.aide--erreur { color: var(--orange-txt); font-weight: 600; }
.formulaire .btn--orange { width: 100%; padding-block: 1.1rem; }

/* ---------- 15. FAQ ---------- */
.faq__liste { margin-top: 3rem; max-width: 880px; }
.faq details { border-top: 1px solid var(--ligne); padding: 1.5rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--ligne); }
.faq summary {
  font-family: var(--titre); font-weight: 600;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); letter-spacing: -.03em;
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 13px; height: 13px;
  background: var(--orange); transition: transform .22s ease;
  clip-path: polygon(43% 0, 57% 0, 57% 43%, 100% 43%, 100% 57%, 57% 57%, 57% 100%, 43% 100%, 43% 57%, 0 57%, 0 43%, 43% 43%);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 1rem 0 0; color: var(--gris); max-width: 72ch; }

/* ---------- 16. CTA final ---------- */
.cta-final { background: var(--encre); color: var(--papier); text-align: center; }
.cta-final h2 { color: var(--papier); max-width: 18ch; margin-inline: auto; }
.cta-final p { color: rgba(251,251,250,.78); max-width: 54ch; margin-inline: auto; }
.cta-final__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.2rem; }

/* ---------- 17. Pied de page ---------- */
.pied { background: var(--encre); color: rgba(251,251,250,.66); padding-block: 4rem 2rem; font-size: .93rem; border-top: 1px solid rgba(251,251,250,.12); }
.pied a { color: rgba(251,251,250,.66); text-decoration: none; }
.pied a:hover { color: var(--orange); }
.pied h3 { color: var(--papier); font-family: var(--texte); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; }
.pied__grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: .5rem; }
.pied .logo { color: var(--papier); }
.pied__bas {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(251,251,250,.14);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .85rem; color: rgba(251,251,250,.5);
}

/* ---------- 18. Barre d'appel mobile ---------- */
.barre-mobile { display: none; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1080px) {
  .pourquoi__grille { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .ite__grille, .devis__grille { grid-template-columns: 1fr; }
  .devis__accroche { position: static; }
  .realisations__grille, .avis__grille { grid-template-columns: repeat(2, 1fr); }
  .stats__grille { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .stats__item:nth-child(n+3) { border-top: 1px solid var(--ligne); }
  .pied__grille { grid-template-columns: repeat(2, 1fr); }
  .service { grid-template-columns: 50px 1fr; gap: .5rem 1.2rem; }
  .service p { grid-column: 2; }
  .service__f { display: none; }
}

@media (max-width: 760px) {
  /* Sans JS, le burger ne peut rien ouvrir : la nav reste alors dans le flux.
     Le repliement n'est activé que si le script a posé la classe `js`. */
  .js .nav {
    position: fixed; inset: 0 0 auto; top: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); padding: 5.5rem var(--g) 2rem;
    transform: translateY(-120%);
    /* `visibility` bascule sans interpolation : immédiatement à l'ouverture — sinon un
       lien encore masqué n'est pas focusable au clavier — et seulement à la fin du
       glissement à la fermeture, pour que les liens cessent d'être tabulables. */
    transition: transform .28s ease, visibility 0s .28s;
    visibility: hidden;
    box-shadow: var(--ombre);
  }
  .js .nav[data-ouvert="true"] {
    transform: translateY(0);
    visibility: visible;
    transition: transform .28s ease, visibility 0s 0s;
  }
  html:not(.js) .nav { flex-wrap: wrap; gap: .25rem 1.2rem; }
  .nav a, .entete--fixe .nav a { color: var(--encre); padding-block: .9rem; border-bottom: 1px solid var(--ligne); }
  .js .burger { display: block; }
  .tel-entete span { display: none; }

  .hero { min-height: min(88vh, 720px); }
  .hero__in { padding-block: 7rem 2rem; }
  .hero__bas { flex-direction: column; align-items: stretch; }
  /* Empilés plutôt que côte à côte : à deux par ligne, les libellés cassaient sur 2 lignes. */
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; }

  .champ--duo { grid-template-columns: 1fr; }
  .realisations__grille, .avis__grille { grid-template-columns: 1fr; }

  .barre-mobile {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; inset: auto 0 0; z-index: 80;
  }
  .barre-mobile a { padding: 1rem; text-align: center; text-decoration: none; font-weight: 600; font-size: .95rem; }
  .barre-mobile a:first-child { background: var(--encre); color: var(--papier); }
  .barre-mobile a:last-child  { background: var(--orange-cta); color: var(--blanc); }
  body { padding-bottom: 56px; }
}

@media (max-width: 520px) {
  .stats__grille { grid-template-columns: 1fr; }
  .stats__item { border-left: 0 !important; padding-left: 0 !important; }
  .stats__item + .stats__item { border-top: 1px solid var(--ligne); }
  .pourquoi__grille, .pied__grille { grid-template-columns: 1fr; }
}

/* ---------- 20. Impression ---------- */
@media print {
  .entete, .barre-mobile, .formulaire, .cta-final, .ruban, .bandeau-demo { display: none; }
  body { background: #fff; }
}