/* ==========================================================================
   Agence Madeline Thouron : site.css (Nicolam Studio)
   Site d'architecture sobre et chaleureux : les photos de son travail sur un fond lin, la terracotta de son identité
   pour l'action, l'ardoise des plans pour les repères. Coins nets, filets fins, beaucoup de vide.
   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) : Cormorant Garamond 600, Montserrat 400/500, latin ---------- */
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/cormorant-garamond-600-latin.woff2") format("woff2"); }
@font-face{ font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/montserrat-400-latin.woff2") format("woff2"); }
@font-face{ font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/montserrat-500-latin.woff2") format("woff2"); }

/* ---------- Tokens (Invariants du prompt) ---------- */
:root{
  /* Couleurs : deux teintes par couleur */
  --bg:#F7F3EE;                 /* fond lin (A) */
  --B:#F3E4DD;                  /* B du flux : terracotta claire en faible opacité sur le lin */
  --terra-l:#F2DED6;            /* terracotta claire : fonds, footer, chiffres de la frise sur l'aplat */
  --terra:#AE5440;              /* terracotta soutenue : boutons, aplat de contraste, barre d'annonce */
  --terra-logo:#C26751;         /* terracotta du logo : dégradé signature */
  --terra-ink:#9D4C3A;          /* la terracotta soutenue assombrie pour le TEXTE (sur-titres, liens, ghost) : 4,6:1 sur la terracotta claire, AA */
  --slate-l:#E1E6EA;            /* ardoise claire : badges */
  --slate:#3F4C57;              /* ardoise soutenue : repères (chiffres, icônes, badges) */
  --ink:#24211F;                /* texte (15:1 sur le lin) */
  --ink-2:#6A625C;              /* texte secondaire (5,4:1 sur le lin, 4,6:1 sur la terracotta claire) */
  --gold:#F2B01E;               /* note Google et étoiles uniquement */
  --surface:#FFFDFA;            /* fond des cartes, distinct du fond de section */
  --on-dark:#FFFDFA;            /* texte clair sur photo voilée */
  --note:#A3243B; --suggestion:#9A6512;
  --error:#B42318;
  --hairline:rgba(36,33,31,.14);
  /* Dégradé signature : #C26751 → #3F4C57, en touches seulement, jamais en fond de section */
  --grad:linear-gradient(135deg in oklch,#C26751,#3F4C57);
  --grad-h:linear-gradient(90deg in oklch,#3F4C57,#C26751);     /* nom dans le H1 : horizontal, il finit sur l'accent */
  --grad-v:linear-gradient(180deg in oklch,#C26751,#3F4C57);    /* ligne de la frise : première couleur au premier repère */
  /* boutons : 135°, ton clair en haut à gauche, point à 40 % ; le plein part de la soutenue (libellé clair à 4,6:1 au pire pixel) */
  --grad-btn:linear-gradient(135deg in oklch,#AE5440 0%,color-mix(in oklch,#AE5440 82%,#3F4C57) 40%,#3F4C57 100%);
  --grad-light:linear-gradient(135deg,#F2DED6 0%,#F4E4DD 40%,#FFFFFF 100%);   /* bouton clair : terracotta claire → blanc, interpolation classique */
  /* Espacements (échelle unique) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  /* Rayons : coins nets, à peine adoucis */
  --r-btn:3px; --r-card:4px;
  /* Conteneurs */
  --container:1200px; --container-header:1320px; --pad:24px;
  /* Barre d'annonce + header */
  --ann-h:40px; --hdr-h:80px; --stack-h:calc(var(--ann-h) + var(--hdr-h));
  /* Typographie */
  --f-title:"Cormorant Garamond",Georgia,serif;
  --f-body:"Montserrat",system-ui,sans-serif;
  --fs-h1:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);
  --fs-h1-page:clamp(2.125rem,1.5rem + 2.4vw,3.5rem);   /* toujours sous le H1 de l'accueil, mobile compris */
  --fs-h2:clamp(1.875rem,1.4rem + 1.8vw,2.75rem);
  --fs-h3:clamp(1.375rem,1.2rem + .6vw,1.625rem);
  --fs-body:1.0625rem;
  --fs-lead:1.125rem;
  --fs-label:.8125rem;
  --fs-caption:.875rem;
  /* Ombre : une seule pour tout le site, brun chaud #5A3A2E, niveau présent, liseré clair (boutons à part) */
  --sh-card:0 1px 2px rgba(90,58,46,.10),0 8px 24px rgba(90,58,46,.12),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-soft:0 1px 2px rgba(90,58,46,.08),0 4px 12px rgba(90,58,46,.08),inset 0 1px 0 rgba(255,252,247,.7);
  --sh-btn:0 1px 2px rgba(90,58,46,.14),0 6px 16px rgba(90,58,46,.16);
  /* Mouvement : ease-in-out partout ; 0,4 s est le minimum : .6s pour les états, .9s pour l'apparition au scroll */
  --ease:ease-in-out; --dur:.6s; --dur-in:.9s; --dur-open:.5s; --dur-faq:.4s; --dur-tab:.4s;
  /* Tickers : barre d'annonce et avis */
  --tk-lead:96px; --tk-gap:24px; --tk-fade:24px;
}
@media (max-width:1023px){ :root{ --hdr-h:72px; } }
@media (max-width:767px){ :root{ --pad:16px; --fs-body:1rem; --tk-fade:16px; --tk-gap:16px; --tk-lead:64px; --ann-h:36px; --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(--terra); color:var(--bg); }
:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nw{ white-space:nowrap; }

/* Titres : Cormorant Garamond 600, tracking serré ; aligné à gauche = pretty, centré = balance */
h1,h2,h3,h4{ font-family:var(--f-title); font-weight:600; color:var(--ink); text-wrap:pretty; }
.center h2,.hero h1,.phero h1,.ctafull h2{ text-wrap:balance; }
h1{ font-size:var(--fs-h1); line-height:1.1; letter-spacing:-.02em; }
h2{ font-size:var(--fs-h2); line-height:1.2; letter-spacing:-.02em; }
h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.01em; }
h4{ font-family:var(--f-body); font-weight:500; font-size:1rem; line-height:1.4; }
/* le nom de l'entreprise dans le H1 : dégradé signature horizontal, il finit sur la terracotta */
.h1-name{ background:var(--grad-h); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-block:.06em; }
.eyebrow{ display:inline-block; font-family:var(--f-body); font-weight:500; font-size:var(--fs-label); line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terra-ink); }
.lead{ font-size:var(--fs-lead); line-height:1.6; 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,.section > .rtk{ position:relative; z-index:1; }
.section.is-tight{ padding-top:48px; }   /* deux sections d'un même thème : écart réduit */
/* grain 3 % 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:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (max-width:767px){ .section{ padding-block:64px; } .section.is-tight{ padding-top:32px; } }
/* flux des fonds : A = lin #F7F3EE, B = #F3E4DD (attribués par flow() au build, bords calés) */
.bg-ab{ background:linear-gradient(180deg,#F7F3EE,#F3E4DD); }
.bg-ba{ background:linear-gradient(180deg,#F3E4DD,#F7F3EE); }
.bg-aba{ background:linear-gradient(180deg,#F7F3EE,#F3E4DD 50%,#F7F3EE); }
.bg-bab{ background:linear-gradient(180deg,#F3E4DD,#F7F3EE 50%,#F3E4DD); }

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

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

/* ---------- Boutons : deux niveaux, coins nets 3px, icône à droite dans la couleur du libellé ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px;
  border-radius:var(--r-btn); border:1.5px solid transparent; white-space:nowrap; font-family:var(--f-body);
  font-weight:500; font-size:1rem; line-height:1.2; letter-spacing:.01em; 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(--grad-btn); color:var(--bg); box-shadow:var(--sh-btn); }
.btn--primary:hover{ filter:brightness(.9); box-shadow:0 2px 4px rgba(90,58,46,.16),0 10px 22px rgba(90,58,46,.22); }
.btn--primary:active{ filter:brightness(.84); }
.btn--ghost{ color:var(--terra-ink); border-color:var(--terra-ink); background:transparent; }   /* bordure 1,5px franche */
.btn--ghost:hover{ background:rgba(174,84,64,.08); }
.btn--ghost:active{ background:rgba(174,84,64,.14); }
/* primaire inversé (sur l'aplat terracotta) : dégradé clair au même angle, texte terracotta */
.btn--light{ background:var(--grad-light); color:var(--terra-ink); box-shadow:0 1px 2px rgba(60,24,16,.18),0 6px 16px rgba(60,24,16,.2); }
.btn--light:hover{ filter:brightness(.96); box-shadow:0 2px 4px rgba(60,24,16,.2),0 10px 22px rgba(60,24,16,.26); }
.btn--light:active{ filter:brightness(.92); }
/* le dégradé couvre aussi la bordure transparente : sinon il s'y répète en filet de 1px sur les bords (après les raccourcis background) */
.btn--primary,.btn--light{ background-origin:border-box; background-repeat:no-repeat; }
/* deux boutons côte à côte : sur une ligne tant qu'ils tiennent, sinon empilés en pleine largeur (classe posée par site.js) */
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; }
.btn-row.is-stacked{ flex-direction:column; align-items:stretch; }
.btn-row.is-stacked .btn{ width:100%; }

/* ---------- Barre d'annonce : dégradé vertical de la terracotta (haut plus clair), opaque, texte lin ---------- */
.annonce{ position:relative; z-index:51; height:var(--ann-h); display:flex; align-items:center; overflow:hidden;
  background:linear-gradient(180deg,#AE5440 0%,#A44F3C 55%,#984835 100%); color:var(--bg); }   /* lin sur le haut le plus clair : 4,6:1 */
.annonce__in{ width:100%; 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:20px; flex:0 0 auto; }
.annonce li{ display:inline-flex; align-items:center; gap:8px; font-size:.875rem; font-weight:500; line-height:1; white-space:nowrap; }
.annonce li .ic{ width:16px; height:16px; color:var(--terra-l); }
.annonce li.sep{ opacity:.75; }
.annonce .tk > .annonce__set[aria-hidden]{ display:none; }
@media (max-width:1400px){   /* bascule mesurée sur la ligne réelle : 1353px de contenu + 48px de marges = 1401px nécessaires : 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 */
}
@media (max-width:767px){ .annonce li{ font-size:.8125rem; } .annonce li .ic{ width:15px; height:15px; } }

/* ---------- Ticker (mécanique commune) ---------- */
.tk{ display:flex; }
.tk.run{ animation:tk var(--tk-dur,30s) linear infinite; will-change:transform; }
.tk.paused{ animation-play-state:paused !important; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes tk-r{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@keyframes tk-in{ from{ transform:translateX(var(--tk-lead)); } to{ transform:translateX(0); } }   /* ticker de cartes : entrée unique depuis le vide de lecture */
@keyframes tkv-up{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes tkv-down{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
@keyframes tkv-in{ from{ transform:translateY(var(--tk-lead)); } to{ transform:translateY(0); } }

/* ---------- Header : verre lin 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,243,238,.94),rgba(247,243,238,.76));
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 2px rgba(90,58,46,.07),0 8px 22px rgba(90,58,46,.10); }
.hdr__bar::after{ content:""; position:absolute; inset:0; background:var(--bg); opacity:0; pointer-events:none;
  transition:opacity var(--dur-open) var(--ease); }
.hdr.is-open .hdr__bar::after{ opacity:1; }
.hdr__bar > .container{ max-width:var(--container-header); height:100%; display:flex; align-items:center; gap:24px;
  flex-wrap:nowrap; position:relative; z-index:1; }
.hdr__brand{ flex:0 0 auto; display:flex; align-items:center; gap:12px; min-height:44px; border-radius:var(--r-btn); transition:opacity var(--dur) var(--ease); }
.hdr__brand:hover{ opacity:.82; }
.hdr__logo{ width:48px; height:48px; flex:0 0 auto; }
.hdr__name{ font-family:var(--f-title); font-weight:600; font-size:1.375rem; line-height:1.1; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.nav{ display:flex; align-items:center; gap:4px; margin-inline:auto; flex-wrap:nowrap; }
.nav__link{ display:inline-flex; align-items:center; flex:0 0 auto; white-space:nowrap; min-height:44px;
  padding:10px 14px; border-radius:var(--r-btn); font-weight:500; font-size:.9375rem; color:var(--ink);
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.nav__link:hover{ background:rgba(174,84,64,.08); color:var(--terra-ink); }
.nav__link[aria-current="page"]{ color:var(--terra-ink); box-shadow:inset 0 -1.5px 0 var(--terra-ink); border-radius:0; }
.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(36,33,31,.22); align-items:center; justify-content:center; color:var(--terra-ink);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease); }
.burger:hover{ background:rgba(174,84,64,.08); border-color:var(--terra-ink); }
.burger .ic{ width:24px; height:24px; }
.burger .ic-x,.hdr.is-open .burger .ic-menu{ display:none; }
.hdr.is-open .burger .ic-x{ display:block; }
.hdr__panel{ display:none; }
@media (max-width:1023px){ .hdr__logo{ width:44px; height:44px; } .hdr__name{ font-size:1.25rem; } }
@media (max-width:767px){ .hdr__logo{ width:40px; height:40px; } .hdr__name{ font-size:1.125rem; } .hdr__brand{ gap:10px; } .hdr__bar > .container{ gap:12px; } }
@media (max-width:1143px){   /* bascule burger mesurée : logo + nom 287px, liens 463px, CTA 250px, gouttières et marges 96px, 24px d'air de part et d'autre de la nav = 1144px */
  .nav,.hdr__cta{ display:none; }
  .burger{ display:inline-flex; }
  /* le panneau se déplie et se replie à sa hauteur exacte (grid-template-rows 0fr → 1fr), sans fondu */
  .hdr__panel{ display:grid; grid-template-rows:0fr; position:absolute; top:100%; left:0; right:0; z-index:2; background:var(--bg);
    box-shadow:0 12px 24px rgba(90,58,46,.12); visibility:hidden;
    transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s linear var(--dur-open); }
  .hdr.is-open .hdr__panel{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-open) var(--ease),visibility 0s; }
  .hdr__scroll{ min-height:0; max-height:calc(100svh - var(--stack-h)); overflow:hidden; }
  .hdr.is-open .hdr__scroll{ overflow-y:auto; }
  .hdr__panel .container{ display:flex; flex-direction:column; gap:4px; padding-block:16px 32px; }
  .hdr__panel a:not(.btn){ display:flex; align-items:center; min-height:48px; padding:12px 8px; border-radius:var(--r-btn);
    font-weight:500; font-size:1rem; color:var(--ink);
    transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease); }
  .hdr__panel a:not(.btn):hover{ background:var(--terra-l); color:var(--terra-ink); }
  .hdr__panel a[aria-current]:not(.btn){ color:var(--terra-ink); }
  .hdr__panel .btn{ margin-top:16px; align-self:stretch; }
}

/* ---------- Hero d'accueil : vraie photo plein cadre (écart assumé), voile sombre 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); color:var(--on-dark); background:#3B3633; }
.hero__media{ position:absolute; inset:0; z-index:-1; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* voile : dégradé sombre global (brun-noir du texte), plus dense au centre et en bas */
.hero__media::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 72% 58% at 50% 56%,rgba(36,33,31,.30),rgba(36,33,31,0) 72%),
    linear-gradient(180deg,rgba(36,33,31,.44) 0%,rgba(36,33,31,.50) 45%,rgba(36,33,31,.66) 100%); }
/* mobile et tablette verticale : recadrage à droite, le volume rond de droite reste entier */
@media (max-width:1023px) and (orientation:portrait){ .hero__img{ object-position:100% 50%; } }
.hero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:24px;
  text-shadow:0 1px 2px rgba(20,16,14,.35),0 2px 22px rgba(20,16,14,.35); }
.hero h1{ color:var(--on-dark); }
/* sur la photo voilée, le nom prend le dégradé clair du site (blanc → terracotta claire) : le dégradé signature y serait illisible */
.hero .h1-name{ background:linear-gradient(90deg,#FFFFFF,#F2DED6); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none; filter:drop-shadow(0 1px 2px rgba(20,16,14,.35)) drop-shadow(0 2px 16px rgba(20,16,14,.3)); }   /* une ombre de texte passerait à travers le texte transparent */
.hero__tag{ font-size:var(--fs-lead); line-height:1.6; color:var(--bg); max-width:100%; text-wrap:balance; }
.hero__cta{ justify-content:center; margin-top:8px; text-shadow:none; }
.hero .btn--ghost,.ctafull .btn--ghost{ color:var(--on-dark); border-color:rgba(255,253,250,.92); }
.hero .btn--ghost:hover,.ctafull .btn--ghost:hover{ background:rgba(255,253,250,.14); }
.hero .btn--ghost:active,.ctafull .btn--ghost:active{ background:rgba(255,253,250,.2); }
/* Pastille Google, version foncée (texte clair) sur la photo : verre, une ligne, s'arrête aux étoiles */
.gpill{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 12px; border-radius:999px;
  background:rgba(36,33,31,.34); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,253,250,.26); white-space:nowrap; text-shadow:none; }
.gpill .g-g{ width:20px; height:20px; flex:0 0 auto; }
.gpill__n{ font-family:var(--f-body); font-weight:500; font-size:1rem; line-height:1; color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
.stars{ --sz:18px; display:inline-flex; align-items:center; gap:2px; }
.stars .star{ width:var(--sz); height:var(--sz); flex:0 0 auto; fill:var(--gold); }
.gpill .stars{ --sz:16px; }
@media (max-width:767px){
  .hero{ padding-block:64px; }
  .hero__in{ gap:20px; }
  .gpill{ padding:6px 12px 6px 10px; gap:8px; }
  .gpill .g-g{ width:16px; height:16px; }
  .gpill__n{ font-size:.875rem; }
  .gpill .stars{ --sz:13px; }
  .hero__cta{ align-self:stretch; }
}
@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); } }
}

/* ---------- Hero de page : radial terracotta claire + logo en filigrane, H1 + tagline seuls ; la section suivante démarre sur le centre (lin) ---------- */
.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%,#F7F3EE 0%,#F7F3EE 26%,#F2DED6 100%); }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.07;
  background:url("../img/logo-madeline-thouron-462.webp") no-repeat center / auto min(62%,300px); }
.phero__in{ width:100%; max-width:var(--container); display:flex; flex-direction:column; align-items:center; gap:16px; }
.phero h1{ font-size:var(--fs-h1-page); max-width:26ch; }
.phero__tag{ font-size:var(--fs-lead); line-height:1.6; color:var(--ink-2); max-width:100%; text-wrap:balance; }
@media (max-width:767px){ .phero{ padding-block:64px; min-height:300px; } }

/* ---------- Notes de maquette : Note = carmin + info, Suggestion = ambre + ampoule ---------- */
.note-wrap{ margin-top:48px; }
.note-wrap .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:var(--bg); }
.mnote--note{ color:var(--note); border-color:rgba(163,36,59,.35); background:linear-gradient(rgba(163,36,59,.06),rgba(163,36,59,.06)),var(--bg); }
.mnote--suggestion{ color:#8A5A0F; border-color:rgba(154,101,18,.38); background:linear-gradient(rgba(154,101,18,.08),rgba(154,101,18,.08)),var(--bg); }
.mnote .ic{ width:24px; height:24px; }
.mnote__label{ display:block; font-weight:500; font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; line-height:1.4; }
.mnote p{ font-size:1rem; line-height:1.55; color:inherit; }
.sec-note .mnote{ margin-inline:auto; }
@media (max-width:767px){ .note-wrap{ margin-top:32px; } .mnote{ padding:16px; gap:12px; } }

/* ---------- Projets en plein cadre : une œuvre par rangée, légende dessous ---------- */
.prows{ display:flex; flex-direction:column; gap:96px; }
.prow{ display:flex; flex-direction:column; gap:24px; color:var(--ink); cursor:pointer; border-radius:var(--r-card); }
.prow__img{ position:relative; overflow:hidden; border-radius:var(--r-card); box-shadow:var(--sh-card); background:var(--terra-l); }
.prow__img::before{ content:""; display:block; padding-top:56.25%; }   /* 16/9 */
.prow__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
/* planche d'ambiance : entière, posée sur la terracotta claire */
.prow__img--contain img{ inset:24px; width:calc(100% - 48px); height:calc(100% - 48px); object-fit:contain; }
.prow:hover .prow__img img,.prow:focus-visible .prow__img img{ transform:scale(1.03); }   /* un seul effet : le zoom lent */
.prow__cap{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"cat ." "t more" "loc ."; column-gap:32px; row-gap:8px; align-items:center; }
.prow__cat{ grid-area:cat; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-weight:500; font-size:var(--fs-label); line-height:1.4;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terra-ink); }
.badge{ display:inline-flex; align-items:center; padding:3px 8px; border-radius:var(--r-btn); background:var(--slate-l); color:var(--slate);
  font-size:.75rem; font-weight:500; line-height:1.4; letter-spacing:.04em; text-transform:none; white-space:nowrap; }
.prow__t{ grid-area:t; }
.prow__loc{ grid-area:loc; display:flex; align-items:center; gap:8px; font-size:1rem; line-height:1.5; color:var(--ink-2); }
.prow__loc .ic{ width:18px; height:18px; color:var(--slate); }
.prow__more{ grid-area:more; display:inline-flex; align-items:center; gap:10px; font-weight:500; font-size:1rem; line-height:1.2; color:var(--terra-ink); white-space:nowrap; }
.prow__more .ic{ width:18px; height:18px; transition:transform var(--dur) var(--ease); }
.prow:hover .prow__more .ic,.prow:focus-visible .prow__more .ic{ transform:translateX(4px); }
.prow:hover .prow__t{ color:var(--terra-ink); }
.prow__t{ transition:color var(--dur) var(--ease); }
/* le lien passe sous la commune quand une légende ne tient pas sur une ligne (posé par le JS sur la largeur réelle, pour toutes les rangées) */
.prows.is-stack .prow__cap{ grid-template-columns:minmax(0,1fr); grid-template-areas:"cat" "t" "loc" "more"; }
.prows.is-stack .prow__more{ justify-self:start; margin-top:8px; }
.after-rows{ display:flex; justify-content:center; margin-top:96px; }
@media (max-width:1023px){ .prows{ gap:64px; } .prow__img::before{ padding-top:66.667%; } .after-rows{ margin-top:64px; } }   /* 3/2 */
@media (max-width:767px){
  .prows{ gap:48px; } .prow{ gap:16px; } .prow__img::before{ padding-top:75%; }   /* 4/3 */
  .prow__img--contain img{ inset:16px; width:calc(100% - 32px); height:calc(100% - 32px); }
  .prow__cap{ grid-template-columns:minmax(0,1fr); grid-template-areas:"cat" "t" "loc" "more"; }
  .prow__more{ justify-self:start; margin-top:8px; }
  .after-rows{ margin-top:48px; }
}

/* ---------- Prestations : onglets, chaque panneau en split texte / image ---------- */
.tabs__scroll{ position:relative; overflow-x:auto; scrollbar-width:none; margin-bottom:48px; box-shadow:inset 0 -1px 0 var(--hairline); }
.tabs__scroll::-webkit-scrollbar{ display:none; }
.tabs__bar{ position:relative; display:flex; width:max-content; gap:8px; }
.tab{ flex:0 0 auto; min-height:52px; padding:16px 16px 14px; font-weight:500; font-size:1rem; line-height:1.2; color:var(--ink-2); white-space:nowrap;
  border-radius:var(--r-btn) var(--r-btn) 0 0; transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease); }
.tab:hover{ color:var(--ink); background:rgba(174,84,64,.07); }
.tab[aria-selected="true"]{ color:var(--terra-ink); }
.tab:focus-visible{ outline-offset:-2px; }
/* l'onglet actif est marqué par un soulignement qui glisse d'un onglet à l'autre (jamais par la couleur seule) */
.tabs__ink{ position:absolute; left:0; bottom:0; height:2px; width:var(--iw,0px); background:var(--terra);
  transform:translateX(var(--ix,0px)); transition:transform var(--dur-tab) var(--ease),width var(--dur-tab) var(--ease); }
.tabs__ink.no-anim{ transition:none; }
/* panneaux superposés dans la même cellule : la zone se cale sur le plus long, le changement est instantané */
.tabs__panels{ display:grid; }
.tpanel{ grid-area:1 / 1; display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); grid-template-areas:"txt img";
  column-gap:64px; align-items:center; visibility:hidden; }
.tpanel.is-active{ visibility:visible; }
.tpanel:focus-visible{ outline-offset:8px; }
.tpanel__img{ grid-area:img; position:relative; overflow:hidden; border-radius:var(--r-card); box-shadow:var(--sh-card); background:var(--terra-l); }
.tpanel__img::before{ content:""; display:block; padding-top:66.667%; }   /* 3/2 */
.tpanel__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tpanel__img--0{ background:#FFFFFF; }
.tpanel__img--0 img{ object-fit:contain; }         /* façades (1,43) : le cadre 3/2 rognerait le titre du haut ou le pied des dessins ; sur le blanc du plan, les 2,5 % de marge latérale ne se voient pas */
.tpanel__img--2 img{ object-position:100% 50%; }   /* planche : le titre « Aménagement » et les deux plans restent entiers */
.tpanel__img--3 img{ object-position:50% 50%; }
.tpanel__txt{ grid-area:txt; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.tpanel__txt p{ color:var(--ink-2); }
@media (max-width:1023px){ .tpanel{ grid-template-columns:minmax(0,1fr); grid-template-areas:"img" "txt"; row-gap:32px; align-items:start; } }
@media (max-width:767px){
  .tabs__scroll{ margin-bottom:32px; margin-inline:calc(-1 * var(--pad)); padding-inline:var(--pad); scroll-padding-inline:var(--pad); }
  .tabs__bar{ gap:0; }
  .tab{ padding-inline:14px; }
  .tpanel{ row-gap:24px; }
}

/* ---------- Méthode : section de contraste (aplat terracotta), en-tête à gauche, frise numérotée verticale à droite ---------- */
.sec-contrast{ background:var(--terra); color:var(--bg); }
.sec-contrast::before{ opacity:.02; }   /* grain un cran plus discret */
.sec-contrast h2,.sec-contrast h3{ color:var(--bg); }
.sec-contrast .eyebrow{ color:var(--bg); }   /* lin : 4,6:1 sur l'aplat (la terracotta claire n'y fait que 3,9:1 en petit) */
.sec-contrast .lead{ color:var(--bg); }   /* lin sur #AE5440 : 4,6:1 (la terracotta claire, 3,9:1, ne passe qu'en très grand) */
.method{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); column-gap:64px; align-items:start; }
.method__head .shead{ margin-bottom:0; }
.method__head .btn{ margin-top:16px; }
@media (min-width:1024px){
  .method.is-sticky .method__head{ position:sticky; top:calc(var(--hdr-h) + 32px); align-self:start; }
}
@media (max-width:1023px){
  .method{ grid-template-columns:minmax(0,1fr); }
  .method__head{ margin-bottom:64px; }
}
@media (max-width:767px){ .method__head{ margin-bottom:48px; } }
/* la frise : chiffre nu très grand à gauche, petit point sur la ligne, titre et texte à droite */
.frise{ position:relative; --num-w:clamp(4rem,3rem + 3.2vw,6rem); --dot:14px; }
.frise__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:64px; }
.fstep{ display:grid; grid-template-columns:var(--num-w) 24px minmax(0,1fr); grid-template-areas:"num dot title" "num . text";
  column-gap:24px; row-gap:12px; align-items:center; }
.fstep__n{ grid-area:num; align-self:start; font-family:var(--f-body); font-weight:500; font-size:clamp(3.5rem,2.6rem + 3vw,5.25rem); line-height:.82;
  letter-spacing:-.04em; text-align:right; color:var(--terra-l); font-variant-numeric:tabular-nums lining-nums; transition:color .4s var(--ease); }
.fstep__dot{ grid-area:dot; justify-self:center; position:relative; z-index:1; width:var(--dot); height:var(--dot); border-radius:50%;
  background:var(--terra); box-shadow:0 0 0 2px var(--bg); transition:background-color .4s var(--ease); }
.fstep__t{ grid-area:title; }
.fstep__p{ grid-area:text; color:var(--bg); }
/* chaque repère s'allume quand la ligne l'atteint (is-on) et s'éteint quand on remonte ; l'étape apparaît au passage puis reste (is-vu) */
.js .fstep{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.js .fstep.is-vu{ opacity:1; transform:none; }
.js .fstep:not(.is-on) .fstep__n{ color:rgba(242,222,214,.38); }
.fstep.is-on .fstep__dot{ background:var(--dc); }
/* le point prend la couleur de la ligne à son niveau ; le dernier, plein du dégradé signature (calque qui apparaît en fondu) */
.fstep:nth-child(1){ --dc:#C26751; } .fstep:nth-child(2){ --dc:color-mix(in oklch,#C26751 75%,#3F4C57); }
.fstep:nth-child(3){ --dc:color-mix(in oklch,#C26751 50%,#3F4C57); } .fstep:nth-child(4){ --dc:color-mix(in oklch,#C26751 25%,#3F4C57); }
.fstep:last-child .fstep__dot{ isolation:isolate; }
.fstep:last-child .fstep__dot::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:var(--grad); transition:opacity .4s var(--ease); }
.js .fstep:last-child:not(.is-on) .fstep__dot::before{ opacity:0; }
.fstep:last-child.is-on .fstep__dot{ background:transparent; }
/* la ligne : dégradé signature dans la longueur, à pleine opacité, liserée de lin pour se lire sur l'aplat ;
   le JS la cale entre le premier et le dernier point et la dévoile au scroll par clip-path (aucune transition) */
.frise__rail{ position:absolute; left:0; top:0; height:0; width:5px; margin-left:-2.5px; }
.frise__fill{ position:absolute; inset:0; will-change:clip-path; background:var(--grad-v);
  border-inline:1px solid rgba(247,243,238,.7); background-clip:padding-box; }
.js .frise__fill{ clip-path:inset(0 0 100% 0); }
@media (max-width:767px){
  .frise{ --num-w:3.5rem; --dot:12px; }
  .frise__steps{ gap:48px; }
  .fstep{ grid-template-columns:var(--num-w) 20px minmax(0,1fr); column-gap:16px; row-gap:8px; }
  .fstep__n{ font-size:3.25rem; }
}

/* ---------- Qui je suis : split avec chevauchement (panneau texte sur le portrait) + bande de stats nue ---------- */
.about{ display:grid; grid-template-columns:304px 96px minmax(0,1fr); align-items:start; }   /* portrait de 400px (304 + 96), le panneau mord de 96px */
.about__img{ grid-column:1 / 3; grid-row:1; position:relative; width:400px; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sh-card); background:var(--slate-l); }
.about__img::before{ content:""; display:block; padding-top:117.44%; }   /* 407 × 478, jamais agrandi */
.about__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* le panneau mord sur le côté droit du portrait (les cheveux, jamais le visage) ; il se détache par l'ombre et son fond plein */
.about__panel{ grid-column:2 / 4; grid-row:1; position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px; margin-top:96px; padding:48px 64px; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.about__panel h2{ margin-bottom:8px; }
.about__panel p{ color:var(--ink-2); }
@media (max-width:1023px){
  .about{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  .about__img{ grid-column:1; width:min(100%,407px); }
  .about__panel{ grid-column:1; grid-row:2; margin:-96px 48px 0; justify-self:stretch; padding:48px; }   /* le panneau remonte sur le bas du portrait, retrait latéral gardé */
}
@media (max-width:767px){
  .about__panel{ margin:-48px 16px 0; padding:32px 24px; }   /* recouvrement réduit de moitié, marges négatives verticales seulement */
}
/* bande de stats nue : chiffres sur le fond, centrés, labels sur une ligne */
.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:64px; }
.stat{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; min-width:0; }
.stat__n{ font-family:var(--f-body); font-weight:500; font-size:clamp(2.75rem,2rem + 2.4vw,4rem); line-height:1; letter-spacing:-.03em;
  color:var(--slate); font-variant-numeric:tabular-nums lining-nums; }
.stat__l{ font-weight:500; font-size:.9375rem; line-height:1.4; color:var(--ink-2); white-space:nowrap; }
@media (max-width:1023px){ .stat__l{ font-size:.875rem; } }   /* « Dossiers d'urbanisme déposés » tient sur une ligne dans le tiers de 768px (216 / 224px) */
@media (max-width:767px){
  .stats{ margin-top:48px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 16px; }
  .stat__l{ font-size:.8125rem; }
  /* deux en haut, l'orpheline (le label le plus long) en bas sur toute la largeur, centrée comme les deux du dessus */
  .stat--1{ order:3; grid-column:1 / -1; }
}

/* ---------- Avis : en-tête + bloc note, ticker de deux rangées sur toute la largeur ---------- */
.avis__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:48px; }
.avis__head .shead{ margin-bottom:0; }
.rating{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:0 0 auto; }
.rating__l1{ display:flex; align-items:center; gap:12px; }
.rating__n{ font-family:var(--f-body); font-weight:500; font-size:2.75rem; line-height:1; letter-spacing:-.02em;
  color:var(--gold); font-variant-numeric:tabular-nums lining-nums; }
.rating .stars{ --sz:24px; }
.rating__l2{ display:flex; align-items:center; gap:10px; }
.rating__c{ font-weight:500; font-size:1rem; line-height:1; color:var(--ink); }
.g-word{ height:22px; width:auto; }
@media (max-width:767px){
  .avis__head{ flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:32px; }
  .rating{ align-items:flex-start; }
  .rating__n{ font-size:2.25rem; }
  .rating .stars{ --sz:20px; }
}
.rtk{ position:relative; overflow:hidden; padding-block:14px 36px; margin-top:-14px;
  -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); }
.rtk__rows{ display:flex; flex-direction:column; gap:24px; }
.rtk .tk{ width:max-content; }
.rtk .tk__set{ display:flex; gap:var(--tk-gap); padding-right:var(--tk-gap); flex:0 0 auto; }   /* la gouttière après la dernière carte de chaque copie : écart constant au raccord */
.rtk .tk.run[data-row="right"]{ animation-name:tk-r; }
.rtk .tk.run[data-dir="up"]{ animation-name:tkv-up; }
.rtk .tk.run[data-dir="down"]{ animation-name:tkv-down; }
.rtk:not(.is-seen) .tk.run{ animation-play-state:paused !important; }   /* démarre à l'arrivée dans l'écran (site.js) */
@media (max-width:1023px){
  .rtk.is-v{ max-width:var(--container); height:85svh; margin:0 auto; padding:0 var(--pad); overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent);
    mask-image:linear-gradient(180deg,transparent,#000 var(--tk-fade),#000 calc(100% - var(--tk-fade)),transparent); }
  .rvc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--tk-gap); align-items:start; }
  .rvc__col{ min-width:0; }
  .rtk.is-v .tk{ flex-direction:column; width:auto; }
  .rtk.is-v .tk__set{ flex-direction:column; padding:0 0 var(--tk-gap); }   /* à la verticale : la gouttière sous la dernière carte de chaque copie */
  .rtk.is-v .rv{ width:auto; }
  /* sans JS : les cartes en simple pile, sans défilement horizontal */
  html:not(.js) .rtk{ max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); -webkit-mask-image:none; mask-image:none; }
  html:not(.js) .rtk .tk{ width:auto; }
  html:not(.js) .rtk .rtk__rows .tk{ flex-direction:column; }
  html:not(.js) .rtk .tk__set{ flex-direction:column; padding-right:0; }
  html:not(.js) .rtk .tk__set[aria-hidden]{ display:none; }
  html:not(.js) .rtk .rv{ width:auto; }
}
@media (max-width:767px){ .rvc{ grid-template-columns:minmax(0,1fr); } }
/* carte d'avis : toutes à la même taille ; hauteur calée par le JS sur le plus long avis (Lynda) à la largeur courante */
.rv{ flex:0 0 auto; width:360px; height:var(--rv-h,auto); display:flex; flex-direction:column; gap:16px; padding:32px;
  background:var(--surface); color:var(--ink); border-radius:var(--r-card); box-shadow:var(--sh-soft);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); }
.rv:hover{ transform:translateY(-3px); box-shadow:0 2px 4px rgba(90,58,46,.08),0 10px 22px rgba(90,58,46,.12),inset 0 1px 0 rgba(255,252,247,.7); }   /* ombre moyenne contenue dans le padding du ticker */
.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:var(--bg);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-title); font-weight:600; font-size:1.375rem; line-height:1; }
.rv__who{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0; }
.rv__name{ font-weight:500; font-size:1rem; line-height:22px; color:var(--ink); }
.stars--sm{ --sz:16px; }
.rv__g{ flex:0 0 auto; line-height:0; }   /* le G seul, calé sur le haut de l'en-tête, jamais collé aux étoiles */
.rv__g .g-g{ width:22px; height:22px; }
.rv__txt{ color:var(--ink); font-size:1rem; line-height:1.6; }
.rv-cta{ justify-content:center; margin-top:12px; }   /* le padding bas du ticker (36px) + 12px = 48px */
@media (max-width:1023px){ .rv-cta{ margin-top:48px; } }
@media (max-width:767px){ .rv{ padding:32px 24px; } .rv__g .g-g{ width:30px; height:30px; } .rv-cta{ margin-top:32px; } }

/* ---------- FAQ : accordéon à filets, une colonne centrée ---------- */
.faq{ max-width:800px; 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(--terra-ink); background:rgba(174,84,64,.06); }
.faq__q .ic{ width:22px; height:22px; margin-top:3px; color:var(--terra-ink); transition:transform var(--dur-faq) var(--ease); }
.faq__item.is-open .faq__q .ic{ transform:rotate(180deg); }
.faq__a{ display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows var(--dur-faq) var(--ease),visibility 0s linear var(--dur-faq); }
.faq__a > div{ overflow:hidden; min-height:0; }
.faq__a p{ color:var(--ink-2); padding:0 56px 24px 16px; }   /* la réponse s'aligne sur la question et s'arrête au niveau du chevron */
.faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--dur-faq) var(--ease),visibility 0s; }
@media (max-width:767px){ .faq__q{ font-size:1.25rem; padding:16px 8px; } .faq__a p{ padding:0 8px 16px; } .faq__item + .faq__item::before{ left:8px; right:8px; } }

/* ---------- Section CTA pleine page : vraie photo bord à bord (écart assumé) sous un voile fort ---------- */
.ctafull{ position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; min-height:clamp(480px,72svh,760px); padding:128px 0; color:var(--on-dark); text-align:center; background:#3B3633; }
.ctafull__bg{ position:absolute; inset:0; z-index:-1; }
.ctafull__img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
/* voile ancré côté texte (au centre), opacité réglée sur le contraste mesuré dans la zone du texte */
.ctafull__bg::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 64% 62% at 50% 50%,rgba(36,33,31,.34),rgba(36,33,31,0) 75%),
    linear-gradient(180deg,rgba(36,33,31,.52),rgba(36,33,31,.62)); }
