/* ==========================================================================
   JD Rénovation : site.css (Nicolam Studio)
   Artisan solide et accessible : fond crème chaleureux, orange de chantier en action, gris ardoise en repères,
   typographie franche reprise de son logo. Aucune bibliothèque CSS chargée : tout le style vit dans cette feuille.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (aucun appel à Google Fonts) : Montserrat 600/700, Inter 400/500/600, latin ---------- */
@font-face{ font-family:"Montserrat"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/montserrat-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"Montserrat"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/montserrat-700-latin.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/inter-400-latin.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/inter-500-latin.woff2") format("woff2"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/inter-600-latin.woff2") format("woff2"); }

/* ---------- Tokens (Invariants du prompt) ---------- */
:root{
  /* Couleurs */
  --bg:#FAF7F3;              /* crème, fond du site (A du flux), jamais blanc pur */
  --accent-light:#FDE9DA;    /* principale claire : B du flux, placeholders */
  --accent:#B8531A;          /* principale soutenue : boutons, sur-titres, aplat de contraste, focus (4,58:1 sur le fond) */
  --annonce-top:#C9652C;     /* haut du dégradé vertical de la barre d'annonce */
  --brand-orange:#FF914D;    /* orange du logo : touches seulement, jamais en texte */
  --second-light:#E8E9EA;    /* secondaire claire : cellules de la bande de stats */
  --second:#4A4F55;          /* secondaire soutenue : repères (icônes, chiffres, pin des listes) */
  --text:#26221F;            /* texte (14,77:1) */
  --text-2:#6B645D;          /* texte secondaire (5,45:1) */
  --star:#F2B01E;            /* étoiles et note Google uniquement */
  --surface:#FFFDF9;         /* fond des cartes, distinct du fond de section */
  --carmin:#A8243A;          /* notes de maquette */
  --erreur:#B42318;
  --filet:rgba(38,34,31,.14);/* hairline */
  --sig:linear-gradient(90deg,#4A4F55,#B8531A);                 /* dégradé signature, horizontal (nom dans le H1) */
  --grad:linear-gradient(135deg,#4A4F55,#B8531A);               /* le même à 135° : pastilles d'icône, avatars, bordure des avis */
  --grad-btn:linear-gradient(135deg,#4A4F55 0%,#B8531A 40%,#B8531A 100%);   /* bouton plein : la signature finit sur la principale */
  --ph-bord:#FBF1E8;         /* bord du radial des placeholders de carte (45 % orange clair + 55 % crème) */
  /* Espacements */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Rayons */
  --r-card:12px; --r-btn:10px; --r-pill:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --pad:24px;
  /* Barre d'annonce + header */
  --ann-h:40px; --hdr-h:84px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  --logo-h:60px;
  /* Ombres : brun chaud en couches + liseré clair */
  --sh-card:0 1px 2px rgba(90,58,34,.10),0 8px 24px rgba(90,58,34,.12),0 16px 40px rgba(90,58,34,.07),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(90,58,34,.08),0 4px 12px rgba(90,58,34,.07),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-btn:0 1px 2px rgba(90,58,34,.16),0 4px 12px rgba(184,83,26,.22);
  /* Mouvement : ease-in-out partout, .4s minimum ; ticker en linear */
  --ease:ease-in-out; --dur:.4s; --dur-in:.9s; --dur-open:.5s; --dur-faq:.4s;
  /* Typographie */
  --f-titre:'Montserrat',system-ui,sans-serif;
  --f-texte:'Inter',system-ui,sans-serif;
  --h1:clamp(2.25rem,1.4rem + 3.6vw,4rem);
  --h1-page:clamp(2rem,1.4rem + 2.6vw,3.25rem);   /* heros de page : toujours sous le H1 de l'accueil */
  --h2:clamp(1.75rem,1.3rem + 1.8vw,2.5rem);
  --h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --h4:1.125rem;
  --chapo:clamp(1.125rem,1.05rem + .3vw,1.1875rem);
  --corps:clamp(1rem,.95rem + .2vw,1.0625rem);
  --caption:.875rem;
  --surtitre:.8125rem;
  /* Ticker de la barre d'annonce */
  --tk-lead:96px; --tk-fade:24px;
}
@supports (background:linear-gradient(in oklab,red,blue)){
  :root{
    --sig:linear-gradient(90deg in oklab,#4A4F55,#B8531A);
    --grad:linear-gradient(135deg in oklab,#4A4F55,#B8531A);
    --grad-btn:linear-gradient(135deg in oklab,#4A4F55 0%,#B8531A 40%,#B8531A 100%);
  }
}
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --tk-lead:64px; --ann-h:36px; --hdr-h:68px; --logo-h:48px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-padding-top:calc(var(--hdr-h) + 24px); }
body{ margin:0; background:var(--bg); color:var(--text); overflow-x:clip; font-family:var(--f-texte);
  font-size:var(--corps); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; letter-spacing:inherit; color:inherit; background:transparent; border:0; padding:0; margin:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nw{ white-space:nowrap; }

/* Titres : coupure normale à gauche, balance seulement sur un titre centré ; jamais pretty */
h1,h2,h3,h4{ font-family:var(--f-titre); color:var(--text); font-weight:600; }
h1{ font-size:var(--h1); font-weight:700; line-height:1.12; letter-spacing:-.015em; }
h2{ font-size:var(--h2); line-height:1.2; letter-spacing:-.01em; }
h3{ font-size:var(--h3); line-height:1.3; letter-spacing:-.005em; }
h4{ font-size:var(--h4); line-height:1.35; }
.center h2,.hero h1,.phero h1{ text-wrap:balance; }
/* « JD Rénovation » dans les H1 : dégradé signature horizontal, qui finit sur la principale */
.h1-name{ background:var(--sig); -webkit-background-clip:text; background-clip:text; color:transparent; padding-block:.1em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.eyebrow{ display:inline-block; font-family:var(--f-texte); font-weight:600; font-size:var(--surtitre); line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.lead{ font-size:var(--chapo); line-height:1.55; color:var(--text-2); }
.is-ph{ font-style:italic; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; isolation:isolate; padding:96px 0; }
.section > .container,.section > .dfl{ position:relative; z-index:1; }
.section.is-tight{ padding-top:48px; }   /* deux sections d'un même thème : écart réduit */
/* grain 4 % sur les fonds de section uniquement ; les composants restent lisses au-dessus */
.section::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width:767px){ .section{ padding-block:64px; } .section.is-tight{ padding-top:32px; } }
/* flux des fonds : A = #FAF7F3, B = #FDE9DA (posé par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#FAF7F3,#FDE9DA); }
.bg-ba{ background:linear-gradient(180deg,#FDE9DA,#FAF7F3); }
.bg-aba{ background:linear-gradient(180deg,#FAF7F3,#FDE9DA 50%,#FAF7F3); }
.bg-bab{ background:linear-gradient(180deg,#FDE9DA,#FAF7F3 50%,#FDE9DA); }

.shead{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px; width:fit-content; max-width:100%;
  min-width:min(100%,40rem); }   /* le plancher du chapô se pose sur l'en-tête (un pourcentage sur le chapô serait circulaire) */
/* le chapô prend la largeur de son titre : jamais plus étroit, jamais plus long ; plancher ~70 caractères sous un titre court */
.shead .lead{ align-self:stretch; contain:inline-size; min-width:min(100%,40rem); }
.shead.center{ align-items:center; text-align:center; margin-inline:auto; }
.shead.center .lead{ text-wrap:balance; }
.shead__cta{ margin-top:8px; }
@media (max-width:767px){ .shead{ margin-bottom:32px; width:auto; } .shead.center .lead{ text-wrap:wrap; } }   /* mobile : l'en-tête et son chapô occupent toute la largeur, jamais un bloc serré sous un titre équilibré */

/* ---------- Icônes (Lucide, trait 1,5) ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; }
.kic{ width:32px; height:32px; flex:0 0 auto; }

/* ---------- Boutons : deux niveaux, coins doux 10px, icône à droite dans la couleur du libellé ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px;
  border-radius:var(--r-btn); border:1.5px solid transparent; white-space:nowrap; font-family:var(--f-texte);
  font-weight:500; font-size:1rem; line-height:1.2; cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease),filter var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.btn .ic{ width:20px; height:20px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
/* plein : le dégradé signature qui finit sur #B8531A (135°, point à 40 %), texte et icône crème */
.btn--primary{ background:var(--grad-btn); color:var(--bg); box-shadow:var(--sh-btn); }
.btn--primary:hover{ filter:brightness(.9); box-shadow:0 2px 4px rgba(90,58,34,.18),0 10px 22px rgba(184,83,26,.28); }
.btn--primary:active{ filter:brightness(.82); }
.btn--primary{ background-origin:border-box; background-repeat:no-repeat; }   /* jamais de dégradé répété sous la bordure transparente */
.btn--ghost{ color:var(--accent); border-color:var(--accent); background-color:transparent; }   /* bordure 1,5px franche */
.btn--ghost:hover{ background-color:rgba(253,233,218,.75); }
.btn--ghost:active{ background-color:rgba(184,83,26,.14); }
/* deux boutons côte à côte : sur une ligne tant qu'ils tiennent, sinon empilés en pleine largeur (classe posée par main.js) */
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-row.is-stacked{ flex-direction:column; align-items:stretch; }
.btn-row.is-stacked .btn{ width:100%; }

/* ---------- Barre d'annonce : dégradé vertical de l'accent (haut plus clair), opaque, texte et icônes crème ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,var(--annonce-top) 0%,var(--accent) 100%); color:var(--bg); }
.annonce__in{ width:100%; max-width:var(--container-header); margin-inline:auto; padding-inline:var(--pad); overflow:hidden; }
.annonce .tk{ justify-content:center; }
.annonce__set{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.annonce li{ display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:500; line-height:1; white-space:nowrap; }
.annonce li .ic{ width:18px; height:18px; color:var(--bg); }
.annonce li.sep{ opacity:.75; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:1039px){   /* bascule mesurée sur la ligne réelle (975px + marges 2 × 24 = 1023px nécessaires, + barre de défilement) : en dessous, ticker, vide de lecture devant CHAQUE copie */
  .annonce__in{ padding-inline:0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  .annonce .tk{ justify-content:flex-start; width:max-content; }
  .annonce .tk > .annonce__set[aria-hidden]{ display:flex; }
  .annonce__set{ padding-left:var(--tk-lead); }
  .annonce li.sep:first-child{ display:none; }
}
@media (max-width:767px){ .annonce li{ font-size:.875rem; } .annonce li .ic{ width:16px; height:16px; } }

/* ---------- Ticker (barre d'annonce) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk.paused{ animation-play-state:paused !important; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Logo : sa version à fond transparent, à la taille du header ---------- */
.logo{ display:block; height:var(--logo-h); width:auto; }

/* ---------- Header : verre de la crème densifié, un seul état, séparation par l'ombre seule ---------- */
.hdr{ position:sticky; top:0; z-index:50; }
.hdr__bar{ position:relative; height:var(--hdr-h);
  background:linear-gradient(180deg,rgba(250,247,243,.94),rgba(250,247,243,.76));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--sh-soft); }
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity var(--dur-open) var(--ease); }
.hdr.is-open .hdr__bar::after{ opacity:1; }
.hdr__bar > .container{ max-width:var(--container-header); height:100%; display:flex; align-items:center; gap:24px;
  flex-wrap:nowrap; position:relative; z-index:1; }
.hdr__logo{ flex:0 0 auto; display:flex; align-items:center; min-height:44px; border-radius:var(--r-btn); transition:opacity var(--dur) var(--ease); }
.hdr__logo:hover{ opacity:.85; }
.nav{ display:flex; align-items:center; gap:8px; margin-inline:auto; flex-wrap:nowrap; }
.nav__link{ display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap; min-height:44px;
  padding:10px 16px; border-radius:var(--r-btn); font-weight:500; font-size:1.0625rem; color:var(--text);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ background:rgba(253,233,218,.8); color:var(--accent); }
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--accent); }
.nav__link .ic{ width:16px; height:16px; color:var(--accent); transition:transform var(--dur) var(--ease); }
.nav__has{ position:relative; }
.nav__toggle[aria-expanded="true"] .ic{ transform:rotate(180deg); }
/* overlay desktop : fond plein, pastille + titre + description empilés */
.submenu{ position:absolute; top:calc(50% + var(--hdr-h) / 2 + 8px); left:50%; min-width:400px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-card);
  opacity:0; visibility:hidden; transform:translate(-50%,6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease); }
.submenu::before{ content:""; position:absolute; left:0; right:0; top:-40px; height:40px; }
.nav__has:hover .submenu,.submenu.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:flex; align-items:center; gap:12px; padding:8px 16px 8px 8px; border-radius:var(--r-btn); color:var(--text);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.submenu a:hover,.submenu a[aria-current]{ background:var(--accent-light); }
.submenu a:hover .submenu__t,.submenu a[aria-current] .submenu__t{ color:var(--accent); }
.submenu__txt{ display:block; min-width:0; }
.submenu__t{ display:block; font-weight:600; font-size:1rem; line-height:1.3; white-space:nowrap; transition:color var(--dur) var(--ease); }
.submenu__d{ display:block; font-size:var(--caption); line-height:1.4; color:var(--text-2); white-space:nowrap; }
/* icône clé dans la MÊME pastille que le bento (.tile__chip), à l'échelle du menu : 40 / 22px */
.kchip{ flex:0 0 auto; width:40px; height:40px; border-radius:var(--r-card); background:var(--grad);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(90,58,34,.16),0 4px 10px rgba(184,83,26,.22),inset 0 1px 0 rgba(255,252,247,.35); }
.kchip .kic{ width:22px; height:22px; color:var(--bg); }
.hdr__cta{ flex:0 0 auto; }
.burger{ display:none; flex:0 0 auto; margin-left:auto; width:44px; height:44px; border-radius:var(--r-btn);
  border:1.5px solid rgba(38,34,31,.22); align-items:center; justify-content:center; color:var(--accent);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.burger:hover{ background:rgba(253,233,218,.8); border-color:var(--accent); }
.burger .ic{ width:24px; height:24px; }
.burger .ic-x,.hdr.is-open .burger .ic-menu{ display:none; }
.hdr.is-open .burger .ic-x{ display:block; }
.hdr__panel{ display:none; }
@media (max-width:1003px){   /* bascule burger mesurée : 986px nécessaires (logo 126 + nav 488 + CTA 228 + gouttières 2 × 24 + 24px d'air de part et d'autre de la nav + marges 2 × 24), + barre de défilement */
  .nav,.hdr__cta{ display:none; }
  .burger{ display:inline-flex; }
  /* le panneau se déplie et se replie à sa hauteur exacte (grid-template-rows 0fr → 1fr), sans fondu */
  .hdr__panel{ display:grid; grid-template-rows:0fr; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--bg);
    box-shadow:0 12px 24px rgba(90,58,34,.12); visibility:hidden;
    transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s linear var(--dur-open); }
  .hdr.is-open .hdr__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
  .hdr__scroll{ min-height:0; max-height:calc(100svh - var(--stack-h)); overflow:hidden; }
  .hdr.is-open .hdr__scroll{ overflow-y:auto; }
  .hdr__panel .container{ display:flex; flex-direction:column; gap:4px; padding-block:16px 32px; }
  .hdr__panel a:not(.btn),.macc__btn{ display:flex; align-items:center; min-height:48px; padding:12px 8px; border-radius:var(--r-btn);
    font-weight:500; font-size:1.0625rem; color:var(--text); text-align:left;
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
  .hdr__panel a:not(.btn):hover,.macc__btn:hover{ background:var(--accent-light); color:var(--accent); }
  .hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ color:var(--accent); }
  .macc__btn{ width:100%; justify-content:space-between; }
  .macc__btn .ic{ width:20px; height:20px; color:var(--accent); transition:transform var(--dur-open) var(--ease); }
  .macc.is-open .macc__btn .ic{ transform:rotate(180deg); }
  .macc__panel{ display:grid; grid-template-rows:0fr; visibility:hidden;
    transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s linear var(--dur-open); }
  .macc.is-open .macc__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
  .macc__in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; }
  /* sous-liens alignés à gauche comme les liens de premier niveau ; le titre seul, sans description */
  .hdr__panel .macc__in a:not(.btn){ display:flex; align-items:center; gap:12px; height:48px; min-height:48px; padding:0 8px; }
  .hdr__panel .kchip{ width:36px; height:36px; }
  .hdr__panel .kchip .kic{ width:20px; height:20px; }
  .hdr__panel .btn{ margin-top:16px; align-self:stretch; }
}

/* ---------- Hero d'accueil : placeholder du site en plein fond (radial #FDE9DA au centre vers #FAF7F3 + logo), contenu centré ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:calc(100vh - var(--stack-h)); padding:96px var(--pad); color:var(--text); }
/* pleine hauteur d'écran, barre d'annonce et header déduits, mesurée sur le petit viewport : sur téléphone, barres du navigateur
   dépliées, le hero tient dans l'écran visible dès le chargement ; l'indicateur de scroll dit que la page continue */
@supports (height:100svh){ .hero{ min-height:calc(100svh - var(--stack-h)); } }
.hero__media{ position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at center,#FDE9DA 0%,#FAF7F3 100%); }
/* le logo du client en filigrane, très discret derrière le H1 (en toutes lettres, il se lirait sous le titre) */
.hero__media::before,.phero::before{ content:""; position:absolute; inset:0; opacity:.035;
  background:url("/assets/img/jd-renovation-logo.png") no-repeat center 50% / min(72%,820px) auto; }
.hero__in{ width:fit-content; max-width:min(100%,var(--container)); display:flex; flex-direction:column; align-items:center; gap:24px; }
/* la tagline prend la largeur du H1 (jamais coupée en deux sous un titre d'une ligne), la rangée de boutons au minimum */
.hero__tag{ font-size:var(--chapo); line-height:1.55; color:var(--text-2); align-self:stretch; contain:inline-size; text-wrap:balance; }
.hero__cta{ justify-content:center; margin-top:8px; }
.hero__cta.is-stacked{ align-self:stretch; }
/* pastille, variante chiffre vérifiable : verre clair, une seule ligne, l'outil au trait en dégradé signature */
.hpill{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:var(--r-pill);
  background:rgba(255,253,249,.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(38,34,31,.12); box-shadow:var(--sh-soft); white-space:nowrap;
  font-weight:600; font-size:.9375rem; line-height:1; color:var(--text); }
.hpill__ic{ width:20px; height:20px; flex:0 0 auto; }
/* Indicateur de scroll : au milieu de l'espace vide entre les boutons et le bas du hero, la barre pile sur l'axe des boutons et haute
   de la moitié de cet espace (main.js) ; « Prestations » à droite, 12px plus loin, même couleur et même opacité (#4A4F55 à 24 %).
   Grille 1fr | 1px | 1fr : la colonne vide de gauche prend la largeur du mot, la ligne tombe au centre exact.
   Sans JS : 72px de haut, 32px au-dessus du bas du hero */
.scroll-ind{ --ind-h:72px; position:absolute; left:0; right:0; bottom:calc(32px + env(safe-area-inset-bottom)); z-index:1; width:max-content; margin-inline:auto;
  display:grid; grid-template-columns:1fr 1px 1fr; column-gap:12px;
  align-items:center; height:var(--ind-h); cursor:pointer; color:rgba(74,79,85,.24);
  transition:opacity .6s var(--ease),visibility 0s linear .6s,color var(--dur) var(--ease); }
.scroll-ind__line{ position:relative; grid-column:2; width:1px; height:100%; overflow:hidden; background:currentColor; }
.scroll-ind__word{ grid-column:3; justify-self:start; text-align:left; font-family:var(--f-texte); font-weight:600; font-size:var(--surtitre); line-height:1; letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap; }
/* la lueur : transparent → accent → transparent sur 40 % de la ligne (un clair ne se verrait pas sur le placeholder),
   vitesse constante, elle repart d'en haut dès qu'elle sort en bas, un passage en 2,4 s */
.scroll-ind__line::after{ content:""; position:absolute; left:0; top:0; width:100%; height:40%;
  background:linear-gradient(180deg,rgba(184,83,26,0),var(--accent),rgba(184,83,26,0)); animation:ind-glow 2.4s linear infinite; }
@keyframes ind-glow{ from{ transform:translateY(-100%); } to{ transform:translateY(250%); } }
.scroll-ind:hover{ color:rgba(74,79,85,.5); }
.scroll-ind:focus-visible{ outline-offset:4px; }
.scroll-ind.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }   /* page défilée */
.scroll-ind:not(.is-gone){ transition:opacity .6s var(--ease),visibility 0s,color var(--dur) var(--ease); }
@media (max-width:767px){
  .scroll-ind{ --ind-h:56px; }
  .hero{ padding-block:64px; }
  .hero__tag{ text-wrap:wrap; }   /* la tagline remplit la largeur : jamais plus étroite que les boutons */
  .hpill{ padding:7px 12px 7px 10px; gap:8px; font-size:.8125rem; }
  .hpill__ic{ width:16px; height:16px; }
  .hero__media::before{ background-size:94% auto; }
}

/* ---------- Hero de page : même radial (centre B) + logo, H1 + tagline seuls ; la section suivante démarre sur B ---------- */
.phero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:clamp(340px,46svh,480px); padding:96px var(--pad);
  background:radial-gradient(ellipse at center,#FDE9DA 0%,#FAF7F3 100%); }
.phero::before{ z-index:-1; }
.phero__in{ width:fit-content; max-width:min(100%,var(--container)); display:flex; flex-direction:column; align-items:center; gap:16px; }
.phero h1{ font-size:var(--h1-page); }
.phero__tag{ font-size:var(--chapo); line-height:1.55; color:var(--text-2); align-self:stretch; contain:inline-size; text-wrap:balance; }   /* la largeur du H1 */
@media (max-width:767px){ .phero{ padding-block:64px; min-height:300px; } .phero__tag{ text-wrap:wrap; } .phero::before{ background-size:94% auto; } }

/* ---------- Placeholder image : son logo centré (~0,14), radial orange clair (foyer au centre), légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(ellipse at center,var(--accent-light) 0%,var(--ph-bord) 100%); }
.ph::before{ content:""; position:absolute; inset:0; opacity:.14;
  background:url("/assets/img/jd-renovation-logo.png") no-repeat center 50% / min(58%,280px) auto; }
.ph__cap{ position:absolute; left:12px; bottom:12px; z-index:1; width:max-content; max-width:calc(100% - 24px);
  padding:6px 12px; border-radius:var(--r-btn); background:rgba(255,253,249,.88); color:var(--text-2);
  font-size:var(--caption); line-height:1.4; box-shadow:var(--sh-soft); }

/* ---------- Notes de maquette : Note = carmin + info ---------- */
.note-wrap{ margin-top:48px; }
.note-wrap .mnote,.note-solo .mnote{ margin-inline:auto; }
.mnote{ display:flex; gap:16px; align-items:flex-start; max-width:760px; padding:16px 24px; border-radius:var(--r-card); border:1px solid; color:var(--text); }
.mnote--note{ border-color:rgba(168,36,58,.35); background:linear-gradient(rgba(168,36,58,.07),rgba(168,36,58,.07)),var(--bg); }
.mnote--sugg{ border-color:rgba(242,176,30,.6); background:linear-gradient(rgba(242,176,30,.14),rgba(242,176,30,.14)),var(--bg); }
.mnote > .ic{ width:24px; height:24px; margin-top:1px; }
.mnote--note > .ic,.mnote--note .mnote__label{ color:var(--carmin); }
.mnote__label{ display:block; font-weight:600; font-size:var(--surtitre); letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; color:var(--text); }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } .mnote{ padding:16px; gap:12px; } }

/* ---------- Cartes ---------- */
.card{ background:var(--surface); color:var(--text); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }

/* ---------- S2 Prestations : bento asymétrique, une rangée par famille, 7 colonnes (dominante 4 + petite 3) ---------- */
.sec-prest .container{ container-type:inline-size; }
.bento{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:24px;
  --sm:calc((100cqw - 6 * 24px) / 7 * 3 + 2 * 24px);   /* largeur de la petite tuile (3 colonnes) */
  --tile-img:calc(var(--sm) / 1.5); }                    /* hauteur d'image = petite tuile ÷ 1,5 (3/2), la même partout */
.t-dom{ grid-column:span 4; }
.t-sm{ grid-column:span 3; }
.tile{ display:flex; flex-direction:column; border-radius:var(--r-card); background:var(--surface);
  box-shadow:var(--sh-card); color:var(--text); cursor:pointer; }
.tile__img{ position:relative; height:var(--tile-img); flex:0 0 auto; }   /* hauteur FIXE, identique pour toutes les tuiles */
.tile__clip{ position:absolute; inset:0; overflow:hidden; border-radius:var(--r-card) var(--r-card) 0 0; }
.tile__clip .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.tile:hover .tile__clip .ph,.tile:focus-visible .tile__clip .ph{ transform:scale(1.04); }   /* un seul effet : le zoom lent de l'image */
.tile__img .ph__cap{ top:12px; bottom:auto; }   /* légende en haut à gauche : la pastille d'icône occupe le bas à gauche */
.tile__chip{ position:absolute; left:32px; bottom:-28px; z-index:1; width:56px; height:56px; border-radius:var(--r-card);
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(90,58,34,.14),0 6px 14px rgba(184,83,26,.26),inset 0 1px 0 rgba(255,252,247,.35); }
.tile__chip .kic{ width:32px; height:32px; color:var(--bg); }
.tile__body{ flex:1 1 auto; display:flex; flex-direction:column; padding:48px 32px 32px; }   /* 48 = débord 28 + 20 */
.tile__txt{ display:flex; flex-direction:column; gap:8px; }
.tile__txt p{ color:var(--text-2); }
.tile__more{ display:inline-flex; align-items:center; gap:8px; align-self:flex-end; margin-top:auto; padding-top:24px; font-weight:500; color:var(--accent); }
.tile__more .ic{ width:20px; height:20px; transition:transform var(--dur) var(--ease); }
.tile:hover .tile__more .ic,.tile:focus-visible .tile__more .ic{ transform:translateX(4px); }
@media (max-width:1023px){   /* tablette : deux colonnes égales, une famille par rangée */
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); --sm:calc((100cqw - 24px) / 2); }
  .t-dom,.t-sm{ grid-column:auto; }
}
@media (max-width:767px){   /* mobile : une colonne dans l'ordre des familles, tuiles pleine largeur, zone image 3/2 */
  .bento{ grid-template-columns:minmax(0,1fr); --tile-img:calc(100cqw / 1.5); }
  .tile__chip{ left:24px; }
  .tile__body{ padding:48px 24px 24px; }
}

