/* ============================================================
   Luce Rénovation · Système de design partagé
   « Atelier familial » · chaleureux, éditorial, humain
   Crème & lin, bleu acier du logo, accent terracotta
   ============================================================ */

/* ---- Tokens ------------------------------------------------ */
:root{
  /* Brand · bleu acier repris du logo */
  --blue:        #38678E;
  --blue-700:    #2B5170;
  --blue-900:    #1E3A52;
  --blue-50:     #EDF3F8;

  /* Chaleur · terracotta (accent secondaire, touches humaines) */
  --clay:        #C2683F;
  --clay-700:    #A5532F;
  --clay-50:     #F8ECE3;

  /* Neutrals · encre chaude + lin */
  --ink:         #2B2823;
  --anthracite:  #282B31;   /* sections sombres, ardoise chaude */
  --anthracite-2:#32363D;
  --concrete:    #6E6A61;   /* texte atténué, gris chaud */
  --concrete-lt: #97928A;
  --line:        #EAE3D7;
  --line-2:      #DCD2C2;
  --paper:       #FDFBF7;   /* fond général, blanc cassé chaud */
  --mist:        #F7F3EB;   /* sections claires */
  --mist-2:      #EFE9DE;
  --cream:       #F8F1E6;   /* sections « chaleur » */

  /* Reflet métallique (rappel du logo, usages ponctuels) */
  --metal: linear-gradient(135deg, #cdd6de 0%, #f4f1ea 32%, #b7c4cf 52%, #7f93a3 78%, #38678E 100%);

  /* Accent */
  --accent:      var(--blue);
  --accent-700:  var(--blue-700);
  --accent-50:   var(--blue-50);

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --hand:  "Caveat", "Comic Sans MS", cursive;

  /* Spacing scale (density-controlled) */
  --density: 1;
  --sp-1: calc(4px  * var(--density));
  --sp-2: calc(8px  * var(--density));
  --sp-3: calc(12px * var(--density));
  --sp-4: calc(16px * var(--density));
  --sp-5: calc(24px * var(--density));
  --sp-6: calc(32px * var(--density));
  --sp-7: calc(48px * var(--density));
  --sp-8: calc(64px * var(--density));
  --sp-9: calc(96px * var(--density));
  --section-y: calc(116px * var(--density));

  --maxw: 1240px;
  --radius: 18px;           /* coins doux, accueillants */
  --radius-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(43,40,35,.05), 0 2px 6px rgba(43,40,35,.05);
  --shadow-md: 0 14px 34px -14px rgba(43,40,35,.16);
  --shadow-lg: 0 32px 64px -24px rgba(43,40,35,.26);
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Motif d'arches (clin d'œil au bâti, décor discret) */
  --arches: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none'%3E%3Cpath d='M80 300 V160 a120 120 0 0 1 240 0 V300' stroke='%238FB4D4' stroke-opacity='.28' stroke-width='1.5'/%3E%3Cpath d='M120 300 V170 a80 80 0 0 1 160 0 V300' stroke='%238FB4D4' stroke-opacity='.2' stroke-width='1.5'/%3E%3Cpath d='M160 300 V180 a40 40 0 0 1 80 0 V300' stroke='%238FB4D4' stroke-opacity='.14' stroke-width='1.5'/%3E%3C/svg%3E");
  --arches-warm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' fill='none'%3E%3Cpath d='M80 300 V160 a120 120 0 0 1 240 0 V300' stroke='%23C2683F' stroke-opacity='.2' stroke-width='1.5'/%3E%3Cpath d='M120 300 V170 a80 80 0 0 1 160 0 V300' stroke='%23C2683F' stroke-opacity='.14' stroke-width='1.5'/%3E%3Cpath d='M160 300 V180 a40 40 0 0 1 80 0 V300' stroke='%23C2683F' stroke-opacity='.1' stroke-width='1.5'/%3E%3C/svg%3E");
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
svg{ width:1em; height:1em; flex:none; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

/* ---- Typography ------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.08;
  letter-spacing:-.01em; margin:0; color:var(--ink); text-wrap:balance; }
.h-display{ font-size:clamp(2.6rem, 5.4vw, 4.4rem); font-weight:600; line-height:1.04; }
.h1{ font-size:clamp(2.1rem, 3.8vw, 3.2rem); }
.h2{ font-size:clamp(1.7rem, 2.8vw, 2.45rem); }
.h3{ font-size:clamp(1.25rem, 1.6vw, 1.5rem); }
p{ margin:0 0 1em; }
.lead{ font-size:clamp(1.12rem,1.5vw,1.3rem); line-height:1.62; color:var(--concrete); font-weight:400; }
.eyebrow{
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--clay); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--clay); border-radius:2px; display:inline-block; }
.eyebrow.on-dark{ color:#EBC1A8; }
.eyebrow.on-dark::before{ background:#EBC1A8; }
.muted{ color:var(--concrete); }

/* Soulignement « à la main » (terracotta) */
.uline{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M4 10 C 50 3, 120 3, 196 8' fill='none' stroke='%23C2683F' stroke-width='5' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") no-repeat left 97% / 100% .17em;
  padding-bottom:.06em;
}

/* Écriture manuscrite (annotations, signatures) */
.hand{ font-family:var(--hand); font-weight:600; color:var(--clay); font-size:1.5em; line-height:1.1; letter-spacing:0; }
.hand.on-dark{ color:#EBC1A8; }
.sig{ font-family:var(--hand); font-weight:600; color:var(--ink); font-size:2.1rem; line-height:1; }

/* Badge « entreprise familiale » */
.fam-badge{
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--clay-50); color:var(--clay-700);
  border:1px solid #EBD5C4; border-radius:999px;
  padding:.5em 1.05em; font-weight:700; font-size:.88rem; letter-spacing:.01em;
}
.fam-badge svg{ width:1.1em; height:1.1em; }
.fam-badge.on-dark{ background:rgba(255,255,255,.08); color:#EBC1A8; border-color:rgba(235,193,168,.3); }

/* ---- Layout ----------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:var(--section-y); }
.section.tight{ padding-block:calc(var(--section-y) * .62); }
.section.dark{ background:var(--anthracite); color:#fff; }
.section.dark h1,.section.dark h2,.section.dark h3{ color:#fff; }
.section.dark .lead,.section.dark .muted{ color:#B3B0AA; }
.section.mist{ background:var(--mist); }
.section.warm{ background:var(--cream); }
.grid{ display:grid; gap:var(--sp-5); }
.eyebrow + h1,.eyebrow + h2{ margin-top:var(--sp-3); }
.section-head{ max-width:680px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:var(--sp-4); margin-bottom:0; }

/* ---- Buttons ---------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-weight:700; font-size:1rem; line-height:1;
  padding:1.05em 1.7em; border-radius:999px; cursor:pointer;
  border:1.5px solid transparent; transition:all .22s var(--ease); white-space:nowrap;
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .22s var(--ease); }
.btn-primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent-700); border-color:var(--accent-700); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-primary:hover svg{ transform:translateX(4px); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-outline.on-dark{ color:#fff; border-color:rgba(255,255,255,.32); }
.btn-outline.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn-ghost{ padding-inline:0; color:var(--accent); font-weight:700; border-radius:0; }
.btn-ghost:hover svg{ transform:translateX(5px); }
.btn-lg{ padding:1.2em 2em; font-size:1.05rem; }

/* ---- Header ----------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50; background:rgba(253,251,247,.88);
  backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-header.scrolled{ box-shadow:0 1px 0 var(--line), var(--shadow-sm); }
.nav{ display:flex; align-items:center; gap:var(--sp-6); height:88px; }
.brand{ display:flex; align-items:center; gap:.7rem; margin-right:auto; flex-shrink:0; }
.brand img{ height:46px; width:auto; }
.brand .bname{ font-family:var(--serif); font-weight:600; font-size:1.26rem; letter-spacing:-.01em; line-height:1; white-space:nowrap; }
.brand .bname small{ display:block; font-family:var(--sans); font-weight:700; font-size:.6rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--clay); margin-top:3px; }
.nav-links{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-weight:600; font-size:.95rem; color:var(--ink); position:relative; padding-block:.4em; transition:color .2s; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; border-radius:2px; width:0; background:var(--clay); transition:width .25s var(--ease); }
.nav-links a:hover{ color:var(--accent); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-links a.active{ color:var(--accent); }
.nav-cta{ display:flex; align-items:center; gap:var(--sp-4); }
.nav-cta .btn{ padding:.95em 1.5em; font-size:.95rem; }
.nav-phone{ display:none; align-items:center; gap:.5em; font-weight:700; font-size:.95rem; white-space:nowrap; }
@media (min-width:1500px){ .nav-phone{ display:inline-flex; } }
@media (max-width:1200px){ .brand .bname small{ display:none; } }
.nav-phone svg{ width:1.05em; height:1.05em; color:var(--clay); }
.burger{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; }
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu */
.mobile-menu{ position:fixed; inset:88px 0 0; background:var(--paper); z-index:49; transform:translateX(100%); visibility:hidden;
  transition:transform .35s var(--ease), visibility .35s var(--ease); padding:var(--sp-6) clamp(20px,5vw,40px); overflow-y:auto; display:flex; flex-direction:column; }
.mobile-menu.open{ transform:translateX(0); visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:1.55rem; font-weight:600; padding-block:var(--sp-3); border-bottom:1px solid var(--line); }
.mobile-menu a.active{ color:var(--accent); }
.mobile-menu .btn{ margin-top:var(--sp-5); }
.mobile-contact{ margin-top:auto; padding-top:var(--sp-6); color:var(--concrete); font-size:.95rem; }

/* ---- Footer ----------------------------------------------- */
.site-footer{ background:var(--anthracite); color:#C6C3BD; padding-block:var(--sp-9) var(--sp-6); position:relative; overflow:hidden; }
.site-footer::before{ content:""; position:absolute; right:-30px; bottom:0; width:min(380px,50%); aspect-ratio:4/3;
  background:var(--arches) no-repeat bottom right / contain; pointer-events:none; opacity:.5; }
.site-footer .wrap{ position:relative; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--sp-6); }
.footer-brand .fbrand{ display:inline-flex; align-items:center; gap:.7rem; margin-bottom:var(--sp-4); }
.footer-brand .fbrand img{ height:44px; width:auto; }
.footer-brand .fbrand .fname{ font-family:var(--serif); font-weight:600; font-size:1.26rem; color:#fff; line-height:1.1; }
.footer-brand .fbrand .fname small{ display:block; font-family:var(--sans); font-weight:700; font-size:.58rem;
  letter-spacing:.2em; text-transform:uppercase; color:#EBC1A8; margin-top:4px; }
.footer-brand p{ color:#A29F98; max-width:34ch; font-size:.96rem; }
.footer-col h4{ font-family:var(--sans); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:var(--sp-4); font-weight:700; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-col a,.footer-col li{ color:#A29F98; font-size:.96rem; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-contact-item{ display:flex; gap:.7em; align-items:flex-start; margin-bottom:var(--sp-4); line-height:1.45; }
.footer-contact-item svg{ width:1.1em; height:1.1em; color:#EBC1A8; flex:none; margin-top:.2em; }
.footer-contact-item a,.footer-contact-item span{ color:#A29F98; }
.footer-contact-item a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:var(--sp-8); padding-top:var(--sp-5);
  display:flex; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; font-size:.88rem; color:#A29F98; }
.footer-bottom a{ color:#A29F98; transition:color .2s; }
.footer-bottom a:hover{ color:#fff; }

/* ---- Placeholders (photos à fournir) ---------------------- */
.ph{
  position:relative; background:var(--mist-2); overflow:hidden; border-radius:var(--radius);
  background-image:
    linear-gradient(135deg, rgba(194,104,63,.05) 0%, rgba(56,103,142,.05) 100%),
    repeating-linear-gradient(45deg, rgba(110,106,97,.06) 0 1px, transparent 1px 14px);
  display:flex; align-items:center; justify-content:center;
}
.ph::after{ content:""; position:absolute; inset:0; border:1px solid var(--line-2); border-radius:var(--radius); pointer-events:none; }
.ph-label{ position:relative; display:flex; flex-direction:column; align-items:center; gap:.5em; color:var(--concrete);
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-align:center; padding:1em; }
.ph-label svg{ width:30px; height:30px; opacity:.5; }
.ph.dark{ background:var(--anthracite-2);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 14px); }
.ph.dark .ph-label{ color:#A29F98; }
.ph.tall{ aspect-ratio:3/4; }
.ph.wide{ aspect-ratio:16/9; }
.ph.square{ aspect-ratio:1; }
.ph.cover{ position:absolute; inset:0; height:100%; width:100%; }
/* variante « arche » : porte accueillante (portraits, visuels clés) */
.ph.arch,.arch{ border-radius:260px 260px var(--radius) var(--radius); }
.ph.arch::after{ border-radius:260px 260px var(--radius) var(--radius); }

/* Icônes de service en grand (page Services, sans photo) */
.svc-mark{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-5); text-align:center; padding:var(--sp-6); height:100%; }
.svc-mark .ic{ width:clamp(180px, 18vw, 240px); aspect-ratio:1; border-radius:44px; background:#fff;
  border:1px solid var(--line-2); box-shadow:var(--shadow-md); color:var(--accent);
  display:flex; align-items:center; justify-content:center; }
.svc-mark .ic svg{ width:46%; height:46%; }
.svc-mark .cap{ font-family:var(--hand); font-weight:600; font-size:1.9rem; line-height:1.15; color:var(--clay); max-width:16ch; }
.section.dark .svc-mark .ic{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); box-shadow:none; color:#fff; }
.section.dark .svc-mark .cap{ color:#CFA88F; }
.proj-card .svc-mark{ padding:var(--sp-5); gap:var(--sp-3); }
.proj-card .svc-mark .ic{ width:104px; border-radius:26px; box-shadow:var(--shadow-sm); }
.proj-card .svc-mark .cap{ font-size:1.3rem; }

/* ---- Photos ------------------------------------------------ */
.photo{ position:relative; overflow:hidden; border-radius:var(--radius); }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo::after{ content:""; position:absolute; inset:0; border:1px solid rgba(43,40,35,.1); border-radius:inherit; pointer-events:none; }
.photo.tall{ aspect-ratio:3/4; }
.photo.arch{ border-radius:260px 260px var(--radius) var(--radius); }
.proj-card .photo{ aspect-ratio:4/3; border-radius:0; }
.proj-card .photo::after{ border:none; }

/* ---- Hero ------------------------------------------------- */
.hero{ position:relative; background:linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); overflow:hidden; }
.hero::before{ content:""; position:absolute; right:-60px; top:-40px; width:min(460px,44%); aspect-ratio:4/3;
  background:var(--arches-warm) no-repeat top right / contain; transform:scaleY(-1); pointer-events:none; }
.hero .wrap{ position:relative; }
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-8); align-items:center;
  padding-block:clamp(56px,7vw,96px) clamp(56px,7vw,104px); }
.hero h1{ margin-top:var(--sp-5); }
.hero .lead{ margin-top:var(--sp-5); max-width:46ch; }
.hero-actions{ display:flex; gap:var(--sp-3); margin-top:var(--sp-6); flex-wrap:wrap; }
.hero-media{ position:relative; }
.hero-media .ph{ aspect-ratio:4/5; }
.hero-badge{ position:absolute; left:-28px; bottom:32px; background:#fff; box-shadow:var(--shadow-lg);
  padding:var(--sp-4) var(--sp-5); border-radius:var(--radius-sm); max-width:250px;
  display:flex; gap:var(--sp-3); align-items:flex-start; }
.hero-badge .bi{ width:44px; height:44px; flex:none; border-radius:12px; background:var(--clay-50); color:var(--clay);
  display:flex; align-items:center; justify-content:center; }
.hero-badge .bi svg{ width:22px; height:22px; }
.hero-badge .num{ font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--ink); line-height:1.1; }
.hero-badge .lbl{ font-size:.85rem; color:var(--concrete); margin-top:.2em; }
.hero-strip{ border-top:1px solid var(--line); background:var(--paper); position:relative; }
.hero-strip .wrap{ display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-7); align-items:center; padding-block:var(--sp-4); }
.hero-strip .item{ display:flex; align-items:center; gap:.6em; font-weight:600; font-size:.95rem; color:var(--ink); }
.hero-strip .item svg{ width:1.5em; height:1.5em; color:var(--accent); background:var(--accent-50); border-radius:8px; padding:.28em; box-sizing:content-box; }

/* Hero · photo de chantier en arche (porte d'entrée) */
.hero-media .photo{ aspect-ratio:4/5; box-shadow:var(--shadow-md); }

/* ---- Cards / services ------------------------------------- */
.cards{ display:grid; gap:var(--sp-5); }
.cards.cols-2{ grid-template-columns:repeat(2,1fr); }
.cards.cols-3{ grid-template-columns:repeat(3,1fr); }
.cards.cols-4{ grid-template-columns:repeat(4,1fr); }

.svc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-6);
  display:flex; flex-direction:column; gap:var(--sp-3); transition:all .3s var(--ease); position:relative; }
.svc-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-2); }
.svc-icon{ width:56px; height:56px; border-radius:16px; background:var(--accent-50); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2); transition:all .3s var(--ease); }
.svc-icon svg{ width:28px; height:28px; }
.svc-card:hover .svc-icon{ background:var(--accent); color:#fff; }
.svc-card h3{ font-size:1.3rem; }
.svc-card .num{ font-family:var(--hand); font-size:1.25rem; color:var(--clay); font-weight:600; }
.svc-card p{ margin:0; color:var(--concrete); font-size:.97rem; }
.svc-card .more{ margin-top:auto; padding-top:var(--sp-3); font-weight:700; font-size:.92rem; color:var(--accent);
  display:inline-flex; align-items:center; gap:.4em; }
.svc-card:hover .more svg{ transform:translateX(4px); }

/* feature list (pourquoi nous choisir) */
.feature{ display:flex; gap:var(--sp-4); align-items:flex-start; padding:var(--sp-4) 0; border-top:1px solid var(--line); }
.feature .fi{ width:44px; height:44px; flex:none; border-radius:14px; background:var(--accent-50); color:var(--accent);
  display:flex; align-items:center; justify-content:center; }
.feature .fi svg{ width:22px; height:22px; }
.feature h3{ font-family:var(--sans); font-weight:700; font-size:1.05rem; margin-bottom:.2em; }
.feature p{ margin:0; color:var(--concrete); font-size:.95rem; }
.section.dark .feature{ border-color:rgba(255,255,255,.12); }
.section.dark .feature .fi{ background:rgba(255,255,255,.08); color:#EBC1A8; }

/* ---- Process / méthode ------------------------------------ */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-5); counter-reset:step; }
.step{ position:relative; padding-top:var(--sp-6); }
.step::before{ counter-increment:step; content:"0" counter(step); font-family:var(--hand); font-weight:600;
  font-size:1.5rem; color:var(--clay); display:block; margin-bottom:var(--sp-2); }
.step::after{ content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:3px; background:var(--line); }
.step.lit::after{ background:var(--clay); }
.step .sicon{ width:46px; height:46px; border-radius:14px; background:var(--accent-50); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3); }
.step .sicon svg{ width:23px; height:23px; }
.step h3{ font-family:var(--sans); font-weight:700; font-size:1.08rem; margin-bottom:.35em; }
.step p{ color:var(--concrete); font-size:.93rem; margin:0; }
.section.dark .step::after{ background:rgba(255,255,255,.14); }
.section.dark .step.lit::after{ background:#EBC1A8; }
.section.dark .step::before{ color:#EBC1A8; }
.section.dark .step .sicon{ background:rgba(255,255,255,.08); color:#fff; }
.section.dark .step p{ color:#B3B0AA; }

/* ---- Split (présentation / texte+media) ------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center; }
.split.media-left{ direction:rtl; }
.split.media-left > *{ direction:ltr; }
.split .ph{ aspect-ratio:5/6; }
.checklist{ list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-3); }
.checklist li{ display:flex; gap:.7em; align-items:flex-start; font-size:1.02rem; }
.checklist li svg{ width:1.5em; height:1.5em; color:var(--accent); background:var(--accent-50); border-radius:8px;
  padding:.22em; box-sizing:content-box; flex:none; margin-top:.05em; }
.section.dark .checklist li svg{ background:rgba(255,255,255,.08); color:#EBC1A8; }

/* ---- Stats ------------------------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-6); }
.stat .n{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; color:var(--accent); line-height:1; }
.stat .l{ margin-top:var(--sp-2); color:var(--concrete); font-size:.96rem; }
.section.dark .stat .l{ color:#B3B0AA; }
.stats.iconic{ text-align:center; }
.stats.iconic .stat{ display:flex; flex-direction:column; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-6) var(--sp-4); transition:all .3s var(--ease); }
.stats.iconic .stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.stat .si{ width:50px; height:50px; margin-bottom:var(--sp-3); border-radius:15px; background:var(--clay-50);
  color:var(--clay); display:flex; align-items:center; justify-content:center; }
.stat .si svg{ width:25px; height:25px; }
.stats.iconic .l{ max-width:22ch; }

/* ---- Zone d'intervention (44) ------------------------------ */
.zone-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-7); }
.zone-chip{ display:flex; align-items:center; gap:.55em; padding:.85em 1.15em; background:#fff;
  border:1px solid var(--line); border-radius:999px; font-weight:600; font-size:.96rem; transition:all .25s var(--ease); }
.zone-chip:hover{ border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.zone-chip svg{ width:1.05em; height:1.05em; color:var(--clay); }
.zone-note{ margin-top:var(--sp-5); color:var(--concrete); font-size:.96rem; }

/* ---- CTA band --------------------------------------------- */
.cta-band{ position:relative; background:var(--anthracite); color:#fff; border-radius:calc(var(--radius) + 8px); overflow:hidden;
  padding:clamp(40px,6vw,72px); display:grid; grid-template-columns:1.4fr auto; gap:var(--sp-6); align-items:center; }
.cta-band::before{ content:""; position:absolute; right:-20px; bottom:0; width:min(360px,42%); aspect-ratio:4/3;
  background:var(--arches) no-repeat bottom right / contain; pointer-events:none; }
.cta-band > *{ position:relative; }
.cta-band h2{ color:#fff; }
.cta-band .lead{ color:#BDBAB4; margin-top:var(--sp-3); margin-bottom:0; }
.cta-actions{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* ---- Projects (réalisations) ------------------------------ */
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.proj-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; transition:all .3s var(--ease); cursor:pointer; }
.proj-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.proj-card .ph{ aspect-ratio:4/3; border-radius:0; }
.proj-card .ph::after{ border:none; }
.proj-body{ padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-2); flex:1; }
.proj-tag{ align-self:flex-start; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--clay-700); background:var(--clay-50); padding:.45em .9em; border-radius:999px; }
.proj-body h3{ font-size:1.25rem; }
.proj-meta{ display:flex; align-items:center; gap:.5em; color:var(--concrete); font-size:.9rem; font-weight:500; }
.proj-meta svg{ width:1em; height:1em; color:var(--clay); }
.proj-body p{ margin:0; color:var(--concrete); font-size:.95rem; }

/* ---- Values (qui sommes-nous) ------------------------------ */
.value{ padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:all .3s var(--ease); display:flex; flex-direction:column; }
.value:hover{ border-color:var(--line-2); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.value .vhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.value .vn{ font-family:var(--hand); font-size:1.5rem; font-weight:600; color:var(--clay); }
.value .vi{ width:48px; height:48px; border-radius:15px; background:var(--accent-50); color:var(--accent);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease); }
.value .vi svg{ width:24px; height:24px; }
.value:hover .vi{ background:var(--accent); color:#fff; }
.value h3{ font-family:var(--sans); font-weight:700; font-size:1.12rem; margin:0 0 .3em; }
.value p{ margin:0; color:var(--concrete); font-size:.95rem; }

/* ---- Contact / forms -------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-8); align-items:start; }
.form{ display:grid; gap:var(--sp-4); }
.field{ display:flex; flex-direction:column; gap:.45em; }
.field.row2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.field label{ font-weight:600; font-size:.92rem; }
.field label .req{ color:var(--clay); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line-2); border-radius:var(--radius-sm); padding:.85em 1em; transition:border-color .2s, box-shadow .2s; width:100%; }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:#d23; box-shadow:0 0 0 3px rgba(221,51,34,.12); }
.field .err{ color:#c0291a; font-size:.82rem; font-weight:600; display:none; }
.field.invalid .err{ display:block; }
.form-note{ font-size:.84rem; color:var(--concrete); }
.form-error{ display:none; background:#fdecea; border:1px solid #f3b7b1; color:#a11c10; border-radius:var(--radius-sm); padding:.9em 1.1em; font-size:.92rem; font-weight:600; }
.form-error.show{ display:block; }
.form-success{ display:none; background:var(--accent-50); border:1px solid var(--accent); border-radius:var(--radius);
  padding:var(--sp-5); color:var(--blue-900); }
.form-success.show{ display:block; }
.form-success h3{ font-family:var(--sans); font-weight:700; color:var(--blue-900); margin-bottom:.3em; }
.btn[disabled]{ opacity:.6; cursor:progress; }

.contact-aside{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-6); }
.contact-aside .ci{ display:flex; gap:var(--sp-3); align-items:flex-start; padding:var(--sp-4) 0; border-bottom:1px solid var(--line); }
.contact-aside .ci:last-of-type{ border-bottom:none; }
.contact-aside .ci .ico{ width:44px; height:44px; flex:none; border-radius:14px; background:#fff; color:var(--accent);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); }
.contact-aside .ci .ico svg{ width:20px; height:20px; }
.contact-aside .ci .k{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--concrete); font-weight:700; }
.contact-aside .ci .v{ font-weight:600; font-size:1.02rem; }
.contact-aside .ci .v span{ display:block; font-weight:400; font-size:.92rem; color:var(--concrete); }

/* ---- Page hero (sous-pages) ------------------------------- */
.page-hero{ background:var(--anthracite); color:#fff; padding-block:clamp(64px,8vw,116px) clamp(48px,6vw,84px); position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; right:-40px; bottom:0; width:min(440px,52%); aspect-ratio:4/3;
  background:var(--arches) no-repeat bottom right / contain; pointer-events:none; }
.page-hero .wrap{ position:relative; }
.page-hero h1{ color:#fff; margin-top:var(--sp-4); max-width:20ch; }
.page-hero .lead{ color:#BDBAB4; margin-top:var(--sp-5); max-width:60ch; }
.breadcrumb{ display:flex; gap:.6em; align-items:center; font-size:.86rem; color:#96938C; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }
/* variante claire (page Qui sommes-nous) */
.page-hero.light{ background:linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%); color:var(--ink); }
.page-hero.light::before{ background-image:var(--arches-warm); }
.page-hero.light h1{ color:var(--ink); }
.page-hero.light .lead{ color:var(--concrete); }
.page-hero.light .breadcrumb{ color:var(--concrete-lt); }
.page-hero.light .breadcrumb a:hover{ color:var(--ink); }

/* ---- Reveal animations ------------------------------------ */
/* Fail-safe: content is VISIBLE by default. Entrance animation is only
   armed by JS (html.reveal-on) when a live frame loop is detected, so
   content never stays stuck-hidden in a stalled/zero-frame context. */
@media (prefers-reduced-motion: no-preference){
  html.reveal-on [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  html.reveal-on [data-reveal].in{ opacity:1; transform:none; }
  html.reveal-on [data-reveal][data-delay="1"]{ transition-delay:.08s; }
  html.reveal-on [data-reveal][data-delay="2"]{ transition-delay:.16s; }
  html.reveal-on [data-reveal][data-delay="3"]{ transition-delay:.24s; }
  html.reveal-on [data-reveal][data-delay="4"]{ transition-delay:.32s; }
}

/* ---- Cartes « engagements humains » ------------------------ */
.human-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); margin-top:var(--sp-7); }
.humancard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--sp-6) var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-3); transition:all .3s var(--ease); }
.humancard:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.humancard .hi{ width:54px; height:54px; border-radius:16px; background:var(--clay-50); color:var(--clay);
  display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease); }
.humancard .hi svg{ width:26px; height:26px; }
.humancard:hover .hi{ background:var(--clay); color:#fff; }
.humancard h3{ font-family:var(--sans); font-weight:700; font-size:1.1rem; }
.humancard p{ margin:0; color:var(--concrete); font-size:.96rem; }

/* ---- Le mot de Fabio ------------------------------------- */
.mot{ display:grid; grid-template-columns:240px 1fr; gap:clamp(24px,4vw,56px); align-items:center;
  background:var(--cream); border:1px solid var(--line); border-radius:calc(var(--radius) + 8px); padding:clamp(28px,4vw,56px);
  position:relative; overflow:hidden; }
.mot::before{ content:""; position:absolute; right:-10px; top:-10px; width:200px; aspect-ratio:4/3;
  background:var(--arches-warm) no-repeat top right / contain; transform:scaleY(-1); opacity:.6; pointer-events:none; }
.mot > *{ position:relative; }
.mot .portrait{ width:100%; aspect-ratio:4/5; border-radius:200px 200px var(--radius) var(--radius); overflow:hidden; position:relative;
  background:var(--mist-2); border:1px solid var(--line-2);
  background-image:repeating-linear-gradient(45deg, rgba(110,106,97,.06) 0 1px, transparent 1px 14px);
  display:flex; align-items:center; justify-content:center; }
.mot .portrait .ph-label{ color:var(--concrete); font-size:.78rem; }
.mot .portrait .ph-label svg{ width:30px; height:30px; opacity:.55; }
.mot.solo{ grid-template-columns:1fr; }
.mot.solo .quote{ max-width:62ch; }
.mot .quote{ font-family:var(--serif); font-size:clamp(1.22rem,2vw,1.58rem); line-height:1.42; color:var(--ink); font-weight:500; margin:var(--sp-3) 0 0; }
.mot .quote .qmark{ color:var(--clay); font-weight:700; }
.mot .sign{ margin-top:var(--sp-5); display:flex; align-items:center; gap:var(--sp-4); }
.mot .sign .dot{ width:26px; height:2px; border-radius:2px; background:var(--clay); flex:none; }
.mot .sign small{ display:block; font-weight:600; color:var(--concrete); font-size:.85rem; margin-top:.2em; }

/* ---- Page Qui sommes-nous ---------------------------------- */
.founder{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--sp-8); align-items:center; }
.founder.solo{ grid-template-columns:1fr; max-width:780px; }
.founder .portrait-wrap{ position:relative; }
.founder .caption{ position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:999px;
  padding:.5em 1.2em; white-space:nowrap; display:flex; align-items:center; gap:.5em; font-weight:700; font-size:.92rem; }
.founder .caption svg{ width:1.05em; height:1.05em; color:var(--clay); }
.founder .caption small{ font-weight:500; color:var(--concrete); }
.story p{ font-size:1.05rem; }
.story p strong{ color:var(--ink); }

/* petite liste de traits, avec icônes rondes */
.trait-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); }
.trait{ display:inline-flex; align-items:center; gap:.55em; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.6em 1.1em; font-weight:600; font-size:.93rem; }
.trait svg{ width:1.4em; height:1.4em; color:var(--clay); background:var(--clay-50); border-radius:50%;
  padding:.24em; box-sizing:content-box; }