.ctafull > .container{ width:100%; }
.ctafull__in{ max-width:var(--container); margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:24px;
  text-shadow:0 1px 2px rgba(20,16,14,.35),0 2px 22px rgba(20,16,14,.35); }
.ctafull h2{ color:var(--on-dark); }
.ctafull__lead{ font-size:var(--fs-lead); line-height:1.6; color:var(--bg); max-width:42rem; text-wrap:balance; }
.ctafull__btns{ justify-content:center; margin-top:8px; text-shadow:none; }
@media (max-width:767px){ .ctafull{ padding:96px 0; } .ctafull__btns{ align-self:stretch; } }

/* ---------- Contact : formulaire posé sur la section, avec coordonnées (7 / 5) ---------- */
.cgrid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:start; }
.form-body{ display:flex; flex-direction:column; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-weight:500; font-size:1rem; line-height:1.4; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--ink-2); margin-left:4px; }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:12px 16px; font:inherit; font-size:1rem; line-height:1.5;
  color:var(--ink); background:var(--surface); border:1px solid rgba(36,33,31,.32); 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:#6E6660; opacity:1; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--terra-ink); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:2px solid var(--terra); outline-offset:3px; border-color:var(--terra-ink); }
.field select{ appearance:none; -webkit-appearance:none; padding-right:48px; 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='%239D4C3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");   /* chevron-down Lucide, refait à la main en fond (appearance:none) */
  background-repeat:no-repeat; background-position:right 16px center; background-size:18px; }
