/* =====================================================================
   BELL HABITAT — Feuille de style unique
   ---------------------------------------------------------------------
   TOUT l'espacement passe par les "tokens" ci-dessous (variables CSS).
   Un padding = défini UNE fois ici, réutilisé partout → identique sur
   toutes les pages, mobile ET ordinateur. Pour élargir/resserrer le
   site, tu ne touches qu'aux variables du bloc :root.
   ===================================================================== */

/* ---------- Polices auto-hébergées ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/bricolage.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/manrope.woff2') format('woff2');}

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  /* Couleurs */
  --ink:#191C13;          /* texte / fonds sombres  */
  --cream:#FBFAF6;        /* fond principal         */
  --sand:#E7E3D8;         /* fond extérieur         */
  --green:#33402A;        /* vert principal (CTA)   */
  --green-link:#3D4B2C;   /* liens                  */
  --green-hover:#7C8F58;
  --green-l1:#CFD9B4;     /* vert clair (accents)   */
  --green-l2:#A9B98A;
  --muted:#5C6152;        /* texte secondaire       */
  --muted2:#7A7F6C;       /* labels / captions      */
  --card:#F4F1EA;         /* fond carte 1           */
  --card2:#F1EEE4;        /* fond carte 2           */
  --line:rgba(25,28,19,.12);
  --line-strong:rgba(25,28,19,.16);

  /* Largeur de colonne + gouttière (LE padding horizontal partout) */
  --container:560px;      /* largeur max du contenu      */
  --gutter:20px;          /* padding gauche/droite global */

  /* Rythme vertical des sections (padding haut/bas partout) */
  --section-y:36px;
  /* Écart uniforme entre un intro (kicker+titre) et son contenu */
  --sh-gap:20px;

  /* Échelle d'espacement (multiples réutilisables) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:52px;

  /* Rayons */
  --r-pill:999px; --r-sm:14px; --r-md:20px; --r-lg:24px;

  /* Hauteurs de contrôles */
  --btn-h:54px; --field-h:54px; --tap:44px;

  /* Hauteur réservée pour la barre CTA fixe (mobile) */
  --cta-space:96px;
}

/* =====================================================================
   2. RESET
   ===================================================================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--sand);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;}       /* filet de sécurité anti-débordement horizontal */
img{max-width:100%;display:block;}
a{color:var(--green-link);text-decoration:none;}
a:hover{color:var(--green-hover);}
button{font-family:inherit;}
h1,h2,h3,p{margin:0;overflow-wrap:break-word;}
::-webkit-scrollbar{height:0;width:0;}
:focus-visible{outline:2px solid var(--green-hover);outline-offset:2px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);
  padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:600;}
.skip-link:focus{left:0;color:var(--cream);}

/* =====================================================================
   3. LAYOUT — colonne principale + conteneurs
   ===================================================================== */
.page{max-width:var(--container);margin:0 auto;background:var(--cream);
  position:relative;overflow-x:clip;min-height:100vh;box-shadow:0 0 80px rgba(25,28,19,.12);}

/* .wrap = bloc de contenu centré avec la gouttière standard */
.wrap{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}

/* .section = rythme vertical standard + gouttière (IDENTIQUE partout) */
.section{padding:var(--section-y) var(--gutter);}
.section--dark{background:var(--green);color:var(--cream);}
.section--ink{background:var(--ink);color:var(--cream);}
.section--tight{}                          /* (déprécié) — rythme désormais uniforme */
.section--flush-x{padding-left:0;padding-right:0;} /* gouttière gérée en interne (carrousels) */
/* Le dernier bloc d'une page garde le même bas que les sections */
.section-end{padding-bottom:var(--section-y);}

/* =====================================================================
   4. TYPOGRAPHIE
   ===================================================================== */
.kicker{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:var(--sp-3);}
.kicker--light{color:var(--green-l2);}

