/* ==========================================================================
   Anthony Guerny, maçon : site.css (Nicolam Studio)
   L'ocre et le jaune de sa bétonnière posés sur une crème pierre. Tokens, base, composants, effets.
   Tailwind (CDN) ne sert qu'aux utilitaires : ses styles vivent en couches @layer,
   cette feuille (hors couche) garde toujours la main.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Couleurs, par rôle */
  --bg:#F6F2EA;              /* fond : crème pierre, jamais blanc pur */
  --ink:#1E1C19;             /* texte : anthracite chaud (15,2:1) */
  --ink-2:#5E5A53;           /* texte secondaire (6,1:1) */
  --accent:#8C5A12;          /* ocre soutenue : boutons pleins, sur-titres, texte d'accent, focus, panneau de contraste */
  --accent-light:#F2E5CB;    /* ocre claire : fonds, placeholders, mer de la carte */
  --accent-bar-top:#966216;  /* haut du dégradé de la barre d'annonce */
  --yellow:#F2C200;          /* jaune bétonnière : en grand sur l'ocre uniquement (chiffres) */
  --yellow-on-light:#9A7400; /* jaune sur la crème : icônes clés du menu, éléments graphiques */
  --yellow-light:#FFF1BF;    /* jaune clair */
  --gold:#D9A21B;            /* seconde couleur du dégradé signature */
  --error:#B42318;
  --sig:linear-gradient(135deg,#8C5A12,#D9A21B);   /* le seul dégradé de composant du site */
  --card:#F6F2EA;            /* fond des cartes : la crème pierre de la palette, détachée du dégradé de section par l'ombre unique */
  --hairline:rgba(30,28,25,.14);
  --line-on-accent:rgba(246,242,234,.26);
  --tint:rgba(140,90,18,.07);      /* survols : l'ocre en faible opacité, jamais une teinte de plus */
  --tint-2:rgba(140,90,18,.12);

  /* Notes de maquette : Note = carmin, Suggestion = ambre */
  --note-ink:#9E1F42; --note-txt:#7A2038; --note-bg:rgba(158,31,66,.06); --note-bd:rgba(158,31,66,.32);
  --sugg-ink:#7A5600; --sugg-txt:#6A4C07; --sugg-bg:rgba(224,161,0,.12); --sugg-bd:rgba(224,161,0,.55);

  /* Ombre unique du site : anthracite chaud, niveau présent (+ son cran doux et son cran de survol) */
  --sh-card:0 1px 2px rgba(30,28,25,.12),0 8px 20px rgba(30,28,25,.09),0 18px 36px rgba(30,28,25,.05),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(30,28,25,.08),0 6px 14px rgba(30,28,25,.06);
  --sh-mid:0 2px 4px rgba(30,28,25,.1),0 10px 22px rgba(30,28,25,.1),inset 0 1px 0 rgba(255,252,247,.7);

  /* Espacements : échelle unique */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  /* Rayons : coins doux */
  --r-btn:10px; --r-field:10px; --r-card:16px; --r-pill:999px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --pad:24px;
  /* Hauteurs de référence : barre d'annonce + header */
  --ann-h:40px; --hdr-h:80px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  /* Mouvement */
  --ease:ease-in-out; --dur:.4s;
  /* Tickers (barre d'annonce et mur de réalisations : mêmes réglages) */
  --tk-lead:80px; --tk-gap:24px; --tk-fade:24px;   /* vide de lecture > séparation ordinaire (24 + point + 24) */

  /* Typographie */
  --f-title:"Zilla Slab",Georgia,serif;
  --f-body:"Public Sans",system-ui,sans-serif;
  --fs-h1:clamp(2.25rem,1.5rem + 3vw,3.75rem);        /* 36 → 60px */
  --fs-h2:clamp(1.75rem,1.35rem + 1.6vw,2.625rem);    /* 28 → 42px */
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.5rem);        /* 20 → 24px */
  --fs-h4:1.0625rem;                                  /* 17px */
  --fs-lead:clamp(1.125rem,1.05rem + .3vw,1.1875rem); /* chapô 18 → 19px */
  --fs-body:clamp(1rem,.97rem + .15vw,1.0625rem);     /* 16 → 17px */
  --fs-caption:.875rem;                               /* 14px */
  --fs-overline:.8125rem;                             /* 13px */
}
@media (max-width:1023px){ :root{ --hdr-h:64px; } }
@media (max-width:767px){ :root{ --pad:16px; --tk-fade:16px; --tk-gap:16px; --tk-lead:56px; } }

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
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; color:inherit; background:transparent; border:0; padding: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(--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; }
/* #devis : le H2 ne passe jamais sous le header sticky */
section[id]{ scroll-margin-top:calc(var(--hdr-h) + 24px); }

