/* =====================================================
   EDGARIS — Shared Stylesheet
   ===================================================== */

:root{
  --green:#1A2B27;--green-deep:#111f1c;
  --gold:#D6BF7A;--gold-soft:#e2ce96;--gold-dark:#B8A05C;
  /* --gold-text : l or de marque sur fond clair. Meme teinte et meme
     saturation que --gold (H 45 deg, S 53%), seulement plus profond :
     #A8923E ne donnait que 2,4:1 sur le creme fonce, sous le seuil WCAG AA
     de 4,5:1 pour le petit texte. #796425 tient sur les quatre fonds clairs
     du site (creme 5,05 / creme-soft 4,61 / creme-deep 4,53 / blanc 5,73).
     L or de marque lui-meme est inchange : sur vert il donne deja 8,2:1. */
  --gold-text:#796425;
  --cream:#F5F0E8;--cream-deep:#EAE4D9;--cream-soft:#EDE6D7;--ink:#13231a;--ink-soft:#3b4a40;
  --rule:rgba(214,191,122,.40);--rule-dark:rgba(245,240,232,.14);
  /* Design system — lot 4 */
  --container-max:1200px;
  --h1-display:clamp(2.75rem,6vw,4.25rem);
  --h1-page:clamp(2.25rem,4.5vw,3.25rem);
  --h2-section:clamp(1.75rem,3.2vw,2.75rem);
  --gold-hover:#C4AE6E;
  --radius-card:0px;    /* coins droits (cartes processus, images éditoriales) */
  --card-inset:10px;    /* retrait du filet interne */
  /* Lot 4bis — finition */
  --section-pad:96px;           /* padding vertical unique des sections */
  --transition-fast:180ms ease; /* durée unique hover/focus */
  --label-size:12.5px;          /* petites capitales : taille */
  --label-tracking:2px;         /* petites capitales : approche */
  --label-weight:500;           /* petites capitales : graisse */
}
@media(max-width:680px){:root{--section-pad:64px}}
@media (prefers-reduced-motion: reduce){:root{--transition-fast:0ms}}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
html,body{background:var(--cream);color:var(--ink);font-family:"Manrope",sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;background:none;border:0;font:inherit;color:inherit}
input,textarea,select{font:inherit;color:inherit}

/* ── Layout ── */
.container{max-width:var(--container-max);margin:0 auto;padding:0 40px}
.container p{max-width:68ch}
.teasers-head p,.processus-head p,.steps-head p,.bc-head p,.tp-head p,.leadgen-top p{margin-left:auto;margin-right:auto}
.section{padding:120px 0;position:relative}

/* ── Typography ── */
.eyebrow{font-family:"Sora",sans-serif;font-weight:500;letter-spacing:0.42em;text-transform:uppercase;font-size:12px;display:inline-flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--gold);flex-shrink:0}

/* ── Nav ── */
/* Piège à robots : hors de l'écran et hors du parcours clavier, mais bien
   présent dans le HTML. Un display:none serait repéré par les robots les
   plus courants, qui laissent alors le champ vide. */
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pot-de-miel input{width:1px;height:1px}

/* Message d'alerte d'un formulaire : fichier trop lourd, envoi en echec.
   Terre cuite sur creme — la seule couleur d'alerte du site, deja utilisee
   par .legal-flag. */
.form-alerte{
  background:rgba(168,69,46,.07);border:1px solid rgba(168,69,46,.30);
  color:#7e3624;
  font-family:"Manrope",sans-serif;font-size:14px;line-height:1.55;
  padding:14px 18px;margin:0 0 8px;
}

/* Lien d'évitement : hors écran tant qu'il n'a pas le focus, il permet à
   un visiteur au clavier ou au lecteur d'écran de sauter la navigation,
   répétée à l'identique sur chaque page. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--green);color:var(--cream);
  font-family:"Sora",sans-serif;font-size:13px;letter-spacing:.06em;
  padding:12px 20px;border:1px solid var(--gold);
}
.skip-link:focus{left:16px;top:16px;outline:2px solid var(--gold);outline-offset:2px}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:var(--nav-h,88px);padding:0 80px;
  color:var(--cream);
  transition:background 200ms ease,height 200ms ease,box-shadow 200ms ease;
}
.nav.scrolled{--nav-h:64px;background:#1A2B27;box-shadow:0 1px 0 rgba(214,191,122,.14),0 8px 28px rgba(13,26,22,.30)}

/* Voile de lisibilité de la nav transparente (accueil uniquement).
   Le voile du hero est horizontal : très dense à gauche, presque nul à
   droite, où la nav passait sur la pierre claire de la façade — « À propos »,
   « Nos projets » et le bouton doré y tombaient sous le seuil de lisibilité.
   Ce dégradé vertical ne concerne que la barre et s'efface dès qu'elle prend
   son fond plein au défilement. */