/* ---------- S3 Réalisations : défilé de tuiles, la bande part du conteneur et court jusqu'au bord droit de l'écran ---------- */
.sec-real{ container-type:inline-size; }
.dfl__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:48px; }
.dfl__head .shead{ margin-bottom:0; }
.dfl__nav{ display:flex; gap:12px; flex:0 0 auto; }
/* chevrons ronds (défilé, carrousel d'avis) : 48px, bordure accent, survol en fond plein, grisés en butée */
.rbtn{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--accent); background:var(--surface); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
.rbtn .ic{ width:22px; height:22px; }
.rbtn:hover:not(:disabled){ background:var(--accent); color:var(--bg); transform:translateY(-2px); }
.rbtn:disabled{ opacity:.35; cursor:default; }
/* bord gauche de la bande = bord du texte du conteneur ; trois tuiles et demie visibles jusqu'au bord droit (2,5 en tablette, 1,5 en mobile) */
.dfl{ --edge:max(var(--pad),calc((100cqw - var(--container)) / 2 + var(--pad))); --gap:24px; --n:3.5;
  --tw:calc((100cqw - var(--edge) - (var(--n) - .5) * var(--gap)) / var(--n)); }
.dfl__track{ display:flex; gap:var(--gap); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--edge); padding:8px var(--pad) 24px var(--edge); margin-top:-8px;
  scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; }
