/* ==========================================================================
   BY CLEAN — Design system
   Charte : Noir Minéral #141415 · Ivoire Neige #F5F2EC · Or Bronze #B59A72
            Bois Chalet #564433 · Gris Alpin #6C6A66
   Typo   : Cormorant Garamond (titres) · Montserrat (corps)
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/cormorant-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --noir:#141415;
  --noir-2:#1b1b1d;
  --noir-3:#242426;
  --ivoire:#F5F2EC;
  --ivoire-2:#ECE8E0;
  --ivoire-3:#E2DDD3;
  --or:#B59A72;
  --or-2:#CBB48F;
  --bois:#564433;
  --gris:#6C6A66;
  --gris-2:#9B9893;

  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"Montserrat","Helvetica Neue",Arial,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --max:1400px;
  --section:clamp(88px,12vw,160px);

  --star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0c.6 6.2 3.8 9.4 10 10-6.2.6-9.4 3.8-10 10-.6-6.2-3.8-9.4-10-10 6.2-.6 9.4-3.8 10-10z' fill='%23000'/%3E%3C/svg%3E");

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Surfaces */
  --bg:var(--noir);
  --fg:var(--ivoire);
  --fg-soft:rgba(245,242,236,.66);
  --fg-mute:rgba(245,242,236,.52);
  --accent:var(--or);            /* 6.9:1 sur Noir Minéral */
  --line:rgba(245,242,236,.14);
  --line-strong:rgba(245,242,236,.28);
  color-scheme:dark;
}

/* Light surface (ivoire) */
.surface-light,[data-surface="light"]{
  --bg:var(--ivoire);
  --fg:var(--noir);
  --fg-soft:rgba(20,20,21,.68);
  --fg-mute:rgba(20,20,21,.62);
  --accent:var(--bois);          /* 8.3:1 sur Ivoire Neige — l'Or Bronze ne passe pas (2.4:1) */
  --line:rgba(20,20,21,.12);
  --line-strong:rgba(20,20,21,.28);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--noir);color:var(--ivoire);
  font-family:var(--font-body);font-weight:300;font-size:1rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:300;line-height:1.05;letter-spacing:-.005em;text-wrap:balance}
address{font-style:normal}
::selection{background:var(--or);color:var(--noir)}
:focus-visible{outline:1px solid var(--or);outline-offset:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:var(--gutter);z-index:200;background:var(--or);color:var(--noir);padding:12px 18px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.skip-link:focus{top:16px}

/* ------------------------------------------------------------------ Type */
.label{
  font-family:var(--font-body);font-weight:500;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:14px;
}
.label::before{
  content:"";width:.52em;height:.52em;background:currentColor;flex:0 0 auto;opacity:.85;
  -webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat;
}
.label--bare::before{display:none}

.display{font-size:clamp(2.75rem,7.2vw,6.4rem);line-height:.98;letter-spacing:-.012em}
/* Cormorant n'a que des chiffres elzéviriens : le 3 descend de .275em sous la ligne de base.
   Les fichiers de police n'exposent aucun jeu « lnum », on aligne donc le chiffre à la main. */
.fig{display:inline-block;font-size:.92em;transform:translateY(-.275em);letter-spacing:inherit}
.h1{font-size:clamp(2.5rem,5.6vw,4.9rem)}
.h2{font-size:clamp(2.1rem,4.3vw,3.7rem)}
.h3{font-size:clamp(1.55rem,2.4vw,2.15rem);line-height:1.12}
.h4{font-size:1.35rem;line-height:1.2}
em,.it{font-style:italic;font-weight:300}
/* Jeu de graisses : le corps du titre en Light, la partie accentuée en Regular italique,
   et un mot clé en Medium quand il doit porter. */
.display,.h1{font-weight:290}
.h2{font-weight:300}
.h1 em,.h2 em,.display em,.manifesto__quote em{font-weight:530;letter-spacing:-.014em}
.h1 b,.h2 b,.display b,.h3 b{font-weight:500;font-style:normal}
.h1 em,.h2 em,.display em{color:var(--or-2)}
.surface-light .h1 em,.surface-light .h2 em,.surface-light .display em{color:var(--bois)}

.lede{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;font-weight:300;color:var(--fg-soft);max-width:36em}
.body{color:var(--fg-soft);max-width:60ch}
.body p+p{margin-top:1.1em}
.small{font-size:.82rem;line-height:1.65}
.num{font-family:var(--font-display);font-weight:300;font-variant-numeric:lining-nums}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- Layout */
.container{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:clamp(28px,4vw,56px)}
.section{padding-block:var(--section);position:relative;background:var(--bg);color:var(--fg)}
.section--tight{padding-block:calc(var(--section)*.6)}
.section--flush-top{padding-top:0}
.hairline{height:1px;background:var(--line);border:0;margin:0}

.section-head{display:grid;row-gap:18px;justify-items:start;margin-bottom:clamp(44px,6vw,84px)}
.section-head .h2{max-width:100%}
.section-head .lede{margin-top:2px}
/* Le titre de section tient sur une ligne dès que la place existe */
@media (min-width:1000px){.section-head .h2{white-space:nowrap}}

/* Grain — matière discrète sur les surfaces sombres */
.grain{position:relative;isolation:isolate}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.grain>*{position:relative;z-index:2}

/* Ligne de piste — geste signature (courbe du pictogramme) */
.piste{display:block;width:100%;height:clamp(28px,4vw,56px);color:var(--accent);opacity:.5;overflow:visible}
.piste path{stroke:currentColor;fill:none;stroke-width:1;vector-effect:non-scaling-stroke}

/* Étoile à quatre branches — puce signature */
.star{display:inline-block;width:.6em;height:.6em;color:var(--accent);vertical-align:middle}

/* ------------------------------------------------------------ Buttons */
.btn{
  --btn-fg:var(--fg);--btn-line:var(--line-strong);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;
  padding:19px 30px;border:1px solid var(--btn-line);color:var(--btn-fg);
  font-family:var(--font-body);font-weight:500;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;line-height:1;
  border-radius:999px;transition:color .45s var(--ease),border-color .45s var(--ease);overflow:hidden;isolation:isolate;white-space:nowrap;
}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out);z-index:-1}
.btn:hover,.btn:focus-visible{color:var(--noir);border-color:var(--or)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
.btn .arrow{width:14px;height:10px;transition:transform .45s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn--gold{--btn-fg:var(--noir);background:var(--or);border-color:var(--or)}
.btn--gold::before{background:var(--ivoire)}
.btn--gold:hover,.btn--gold:focus-visible{color:var(--noir);border-color:var(--ivoire)}
.btn--ivoire{--btn-fg:var(--noir);background:var(--ivoire);border-color:var(--ivoire)}
.btn--ivoire:hover{border-color:var(--or)}
.btn--sm{padding:14px 20px;font-size:.64rem}
.link{
  display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);
  padding-bottom:6px;position:relative;
}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--or);transform:scaleX(.35);transform-origin:left;transition:transform .5s var(--ease-out)}
.link:hover::after{transform:scaleX(1)}
.link .arrow{width:14px;height:10px;transition:transform .45s var(--ease)}
.link:hover .arrow{transform:translateX(4px)}
.link--gold{color:var(--accent)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}