.display{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(40px,7vw,64px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;}
.h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(28px,4.4vw,40px);line-height:1.03;letter-spacing:-.03em;}
.h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(20px,2.6vw,24px);line-height:1.12;letter-spacing:-.02em;}
.lead{font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--muted);}
.muted{color:var(--muted);}
.on-dark .lead,.on-dark .muted{color:rgba(251,250,246,.78);}

/* Intro de section : écart intro→contenu UNIFORME (--sh-gap) partout.
   Le titre (.display ou .h2) et le paragraphe (.lead) ont un écart fixe. */
.section-head,.page-intro{margin-bottom:var(--sh-gap);}
.section-head :is(.display,.h2,.h3){margin-bottom:0;}
.section-head .lead,.page-intro .lead{margin-top:var(--sp-3);}

/* En-tête de section avec lien "Tout voir" à droite */
.row-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);
  margin-bottom:var(--sh-gap);padding:0 var(--gutter);}
.link-more{font-size:13px;font-weight:600;color:var(--green-link);white-space:nowrap;
  background:none;border:none;padding:0;cursor:pointer;}

/* =====================================================================
   5. BOUTONS
   ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--btn-h);padding:0 22px;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:15px;font-weight:700;cursor:pointer;transition:filter .15s ease,background .15s ease;white-space:nowrap;}
.btn:hover{filter:brightness(.97);}
.btn--dark{background:var(--green);color:var(--cream);}
.btn--ink{background:var(--ink);color:var(--cream);}
.btn--light{background:var(--cream);color:var(--ink);}
.btn--outline{background:var(--cream);color:var(--ink);border-color:var(--line-strong);font-weight:600;}
.btn--outline-light{background:transparent;color:var(--cream);border-color:rgba(251,250,246,.4);font-weight:600;}
.btn--block{display:flex;width:100%;}
.btn--tall{height:56px;font-size:16px;}
.btn-row{display:flex;gap:var(--sp-3);}
.cta-stack{display:grid;gap:var(--sp-3);}

/* =====================================================================
   6. HEADER
   ===================================================================== */
/* Bandeau vert d'annonce, tout en haut (défile avec la page) */
.topbar{background:var(--green);color:var(--cream);text-align:center;
  padding:8px var(--gutter);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}

.site-header{position:sticky;top:0;z-index:40;
  background:rgba(251,250,246,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(25,28,19,.08);}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:12px var(--gutter);max-width:var(--container);margin:0 auto;}
.brand{display:flex;flex-direction:column;line-height:1;background:none;border:none;padding:0;cursor:pointer;}
.brand__name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--ink);}
.brand__sub{font-size:9px;letter-spacing:.22em;color:var(--muted2);margin-top:3px;}
.header__actions{display:flex;align-items:center;gap:var(--sp-2);}
.header__call{display:inline-flex;align-items:center;justify-content:center;height:var(--tap);padding:0 16px;
  border-radius:var(--r-pill);background:var(--green);color:var(--cream);font-size:13px;font-weight:700;}
.header__call:hover{color:var(--cream);filter:brightness(.95);}
.header__nav{display:none;} /* liens inline visibles seulement en desktop */

.burger{width:var(--tap);height:var(--tap);border-radius:var(--r-pill);border:1px solid rgba(25,28,19,.15);
  background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0;}
.burger span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;}

/* =====================================================================
   7. MENU PLEIN ÉCRAN
   ===================================================================== */
.menu-overlay{position:fixed;inset:0;z-index:60;display:none;justify-content:center;}
.menu-overlay.is-open{display:flex;animation:overlayIn .35s cubic-bezier(.22,1,.36,1) both;}
.menu{position:relative;width:100%;max-width:var(--container);background:var(--ink);color:var(--cream);
  display:flex;flex-direction:column;padding:22px var(--sp-6) var(--sp-7);overflow:hidden;}
.menu__glow{position:absolute;top:-110px;right:-110px;width:320px;height:320px;border-radius:var(--r-pill);
  background:radial-gradient(circle,rgba(51,64,42,.85) 0%,rgba(25,28,19,0) 70%);}