@media (max-width:1080px){ .human-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
  .mot{ grid-template-columns:1fr; text-align:center; }
  .mot .portrait{ width:180px; margin:0 auto; }
  .mot .sign{ justify-content:center; }
  .founder{ grid-template-columns:1fr; }
  .founder .portrait-wrap{ max-width:320px; margin-inline:auto; }
}
@media (max-width:600px){ .human-grid{ grid-template-columns:1fr; } }

/* ---- Responsive ------------------------------------------- */
@media (max-width: 1080px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-7) var(--sp-6); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .cards.cols-4{ grid-template-columns:repeat(2,1fr); }
  .cards.cols-3{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
  .zone-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 1560px){
  .nav-links{ gap:16px; }
  .nav-phone{ display:none; }
}
@media (max-width: 1359px){
  .nav-links, .nav-cta{ display:none; }
  .burger{ display:flex; }
}
@media (max-width: 900px){
  .hero-inner{ grid-template-columns:1fr; gap:var(--sp-7); padding-block:var(--sp-7) var(--sp-7); }
  .hero-media{ order:-1; }
  .hero-media .ph{ aspect-ratio:16/10; }
  .hero-media .photo{ aspect-ratio:16/10; border-radius:160px 160px var(--radius) var(--radius); }
  .hero-badge{ left:auto; right:16px; bottom:16px; }
  .split,.contact-grid,.cta-band{ grid-template-columns:1fr; gap:var(--sp-6); }
  .cta-band{ text-align:left; }
  .split.media-left{ direction:ltr; }
  .zone-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  body{ font-size:16px; }
  :root{ --section-y: calc(76px * var(--density)); }
  .nav{ gap:var(--sp-3); }
  .brand img{ height:40px; }
  .brand .bname{ font-size:1.15rem; }
  .brand .bname small{ display:none; }
  .cards.cols-4,.cards.cols-3,.cards.cols-2,.proj-grid,.steps,.stats{ grid-template-columns:1fr; }
  .zone-grid{ grid-template-columns:1fr 1fr; }
  .field.row2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-badge{ position:static; margin-top:var(--sp-4); max-width:none; }
}

/* ---------- Bouton d'appel sticky (bas droite) ---------- */
.call-fab{ position:fixed; right:20px; bottom:20px; z-index:48; display:inline-flex; align-items:center; gap:.6em;
  background:var(--accent); color:#fff; font-weight:700; font-size:.95rem; padding:14px 22px; border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.18); transition:background .2s, transform .2s, box-shadow .2s; }
.call-fab:hover{ background:var(--accent-700); color:#fff; transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.22); }
.call-fab svg{ width:18px; height:18px; flex-shrink:0; }
@media (max-width:640px){
  .call-fab{ right:16px; bottom:16px; padding:16px; }
  .call-fab span{ display:none; }
  .call-fab svg{ width:22px; height:22px; }
}