body:not(.hero-clair) .nav::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,25,22,.66) 0%,rgba(11,25,22,.30) 62%,transparent 100%);
  transition:opacity 200ms ease;
}
body:not(.hero-clair) .nav.scrolled::before{opacity:0}
@media (prefers-reduced-motion: reduce){body:not(.hero-clair) .nav::before{transition:none}}
@media (prefers-reduced-motion: reduce){.nav,.nav-brand svg,.wordmark{transition:none!important}}
/* Stacked centered logo */
.nav-brand{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;height:100%;text-decoration:none;
}
.nav-brand svg{height:38px;width:auto;display:block;transition:height 200ms ease}
.nav.scrolled .nav-brand svg{height:28px}
.nav.scrolled .nav-brand{gap:5px}
.nav.scrolled .wordmark{font-size:12px}
.wordmark{transition:font-size 200ms ease}
.wordmark{font-family:"Josefin Sans",sans-serif;font-weight:300;letter-spacing:0.38em;font-size:14px;color:#D6BF7A;text-transform:uppercase;line-height:1}
/* Left nav links */
.nav-left{display:flex;gap:32px;align-items:center;justify-content:flex-end;padding-right:52px}
/* Right nav links + CTA */
.nav-right{display:flex;gap:32px;align-items:center;padding-left:52px}
.nav-right .nav-cta{margin-left:auto}
/* Link styles */
.nav-left a,.nav-right a:not(.nav-cta){
  font-family:"Sora",sans-serif;font-weight:400;font-size:14px;
  letter-spacing:0.16em;text-transform:uppercase;
  opacity:.72;transition:opacity .2s,color .2s;white-space:nowrap;
}
.nav-left a:hover,.nav-right a:not(.nav-cta):hover,
.nav-left a[aria-current="page"],.nav-right a[aria-current="page"]{opacity:1;color:var(--gold)}
/* CTA */
.nav-cta{background:transparent;color:var(--gold);border:1px solid var(--gold);padding:10px 18px;font-family:"Sora",sans-serif;font-size:10.5px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;transition:background .25s,color .25s;white-space:nowrap}
.nav-cta:hover{background:rgba(214,191,122,.10);color:var(--gold)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;font-family:"Sora",sans-serif;font-weight:500;font-size:11.5px;letter-spacing:0.24em;text-transform:uppercase;transition:all .25s;cursor:pointer}
.btn-gold{background:var(--gold);color:var(--green);border:0}
.btn-gold:hover{background:var(--gold-hover);transform:translateY(-1px)}
.btn-ghost{border:1px solid var(--gold);color:var(--gold)}
.btn-ghost:hover{background:rgba(214,191,122,.12)}
.btn-dark{border:1px solid var(--rule);color:var(--green)}
.btn-dark:hover{border-color:var(--gold);color:var(--gold)}

/* ── Page hero (inner pages) ── */
.page-hero{
  background:var(--green);
  background-image:
    radial-gradient(900px 400px at 80% 60%,rgba(214,191,122,.07),transparent 60%),
    linear-gradient(180deg,#1f3330 0%,#131f1c 100%);
  color:var(--cream);padding:200px 0 96px;position:relative;overflow:hidden;
}
.page-hero .eyebrow{color:var(--gold);margin-bottom:24px}
.page-hero h1{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:var(--h1-page);letter-spacing:-0.02em;line-height:1.02}
.page-hero .sub{max-width:560px;margin-top:24px;font-size:18px;line-height:1.65;color:rgba(245,240,232,.72);font-weight:300}

/* ── Section heads ── */
.section-head{margin-bottom:72px}
.section-head .eyebrow{color:var(--gold-text)}
.section-head h2{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:var(--h2-section);letter-spacing:-0.02em;line-height:1.04;margin-top:18px;color:var(--ink)}
.section-head .lede{font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:560px;margin-top:16px}
.section-head.light h2{color:var(--cream)}

/* ── CTA strip ── */
.cta-strip{padding:120px 0;background:var(--green);color:var(--cream);position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 400px at 70% 50%,rgba(214,191,122,.06),transparent 60%);pointer-events:none}
.cta-strip .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
/* Rattrapage !important — titres display que la cascade ne laisse pas atteindre
   autrement : les CTA de projets.html, a-propos.html et des quatre fiches portent
   un font-family Sora en style inline, et « Du bien au projet. » (.seq-head h2)
   vient du bloc <style> local des fiches, qui bat edgaris.css par ordre de source.
   Les fiches sont generees par generer-projets.py (interdit d'edition) : on les
   rattrape donc ici, pour que tous les titres de meme rang parlent la meme voix. */
.cta-strip h3{font-family:"Cormorant Garamond",serif!important;font-style:italic!important;font-weight:300!important;font-size:clamp(28px,3.5vw,50px);letter-spacing:-0.02em;line-height:1.1;max-width:640px}
.cta-strip h3 em{font-style:italic;color:var(--gold)}
.seq-head h2{font-family:"Cormorant Garamond",serif!important;font-style:italic!important;font-weight:300!important}

/* ── Forms ── */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:"Sora",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:0.26em;text-transform:uppercase;color:var(--green)}
/* width:100% + min-width:0 : sans eux un controle de formulaire impose sa
   largeur intrinseque a son conteneur au lieu de la suivre. Le champ fichier
   (bouton + libelle natif) forcait ainsi la piste de grille de contact.html
   a 374 px sur un ecran de 390 px. Sans effet en bureau : dans .field, qui est
   un flex en colonne, les champs occupaient deja toute la largeur. */
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--rule);padding:12px 0;font-size:14.5px;font-weight:300;transition:border-color .2s;outline:none;width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:rgba(19,35,26,.38)}
.field textarea{resize:none;min-height:82px}
/* Champ pièces jointes */
.field input[type="file"]{border-bottom:1px solid var(--rule);padding:12px 0;font-family:"Manrope",sans-serif;font-size:13.5px;font-weight:300;color:var(--ink-soft);cursor:pointer}
.field input[type="file"]::file-selector-button{font-family:"Sora",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--green);background:transparent;border:1px solid var(--rule);padding:9px 16px;margin-right:14px;cursor:pointer;transition:border-color .2s,color .2s}
.field input[type="file"]::file-selector-button:hover{border-color:var(--gold);color:var(--gold)}
.field-hint{font-family:"Manrope",sans-serif;font-weight:300;font-size:11.5px;color:rgba(19,35,26,.65);margin-top:2px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-gap{display:flex;flex-direction:column;gap:22px}
.radio-group{display:flex;border:1px solid var(--rule);overflow:hidden;background:#fbf8f1}
.radio-label{flex:1;position:relative;display:flex;align-items:center;justify-content:center;padding:15px 8px;cursor:pointer;font-family:"Sora",sans-serif;font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-soft);border-right:1px solid var(--rule);transition:background .2s,color .2s;text-align:center}
.radio-label:last-child{border-right:0}
.radio-label input[type="radio"]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.radio-label.is-checked{background:var(--green);color:var(--cream)}

/* ── Footer ── */
footer{background:#1A2B27;color:rgba(245,240,232,.7);padding:72px 0 32px;border-top:1px solid var(--rule-dark)}
footer .container{padding:0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:56px;align-items:start}
.foot h4{font-family:"Sora",sans-serif;font-weight:500;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:12px;font-size:14px}
/* <address> porte le sens de l'adresse de l'organisme ; le navigateur le met
   en italique par défaut, ce qui jurerait avec le Manrope 300 du pied. */
.foot address{font-style:normal;line-height:1.55}
.foot ul a:hover{color:var(--gold)}
.foot-brand p{margin-top:20px;font-size:14px;line-height:1.65;max-width:300px;color:rgba(245,240,232,.65)}
.foot-bot{position:relative;display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:52px;padding-top:24px;border-top:1px solid var(--rule-dark);font-size:12px;color:rgba(245,240,232,.60)}
/* Crédit centré sur la ligne, indépendamment de la largeur des deux côtés */
.foot-credit{position:absolute;left:50%;transform:translateX(-50%);text-align:center;font-family:"Manrope",sans-serif;font-weight:300;font-size:11.5px;color:rgba(245,240,232,.55);white-space:nowrap}
.foot-credit a{color:rgba(245,240,232,.72);transition:color var(--transition-fast)}
.foot-credit a:hover{color:var(--gold)}
@media(max-width:900px){
  .foot-bot{flex-direction:column;gap:16px;text-align:center}
  .foot-credit{position:static;transform:none;white-space:normal;order:3}
}
.foot-links{display:flex;gap:24px}
.foot-links a:hover{color:rgba(245,240,232,.92)}

/* ── Nav burger ── */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:5.5px;
  padding:8px 4px;background:none;border:0;cursor:pointer;
  position:absolute;right:24px;top:50%;transform:translateY(-50%);z-index:200;
}
.nav-burger span{
  display:block;width:24px;height:1.5px;
  background:rgba(245,240,232,.85);
  transition:transform .3s,opacity .25s,width .3s;
  transform-origin:center;
}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;width:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Mobile nav overlay (lot 5, tâche 2) — plein écran, numéroté ── */
.nav-mobile{
  position:fixed;inset:0;z-index:99;
  background:var(--green);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:112px 32px 32px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .25s ease,visibility 0s linear .25s;
}
.nav-mobile.open{opacity:1;pointer-events:all;visibility:visible;transition:opacity .25s ease,visibility 0s}
.nav-mobile-close{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0;pointer-events:none}
.nav-mobile-links{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:0}
.nav-mobile-links a{
  display:flex;align-items:baseline;gap:16px;width:100%;
  font-family:"Sora",sans-serif;font-weight:300;font-size:clamp(1.75rem,8vw,2.5rem);
  letter-spacing:-0.01em;text-transform:none;line-height:1.15;
  color:var(--cream);padding:14px 0;border-bottom:1px solid var(--rule-dark);
  opacity:0;transform:translateY(8px);
  transition:color .2s,opacity .35s ease,transform .35s ease;
}
.nav-mobile-links a .num{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:.55em;color:var(--gold);min-width:1.6em;letter-spacing:0}
.nav-mobile-links a:hover,.nav-mobile-links a[aria-current="page"]{color:var(--gold)}
.nav-mobile.open .nav-mobile-links a{opacity:1;transform:none}
.nav-mobile.open .nav-mobile-links a:nth-child(1){transition-delay:.05s}
.nav-mobile.open .nav-mobile-links a:nth-child(2){transition-delay:.09s}
.nav-mobile.open .nav-mobile-links a:nth-child(3){transition-delay:.13s}
.nav-mobile.open .nav-mobile-links a:nth-child(4){transition-delay:.17s}
.nav-mobile.open .nav-mobile-links a:nth-child(5){transition-delay:.21s}
.nav-mobile-foot{display:flex;flex-direction:column;gap:14px;align-items:center;width:100%}
.nav-mobile-foot .btn{width:100%;justify-content:center}
.nav-mobile-foot .tel{font-family:"Sora",sans-serif;font-size:14px;letter-spacing:0.08em;color:rgba(245,240,232,.75)}
.nav-mobile-foot .tel:hover{color:var(--gold)}
@media (prefers-reduced-motion: reduce){
  .nav-mobile,.nav-mobile.open{transition:none}
  .nav-mobile-links a{transition:color .2s;transform:none;opacity:1}
  .nav-mobile.open .nav-mobile-links a{transition-delay:0s}
}
/* body verrouillé sans saut de layout (compensation de la barre de scroll) */
body.menu-open{overflow:hidden;padding-right:var(--sbw,0px)}

/* ── Responsive ── */
@media(max-width:1100px){
  .container{padding:0 40px}
  .nav{
    display:flex;justify-content:flex-start;align-items:center;
    padding:14px 24px;
  }
  .nav{height:var(--nav-h,72px);padding:0 24px}
  .nav.scrolled{--nav-h:56px}
  .nav-left,.nav-right{display:none}
  .nav-burger{display:flex}
  .section{padding:100px 0}
  .page-hero{padding:140px 0 64px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .cta-strip .container{flex-direction:column;align-items:flex-start;gap:32px}
}
@media(max-width:680px){
  .container{padding:0 24px}
  .grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .radio-group{flex-direction:column}
  .radio-label{border-right:0;border-bottom:1px solid var(--rule)}
  .radio-label:last-child{border-bottom:0}
  .page-hero h1{font-size:32px}
  .page-hero .sub{font-size:15px;max-width:100%}
  .section-head h2{font-size:28px}
  .cta-strip h3{font-size:26px}
}

/* ═══════════════════════════════════════════════════════════
   DESIGN UPLIFT — profondeur · mouvement · matière · détails
   Identité inchangée (palette, typo, logo). Tout est additif.
   ═══════════════════════════════════════════════════════════ */

/* ── Transitions unifiées (révélation + survol coexistent) ── */
.section-head,.teasers-head,.processus-head,.bc-head,.tp-head,.acc-head,.leadgen-top,
.act-col,.bc-card,.tp-card,.hp-card,.eng-item,.exp-tl-item,.step,.proc-step,
.teaser,.form-card,.conviction-text,.exp-text,.bio-col,.nm-text,.drawer-badge,.pb-item{
  transition:opacity .7s cubic-bezier(.2,.6,.2,1),
             transform .55s cubic-bezier(.2,.6,.2,1),
             box-shadow .45s ease,
             border-color .3s ease,
             background-color .3s ease;
}

/* ── Apparitions au scroll (désactivé si l'utilisateur préfère peu d'animations) ── */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0;transform:translateY(14px)}
  [data-reveal].is-visible{opacity:1;transform:none}
}

