/* ============================================================
   FLO'S DÉCO — Design system "Matière vivante, couleur vivante"
   Shared stylesheet for homepage + service pages.
   Palette : crème enduit + anthracite, accent terracotta ocre,
   vert tropical secondaire, et le SPECTRE de marque (logo rainbow)
   réutilisé comme motif signature.
   ============================================================ */

/* ---- Design tokens ---------------------------------------- */
:root{
  /* base */
  --cream:        #F4EFE6;   /* enduit frais */
  --paper:        #EDE5D6;   /* crème plus profond */
  --ink:          #1C1C1C;   /* anthracite titres */
  --ink-soft:     #2C2825;   /* corps */
  --muted:        #6B6258;   /* texte secondaire */
  --line:         #D8CDBB;   /* hairlines */

  /* accents (piloté par Tweaks => --accent) */
  --accent:       #c0356b;   /* framboise — dominante */
  --accent-deep:  #a0255b;
  --green:        #3E9B6D;   /* vert tropical — secondaire */

  /* spectre de marque (issu du logo rainbow) */
  --c1:#C0356B;  /* framboise */
  --c2:#E0792E;  /* orange    */
  --c3:#E8B23A;  /* jaune     */
  --c4:#3E9B6D;  /* vert      */
  --c5:#1C9AA6;  /* turquoise */
  --c6:#2A5C8F;  /* bleu      */
  --spectrum: linear-gradient(90deg,
     var(--c1) 0%, var(--c2) 20%, var(--c3) 40%,
     var(--c4) 60%, var(--c5) 80%, var(--c6) 100%);

  /* intensité du spectre (piloté par Tweaks : 0 sobre … 1 vibrant) */
  --spectrum-strength: .85;

  /* type */
  --display: "Helvetica Neue", "Hanken Grotesk", "Helvetica", Arial, sans-serif;
  --title-weight: 300;   /* titres & sous-titres : Helvetica Neue light */
  --sans: "DM Sans", system-ui, -apple-system, sans-serif;

  /* rythme */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 16px;       /* arrondi généreux & cohérent (cadres, cartes, images) */
  --radius-sm: 12px;    /* petits éléments */
  --radius-lg: 20px;    /* grands blocs / héros */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:var(--title-weight); color:var(--ink); line-height:1.06; letter-spacing:-.02em; }
p{ margin:0 0 1em; text-wrap:pretty; }

/* paper grain overlay */
body.no-grain::before{ display:none; }
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Reusable atoms --------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

.eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow .idx{ color:var(--muted); font-variant-numeric:tabular-nums; }

/* signature spectrum rule (le swoosh arc-en-ciel réinterprété) */
.spectrum-rule{
  height:3px; width:100%; border:0; border-radius:3px;
  background:var(--spectrum);
  opacity:var(--spectrum-strength);
}
.spectrum-rule.short{ width:84px; }
.spectrum-rule.tall{ height:5px; }

/* swoosh décoratif (trait courbe multicolore) */
.swoosh{ display:block; width:100%; height:auto; opacity:var(--spectrum-strength); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:16px 26px; border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent;
  transition:all .35s var(--ease);
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(5px); }
.btn-solid{ background:var(--accent); color:#fff; }
.btn-solid:hover{ background:var(--accent-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-light{ background:var(--cream); color:var(--ink); }
.btn-light:hover{ background:#fff; }
.btn-outline-light{ background:transparent; color:var(--cream); border-color:rgba(244,239,230,.5); }
.btn-outline-light:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* ---- Scroll reveal ---------------------------------------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  /* transparent immersif : l'image héro passe sous le header */
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.nav.scrolled{
  background:rgba(244,239,230,.78);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line);
  padding-top:12px; padding-bottom:12px;
  box-shadow:0 8px 28px rgba(28,28,28,.09);
}
.nav__logo{ display:flex; align-items:center; }
/* logo couleur sur toutes les pages — plus grand en haut, taille réduite au scroll */
.nav__logo img{ height:clamp(80px, 9vw, 106px); width:auto; transition:height .45s var(--ease), filter .45s var(--ease); filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)) drop-shadow(0 5px 20px rgba(0,0,0,.5)); }
.nav.scrolled .nav__logo img{ height:46px; filter:none; }
.nav__links{ display:flex; align-items:center; gap:34px; }
.nav__links a{
  font-size:14px; font-weight:500; letter-spacing:.02em; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
  position:relative; padding-bottom:3px; transition:color .45s var(--ease), text-shadow .45s var(--ease);
}
.nav.scrolled .nav__links a{ color:var(--ink-soft); text-shadow:none; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--spectrum); transition:width .35s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__cta{
  font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 22px; border:1px solid rgba(255,255,255,.65); border-radius:100px; color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
  transition:all .4s var(--ease);
}
.nav__cta:hover{ background:#fff; color:var(--ink); border-color:#fff; text-shadow:none; }
.nav.scrolled .nav__cta{ border-color:var(--ink); color:var(--ink); text-shadow:none; }
.nav.scrolled .nav__cta:hover{ background:var(--ink); color:var(--cream); }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:#fff; display:block; box-shadow:0 1px 6px rgba(0,0,0,.4); transition:background .45s var(--ease), box-shadow .45s var(--ease); }
.nav.scrolled .nav__burger span{ background:var(--ink); box-shadow:none; }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:49; background:var(--cream);
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:var(--gutter); transform:translateY(-100%); transition:transform .5s var(--ease);
}
.drawer.open{ transform:none; }
.drawer a{ font-family:var(--display); font-size:34px; color:var(--ink); padding:8px 0; border-bottom:1px solid var(--line); }

/* ============================================================
   HERO — plein écran immersif (image 100vh sous le header)
   ============================================================ */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; }