.field select:invalid{ color:#6E6660; }
.sel{ position:relative; }
.sel__ph{ display:none; position:absolute; left:17px; right:48px; top:50%; transform:translateY(-50%); pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#6E6660; 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); }
.err{ display:none; font-size:var(--fs-caption); font-weight:500; 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); }
.form-send{ margin-top:32px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.form.is-busy .form-send .btn--primary{ opacity:.7; pointer-events:none; }
.form-ko{ font-weight:500; 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(--terra-ink); text-decoration:underline; text-underline-offset:3px; transition:color var(--dur) var(--ease); }
.form-foot a:hover{ color:var(--ink); }
.form-ok{ padding:24px; border-radius:var(--r-card); background:var(--surface); box-shadow:var(--sh-card); color:var(--ink); font-weight:500; }
.form-ok:focus{ outline:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.icards{ display:flex; flex-direction:column; gap:24px; }
.icard{ padding:32px; background:var(--surface); border-radius:var(--r-card); box-shadow:var(--sh-card); }
.icard h3{ margin-bottom:16px; }
.icard__h{ display:flex; align-items:center; gap:12px; }
.icard__h .ic{ width:22px; height:22px; color:var(--slate); }
.icard__rows{ display:flex; flex-direction:column; gap:12px; }
.icard .row{ display:flex; align-items:flex-start; gap:12px; }
.icard .row .ic{ color:var(--slate); margin-top:3px; }
.icard a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px; transition:color var(--dur) var(--ease); }
.icard a:hover{ color:var(--terra-ink); }
.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:500; }
.hrow .d{ text-align:right; color:var(--ink-2); }
.hrow--note > span:first-child{ font-weight:400; color:var(--ink-2); }
@media (max-width:1023px){ .cgrid{ grid-template-columns:minmax(0,1fr); gap:48px; } }
@media (max-width:767px){
  .icard{ padding:32px 24px; }
  .form-send{ align-items:stretch; }
  .form-send .btn{ width:100%; }
}

/* ---------- Footer : terracotta claire unie, Maps bord à bord, identité en trois colonnes à la largeur mesurée ---------- */
.foot{ background:var(--terra-l); color:var(--ink); }
.foot__map{ position:relative; height:360px; background:var(--B); }
.foot__map iframe{ position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.foot__id{ padding-top:48px; }
.foot__grid > *{ min-width:0; }
.foot__logolink{ display:inline-flex; border-radius:var(--r-btn); margin-bottom:12px; transition:opacity var(--dur) var(--ease); }
.foot__logolink:hover{ opacity:.82; }
.foot__logo{ width:48px; height:48px; }   /* même taille que dans le header */
.foot__name{ font-size:1.5rem; line-height:1.25; letter-spacing:-.01em; }
.foot__pos{ font-weight:500; font-size:1rem; line-height:1.45; color:var(--terra-ink); margin-top:2px; }
.foot__tag{ color:var(--ink-2); margin-top:12px; }
.foot__h{ font-family:var(--f-body); font-weight:500; font-size:var(--fs-label); line-height:1.4; letter-spacing:.14em;
  text-transform:uppercase; color:var(--terra-ink); margin-bottom:12px; }
.foot__h--legal{ margin-top:32px; }
.foot__links{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.foot__links a,.foot__info a{ cursor:pointer; display:inline-block; padding-block:10px; margin-block:-10px; transition:color var(--dur) var(--ease),transform var(--dur) var(--ease); }
.foot__links a:hover,.foot__info a:hover{ color:var(--terra-ink); transform:translateX(3px); }
.foot__info{ display:flex; flex-direction:column; gap:12px; }
.foot__info .row{ display:flex; align-items:flex-start; gap:10px; }
.foot__info .row--fold > span{ text-wrap:balance; }
.foot__info .ic{ width:20px; height:20px; margin-top:3px; color:var(--slate); }
.foot__social{ margin-top:32px; }
.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:44px; height:44px; } }
@media (max-width:767px){ .foot__map{ height:280px; } .foot__logo{ width:40px; height:40px; } }
/* Configuration mobile (sous la largeur mesurée où l'air entre les colonnes, mesuré sur les lettres, atteint 64px : 1018px) : une colonne */
@media (max-width:1017px){
  .foot__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap: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; }
  .foot__bar{ flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:calc(32px + env(safe-area-inset-bottom)); }
}
/* trois colonnes serrées sur leur texte, qui se répartissent avec le même air entre elles */
@media (min-width:1018px){
  .foot__grid{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:space-between; column-gap:64px; }
  .foot__col{ padding-top:60px; }   /* première ligne au niveau du nom, pas du logo (48 + 12) */
  .foot__tag > span{ display:block; }
  .foot__pos,.foot__info .row--fold > span{ contain:inline-size; }
  .foot__info .row--fold > span{ flex:1 1 0; }
}
@media (min-width:1018px) and (max-width:1023px){ .foot__col{ padding-top:56px; } }
/* ordinateur : le footer prend la largeur du header (1320px), gouttière minimale 48px */
@media (min-width:1024px){ .foot > .container{ max-width:var(--container-header); } .foot__grid{ column-gap:48px; } }