/* ------------------------------------------------------------- Header */
.header{
  --accent:var(--or);
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding-block:22px;transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
  color:var(--ivoire);
}
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(245,242,236,.1);opacity:0;transition:opacity .5s}
.header.is-scrolled{background:rgba(20,20,21,.86);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);padding-block:14px}
.header.is-scrolled::after{opacity:1}
.header.is-hidden{transform:translateY(-100%)}
.header{transition:transform .5s var(--ease),background .5s var(--ease),padding .5s var(--ease)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,2.4vw,44px);min-width:0}
.brand{display:flex;align-items:center;gap:14px;color:inherit;flex:0 0 auto}
.brand__picto{width:44px;height:auto;flex:0 0 auto;transition:transform .5s var(--ease)}

.header.is-scrolled .brand__picto{transform:scale(.9)}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,38px);flex:0 1 auto;min-width:0;flex-wrap:nowrap}
.nav a{font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;position:relative;padding-block:6px;color:rgba(245,242,236,.82)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--or);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--ivoire)}
.header__cta{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);flex:0 0 auto}
.header__tel{font-weight:500;font-size:.72rem;letter-spacing:.12em;color:rgba(245,242,236,.82);white-space:nowrap}
.header__tel:hover{color:var(--or-2)}
.burger{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* Mobile menu */
.menu{position:fixed;inset:0;z-index:90;background:var(--noir);color:var(--ivoire);display:grid;grid-template-rows:1fr auto;padding:110px var(--gutter) 36px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-out);visibility:hidden}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__list li{border-top:1px solid var(--line)}
.menu__list li:last-child{border-bottom:1px solid var(--line)}
.menu__list a{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;font-family:var(--font-display);font-size:clamp(1.9rem,7vw,2.6rem);font-weight:300;line-height:1.1}
.menu__list a small{font-family:var(--font-body);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
.menu__foot{display:flex;flex-wrap:wrap;gap:12px 28px;color:var(--fg-soft);font-size:.82rem}
.menu__foot a:hover{color:var(--or-2)}
@media (max-width:1220px){.header__tel{display:none}}
@media (max-width:1120px){
  .nav{display:none}
  .burger{display:block}
  .header__cta .btn{display:none}
}

/* --------------------------------------------------------------- Hero */
.hero{--accent:var(--or-2);position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--ivoire);overflow:hidden;background:var(--noir)}
.hero--short{min-height:min(78svh,820px)}
/* isolation : sans elle, le z-index de la vidéo remonte au niveau du hero et
   repasse au-dessus du voile de lisibilité. */
.hero__media{position:absolute;inset:0;overflow:hidden;z-index:0;isolation:isolate}
/* Le poster et la vidéo se superposent. Sans position:absolute, la vidéo se
   plaçait dans le flux SOUS l'image, hors du cadre : elle jouait sans être vue. */
.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__media img{z-index:0}
/* Visible d'emblée : l'attribut poster de la vidéo couvre l'instant précédant
   le décodage, donc l'affichage ne dépend d'aucun script. */