h1,h2,h3,h4{ font-family:var(--f-title); color:var(--ink); text-wrap:balance; font-feature-settings:"lnum" 1,"tnum" 1; }
h1{ font-weight:700; font-size:var(--fs-h1); line-height:1.08; letter-spacing:-.015em; }
h2{ font-weight:700; font-size:var(--fs-h2); line-height:1.12; letter-spacing:-.01em; }
h3{ font-weight:600; font-size:var(--fs-h3); line-height:1.25; }
h4{ font-weight:600; font-size:var(--fs-h4); line-height:1.3; }
.eyebrow{ display:inline-block; font-family:var(--f-body); font-weight:600; font-size:var(--fs-overline); line-height:1.4;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); text-wrap:balance; }
.lead{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:70ch; text-wrap:pretty; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; isolation:isolate; padding-block:96px; }
.section > .container{ position:relative; z-index:1; }
/* grain désaturé 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; } }
/* flux des fonds : A = #F6F2EA, B = #F2E5CB (attribué par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#F6F2EA,#F2E5CB); }
.bg-ba{ background:linear-gradient(180deg,#F2E5CB,#F6F2EA); }
.bg-aba{ background:linear-gradient(180deg,#F6F2EA,#F2E5CB 50%,#F6F2EA); }
.bg-bab{ background:linear-gradient(180deg,#F2E5CB,#F6F2EA 50%,#F2E5CB); }

.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{ margin-inline:auto; }
@media (max-width:767px){ .shead{ margin-bottom:32px; } }

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

/* ---------- Boutons : trois niveaux, coins doux 10px, icône à droite ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px;
  border-radius:var(--r-btn); border:2px 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; color:inherit; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn--primary{ background:var(--accent); border:0; padding:14px 26px; color:var(--bg);   /* pas de bordure transparente (padding +2, même taille) ; pas de liseré : les boutons sont un cas à part (finition premium) */
  box-shadow:0 6px 16px rgba(140,90,18,.28); }
.btn--primary:hover{ filter:brightness(.9); box-shadow:0 10px 22px rgba(140,90,18,.34); }
.btn--primary:active{ filter:brightness(.82); }
.btn--ghost{ color:var(--accent); border-color:var(--accent); background:transparent; }
.btn--ghost:hover{ background:var(--tint); color:color-mix(in srgb,var(--accent) 82%,#000); }
.btn--ghost:active{ background:var(--tint-2); color:color-mix(in srgb,var(--accent) 75%,#000); }
/* ghost posé sur la photo du hero : bordure claire très marquée */
.btn--on-img{ color:var(--bg); border-color:rgba(246,242,234,.88); }
.btn--on-img:hover{ background:rgba(246,242,234,.14); color:var(--bg); }
.btn--on-img:active{ background:rgba(246,242,234,.22); color:var(--bg); }

/* ---------- Barre d'annonce ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,var(--accent-bar-top),var(--accent)); 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:var(--tk-gap); flex:0 0 auto; }
.annonce li{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-caption); font-weight:500; 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:1199px){   /* ligne fixe mesurée sur le contenu réel : 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); }
}

/* ---------- Ticker (mécanique commune aux deux tickers) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk.paused{ animation-play-state:paused; }
.tk--info.run:hover{ animation-play-state:paused; }   /* la barre d'infos se fige au survol ; le mur de réalisations, jamais */
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Header : verre densifié, un seul état ---------- */
.hdr{ position:sticky; top:0; z-index:50; }
.hdr__bar{ position:relative; height:var(--hdr-h);
  background:linear-gradient(180deg,rgba(246,242,234,.95),rgba(246,242,234,.78));
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  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) 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; border-radius:6px; transition:opacity var(--dur) var(--ease); }
.hdr__logo:hover{ opacity:.85; }
.hdr__img{ height:56px; width:auto; }
.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:500; font-size:1rem; color:var(--ink);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ color:var(--accent); background:var(--tint); }
.nav__link[aria-current="page"],.nav__toggle[data-current]{ color:var(--accent); background:var(--tint); }
.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); }
.submenu{ position:absolute; top:calc(100% + 12px); left:50%; width:380px; padding:8px; display:flex; flex-direction:column;
  background:var(--card); 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:-14px; height:14px; }   /* pont de survol */