/* ── Profondeur & lift au survol des cartes ── */
.bc-card,.tp-card{box-shadow:0 1px 2px rgba(19,35,26,.05),0 12px 30px rgba(19,35,26,.06)}
.bc-card:hover,.tp-card:hover{transform:translateY(-6px);box-shadow:0 10px 22px rgba(19,35,26,.10),0 28px 56px rgba(19,35,26,.15)}
.hp-card:hover{transform:translateY(-4px)}
.eng-item:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 16px 40px rgba(19,35,26,.10)}
.exp-tl-item:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(19,35,26,.10)}
.form-card:hover{box-shadow:0 6px 16px rgba(19,35,26,.08),0 30px 70px rgba(19,35,26,.12)}

/* ── Zoom doux de l'image au survol ── */
.bc-img-wrap,.tp-img-wrap,.hp-card{overflow:hidden}
.bc-img-wrap img,
.tp-img-wrap img,
.hp-card img{transition:transform .65s cubic-bezier(.2,.6,.2,1)}
.bc-card:hover .bc-img-wrap img,
.tp-card:hover .tp-img-wrap img,
.hp-card:hover img{transform:scale(1.06)}

/* ── Emplacements photo vides : dégradé pierre plutôt que carré terne ── */
.bc-img-wrap,.tp-img-wrap{background:linear-gradient(155deg,#22352f 0%,#131f1c 100%)}

/* ── Matière : grain filmique très léger sur tout le site ── */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* ── Micro-interaction : soulignement or animé sur les liens de pied de page ── */
.foot ul a{position:relative;transition:color .25s}
.foot ul a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.6,.2,1);
}
.foot ul a:hover::after{transform:scaleX(1)}