.menu__top{position:relative;display:flex;align-items:center;justify-content:space-between;}
.menu__label{font-size:9px;letter-spacing:.22em;color:var(--muted2);}
.menu__close{width:var(--tap);height:var(--tap);margin-right:-8px;border-radius:var(--r-pill);
  border:1px solid rgba(251,250,246,.2);background:none;color:var(--cream);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.menu__nav{position:relative;display:grid;margin:44px 0 auto;}
.menu__item{display:flex;align-items:baseline;gap:16px;width:100%;padding:16px 0;background:none;border:none;
  border-bottom:1px solid rgba(251,250,246,.1);text-align:left;cursor:pointer;color:var(--cream);
  animation:menuItemIn .5s cubic-bezier(.22,1,.36,1) both;}
.menu.is-open .menu__item:nth-child(1){animation-delay:.06s;}
.menu.is-open .menu__item:nth-child(2){animation-delay:.13s;}
.menu.is-open .menu__item:nth-child(3){animation-delay:.20s;}
.menu.is-open .menu__item:nth-child(4){animation-delay:.27s;}
.menu.is-open .menu__item:nth-child(5){animation-delay:.34s;}
.menu__item[aria-current="page"]{color:var(--green-l1);}
.menu__num{font-size:11px;letter-spacing:.18em;color:var(--muted2);width:26px;flex:0 0 auto;}
.menu__text{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:38px;letter-spacing:-.035em;line-height:1.05;}
.menu__foot{position:relative;display:grid;gap:14px;padding-top:28px;margin-top:36px;border-top:1px solid rgba(251,250,246,.12);}
.menu__foot a{display:flex;align-items:center;justify-content:space-between;color:var(--cream);}
.menu__foot .phone{font-size:17px;font-weight:600;}
.menu__foot .mail{color:rgba(251,250,246,.72);font-size:15px;}
.menu__foot .tag{color:var(--muted2);font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.menu__foot p{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted2);}

/* =====================================================================
   8. HERO
   ===================================================================== */
.hero{position:relative;background:var(--ink);}
.hero__media{width:100%;height:76vh;min-height:480px;object-fit:cover;opacity:.86;}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(25,28,19,.45) 0%,rgba(25,28,19,0) 32%,rgba(25,28,19,.88) 78%);}
.hero__inner{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gutter) 26px;color:var(--cream);}
.hero .kicker{color:var(--green-l1);margin-bottom:14px;}
.hero__title{margin-bottom:14px;}
.hero__text{margin-bottom:20px;font-size:15px;line-height:1.55;color:rgba(251,250,246,.78);max-width:34ch;}
.hero .btn-row .btn{flex:0 0 auto;}
.hero .btn-row .btn:first-child{flex:1;}

/* =====================================================================
   9. MARQUEE
   ===================================================================== */
.marquee{display:flex;overflow:hidden;background:var(--green);color:var(--green-l1);
  padding:11px 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;}
.marquee__track{display:flex;gap:28px;padding-right:28px;animation:marq 26s linear infinite;flex:0 0 auto;}

/* =====================================================================
   10. CARTES SOLUTIONS (accueil)
   ===================================================================== */
.solutions-grid{display:grid;gap:14px;}
.solution-card{border-radius:22px;overflow:hidden;background:var(--card2);position:relative;
  display:flex;flex-direction:column;}
.solution-card__img{width:100%;height:230px;object-fit:cover;}
.solution-card__tag{position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;height:30px;
  padding:0 12px;border-radius:var(--r-pill);background:rgba(251,250,246,.92);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.solution-card__body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1;}
.solution-card__body .h3{margin-bottom:var(--sp-2);}
.solution-card__desc{margin-bottom:14px;font-size:14.5px;line-height:1.55;color:var(--muted);flex:1;}
.solution-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid rgba(25,28,19,.1);}
.solution-card__meta{font-size:13px;color:var(--muted2);}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:var(--r-pill);background:var(--green);color:var(--cream);font-size:16px;border:none;cursor:pointer;flex:0 0 auto;}
.icon-btn:hover{color:var(--cream);filter:brightness(.95);}

/* =====================================================================
   11. COMPARATEUR AVANT / APRÈS
   ===================================================================== */