.submenu.is-open{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu a{ display:flex; align-items:flex-start; gap:12px; padding:12px 14px; border-radius:var(--r-btn); color:var(--ink);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
.submenu .kic--menu{ width:28px; height:28px; color:var(--yellow-on-light); }   /* icônes clés sur-mesure, jaune lisible sur la crème */
.submenu__txt{ display:block; min-width:0; }   /* titre et description empilés, jamais côte à côte */
.submenu__t{ display:block; font-weight:600; line-height:1.35; }
.submenu__d{ display:block; margin-top:2px; font-size:var(--fs-caption); line-height:1.45; color:var(--ink-2); }
.submenu a:hover,.submenu a[aria-current]{ background:var(--tint); }
.submenu a:hover .submenu__t,.submenu a[aria-current] .submenu__t{ color:var(--accent); }
.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(30,28,25,.18); 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:var(--tint); border-color:var(--accent); }
.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{ height:44px; } }
@media (max-width:859px){   /* bascule burger mesurée sur le contenu réel (logo + 4 entrées + CTA) */
  .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 18px 30px rgba(30,28,25,.12); max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height var(--dur) var(--ease),visibility var(--dur) var(--ease); }
  .hdr.is-open .hdr__panel{ max-height:calc(100svh - var(--stack-h)); overflow-y:auto; visibility:visible; }
  .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; 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,.hdr__panel a[aria-current]:not(.btn),.macc__btn[data-current]{ background:var(--tint); color:var(--accent); }
  .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; padding-left:24px; }
  .hdr__panel .macc__in a:focus-visible{ outline-offset:-2px; }   /* anneau à l'intérieur : jamais rogné par l'accordéon */
  .hdr__panel .kic--menu{ width:24px; height:24px; color:var(--yellow-on-light); }
  .hdr__panel .btn{ margin-top:16px; align-self:stretch; }
}

/* ---------- Hero d'accueil sur image : voile fort, contenu centré ---------- */
.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); background:var(--ink); }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos,50% 50%); }
/* sans photo : le hero est un placeholder comme les autres (radial clair de la palette, logo du client, légende en pastille) */
.hero--ph{ background:radial-gradient(75% 85% at 50% 50%,#F6F2EA 0%,#F6F2EA 30%,#F2E5CB 100%); }
.hero__media--ph::before{ content:""; position:absolute; inset:0; opacity:.07;
  background:url("/assets/img/logo-motif.webp") no-repeat center 50% / min(58%,560px) auto; }
.hero__media--ph .ph__cap{ left:24px; bottom:24px; }
.hero.hero--ph h1{ color:var(--ink); text-shadow:none; }
.hero.hero--ph .hero__tag{ color:var(--ink-2); text-shadow:none; }
.hero--ph :focus-visible{ outline-color:var(--accent); }
/* pastille, version claire sur fond clair (verre clair, texte foncé) */
.hero--ph .xpill{ background:rgba(246,242,234,.6); border-color:rgba(30,28,25,.14); color:var(--ink); box-shadow:var(--sh-soft); }
.hero--ph .xpill__ic{ color:var(--accent); }
/* voile anthracite chaud, ancré sur la zone du texte (le centre) */
.hero__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 72% 68% at 50% 50%,rgba(30,28,25,.74) 0%,rgba(30,28,25,.58) 55%,rgba(30,28,25,.42) 100%); }
.hero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:24px; }
.hero h1{ color:var(--bg); text-shadow:0 2px 20px rgba(30,28,25,.5),0 1px 2px rgba(30,28,25,.4); }
.hero__tag{ font-size:var(--fs-lead); line-height:1.55; color:var(--bg); text-shadow:0 1px 12px rgba(30,28,25,.55); }
.hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-top:8px; }
.hero :focus-visible{ outline-color:var(--bg); }
/* Pastille, variante chiffre vérifiable, version foncée (verre sombre sur la photo) */
.xpill{ display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 12px; border-radius:var(--r-pill);
  background:rgba(30,28,25,.38); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(246,242,234,.28); color:var(--bg); white-space:nowrap;
  font-size:.9375rem; font-weight:500; line-height:1.2; box-shadow:0 4px 14px rgba(30,28,25,.2); }