/* dégradé sombre en haut (lisibilité logo+menu) + voile bas (lisibilité texte) */
.hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%);
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:62%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(16,14,12,.82) 0%, rgba(16,14,12,.35) 40%, transparent 100%);
}
/* rideau d'enduit sur l'image au chargement */
.hero__curtain{
  position:absolute; inset:0; z-index:3; background:var(--paper);
  transform-origin:top; transform:scaleY(1);
  transition:transform 1.1s var(--ease) .15s;
}
.hero.ready .hero__curtain{ transform:scaleY(0); }

.hero__content{
  position:relative; z-index:2; color:#fff;
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gutter) clamp(64px,10vh,120px);
}
.hero__eyebrow{ margin-bottom:26px; color:#fff; }
.hero__eyebrow .idx{ color:rgba(255,255,255,.78); }
.hero h1{
  font-size:clamp(46px, 6.6vw, 104px);
  line-height:1.0; letter-spacing:-.02em; font-weight:var(--title-weight); color:#fff;
  margin-bottom:0; max-width:15ch; text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.hero h1 .lead{ font-style:italic; font-weight:400; color:var(--c3); }
.hero h1 .word{ display:inline-block; vertical-align:top; }
.hero h1 .word > span{
  display:inline-block; opacity:0; transform:translateY(40px);
  transition:transform 1s var(--ease), opacity 1s var(--ease);
}
.hero.ready h1 .word > span{ opacity:1; transform:none; }
.hero h1 .word:nth-child(2) > span{ transition-delay:.09s; }
.hero h1 .word:nth-child(3) > span{ transition-delay:.18s; }
.hero h1 .word:nth-child(4) > span{ transition-delay:.27s; }
.hero h1 .word:nth-child(5) > span{ transition-delay:.36s; }
.hero__sub{
  margin-top:26px; max-width:46ch; font-size:clamp(17px,1.5vw,20px); color:rgba(255,255,255,.9);
  text-shadow:0 1px 14px rgba(0,0,0,.4);
  opacity:0; transform:translateY(14px); transition:all .9s var(--ease) .6s;
}
.hero.ready .hero__sub{ opacity:1; transform:none; }
.hero__rule{
  margin:30px 0 30px; max-width:240px;
  opacity:0; transition:opacity .9s var(--ease) .7s;
}
.hero.ready .hero__rule{ opacity:var(--spectrum-strength); }
.hero__cta{
  display:flex; flex-wrap:wrap; gap:14px;
  opacity:0; transform:translateY(14px); transition:all .9s var(--ease) .8s;
}
.hero.ready .hero__cta{ opacity:1; transform:none; }
.hero__tag{
  position:absolute; right:var(--gutter); bottom:30px; z-index:2;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#fff;
  background:rgba(28,28,28,.42); backdrop-filter:blur(4px);
  padding:8px 14px; border-radius:100px;
  opacity:0; transition:opacity .8s ease 1.1s;
}
.hero.ready .hero__tag{ opacity:1; }

/* ============================================================
   SECTION scaffolding
   ============================================================ */
.section{ position:relative; padding:clamp(72px,10vw,140px) 0; }
.section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section__head h2{ font-size:clamp(34px,4.6vw,64px); max-width:16ch; }
.section__head .lede{ max-width:40ch; color:var(--muted); font-size:16px; line-height:1.65; }
.section__head .lede .spectrum-rule{ margin-bottom:18px; }

/* ---- Intro / accroche (mono-colonne, centrée) ------------- */
.intro{ background:var(--cream); }
.intro--solo{ text-align:center; }
.intro__col{ max-width:940px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.intro__title{ font-size:clamp(34px,5vw,66px); line-height:1.05; margin:26px 0 0; max-width:18ch; }
.intro__title em{ font-style:italic; color:var(--accent); }
.intro__say{ margin-top:28px; max-width:64ch; color:var(--muted); font-size:16px; line-height:1.7; }
.intro__say em{ font-style:italic; color:var(--ink-soft); }
.intro--solo .spectrum-rule{ margin:42px auto 0; }

.intro__stats{
  display:flex; width:100%; margin-top:50px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.intro__stats .stat{ flex:1; padding:34px 18px; border-left:1px solid var(--line); text-align:center; }
.intro__stats .stat:first-child{ border-left:0; }
.stat .n{ font-family:var(--display); font-size:clamp(38px,4.6vw,62px); color:var(--ink); line-height:1; font-weight:600; }
.stat .n b{ color:var(--accent); font-weight:600; }
.stat .n sup{ font-size:.42em; vertical-align:super; color:var(--muted); margin-left:1px; }
.stat .n .pc{ color:var(--accent); }
.stat .l{ font-size:13px; letter-spacing:.04em; color:var(--muted); margin:12px auto 0; max-width:16ch; }

.intro__cta{ margin-top:46px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.intro__note{ font-size:14px; color:var(--muted); letter-spacing:.01em; max-width:42ch; }

@media (max-width:680px){
  .intro__stats{ flex-wrap:wrap; }
  .intro__stats .stat{ flex:1 1 50%; border-left:1px solid var(--line); border-top:1px solid var(--line); }
  .intro__stats .stat:nth-child(odd){ border-left:0; }
  .intro__stats .stat:nth-child(-n+2){ border-top:0; }
}

/* ---- Points forts (3 piliers) ----------------------------- */
.piliers{ background:var(--paper); }
.piliers__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); }
.pilier{ padding:48px 36px 44px; border-left:1px solid var(--line); position:relative; }
.pilier:first-child{ border-left:0; }
.pilier .pico{ width:52px; height:52px; margin-bottom:30px; color:var(--accent); }
.pilier .num{ position:absolute; top:24px; right:28px; font-family:var(--display); font-size:18px; color:var(--line); }
.pilier h3{ font-size:26px; margin-bottom:12px; }
.pilier p{ color:var(--muted); font-size:16px; line-height:1.65; }
.pilier p + p{ margin-top:12px; }
.pilier .more{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-top:18px; display:inline-flex; gap:.5em; }

/* ============================================================
   PICTOS SVG ANIMES (section 02 · Points forts)
   Socle commun repris une seule fois des trois fichiers sources
   (picto-rouleau.css / picto-medaille.css / picto-palette.css).
   ============================================================ */

/* ---- Socle commun -------------------------------------- */
.picto{display:block;width:80px;height:80px;overflow:visible;animation:pictoIn .8s var(--ease,cubic-bezier(.22,.7,.2,1)) both;animation-delay:calc(var(--i,0) * .09s)}
.picto *{vector-effect:non-scaling-stroke}
@keyframes pictoIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes drawIn{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .picto,.picto *{animation:none !important;transition:none !important;opacity:1 !important;transform:none !important;stroke-dasharray:none !important;stroke-dashoffset:0 !important}
}

/* ---- 1A · Rouleau de peinture : geste de peinture au survol --- */
.p-roll .roller{transform-box:fill-box;transform-origin:50% 50%}
.card:hover .p-roll .roller,.pilier:hover .p-roll .roller,.p-roll:hover .roller{animation:rollStroke 1.5s var(--ease,cubic-bezier(.22,.7,.2,1)) infinite}
@keyframes rollStroke{0%,100%{transform:translateY(0)}30%{transform:translateY(-4.5px)}70%{transform:translateY(3.5px)}}
.p-roll .trail{stroke-dasharray:100;stroke-dashoffset:100;opacity:0}
.card:hover .p-roll .trail,.pilier:hover .p-roll .trail,.p-roll:hover .trail{animation:trailPaint 1.5s var(--ease,cubic-bezier(.22,.7,.2,1)) infinite}
@keyframes trailPaint{0%{stroke-dashoffset:100;opacity:0}25%{opacity:.9}60%{stroke-dashoffset:0;opacity:.9}100%{stroke-dashoffset:0;opacity:0}}

/* ---- 2A · Medaille : le check se dessine au chargement puis en boucle au survol --- */
.p-medal .check{stroke-dasharray:100;animation:drawIn 1s var(--ease,cubic-bezier(.22,.7,.2,1)) both;animation-delay:calc(var(--i,0) * .09s + .25s)}
.card:hover .p-medal .check,.pilier:hover .p-medal .check,.p-medal:hover .check{animation:checkDraw 1.6s var(--ease,cubic-bezier(.22,.7,.2,1)) infinite}
@keyframes checkDraw{0%{stroke-dashoffset:100}38%,76%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.p-medal .disc{transform-box:fill-box;transform-origin:50% 50%}
.card:hover .p-medal .disc,.pilier:hover .p-medal .disc,.p-medal:hover .disc{animation:discPulse 1.6s var(--ease,cubic-bezier(.22,.7,.2,1)) infinite}
@keyframes discPulse{0%,100%{transform:scale(1)}45%{transform:scale(1.06)}}
.p-medal .ribbon{transform-box:fill-box;transform-origin:50% 0}
.card:hover .p-medal .ribbon,.pilier:hover .p-medal .ribbon,.p-medal:hover .ribbon{animation:ribbonSway 2.8s var(--ease,cubic-bezier(.22,.7,.2,1)) infinite}
@keyframes ribbonSway{0%,100%{transform:rotate(0)}35%{transform:rotate(3.5deg)}70%{transform:rotate(-3deg)}}

/* ---- 3A · Palette : inclinaison douce + pastilles en cascade --- */
.p-pal .pal{transform-box:fill-box;transform-origin:50% 54%;transition:transform .9s var(--ease,cubic-bezier(.22,.7,.2,1))}
.card:hover .p-pal .pal,.pilier:hover .p-pal .pal,.p-pal:hover .pal{transform:rotate(-9deg)}
.p-pal .dot{transform-box:fill-box;transform-origin:50% 50%}
.card:hover .p-pal .dot,.pilier:hover .p-pal .dot,.p-pal:hover .dot{animation:dotPulse 2.1s var(--ease,cubic-bezier(.22,.7,.2,1)) infinite}
.card:hover .p-pal .dot:nth-of-type(2),.pilier:hover .p-pal .dot:nth-of-type(2),.p-pal:hover .dot:nth-of-type(2){animation-delay:.16s}
.card:hover .p-pal .dot:nth-of-type(3),.pilier:hover .p-pal .dot:nth-of-type(3),.p-pal:hover .dot:nth-of-type(3){animation-delay:.32s}
.card:hover .p-pal .dot:nth-of-type(4),.pilier:hover .p-pal .dot:nth-of-type(4),.p-pal:hover .dot:nth-of-type(4){animation-delay:.48s}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.22);opacity:1}}

/* ---- Integration dans les cartes piliers ---------------- */
/* Taille d affichage demandee : 96px (le socle est livre en 80px). */
.picto{ width:96px; height:96px; }
/* Reprend la respiration que .pilier .pico assurait avec son margin-bottom. */
.pilier__icon{ margin-bottom:30px; }
.pilier__icon img{ display:block; }

/* ---- Services (carousel — scroll horizontal) -------------- */
.services{ background:var(--cream); }
.services__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.svc{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--ink); display:flex; isolation:isolate;
  color:var(--cream); padding:38px;
  min-height:440px;
}
.svc__bg{ position:absolute; inset:0; z-index:-2; }
.svc__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 1.1s var(--ease); }
.svc::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:55%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.3) 50%, transparent 100%); }
.svc:hover .svc__bg img{ transform:scale(1.12); }
.svc__inner{ margin-top:auto; position:relative; z-index:2; }
.svc__bar{ width:48px; height:3px; background:var(--spectrum); border-radius:3px; margin:0 0 16px; opacity:var(--spectrum-strength); transition:width .5s var(--ease); }
.svc:hover .svc__bar{ width:96px; }
.svc h3{ color:#fff; font-size:clamp(26px,2.4vw,34px); margin-bottom:10px; transition:color .4s var(--ease); }
.svc:hover h3{ color:var(--c3); }
.svc p{ color:rgba(244,239,230,.82); font-size:16px; line-height:1.65; max-width:46ch; margin-bottom:18px; }
.svc__link{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; gap:.55em; align-items:center; }
.svc__link .arr{ transition:transform .35s var(--ease); }
.svc:hover .svc__link .arr{ transform:translateX(5px); }
.services__hint{ margin-top:8px; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.services__hint .arr{ color:var(--accent); }

/* ---- Galerie mosaïque ------------------------------------- */
.gallery{ background:var(--paper); }
.mosaic{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:170px; gap:14px; }
.tile{ position:relative; overflow:hidden; border-radius:var(--radius); }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.tile:hover img{ transform:scale(1.07); }
.tile__cap{
  position:absolute; left:0; right:0; bottom:0; padding:22px 20px 16px; z-index:2;
  background:linear-gradient(180deg,transparent, rgba(20,18,16,.72));
  color:#fff; transform:translateY(8px); opacity:0; transition:all .5s var(--ease);
}
.tile:hover .tile__cap{ transform:none; opacity:1; }
.tile__cap .c{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--c3); }
.tile__cap .t{ font-family:var(--display); font-size:21px; line-height:1.1; }
/* tile spans */
.t-a{ grid-column:span 7; grid-row:span 2; }
.t-b{ grid-column:span 5; grid-row:span 2; }
.t-c{ grid-column:span 4; grid-row:span 2; }
.t-d{ grid-column:span 4; grid-row:span 2; }
.t-e{ grid-column:span 4; grid-row:span 2; }
.gallery__foot{ margin-top:34px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }

/* ---- Citation / signature --------------------------------- */
.cite{ background-color:var(--ink); background-size:cover; background-position:center; background-repeat:no-repeat; color:var(--cream); text-align:center; padding:clamp(100px,calc(7vw + 50px),140px) 0; position:relative; overflow:hidden; }
.cite__spectrum{ position:absolute; top:0; left:0; right:0; height:4px; background:var(--spectrum); opacity:var(--spectrum-strength); }
.cite .mark{ font-size:13px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); margin-bottom:34px; }
.cite blockquote{ margin:0 auto; max-width:80ch; font-family:var(--display); font-style:normal; font-weight:600; font-size:clamp(32px,5vw,68px); line-height:1.12; color:#5C3A1E; text-shadow:0 1px 3px rgba(255,255,255,0.4); white-space:nowrap; }
.cite blockquote .hl{ color:var(--c3); font-style:italic; }
.cite__sign{ margin-top:48px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.cite__sign img{ height:60px; width:auto; filter:drop-shadow(0 0 12px rgba(255,255,255,.28)) drop-shadow(0 3px 16px rgba(0,0,0,.45)); }
.cite__sign .s{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(244,239,230,.6); }

/* ---- Choix des couleurs (nuancier d'atelier — handoff design) ---- */
/* ==========================================================================
   Flo's Déco — Section « Le choix des couleurs » (variante 01 · Nuancier d'atelier)
   Dépend des variables globales de flos.css :
   --cream --paper --ink --ink-soft --muted --line --accent
   --c1..--c6 --spectrum --display --sans --radius --ease
   Aucune dépendance JS. Animations CSS pures.
   ========================================================================== */
.couleurs{position:relative;background:var(--cream);padding:clamp(70px,9vw,124px) 0 clamp(80px,10vw,140px);overflow:hidden}
/* voile de nuancier : fines rayures, très discrètes */
.couleurs::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:repeating-linear-gradient(90deg,rgba(28,28,28,.028) 0 1px,transparent 1px 84px)}

/* ---- en-tête ------------------------------------------------------------- */
.couleurs__head{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(48px,6vw,86px)}
.couleurs__head h2{font-size:clamp(34px,4.6vw,64px);max-width:14ch}
.couleurs__head .lede{max-width:44ch;color:var(--muted);font-size:clamp(16px,1.4vw,18px)}
.couleurs__head .lede .spectrum-rule{margin-bottom:18px}
.couleurs__head .lede p{margin:0}

/* ---- grille en arc ------------------------------------------------------- */
.nuancier{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,22px);align-items:end}
.nuancier .chip{--lift:0px;--tilt:0deg;position:relative;transform:translateY(var(--lift));background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:0 0 22px;transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease)}
.nuancier .chip:nth-child(1){--lift:44px;--tilt:-1.6deg}
.nuancier .chip:nth-child(2){--lift:18px;--tilt:1.1deg}
.nuancier .chip:nth-child(3){--lift:0px;--tilt:-.9deg}
.nuancier .chip:nth-child(4){--lift:18px;--tilt:1.4deg}
.nuancier .chip:nth-child(5){--lift:44px;--tilt:-1.2deg}