.compare{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;}
.compare__base,.compare__over img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compare__over{position:absolute;inset:0;overflow:hidden;width:55%;}
.compare__over img{position:relative;}
.compare__handle{position:absolute;top:0;bottom:0;width:2px;background:var(--cream);left:55%;transform:translateX(-1px);pointer-events:none;}
.compare__tag{position:absolute;bottom:12px;padding:6px 12px;border-radius:var(--r-pill);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.compare__tag--l{left:12px;background:rgba(251,250,246,.9);color:var(--ink);}
.compare__tag--r{right:12px;background:rgba(25,28,19,.75);color:var(--cream);}
.compare__range{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);width:100%;height:var(--tap);
  margin:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;}
.compare__range::-webkit-slider-thumb{-webkit-appearance:none;width:var(--tap);height:var(--tap);border-radius:50%;
  background:var(--cream);border:3px solid var(--green);cursor:ew-resize;box-shadow:0 6px 20px rgba(0,0,0,.35);}
.compare__range::-moz-range-thumb{width:var(--tap);height:var(--tap);border-radius:50%;
  background:var(--cream);border:3px solid var(--green);cursor:ew-resize;box-shadow:0 6px 20px rgba(0,0,0,.35);}
.compare + .compare-note{margin-top:16px;font-size:14px;line-height:1.6;color:rgba(251,250,246,.72);}

/* =====================================================================
   12. CARROUSELS (réalisations, articles)
   ===================================================================== */
.hscroll{display:flex;gap:12px;overflow-x:auto;padding:0 var(--gutter) 4px;scroll-snap-type:x mandatory;}
.project-card{flex:0 0 78%;scroll-snap-align:start;display:block;background:var(--card);border:none;
  border-radius:var(--r-md);overflow:hidden;padding:0;text-align:left;cursor:pointer;color:inherit;}
.project-card__img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.project-card__body{display:block;padding:18px 18px 20px;}
.project-card__title{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;
  letter-spacing:-.01em;line-height:1.2;margin-bottom:5px;color:var(--ink);}
.project-card__place{display:block;font-size:13px;color:var(--muted2);}

.article-card{flex:0 0 72%;}
.article-card__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px;}
.article-card__title{margin-top:12px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);}

/* =====================================================================
   13. STATS
   ===================================================================== */
.stats{display:grid;}
.stat-row{display:flex;align-items:baseline;gap:16px;padding:20px 0;border-top:1px solid var(--line);}
.stat-row__n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(40px,5vw,48px);
  letter-spacing:-.04em;line-height:1;color:var(--green);min-width:130px;}
.stat-row__label{font-size:14.5px;line-height:1.5;color:var(--muted);}

/* =====================================================================
   14. TÉMOIGNAGES
   ===================================================================== */
.reviews{display:grid;gap:12px;}
.review{margin:0;padding:20px;border-radius:var(--r-md);background:var(--card);}
.review blockquote{margin:0 0 14px;font-size:16px;line-height:1.55;}
.review figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted2);}
.review__name{font-weight:700;color:var(--ink);}

/* =====================================================================
   15. FAQ
   ===================================================================== */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 0;background:none;border:none;text-align:left;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);cursor:pointer;}
.faq-item__icon{flex:0 0 auto;width:28px;height:28px;border-radius:var(--r-pill);background:rgba(25,28,19,.07);
  display:flex;align-items:center;justify-content:center;font-size:17px;transition:transform .2s ease;}
.faq-item.is-open .faq-item__icon{transform:rotate(45deg);}
.faq-item__body{overflow:hidden;max-height:0;transition:max-height .28s ease;}
.faq-item.is-open .faq-item__body{max-height:400px;}
.faq-item__body p{padding:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--muted);}

/* =====================================================================
   16. CALLOUT (encart vert de rappel)
   ===================================================================== */