.xpill strong{ font-weight:600; font-variant-numeric:tabular-nums lining-nums; }
.xpill__ic{ width:22px; height:22px; color:var(--bg); }
@media (max-width:767px){
  .hero{ padding-block:64px; }
  .hero__media--ph .ph__cap{ left:16px; bottom:16px; }
  .hero__media--ph::before{ background-size:min(86%,340px) auto; }
  .xpill{ padding:6px 14px 6px 10px; gap:8px; font-size:.8125rem; }
  .xpill__ic{ width:18px; height:18px; }
}
@media (max-width:399px){ .hero__cta{ flex-direction:column; align-items:center; } }

/* ---------- Hero de page ---------- */
.phero{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:clamp(320px,44svh,460px); padding:96px var(--pad);
  background:radial-gradient(75% 95% at 50% 50%,#F6F2EA 0%,#F6F2EA 24%,#F2E5CB 100%); }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.06;
  background:url("/assets/img/logo-motif.webp") no-repeat center / min(44%,380px) auto; }
.phero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:16px; }
.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:280px; } .phero::before{ background-size:min(76%,280px) auto; } }

/* ---------- Placeholder image : logo du client, radial clair, légende en pastille ---------- */
.ph{ position:relative; overflow:hidden; background:radial-gradient(80% 80% at 50% 48%,#F6F2EA 0%,#F2E5CB 100%); }
.ph::before{ content:""; position:absolute; inset:0; opacity:.2;   /* motif calé sur la hauteur : la légende ne le touche jamais */
  background:url("/assets/img/logo-motif.webp") no-repeat center 50% / auto min(46%,150px); }
.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(246,242,234,.92); color:var(--ink-2);
  font-size:var(--fs-caption); line-height:1.4; box-shadow:var(--sh-soft);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }

/* ---------- 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:720px; padding:16px 24px; border-radius:var(--r-card); border:1px solid; }
.mnote .ic{ width:22px; height:22px; margin-top:1px; }
.mnote__label{ display:block; font-weight:600; font-size:var(--fs-overline); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; }
.mnote--note{ background:var(--note-bg); border-color:var(--note-bd); color:var(--note-ink); }
.mnote--note p{ color:var(--note-txt); }
.mnote--sugg{ background:var(--sugg-bg); border-color:var(--sugg-bd); color:var(--sugg-ink); }
.mnote--sugg p{ color:var(--sugg-txt); }
.sec-note .mnote{ margin-inline:auto; }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } }

/* ---------- S2 Prestations : bento asymétrique 3 colonnes, dominante sur deux rangées ---------- */
.bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.t-mac{ grid-column:1; grid-row:1 / 3; }
.t-amen{ grid-column:2 / 4; grid-row:1; }
.t-ouv{ grid-column:2; grid-row:2; }
.t-toit{ grid-column:3; grid-row:2; }
.tile{ display:flex; flex-direction:column; border-radius:var(--r-card); overflow:hidden; background:var(--card);
  box-shadow:var(--sh-card); color:var(--ink); cursor:pointer; }
.tile__img{ position:relative; height:220px; flex:0 0 auto; }   /* hauteur FIXE commune aux trois tuiles */
/* dominante : sa propre hauteur FIXE, calculée (JS) pour que la tuile égale deux rangées + la gouttière */
.t-mac .tile__img{ height:var(--dom-img,460px); }
.tile__img .ph{ position:absolute; inset:0; transition:transform .6s var(--ease); }
.tile__clip{ position:absolute; inset:0; overflow:hidden; }
.tile:hover .tile__img .ph{ transform:scale(1.04); }
.tile__body{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; 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__img .ph__cap{ top:12px; bottom:auto; }   /* la légende monte : la pastille d'icône occupe le bas à gauche */
.tile__img .ph::before{ background-position:center 64%; background-size:auto min(40%,150px); }   /* motif sous la légende, jamais dessous ni dessus */
/* icône sur-mesure dans une pastille au dégradé signature, à cheval sur l'image et le texte */
.tile__chip{ position:absolute; left:32px; bottom:-28px; z-index:1; width:56px; height:56px; border-radius:var(--r-btn); background:var(--sig);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(140,90,18,.2),0 6px 14px rgba(140,90,18,.26),inset 0 1px 0 rgba(255,252,247,.32); }
.tile__chip .kic{ width:32px; height:32px; color:var(--bg); filter:drop-shadow(0 1px 1px rgba(30,28,25,.28)); }
@media (max-width:1023px){
  .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .t-mac{ grid-column:1 / -1; grid-row:1; }
  .t-amen{ grid-column:1 / -1; grid-row:2; }
  .t-ouv{ grid-column:1; grid-row:3; }
  .t-toit{ grid-column:2; grid-row:3; }
  .t-mac .tile__img{ height:220px; }   /* elle reprend la hauteur d'image commune */
}
@media (max-width:767px){
  .bento{ grid-template-columns:1fr; gap:16px; }
  .t-mac,.t-amen,.t-ouv,.t-toit{ grid-column:auto; grid-row:auto; }
  .tile__body{ padding:48px 32px 32px; }
}

/* ---------- S3 Réalisations : mur de réalisations en ticker d'ambiance ---------- */
.sec-real{ overflow-x:clip; }   /* le mur pleine largeur ne déborde jamais de la page (barre de défilement comprise) */
.rwall{ margin-inline:calc(50% - 50vw); }   /* mur pleine largeur d'écran, fondu léger aux deux bords */
.rwall__in{ overflow:hidden; padding-block:14px 36px;   /* place pour l'ombre des cartes (haut : lift, bas : diffuse) */
  -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); }
.tk--wall{ width:max-content; }
.rwall__set{ display:flex; gap:var(--tk-gap); padding-left:var(--tk-lead); flex:0 0 auto; }
.rcard{ flex:0 0 auto; width:360px; display:flex;   /* largeur explicite : Safari calcule la bande sur width, pas sur flex-basis */
   flex-direction:column; background:var(--card); color:var(--ink); border-radius:var(--r-card);
  overflow:hidden; box-shadow:var(--sh-card); cursor:pointer; }
.rcard__img{ position:relative; overflow:hidden; }
.rcard__img::before{ content:""; display:block; padding-top:75%; }   /* paysage 4:3, identique sur les six */
.rcard__img .ph{ position:absolute; inset:0; transition:transform .6s var(--ease); }
.rcard__img .ph::before{ background-position:center 36%; background-size:auto min(40%,120px); }   /* motif au-dessus de la légende, même sur deux lignes */
.rcard:hover .rcard__img .ph{ transform:scale(1.04); }
.rcard__body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:16px 24px 24px; }
.rcard__cat{ font-weight:600; font-size:var(--fs-overline); line-height:1.4; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.rcard__t{ font-size:var(--fs-h3); line-height:1.25; min-height:2.5em; }   /* deux lignes réservées */
.rcard__loc{ 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; color:var(--accent); }
.is-ph{ font-style:italic; }
.rcard__t.is-ph{ color:var(--ink-2); }
.after-wall{ display:flex; justify-content:center; margin-top:12px; }   /* 12 + les 36px du ticker = 48 */
@media (max-width:1023px){ .rcard{ width:320px; } }
@media (max-width:767px){ .rcard{ width:280px; } .after-wall{ margin-top:0; } }

/* ---------- S4 Zone d'intervention : split texte (5) / carte (7) ---------- */
.zsplit{ display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:center; }
.zsplit > *{ min-width:0; }
.ztext{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.ztext p{ font-size:var(--fs-lead); line-height:1.55; color:var(--ink-2); max-width:70ch; }
.zmap{ position:relative; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); background:var(--accent-light); }
.zmap::before{ content:""; display:block; padding-top:80%; }   /* cadre 120 × 96 km, décalé de 14 km vers l'ouest : littoral, îles et estuaires */
.zmap svg{ position:absolute; inset:0; width:100%; height:100%; }
.zmap .sea{ fill:#EBDDC3; }   /* mer : l'ocre claire appuyée + hachures fines façon carte gravée, elle se lit d'un coup */
.zmap .wave{ stroke:rgba(140,90,18,.16); stroke-width:1.4; }
.zmap .dep{ fill:#F6F2EA; stroke:rgba(30,28,25,.28); stroke-width:1; vector-effect:non-scaling-stroke; }
.zmap .coast{ fill:none; stroke:rgba(140,90,18,.6); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.mpt{ position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:1; }
.mpt--main{ z-index:2; }
.mpt i{ position:absolute; left:-6px; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 3px rgba(246,242,234,.95),0 2px 6px rgba(30,28,25,.3); }
.mpt .pin{ position:absolute; width:44px; height:44px; left:-22px; top:-40.3px; fill:var(--accent); stroke:var(--bg); stroke-width:1.5;
  stroke-linejoin:round; filter:drop-shadow(0 3px 5px rgba(30,28,25,.3)); }   /* la pointe touche l'ancre */
.mpt .pin circle{ fill:var(--bg); stroke:none; }
.lbl{ position:absolute; white-space:nowrap; line-height:1; border-radius:var(--r-pill); padding:7px 12px;
  font-size:.9375rem; font-weight:600; color:var(--ink); background:rgba(246,242,234,.97); box-shadow:var(--sh-soft); }
.mpt--main .lbl{ font-size:1rem; font-weight:700; color:var(--accent); padding:8px 14px; }
.lbl[data-d="top"]{ left:0; bottom:50px; transform:translateX(-50%); }
.lbl[data-d="right"]{ left:16px; top:0; transform:translateY(-50%); }
@media (max-width:1023px){ .zsplit{ grid-template-columns:1fr; gap:48px; } }
@media (max-width:767px){
  .zsplit{ gap:32px; }
  .zmap::before{ padding-top:100%; }   /* carte carrée, SVG recadré au centre */
  .mpt{ left:var(--xm); top:var(--ym); }
  .lbl{ font-size:.8125rem; padding:5px 9px; }
  .mpt--main .lbl{ font-size:.875rem; padding:6px 10px; }
  .mpt .pin{ width:36px; height:36px; left:-18px; top:-33px; }
  .lbl[data-d]{ left:auto; right:auto; top:auto; bottom:auto; transform:none; }
  .lbl[data-m="top"]{ left:0; bottom:42px; transform:translateX(-50%); }
  .lbl[data-m="right"]{ left:12px; top:0; transform:translateY(-50%); }
}

/* ---------- S5 Garanties : deux items à icône en grille + emplacements réservés ---------- */
/* subgrid : icône, titre et contenu calés sur les mêmes rangées dans les deux colonnes */
.guar{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto auto; max-width:720px; margin-inline:auto; }
.guar__it{ position:relative; display:grid; grid-row:span 3; grid-template-rows:subgrid; justify-items:center; align-content:start;
  text-align:center; row-gap:16px; padding:32px; border-radius:var(--r-card); transition:background-color var(--dur) var(--ease); }
.guar__it .guar__txt{ display:contents; }
.guar__it h3{ align-self:end; }
.guar__it p,.guar__slot{ margin-top:-8px; }   /* titre → contenu : 8px, comme dans toutes les cartes */
.guar__it:hover{ background:var(--tint); }
.guar__it + .guar__it::before{ content:""; position:absolute; left:0; top:24px; bottom:24px; width:1px; background:var(--hairline); }
.gic{ width:40px; height:40px; color:var(--accent); flex:0 0 auto; }
.guar__it p{ color:var(--ink-2); max-width:34ch; }
.guar__slot{ display:block; width:168px; height:56px; border-radius:var(--r-btn); background:var(--tint); border:1px solid var(--hairline); }
.slots{ display:flex; justify-content:center; gap:24px; margin-top:48px; }
.slots span{ flex:0 1 168px; aspect-ratio:21 / 9; border-radius:var(--r-card); background:var(--tint); border:1px solid var(--hairline); }
@media (max-width:1023px){ .guar__it{ padding:24px 16px; } .gic{ width:36px; height:36px; } }
@media (max-width:767px){
  .guar{ grid-template-columns:1fr; grid-template-rows:none; }
  .guar__it{ grid-row:auto; grid-template-rows:none; padding:24px 16px; }
  .guar__it + .guar__it::before{ left:24px; right:24px; top:0; bottom:auto; width:auto; height:1px; }
  .gic{ width:32px; height:32px; }
  .slots{ gap:16px; margin-top:32px; }
}

/* ---------- S6 L'entreprise : section de contraste, panneau d'accent + bande de stats nue ---------- */
.cpanel{ position:relative; isolation:isolate; overflow:hidden; background:var(--accent); color:var(--bg);
  border-radius:var(--r-card); padding:64px; box-shadow:var(--sh-card); }
.cpanel::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.03;   /* grain un cran plus discret */
  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"); }
.cpanel .eyebrow,.cpanel h2{ color:var(--bg); }
.cpanel h2{ margin-top:16px; }
.cpanel__p{ margin-top:16px; max-width:70ch; font-size:var(--fs-lead); line-height:1.55; color:var(--bg); }
/* split image / texte dans le panneau : le texte à gauche, le portrait (placeholder) en face */
.cpanel__split{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
.cpanel__img{ position:relative; height:400px; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); }
.cpanel__img .ph{ position:absolute; inset:0; }
.cpanel__img .ph::before{ background-position:center 40%; background-size:auto min(40%,150px); }   /* motif au-dessus de la légende */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:48px; }
.stat{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:24px 16px; }
.stat + .stat::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:1px; background:var(--line-on-accent); }
.stat__n{ font-family:var(--f-body); font-weight:600; font-size:clamp(3rem,2.2rem + 3vw,4.5rem); line-height:1; letter-spacing:-.02em;
  color:var(--yellow); font-variant-numeric:tabular-nums lining-nums; }
.stat__l{ font-weight:500; font-size:1rem; line-height:1.4; color:var(--bg); white-space:nowrap; }
.cpanel__notes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:48px; }
.cpanel__notes .mnote{ max-width:none; }
.cpanel .mnote--note{ background:linear-gradient(var(--note-bg),var(--note-bg)),var(--bg); }   /* cartes claires posées sur l'accent */
.cpanel .mnote--sugg{ background:linear-gradient(var(--sugg-bg),var(--sugg-bg)),var(--bg); }
@media (max-width:1023px){
  .cpanel{ padding:48px; }
  .cpanel__split{ grid-template-columns:1fr; gap:32px; }
  .cpanel__img{ order:-1; height:360px; }   /* image au-dessus du texte, hauteur explicite */
  .cpanel__notes{ grid-template-columns:1fr; gap:16px; }
}
@media (max-width:767px){
  .cpanel{ padding:32px 24px; }
  .cpanel__split{ gap:24px; }
  .cpanel__img{ height:280px; }
  .cpanel__p{ font-size:var(--fs-body); }
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:32px; }
  .stat{ padding:24px 8px; }
  .stat__l{ font-size:.875rem; }
  /* 2 en haut, l'orpheline sur toute la largeur, centrée comme les deux du dessus */
  .stat:last-child{ grid-column:1 / -1; }
  .stat:last-child::before{ left:16px; right:16px; top:0; bottom:auto; width:auto; height:1px; }   /* un seul trait continu */
  .cpanel__notes{ margin-top:32px; }
}