/* ── Boutons : réactivité un peu plus vivante ── */
.btn{transition:background .25s ease,color .25s ease,transform .2s ease,box-shadow .3s ease}



/* ── Renvoi croisé entre activités (composant réutilisable) ── */
.xlink{background:var(--cream);padding:56px 0 0;text-align:center}
.xlink p{font-family:'Manrope',sans-serif;font-weight:300;font-size:15.5px;color:var(--ink-soft)}
.xlink a{font-family:'Sora',sans-serif;font-weight:500;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-text);border-bottom:1px solid var(--gold);padding-bottom:3px;margin-left:6px;transition:color .2s;white-space:nowrap}
.xlink a:hover{color:var(--gold)}
@media(max-width:680px){.xlink a{white-space:normal;display:inline-block;margin-left:0;margin-top:8px}}

/* ── Motif de transition entre sections (filet or + portique) ── */
.edge-motif{
  display:flex;align-items:center;justify-content:center;gap:26px;
  padding:60px 0;background:var(--cream);
}
.edge-motif::before,.edge-motif::after{
  content:"";height:1px;width:min(140px,20vw);
  background:linear-gradient(to right,transparent,rgba(214,191,122,.75));
}
.edge-motif::after{background:linear-gradient(to left,transparent,rgba(214,191,122,.75))}
.edge-motif svg{flex-shrink:0;opacity:.92}
.edge-motif.on-green{background:var(--green)}

