/* ==========================================================================
   N.F.J Plomberie Chauffage : site.css (Nicolam Studio)
   Vert sapin, vert pomme et blanc cassé (décision de Nicolas, 12/10/2026 : plus d'orange sur le site, boutons pleins en vert pomme).
   Aucune bibliothèque CSS chargée : tout le style du site vit dans cette feuille.
   ========================================================================== */

/* ---------- Polices hébergées sur le site (aucun appel à Google Fonts) : EB Garamond 600/700, Work Sans 400/500/600, latin ---------- */
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/eb-garamond-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"EB Garamond"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/eb-garamond-700-latin.woff2") format("woff2"); }
@font-face{ font-family:"Work Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/work-sans-400-latin.woff2") format("woff2"); }
@font-face{ font-family:"Work Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/work-sans-500-latin.woff2") format("woff2"); }
@font-face{ font-family:"Work Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/work-sans-600-latin.woff2") format("woff2"); }

/* ---------- Tokens (Invariants du prompt) ---------- */
:root{
  /* Couleurs — deux teintes par couleur */
  --bg:#F7F7F1;            /* fond, blanc cassé, jamais blanc pur ; footer uni */
  --sapin:#1B7A3A;         /* principale soutenue : texte d'accent, sur-titres, chiffres, ghost, aplat de contraste (5,02:1) */
  --sapin-light:#EEF6E0;   /* principale claire : fonds de sections, fonds de cartes, placeholders */
  --pomme:#8CC63F;         /* vert pomme du logo : dégradé signature et barre d'annonce. JAMAIS en texte sur le fond */
  --on-pomme:#13301C;      /* texte sur le vert pomme (7,0:1) */
  --ink:#1A2A1F;           /* texte, quasi-noir vert (14,0:1) */
  --ink-2:#55635A;         /* texte secondaire (5,88:1, AA) */
  --gold:#F2B01E;          /* jaune Google : note et étoiles UNIQUEMENT, le même partout */
  --error:#B42318;
  --grad:linear-gradient(135deg,#8CC63F,#1B7A3A);   /* dégradé signature pomme → sapin, composants uniquement, jamais inversé */
  --fond-section:linear-gradient(180deg,#F7F7F1,#EEF6E0);
  --hairline:rgba(26,42,31,.14);
  --card:#FCFCF8;          /* surface des tuiles, cartes et formulaires posés sur les sections (fond distinct du fond de section) */
  --on-acc:#F7F7F1;        /* texte clair sur l'aplat sapin (5,02:1) */
  /* Notes de maquette : Note = carmin + info */
  --note-ink:#9E1F42; --note-txt:#7A2038; --note-bg:rgba(158,31,66,.06); --note-bd:rgba(158,31,66,.32);
  /* Espacements (échelle unique) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Rayons (coins doux, choisis une fois pour tout le site) */
  --r-btn:10px; --r-card:16px; --r-pill:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --form-max:720px; --faq-max:760px; --pad:24px;
  /* Barre d'annonce + header */
  --ann-h:40px; --hdr-h:84px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  /* Typographie */
  --f-title:'EB Garamond',Georgia,serif;
  --f-body:'Work Sans',system-ui,sans-serif;
  --fs-h1:clamp(2.25rem,1.5rem + 3vw,3.75rem);
  --fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.625rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);
  --fs-h4:1.0625rem;
  --fs-lead:clamp(1.125rem,1.05rem + .3vw,1.1875rem);
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);
  --fs-caption:.875rem; --fs-over:.8125rem;
  /* Ombre (une seule pour tout le site, teinte vert sapin #13301C, niveau présent ; boutons à part) */
  --sh-card:0 2px 4px rgba(19,48,28,.06),0 8px 24px rgba(19,48,28,.11),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(19,48,28,.06),0 4px 12px rgba(19,48,28,.09);
  /* Mouvement : ease-in-out partout ; .6s pour les états, .9s pour l'apparition au scroll (0,4 s est le minimum, pas la cible) */
  --ease:ease-in-out; --dur:.6s; --dur-in:.9s;
  /* Tickers : exactement les mêmes réglages pour les trois */
  --tk-lead:48px; --tk-gap:24px; --tk-fade:24px;
}
@media (max-width:1023px){ :root{ --hdr-h:72px; } }
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --hdr-h:64px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h) + 24px); }
body{ margin:0; background:var(--bg); color:var(--ink); overflow-x:clip; font-family:var(--f-body);
  font-size:var(--fs-body); 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; }
p{ text-wrap:pretty; }
[hidden]{ display:none !important; }
::selection{ background:var(--sapin); color:#F7F7F1; }
:focus-visible{ outline:2px solid var(--sapin); 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; }

/* Titre aligné à gauche : pretty ; balance seulement sur un titre centré */
h1,h2,h3,h4{ font-family:var(--f-title); color:var(--ink); text-wrap:pretty; font-feature-settings:"lnum" 1; }
.center h2,.hero h1,.phero h1{ text-wrap:balance; }
h1{ font-weight:700; font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.015em; }
h2{ font-weight:600; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.015em; }
h3{ font-weight:600; font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.01em; }
h4{ font-weight:600; font-size:var(--fs-h4); line-height:1.3; }
/* le nom de l'entreprise dans le H1 : dégradé signature horizontal, pomme → sapin, jamais inversé */
.h1-name{ background:linear-gradient(90deg,#8CC63F,#1B7A3A); -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-block:.1em; }
.eyebrow{ display:inline-block; font-family:var(--f-body); font-weight:600; font-size:var(--fs-over); line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--sapin); }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); }