/* ---------- S7 FAQ : accordéon à filets ---------- */
.faq{ max-width:720px; margin-inline:auto; border-bottom:1px solid var(--hairline); }
.faq__item{ border-top:1px solid 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:var(--fs-h3); 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(--accent); background:var(--tint); }
.faq__q .ic{ width:22px; height:22px; margin-top:2px; color:var(--accent); 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:64ch; }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; }
@media (max-width:767px){ .faq__q{ padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } }

/* ---------- Formulaire de devis (bloc partagé) ---------- */
.sec-devis .shead{ margin-bottom:24px; }
.devis__call{ display:flex; justify-content:center; margin-bottom:48px; }
.card{ background:var(--card); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-card); padding:48px; }
.fcard--solo{ max-width:720px; margin-inline:auto; }
.fcard > .shead{ margin-bottom:32px; }
.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(30,28,25,.2); border-radius:var(--r-field); margin:0;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.field textarea{ resize:vertical; min-height:calc(5 * 1.5em + 26px); }
.field ::placeholder{ color:var(--ink-2); opacity:1; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:rgba(30,28,25,.38); }
.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='%238C5A12' 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:var(--ink-2); }
.field select option{ color:var(--ink); }
@media (max-width:419px){   /* l'intitulé tient en entier à 375px : chevron resserré */
  .field select{ padding-right:30px; background-position:right 10px center; background-size:16px; }
}
.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); }
/* pièce jointe : zone compacte, nom affiché, bouton pour retirer */
.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:56px; border-radius:var(--r-field);
  border:1.5px dashed rgba(30,28,25,.28); background:var(--bg); color:var(--accent);
  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(--tint); border-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(--error); }