/* ── Hero des pages internes : bandeau vert épuré (pas de photo, la photo
   plein écran reste réservée à l'accueil) ── */
.page-hero-bg{display:none!important}
.page-hero-overlay{display:none!important}
.page-hero{background:linear-gradient(160deg,#1f3330 0%,#111f1c 100%)!important}

/* ═══ Lot 4 — Heros clairs des pages intérieures ═══
   Nav : fond vert profond PLEIN sur les pages intérieures (correction 4.3) ;
   seule la home garde la nav transparente sur l'image du hero. */
.hero-clair .page-hero{background:var(--cream)!important}
.hero-clair .page-hero h1{color:var(--green)}
.hero-clair .page-hero .eyebrow{color:var(--gold-text)!important}
.hero-clair .nav{background:#1A2B27}

/* ═══ Lot 4 — Tâche 7 : hero compact + ancres de page ═══ */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* 7a — hero centré, sans eyebrow (~280-320px barre incluse) */
/* Lot 4bis T2 — respiration : 72px au-dessus du H1 (sous la nav ~104px), 20px H1→sous-titre, 40px sous-titre→ancres */
.hero-compact .page-hero{padding:calc(104px + 72px) 0 40px!important;min-height:0;text-align:center}
.hero-compact .page-hero .eyebrow{display:none}
.hero-compact .page-hero h1{line-height:1.05;font-size:var(--h1-page)!important}
.hero-compact .page-hero .hero-sub{margin:20px auto 0!important;font-size:clamp(20px,2vw,26px)!important;max-width:560px!important}
.hero-compact .page-hero .hero-body{margin:20px auto 0!important;font-size:16px!important;max-width:560px!important}
.hero-compact .page-hero .hero-note{margin:12px auto 0!important;font-size:15px!important}
@media(max-width:680px){.hero-compact .page-hero{padding:calc(88px + 50px) 0 28px!important}.hero-compact .page-hero .hero-sub,.hero-compact .page-hero .hero-body{margin-top:14px!important}}
/* 7b — barre d'ancres pleine largeur, double filet, sticky */
.page-anchors{position:sticky;top:64px;z-index:99;background:var(--cream);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.page-anchors .container{display:flex;justify-content:center;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.page-anchors .container::-webkit-scrollbar{display:none}
.page-anchors a{font-family:"Sora",sans-serif;font-weight:400;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;padding:13px 20px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;flex-shrink:0}
.page-anchors a:hover{color:var(--gold-text)}
.page-anchors a.is-active{color:var(--gold-text);border-bottom-color:var(--gold)}
[data-anchor-target]{scroll-margin-top:130px}
@media(max-width:680px){.page-anchors{top:56px}[data-anchor-target]{scroll-margin-top:110px}.page-anchors .container{justify-content:flex-start;padding:0 8px}.page-anchors a{padding:12px 14px;font-size:11.5px}}

/* ═══ Lot 4 — Tâche 8 : carte d'étape unique (.proc-card), double filet doré ═══
   Utilisée par les sections « Comment ça marche » (MdB : 4 · Ingénierie : 3).
   Élément inerte : aucun hover, aucun curseur pointer. */
.proc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:72px;align-items:stretch}
.proc-cards.is-3{grid-template-columns:repeat(3,1fr)}
.proc-card{
  position:relative;background:var(--green);color:var(--cream);
  border:1px solid rgba(214,191,122,.5);           /* cadre externe, or 50 % */
  border-radius:var(--radius-card);
  padding:44px 32px 30px;
  display:flex;flex-direction:column;height:100%;
  transition:none;transform:none!important;box-shadow:none!important;cursor:default;
}
.proc-card::before{                                /* cadre interne, or plein, concentrique */
  content:"";position:absolute;inset:var(--card-inset);
  border:1px solid var(--gold);pointer-events:none;
  border-radius:calc(var(--radius-card) - var(--card-inset));
}
.proc-card>*{position:relative}
.pc-num{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:64px;line-height:1;color:var(--gold);text-align:center;display:block}
.pc-title{font-family:'Sora',sans-serif;font-weight:300;font-size:21px;letter-spacing:-0.01em;line-height:1.25;color:var(--cream);text-align:center;margin:18px 0 0}
.pc-body{font-family:'Manrope',sans-serif;font-weight:300;font-size:15px;line-height:1.6;color:rgba(245,240,232,.78);text-align:left;margin:20px 0 0;max-width:none;flex:1}
.pc-note{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--gold);display:block;margin-top:auto;padding-top:16px;border-top:1px solid rgba(214,191,122,.35)}
/* respiration minimale entre la fin du texte et le filet doré, même quand la carte est pleine */
.pc-body{margin-bottom:26px}
/* Alignement du filet doré d'une carte à l'autre.
   La mise en page flex ci-dessus colle bien la note en bas de carte, mais
   chaque carte calcule ses hauteurs dans son coin : une note qui passe sur
   deux lignes fait remonter son filet par rapport à celui des voisines
   (20 px d'écart sur « Comment ça marche ? » d'Ingénierie).
   En partageant les mêmes pistes de lignes, numéro, titre, texte et note
   occupent la même hauteur d'une carte à l'autre : les quatre filets tombent
   au même niveau quelle que soit la longueur des textes — sans hauteur en dur,
   donc sans rien à recalculer si un libellé change.
   margin-top:auto doit être neutralisé ici : en grille il pousserait la note
   vers le bas de sa piste, ce qui reproduirait le décalage.
   Repli sans subgrid : la mise en page flex, telle qu'avant. */
@supports (grid-template-rows: subgrid){
  .proc-cards{grid-template-rows:repeat(4,auto)}
  .proc-card{display:grid;grid-template-rows:subgrid;grid-row:span 4}
  .pc-note{margin-top:0}
}
@media(max-width:1100px){.proc-cards,.proc-cards.is-3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.proc-cards,.proc-cards.is-3{grid-template-columns:1fr}}

/* ═══ Lot 5 — Tâche 1 : footer numéroté ═══ */

/* ═══ Lot 5 — Tâche 3 : indicateur de scroll (home) ═══ */

/* ═══ Lot 5 — Tâche 4 : transitions de page (View Transitions API, natif) ═══
   Fondu croisé 220ms sur les navigations same-origin ; sans support → navigation classique. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s;animation-timing-function:ease}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ═══════════════ Lot 4bis — finition agence (système) ═══════════════ */

/* T10 — petites capitales unifiées */
.label-caps,.eyebrow,.page-anchors a,.btn,.pb-label,.foot h4,.act-tag,.acc-col-tag,.stat-v,.hp-status,.ph-label,.photo-caption,.tl-l,.li-label{
  font-family:"Sora",sans-serif!important;font-size:var(--label-size)!important;letter-spacing:var(--label-tracking)!important;font-weight:var(--label-weight)!important;text-transform:uppercase!important;
}

/* T4 — boutons à liseré (signature double filet) */
.btn{padding:14px 28px;line-height:1;transition:background var(--transition-fast),color var(--transition-fast),outline-color var(--transition-fast)}
.nav-cta{transition:background var(--transition-fast),color var(--transition-fast)}
/* T4 — style unique de CTA : or plein, sans liseré (référence : « Voir tous nos projets ») */
.btn-gold,.btn-ghost{background:var(--gold);color:var(--green);border:0;outline:0}
.btn-gold:hover,.btn-ghost:hover{background:var(--gold-hover);transform:none;box-shadow:none}
.nav-cta{background:transparent;color:var(--gold);border:1px solid var(--gold);outline:0}
.nav-cta:hover{background:rgba(214,191,122,.10)}
.btn-ghost.on-light{color:var(--green)}
/* focus clavier : liseré externe 2px, jamais supprimé sans remplacement */
.btn:focus-visible,.nav-cta:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* T9 — micro-états */
::selection{background:var(--gold);color:var(--green)}
::-moz-selection{background:var(--gold);color:var(--green)}
.nav-left a,.nav-right a,.page-anchors a,.foot ul a{transition:color var(--transition-fast),opacity var(--transition-fast)}
.bc-card{transition:box-shadow var(--transition-fast)}
.bc-card:hover{transform:none}                       /* la carte ne se soulève plus… */
.bc-img-wrap img{transition:transform 300ms ease}
.bc-card:hover .bc-img-wrap img{transform:scale(1.03)}   /* …seule l'image zoome */
@media (prefers-reduced-motion: reduce){.bc-img-wrap img{transition:none}.bc-card:hover .bc-img-wrap img{transform:none}}

/* T7 — image éditoriale : cadre doré décalé + ombre douce + ratio fixé */
.img-editorial{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--radius-card);overflow:visible}
.img-editorial::before{content:"";position:absolute;inset:0;transform:translate(12px,12px);border:1px solid var(--gold);border-radius:var(--radius-card);pointer-events:none;z-index:0}
.img-editorial img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius-card);box-shadow:0 24px 48px -24px rgba(26,43,39,.25)}