.dfl__track::-webkit-scrollbar{ display:none; }
.dfl__track.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.dfl__track.is-drag .rcard{ pointer-events:none; }
.dfl .rcard{ flex:0 0 var(--tw); width:var(--tw); scroll-snap-align:start; }
/* barre de suivi fine sous la bande, à toutes les largeurs (décision de Nicolas, 03/11/2026) : elle avance avec le défilé */
.dfl__bar{ position:relative; height:3px; margin:0 var(--edge); border-radius:2px; background:rgba(38,34,31,.12); overflow:hidden; }
.dfl__thumb{ position:absolute; left:0; top:0; height:100%; width:40%; border-radius:2px; background:var(--accent); }
.dfl__cta{ display:flex; margin-top:48px; }
@media (max-width:1023px){
  .dfl{ --n:2.5; }
  .dfl__nav{ display:none; }   /* tablette et mobile : glissé au doigt seul */
}
@media (max-width:767px){
  .dfl{ --n:1.5; --gap:16px; }
  .dfl__head{ margin-bottom:32px; }
  .dfl__cta{ margin-top:32px; }
}
/* carte projet (variante portfolio de la carte image) : image carrée, catégorie / intitulé / commune */
.rcard{ container:rcard / inline-size; display:flex; flex-direction:column; background:var(--surface); color:var(--text);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-soft); -webkit-user-drag:none; }
.rcard__img{ position:relative; overflow:hidden; }
.rcard__img::before{ content:""; display:block; padding-top:100%; }   /* carré 1/1 */
.rcard__img .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.rcard:hover .rcard__img .ph,.rcard:focus-visible .rcard__img .ph{ transform:scale(1.04); }   /* un seul effet : le zoom lent, sans montée */
.rcard__body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:24px; }
.rcard__cat{ font-weight:600; font-size:var(--surtitre); line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.rcard__t{ font-family:var(--f-titre); font-weight:600; color:var(--text); font-size:1.1875rem; line-height:1.35; min-height:2.7em; }   /* deux lignes réservées */
.rcard__loc{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:var(--caption); line-height:1.5; color:var(--text-2); }
.rcard__loc .ic{ width:16px; height:16px; color:var(--second); }
@media (max-width:767px){ .rcard__body{ padding:20px; } .rcard__t{ font-size:1.0625rem; } }
/* carte étroite : la catégorie la plus longue (« Couverture et zinguerie ») passe sur deux lignes ; deux lignes réservées sur toutes
   les cartes, pour que l'intitulé et la commune restent alignés d'une carte à l'autre */
@container rcard (max-width:266px){ .rcard__cat{ min-height:2.8em; } }   /* la plus longue tient sur une ligne dès 218px de texte */

/* ---------- S4 L'entreprise : section de contraste (aplat #B8531A), UNE carte 2 × 2 posée dessus ---------- */
.sec-contrast{ background:var(--accent); color:var(--bg); }
.sec-contrast::before{ opacity:.03; }   /* grain un cran plus discret */
.sec-contrast .note-wrap{ margin-top:48px; }
.who{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"bio photo" "map cities";
  column-gap:48px; row-gap:48px; align-items:center; }
.who__bio{ grid-area:bio; container:bio / inline-size; }
.who__photo{ grid-area:photo; }
.who__map{ grid-area:map; }
.who__cities{ grid-area:cities; }
.who__bio h2{ margin-top:16px; }
.who__p{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.who__p p{ color:var(--text-2); }
.who__pclip{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.who__pclip::before{ content:""; display:block; padding-top:125%; }   /* portrait 4/5 */
.who__pclip .ph{ position:absolute; inset:0; }
.who__h{ font-size:var(--h3); }
.crows{ list-style:none; margin:16px 0 0; padding:0; }
.crow{ position:relative; display:flex; align-items:center; gap:12px; min-height:48px; padding-block:12px; font-weight:600; line-height:1.4; color:var(--text); }
.crow .ic{ width:20px; height:20px; flex:none; color:var(--second); }
.crow + .crow::before{ content:""; position:absolute; top:0; left:32px; right:0; height:1px; background:var(--filet); }   /* filet inséré à l'aplomb du nom */
/* bande de stats en cellules : fond légèrement teinté, filets verticaux insérés ; le chiffre domine, le label sur une ligne */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:32px; border-radius:var(--r-card); background:rgba(232,233,234,.6); }
.stat{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; padding:24px 8px; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:var(--filet); }
.stat__n{ display:inline-flex; align-items:center; gap:6px; font-family:var(--f-texte); font-weight:600; font-size:clamp(2rem,1.7rem + 1.2vw,2.75rem); line-height:1;
  letter-spacing:-.02em; color:var(--second); font-variant-numeric:tabular-nums lining-nums; }
.stat__n--g{ color:var(--star); }
.stat__n .star{ width:.55em; height:.55em; fill:var(--star); }
.stat__l{ font-weight:500; font-size:.9375rem; line-height:1.4; color:var(--text-2); white-space:nowrap; }
/* emplacements réservés au format d'un logo de preuve : sans logo, sans titre, sans texte */
.trust{ display:flex; align-items:center; gap:16px; }
.islot{ display:block; flex:0 0 auto; width:120px; height:60px; border-radius:var(--r-btn); border:1.5px dashed rgba(38,34,31,.26); background:rgba(232,233,234,.35); }
.trust--who{ margin-top:32px; }
.trust--who .islot{ flex:0 1 120px; width:auto; min-width:0; height:auto; aspect-ratio:2 / 1; }   /* trois emplacements au format 2:1, qui se resserrent avec la colonne */
/* carte de localisation : vrais contours, terre découpée par le trait de côte, frontières intérieures seulement,
   étiquette en HTML à l'échelle de la carte */
.zmap{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); background:var(--accent-light); container-type:inline-size; }
.zmap::before{ content:""; display:block; padding-top:80%; }   /* cadre 5:4 */
.zmap svg{ position:absolute; inset:0; width:100%; height:100%; }
.zmap .sea{ fill:var(--accent-light); }          /* mer : teinte claire du contraste, hachurée */
.zmap .hatch{ stroke:rgba(184,83,26,.3); stroke-width:1.6; }
.zmap .land{ fill:var(--bg); }                   /* terre : couleur de fond */
.zmap .dep-l{ fill:none; stroke:rgba(38,34,31,.2); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .coast{ fill:none; stroke:rgba(184,83,26,.55); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.mpt{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:1; font-size:clamp(10px, 2.3cqw, 14px); }
.mpt--main{ z-index:2; --pin:clamp(7px, 2.3cqw, 12px); }
/* pin du siège à sa propre échelle (base --pin) : tracé Lucide map-pin rempli d'accent, liseré clair, la pointe sur l'ancre */
.mpt .pin{ position:absolute; width:calc(var(--pin) * 3.2); height:calc(var(--pin) * 3.2); left:calc(var(--pin) * -1.6); top:calc(var(--pin) * -2.927);
  overflow:visible; filter:drop-shadow(0 3px 5px rgba(90,58,34,.3)); }
.pin__b{ fill:var(--accent); stroke:var(--bg); stroke-width:1.4; paint-order:stroke; }
.pin__c{ fill:var(--bg); }
.lbl{ position:absolute; white-space:nowrap; line-height:1; border-radius:var(--r-pill); padding:.3846em .6923em;
  font-size:1em; font-weight:600; color:var(--text); background:rgba(250,247,243,.96); box-shadow:var(--sh-soft); }
.mpt--main .lbl{ font-size:1.0769em; font-weight:600; color:var(--accent); padding:.4286em .7143em; }
.mpt--main .lbl--siege{ left:0; bottom:calc(var(--pin) * 3.25); transform:translateX(-50%); }   /* étiquette AU-DESSUS du pin */
@media (max-width:1023px){ .who{ column-gap:32px; row-gap:32px; } }
@media (max-width:767px){
  .who.card{ padding:32px 24px; }
  .who{ grid-template-columns:minmax(0,1fr); grid-template-areas:"photo" "bio" "map" "cities"; row-gap:32px; }
  .zmap::before{ padding-top:100%; }   /* carré, viewBox recadré par main.js (data-vbm) */
  .mpt{ left:var(--xm); top:var(--ym); font-size:clamp(10px, 3.6cqw, 13px); }
  .mpt--main{ --pin:clamp(7px, 2.8cqw, 12px); }
  .trust{ gap:12px; }
}
/* trois cellules tant que le plus long label (« chantiers réalisés ») tient sur une ligne, sinon deux en haut et l'orpheline
   (la note Google) sur toute la largeur, centrée comme les deux du haut, sous un filet horizontal continu */
@container bio (max-width:455px){   /* 3 × (128px + 2 × 12px d'air) : en dessous, 2 + 1 */
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:last-child{ grid-column:1 / -1; }
  .stat:last-child::before{ left:16px; right:16px; top:0; bottom:auto; width:auto; height:1px; }
}
@container bio (max-width:299px){ .stat{ padding-inline:4px; } .stat__l{ font-size:.875rem; } }   /* 119px de label */
@container bio (max-width:253px){   /* plus petits téléphones (320px) : une colonne, filets horizontaux insérés */
  .stats{ grid-template-columns:minmax(0,1fr); }
  .stat + .stat::before{ left:16px; right:16px; top:0; bottom:auto; width:auto; height:1px; }
}

/* ---------- S5 Fournisseurs : bandeau de confiance, format item (logo + titre + fourniture + ville) ---------- */
.sups{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.sup{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px; padding:8px 20px; }
.sup + .sup::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:1px; background:var(--filet); }   /* filets verticaux insérés */
.sup__logo{ height:80px; display:flex; align-items:center; justify-content:center; }
.sup__logo img{ width:auto; max-width:100%; }
/* même hauteur optique, pas la même hauteur en pixels : un logo large et bas paraît plus petit qu'un logo compact */
.f-tollens{ height:30px; }
.f-chausson{ height:21px; }
.f-lariviere{ height:46px; }
.f-bruneteau{ height:76px; }
.sup__txt{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.sup h3{ font-size:var(--h4); line-height:1.35; }
.sup p{ color:var(--text-2); }
.sup__loc{ display:inline-flex; align-items:center; gap:8px; font-size:var(--caption); line-height:1.5; color:var(--text-2); }
.sup__loc .ic{ width:16px; height:16px; color:var(--second); }
@media (max-width:1023px){   /* tablette : 2 × 2, filet vertical entre les colonnes, une ligne horizontale continue entre les rangées */
  .sups{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:0; }
  .sup{ padding:32px 24px; }
  .sup + .sup::before{ display:none; }
  .sup:nth-child(even)::before{ display:block; content:""; position:absolute; left:0; top:32px; bottom:32px; width:1px; background:var(--filet); }
  .sup:nth-child(3)::after,.sup:nth-child(4)::after{ content:""; position:absolute; top:0; height:1px; background:var(--filet); }
  .sup:nth-child(3)::after{ left:16px; right:0; }   /* les deux moitiés se rejoignent à la colonne : une seule ligne continue */
  .sup:nth-child(4)::after{ left:0; right:16px; }
}
@media (max-width:767px){   /* mobile : rangées, logo à gauche sur une largeur fixe, texte à droite, filet entre les rangées */
  .sups{ grid-template-columns:minmax(0,1fr); }
  .sup{ flex-direction:row; align-items:center; text-align:left; gap:20px; padding:24px 0; }
  .sup:nth-child(even)::before{ display:none; }
  .sup:nth-child(3)::after,.sup:nth-child(4)::after{ display:none; }
  .sup + .sup::before{ display:block; left:0; right:0; top:0; bottom:auto; width:auto; height:1px; }
  .sup__logo{ flex:0 0 96px; height:64px; }
  .f-tollens{ height:16px; }
  .f-chausson{ height:11px; }
  .f-lariviere{ height:25px; }
  .f-bruneteau{ height:52px; }
  .sup__txt{ align-items:flex-start; gap:4px; }
}
@media (max-width:359px){   /* plus petits téléphones : « Saint-Georges-des-Coteaux » (insécable) ne tient plus à côté du logo ; le logo passe au-dessus du texte */
  .sup{ flex-direction:column; align-items:flex-start; gap:12px; }
  .sup__logo{ flex:none; height:56px; justify-content:flex-start; }
}

/* ---------- S6 Avis : split dès 1024px, argument à gauche, carrousel d'avis à droite (une carte premium à la fois) ---------- */
.proof{ display:flex; flex-direction:column; gap:64px; }
@media (min-width:1024px){
  .proof{ display:grid; grid-template-columns:400px minmax(0,1fr); column-gap:64px; align-items:start; }
}
.proof__head{ margin-bottom:0; }
.rating{ display:flex; align-items:center; gap:12px; margin-top:8px; }
.rating__n{ font-family:var(--f-texte); font-weight:600; font-size:2.75rem; line-height:1; letter-spacing:-.02em;
  color:var(--star); font-variant-numeric:tabular-nums lining-nums; }
.stars{ --sz:18px; display:inline-flex; align-items:center; gap:2px; }
.stars .star,.ostar .star{ width:var(--sz); height:var(--sz); flex:0 0 auto; fill:var(--star); }
.rating .stars{ --sz:24px; }
.rv-cta{ margin-top:16px; align-self:stretch; }   /* empilés, les deux ghosts prennent toute la largeur de la colonne */
.rvs{ min-width:0; }
/* chevrons au-dessus de la carte, à droite, 16px au-dessus de son bord haut (la piste rend ses 8px d'ombre du haut) */
.rvs__nav{ display:flex; justify-content:flex-end; gap:12px; margin-bottom:16px; }
/* piste qui défile au doigt (aimantation), une carte par cran ; la hauteur suit la carte affichée (réglée par le JS),
   le haut étant fixe, elle ne grandit ou ne rétrécit que vers le bas, et ne rétrécit qu'une fois la carte arrêtée */
.rvs__track{ display:flex; align-items:flex-start; gap:48px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; margin:-8px -24px -40px; padding:8px 24px 40px;
  scroll-padding-inline:24px; transition:height var(--dur) var(--ease); }
.rvs__track::-webkit-scrollbar{ display:none; }
.rvs__track:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-card); }
.rvs__track > .rv{ flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
.rv{ display:flex; flex-direction:column; gap:16px; padding:32px; background:var(--surface); color:var(--text);
  border-radius:var(--r-card); box-shadow:var(--sh-soft); }
.rv__head{ display:flex; align-items:flex-start; gap:12px; }
.rv__av{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; color:var(--bg); background:var(--grad);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-titre); font-weight:700; font-size:1.125rem; }
.rv__who{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0; }
.rv__name{ font-weight:600; font-size:1.0625rem; line-height:1.3; color:var(--text); }
.stars--sm{ --sz:16px; }
.rv__g{ flex:0 0 auto; line-height:0; }   /* le G seul, calé sur le haut de l'en-tête, jamais collé aux étoiles */
.rv__g .g-g{ width:22px; height:22px; }
.rv__txt{ color:var(--text); line-height:1.6; white-space:pre-wrap; }   /* verbatim mot pour mot : espaces d'origine conservés */
/* carte d'avis premium : plus d'air, verbatim un cran plus grand dans la police des titres, bordure complète au dégradé signature */
.rv--xl{ position:relative; padding:48px; gap:24px; border:1.5px solid transparent;   /* épaisseur du contour des boutons */
  background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--grad) border-box; box-shadow:var(--sh-card); }
.rv--xl .rv__av{ width:56px; height:56px; font-size:1.5rem; }
.rv--xl .rv__name{ font-size:1.125rem; }
.rv--xl .stars--sm{ --sz:18px; }
.rv--xl .rv__txt{ font-family:var(--f-titre); font-weight:600; font-size:var(--chapo); line-height:1.6; letter-spacing:-.005em; }
@media (max-width:767px){
  .proof{ gap:48px; }
  .rating__n{ font-size:2.25rem; }
  .rating .stars{ --sz:20px; }
  .rvs__track{ margin-inline:0; padding-inline:0; scroll-padding-inline:0; gap:32px; }   /* aucune marge négative horizontale */
  .rv--xl{ padding:32px 24px; }
  .rv--xl .rv__txt{ font-size:var(--corps); }
  .rv__g .g-g{ width:30px; height:30px; }
}

/* ---------- S7 FAQ : accordéon à filets, une colonne centrée ---------- */
.faq{ max-width:760px; margin-inline:auto; }
.faq__item{ position:relative; }
.faq__item + .faq__item::before{ content:""; position:absolute; top:0; left:16px; right:16px; height:1px; background:var(--filet); }
.faq__h{ font-size:inherit; }
.faq__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; min-height:44px;
  padding:24px 16px; text-align:left; font-family:var(--f-titre); font-weight:600; font-size:1.125rem; line-height:1.4;
  color:var(--text); border-radius:var(--r-btn); transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.faq__q:hover{ color:var(--accent); background:rgba(253,233,218,.6); }
.faq__q .ic{ width:24px; height:24px; margin-top:1px; color:var(--accent); transition:transform var(--dur-faq) var(--ease); }
.faq__item.is-open .faq__q .ic{ transform:rotate(180deg); }
.faq__a{ display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows var(--dur-faq) var(--ease),visibility 0s linear var(--dur-faq); }
.faq__a > div{ overflow:hidden; min-height:0; }
.faq__a p{ color:var(--text-2); padding:0 56px 24px 16px; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-faq) var(--ease),visibility 0s; }
@media (max-width:767px){ .faq__q{ font-size:1.0625rem; padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } .faq__item + .faq__item::before{ left:8px; right:8px; } }