.hero__media video{z-index:1;opacity:1;animation:videoin 1.1s var(--ease) both}
@keyframes videoin{from{opacity:0}to{opacity:1}}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(20,20,21,.94) 0%,rgba(20,20,21,.62) 38%,rgba(20,20,21,.24) 68%,rgba(20,20,21,.42) 100%),
    linear-gradient(to right,rgba(20,20,21,.80),rgba(20,20,21,.42) 45%,rgba(20,20,21,0) 80%);
}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(48px,7vw,96px);padding-top:160px}
/* Voile de lisibilité : une seule couche à l'échelle du hero, entre la vidéo
   et le texte. Portée par le hero et non par les blocs de texte, elle ne peut
   pas être coupée par la boîte d'un élément : aucune lisière visible. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* aplomb du bloc de titre, colonne de gauche */
    radial-gradient(88% 96% at 18% 54%,
      rgba(20,20,21,.95) 0%, rgba(20,20,21,.89) 28%,
      rgba(20,20,21,.68) 50%, rgba(20,20,21,.32) 72%, rgba(20,20,21,0) 90%),
    /* mention latérale et repère de défilement, colonne de droite */
    radial-gradient(44% 58% at 90% 76%,
      rgba(20,20,21,.90) 0%, rgba(20,20,21,.72) 34%,
      rgba(20,20,21,.32) 62%, rgba(20,20,21,0) 88%);
}
.hero__in,.hero__scroll{z-index:2}
@media (max-width:900px){
  .hero::before{
    background:radial-gradient(120% 78% at 28% 74%,
      rgba(20,20,21,.94) 0%, rgba(20,20,21,.86) 30%,
      rgba(20,20,21,.60) 56%, rgba(20,20,21,.24) 76%, rgba(20,20,21,0) 92%);
  }
}
/* Appoint discret : sur une image claire, la panse des lettres reste tenue */
.hero .label,.hero .display,.hero .lede,.hero__aside,.hero__scroll{text-shadow:0 1px 24px rgba(10,10,11,.55)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:end;row-gap:32px}
.hero__copy{min-width:0}
.hero__copy{grid-column:1/span 9}
.hero__aside{grid-column:8/span 5;justify-self:end;align-self:start;text-align:right;color:rgba(245,242,236,.86);font-size:.72rem;line-height:2.1;letter-spacing:.06em;white-space:nowrap;padding-bottom:clamp(40px,8vw,120px)}
.hero__aside b{font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.64rem;color:var(--or-2)}
.hero .label{margin-bottom:26px}
.hero .display{max-width:15ch}
.hero .lede{margin-top:26px;color:rgba(245,242,236,.78)}
.hero .btn-row{margin-top:40px}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:clamp(34px,4.6vw,58px);z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  color:rgba(245,242,236,.82);font-size:.6rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
}
.hero__scroll span{line-height:1;padding-right:.26em}
.hero__scroll i{
  display:block;width:1px;height:clamp(38px,5vw,58px);margin-right:2px;
  background:linear-gradient(rgba(245,242,236,.34),rgba(245,242,236,0));position:relative;overflow:hidden;
}
.hero__scroll i::after{content:"";position:absolute;left:0;top:0;width:1px;height:42%;background:var(--or-2);animation:scrollhint 2.6s var(--ease) infinite}
@keyframes scrollhint{0%{transform:translateY(-110%);opacity:0}18%,58%{opacity:1}100%{transform:translateY(240%);opacity:0}}
@media (max-width:900px){
  .hero__copy{grid-column:1/-1}.hero__aside{display:none}.hero__scroll{display:none}
  .hero__in{padding-top:130px}
  .hero .display{max-width:none}
}

/* Hero typographique (À propos, Contact) */
.hero-type{--accent:var(--or);padding-top:clamp(132px,15vw,196px);padding-bottom:clamp(40px,6vw,80px)}
.hero-type .display{max-width:16ch}

/* --------------------------------------------------------- Intro logo */
.intro{
  /* left/top + 100vw plutôt que inset:0 : si un ancêtre porte un transform,
     il devient le bloc conteneur et l'écran d'ouverture se décentre. */
  position:fixed;left:0;top:0;width:100vw;height:100svh;height:100vh;
  z-index:1000;background:var(--noir);display:flex;align-items:center;justify-content:center;color:var(--ivoire);
  transition:clip-path 1s var(--ease-out);clip-path:inset(0 0 0 0);
}
@supports (height:100svh){.intro{height:100svh}}
.intro.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.intro[hidden]{display:none}
.intro__box{display:grid;place-items:center;gap:26px;transform:translateY(8px)}
/* Le pictogramme porte déjà son cercle : en ajouter un second le dédoublait. */
.intro__ring{position:relative;width:clamp(158px,23vw,222px);aspect-ratio:640/604}
.intro__ring img{
  display:block;width:100%;height:100%;object-fit:contain;
  clip-path:circle(0% at 50% 52%);opacity:0;
  animation:reveal 1.35s var(--ease-out) .15s forwards;
}
.intro__word{width:clamp(146px,18.5vw,206px);opacity:0;animation:wordin .85s var(--ease-out) 1.02s forwards}
.intro__base{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--or-2);opacity:0;animation:wordin .75s var(--ease-out) 1.34s forwards}
.intro__skip{position:absolute;bottom:28px;right:var(--gutter);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-mute);opacity:0;animation:wordin .6s 1.2s forwards}
@keyframes reveal{0%{clip-path:circle(0% at 50% 52%);opacity:0;transform:scale(.965)}
  35%{opacity:1}
  100%{clip-path:circle(78% at 50% 52%);opacity:1;transform:none}}
@keyframes wordin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* --------------------------------------------------------- Reveals */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal-delay="1"]{transition-delay:.12s}[data-reveal-delay="2"]{transition-delay:.24s}[data-reveal-delay="3"]{transition-delay:.36s}[data-reveal-delay="4"]{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
.media{position:relative;overflow:hidden;background:var(--noir-2)}
.media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.media--ratio-4-5{aspect-ratio:4/5}.media--ratio-3-4{aspect-ratio:3/4}.media--ratio-16-10{aspect-ratio:16/10}.media--ratio-1-1{aspect-ratio:1}.media--ratio-21-9{aspect-ratio:21/9}
a:hover .media img,.card:hover .media img{transform:scale(1.035)}

/* ------------------------------------------------------- Deux portes */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.door{background:var(--bg);display:grid;grid-template-rows:auto 1fr;position:relative;color:var(--fg)}
.door__media{aspect-ratio:16/10;overflow:hidden}
.door__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out),filter 1s}
.door:hover .door__media img{transform:scale(1.04)}
.door__body{padding:clamp(28px,3.4vw,52px) clamp(24px,3vw,48px) clamp(32px,3.6vw,56px);display:grid;gap:18px;align-content:start}
.door__body .label{margin-bottom:6px}
.door__body .h3{max-width:16ch;min-height:2.24em}
.door__body p{color:var(--fg-soft);max-width:44ch}
.door__body .link{margin-top:10px;justify-self:start}
.door::after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:border-color .6s;pointer-events:none}
.door:hover::after{border-color:rgba(181,154,114,.45)}
@media (max-width:820px){.doors{grid-template-columns:1fr}}