/* T6 — filet séparateur texte / image (colonnes) */
.col-sep{position:relative}
.col-sep::after{content:"";position:absolute;top:15%;bottom:15%;left:50%;width:1px;background:var(--gold);transform:translateX(-50%);pointer-events:none}
@media(max-width:900px){.col-sep::after{top:auto;bottom:auto;left:50%;width:40px;height:1px;transform:translateX(-50%)}}

/* T3 — padding vertical unique des sections (Marchand de biens) */
.pour-qui,.notre-metier,.steps-split,.biens-cibles{padding-top:var(--section-pad)!important;padding-bottom:var(--section-pad)!important}
.preuve-band{padding-top:calc(var(--section-pad)*.55)!important;padding-bottom:calc(var(--section-pad)*.55)!important}

/* ═══ Composants partagés — section « Pour qui » (grille éditoriale, fond vert) ═══
   Utilisée par Marchand de biens (.pour-qui) et Ingénierie. Aucun hover : blocs inertes. */
/* Règle : la 1re section sous un hero crème est TOUJOURS crème — le vert n'apparaît qu'à partir
   de la 2e section de contenu (Notre métier / La valeur cachée), jamais au contact direct du hero.
   « Pour qui » vient ensuite : elle peut être verte car elle ne touche plus jamais le hero. */