/* ---------- Formulaire de devis en carte : seul (720px) ou avec coordonnées (7 / 5) ---------- */
.fsolo{ max-width:720px; margin-inline:auto; }
.sec-devis .shead.center h2{ max-width:none; }
.cgrid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px; align-items:start; }
.form-body{ display:flex; flex-direction:column; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:500; font-size:1rem; line-height:1.4; color:var(--text); }
.field .opt{ font-weight:400; color:var(--text-2); margin-left:4px; }
.hint{ font-size:var(--caption); line-height:1.5; color:var(--text-2); }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 16px; font:inherit; font-size:1rem; line-height:1.5;
  color:var(--text); background:var(--surface); border:1px solid rgba(38,34,31,.2); border-radius:var(--r-btn); margin:0;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.field textarea{ resize:vertical; min-height:150px; }
.field ::placeholder{ color:#776F67; opacity:1; }   /* gris lisible (4,9:1 sur la carte) */
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(38,34,31,.42); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--accent); outline-offset:3px; border-color:var(--accent); }
.field select{ appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8531A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:20px; }
.field select:invalid{ color:#776F67; }
.sel{ position:relative; }
.sel__ph{ display:none; position:absolute; left:17px; right:44px; top:50%; transform:translateY(-50%); pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#776F67; font-size:1rem; line-height:1.5; }
.sel:has(select:invalid) .sel__ph{ display:block; }
.sel:has(select:invalid) select{ color:transparent; }
.field select option{ color:var(--text); }
.err{ display:none; font-size:var(--caption); font-weight:600; line-height:1.4; color:var(--erreur); }
.field.is-err .err{ display:block; }
.field.is-err input,.field.is-err select,.field.is-err textarea{ border-color:var(--erreur); }
.file{ position:relative; }
.file__input{ position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:0; cursor:pointer; }
.file__zone{ display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:var(--r-btn);
  border:1.5px dashed rgba(38,34,31,.3); background:var(--surface); color:var(--second);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.file__zone .ic{ width:24px; height:24px; }
.file__input:hover + .file__zone{ background:var(--accent-light); border-color:var(--accent); color:var(--accent); }
.file__input:focus-visible + .file__zone{ outline:2px solid var(--accent); outline-offset:3px; }
.field.is-err .file__zone{ border-color:var(--erreur); }
.file.has-file .file__input,.file.has-file .file__zone{ display:none; }
.file__chosen{ display:flex; align-items:center; gap:12px; min-height:48px; padding:2px 2px 2px 16px; border-radius:var(--r-btn);
  border:1px solid rgba(38,34,31,.2); background:var(--surface); }
.file__chosen > .ic{ width:20px; height:20px; color:var(--second); }
.file__name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file__clear{ flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-btn); color:var(--accent); transition:background-color var(--dur) var(--ease); }
.file__clear:hover{ background:var(--accent-light); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form.is-busy .form-send .btn--primary{ opacity:.7; pointer-events:none; }
.form-ko{ font-weight:600; color:var(--erreur); }
.form-foot{ margin-top:16px; font-size:var(--caption); line-height:1.5; color:var(--text-2); }
.form-foot a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.form-foot a:hover{ color:var(--text); }
.form-ok{ padding:24px; border-radius:var(--r-btn); background:var(--accent-light); color:var(--text); font-weight:600; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.icards{ display:flex; flex-direction:column; gap:24px; }
.icard{ padding:32px; }
.icard h3{ margin-bottom:16px; }
.icard__h{ display:flex; align-items:center; gap:12px; }
.icard__h .ic{ width:24px; height:24px; color:var(--second); }
.icard__rows{ display:flex; flex-direction:column; gap:12px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .row .ic{ color:var(--second); margin-top:3px; }   /* icônes nues des listes : repères en gris ardoise */
.icard a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px; overflow-wrap:anywhere; transition:color var(--dur) var(--ease); }
.icard a:hover{ color:var(--accent); }
.hrow{ position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.hrow + .hrow{ padding-top:12px; }
.hrow + .hrow::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--filet); }
.hrow > span:first-child{ white-space:nowrap; font-weight:500; }
.hrow .d{ text-align:right; color:var(--text-2); white-space:nowrap; }
@media (max-width:1023px){ .cgrid{ grid-template-columns:minmax(0,1fr); gap:24px; } }
@media (max-width:767px){
  .card{ padding:32px 24px; }
  .icard{ padding:32px 24px; }
  .form-send{ align-items:stretch; }
  .form-send .btn{ width:100%; }
}

/* ---------- Pages en gabarit ---------- */
.note-solo{ max-width:760px; margin-inline:auto; }

/* ---------- Footer : crème unie, Maps bord à bord, identité en trois colonnes ---------- */
.foot{ background:var(--bg); color:var(--text); font-size:1rem; }
.foot__map{ position:relative; height:360px; background:var(--accent-light); }
.foot__map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.foot__id{ padding-top:48px; }
.foot__grid > *{ min-width:0; }
.foot__logolink{ display:inline-flex; margin-bottom:16px; border-radius:var(--r-btn); transition:opacity var(--dur) var(--ease); }
.foot__logolink:hover{ opacity:.85; }
.foot__name{ font-size:1.375rem; line-height:1.25; letter-spacing:-.01em; color:var(--text); }
.foot__pos{ display:block; font-family:var(--f-texte); font-size:1.0625rem; font-weight:600; letter-spacing:0; color:var(--accent); margin-top:2px; }
.foot__tag{ color:var(--text-2); margin-top:12px; }
.trust--foot{ display:flex; justify-content:flex-start; gap:12px; margin-top:24px; }
.trust--foot .islot{ flex:0 1 96px; width:auto; min-width:0; height:auto; aspect-ratio:2 / 1; background:rgba(255,253,249,.7); border-color:rgba(38,34,31,.28); }
.foot__h{ font-family:var(--f-texte); font-weight:600; font-size:var(--surtitre); line-height:1.4; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.foot__h--legal{ margin-top:32px; }
.foot__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot__links a,.foot__info a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px;
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:4px;
  transition:text-decoration-color var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--accent); text-decoration-color:currentColor; transform:translateX(3px); }
.foot__parent{ color:var(--text); }
.foot__sub{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding-left:16px; }
.foot__info{ display:flex; flex-direction:column; gap:12px; }
.foot__info .row{ display:flex; align-items:flex-start; gap:10px; }
.foot__info .ic{ width:20px; height:20px; margin-top:3px; color:var(--second); }
.foot__sep{ height:1px; background:var(--filet); margin-top:32px; }
.foot__sep--m{ display:none; }
.foot__bar{ display:flex; justify-content:space-between; gap:16px; padding-block:32px; font-size:var(--caption); color:var(--text-2); }
@media (max-width:1023px){ .foot__id{ padding-top:44px; } }
@media (max-width:767px){ .foot__map{ height:280px; } .foot__id{ padding-top:32px; } }
/* Configuration mobile, sous la largeur mesurée où les trois colonnes tiennent avec 64px d'air sur les lettres
   (312 + 179 + 311 + 2 × 64 + marges 2 × 24 + barre de défilement 15 = 993px) : une colonne, tablette comprise */
@media (max-width:993px){
  .foot__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
  .foot__ident{ display:flex; flex-direction:column; align-items:flex-start; }
  .foot__col + .foot__col{ margin-top:32px; }
  .foot__sep--m{ display:block; margin-block:32px 0; }
  .foot__sep--m + .foot__col{ padding-top:32px; }
  /* barre empilée à gauche, chaque élément serré sur son texte : le bouton flottant, à droite, ne la recouvre pas */
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
/* trois colonnes serrées sur leur texte, même air entre elles ; tagline sur ses deux lignes choisies */
@media (min-width:994px){
  .foot__grid{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:space-between; column-gap:64px; }
  .foot__col{ padding-top:calc(var(--logo-h) + 16px); }   /* première ligne au niveau du nom, pas du logo */
  .foot__tag > span{ display:block; }
}
/* barre du bas en ligne avec le bouton d'appel flottant (sous 1024px) : réserve dessous pour qu'il ne la recouvre jamais */
@media (min-width:994px) and (max-width:1023px){ .foot__bar{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); } }
/* ordinateur : le footer prend la largeur du header, gouttière minimale 48px */
@media (min-width:1024px){ .foot > .container{ max-width:var(--container-header); } .foot__grid{ column-gap:48px; } }

/* ---------- Bouton d'appel flottant (secteur bâtiment) : sous 1024px seulement ---------- */
.fcall{ display:none; }
@media (max-width:1023px){
  .fcall{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:60; width:56px; height:56px;
    border-radius:50%; background:var(--accent); color:var(--bg); display:flex; align-items:center; justify-content:center;
    /* ombre du site, plus un anneau crème de 2px : sans lui, le rond orange se perd sur l'aplat de L'entreprise */
    box-shadow:0 0 0 2px rgba(250,247,243,.9),0 1px 2px rgba(90,58,34,.12),0 8px 24px rgba(90,58,34,.12),0 16px 40px rgba(90,58,34,.07);
    transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease); }
  .fcall .ic{ width:24px; height:24px; }
  .fcall:hover{ filter:brightness(1.1); transform:translateY(-2px); }
  .fcall:active{ transform:scale(.94); }
  .hdr.is-open ~ .fcall{ opacity:0; visibility:hidden; pointer-events:none; }
  .fcall.is-off{ opacity:0; visibility:hidden; pointer-events:none; }
  .fcall::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--accent);
    animation:fb-halo 2.4s var(--ease) infinite; pointer-events:none; }
}
@keyframes fb-halo{ 0%{ transform:scale(1); opacity:.35; } 80%{ transform:scale(1.4); opacity:0; } 100%{ transform:scale(1.4); opacity:0; } }