/* ---------------------------------------------------------- Manifeste */
.manifesto{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:40px;align-items:start}
.manifesto__quote{grid-column:1/span 7;font-size:clamp(2rem,4.4vw,3.9rem);line-height:1.08;font-style:italic;font-weight:300}
.manifesto__quote::before{content:"«\00a0"}.manifesto__quote::after{content:"\00a0»"}
.manifesto__text{grid-column:9/span 4;padding-top:.6em}
.manifesto__text p+p{margin-top:1.1em}
.manifesto__text .link{margin-top:28px}
@media (max-width:900px){.manifesto__quote,.manifesto__text{grid-column:1/-1}.manifesto__text{padding-top:0}}

/* --------------------------------------------- Carrousel des prestations */
.svc-slider{position:relative}
.svc-slider__track{
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  margin-inline:calc(-1*var(--gutter));padding:2px var(--gutter) 4px;
}
.svc-slider__rail{display:flex;gap:clamp(12px,1.4vw,20px);width:max-content;will-change:transform}
.svc-slider__track::-webkit-scrollbar{display:none}
.svc-slider__track.is-dragging{cursor:grabbing}
.svc-slider__track.is-dragging *{pointer-events:none}

.svc-card{
  position:relative;flex:0 0 clamp(238px,25vw,336px);
  aspect-ratio:3/4;overflow:hidden;display:block;color:var(--ivoire);isolation:isolate;background:var(--noir-2);
}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out)}
.svc-card::after{
  content:"";position:absolute;inset:0;z-index:1;transition:opacity .6s var(--ease);
  background:linear-gradient(to top,rgba(20,20,21,.94) 4%,rgba(20,20,21,.7) 32%,rgba(20,20,21,.2) 66%,rgba(20,20,21,.34) 100%);
}
.svc-card:hover img,.svc-card:focus-visible img{transform:scale(1.06)}
.svc-card:hover::after{opacity:.88}
.svc-card__n{
  position:absolute;top:0;left:0;z-index:2;padding:clamp(18px,2vw,26px);
  font-family:var(--font-display);font-size:1.05rem;color:var(--or-2);letter-spacing:.06em;
}
.svc-card__in{
  position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:9px;
  padding:clamp(20px,2.2vw,30px);
}
.svc-card__t{
  font-family:var(--font-display);font-weight:300;font-size:clamp(1.45rem,1.9vw,1.85rem);line-height:1.1;
  transition:transform .6s var(--ease-out);
}
.svc-card:hover .svc-card__t{transform:translateY(-2px)}
.svc-card__d{
  font-size:.86rem;line-height:1.55;color:rgba(245,242,236,.74);max-width:32ch;
  opacity:0;max-height:0;transform:translateY(6px);overflow:hidden;
  transition:opacity .5s var(--ease),max-height .6s var(--ease-out),transform .6s var(--ease-out);
}
.svc-card:hover .svc-card__d,.svc-card:focus-visible .svc-card__d{opacity:1;max-height:6em;transform:none}
.svc-card__go{
  display:inline-flex;align-items:center;gap:10px;margin-top:2px;
  font-weight:500;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or-2);
}
.svc-card__go svg{width:14px;height:10px;transition:transform .5s var(--ease)}
.svc-card:hover .svc-card__go svg{transform:translateX(4px)}
/* Sans survol (tactile) la description reste visible : rien ne se découvre au doigt */
@media (hover:none){
  .svc-card__d{opacity:1;max-height:6em;transform:none}
}

/* ------------------------------------------------------------ Valeurs */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.value{
  position:relative;background:var(--bg);padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,36px);
  display:grid;gap:14px;align-content:start;min-height:230px;isolation:isolate;
  transition:background .5s var(--ease);
}
/* Filet qui se dessine sous la carte survolée */
.value::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);
}
.value .star{margin-bottom:6px;opacity:.75;transition:transform .55s var(--ease-out),opacity .5s var(--ease);transform-origin:left center}
.value h3{font-size:1.6rem;transition:transform .55s var(--ease-out)}
.value p{
  font-style:italic;font-family:var(--font-display);font-size:1.15rem;color:var(--fg-soft);line-height:1.35;
  transition:color .5s var(--ease),transform .55s var(--ease-out);
}
@media (hover:hover){
  .value:hover{background:color-mix(in srgb,var(--fg) 4%,var(--bg))}
  .value:hover::after{transform:scaleX(1)}
  .value:hover .star{transform:translateX(6px) scale(1.28);opacity:1}
  .value:hover h3,.value:hover p{transform:translateX(6px)}
  .value:hover p{color:var(--fg)}
}
.value:focus-within::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .value,.value::after,.value .star,.value h3,.value p{transition:none}
  .value:hover .star{transform:none}
  .value:hover h3,.value:hover p{transform:none}
}
@media (max-width:900px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.values{grid-template-columns:1fr}.value{min-height:0}}