.callout{padding:24px 20px 26px;border-radius:var(--r-lg);background:var(--green);color:var(--cream);}
.callout .h2{margin-bottom:var(--sp-3);}
.callout p{margin-bottom:18px;font-size:15px;line-height:1.6;color:rgba(251,250,246,.75);}
.callout .btn:last-child{margin-bottom:0;}

/* =====================================================================
   17. PAGE SOLUTIONS — blocs détaillés
   ===================================================================== */
.sol-block{padding-bottom:44px;}
.sol-block__img{width:100%;height:300px;object-fit:cover;}
.sol-block__body{padding:24px var(--gutter) 0;}
.sol-block__body .h2{margin-bottom:var(--sp-3);}
.sol-block__body .lead{margin-bottom:18px;line-height:1.65;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.chip{display:inline-flex;align-items:center;min-height:32px;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--card2);font-size:12.5px;line-height:1.3;color:var(--green-link);}

/* =====================================================================
   18. PAGE RÉALISATIONS — filtres + galerie
   ===================================================================== */
.filters{display:flex;gap:8px;overflow-x:auto;padding:0 0 20px;
  position:sticky;top:69px;z-index:30;background:linear-gradient(var(--cream) 72%,rgba(251,250,246,0));}
.filter{flex:0 0 auto;height:40px;padding:0 18px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;background:var(--card2);color:var(--green-link);border:1px solid rgba(25,28,19,.1);}
.filter.is-active{background:var(--green);color:var(--cream);border-color:var(--green);}
.gallery{display:grid;gap:14px;}
.gcard{border-radius:var(--r-md);overflow:hidden;background:var(--card);}
.gcard__img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.gcard__body{padding:18px 18px 20px;}
.gcard__cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);display:block;margin-bottom:8px;}
.gcard__body .h3{font-size:21px;margin-bottom:var(--sp-2);}
.gcard__desc{font-size:14px;line-height:1.55;color:var(--muted);}
.gcard__specs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.spec{display:inline-flex;align-items:center;min-height:28px;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--cream);border:1px solid rgba(25,28,19,.1);font-size:12px;line-height:1.3;color:var(--muted);}

/* =====================================================================
   19. BLOG (liste) + ARTICLE
   ===================================================================== */
.blog-grid{display:grid;gap:16px;}
.blog-card{display:block;width:100%;text-align:left;padding:0;border:none;border-radius:var(--r-md);
  overflow:hidden;background:var(--card);cursor:pointer;color:inherit;}
.blog-card__img{width:100%;aspect-ratio:16/10;object-fit:cover;}
.blog-card__body{padding:18px 18px 20px;}
.blog-card__tag{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px;}
.blog-card__title{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;line-height:1.15;color:var(--ink);}

.article{padding:22px var(--gutter) 46px;}
.article__title{margin-bottom:20px;text-wrap:pretty;font-size:clamp(28px,4vw,36px);}
.article__cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-md);margin-bottom:24px;}
.article__body{font-size:16.5px;line-height:1.75;color:#2c3122;}
.article__body>p:first-of-type{font-size:18px;line-height:1.6;color:var(--ink);}   /* chapô */
.article__body h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(22px,2.4vw,27px);letter-spacing:-.02em;line-height:1.15;margin:40px 0 14px;color:var(--ink);}
.article__body h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;margin:26px 0 10px;color:var(--ink);}
.article__body p{margin:0 0 18px;}
.article__body ul,.article__body ol{margin:0 0 18px;padding-left:22px;}
.article__body li{margin:0 0 9px;padding-left:4px;}
.article__body li::marker{color:var(--green);}
.article__body a{color:var(--green-link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.article__body a:hover{color:var(--green-hover);}
.article__body strong{color:var(--ink);font-weight:700;}
.article__body blockquote{margin:24px 0;padding:18px 22px;border-left:3px solid var(--green-l2);
  background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:17px;line-height:1.55;color:var(--ink);}
.article__body h2:first-child,.article__body h3:first-child{margin-top:0;}
.article__body table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px;}
.article__body th,.article__body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);}
.article__body th{font-weight:700;color:var(--ink);}
.article__body .table-scroll{overflow-x:auto;margin:0 0 20px;}
.article__body .table-scroll table{margin:0;}
.back-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;white-space:nowrap;
  border-radius:var(--r-pill);border:1px solid rgba(25,28,19,.14);background:var(--cream);
  font-size:13.5px;font-weight:600;color:var(--green-link);cursor:pointer;}