.pour-qui{background:var(--green);position:relative;overflow:hidden;padding:var(--section-pad) 0}
.pour-qui .container{position:relative}
.pour-qui .section-head h2{color:var(--cream)!important}
.pour-qui .section-head .lede{color:rgba(245,240,232,.72)!important;max-width:none;white-space:nowrap}
.pour-qui .eyebrow{color:var(--gold)!important}
.pq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark);margin-top:56px;position:relative}
.pq-card{padding:40px 36px 36px;position:relative;display:flex;flex-direction:column;gap:16px;height:100%}
.pq-card:not(:last-child)::after{content:"";position:absolute;right:0;top:-15px;bottom:-15px;width:1px;background:var(--rule-dark);pointer-events:none}
.pq-card h3{font-family:"Sora",sans-serif;font-weight:300;font-size:21px;letter-spacing:-0.01em;color:var(--cream);margin-top:8px}
.pq-card p{font-size:15px;line-height:1.65;color:rgba(245,240,232,.72)}
.pq-cta{text-align:center;margin-top:48px;display:flex;flex-direction:column;align-items:center;gap:18px}
.pq-cta p{font-family:"Manrope",sans-serif;font-weight:300;font-size:16px;color:rgba(245,240,232,.78);margin:0}
@media(max-width:1100px){.pq-grid{grid-template-columns:1fr}.pq-card:not(:last-child)::after{display:none}}
@media(max-width:680px){.pour-qui .section-head .lede{white-space:normal!important}}