/* ---- champ de peinture --------------------------------------------------- */
.nuancier .chip__field{position:relative;height:clamp(180px,20vw,268px);overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--paper)}
.nuancier .chip__paint{position:absolute;inset:0;background:var(--tone);clip-path:url(#floBrushEdge);transform-origin:50% 0;transition:filter .6s var(--ease)}
/* matière : lumière, ombre, trace de rouleau */
.nuancier .chip__paint::after{content:"";position:absolute;inset:-10%;background:radial-gradient(120% 80% at 22% 12%,rgba(255,255,255,.26),transparent 62%),radial-gradient(90% 70% at 82% 96%,rgba(0,0,0,.22),transparent 60%),repeating-linear-gradient(103deg,rgba(255,255,255,.055) 0 2px,transparent 2px 7px);mix-blend-mode:soft-light}
.nuancier .chip__grain{position:absolute;inset:0;clip-path:url(#floBrushEdge);opacity:.3;mix-blend-mode:overlay;pointer-events:none}
/* coulures révélées au survol */
.nuancier .chip__drip{position:absolute;left:var(--dx,26%);top:0;width:var(--dw,14px);height:0;background:var(--tone);border-radius:0 0 999px 999px;opacity:0;transition:height .75s var(--ease),opacity .4s var(--ease)}
.nuancier .chip__drip.b{--dx:58%;--dw:9px}
.nuancier .chip__drip.c{--dx:79%;--dw:6px}
.nuancier .chip__no{position:absolute;top:16px;left:18px;z-index:2;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.24em;color:#fff;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.22)}

/* ---- étiquette ----------------------------------------------------------- */
.nuancier .chip__label{padding:22px 20px 0}
.nuancier .chip__label .h{display:block;font-family:var(--display);font-size:clamp(24px,2.3vw,31px);font-weight:600;color:var(--ink);line-height:1.05;margin-bottom:8px;transition:color .5s var(--ease)}
.nuancier .chip__label .d{display:block;font-size:14.5px;line-height:1.45;color:var(--muted)}
.nuancier .chip__label .hex{display:none}

/* ---- survol -------------------------------------------------------------- */
@media (hover:hover){
  .nuancier .chip:hover{transform:translateY(calc(var(--lift) - 12px)) rotate(var(--tilt)) scale(1.035);z-index:3}
  .nuancier .chip:hover .chip__drip{opacity:1;height:clamp(34px,5vw,58px)}
  .nuancier .chip:hover .chip__drip.b{height:clamp(22px,3.4vw,40px);transition-delay:.06s}
  .nuancier .chip:hover .chip__drip.c{height:clamp(14px,2.2vw,26px);transition-delay:.12s}
  .nuancier .chip:hover .chip__label .h{color:color-mix(in oklab,var(--tone) 72%,var(--ink))}
  .nuancier .chip:hover .chip__paint{filter:saturate(1.08) brightness(1.03)}
}
.nuancier .chip:focus-within{outline:2px solid var(--accent);outline-offset:4px}

/* ---- apparition (stagger) ------------------------------------------------ */
/* fallback universel : délais indexés via --i */
.nuancier .chip{animation:floChipIn .95s var(--ease) both;animation-delay:calc(var(--i) * .11s)}
.nuancier .chip__paint,.nuancier .chip__grain{animation:floPaintFill 1.05s var(--ease) both;animation-delay:calc(var(--i) * .11s + .1s)}
/* navigateurs récents : piloté par le scroll (scroll-driven animations) */
@supports (animation-timeline:view()){
  .nuancier .chip{animation-timeline:view();animation-range:entry 6% cover 34%;animation-delay:0s}
  .nuancier .chip__paint,.nuancier .chip__grain{animation-timeline:view();animation-range:entry 6% cover 36%;animation-delay:0s}
}
@keyframes floChipIn{
  from{opacity:0;transform:translateY(calc(var(--lift) + 40px)) rotate(calc(var(--tilt) * 2.4)) scale(.965)}
  to{opacity:1;transform:translateY(var(--lift)) rotate(0deg) scale(1)}
}
@keyframes floPaintFill{from{transform:scaleY(.04)}to{transform:scaleY(1)}}

/* ---- pied de section ----------------------------------------------------- */
.couleurs__foot{display:flex;align-items:center;gap:26px;margin-top:clamp(48px,6vw,80px)}
.couleurs__foot .spectrum-rule{flex:1}
.couleurs__foot span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1080px){
  .nuancier{grid-template-columns:repeat(3,1fr);gap:20px}
  .nuancier .chip{--lift:0px !important}
  .nuancier .chip:nth-child(2){--lift:26px !important}
}
@media (max-width:720px){
  .couleurs__head{grid-template-columns:1fr;gap:26px;align-items:start}
  .nuancier{grid-template-columns:1fr;gap:16px}
  .nuancier .chip{--lift:0px !important}
  .nuancier .chip__field{height:132px}
  .nuancier .chip__label{padding:18px 18px 0}
  .couleurs__foot{flex-direction:column;align-items:flex-start;gap:14px}
  .couleurs__foot .spectrum-rule{width:100%;flex:none}
}
@media (prefers-reduced-motion:reduce){
  .nuancier .chip,.nuancier .chip__paint,.nuancier .chip__grain{animation:none !important;opacity:1}
  .nuancier .chip{transform:translateY(var(--lift))}
  .nuancier .chip__paint,.nuancier .chip__grain{transform:none}
  .nuancier .chip:hover{transform:translateY(var(--lift))}
  .nuancier .chip:hover .chip__drip{height:0;opacity:0}
}


/* ---- Zones d'intervention --------------------------------- */
.zones{ background:var(--ink); color:var(--cream); }
.zones .section__head h2{ color:#fff; }
.zones .lede{ color:rgba(244,239,230,.7); }
.zones__chips{ display:flex; flex-wrap:wrap; gap:12px; }
.zones__chips .chip, .gallery-filters .chip{
  font-size:16px; letter-spacing:.01em; color:var(--cream);
  padding:11px 20px; border:1px solid rgba(244,239,230,.26); border-radius:100px;
  transition:all .4s var(--ease); cursor:default;
  opacity:1; transform:none;
}
.zones__chips .chip.in, .gallery-filters .chip.in{ opacity:1; transform:none; }
.zones__chips .chip:hover, .gallery-filters .chip:hover{ border-color:transparent; background:var(--accent); color:#fff; }
.zones__base{ margin-top:40px; display:flex; align-items:center; gap:16px; color:rgba(244,239,230,.7); font-size:15px; flex-wrap:wrap; }
.zones__base .spectrum-rule{ flex:1; min-width:60px; }

/* ---- Process / prise de rendez-vous (timeline 3 étapes) ----- */
.process{ background:var(--cream); }
.process__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  position:relative; margin-top:14px;
}
.process__grid::before{
  content:""; position:absolute; top:34px; left:16%; right:16%; height:3px;
  background:var(--spectrum); opacity:var(--spectrum-strength); border-radius:3px;
}
.pstep{ text-align:center; position:relative; z-index:1; }
.pstep .badge{
  width:68px; height:68px; border-radius:50%; margin:0 auto 22px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:28px; font-weight:600; color:#fff;
  background:var(--accent); box-shadow:0 12px 28px rgba(28,28,28,.18);
  border:4px solid var(--cream);
}
.pstep h3{ font-size:26px; margin-bottom:10px; }
.pstep p{ color:var(--muted); font-size:15.5px; max-width:30ch; margin:0 auto; }
@media (max-width:760px){
  .process__grid{ grid-template-columns:1fr; gap:36px; }
  .process__grid::before{ display:none; }
}

/* ============================================================
   FOOTER / CONTACT
   ============================================================ */
.foot{ background:#3e2509; color:#fff; padding:clamp(70px,9vw,110px) 0 40px; }
.foot__top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; align-items:start; }
.foot__brand img{ height:84px; width:auto; margin-bottom:22px; }
.foot__brand p{ color:rgba(255,255,255,.65); max-width:34ch; }
.foot h4{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; }
.foot__big a{ display:block; font-family:var(--display); font-size:clamp(26px,3vw,40px); color:#fff; line-height:1.2; transition:color .35s var(--ease); }
.foot__big a:hover{ color:var(--accent); }
.foot__list a, .foot__list span{ display:block; color:rgba(255,255,255,.65); padding:5px 0; transition:color .3s; }
.foot__list a:hover{ color:var(--accent); }
.foot__social{ display:inline-flex; align-items:center; gap:10px; margin-top:14px; font-weight:600; color:#fff; }
.foot__bar{ height:3px; background:var(--spectrum); border-radius:3px; margin:54px 0 26px; opacity:var(--spectrum-strength); }
.foot__legal{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.5); }

/* ============================================================
   SUB-PAGES (services) — drafts
   ============================================================ */
.subhero{
  position:relative; min-height:64vh; display:flex; align-items:flex-end;
  padding:140px var(--gutter) 56px; overflow:hidden; color:var(--cream);
}
.subhero__bg{ position:absolute; inset:0; z-index:-2; }
.subhero__bg img{ width:100%; height:100%; object-fit:cover; }
.subhero::before{ content:""; position:absolute; top:0; left:0; right:0; height:180px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 100%); }
.subhero__in{ max-width:var(--maxw); margin:0 auto; width:100%; position:relative; z-index:2; }
.subhero .crumb{ display:none; }
.subhero h1{ color:#fff; font-size:clamp(52px,7.5vw,106px); line-height:.98; max-width:16ch; }
.subhero h1 em{ font-style:italic; color:var(--c3); }
.subhero .spectrum-rule{ max-width:120px; margin-top:26px; }

.prose{ padding:clamp(60px,8vw,110px) 0; background:var(--cream); }
.prose__grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(36px,6vw,90px); align-items:start; }
.prose__main h2{ font-size:clamp(28px,3.4vw,46px); margin:0 0 18px; }
.prose__main h3{ font-size:clamp(22px,2.4vw,30px); margin:42px 0 12px; color:var(--accent); }
.prose__main p{ color:var(--ink-soft); margin-bottom:1.15em; max-width:62ch; }
.prose__main .intro-lead{ font-family:var(--display); font-size:clamp(21px,2.4vw,30px); line-height:1.35; color:var(--ink); font-weight:var(--title-weight); margin-bottom:1.2em; }
.prose__main .note{ border-left:3px solid var(--accent); padding:6px 0 6px 20px; color:var(--muted); font-style:italic; margin:24px 0; max-width:60ch; }
.prose__aside{ position:sticky; top:96px; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px; background:#fff7; }
.prose__aside .spectrum-rule{ margin-bottom:18px; }
.prose__aside h4{ font-family:var(--display); font-size:24px; color:var(--ink); margin-bottom:10px; }
.prose__aside p{ color:var(--muted); font-size:16px; line-height:1.65; margin-bottom:18px; }
.prose__aside .tag{ display:inline-block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:100px; padding:6px 14px; margin:0 6px 8px 0; }
.prose__figure{ margin:38px 0; border-radius:var(--radius); overflow:hidden; }
.prose__figure img{ width:100%; height:auto; }
.prose__figure figcaption{ font-size:13px; color:var(--muted); padding:10px 2px; letter-spacing:.02em; }
.crosslinks{ background:var(--paper); padding:clamp(50px,7vw,90px) 0; }
.crosslinks__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.xlink{ display:block; padding:30px 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--cream); transition:all .4s var(--ease); }
.xlink:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(28,28,28,.08); border-color:transparent; }
.xlink .c{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.xlink h3{ font-size:26px; margin:10px 0 6px; }
.xlink .arr{ color:var(--accent); font-weight:600; }
@media (max-width:880px){
  .prose__grid{ grid-template-columns:1fr; }
  .prose__aside{ position:static; }
  .crosslinks__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .intro__grid{ grid-template-columns:1fr; gap:40px; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  body{ font-size:17px; }
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .piliers__grid{ grid-template-columns:1fr; }
  .pilier{ border-left:0; border-top:1px solid var(--line); }
  .pilier:first-child{ border-top:0; }
  .mosaic{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; }
  .t-a,.t-b,.t-c,.t-d,.t-e{ grid-column:span 1; grid-row:span 1; }
  .t-a{ grid-column:span 2; grid-row:span 2; }
  .services__grid{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr; }
}

/* ---- Pilier : sous-titre + listes (contenu client) -------- */
.pilier__sub{ font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--accent); margin:-2px 0 12px; }
.pilier__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.pilier__list li{ position:relative; padding-left:18px; font-size:16px; line-height:1.65; color:var(--muted); }
.pilier__list li::before{ content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.pilier__list li strong{ color:var(--ink); font-weight:600; }

/* ---- Informations (remplace l'ancien « Comment ça se passe ») ---- */
.infos{ background:var(--cream); }
.infos__grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.info{ padding:40px 30px; border-left:1px solid var(--line); }
.info:first-child{ border-left:0; }
.info__k{ display:block; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.info__v{ font-family:var(--display); font-weight:var(--title-weight); font-size:clamp(24px,2.6vw,34px); color:var(--ink); line-height:1.25; display:inline-block; transition:color .35s var(--ease); }
a.info__v:hover{ color:var(--accent); }
.info__v--muted{ color:var(--muted); font-size:clamp(19px,1.9vw,24px); }
@media (max-width:760px){
  .infos__grid{ grid-template-columns:1fr; }
  .info{ border-left:0; border-top:1px solid var(--line); }
  .info:first-child{ border-top:0; }
}

/* ---- Module sticky : appel direct (sous-pages) ------------ */
.aside__call{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line); text-align:center; }
.aside__call-k{ display:block; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.aside__call-v{ font-family:var(--display); font-weight:var(--title-weight); font-size:30px; color:var(--accent); transition:color .3s; }
.aside__call-v:hover{ color:var(--accent-deep); }

/* ---- Overrides dimensionnement -------------------------------- */
.hero__content h1{ font-size:clamp(1.8rem,4vw,3.2rem) !important; line-height:1.15 !important; }
.cite blockquote, .cite p, .cite__text{ font-size:clamp(1.1rem,2.2vw,1.6rem) !important; white-space:nowrap !important; }
.foot__big a, .footer__contact a{ font-size:clamp(1rem,1.8vw,1.4rem) !important; }

/* ---- Overrides taille hero h1, citation, footer contact --- */
.hero__content h1{ font-size:clamp(1.8rem,4vw,3.2rem) !important; }
.cite blockquote{ font-size:clamp(22px,3.5vw,46px) !important; color:#5C3A1E !important; font-style:normal !important; font-weight:600 !important; text-shadow:0 1px 3px rgba(255,255,255,0.4) !important; white-space:nowrap !important; }
.foot__big a{ font-size:clamp(18px,2vw,26px) !important; }

/* Correction sprint-14 : signature cite en blanc */
.cite .mark{ color:#fff !important; }

/* Correction sprint-14 : textes gras dans piliers en anthracite (non fuchsia) */
.piliers strong, .piliers b, .pilier strong, .pilier b { color:var(--ink) !important; }

/* Fix: bold text in piliers sections → ink color */
.pilier strong, .pilier b,
.pilier__list strong, .pilier__list b {
    color: var(--ink) !important;
}

/* Elfsight Google Reviews widget */
.reviews-section .elfsight-app-ELFSIGHT_WIDGET_ID_ICI {
    max-width: 1100px;
    margin: 2rem auto 0;
}

/* ============================== HERO SLIDER ============================== */
/* Le slider est porté par .hero__bg, qui fournit déjà position:absolute + inset:0.
   Ne pas redéclarer `position` sur .hero-slider seul : à spécificité égale la
   règle la plus basse gagne, .hero__bg repasserait en flux et s'effondrerait. */
.hero-slider { width: 100%; height: 100%; }
.hero__bg.hero-slider { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  animation: none;
}
.hero-slide.active {
  opacity: 1;
  animation: kenburns 8s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.active { transition: none; animation: none; }
}

/* ---- Description courte sur les cartes prestation ---------- */
.svc__desc {
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  margin: 6px 0 10px;
  opacity: 0.85;
  font-family: var(--sans);
}

/* ============================================================
   FOOTER — lisibilité : tous les textes en blanc
   ============================================================ */
.foot p, .foot span, .foot address{ color:#ffffff; }
.foot a{ color:#ffffff; }
.foot__big a{ color:#ffffff; }
.foot__brand p{ color:rgba(255,255,255,.75); }
.foot h4, .foot__list span{ color:rgba(255,255,255,.6); }
.foot__legal, .foot__legal > span{ color:rgba(255,255,255,.5); }
.foot__big a:hover, .foot__list a:hover{ color:var(--accent); }

/* ---- Footer : copyright + liens légaux + tagline sur une ligne --- */
.foot__legal{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.foot__legal > span:first-child{ color:rgba(255,255,255,.5); font-size:12px; }
.foot__legal a{ color:rgba(255,255,255,.5); font-size:12px; margin-left:12px; }
.foot__legal a:hover{ color:#ffffff; }
.foot__legal .foot__sep{ color:rgba(255,255,255,.3); margin:0 4px; }
.foot__legal .foot__tagline{ color:rgba(255,255,255,.5); font-size:12px; }

/* ============================================================
   CARTES PRESTATIONS — description en blanc
   ============================================================ */
.svc .svc__desc{ color:#ffffff; }

/* ============================================================
   SUBHERO — variante dégradé marron (pages légales)
   ============================================================ */
.subhero--gradient{
  min-height:180px !important;
  height:180px !important;
  /* .subhero porte padding:140px … 56px et box-sizing:border-box :
     sans cet override, 196px de padding masqueraient le titre dans 180px. */
  padding-top:0 !important;
  padding-bottom:28px !important;
}
.subhero--gradient .subhero__bg{
  background:#3e2509 !important;
  position:absolute;
  inset:0;
}
.subhero--gradient .subhero__bg img{ display:none !important; }
.subhero--gradient h1{
  color:#ffffff !important;
  font-size:clamp(1.8rem,3vw,2.8rem);
  max-width:none;
}
.subhero--gradient .eyebrow{ color:var(--accent); }
.subhero--gradient .spectrum-rule{ margin-top:14px !important; }

/* ============================================================
   BANNIÈRE COOKIES (RGPD)
   ============================================================ */
.cookie-banner{
  position:fixed;
  bottom:0; left:0; right:0;
  background:#1a3344;
  color:#fff;
  z-index:9999;
  padding:1rem 1.5rem;
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
  transform:translateY(100%);
  /* masque aussi au clavier : sans ca les 2 boutons restent focusables
     hors ecran sur toutes les pages une fois le consentement donne. */
  visibility:hidden;
  transition:transform .4s ease, visibility .4s ease;
}
.cookie-banner.is-visible{ transform:translateY(0); visibility:visible; }
.cookie-banner__inner{
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.cookie-banner__text{ flex:1; font-size:14px; margin:0; color:rgba(255,255,255,.85); }
.cookie-banner__text a{ color:var(--accent); text-decoration:underline; }
.cookie-banner__actions{ display:flex; gap:.75rem; flex-shrink:0; }
.cookie-btn{
  padding:.5rem 1.25rem; border-radius:4px; font-size:13px;
  font-weight:600; cursor:pointer; border:none; font-family:var(--sans);
  transition:background .2s, color .2s, border-color .2s;
}
.cookie-btn--accept{ background:var(--accent); color:#fff; }
.cookie-btn--accept:hover{ background:var(--accent-deep); }
.cookie-btn--decline{
  background:transparent; color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.3);
}
.cookie-btn--decline:hover{ color:#fff; border-color:#fff; }
@media (prefers-reduced-motion:reduce){
  .cookie-banner{ transition:none; }
}

/* ============================================================
   CONTENU LÉGAL ÉDITABLE (page.content|raw)
   ============================================================ */
.legal-content h2{
  font-size:clamp(22px,2.6vw,32px);
  margin:56px 0 18px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.legal-content > h2:first-child{ margin-top:0; }
.legal-content h3{
  font-size:clamp(17px,1.8vw,21px);
  color:var(--accent);
  margin:32px 0 10px;
}
.legal-content p{ color:var(--ink-soft); line-height:1.7; max-width:62ch; margin:0 0 1.15em; }
.legal-content ul{ color:var(--muted); line-height:1.8; padding-left:1.4em; margin:16px 0 1.3em; max-width:62ch; }
.legal-content li{ margin-bottom:6px; }
.legal-content strong{ color:var(--ink); }
.legal-content a{ color:var(--accent); }
.legal-content a:hover{ text-decoration:underline; }