/* =====================================================================
   20. CONTACT — formulaire
   ===================================================================== */
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.pill{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:600;cursor:pointer;background:var(--card2);color:var(--green-link);
  border:1px solid rgba(25,28,19,.1);transition:background .12s ease,color .12s ease;}
.pill input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.pill:hover{border-color:rgba(25,28,19,.2);}
.pill:has(input:checked){background:var(--green);color:var(--cream);border-color:var(--green);}
.pill:focus-within{outline:2px solid var(--green-hover);outline-offset:2px;}
.pill.is-active{background:var(--green);color:var(--cream);border-color:var(--green);}
.form-grid{display:grid;gap:12px;}
.field{display:block;}
.field__label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:7px;}
.field input,.field textarea{width:100%;padding:16px;height:var(--field-h);border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--cream);font-size:16px;color:var(--ink);outline:none;}
.field textarea{height:auto;min-height:120px;resize:vertical;line-height:1.5;}
.field input:focus,.field textarea:focus{border-color:var(--green-hover);}
.form-note{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--muted2);}
.form-success{padding:26px 22px 28px;border-radius:var(--r-lg);background:var(--green);color:var(--cream);}
.form-success__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--r-pill);background:var(--green-l1);color:var(--ink);font-size:20px;margin-bottom:16px;}
.form-success .h2{margin-bottom:var(--sp-3);}
.form-success p{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:rgba(251,250,246,.8);}
.form-error{padding:14px 16px;border-radius:var(--r-sm);background:#F6E7E3;color:#7a2e1e;font-size:14px;margin-bottom:16px;}
.contact-blocks{border-top:1px solid var(--line);padding-top:26px;display:grid;gap:20px;}
.contact-grid{}
.contact-cta{padding-bottom:8px;}
.contact-form-wrap{padding-top:26px;}
.contact-side{padding-top:40px;}

/* =====================================================================
   21. FOOTER
   ===================================================================== */
.footer{background:var(--ink);color:var(--cream);padding:var(--section-y) var(--gutter) calc(var(--cta-space) + 34px);}
.footer__title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(30px,4vw,38px);
  line-height:1;letter-spacing:-.035em;margin-bottom:18px;}
.footer__cta{display:grid;gap:10px;margin-bottom:34px;}
.footer__cols{display:grid;gap:24px;font-size:14px;line-height:1.6;color:rgba(251,250,246,.7);}
.footer__col .kicker{color:var(--green-l2);margin-bottom:8px;}
.footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:20px;border-top:1px solid rgba(251,250,246,.15);font-size:12px;}
.footer__legal a{color:rgba(251,250,246,.7);}
.footer__legal a:hover{color:var(--cream);}
.footer__credit{color:var(--green-l2)!important;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.footer__credit:hover{color:var(--green-l1)!important;}
@media (min-width:640px){ .footer__credit{margin-left:auto;} }

/* =====================================================================
   22. BARRE CTA FIXE (mobile)
   ===================================================================== */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:center;
  padding:0 0 14px;pointer-events:none;transition:transform .3s ease,opacity .25s ease;
  opacity:0;transform:translateY(120%);}
.cta-bar.is-visible{opacity:1;transform:none;}
.cta-bar__inner{width:100%;max-width:var(--container);padding:0 16px;pointer-events:auto;}
.cta-bar__pill{display:flex;gap:8px;padding:8px;border-radius:var(--r-pill);
  background:rgba(25,28,19,.9);backdrop-filter:blur(14px);box-shadow:0 12px 40px rgba(25,28,19,.35);}
.cta-bar__pill .btn{flex:1;height:48px;font-size:14.5px;}
.cta-bar__call{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;
  border-radius:var(--r-pill);border:1px solid rgba(251,250,246,.3);color:var(--cream);font-size:17px;}