.file.has-file .file__input,.file.has-file .file__zone{ display:none; }
.file__chosen{ display:flex; align-items:center; gap:12px; min-height:56px; padding:6px 6px 6px 14px; border-radius:var(--r-field);
  border:1px solid rgba(30,28,25,.2); background:var(--bg); }
.file__chosen > .ic{ width:18px; height:18px; color:var(--accent); }
.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(--tint); color:var(--accent); }
.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(--accent); 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-field); background:var(--tint); 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) ---------- */
.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(--accent); margin-top:3px; }
.icard a{ cursor:pointer; overflow-wrap:anywhere; transition:color var(--dur) var(--ease); }
.icard a:hover{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.hrow{ display:flex; justify-content:space-between; flex-wrap:wrap; column-gap:16px; row-gap:2px; }
.hrow .d{ font-weight:600; margin-left:auto; text-align:right; }   /* replié sur une 2e ligne, l'horaire reste calé à droite comme les autres */
@media (max-width:1023px){ .cgrid{ grid-template-columns:1fr; } }
@media (max-width:767px){ .icard{ padding:32px 24px; } }

/* ---------- Pages légales ---------- */
.legal{ max-width:720px; margin-inline:auto; display:flex; flex-direction:column; gap:8px; }
.legal h2{ font-size:var(--fs-h2); margin-top:48px; margin-bottom:8px; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--ink-2); }
.legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; transition:color var(--dur) var(--ease); }
.legal a:hover{ color:var(--ink); }