/* ---------------------------------------------------- Bandeau références */
.marquee{
  --unit:clamp(.58px,.063vw,1.02px);
  position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  padding-block:clamp(20px,2.6vw,38px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-dragging{cursor:grabbing}
.marquee.is-dragging *{pointer-events:none}
.marquee__track{display:flex;align-items:center;width:max-content;gap:clamp(52px,6.4vw,112px);will-change:transform}
.marquee__item{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
/* Hauteur propre à chaque logo : présence optique égale malgré des formats très différents */
.marquee__item img{
  height:calc(var(--h,52) * var(--unit));width:auto;max-width:none;opacity:.64;
  transition:opacity .55s var(--ease),filter .55s var(--ease),transform .55s var(--ease-out);
}
.marquee__item:hover img{opacity:1;filter:brightness(1.35) contrast(1.02)}
.marquee__item--word{font-family:var(--font-display);font-size:calc(var(--h,52) * var(--unit) * .42);letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,236,.6);white-space:nowrap;transition:color .6s var(--ease)}
.marquee__item--word:hover{color:var(--ivoire)}
@media (prefers-reduced-motion:reduce){
  .marquee{overflow:hidden;-webkit-mask-image:none;mask-image:none}
  .marquee__track{flex-wrap:wrap;width:auto;justify-content:center;row-gap:28px}
}

/* ------------------------------------------------------------ Preuve */
.refs{display:flex;flex-wrap:wrap;gap:18px clamp(28px,4vw,64px);align-items:baseline;justify-content:space-between}
.refs li{font-family:var(--font-display);font-size:clamp(1.15rem,1.7vw,1.55rem);font-weight:400;letter-spacing:.02em;color:var(--fg-soft);white-space:nowrap}
.refs li strong{font-weight:500;color:var(--fg)}
.testimonial{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:28px}
.testimonial__q{grid-column:2/span 9;font-family:var(--font-display);font-size:clamp(1.7rem,3.3vw,2.9rem);line-height:1.18;font-weight:300;font-style:italic}
.testimonial__q::before{content:"«\00a0"}.testimonial__q::after{content:"\00a0»"}
.testimonial__by{grid-column:2/span 9;display:flex;gap:18px;align-items:center;color:var(--fg-soft);font-size:.82rem}
.testimonial__by::before{content:"";width:40px;height:1px;background:var(--or)}
.testimonial__by strong{font-weight:500;color:var(--fg)}
@media (max-width:900px){.testimonial__q,.testimonial__by{grid-column:1/-1}}
/* Avis Google : rail glissable */
.reviews{position:relative}
.reviews__track{
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:2px 0 6px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);cursor:grab;
}
.reviews__rail{display:flex;gap:clamp(14px,1.8vw,26px);width:max-content;will-change:transform}
.reviews__track::-webkit-scrollbar{display:none}
.reviews__track.is-dragging{cursor:grabbing}
.reviews__track.is-dragging *{pointer-events:none}
.review{
  flex:0 0 clamp(276px,30vw,404px);display:flex;flex-direction:column;gap:18px;
  padding:clamp(26px,2.6vw,36px);border:1px solid var(--line);background:var(--bg);
}
.review blockquote{margin:0;display:grid;gap:16px}
.review__stars{display:flex;gap:7px;color:var(--accent)}
.review__stars i{width:13px;height:13px;background:currentColor;-webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat}
.review p{font-family:var(--font-display);font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.42;color:var(--fg);font-weight:300}
.review p::before{content:"«\00a0"}.review p::after{content:"\00a0»"}
.review footer{display:grid;gap:3px;margin-top:auto;padding-top:6px;border-top:1px solid var(--line)}
.review cite{font-style:normal;font-size:.85rem;font-weight:500;color:var(--fg)}
.review small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.rail-nav{display:flex;gap:10px;align-items:center;margin-top:clamp(24px,3vw,36px)}
.rail-nav button{
  width:46px;height:46px;border:1px solid var(--line-strong);border-radius:999px;display:grid;place-items:center;
  color:var(--fg);transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),opacity .3s;
}
.rail-nav button:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.rail-nav button:disabled{opacity:.28;cursor:default}
.rail-nav svg{width:15px;height:11px}
.rail-nav__hint{margin-left:8px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute)}
@media (hover:none){.rail-nav button{display:none}.rail-nav__hint{margin-left:0}}

.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.quote{display:grid;gap:18px;align-content:start;padding-top:26px;border-top:1px solid var(--line)}
.quote p{font-family:var(--font-display);font-size:1.35rem;line-height:1.3;font-style:italic}
.quote cite{font-style:normal;font-size:.78rem;color:var(--fg-soft)}
.quote cite strong{font-weight:500;color:var(--fg)}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}

/* --------------------------------------------------------- Territoire */
.territory{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:36px;align-items:end}
.territory__list{grid-column:1/span 7}
.territory__list li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px;padding:16px 0;border-top:1px solid var(--line);font-family:var(--font-display);font-size:clamp(1.7rem,3.2vw,2.9rem);font-weight:300;line-height:1.1}
.territory__list li:last-child{border-bottom:1px solid var(--line)}
.territory__list li small{font-family:var(--font-body);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);min-width:0}
.territory__aside{grid-column:9/span 4}
.territory__aside p+p{margin-top:1em}
@media (max-width:900px){.territory__list,.territory__aside{grid-column:1/-1}}

/* ------------------------------------------------------------- Feature rows */
.feature{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:32px;align-items:center}
.feature+.feature{margin-top:clamp(64px,9vw,128px)}
.feature__media{grid-column:1/span 6}
.feature__body{grid-column:8/span 5;display:grid;gap:20px;align-content:center}
.feature--flip .feature__media{grid-column:7/span 6;order:2}
.feature--flip .feature__body{grid-column:1/span 5;order:1}
.feature__body .h3{max-width:18ch}
.feature__body p{color:var(--fg-soft);max-width:46ch}
.feature__list{display:grid;gap:12px;margin-top:6px}
.feature__list li{display:grid;grid-template-columns:14px 1fr;gap:14px;align-items:baseline;color:var(--fg-soft);font-size:.92rem}
.feature__list li .star{width:.55em;height:.55em;transform:translateY(-1px)}
.feature__meta{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline;margin-top:8px;padding-top:16px;border-top:1px solid var(--line);color:var(--fg-mute);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.9}
.feature__meta span:first-child{color:var(--accent)}
@media (max-width:520px){.feature__meta{grid-template-columns:1fr;gap:2px}}
@media (max-width:900px){
  .feature__media,.feature__body,.feature--flip .feature__media,.feature--flip .feature__body{grid-column:1/-1;order:0}
}