.cta-bar__call:hover{color:var(--cream);}

/* =====================================================================
   23. UTILITAIRES
   ===================================================================== */
.only-mobile{display:initial;}
.only-desktop{display:none;}

/* Animations */
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
@keyframes menuItemIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* =====================================================================
   23b. SUISSE — drapeau (SVG inline) + badge, réutilisés partout
   ===================================================================== */
.swiss-flag{display:inline-block;width:1em;height:1em;flex:0 0 auto;
  border-radius:.18em;vertical-align:-.13em;box-shadow:0 0 0 1px rgba(0,0,0,.06);}
.swiss-badge{display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:var(--r-pill);line-height:1;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(251,250,246,.1);border:1px solid rgba(251,250,246,.2);color:var(--cream);}
.swiss-badge .swiss-flag{width:15px;height:15px;}

/* Bandeau vert : drapeau + texte centrés (gap au conteneur) */
.topbar{display:flex;align-items:center;justify-content:center;gap:8px;}
.topbar .swiss-flag{width:14px;height:14px;}
/* Header : drapeau collé au nom de marque */
.brand__name{display:inline-flex;align-items:center;gap:7px;}
.brand__name .swiss-flag{width:15px;height:15px;}
/* Menu plein écran */
.menu__label{display:inline-flex;align-items:center;gap:7px;}
.menu__label .swiss-flag{width:14px;height:14px;}
/* Badge dans le hero (au-dessus du kicker) — fond sombre translucide */
.swiss-badge--hero{margin-bottom:16px;background:rgba(25,28,19,.42);
  border-color:rgba(251,250,246,.28);backdrop-filter:blur(4px);}
/* Badge dans le footer (au-dessus du titre) */
.swiss-badge--footer{margin-bottom:20px;}

/* =====================================================================
   24. RESPONSIVE — 3 paliers
   ---------------------------------------------------------------------
     • Mobile (base)      : colonne unique, gouttière 20, carrousels.
     • Tablette (≥ 720px) : "rail" centré, grilles 2 colonnes.
     • Desktop (≥ 1024px) : nav inline, 3–4 colonnes.
   Le RAIL = contenu centré sur --container avec fonds pleine largeur,
   via une seule règle réutilisée. Chaque bloc partage le même bord
   gauche à toutes les tailles. On ne change que --container, la
   gouttière, le rythme et le nombre de colonnes d'un palier à l'autre.
   ===================================================================== */
@media (min-width:640px){
  :root{ --container:1000px; --gutter:32px; --section-y:44px; --sh-gap:24px; }
  .page{max-width:none;box-shadow:none;}

  /* Le rail, partagé par les blocs de 1er niveau (sections, carrousels, header, footer) */
  .site-header__inner,.section,.row-head,.hscroll,.sol-block,.footer,.hero__inner{
    max-width:none;margin-inline:0;
    padding-inline:max(var(--gutter), calc((100% - var(--container)) / 2));
  }
  .section{padding-top:var(--section-y);padding-bottom:var(--section-y);}
  .section--flush-x{padding-inline:0;}   /* carrousels : rail géré par les enfants */

  /* Blocs internes (dans une .section) : remplissent la colonne, même bord gauche */
  .section-head,.page-intro,.stats,.reviews,.faq,.callout-wrap,.compare-wrap,
  .solutions-grid,.gallery,.blog-grid,.contact-grid,.filters,
  .footer__inner,.footer__legal{max-width:none;margin-inline:0;padding-inline:0;width:100%;}
  .section-head,.page-intro{max-width:720px;}

  /* Hero */
  .hero__media{height:70vh;min-height:520px;max-height:760px;}
  .hero__inner{left:0;right:0;transform:none;padding-bottom:48px;}
  .hero__title{max-width:17ch;}
  .hero__text{font-size:16px;max-width:46ch;}

  /* Grilles 2 colonnes */
  .solutions-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .hscroll{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;overflow:visible;}
  .articles-scroll{grid-template-columns:repeat(2,1fr);}
  .project-card,.article-card{flex:none;}
  .gallery{grid-template-columns:repeat(2,1fr);gap:20px;}
  .blog-grid{grid-template-columns:repeat(2,1fr);gap:20px;}
  .reviews{grid-template-columns:repeat(2,1fr);gap:16px;}
  .stats{grid-template-columns:repeat(3,1fr);gap:0 32px;}
  .stat-row{flex-direction:column;gap:8px;}
  .stat-row__n{min-width:0;}
  .filters{justify-content:flex-start;}

  /* Comparateur : image + note côte à côte */
  .compare-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;margin-top:6px;}
  .compare-wrap .compare{aspect-ratio:16/10;}
  .compare-note{margin-top:0;font-size:16px;line-height:1.65;}

  /* Solutions détaillées : image + texte alternés */
  .sol-block{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-bottom:64px;}
  .sol-block__img{height:100%;min-height:320px;border-radius:var(--r-md);}
  .sol-block:nth-child(even) .sol-block__img{order:2;}
  .sol-block__body{padding:0;}

  /* CTA "Un appel suffit" */
  .cta-stack{grid-template-columns:auto auto;justify-content:start;}
  .cta-stack .btn{min-width:240px;}

  /* Article lisible */
  .article,.back-wrap{max-width:720px;margin-inline:auto;}

  .callout{padding:40px;}

  /* Footer 2 colonnes */
  .footer__inner{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;}
  .footer__cols{grid-auto-flow:column;grid-auto-columns:1fr;gap:32px;}
  .footer__legal{margin-top:32px;}
}