/* ---------- Footer ---------- */
.foot{ position:relative; z-index:2; background:var(--bg); color:var(--ink); }
.foot__map iframe{ display:block; width:100%; height:360px; border:0; background:var(--accent-light); }
.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__logo{ height:56px; width:auto; margin-bottom:16px; }
.foot__name{ font-size:1.375rem; line-height:1.2; letter-spacing:0; }
.foot__pos{ color:var(--accent); font-weight:600; margin-top:2px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; max-width:38ch; }
.foot__slots{ display:flex; gap:16px; margin-top:24px; }
.foot__slots span{ width:88px; height:40px; border-radius:var(--r-btn); background:var(--tint); border:1px solid var(--hairline); }
.foot__col{ padding-top:72px; }   /* première ligne au niveau du nom, pas du logo */
.foot__h{ font-family:var(--f-body); font-weight:600; font-size:var(--fs-overline); 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; transition:color var(--dur) var(--ease),transform var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--accent); 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__sub a{ color:var(--ink-2); }
.foot__info{ display:flex; flex-direction:column; gap:12px; }
.foot__info .row{ display:flex; align-items:flex-start; gap:12px; }
.foot__info .ic{ width:18px; height:18px; margin-top:3px; color:var(--accent); }
.foot__info a{ overflow-wrap:anywhere; }
.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{ height:44px; } .foot__col{ padding-top:60px; } }
@media (max-width:1023px) and (min-width:768px){
  .foot__grid{ gap:24px; grid-template-columns:minmax(0,.85fr) max-content minmax(0,1.2fr); }   /* « Saint-Georges-des-Coteaux » tient sur sa ligne en 16px */
  .foot__links a,.foot__parent{ white-space:nowrap; }
}
@media (max-width:767px){
  .foot__links a,.foot__info a,.icard a{ display:inline-block; padding-block:9px; margin-block:-9px; }   /* cible tactile 44px, rythme visuel inchangé */
  .form-foot a{ display:inline-block; padding-block:13px; margin-block:-13px; }
  .foot__map iframe{ height:280px; }
  .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; }
  .foot__bar{ flex-direction:column; gap:8px; }
}

/* ==========================================================================
   Effets : montés en dernier (Phase finale)
   ========================================================================== */
/* Reveal au scroll, au niveau du composant, en cascade (html.js-ready posé par le JS si data-fx="1") */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease); }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }
html.js-ready .tile[data-reveal]{ transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
html.js-ready .guar__it[data-reveal]{ transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),background-color var(--dur) var(--ease); }
/* Hero d'accueil pinné : effet rideau (le corps remonte d'un bloc par-dessus) */
.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; }
  .annonce__in,.rwall__in{ overflow-x:auto; }
  .tile:hover .tile__img .ph,.rcard:hover .rcard__img .ph{ transform:none; }
}