/* ------------------------------------------------------------- Cards grid */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.card{display:grid;gap:16px;align-content:start;color:var(--fg)}
.card .media{aspect-ratio:4/5}
.card h3{font-size:1.55rem}
.card p{color:var(--fg-soft);font-size:.9rem;max-width:34ch}
.card .label{font-size:.6rem}
@media (max-width:1000px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}

/* ------------------------------------------------------ Cas (réalisations) */
.cas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:clamp(24px,3vw,40px);align-items:start}
.cas+.cas{margin-top:clamp(64px,9vw,120px);padding-top:clamp(56px,7vw,96px);border-top:1px solid var(--line)}
.cas__body{grid-column:1/span 4;display:grid;gap:16px;position:sticky;top:118px}
.cas__body p{color:var(--fg-soft);max-width:42ch;font-size:.95rem}
.cas__media{grid-column:6/span 7}
@media (max-width:1000px){.cas__body,.cas__media{grid-column:1/-1}.cas__body{position:static}}

/* --------------------------------------------------------- Avant / après */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px)}
.ba figure{margin:0;display:grid;gap:14px}
.ba .media{aspect-ratio:3/2}
.ba figcaption{display:flex;align-items:baseline;gap:12px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute)}
.ba figcaption b{font-weight:500;color:var(--accent);letter-spacing:.2em}
.ba--pair figcaption{display:none}
@media (max-width:720px){.ba{grid-template-columns:1fr}}

/* -------------------------------------------------------------- Steps */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.step{background:var(--bg);padding:clamp(28px,3vw,44px) clamp(22px,2.4vw,36px);display:grid;gap:16px;align-content:start;counter-increment:step;position:relative}
.step::before{content:"0" counter(step);font-family:var(--font-display);font-size:1rem;color:var(--accent);letter-spacing:.05em}
.step h3{font-size:1.65rem}
.step p{color:var(--fg-soft);font-size:.92rem}
.step ul{display:grid;gap:8px;margin-top:4px}
.step ul li{display:grid;grid-template-columns:12px 1fr;gap:12px;align-items:baseline;color:var(--fg-soft);font-size:.9rem}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 28px;gap:24px;align-items:center;padding:24px 0;font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.75rem);font-weight:300;line-height:1.2}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:28px;height:28px;display:block}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1px;background:var(--accent);transform:translate(-50%,-50%);transition:transform .5s var(--ease-out)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq .faq__a{padding:0 0 26px;color:var(--fg-soft);max-width:60ch}

/* ------------------------------------------------------------- Stats/Facts */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.fact{background:var(--bg);padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,36px);display:grid;gap:10px}
.fact strong{font-family:var(--font-display);font-weight:300;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--fg)}
.fact span{color:var(--fg-soft);font-size:.85rem;max-width:26ch}
@media (max-width:820px){.facts{grid-template-columns:1fr}}

/* -------------------------------------------------------------- Story */
.story{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:0}
.story__year,.story__body{padding-block:clamp(32px,4vw,52px);border-top:1px solid var(--line)}
.story>:nth-child(1),.story>:nth-child(2){border-top:0;padding-top:0}
.story__year{grid-column:1/span 3;font-family:var(--font-display);font-size:clamp(2.4rem,4.2vw,3.8rem);line-height:1;color:var(--accent);font-weight:300;padding-top:.18em;overflow-wrap:break-word}
.story__year--word{font-size:clamp(1.8rem,2.8vw,2.6rem)}
.story__body{grid-column:5/span 7}
.story__body h3{margin-bottom:14px}
.story__body p{color:var(--fg-soft)}
.story__body p+p{margin-top:1em}
@media (max-width:900px){.story__year,.story__body{grid-column:1/-1}.story__year{padding-bottom:0;border-bottom:0}.story__body{border-top:0;padding-top:14px}}
.portrait{grid-column:1/span 5;aspect-ratio:4/5;background:var(--noir-2);position:relative;overflow:hidden;margin:0}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,30px);
  background:linear-gradient(to top,rgba(20,20,21,.9),rgba(20,20,21,0));
  color:var(--ivoire);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;line-height:2.2}
.portrait figcaption b{display:block;font-family:var(--font-display);font-size:1.55rem;font-weight:400;letter-spacing:.02em;text-transform:none;line-height:1.1;margin-bottom:2px}
.surface-light .portrait{background:var(--ivoire-2)}

.pullquote{border-left-color:var(--accent);font-family:var(--font-display);font-size:clamp(1.3rem,1.9vw,1.6rem);font-style:italic;line-height:1.35;color:var(--fg);max-width:34ch;padding-left:22px;border-left:1px solid var(--or)}

/* Valeurs — liste éditoriale (page À propos) */
.values-list{display:grid;gap:0}
.values-list div{display:grid;grid-template-columns:minmax(110px,2fr) 5fr;gap:clamp(14px,2vw,28px);align-items:baseline;padding-block:18px;border-top:1px solid var(--line)}
.values-list p{font-family:var(--font-display);font-size:clamp(1.05rem,1.5vw,1.25rem);font-style:italic;color:var(--fg-soft);line-height:1.35}
@media (max-width:560px){.values-list div{grid-template-columns:1fr;gap:4px}}

/* Colonnes utilitaires (remplacent les styles inline) */
.col-7{grid-column:1/span 7;min-width:0}
.col-5-right{grid-column:9/span 4;min-width:0}
.col-6-right{grid-column:7/span 6;min-width:0}
.col-5{grid-column:1/span 5;min-width:0}
@media (max-width:1000px){.col-7,.col-5-right,.col-6-right,.col-5{grid-column:1/-1}}