/* ═══ Composant partagé — bloc CTA final en bande fine ═══ */
.cta-band{background:var(--green);border-top:1px solid var(--gold);padding:44px 48px;width:100%}
.cta-row{display:flex;align-items:center;justify-content:space-between;gap:40px}
.cta-title{color:var(--cream);margin:0;font-family:'Sora',sans-serif;font-weight:200;font-size:clamp(24px,2.4vw,34px);line-height:1.2}
.cta-title em{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--cream)}
@media(max-width:900px){.cta-row{flex-direction:column;align-items:center;text-align:center;gap:22px}.cta-title{text-align:center}.cta-band{padding:36px 24px}}


/* ═══ Composant partagé — carte catalogue (photo + corps) ═══
   Base réutilisée par « Biens ciblés » (MdB) et « Nos réalisations » (Projets). */
.bc-card{background:#fff;border:1px solid rgba(214,191,122,.25);display:flex;flex-direction:column;overflow:hidden;height:100%}
.bc-img-wrap{position:relative;height:220px;flex-shrink:0;overflow:hidden}
.bc-img-wrap img{width:100%;height:100%;display:block}
.bc-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.bc-body{padding:28px 24px;flex:1;display:flex;flex-direction:column}
.bc-body h3{font-family:'Sora',sans-serif;font-weight:500;font-size:15px;color:var(--green);margin:0;min-height:2.6em;line-height:1.3}
.bc-body p{font-family:'Manrope',sans-serif;font-weight:300;font-size:14px;line-height:1.65;color:var(--ink-soft);margin:10px 0 0}
/* Lien de carte (facultatif — cartes cliquables uniquement, ex. Projets) */
.bc-link{margin-top:auto;padding-top:10px;font-family:'Sora',sans-serif;font-weight:500;font-size:10px;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-text)}
/* Badge de statut (coin haut de l'image, doré sur voile sombre) */
.bc-badge{position:absolute;top:14px;left:14px;z-index:2;font-family:'Sora',sans-serif;font-weight:500;font-size:9.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--gold);background:rgba(26,43,39,.55);padding:6px 10px}

/* ═══ Section « deux colonnes illustrées » (composant partagé) ═══
   Accueil : « Une expertise, deux façons de l'exercer ».
   Ingénierie : « Terrain ou bâti, la même rigueur ».
   Carte blanche, photo en tête, liste de prestations, CTA en pied. */
.teasers{background:var(--cream);border-top:none;padding:96px 0;position:relative;overflow:hidden}
.teasers-head{text-align:center;max-width:900px;margin-left:auto;margin-right:auto;margin-bottom:80px}
.teasers-head h2{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:300;font-size:var(--h2-section);color:var(--ink);margin:12px 0 0;line-height:1.1;text-align:center}
.teasers-head .th-body{font-family:'Manrope',sans-serif;font-weight:300;font-size:16px;line-height:1.7;color:var(--ink-soft);margin:20px auto 0;max-width:640px;text-align:center}
.act-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:none}
.act-col{background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 1px 2px rgba(19,35,26,.05),0 12px 30px rgba(19,35,26,.06)}
.act-col:hover{transform:translateY(-6px);box-shadow:0 10px 22px rgba(19,35,26,.10),0 28px 56px rgba(19,35,26,.15)}
/* Photo en tête de carte */
.act-img{height:250px;overflow:hidden;position:relative;background:linear-gradient(155deg,#22352f 0%,#131f1c 100%)}
.act-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .65s cubic-bezier(.2,.6,.2,1)}
.act-col:hover .act-img img{transform:scale(1.05)}
.act-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(26,43,39,.30),transparent 45%);pointer-events:none}
/* Corps de carte */
.act-body{padding:40px 44px 44px;display:flex;flex-direction:column;gap:18px;flex:1}
.act-col .act-tag{font-family:"Sora",sans-serif;font-weight:400;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold-text)}
.act-col h3{font-family:"Sora",sans-serif;font-weight:300;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.015em;color:var(--green);line-height:1.15}
.act-col p{font-size:15.5px;line-height:1.68;color:var(--ink-soft)}
.act-col ul{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:8px}
.act-col ul li{font-size:14px;color:var(--ink-soft);display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.act-col ul li:last-child{border-bottom:0}
.act-col ul li::before{content:"";width:6px;height:6px;background:var(--gold);flex-shrink:0;margin-top:5px}
.act-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-family:"Sora",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-text);background:transparent;border:1px solid var(--gold);padding:10px 20px;text-decoration:none;transition:background .2s ease,color .2s ease}
.act-cta:hover{background:var(--gold);color:var(--green)}
.act-cta .arr{display:inline-block}
@media(max-width:1100px){.act-grid{grid-template-columns:1fr}}
@media(max-width:680px){.act-body{padding:28px 24px 32px}.act-img{height:200px}}