/* ---------- 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{ position:relative; z-index:1; }
.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; } }
/* flux des fonds : A = #F7F7F1, B = #EEF6E0 (attribué par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#F7F7F1,#EEF6E0); }
.bg-ba{ background:linear-gradient(180deg,#EEF6E0,#F7F7F1); }
.bg-aba{ background:linear-gradient(180deg,#F7F7F1,#EEF6E0 50%,#F7F7F1); }
.bg-bab{ background:linear-gradient(180deg,#EEF6E0,#F7F7F1 50%,#EEF6E0); }

.shead{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-bottom:48px; }
.shead.center{ align-items:center; text-align:center; }
.shead.center .lead{ max-width:70ch; margin-inline:auto; }
@media (max-width:767px){ .shead{ margin-bottom:32px; } }

/* ---------- Icônes ---------- */
.ic{ width:20px; height:20px; flex:0 0 auto; }
.kic{ width:44px; height:44px; flex:0 0 auto; }

/* ---------- Boutons : trois niveaux, coins doux 10px, icône à droite ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px;
  border-radius:var(--r-btn); border:1.5px solid transparent; white-space:nowrap; font-family:var(--f-body);
  font-weight:600; 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:18px; height:18px; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--primary{ background:var(--pomme); color:var(--on-pomme); box-shadow:0 6px 16px rgba(19,48,28,.24); }   /* bouton plein vert pomme, texte #13301C (7,0:1) */
.btn--primary:hover{ filter:brightness(.95); box-shadow:0 10px 22px rgba(19,48,28,.28); }
.sec-contrast .btn--primary{ background:#F7F7F1; color:var(--sapin); }   /* sur l'aplat de la section 5, le primaire s'inverse */
.btn--primary:active{ filter:brightness(.9); }
.btn--primary.on-img{ box-shadow:0 8px 22px rgba(10,20,14,.4); }
.btn--ghost{ color:var(--sapin); border-color:var(--sapin); background:transparent; }
.btn--ghost:hover{ background:rgba(27,122,58,.08); }
.btn--ghost:active{ background:rgba(27,122,58,.14); }
.btn--ghost.on-img{ color:#F7F7F1; border-color:rgba(247,247,241,.85); background:rgba(26,42,31,.18); }
.btn--ghost.on-img:hover{ background:rgba(247,247,241,.16); }
.btn--text{ color:var(--sapin); padding-inline:22px; border-color:transparent; }   /* même retrait que le texte d'un ghost : les deux libellés s'alignent */
.btn--text:hover{ background:rgba(27,122,58,.08); }
.hero :focus-visible{ outline-color:#F7F7F1; }

/* ---------- Barre d'annonce : dégradé vertical de vert pomme, opaque, texte #13301C ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,#9DD155 0%,#8CC63F 55%,#81BA36 100%); color:var(--on-pomme); }
.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:var(--tk-gap); flex:0 0 auto; }
.annonce li{ display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:600; line-height:1; white-space:nowrap; }
.annonce li .ic{ width:16px; height:16px; }
.annonce li.sep{ opacity:.75; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:1099px){   /* bascule mesurée (voir site.js BP_ANN) : 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); }
  /* au raccord, le point médian saute : c'est le vide de lecture qui sépare la boucle */
}

/* ---------- Ticker (mécanique commune aux trois) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk--rev.run{ animation-name:tk-rev; }
.tk.paused{ animation-play-state:paused; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tk-rev{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
.tk__set{ display:flex; gap:var(--tk-gap); padding-left:var(--tk-lead); flex:0 0 auto; }
.tk-mask{ -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); }

/* ---------- Header : verre blanc cassé 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(247,247,241,.94),rgba(247,247,241,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 2px rgba(19,48,28,.07),0 8px 22px rgba(19,48,28,.09); }
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity .4s 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:50%; transition:opacity var(--dur) var(--ease); }
.hdr__logo:hover{ opacity:.85; }
.hdr__img{ width:64px; height:64px; }
.nav{ display:flex; align-items:center; gap:4px; 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 14px; border-radius:var(--r-btn); font-weight:600; font-size:1rem; color:var(--ink);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ background:rgba(27,122,58,.08); color:var(--sapin); }
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--sapin); }
.nav__link .ic{ width:16px; height:16px; 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(100% + 18px); left:50%; min-width:420px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:var(--bg); 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:-20px; height:20px; }
.nav__has:hover .submenu,.nav__has:focus-within .submenu,.submenu.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:flex; align-items:center; gap:12px; padding:8px 14px 8px 8px; border-radius:var(--r-btn); color:var(--ink);
  transition:background-color var(--dur) var(--ease); }
.submenu a:hover,.submenu a[aria-current]{ background:rgba(140,198,63,.16); }
.submenu__txt{ display:block; min-width:0; }
.submenu__t{ display:block; font-weight:600; font-size:1rem; line-height:1.3; white-space:nowrap; }
.submenu__d{ display:block; font-size:var(--fs-caption); line-height:1.4; color:var(--ink-2); white-space:nowrap; }
/* icône clé dans la MÊME pastille que le bento (.tile__chip), à l'échelle du menu : 40 / 22px ; voile de la couleur texte pour que le trait clair se lise côté pomme */
.kchip{ flex:0 0 auto; width:40px; height:40px; border-radius:9px; background:linear-gradient(rgba(26,42,31,.22),rgba(26,42,31,.22)),var(--grad);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(19,48,28,.16),0 4px 10px rgba(27,122,58,.22),inset 0 1px 0 rgba(255,252,247,.3); }
.kchip .kic{ width:22px; height:22px; color:#F7F7F1; }
.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(26,42,31,.22); align-items:center; justify-content:center; color:var(--ink);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.burger:hover{ background:rgba(27,122,58,.08); border-color:var(--sapin); }
.burger .ic{ width:22px; height:22px; }
.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:1023px){ .hdr__img{ width:56px; height:56px; } }
@media (max-width:767px){ .hdr__img{ width:52px; height:52px; } }
@media (max-width:899px){   /* bascule burger mesurée sur le contenu réel (voir site.js BP_NAV) */
  .nav,.hdr__cta{ display:none; }
  .burger{ display:inline-flex; }
  .hdr__panel{ display:block; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--bg);
    box-shadow:0 12px 24px rgba(19,48,28,.12); max-height:0; overflow:hidden; visibility:hidden; opacity:0;
    transition:max-height .5s var(--ease),opacity .4s var(--ease),visibility .5s var(--ease); }
  .hdr.is-open .hdr__panel{ max-height:calc(100svh - var(--stack-h)); overflow-y:auto; visibility:visible; opacity:1; }
  .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:600; font-size:1.0625rem; color:var(--ink); 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:rgba(140,198,63,.16); color:var(--sapin); }
  .hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ color:var(--sapin); }
  .macc__btn{ width:100%; justify-content:space-between; }
  .macc__btn .ic{ width:18px; height:18px; transition:transform var(--dur) 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) var(--ease),visibility var(--dur) var(--ease); }
  .macc.is-open .macc__panel{ grid-template-rows:1fr; visibility:visible; }
  .macc__in{ overflow:hidden; min-height:0; display:flex; flex-direction:column; }
  .hdr__panel .macc__in a:not(.btn){ display:flex; align-items:center; gap:12px; height:48px; min-height:48px; padding:0 8px 0 20px; font-weight:600; }
  .hdr__panel .kchip{ width:36px; height:36px; border-radius:8px; }
  .hdr__panel .kchip .kic{ width:20px; height:20px; }
  .hdr__panel .btn{ margin-top:16px; align-self:stretch; }
}