@media (min-width:1024px){
  :root{ --container:1180px; --gutter:40px; --section-y:52px; --sh-gap:28px; --cta-space:0px; }

  /* Header : nav inline, burger masqué */
  .site-header__inner{padding-block:14px;}
  .burger{display:none;}
  .header__nav{display:flex;align-items:center;gap:30px;}
  .header__nav a{font-size:14px;font-weight:600;color:var(--ink);}
  .header__nav a:hover{color:var(--green-hover);}
  .header__nav a[aria-current="page"]{color:var(--green);}

  .section-head,.page-intro{max-width:760px;}

  .hero__media{height:82vh;min-height:600px;max-height:840px;}
  .hero__inner{padding-bottom:60px;}
  .hero__title{max-width:15ch;}
  .hero__text{font-size:17px;max-width:48ch;}
  .hero .btn-row .btn:first-child{min-width:220px;}

  .solutions-grid{grid-template-columns:repeat(4,1fr);gap:24px;}
  .solution-card__img{height:210px;}
  .hscroll{grid-template-columns:repeat(4,1fr);gap:24px;}
  .articles-scroll{grid-template-columns:repeat(3,1fr);}
  .reviews{grid-template-columns:repeat(3,1fr);gap:20px;}
  .gallery{grid-template-columns:repeat(3,1fr);gap:24px;}
  .blog-grid{grid-template-columns:repeat(3,1fr);gap:24px;}

  .compare-wrap{grid-template-columns:1.15fr .85fr;gap:48px;}
  .cta-stack .btn{min-width:260px;}

  .sol-block{gap:56px;padding-bottom:96px;}
  .sol-block__img{min-height:400px;}

  .faq-item__q{font-size:17px;padding:22px 0;}
  .faq-item__body p{max-width:70ch;}

  .callout{padding:48px;}

  .footer{padding-bottom:64px;}
  .footer__inner{grid-template-columns:1.4fr 1fr;gap:56px;}
  .footer__cols{gap:48px;}
  .footer__legal{margin-top:40px;}

  /* Contact : formulaire + coordonnées côte à côte */
  .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;}
  .contact-cta,.contact-form-wrap,.contact-side{padding-inline:0;}
  .contact-side{padding-top:0;}
  .contact-blocks{border-top:none;padding-top:0;}

  .article,.back-wrap{max-width:760px;}

  .only-mobile{display:none;}
  .only-desktop{display:initial;}
}

@media (min-width:1400px){
  :root{--container:1240px;}
}