/* ------------------------------------------------------------- Closing */
.closing{text-align:left;padding-bottom:calc(var(--section)*.62)}
.closing .display{max-width:14ch}
.closing__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:40px;align-items:end}
.closing__title{grid-column:1/span 8}
.closing__aside{grid-column:9/span 4;display:grid;gap:22px;color:var(--fg-soft)}
.closing__aside .tel{font-family:var(--font-display);font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--fg);letter-spacing:.02em}
.closing__aside .tel:hover{color:var(--or-2)}
@media (max-width:900px){.closing__title,.closing__aside{grid-column:1/-1}}

/* -------------------------------------------------------------- Forms */
.form{display:grid;gap:26px}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:grid;gap:10px}
.field label,.field legend{font-weight:500;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft);padding:0}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-strong);color:var(--fg);
  font-family:var(--font-body);font-weight:300;font-size:1rem;padding:12px 0;border-radius:0;outline:none;
  transition:border-color .4s;-webkit-appearance:none;appearance:none;
}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--or)}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-mute)}
.field--full{grid-column:1/-1}
.field .hint{font-size:.72rem;color:var(--fg-mute)}
.field .error{font-size:.72rem;color:#C97B6B;display:none}
.field.is-invalid .error{display:block}
.field.is-invalid input:not([type=checkbox]),.field.is-invalid textarea{border-bottom-color:#C97B6B}
fieldset{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.chip span{display:inline-block;padding:11px 18px;border-radius:999px;border:1px solid var(--line);font-size:.72rem;letter-spacing:.06em;transition:background .35s,color .35s,border-color .35s;color:var(--fg-soft)}
.chip input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip input:focus-visible+span{outline:1px solid var(--or);outline-offset:3px}
.chip:hover span{border-color:var(--line-strong)}
/* Case à cocher dessinée à la main : la règle .field input ci-dessus applique
   appearance:none à tous les champs, ce qui effaçait la case native et ne
   laissait qu'un filet. On redessine donc la case, et on la rend visible. */
.check{
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  font-size:.8rem;color:var(--fg-soft);line-height:1.6;cursor:pointer;
  padding:4px 0;
}
.field .check input{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;margin:0;padding:0;flex:0 0 auto;
  border:1px solid var(--line-strong);border-radius:5px;background:transparent;
  display:grid;place-content:center;cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease);
}
.field .check input::before{
  content:"";width:6px;height:11px;margin-top:-2px;
  border:solid var(--bg);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .18s var(--ease-out);
}
.field .check input:checked{background:var(--accent);border-color:var(--accent)}
.field .check input:checked::before{transform:rotate(45deg) scale(1)}
@media (hover:hover){.check:hover input:not(:checked){border-color:var(--accent)}}
.field .check input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.check span{padding-top:2px}
.check a{text-decoration:underline;text-underline-offset:3px}
/* En erreur, c'est la case qui se signale, pas un filet sous le texte */
.field.is-invalid .check input{border-color:#C97B6B;border-width:1.5px}
.form__foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;margin-top:8px}
.form__status{font-size:.82rem;color:var(--fg-soft);min-height:1.4em}
.form__status.is-error{color:#C97B6B}
.form.is-sending .btn{opacity:.6;pointer-events:none}
.form-success{display:grid;gap:22px;padding:clamp(28px,4vw,56px) 0}
@media (max-width:640px){.form__grid{grid-template-columns:1fr}}
.contact-aside{display:grid;gap:34px;align-content:start}
.contact-aside .h4{margin-bottom:8px}
.contact-aside .big{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,1.95rem);color:var(--fg);line-height:1.2}
.contact-aside .big:hover{color:var(--or-2)}
.contact-aside p{color:var(--fg-soft)}
.contact-aside dl{display:grid;gap:8px}
.contact-aside dt{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500}
.contact-aside dd{margin:0 0 10px}

/* ------------------------------------------------------------- Prose (légal) */
.prose{max-width:70ch;color:var(--fg-soft)}
.prose h2{font-size:clamp(1.7rem,2.6vw,2.2rem);color:var(--fg);margin:2.2em 0 .7em}
.prose h3{font-size:1.35rem;color:var(--fg);margin:1.8em 0 .5em}
.prose p{margin:0 0 1em}
.prose ul{list-style:none;margin:0 0 1.2em;display:grid;gap:8px}
.prose ul li{display:grid;grid-template-columns:12px 1fr;gap:12px;align-items:baseline}
.prose ul li::before{content:"";width:5px;height:5px;background:var(--accent);transform:rotate(45deg) translateY(-1px);justify-self:center}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
.table-wrap{overflow-x:auto;margin:0 0 1.4em;-webkit-overflow-scrolling:touch}
.prose table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:440px}
.prose th,.prose td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:500;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
.prose .updated{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.toc{display:flex;flex-wrap:wrap;gap:10px 24px;margin:32px 0 0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
.toc a{color:var(--fg-soft);border-bottom:1px solid var(--line);padding-bottom:4px}
.toc a:hover{color:var(--accent);border-color:var(--accent)}

/* -------------------------------------------------------------- Footer */
.footer{--accent:var(--or);background:var(--noir);color:var(--ivoire);padding:clamp(40px,5vw,68px) 0 34px;position:relative}
.footer__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);row-gap:44px}
.footer__brand{grid-column:1/span 4;display:grid;gap:22px;align-content:start}
.footer__brand img{width:160px}
.footer__brand p{color:var(--fg-soft);font-size:.85rem;max-width:30ch}
.footer__col{display:grid;gap:14px;align-content:start}
.footer__col:nth-child(2){grid-column:6/span 2}
.footer__col:nth-child(3){grid-column:8/span 2}
.footer__col:nth-child(4){grid-column:10/span 3}
.footer__col .footer__note{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.footer__h{font-family:var(--font-body);font-weight:500;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--or);margin-bottom:8px}
.footer__col a,.footer__col address{color:var(--fg-soft);font-size:.88rem;line-height:1.7}
.footer__col a:hover{color:var(--ivoire)}
.footer__bottom{margin-top:clamp(48px,6vw,80px);padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;color:var(--fg-mute);font-size:.72rem}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:10px 22px}
.footer__bottom a:hover{color:var(--ivoire)}
.footer__recruit{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--fg-soft);font-size:.85rem}
.footer__recruit strong{font-weight:500;color:var(--ivoire)}
@media (max-width:900px){
  .footer__brand{grid-column:1/-1}
  .footer__col:nth-child(2){grid-column:1/span 6}.footer__col:nth-child(3){grid-column:7/span 6}.footer__col:nth-child(4){grid-column:1/-1}
}