/* ---------- Hero d'accueil plein écran sur image ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:calc(100svh - var(--stack-h)); padding:96px var(--pad); color:#F7F7F1; }
.hero__media{ position:absolute; inset:0; z-index:-3; background:#1A2A1F; }   /* tant que les images IA ne sont pas validées : fond sombre uni sous le même voile */
.hero__media picture{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos,50% 50%); }
@media (orientation:portrait){ .hero--nomobile .hero__media picture{ display:none; } }   /* hero-mobile pas encore validée : fond sombre provisoire en portrait */
/* voile fort, ancré au centre (texte centré), + signature visuelle (voile sapin soft-light 12 %, grain 4 %) */
.hero__veil{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(72% 64% at 50% 50%,rgba(12,22,16,.8),rgba(12,22,16,.6) 70%,rgba(12,22,16,.48)),
             linear-gradient(180deg,rgba(12,22,16,.18) 0%,rgba(12,22,16,.42) 100%); }
.hero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero h1{ position:relative; color:#F7F7F1; text-shadow:0 2px 24px rgba(10,20,14,.35); }
/* l'image est adoucie localement derrière le H1 : un voile doux, large, centré sur le titre, qui se fond dans le voile du hero ;
   la fin vert sapin du nom garde 3:1 sur les vrais pixels (le dégradé ne change pas) */
.hero--photo h1::before{ content:""; position:absolute; left:50%; top:50%; width:min(1100px,120%); height:340%; transform:translate(-50%,-50%);
  z-index:-1; pointer-events:none; background:radial-gradient(closest-side,rgba(8,15,11,.8) 34%,rgba(8,15,11,.48) 64%,rgba(8,15,11,0)); }
.hero .h1-name{ text-shadow:none; filter:drop-shadow(0 2px 14px rgba(10,20,14,.3)); }
.hero__tag{ font-size:var(--fs-lead); line-height:1.55; color:rgba(247,247,241,.96); text-shadow:0 1px 14px rgba(10,20,14,.45); text-wrap:balance; }
.hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:8px; }
/* sans image : placeholder clair comme tous ceux du site (radial vert clair, logo en filigrane, légende en pastille), texte foncé */
.hero--ph{ color:var(--ink); }
.hero__media--ph{ background:radial-gradient(80% 85% at 50% 50%,#F7F7F1 0%,#F7F7F1 30%,#EEF6E0 100%); }
.hero__media--ph::before{ content:""; position:absolute; inset:0; opacity:.08;
  background:url("/assets/img/logo-motif.webp") no-repeat center / min(52%,520px) auto; }
.hero__media--ph .ph__cap{ left:var(--pad); bottom:24px; max-width:calc(100% - 2 * var(--pad)); }
.hero--ph h1{ color:var(--ink); text-shadow:none; }
.hero--ph .h1-name{ filter:none; }
.hero--ph .hero__tag{ color:var(--ink-2); text-shadow:none; }
.hero--ph :focus-visible{ outline-color:var(--sapin); }
.hero--ph .gpill{ background:rgba(252,252,248,.6); border-color:rgba(26,42,31,.12); box-shadow:var(--sh-soft); }
/* Pastille Google : version foncée (verre) sur l'image ; une seule ligne, s'arrête aux étoiles */
.gpill{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:var(--r-pill);
  background:rgba(26,42,31,.36); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(247,247,241,.24); white-space:nowrap; }
.gpill .g-g{ width:20px; height:20px; flex:0 0 auto; }
.gpill__n{ font-family:var(--f-body); font-weight:600; font-size:1rem; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
.stars{ display:inline-flex; align-items:center; gap:2px; color:var(--gold); }
.star{ width:18px; height:18px; fill:currentColor; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }
.gpill .star{ width:16px; height:16px; }
@media (max-width:767px){
  .hero{ padding-block:64px; }
  .gpill{ padding:6px 12px 6px 10px; gap:8px; }
  .gpill .g-g{ width:16px; height:16px; }
  .gpill__n{ font-size:.875rem; }
  .gpill .star{ width:13px; height:13px; }
}
@media (max-width:479px){ .hero__cta{ flex-direction:column; align-self:stretch; } .hero__cta .btn{ width:100%; } }
@supports (height:100lvh){
  .hero{ min-height:calc(100lvh - var(--stack-h)); padding-bottom:calc(96px + 100lvh - 100svh); }
  @media (max-width:767px){ .hero{ padding-bottom:calc(64px + 100lvh - 100svh); } }
}

/* ---------- Signature visuelle des images : voile de marque (soft-light) + grain fixe (overlay), au-dessus de l'image ---------- */
.img-sign::before,.img-sign::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.img-sign::before{ background:#1B7A3A; mix-blend-mode:soft-light; opacity:.07; }
.img-sign::after{ mix-blend-mode:overlay; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.img-sign--text::before{ opacity:.12; }   /* heros : voile 12 %, grain 4 % (valeur du secteur) */

/* ---------- Hero de page : radial clair + motif logo, H1 + tagline seuls ---------- */
.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(75% 95% at 50% 50%,#F7F7F1 0%,#F7F7F1 26%,#EEF6E0 100%); }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.07;
  background:url("/assets/img/logo-motif.webp") no-repeat center / min(40%,400px) auto; }
.phero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:16px; }
.phero h1{ font-size:clamp(1.875rem,1.25rem + 2.4vw,3.25rem); line-height:1.1; }
.phero__tag{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:70ch; }
@media (max-width:767px){ .phero{ padding-block:64px; min-height:300px; } .phero::before{ background-size:min(72%,280px) auto; } }

/* ---------- Placeholder image : logo du client, radial vert clair, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(80% 80% at 50% 48%,#F7F7F1 0%,#EEF6E0 100%); }
.ph::before{ content:""; position:absolute; inset:0; opacity:.16;
  background:url("/assets/img/logo-motif.webp") no-repeat center 46% / min(48%,200px) 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:12px; background:rgba(247,247,241,.94); color:var(--ink-2);
  font-size:var(--fs-caption); line-height:1.4; box-shadow:var(--sh-soft); }

/* ---------- Notes de maquette ---------- */
.note-wrap{ margin-top:48px; }
.note-wrap.is-center .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;
  background:linear-gradient(var(--note-bg),var(--note-bg)),var(--bg); border-color:var(--note-bd); color:var(--note-ink); }   /* teinte carmin posée sur le blanc cassé : elle ne verdit pas sur les fonds de section */
.mnote .ic{ width:22px; height:22px; margin-top:1px; }
.mnote__label{ display:block; font-weight:600; font-size:var(--fs-over); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; color:var(--note-txt); }
.sec-note .mnote{ margin-inline:auto; max-width:760px; }
/* section de contraste : la note reste SOUS la carte, en texte clair sur l'aplat */
.sec-contrast .mnote{ background:rgba(247,247,241,.08); border-color:rgba(247,247,241,.45); color:#F7F7F1; }
.sec-contrast .mnote p{ color:#F7F7F1; }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } .mnote{ padding:16px; gap:12px; } }

/* ---------- S2 Prestations : bento asymétrique, 10 colonnes (4 + 3 + 3), Petits travaux en bandeau ---------- */
.sec-prest .container{ container-type:inline-size; }
.bento{ display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:24px;
  --tile-img:calc(((100cqw - 216px) * .3 + 48px) / 1.5); }   /* hauteur d'image = largeur de la petite tuile ÷ 1,5 (ratio 3/2) */
.t-dom{ grid-column:span 4; }
.t-sm{ grid-column:span 3; }
.t-band{ grid-column:1 / -1; }
.tile{ display:flex; flex-direction:column; border-radius:var(--r-card); background:var(--card);
  box-shadow:var(--sh-card); color:var(--ink); 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); }
.tile__img .ph__cap{ top:12px; bottom:auto; }   /* légende en haut à gauche : la pastille occupe le bas à gauche */
.tile__chip{ position:absolute; left:32px; bottom:-28px; z-index:1; width:56px; height:56px; border-radius:12px;
  background:linear-gradient(rgba(26,42,31,.22),rgba(26,42,31,.22)),var(--grad);   /* voile de la couleur texte : le trait clair se lit aussi côté pomme */
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(19,48,28,.14),0 6px 14px rgba(27,122,58,.26),inset 0 1px 0 rgba(255,252,247,.3); }
.tile__chip .kic{ width:32px; height:32px; color:#F7F7F1; }
.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(--ink-2); }
.tile__more{ display:inline-flex; align-items:center; gap:8px; align-self:flex-end; margin-top:auto; padding-top:20px; font-weight:600; color:var(--sapin); }
.tile__more .ic{ width:18px; height:18px; transition:transform var(--dur) var(--ease); }
.tile:hover .tile__more .ic,.tile:focus-visible .tile__more .ic{ transform:translateX(4px); }
@media (min-width:1024px){
  /* bandeau : image à gauche (largeur exacte de la tuile Plomberie, juste au-dessus), texte à droite, pastille à cheval sur la jonction */
  .tile.t-band{ flex-direction:row; }
  .t-band .tile__img{ flex:0 0 calc((100cqw - 216px) * .4 + 72px); height:auto; min-height:var(--tile-img); }
  .t-band .tile__clip{ border-radius:var(--r-card) 0 0 var(--r-card); }
  .t-band .tile__chip{ left:auto; right:-28px; bottom:auto; top:calc(32px + var(--fs-h3) * .625 - 28px); }   /* centrée sur la ligne du titre */
  .t-band .tile__body{ padding:32px 32px 32px 64px; }
}
@media (max-width:1023px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); --tile-img:calc((100cqw - 24px) / 2 / 1.5); }
  .t-dom,.t-band{ grid-column:1 / -1; }
  .t-sm{ grid-column:auto; }
}
@media (max-width:767px){
  .bento{ grid-template-columns:1fr; --tile-img:calc(100cqw / 1.5); }
  .t-dom,.t-sm,.t-band{ grid-column:auto; }
  .tile__body{ padding:48px 24px 24px; }
  .tile__chip{ left:24px; }
}

/* ---------- S3 Réalisations : ticker d'ambiance de cartes projet portrait ---------- */
.rtk{ overflow:hidden; padding-block:14px 36px; margin-top:-14px; }
.rtk .tk{ width:max-content; }
.rcard{ flex:0 0 auto; width:280px; display:flex; flex-direction:column; background:var(--card); color:var(--ink);
  border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.rcard__img{ position:relative; overflow:hidden; }
.rcard__img::before{ content:""; display:block; padding-top:133.333%; }   /* portrait 3:4 */
.rcard__img .ph{ position:absolute; inset:0; transition:transform 1.2s var(--ease); }
.rcard:hover .rcard__img .ph{ transform:scale(1.04); }
.rcard__body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:16px 20px 20px; }
.rcard__cat{ font-weight:600; font-size:var(--fs-over); line-height:1.4; letter-spacing:.1em; text-transform:uppercase; color:var(--sapin); }
.rcard__t{ font-size:1.25rem; line-height:1.25; min-height:2.5em; }   /* deux lignes réservées ; la commune reste calée en bas de toutes les cartes */
.rcard__loc{ margin-top:auto; display:flex; align-items:center; gap:6px; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.rcard__loc .ic{ width:14px; height:14px; }
.is-ph{ font-style:italic; }
h3.is-ph{ color:var(--ink-2); }
.after-tk{ display:flex; justify-content:flex-start; margin-top:12px; }   /* 36px de padding du ticker + 12px = 48px */
@media (max-width:1023px){ .rcard{ width:260px; } }
@media (max-width:767px){ .rcard{ width:240px; } .rcard__body{ padding:16px; } .after-tk{ margin-top:0; } }

/* ---------- S4 Garanties : items à icône (grille) + bandeau de confiance en emplacements réservés ---------- */
.egrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; }
.eitem{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; }   /* format grille : icône, titre et texte centrés (Nicolas, 12/10) */
.eitem > .ic{ width:40px; height:40px; color:var(--sapin); }
.eitem__txt{ display:flex; flex-direction:column; gap:8px; }
.eitem__txt p{ color:var(--ink-2); }
.trust{ display:flex; justify-content:center; gap:48px; margin-top:64px; }
.trust__slot{ flex:0 0 auto; width:160px; height:96px; border-radius:var(--r-btn); border:1.5px dashed rgba(26,42,31,.28); background:rgba(247,247,241,.5); }
@media (max-width:1023px){ .egrid{ gap:32px; } }
@media (max-width:767px){
  .egrid{ grid-template-columns:1fr; gap:24px; }
  .eitem{ flex-direction:row; align-items:flex-start; text-align:left; gap:16px; }   /* mobile : format rangée */
  .eitem > .ic{ width:32px; height:32px; }
  .trust{ gap:16px; margin-top:48px; }
  .trust__slot{ width:calc((100% - 32px) / 3); height:auto; aspect-ratio:5 / 3; }
}

/* ---------- S5 Présentation et zone : aplat sapin, une seule carte 2 × 2 ---------- */
.sec-contrast{ background:var(--sapin); color:var(--on-acc); }
.sec-contrast::before{ opacity:.03; }   /* grain un cran plus discret */
.card{ background:var(--card); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }
.who.card{ background:var(--bg); }
/* une seule carte en 2 × 2 : présentation (texte puis bande de stats) | portrait, puis carte | villes.
   La bande de stats est un bloc à part de la colonne de présentation : en tablette elle prend toute la largeur de la carte (trois cellules tiennent). */
.who{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"bio photo" "stats photo" "map cities";
  column-gap:48px; align-items:center; }
.who__bio{ grid-area:bio; align-self:end; }
.who__stats{ grid-area:stats; align-self:start; margin-top:32px; }
.who__photo{ grid-area:photo; }
.who__map{ grid-area:map; margin-top:48px; }
.who__cities{ grid-area:cities; margin-top:48px; }
.who__bio h2{ margin-top:16px; }
.who__p{ display:flex; flex-direction:column; gap:16px; margin-top:24px; }
.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%; }   /* 4/5 */
.who__pclip .ph{ position:absolute; inset:0; }
.who__h{ font-size:var(--fs-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(--ink); }
.crow .ic{ width:20px; height:20px; color:var(--sapin); }
.crow + .crow::before{ content:""; position:absolute; top:0; left:32px; right:0; height:1px; background:var(--hairline); }   /* filet inséré à l'aplomb du nom */
/* bande de stats nue, sous les paragraphes */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
.stat__n{ font-family:var(--f-body); font-weight:600; font-size:clamp(2.5rem,1.9rem + 2.2vw,3.5rem); line-height:1; letter-spacing:-.02em;
  color:var(--sapin); font-variant-numeric:tabular-nums lining-nums; }
.stat__l{ font-weight:500; font-size:1rem; line-height:1.4; color:var(--ink-2); white-space:nowrap; }
.who + .note-wrap{ margin-top:48px; }
@media (max-width:1023px){
  .who{ column-gap:32px; grid-template-areas:"bio photo" "stats stats" "map cities"; }
  .who__bio{ align-self:center; }
  .who__map,.who__cities{ margin-top:32px; }
}
@media (max-width:767px){
  .who.card{ padding:32px 24px; }
  .who{ grid-template-columns:minmax(0,1fr); grid-template-areas:"photo" "bio" "stats" "map" "cities"; }
  .who__bio{ margin-top:32px; }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  .stat:last-child{ grid-column:1 / -1; }
}
/* carte de localisation : vrais contours, terre découpée par le trait de côte, frontières intérieures seulement, étiquettes en HTML */
.zmap{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); background:#DCEBC8; container-type:inline-size; }
.zmap::before{ content:""; display:block; padding-top:83.3%; }   /* cadre du viewBox (1000 × 833) */
.zmap svg{ position:absolute; inset:0; width:100%; height:100%; }
/* mer : teinte appuyée de la principale + hachures fines, distincte de la terre d'un coup d'œil */
.zmap .sea{ fill:#DCEBC8; }
.zmap .land{ fill:#FCFCF8; }
.zmap .dep-l{ fill:none; stroke:rgba(26,42,31,.2); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .coast{ fill:none; stroke:rgba(27,122,58,.45); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .hatch{ stroke:rgba(27,122,58,.2); stroke-width:1.6; }
.mpt{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:1; font-size:clamp(12px,3.4cqw,.9375rem); }
.mpt--main{ z-index:2; }
.mpt i{ position:absolute; left:-.3077em; top:-.3077em; width:.6154em; height:.6154em; border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 .2308em rgba(252,252,248,.95); }
.mpt .pin{ position:absolute; width:2.7692em; height:2.7692em; left:-1.3846em; top:-2.5385em; fill:var(--sapin); stroke:#F7F7F1; stroke-width:1.5;
  filter:drop-shadow(0 3px 5px rgba(19,48,28,.3)); }
.mpt .pin circle{ fill:#F7F7F1; stroke:none; }
.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(--ink); background:rgba(252,252,248,.96); box-shadow:var(--sh-soft); }
.mpt--main .lbl{ font-size:1.0769em; font-weight:600; color:var(--sapin); padding:.4286em .7143em; }
.lbl[data-d="top"]{ left:0; bottom:2.35em; transform:translateX(-50%); }
.lbl[data-d="right"]{ left:.9231em; top:0; transform:translateY(-50%); }
.lbl[data-d="left"]{ right:.9231em; top:0; transform:translateY(-50%); }
.lbl[data-d="below"]{ left:0; top:.9231em; transform:translateX(-50%); }
.lbl[data-d="above"]{ left:0; bottom:.9231em; transform:translateX(-50%); }
@media (max-width:767px){
  .zmap::before{ padding-top:100%; }   /* carré, SVG recadré au centre (xMidYMid slice) */
  .mpt{ left:var(--xm); top:var(--ym); font-size:clamp(12px,3.9cqw,.875rem); }
  .lbl[data-d]{ left:auto; right:auto; top:auto; bottom:auto; transform:none; }
  .lbl[data-m="top"]{ left:0; bottom:2.35em; transform:translateX(-50%); }
  .lbl[data-m="right"]{ left:.8333em; top:0; transform:translateY(-50%); }
  .lbl[data-m="left"]{ right:.8333em; top:0; transform:translateY(-50%); }
  .lbl[data-m="below"]{ left:0; top:.8333em; transform:translateX(-50%); }
  .lbl[data-m="above"]{ left:0; bottom:.8333em; transform:translateX(-50%); }
}

/* ---------- S6 Avis : bloc note + ticker deux rangées en sens inverse ---------- */
.rating{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:8px; }
.rating__l1{ display:flex; align-items:center; gap:12px; }
.rating__n{ font-family:var(--f-body); font-weight:600; font-size:2.75rem; line-height:1; letter-spacing:-.02em;
  color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
.rating .star{ width:24px; height:24px; }
.rating__l2{ display:flex; align-items:center; gap:10px; }
.rating__c{ font-weight:600; font-size:1.0625rem; color:var(--ink); }
.g-word{ height:24px; width:auto; }
.atk{ overflow:hidden; display:flex; flex-direction:column; gap:10px; padding-block:14px 36px; margin-top:-14px; }
.atk .tk{ width:max-content; }
/* carte d'avis : largeur ET hauteur fixes (calées sur Natacha, le plus long), verbatim toujours entier */
.rv{ flex:0 0 auto; width:360px; height:var(--rv-h,300px); display:flex; flex-direction:column; gap:14px; padding:24px;
  background:var(--card); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.rv__head{ display:flex; align-items:flex-start; gap:12px; }
.rv__av{ width:44px; height:44px; flex:0 0 auto; border-radius:50%; background:var(--grad); color:#F7F7F1;
  display:flex; align-items:center; justify-content:center; font-family:var(--f-body); font-weight:600; 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:1rem; line-height:22px; }
.stars--sm .star{ width:15px; height:15px; }
.rv__g{ flex:0 0 auto; margin-top:2px; line-height:0; }
.rv__g .g-g{ width:20px; height:20px; }
.rv__txt{ color:var(--ink); font-size:1rem; line-height:1.55; }
.rv-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:12px; }
@media (max-width:1023px){ .rv{ width:340px; } }
@media (max-width:767px){
  .rating__n{ font-size:2.25rem; }
  .rating .star{ width:20px; height:20px; }
  .rv{ width:300px; padding:20px; }
  .rv-cta{ flex-direction:column; align-items:flex-start; margin-top:0; }
}

/* ---------- S7 FAQ : accordéon à filets ---------- */
.faq{ max-width:var(--faq-max); 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(--hairline); }
.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-title); font-weight:600; font-size:1.375rem; line-height:1.3;
  color:var(--ink); border-radius:var(--r-btn); transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.faq__q:hover{ color:var(--sapin); background:rgba(140,198,63,.12); }
.faq__q .ic{ width:22px; height:22px; margin-top:3px; color:var(--sapin); transition:transform var(--dur) 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) var(--ease),visibility var(--dur) var(--ease); }
.faq__a > div{ overflow:hidden; min-height:0; }
.faq__a p{ color:var(--ink-2); padding:0 16px 24px; max-width:66ch; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; }
@media (max-width:767px){ .faq__q{ font-size:1.1875rem; padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } .faq__item + .faq__item::before{ left:8px; right:8px; } }

/* ---------- Formulaire de devis (bloc partagé) ---------- */
.sec-devis .shead{ margin-bottom:24px; }
.devis__call{ display:flex; justify-content:center; margin-bottom:48px; }
.fcard--solo{ max-width:var(--form-max); margin-inline:auto; }
.form-body{ display:flex; flex-direction:column; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:600; font-size:1rem; line-height:1.4; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--ink-2); margin-left:6px; }
.hint{ font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:1rem; line-height:1.5;
  color:var(--ink); background:var(--bg); border:1px solid rgba(26,42,31,.22); 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:#6E7A72; opacity:1; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(26,42,31,.4); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--sapin); outline-offset:3px; border-color:var(--sapin); }
.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='%231B7A3A' stroke-width='2' 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 14px center; background-size:18px; }
.field select:invalid{ color:#6E7A72; }
/* intitulé gris du select : posé par-dessus quand rien n'est choisi, coupé proprement par des points de suspension s'il ne tient pas */
.sel{ position:relative; }
.sel__ph{ display:none; position:absolute; left:15px; right:44px; top:50%; transform:translateY(-50%); pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#6E7A72; 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(--ink); }
@media (max-width:419px){ .field select{ padding-right:36px; background-position:right 12px center; background-size:16px; } .sel__ph{ right:36px; } }
.err{ display:none; font-size:var(--fs-caption); font-weight:600; line-height:1.4; color:var(--error); }
.field.is-err .err{ display:block; }
.field.is-err input,.field.is-err select,.field.is-err textarea{ border-color:var(--error); }
.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(26,42,31,.3); background:var(--bg); color:var(--sapin);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.file__zone .ic{ width:22px; height:22px; }
.file__input:hover + .file__zone{ background:var(--sapin-light); border-color:var(--sapin); }
.file__input:focus-visible + .file__zone{ outline:2px solid var(--sapin); outline-offset:3px; }
.field.is-err .file__zone{ border-color:var(--error); }
.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 14px; border-radius:var(--r-btn);
  border:1px solid rgba(26,42,31,.22); background:var(--bg); }
.file__chosen > .ic{ width:18px; height:18px; color:var(--sapin); }
.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(--ink-2); transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.file__clear:hover{ background:var(--sapin-light); color:var(--sapin); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form.is-busy .form-send .btn{ opacity:.7; pointer-events:none; }
.form-ko{ font-weight:600; color:var(--error); }
.form-foot{ margin-top:16px; font-size:var(--fs-caption); line-height:1.5; color:var(--ink-2); }
.form-foot a{ color:var(--sapin); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.form-foot a:hover{ color:var(--ink); }
.form-ok{ padding:24px; border-radius:var(--r-btn); background:var(--sapin-light); color:var(--ink); font-weight:600; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:767px){ .card{ padding:32px 24px; } .form-send .btn{ width:100%; } }

/* ---------- Contact : formulaire « avec coordonnées » (7 / 5) ---------- */
.sec-contact .shead{ margin-bottom:48px; }
.cgrid{ display:grid; grid-template-columns:7fr 5fr; gap:32px; align-items:start; }
.cgrid > *{ min-width:0; }
.icards{ display:flex; flex-direction:column; gap:24px; }
.icard{ padding:32px; }
.icard h3{ margin-bottom:16px; }
.icard__rows{ display:flex; flex-direction:column; gap:12px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .ic{ color:var(--sapin); margin-top:3px; }
.icard a{ cursor:pointer; display:inline-block; padding-block:9px; margin-block:-9px; overflow-wrap:anywhere; transition:color var(--dur) var(--ease); }
.icard a:hover{ color:var(--sapin); }
.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(--hairline); }
.hrow > span:first-child{ white-space:nowrap; font-weight:600; }
.hrow .d{ text-align:right; color:var(--ink-2); }
.urg{ display:flex; gap:12px; align-items:flex-start; margin-top:20px; padding:14px 16px; border-radius:var(--r-btn);
  background:var(--sapin-light); color:var(--ink); font-weight:600; font-size:.9375rem; line-height:1.5; }
.urg .ic{ color:var(--sapin); margin-top:2px; width:18px; height:18px; }
@media (max-width:1023px){ .cgrid{ grid-template-columns:1fr; } }
@media (max-width:767px){ .icard{ padding:32px 24px; } }
@media (max-width:419px){ .icard a[href^="mailto"]{ font-size:.9375rem; } }   /* l'adresse mail tient sur une ligne à 375px, sans se couper avant le « m » */

/* ---------- Footer ---------- */
.foot{ background:var(--bg); color:var(--ink); }
.foot__map{ position:relative; height:360px; background:var(--sapin-light); }
.foot__map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.foot__id{ padding-top:48px; }
.foot__grid{ display:grid; grid-template-columns:1.3fr 1fr 1.25fr; gap:48px; }
.foot__grid > *{ min-width:0; }
.foot__logolink{ display:inline-flex; border-radius:50%; margin-bottom:12px; transition:opacity var(--dur) var(--ease); }
.foot__logolink:hover{ opacity:.85; }
.foot__logo{ width:64px; height:64px; }   /* même taille que dans le header */
.foot__name{ font-size:1.375rem; line-height:1.25; letter-spacing:-.01em; }
.foot__pos{ display:block; font-family:var(--f-body); font-size:1rem; font-weight:600; letter-spacing:0; color:var(--sapin); margin-top:2px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; max-width:40ch; }
.foot__proofs{ display:flex; align-items:center; gap:16px; margin-top:24px; }
.foot__proofs .slot{ flex:0 0 auto; width:80px; height:48px; border-radius:8px; border:1.5px dashed rgba(26,42,31,.26); }
.foot__col{ padding-top:76px; }   /* première ligne au niveau du nom, pas du logo */
.foot__h{ font-family:var(--f-body); font-weight:600; font-size:var(--fs-over); line-height:1.4; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sapin); 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:9px; margin-block:-9px; transition:color var(--dur) var(--ease),transform var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--sapin); transform:translateX(3px); }
.foot__parent{ color:var(--ink); }
.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__social{ margin-top:32px; }
.foot__info .row{ display:flex; align-items:flex-start; gap:10px; }
.foot__info .ic{ width:18px; height:18px; margin-top:4px; color:var(--sapin); }
.foot__sep{ height:1px; background:var(--hairline); margin-top:32px; }
.foot__sep--m{ display:none; }
.foot__bar{ display:flex; justify-content:space-between; gap:16px; padding-block:32px; font-size:var(--fs-caption); color:var(--ink-2); }
@media (max-width:1023px){ .foot__id{ padding-top:44px; } .foot__logo{ width:56px; height:56px; } .foot__col{ padding-top:68px; }
  /* tablette : la barre du bas est en ligne, le bouton d'appel flottant (56px à 16px du bas) ne la recouvre jamais */
  .foot__bar{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); } }
@media (max-width:1023px) and (min-width:768px){
  .foot__grid{ gap:24px; grid-template-columns:minmax(0,1fr) max-content minmax(0,1.1fr); font-size:.9375rem; }
  .foot__links a,.foot__parent{ white-space:nowrap; }
  .foot__proofs{ gap:10px; }
  .foot__proofs .slot{ width:64px; height:40px; }
  .foot__info a[href^="mailto"]{ overflow-wrap:anywhere; }
}
@media (max-width:767px){
  .foot__map{ height:280px; }
  .foot__logo{ width:52px; height:52px; }
  .foot__grid{ grid-template-columns:1fr; gap:0; }
  .foot__col{ padding-top:0; }
  .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 : le bouton flottant, à droite, ne la recouvre pas ; padding normal */
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}

/* ordinateur : le footer prend la largeur du header (1320px) et les trois colonnes, serrées sur leur texte, se répartissent avec le même air entre elles.
   La tagline passe sur deux lignes choisies, l'adresse se plie à la largeur de la plus longue des autres lignes : aucun texte ne dépasse de sa colonne. */
@media (min-width:1024px){   /* après les règles de base du footer : elles ne l'écrasent pas */ .foot > .container{ max-width:var(--container-header); }
  .foot__grid{ grid-template-columns:repeat(3,max-content); justify-content:space-between; column-gap:48px; }
  .foot__tag{ max-width:none; }
  .foot__tag > span{ display:block; }
  .foot__info .row--fold > span{ flex:1 1 0; contain:inline-size; } }
@media (min-width:1024px) and (max-width:1199px){ .foot__grid{ font-size:.9375rem; } }   /* vers 1024, l'air touche son minimum de 48px : un cran de texte en moins pour que rien ne déborde */

/* ---------- 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(--pomme); color:var(--on-pomme); display:flex; align-items:center; justify-content:center;
    box-shadow:var(--sh-card);
    transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease),transform var(--dur) var(--ease); }
  .fcall .ic{ width:24px; height:24px; }
  .fcall:active{ transform:scale(.94); }
  .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(--pomme);
    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; } }

/* ==========================================================================
   Effets : montés en dernier (Phase finale)
   ========================================================================== */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px);
  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); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important; }
  html{ scroll-behavior:auto; }
  .tk.run{ animation:none !important; }
  html.js-ready [data-reveal]{ opacity:1 !important; transform:none !important; }
  .rtk,.atk,.annonce__in{ overflow-x:auto; }
  .tk-mask{ -webkit-mask-image:none; mask-image:none; }
  .tk > .tk__set[aria-hidden]{ display:none; }
  .fcall::before{ display:none; }
  .rcard__img .ph,.tile__clip .ph{ transform:none !important; }
}