/* ---------- Compteur à molettes : chaque chiffre entier est une fenêtre (clip-path) où glisse une bande 0 à 9 ;
   le chiffre final, invisible, donne la taille : rien ne bouge autour. Étoiles : grisées dessous, l'or découvert dessus ---------- */
[data-odo]{ font-variant-numeric:tabular-nums lining-nums; }
.odo__w{ position:relative; display:inline-block; clip-path:inset(0); }
.odo__g{ visibility:hidden; }
.odo__s{ position:absolute; left:0; top:0; width:100%; }
.odo__s > span{ display:block; text-align:center; }
.ostar{ position:relative; display:inline-flex; }
.ostar__b{ fill:rgba(38,34,31,.2) !important; }   /* couleur du texte de leur contexte à 20 % (fond clair) */
.ostar__f{ position:absolute; inset:0; clip-path:inset(0 100% 0 0); transition:clip-path 150ms var(--ease); }
.ostar.is-on .ostar__f{ clip-path:inset(0); }
.ostar.is-now .ostar__f{ transition:none; }

/* ==========================================================================
   Effets : Phase finale
   ========================================================================== */
/* état masqué posé sans transition ; les transitions ne s'allument qu'après (fx-on) */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(16px); }
html.fx-on [data-reveal]{ transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease); }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }
.hero--pin{ position:sticky; top:0; z-index:0; }
.page-flow{ position:relative; z-index:2; background:var(--bg); }
.is-home .hero--pin + .page-flow{ box-shadow:0 -10px 28px rgba(90,58,34,.08),0 -1px 2px rgba(90,58,34,.05); }   /* le rideau se lit en remontant sur le hero */

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scroll-ind__line::after{ animation:none !important; transform:translateY(75%); }   /* la lueur figée au milieu de la ligne */
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  .tk.run{ animation:none !important; }
  html.js-ready [data-reveal]{ opacity:1 !important; transform:none !important; }
  .annonce__in{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .annonce .tk > .annonce__set[aria-hidden]{ display:none !important; }
  @media (max-width:1039px){ .annonce__set{ padding-inline:var(--pad); } }
  .fcall::before{ display:none; }
  .tile__clip .ph,.rcard__img .ph{ transform:none !important; }
}