/* ------------------------------------------------------------ Consent */
.consent{position:fixed;left:var(--gutter);bottom:24px;z-index:150;width:min(420px,calc(100% - 2*var(--gutter)));background:var(--ivoire);color:var(--noir);padding:24px 26px;display:grid;gap:16px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);transform:translateY(20px);opacity:0;transition:transform .6s var(--ease-out),opacity .6s;visibility:hidden}
.consent.is-visible{transform:none;opacity:1;visibility:visible}
.consent p{font-size:.8rem;line-height:1.6;color:rgba(20,20,21,.72)}
.consent p a{text-decoration:underline;text-underline-offset:3px}
.consent__row{display:flex;flex-wrap:wrap;gap:10px}
.consent .label{color:var(--bois)}
.consent .btn{--btn-fg:var(--noir);--btn-line:rgba(20,20,21,.3);padding:13px 18px;font-size:.62rem}
.consent .btn--gold{border-color:var(--or)}

/* ------------------------------------------------- Pages 404 et merci */
.page-404 .hero{align-items:center;text-align:left}
.page-404 .hero__in{padding-bottom:0}

/* Numéro d'urgence : jamais coupé entre deux lignes */
.merci-tel{font-size:clamp(.72rem,1vw,.8rem);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute)}
.merci-tel a{
  display:block;width:max-content;max-width:100%;margin-top:14px;text-transform:none;
  font-size:clamp(1.35rem,3.1vw,2rem);font-weight:300;letter-spacing:.03em;line-height:1.1;
  color:var(--ivoire);white-space:nowrap;
  border-bottom:1px solid rgba(181,154,114,.55);padding-bottom:.14em;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.merci-tel a:hover{color:var(--or);border-bottom-color:var(--or)}

/* --------------------------------------------------------- Utilities */
.mt-1{margin-top:24px}.mt-2{margin-top:48px}.mt-3{margin-top:clamp(56px,8vw,96px)}
.center{text-align:center}
.eyebrow{display:flex;gap:26px;flex-wrap:wrap;color:var(--fg-mute);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.breadcrumb{display:flex;gap:14px;flex-wrap:wrap;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:28px}
.breadcrumb a:hover{color:var(--or)}
.breadcrumb li+li::before{content:"/";margin-right:14px;opacity:.5}

/* Marqueurs de relecture (uniquement en mode preview) */
[data-todo]{position:relative}
html[data-preview] [data-todo]{outline:1px dashed rgba(181,154,114,.7);outline-offset:6px}
html[data-preview] [data-todo]::after{content:"À valider · " attr(data-todo);position:absolute;left:0;top:-20px;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-body);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or);background:var(--noir);padding:2px 8px;white-space:nowrap;z-index:5;pointer-events:none;font-style:normal;font-weight:500}

/* ═══════════════════════════════════════════════ Grands écrans (V1.3)
   Au-delà d'environ 1440 px, toutes les bornes hautes des clamp étaient
   atteintes : la colonne restait figée à 1400 px, le titre à 102 px, les
   gouttières à 72 px. Sur un moniteur externe de 2560 px, 45 % de l'écran
   était vide, et 59 % sur un ultra-large de 3440 px. Le site ne paraissait
   pas cassé, il paraissait petit, ce qui est pire pour une marque premium.

   On rouvre donc une seconde progression au-dessus de 1500 px, elle-même
   bornée : la longueur de ligne des textes reste tenue par les max-width en
   ch, donc élargir la colonne n'abîme pas la lecture, mais on ne la laisse
   pas filer non plus. */
@media (min-width:1500px){
  :root{
    --max:1560px;
    --gutter:clamp(72px,5.2vw,116px);
    --section:clamp(160px,10vw,200px);
  }
  .display{font-size:clamp(6.4rem,5.6vw,7.6rem)}
  .h1{font-size:clamp(3.4rem,4vw,5rem)}
  .h2{font-size:clamp(2.5rem,3.1vw,3.9rem)}
}

@media (min-width:1900px){
  :root{--max:1680px}
  .lede{font-size:clamp(1.25rem,1.05vw,1.4rem)}
}

@media (min-width:2400px){
  :root{
    --max:1800px;
    --section:clamp(200px,8vw,240px);
  }
  .display{font-size:clamp(7.6rem,4.4vw,8.8rem)}
}

/* Le repère « Découvrir » était ancré au bord de la fenêtre pendant que tout
   le reste suivait la colonne de contenu. Sur un écran large il se retrouvait
   isolé à un mètre du texte. On le ramène dans l'axe du contenu. */
@media (min-width:1500px){
  .hero__scroll{right:max(var(--gutter),calc((100vw - var(--max)) / 2))}
}

/* Le hero occupe toute la hauteur de fenêtre. Sur un 4K en 2160 px de haut,
   cela donnait un hero de 2160 px où le texte flottait tout en bas. On borne
   la hauteur sans casser l'effet plein écran des moniteurs courants. */
@media (min-height:1500px) and (min-width:1200px){
  .hero{min-height:min(100svh,1320px)}
}