/* ==========================================================================
   Effets : montés en dernier (Phase finale)
   ========================================================================== */
/* état masqué posé sans transition ; les transitions ne s'allument qu'après (fx-on), sinon le fondu de masquage au chargement
   déclenche transitionend et efface la cascade */
html.js-ready [data-reveal]{ opacity:0; transform:translateY(30px); }
html.fx-on [data-reveal]{ transition:opacity var(--dur-in) var(--ease),transform var(--dur-in) var(--ease); }
html.js-ready [data-reveal].is-in{ opacity:1; transform:none; }
.hero--pin{ position:sticky; top:0; z-index:0; }
.page-flow{ position:relative; z-index:2; background:var(--bg); }
.is-home .page-flow{ box-shadow:0 -10px 28px rgba(90,58,46,.10),0 -1px 2px rgba(90,58,46,.06); }   /* le rideau se lit en remontant sur le hero */

/* ---------- 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; }
  .js .fstep{ opacity:1; transform:none; }
  .js .frise__fill{ clip-path:none; }
  .rtk,.annonce__in{ overflow-x:auto; }
  .rtk.is-v{ overflow-x:hidden; overflow-y:auto; }
  .rtk,.annonce__in{ -webkit-mask-image:none; mask-image:none; }
  .tk > .tk__set[aria-hidden],.annonce .tk > .annonce__set[aria-hidden]{ display:none !important; }
  @media (max-width:1400px){ .annonce__set{ padding-inline:var(--pad); } }
  .prow__img img{ transform:none !important; }
}