/* ==========================================================================
   CN SOLUTIONS — Maquette vierge
   Direction artistique : papier chaud, typographie légère très aérée,
   compositions asymétriques, révélations au scroll.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --paper:#E4E0DB;
  --paper-2:#DCD8D2;
  --ink:#211D1D;
  --ink-70:rgba(33,29,29,.70);
  --ink-45:rgba(33,29,29,.45);
  --ink-28:rgba(33,29,29,.28);
  --ink-14:rgba(33,29,29,.14);
  --line:rgba(33,29,29,.22);

  --sans:"Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --serif:"Cormorant Garamond","Didot","Times New Roman",serif;

  --gutter:clamp(20px,4.2vw,66px);
  --ease:cubic-bezier(.22,1,.36,1);
  --slow:1.2s;

  /* progression de la barre : 0 en haut de page, 1 une fois condensée */
  --nav:0;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  font-size:clamp(13px,1.042vw,19px);
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:1rem;
  line-height:1.48;
}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}

body.is-intro-active{overflow:hidden}

/* Intro de marque : le logo émerge d'un trait avant de dévoiler le site. */
.site-intro{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  background:var(--paper);
  overflow:hidden;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s var(--ease),visibility 0s linear 1.05s;
}
.site-intro::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.32),transparent 38%);
  opacity:0;transition:opacity 1.2s ease;
}
.site-intro__stage{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  width:min(72vw,330px);
}
.site-intro__line{
  position:absolute;left:50%;top:50%;
  width:1px;height:min(56vh,430px);
  background:var(--ink-28);
  transform:translate(-50%,-50%) scaleY(0);
  transform-origin:center;
  transition:transform 1.15s var(--ease),opacity .5s ease .8s;
}
.site-intro__logo-wrap{
  position:relative;width:clamp(126px,15vw,210px);
  overflow:hidden;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.25s var(--ease) .32s;
}
.site-intro__logo{
  display:block;width:100%;height:auto;
  transform:translateY(18%) scale(.94);
  opacity:0;
  transition:transform 1.35s var(--ease) .25s,opacity .7s ease .3s;
}
.site-intro__signature{
  margin-top:1.5rem;
  font-size:.65rem;font-weight:400;line-height:1;
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;
  color:var(--ink-45);
  opacity:0;transform:translateY(12px);
  transition:opacity .8s ease 1.05s,transform .9s var(--ease) 1.05s;
}
.site-intro.is-playing::before{opacity:1}
.site-intro.is-playing .site-intro__line{transform:translate(-50%,-50%) scaleY(1);opacity:0}
.site-intro.is-playing .site-intro__logo-wrap{clip-path:inset(0 0 0 0)}
.site-intro.is-playing .site-intro__logo{transform:none;opacity:1}
.site-intro.is-playing .site-intro__signature{opacity:1;transform:none}
.site-intro.is-leaving{
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
}
.site-intro.is-leaving .site-intro__stage{
  transform:translateY(-24px);opacity:0;
  transition:transform .7s var(--ease),opacity .45s ease;
}

/* Grain papier */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.38;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 3. TYPOGRAPHIE ---------- */
.h-display{
  font-size:clamp(38px,4rem,4rem);
  font-weight:200;
  line-height:.92;
  letter-spacing:.02em;
}
.eyebrow,.meta,.wide__cap,.hero__caption,
.header__links a,.btn,.teaser__more,
.footer a,.footer p,.footer h4,.menu__col a,.menu__col p,.menu__col h4{
  font-size:.8rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  line-height:1.35;
  font-weight:400;
}
.eyebrow{color:var(--ink-45)}
.eyebrow--center{text-align:center}

.copy p{
  font-size:.92rem;
  line-height:1.62;
  color:var(--ink-70);
  max-width:30ch;
  letter-spacing:.005em;
}
.copy p + p{margin-top:1.1em}

/* Bouton contour */
.btn{
  display:inline-block;
  margin-top:2.4em;
  padding:.95em 1.9em;
  border:1px solid var(--line);
  border-radius:1px;
  position:relative;
  overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease);
  z-index:0;
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.btn:hover{color:var(--paper);border-color:var(--ink)}
.btn:hover::after{transform:scaleY(1);transform-origin:top}

/* ---------- 4. PLACEHOLDERS IMAGE ---------- */
.media{position:relative;overflow:hidden;background:var(--paper-2)}
.ph{
  position:absolute;inset:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  will-change:transform;
}
.ph::after{
  content:"";position:absolute;inset:0;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;pointer-events:none;
}
.ph--1 {background-image:linear-gradient(155deg,rgba(157,150,138,.5),rgba(65,61,56,.5) 55%),url("assets/hero-architecture.jpg");background-position:80% center}
.ph--2 {background-image:linear-gradient(140deg,rgba(142,137,126,.3),rgba(89,85,78,.42)),url("assets/texture-sandstone.jpg")}
.ph--3 {background-image:linear-gradient(200deg,rgba(179,170,157,.28),rgba(122,114,102,.4)),url("assets/texture-parquet.jpg")}
.ph--4 {background-image:linear-gradient(165deg,rgba(167,156,140,.28),rgba(107,99,87,.4)),url("assets/slide-socle-stone.jpg")}
.ph--5 {background-image:linear-gradient(165deg,rgba(141,132,120,.28),rgba(81,76,69,.4)),url("assets/slide-trame-stairwell.jpg")}
.ph--6 {background-image:linear-gradient(165deg,rgba(184,174,159,.24),rgba(127,117,104,.36)),url("assets/slide-relief-concrete.jpg")}
.ph--7 {background-image:linear-gradient(165deg,rgba(125,118,108,.3),rgba(70,66,60,.46)),url("assets/slide-sommet-montagne.jpg")}
.ph--8 {background-image:linear-gradient(140deg,rgba(164,154,139,.28),rgba(98,92,82,.4)),url("assets/artisan-bois.jpg")}
.ph--9 {background-image:linear-gradient(210deg,rgba(138,132,121,.26),rgba(91,86,78,.38)),url("assets/texture-bois-clair.jpg")}
.ph--10{background-image:linear-gradient(120deg,rgba(156,148,136,.24),rgba(63,59,54,.34) 60%),url("assets/wide-skyline.jpg")}
.ph--11{background-image:linear-gradient(rgba(38,35,31,.58),rgba(38,35,31,.58)),url("assets/break-corinthe.jpg");background-position:center 35%}
.ph--12{background-image:linear-gradient(150deg,rgba(176,165,150,.26),rgba(119,110,97,.38)),url("assets/methode-escalier.jpg")}
.ph--13{background-image:linear-gradient(190deg,rgba(139,132,121,.24),rgba(81,77,70,.4)),url("assets/methode-astrolabe.jpg")}
.ph--14{background-image:linear-gradient(170deg,rgba(164,155,141,.28),rgba(100,93,83,.4)),url("assets/teaser-equipe.jpg")}
.ph--15{background-image:linear-gradient(170deg,rgba(143,135,121,.28),rgba(88,81,72,.4)),url("assets/teaser-atelier.jpg")}
.ph--16{background-image:linear-gradient(170deg,rgba(181,171,156,.26),rgba(124,115,101,.36)),url("assets/teaser-engagements.jpg")}

/* ---------- 5. HEADER ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:70;
  padding:clamp(18px,2.1vw,34px) var(--gutter);
  pointer-events:none;
}
/* le fond papier n'arrive qu'une fois la barre condensée : il garde le
   wordmark lisible quand une photo passe dessous */
.header::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--paper);
  border-bottom:1px solid var(--ink-14);
  opacity:var(--nav);
}
.header__in{
  display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
  pointer-events:none;
}
.header__in > *{pointer-events:auto}

.burger{width:2.6rem;padding:.4rem 0;display:block;position:relative;z-index:4}
.burger__icon{width:100%;height:auto;fill:var(--ink);display:block}
.burger__icon g{
  transform-box:view-box;transform-origin:center;
  transition:opacity .38s var(--ease),transform .62s var(--ease);
}
.burger__bars{opacity:1}
.burger__cross{opacity:0;transform:rotate(-14deg) scale(.82)}
.is-menu-open .burger__bars{opacity:0;transform:rotate(10deg) scale(1.1)}
.is-menu-open .burger__cross{opacity:1;transform:none;transition-delay:.1s}
/* les traits se resserrent avant de disparaître */
.burger__bars path{
  transform-box:view-box;transform-origin:center;
  transition:transform .5s var(--ease);
}
.is-menu-open .burger__bars path:nth-child(2){transform:translateY(11px)}
.is-menu-open .burger__bars path:nth-child(3){transform:translateY(-11px)}

.wordmark{
  position:absolute;left:50%;top:clamp(10px,1.2vw,20px);
  text-align:center;line-height:1;
  z-index:1;
  transform-origin:top center;
  transform:translate(-50%,calc(var(--nav) * .6rem)) scale(calc(1 - var(--nav) * .58));
}
.wordmark__logo{display:block;width:clamp(68px,5.4vw,96px);height:auto}

.header__links{display:flex;gap:1.6rem;padding-top:.55rem;position:relative;z-index:1}
.header__links a{position:relative;padding-bottom:.25em}
.header__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--ink);transform-origin:right;transition:transform .5s var(--ease);
}
.header__links a:hover::after{transform:scaleX(0);transform-origin:left}

/* ---------- 6. MENU : panneau latéral + voile ---------- */
.menu-bg{
  position:fixed;inset:0;z-index:2;
  pointer-events:auto;
  background:rgba(33,29,29,.7);
  opacity:0;visibility:hidden;cursor:pointer;
  transition:opacity .7s var(--ease),visibility 0s linear .7s;
}
.is-menu-open .menu-bg{
  opacity:1;visibility:visible;
  transition:opacity .7s var(--ease),visibility 0s;
}

.menu{
  position:fixed;z-index:3;
  pointer-events:auto;
  top:.7rem;left:.7rem;bottom:.7rem;
  width:clamp(288px,28vw,380px);
  background:var(--paper);
  padding:clamp(112px,10.5vw,180px) clamp(24px,2.6vw,40px) clamp(24px,2.6vw,40px);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(calc(-100% - 1.4rem));
  transition:transform .95s var(--ease);
  will-change:transform;
}
.is-menu-open .menu{transform:none}

/* rangée d'icônes, alignée sur le burger */
.menu__info{
  position:absolute;
  top:clamp(20px,2.35vw,38px);right:clamp(24px,2.6vw,40px);
  display:flex;gap:clamp(14px,1.5vw,24px);
  opacity:0;transition:opacity .5s var(--ease) .35s;
}
.is-menu-open .menu__info{opacity:1}
.menu__info svg{
  width:1.15rem;height:1.15rem;display:block;
  fill:none;stroke:var(--ink);stroke-width:1.2;
  stroke-linejoin:round;stroke-linecap:round;
  transition:opacity .35s var(--ease);
}
.menu__info a:hover svg{opacity:.45}

/* liens principaux */
.menu__nav{display:flex;flex-direction:column;align-items:flex-start}
.menu__nav a{
  position:relative;
  font-size:.8rem;font-weight:400;
  letter-spacing:.05em;text-transform:uppercase;
  line-height:1.5;padding:.3em 0;
  opacity:0;transform:translateY(-14px);
  transition:opacity .6s var(--ease),transform .7s var(--ease),color .3s var(--ease);
}
.is-menu-open .menu__nav a{
  opacity:1;transform:none;
  transition-delay:calc(.28s + var(--i) * .045s);
}
.menu__nav a::after{
  content:"";position:absolute;left:0;bottom:.25em;height:1px;width:100%;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.menu__nav a:hover::after{transform:scaleX(1)}

.menu__foot{margin-top:auto;padding-top:3rem}
.menu__lang{display:flex;flex-direction:column;gap:.3em;
  opacity:0;transition:opacity .6s var(--ease) .5s}
.is-menu-open .menu__lang{opacity:1}
.menu__lang a{
  font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-45);transition:color .3s var(--ease);
}
.menu__lang a.is-active,.menu__lang a:hover{color:var(--ink)}

/* les raccourcis d'en-tête cèdent la place au menu */
.header__links{
  transition:opacity .35s var(--ease),visibility .35s var(--ease);
}
.is-menu-open .header__links{opacity:0;visibility:hidden}

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  padding:clamp(150px,17vw,270px) var(--gutter) clamp(60px,8vw,120px);
  display:grid;
  grid-template-columns:minmax(0,3.2fr) auto minmax(0,7fr);
  align-items:center;
  column-gap:clamp(20px,3vw,48px);
}
.hero__title{
  font-family:var(--sans);
  font-weight:200;
  font-size:clamp(40px,4.4rem,4.4rem);
  line-height:.98;
  letter-spacing:.01em;
  color:var(--ink-28);
  align-self:center;
}
.hero__title span{display:block}
.hero__caption{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  align-self:center;
  color:var(--ink-70);
  display:flex;gap:1.4em;
  white-space:nowrap;
  font-size:.72rem;letter-spacing:.14em;
}
.hero__media{aspect-ratio:16/11;align-self:stretch;min-height:60svh;
  margin-right:calc(var(--gutter) * -1)}
.hero__content{min-width:0}
.hero__content .copy{margin-top:clamp(24px,3vw,44px)}
.hero__content .copy p{max-width:65ch}
.scroll-hint{
  position:absolute;left:var(--gutter);bottom:clamp(28px,4vw,58px);
  width:1px;height:clamp(48px,5vw,84px);background:var(--ink-28);overflow:hidden;
}
.scroll-hint span{
  position:absolute;inset:0;background:var(--ink);
  animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{
  0%{transform:translateY(-100%)}
  55%,100%{transform:translateY(100%)}
}

/* ---------- 8. IMGTEXT ---------- */
.imgtext{
  position:relative;
  padding:clamp(90px,13vw,220px) var(--gutter);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:min-content;
  column-gap:clamp(14px,1.6vw,26px);
}
.imgtext__a{
  grid-column:1 / 5;grid-row:1;
  aspect-ratio:9/7;
  margin-top:clamp(60px,10vw,190px);
  margin-left:calc(var(--gutter) * -1);
}
.imgtext__b{
  grid-column:9 / 13;grid-row:1;
  aspect-ratio:9/6;
  margin-bottom:clamp(80px,12vw,220px);
}
.imgtext__text{
  grid-column:5 / 10;grid-row:1;
  align-self:center;
  padding:clamp(40px,7vw,130px) 0;
}
.imgtext__text .copy{margin-top:clamp(26px,3vw,52px);padding-left:clamp(10px,2.2vw,40px)}
.imgtext--gallery{padding-top:0;padding-bottom:clamp(30px,5vw,80px)}
.imgtext--gallery .imgtext__a{grid-column:1 / 7}
.imgtext--gallery .imgtext__b{grid-column:8 / 13}

.imgtext--rev .imgtext__a{
  grid-column:9 / 13;margin-left:0;margin-bottom:0;
  margin-top:clamp(80px,12vw,200px);
}
.imgtext--rev .imgtext__b{
  grid-column:1 / 5;margin-top:0;
  margin-bottom:clamp(60px,10vw,190px);
  margin-left:calc(var(--gutter) * -1);
}
.imgtext--rev .imgtext__text{grid-column:5 / 10}

/* ---------- 9. QUOTE ---------- */
.quote{
  padding:clamp(90px,14vw,230px) var(--gutter);
  display:flex;justify-content:center;
}
.quote blockquote{margin:0;max-width:44rem}
.quote p{
  font-size:clamp(26px,2.4rem,2.4rem);
  font-weight:200;line-height:1.16;
  color:var(--ink-28);
  letter-spacing:.01em;
}
.quote cite{
  display:block;margin-top:1.8em;
  font-style:normal;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-70);
}

/* ---------- 10. SLIDER ---------- */
.slider{padding:clamp(50px,7vw,110px) var(--gutter) clamp(80px,10vw,150px)}
.slider__viewport{overflow:hidden}
.slider__track{display:flex;transition:transform 1s var(--ease)}
.slide{flex:0 0 100%;display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(14px,1.6vw,26px);align-items:start}
.slide__media{grid-column:1 / 6;aspect-ratio:3/4}
.slide__body{grid-column:7 / 12;padding-top:clamp(20px,4vw,70px)}
.slide__title{
  font-size:clamp(30px,2.68rem,2.68rem);
  font-weight:200;text-transform:uppercase;letter-spacing:.04em;line-height:1;
  margin-bottom:1.1em;
}
.meta{color:var(--ink-70);text-transform:none;letter-spacing:.06em;font-size:.78rem;margin-bottom:.3em}
.meta i{display:inline-block;width:1.6em;height:1px;background:var(--line);vertical-align:middle;margin:0 .7em}

.slider__nav{
  display:flex;align-items:center;justify-content:flex-end;gap:1.5rem;
  padding:clamp(26px,3vw,48px) 0 0;
}
.slider__count{font-size:.72rem;letter-spacing:.16em;color:var(--ink-45);margin-right:auto;padding-left:.2rem}
.slider__count b{font-weight:400;color:var(--ink)}
.arrow{width:2.6rem;display:block;padding:.5rem 0}
.arrow svg{width:100%;height:auto;fill:none;stroke:var(--ink);stroke-width:1;display:block;
  transition:transform .5s var(--ease),opacity .3s}
.arrow:hover svg{transform:translateX(4px)}
#prev:hover svg{transform:translateX(-4px)}
.arrow[disabled]{cursor:default}
.arrow[disabled] svg{opacity:.25}

/* ---------- 11. IMAGE LARGE ---------- */
.wide{padding:clamp(40px,6vw,90px) var(--gutter)}
.wide .media{aspect-ratio:2/1}
.wide__cap{margin-top:1.4em;color:var(--ink-45);text-align:right}

/* ---------- 11B. PROJETS / ÉTUDES DE CAS ---------- */
.projects{
  padding:clamp(90px,12vw,190px) var(--gutter) clamp(110px,14vw,220px);
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(14px,1.6vw,26px);row-gap:clamp(48px,7vw,110px);
}
.projects__heading{grid-column:1 / 7}
.projects__heading .eyebrow{margin-bottom:clamp(26px,3vw,46px)}
.projects__heading .h-display{font-size:clamp(44px,5.2rem,5.2rem)}
.projects__intro{grid-column:9 / 13;align-self:end;padding-bottom:.45rem}
.projects__client{
  margin-bottom:1.1rem;font-size:.72rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.projects__intro > p:not(.projects__client){max-width:32ch;font-size:.9rem;line-height:1.65;color:var(--ink-70)}
.projects__intro ul{
  display:flex;flex-wrap:wrap;gap:.55rem 1.15rem;
  list-style:none;margin:1.8rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--line);
}
.projects__intro li{
  font-size:.62rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);
}
.project-showcase{grid-column:1 / 13;min-width:0}
.project-showcase__bar{
  min-height:clamp(42px,4vw,60px);padding:0 clamp(14px,1.5vw,24px);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border:1px solid var(--line);border-bottom:0;
  color:var(--ink-45);font-size:.6rem;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;
}
.project-showcase__bar > :last-child{justify-self:end}
.project-showcase__dots{display:flex;gap:6px}
.project-showcase__dots i{display:block;width:5px;height:5px;border:1px solid var(--ink-45);border-radius:50%}
.project-showcase__viewport{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#0e0d0d;border:1px solid var(--line);
}
.project-showcase__viewport::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.project-showcase iframe{display:block;width:100%;height:100%;border:0;background:var(--paper)}
.project-showcase__foot{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding-top:1.25rem;
}
.project-showcase__foot p{
  color:var(--ink-45);font-size:.62rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;
}
.project-showcase__actions{display:flex;align-items:center;gap:clamp(20px,2.5vw,42px)}
.project-showcase__foot a{
  display:flex;align-items:center;gap:1.2rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--line);
  font-size:.68rem;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  transition:border-color .35s var(--ease);
}
.project-showcase__foot a:hover{border-color:var(--ink)}
.project-showcase__foot svg{width:2.8rem;fill:none;stroke:currentColor;stroke-width:1;transition:transform .45s var(--ease)}
.project-showcase__foot a:hover svg{transform:translateX(5px)}

/* ---------- 12. BREAK ---------- */
.break{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:space-around;
  padding:clamp(90px,14vw,200px) var(--gutter);
  overflow:hidden;
  text-align:center;
}
.break__bg{position:absolute;inset:-12% 0;height:auto}
.break__in{position:relative;display:flex;flex-direction:column;gap:clamp(60px,12vw,180px);align-items:center}
.break__in p{
  font-size:clamp(24px,2.9rem,2.9rem);
  font-weight:200;line-height:1.12;letter-spacing:.06em;
  color:rgba(255,255,255,.82);
  text-transform:uppercase;
}

/* ---------- 13. TEASERS ---------- */
.teasers{padding:clamp(90px,13vw,200px) var(--gutter)}
.teasers .eyebrow{margin-bottom:clamp(30px,4vw,64px)}
.teasers__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,44px)}
.teaser .media{aspect-ratio:4/5;margin-bottom:1.6em}
.teaser .media .ph{transition:transform 1.2s var(--ease)}
.teaser:hover .media .ph{transform:scale(1.05)}
.teaser h4{
  font-family:var(--sans);font-weight:200;
  font-size:clamp(22px,1.7rem,1.7rem);line-height:1.1;margin-bottom:.5em;
}
.teaser p{font-size:.85rem;color:var(--ink-70);max-width:26ch;line-height:1.55}
.teaser__more{
  display:inline-block;margin-top:1.6em;color:var(--ink-45);
  border-bottom:1px solid var(--ink-14);padding-bottom:.3em;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.teaser:hover .teaser__more{color:var(--ink);border-color:var(--ink)}

/* ---------- 14. MARQUEE ---------- */
.marquee-wrap{padding:clamp(50px,7vw,110px) 0 clamp(80px,10vw,150px)}
.marquee-wrap .eyebrow{margin-bottom:clamp(28px,3.5vw,56px)}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;gap:clamp(40px,6vw,110px);width:max-content;animation:slide 34s linear infinite}
.marquee__track span{
  font-family:var(--serif);
  font-size:clamp(24px,2.2rem,2.2rem);
  letter-spacing:.14em;color:var(--ink-45);white-space:nowrap;
}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 15. CONTACT ---------- */
.contact{
  padding:clamp(90px,12vw,190px) var(--gutter);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:clamp(14px,1.6vw,26px);row-gap:clamp(50px,7vw,110px);
}
.contact__heading{grid-column:1 / 7}
.contact__heading .eyebrow{margin-bottom:clamp(26px,3vw,46px)}
.contact__heading .h-display{font-size:clamp(44px,5.2rem,5.2rem)}
.contact__intro{grid-column:9 / 13;align-self:end;padding-bottom:.45rem}
.contact__intro p{max-width:31ch;font-size:.9rem;line-height:1.65;color:var(--ink-70)}
.contact__intro a{
  display:inline-block;margin-top:1.8rem;
  font-size:.72rem;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:.35em;
  transition:border-color .35s var(--ease);
}
.contact__intro a:hover{border-color:var(--ink)}

.contact-form{
  grid-column:3 / 13;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,5vw,86px);row-gap:clamp(30px,4vw,58px);
}
.contact-form__field{position:relative;border-bottom:1px solid var(--line)}
.contact-form__field--wide{grid-column:1 / -1}
.contact-form__field label{
  display:flex;gap:1.2rem;
  font-size:.68rem;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-70);
}
.contact-form__field label span{color:var(--ink-28)}
.contact-form input,.contact-form select,.contact-form textarea{
  display:block;width:100%;margin:0;padding:1rem 0 1.15rem;
  border:0;border-radius:0;outline:0;background:transparent;color:var(--ink);
  font:300 1.05rem/1.45 var(--sans);
}
.contact-form textarea{resize:vertical;min-height:9rem}
.contact-form select{
  appearance:none;cursor:pointer;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 5px) 48%,100% 48%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.contact-form__field::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.contact-form__field:focus-within::after{transform:scaleX(1)}
.contact-form__foot{
  grid-column:1 / -1;
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
}
.contact-form__consent{
  display:flex;align-items:flex-start;gap:.8rem;max-width:38rem;
  color:var(--ink-45);font-size:.7rem;line-height:1.55;cursor:pointer;
}
.contact-form__consent input{
  appearance:none;flex:0 0 14px;width:14px;height:14px;margin:.13rem 0 0;padding:0;
  border:1px solid var(--ink-45);position:relative;cursor:pointer;
}
.contact-form__consent input:checked{background:var(--ink);box-shadow:inset 0 0 0 3px var(--paper)}
.contact-form__consent input:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.contact-form__submit{
  flex:0 0 auto;display:flex;align-items:center;gap:1.5rem;
  padding:1rem 0 .7rem;border-bottom:1px solid var(--ink);
  font-size:.72rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
}
.contact-form__submit svg{width:3rem;fill:none;stroke:currentColor;stroke-width:1;transition:transform .45s var(--ease)}
.contact-form__submit:hover svg{transform:translateX(6px)}
.contact-form__status{
  grid-column:1 / -1;min-height:1.4em;margin-top:-1rem;
  font-size:.7rem;letter-spacing:.06em;color:var(--ink-45);
}

/* ---------- 16. FOOTER ---------- */
.footer{
  padding:clamp(20px,2.3vw,36px) var(--gutter) clamp(10px,1vw,16px);
  border-top:1px solid var(--line);
}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.footer__col h4{color:var(--ink-45);font-weight:400;margin-bottom:.4em}
.footer__col a{display:block;margin-bottom:.45em;transition:color .35s}
.footer__col a:hover{color:var(--ink-45)}
.footer__col--r{text-align:right}
.footer__col p{color:var(--ink-70)}

.footer__mid{
  margin-top:0;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.65rem;
}
.footer__nav{display:flex;flex-direction:column;align-items: flex-end}
.footer__nav a{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.45em;color:var(--ink-70)}
.footer__nav a:hover{color:var(--ink)}
.footer__mark{text-align:center;line-height:1;opacity:.9}
.footer__logo{display:block;width:clamp(44px,4vw,66px);height:auto;margin:auto}
.footer__lang{display:flex;flex-direction:column;align-items:flex-end}
.footer__lang:empty{display:none}
.footer__lang a{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-45);margin-bottom:.35em}
.footer__lang a.is-active,.footer__lang a:hover{color:var(--ink)}
.footer__legal{
  margin-top:clamp(13px,1.6vw,26px);text-align:center;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-28);
}

/* ---------- 17. RÉVÉLATIONS ---------- */
/* Le clip-path est posé sur .ph (l'enfant), pas sur .media : s'il était sur .media,
   l'élément observé par l'IntersectionObserver aurait une aire visible nulle et ne
   serait donc jamais détecté comme "intersecting" — l'image resterait masquée pour
   toujours (bug constaté : .is-in n'était jamais ajouté). */
.media .ph{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.media.is-in .ph{clip-path:inset(0 0 0 0)}

[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

[data-reveal-lines] span{display:block;overflow:hidden}
[data-reveal-lines] span i{
  display:block;font-style:normal;
  transform:translateY(105%);
  transition:transform 1.1s var(--ease);
}
[data-reveal-lines].is-in span i{transform:none}
[data-reveal-lines].is-in span:nth-child(2) i{transition-delay:.08s}
[data-reveal-lines].is-in span:nth-child(3) i{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .media .ph{clip-path:none}
  [data-reveal]{opacity:1;transform:none}
  [data-reveal-lines] span i{transform:none}
  .site-intro{display:none}
  body.is-intro-active{overflow:auto}
}

/* ---------- 18. RESPONSIVE ---------- */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;row-gap:clamp(28px,5vw,50px);min-height:auto}
  .hero__caption{writing-mode:horizontal-tb;transform:none;flex-direction:column;gap:.2em}
  .hero__media{min-height:auto;aspect-ratio:4/3}
  .scroll-hint{display:none}

  .imgtext{display:block;padding-top:clamp(70px,11vw,140px)}
  .imgtext__a,.imgtext--rev .imgtext__a{width:70%;margin:0 0 clamp(16px,3vw,34px)}
  .imgtext__b,.imgtext--rev .imgtext__b{width:70%;margin:0 0 clamp(30px,5vw,60px) auto}
  .imgtext__text{padding:0}
  .copy p{max-width:46ch}

  .slide{display:block}
  .slide__media{aspect-ratio:4/3;margin-bottom:2rem}
  .slider__nav{justify-content:space-between}

  .projects__heading{grid-column:1 / 8}
  .projects__intro{grid-column:8 / 13}

  .teasers__grid{grid-template-columns:1fr 1fr}
  .contact__heading{grid-column:1 / 8}
  .contact__intro{grid-column:8 / 13}
  .contact-form{grid-column:1 / 13}
  .footer__cols{grid-template-columns:1fr 1fr;gap:2.5rem}
  .footer__col--r{text-align:left}
  .footer__mid{grid-template-columns:1fr;justify-items:start;gap:.8rem}
  .footer__nav{align-items:flex-start}
  .footer__mark{text-align:left}
  .footer__lang{align-items:flex-start}
}

@media (max-width:640px){
  :root{--gutter:20px}
  /* l'en-tête mobile est déjà compact : pas de réduction, seul le fond apparaît */
  .wordmark{position:static;transform:none;text-align:left}
  .header__in{align-items:center}
  .wordmark__logo{width:46px}
  .header__links{gap:1rem;padding-top:0}
  .header__links a{font-size:10px}
  .burger{width:30px}
  .hero{padding-top:130px}
  .projects{display:block}
  .projects__intro{margin:2.5rem 0 3.5rem}
  .project-showcase__bar{grid-template-columns:1fr auto}
  .project-showcase__bar > :nth-child(2){display:none}
  .project-showcase__viewport{aspect-ratio:4/3}
  .project-showcase__foot{align-items:flex-start;flex-direction:column;gap:1.2rem}
  .project-showcase__actions{width:100%;align-items:flex-start;flex-direction:column;gap:1.2rem}
  .imgtext__a,.imgtext__b,
  .imgtext--rev .imgtext__a,.imgtext--rev .imgtext__b{width:88%}
  .teasers__grid{grid-template-columns:1fr}
  .contact{display:block}
  .contact__intro{margin:2.5rem 0 4.5rem}
  .contact-form{display:block}
  .contact-form__field{margin-bottom:2.2rem}
  .contact-form__foot{display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
  .contact-form__submit{align-self:stretch;justify-content:space-between}
  .contact-form__status{margin-top:1.5rem}
  .footer__cols{grid-template-columns:1fr}
  .wide .media{aspect-ratio:4/3}
  .menu{width:auto;right:.7rem;padding-top:96px}
}

/* ---------- 19. PAGE 404 ---------- */
.error-page{min-height:100svh;overflow-x:hidden}
.error-header{
  position:relative;z-index:2;
  min-height:clamp(92px,10vw,150px);
  padding:clamp(18px,2.1vw,34px) var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;
}
.error-header__logo{justify-self:start}
.error-header__logo img{display:block;width:clamp(56px,4.7vw,84px);height:auto}
.error-header > p{
  padding-top:.4rem;
  font-size:.68rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);
}
.error-header__back{
  justify-self:end;display:flex;align-items:center;gap:1rem;padding-top:.4rem;
  font-size:.68rem;font-weight:400;letter-spacing:.11em;text-transform:uppercase;
}
.error-header__back svg{width:2.7rem;fill:none;stroke:currentColor;stroke-width:1;transition:transform .45s var(--ease)}
.error-header__back:hover svg{transform:translateX(-5px)}

.error-main{
  position:relative;isolation:isolate;min-height:calc(100svh - clamp(145px,16vw,235px));
  padding:clamp(55px,7vw,110px) var(--gutter) clamp(70px,8vw,120px);
  display:grid;grid-template-columns:repeat(12,1fr);align-items:center;
  column-gap:clamp(14px,1.6vw,26px);overflow:hidden;
}
.error-main__code{
  position:absolute;left:-.035em;top:50%;z-index:-1;
  transform:translateY(-53%);
  font:200 clamp(230px,41vw,660px)/.72 var(--sans);
  letter-spacing:-.095em;color:var(--ink);opacity:.035;
  user-select:none;white-space:nowrap;
  animation:error-code-in 1.6s var(--ease) both;
}
.error-main__copy{grid-column:2 / 7;position:relative;z-index:1;padding-top:clamp(20px,3vw,48px)}
.error-main__copy .eyebrow{margin-bottom:clamp(24px,3vw,46px)}
.error-main__copy h1{
  font-size:clamp(44px,5.1rem,5.1rem);font-weight:200;
  line-height:.91;letter-spacing:.01em;
}
.error-main__copy h1 span{display:block;color:var(--ink-28)}
.error-main__text{
  max-width:34ch;margin:clamp(28px,3.5vw,58px) 0 0 clamp(12px,2vw,38px);
  font-size:.9rem;line-height:1.65;color:var(--ink-70);
}
.error-main__actions{
  display:flex;align-items:baseline;gap:clamp(24px,3vw,48px);
  margin-left:clamp(12px,2vw,38px);
}
.error-main__contact{
  padding-bottom:.3em;border-bottom:1px solid var(--line);
  font-size:.72rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .35s var(--ease);
}
.error-main__contact:hover{border-color:var(--ink)}
.error-main__media{
  grid-column:8 / 13;position:relative;align-self:stretch;min-height:54svh;
  margin-right:calc(var(--gutter) * -1);overflow:hidden;
  clip-path:inset(0 0 100% 0);
  animation:error-media-in 1.4s var(--ease) .18s forwards;
}
.error-main__media > div{
  position:absolute;inset:-5%;
  background-image:linear-gradient(155deg,rgba(157,150,138,.5),rgba(65,61,56,.55) 55%),url("assets/hero-architecture.jpg");
  background-size:cover;background-position:80% center;
  animation:error-image-in 1.8s var(--ease) .18s both;
}
.error-main__media > div::after{
  content:"";position:absolute;inset:0;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.error-main__media figcaption{
  position:absolute;right:1.2rem;bottom:1rem;
  color:rgba(255,255,255,.68);writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.58rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
}
.error-main__copy > *{
  opacity:0;transform:translateY(24px);
  animation:error-copy-in 1s var(--ease) forwards;
}
.error-main__copy > :nth-child(2){animation-delay:.08s}
.error-main__copy > :nth-child(3){animation-delay:.16s}
.error-main__copy > :nth-child(4){animation-delay:.24s}
.error-footer{
  min-height:clamp(53px,6vw,85px);padding:0 var(--gutter) clamp(20px,2vw,32px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  color:var(--ink-28);font-size:.62rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
}
@keyframes error-code-in{from{opacity:0;transform:translateY(-50%) scale(.96)}to{opacity:.035;transform:translateY(-53%) scale(1)}}
@keyframes error-copy-in{to{opacity:1;transform:none}}
@keyframes error-media-in{to{clip-path:inset(0 0 0 0)}}
@keyframes error-image-in{from{transform:scale(1.12)}to{transform:scale(1)}}

@media (max-width:800px){
  .error-header{grid-template-columns:1fr auto}
  .error-header > p{display:none}
  .error-main{display:block;padding-top:clamp(35px,8vw,70px)}
  .error-main__copy{padding:0 0 clamp(55px,12vw,90px)}
  .error-main__text,.error-main__actions{margin-left:0}
  .error-main__media{min-height:45svh;margin-left:18%;margin-right:calc(var(--gutter) * -1)}
  .error-main__code{top:26%;font-size:70vw}
}
/* Piege anti-spam (champ honeypot, invisible pour un humain) */
.hp-field{
  position:absolute;left:-9999px;top:auto;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- PAGES LEGALES (mentions / confidentialite) ---------- */
.legal-main{
  max-width:860px;
  margin:0 auto;
  padding:clamp(55px,7vw,110px) var(--gutter) clamp(90px,10vw,160px);
}
.legal-main .eyebrow{margin-bottom:clamp(20px,2.4vw,34px)}
.legal-main h1{
  font-size:clamp(34px,4.2rem,4.2rem);
  font-weight:200;
  line-height:.98;
  letter-spacing:.01em;
  margin-bottom:clamp(28px,3.5vw,52px);
}
.legal-main__updated{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-45);margin-bottom:clamp(40px,5vw,72px);
}
.legal-main section{margin-bottom:clamp(36px,4.4vw,64px)}
.legal-main h2{
  font-family:var(--serif);
  font-size:clamp(20px,1.6rem,1.6rem);
  font-weight:400;
  font-style:italic;
  margin-bottom:.9em;
  color:var(--ink);
}
.legal-main p{
  font-size:.92rem;line-height:1.68;color:var(--ink-70);
  max-width:68ch;
}
.legal-main p + p{margin-top:1em}
.legal-main ul{margin:1em 0 0;padding-left:1.2em;max-width:68ch}
.legal-main li{
  font-size:.92rem;line-height:1.68;color:var(--ink-70);
  margin-bottom:.5em;
}
.legal-main li::marker{color:var(--ink-28)}
.legal-main strong{color:var(--ink);font-weight:500}
.legal-main a{border-bottom:1px solid var(--line);transition:border-color .35s var(--ease)}
.legal-main a:hover{border-color:var(--ink)}
.legal-main mark{
  background:none;color:var(--ink);
  border-bottom:1px dashed var(--ink-28);
}

@media (max-width:800px){
  .legal-main h1{font-size:clamp(30px,9vw,44px)}
}

@media (max-width:480px){
  .error-header__logo img{width:48px}
  .error-header__back svg{width:2rem}
  .error-main__actions{align-items:flex-start;flex-direction:column;gap:1.6rem}
  .error-main__actions .btn{margin-top:0}
  .error-footer{align-items:flex-start;flex-direction:column;gap:.35rem}
}

/* ---------- 20. OFFRES DÉTAILLÉES ---------- */
.offres-detail{
  padding:clamp(100px,14vw,220px) var(--gutter);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.6vw,26px);row-gap:clamp(70px,10vw,160px);
  border-top:1px solid var(--line);
}
.offres-detail__heading{grid-column:1 / 8}
.offres-detail__heading .eyebrow{margin-bottom:clamp(24px,3vw,46px)}
.offres-detail__title,
.offres-detail__card h3,
.offres-detail__examples h3,
.offres-detail__included h3{
  font-family:var(--serif);font-style:italic;font-weight:300;
  letter-spacing:.01em;line-height:.92;text-transform:lowercase;
}
.offres-detail__title{font-size:clamp(48px,6.2rem,6.2rem)}
.offres-detail__lead{
  max-width:35ch;margin:clamp(30px,4vw,60px) 0 0 clamp(14px,4vw,68px);
  color:var(--ink-70);font-size:clamp(.95rem,1.15rem,1.15rem);font-weight:300;line-height:1.55;
}
.offres-detail__promise{
  grid-column:9 / 13;align-self:end;padding:0 0 1rem clamp(14px,2vw,34px);
  border-left:1px solid var(--line);
}
.offres-detail__promise p{
  font-family:var(--serif);font-style:italic;font-size:clamp(25px,2.15rem,2.15rem);
  font-weight:300;line-height:1.12;color:var(--ink);
}
.offres-detail__promise span{
  display:block;margin-top:1.6rem;color:var(--ink-45);
  font-size:.68rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
}
.offres-detail__media{
  min-height:clamp(330px,48vw,720px);
  aspect-ratio:auto;height:100%;align-self:stretch;
}
.offres-detail__media--club{grid-column:1 / 5;margin-left:calc(var(--gutter) * -1)}
.offres-detail__card{min-width:0}
.offres-detail__card--club{grid-column:6 / 13}
.offres-detail__card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
  padding-bottom:clamp(28px,3vw,48px);border-bottom:1px solid var(--line);
}
.offres-detail__card h3{max-width:13ch;font-size:clamp(38px,4.2rem,4.2rem)}
.offres-detail__index{
  margin-bottom:1rem;color:var(--ink-45);font-size:.65rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
}
.offres-detail__base{
  flex:0 0 auto;padding-top:.2rem;text-align:right;color:var(--ink-45);
  font-size:.68rem;font-weight:400;letter-spacing:.1em;line-height:1.65;text-transform:uppercase;
}
.offres-detail__base strong{
  color:var(--ink);font-size:1rem;font-weight:300;letter-spacing:.04em;
}
.offres-detail__table-wrap{width:100%;overflow-x:auto}
.offres-detail__table-wrap + .offres-detail__table-wrap{margin-top:clamp(32px,4vw,58px)}
.offres-detail__table{
  width:100%;min-width:540px;border-collapse:collapse;table-layout:fixed;
  font-size:.78rem;font-weight:300;
}
.offres-detail__table th,
.offres-detail__table td{padding:.8rem .65rem;border-bottom:1px solid var(--line);text-align:right}
.offres-detail__table th{
  color:var(--ink-45);font-size:.62rem;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;
}
.offres-detail__table th:first-child,
.offres-detail__table td:first-child{width:58%;padding-left:0;text-align:left}
.offres-detail__table th:last-child,
.offres-detail__table td:last-child{padding-right:0}
.offres-detail__table td:not(:first-child){white-space:nowrap;color:var(--ink-70)}
.offres-detail__table-total td{font-weight:400;color:var(--ink)}
.offres-detail__examples{
  grid-column:2 / 12;padding:clamp(38px,5vw,70px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.offres-detail__examples h3{font-size:clamp(34px,3.5rem,3.5rem)}
.offres-detail__examples-grid{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(32px,4vw,60px);
}
.offres-detail__examples-grid article{padding:0 clamp(18px,2.5vw,40px);border-left:1px solid var(--line)}
.offres-detail__examples-grid article:first-child{padding-left:0;border-left:0}
.offres-detail__examples-grid p{
  color:var(--ink-45);font-size:.65rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
}
.offres-detail__examples-grid strong{
  display:block;margin-top:1rem;font-size:clamp(27px,2.4rem,2.4rem);font-weight:200;line-height:1;
}
.offres-detail__examples-grid span{display:block;margin-top:.7rem;color:var(--ink-70);font-size:.78rem}
.offres-detail__media--federation{grid-column:9 / 13;margin-right:calc(var(--gutter) * -1)}

/* le sommet enneigé est la seule image froide du site : on la ramène dans la palette */
.offres-detail__media--federation .ph{filter:saturate(.22) sepia(.16) contrast(1.03)}

/* ce que comprend le socle, sous l'en-tête de chaque offre */
.offres-detail__socle{
  margin:clamp(22px,2.4vw,34px) 0 clamp(30px,3.4vw,52px);
  color:var(--ink-70);font-size:.78rem;font-weight:300;line-height:1.75;
}
.offres-detail__socle span{
  display:block;margin-bottom:.5rem;color:var(--ink-45);
  font-size:.65rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
}
.offres-detail__card--federation{grid-column:1 / 8;grid-row:4}
.offres-detail__clubs{
  display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,4vw,60px);
  margin-top:clamp(52px,6vw,90px);padding-top:clamp(28px,3vw,48px);
  border-top:1px solid var(--line);
}
.offres-detail__clubs > div > p:last-child{max-width:27ch;color:var(--ink-70);font-size:.78rem;line-height:1.55}
.offres-detail__clubs dl{margin:0}
.offres-detail__clubs dl div{
  display:flex;justify-content:space-between;gap:2rem;padding:.8rem 0;border-bottom:1px solid var(--line);
}
.offres-detail__clubs dt{color:var(--ink-70);font-size:.76rem;font-weight:300}
.offres-detail__clubs dd{margin:0;font-size:1rem;font-weight:300;white-space:nowrap}
.offres-detail__included{
  grid-column:2 / 12;display:grid;grid-template-columns:4fr 6fr;
  gap:clamp(35px,7vw,110px);padding-top:clamp(42px,6vw,90px);border-top:1px solid var(--line);
}
.offres-detail__included h3{font-size:clamp(42px,5rem,5rem)}
.offres-detail__included-heading > p:last-child{
  max-width:28ch;margin-top:1.8rem;color:var(--ink-70);font-size:.85rem;line-height:1.6;
}
.offres-detail__included ul{
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,4vw,60px);
  list-style:none;margin:0;padding:0;
}
.offres-detail__included li{
  position:relative;padding:.9rem 0 .9rem 1.25rem;border-bottom:1px solid var(--line);
  color:var(--ink-70);font-size:.76rem;
}
.offres-detail__included li::before{
  content:"";position:absolute;left:0;top:1.45rem;width:.45rem;height:1px;background:var(--ink-45);
}

@media (max-width:900px){
  .offres-detail{display:block;padding-top:clamp(80px,14vw,130px)}
  .offres-detail__heading,.offres-detail__promise,.offres-detail__media,
  .offres-detail__card,.offres-detail__examples,.offres-detail__included{width:100%;margin-left:0;margin-right:0}
  .offres-detail__promise{margin-top:clamp(40px,8vw,70px)}
  .offres-detail__media{min-height:0;aspect-ratio:4/3;margin-top:clamp(70px,12vw,110px)}
  .offres-detail__card{margin-top:clamp(45px,8vw,75px)}
  .offres-detail__examples{margin-top:clamp(80px,13vw,120px)}
  .offres-detail__examples-grid{grid-template-columns:1fr}
  .offres-detail__examples-grid article{
    display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.5rem 2rem;
    padding:1.3rem 0;border-left:0;border-bottom:1px solid var(--line);
  }
  .offres-detail__examples-grid article:last-child{border-bottom:0}
  .offres-detail__examples-grid strong{margin-top:0;text-align:right}
  .offres-detail__examples-grid span{grid-column:2;text-align:right}
  .offres-detail__card--federation{margin-top:clamp(45px,8vw,75px)}
  .offres-detail__included{display:block;margin-top:clamp(80px,13vw,120px)}
  .offres-detail__included ul{margin-top:2.5rem}
}

@media (max-width:640px){
  .offres-detail__card-head{display:block}
  .offres-detail__base{margin-top:1.8rem;text-align:left}
  .offres-detail__clubs{grid-template-columns:1fr}
  .offres-detail__included ul{grid-template-columns:1fr}
}


/* ==========================================================================
   Ajustements après retrait des contenus de maquette
   ========================================================================== */
/* la colonne « Adresse » a été retirée : trois colonnes au lieu de quatre */
.footer__cols{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .footer__cols{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .footer__cols{grid-template-columns:1fr} }


/* ==========================================================================
   TARIFS — offres saison 2026-2027 (remplace .offres-detail)
   ========================================================================== */
.tarifs{
  padding:clamp(90px,13vw,200px) var(--gutter);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:clamp(56px,8vw,120px);
}
.tarifs__intro{max-width:62ch}
.tarifs__titre{
  font-family:var(--serif);font-style:italic;font-weight:300;text-transform:lowercase;
  font-size:clamp(38px,5.4vw,5.4rem);line-height:.96;letter-spacing:.01em;margin:clamp(18px,2.4vw,34px) 0 0;
}
.tarifs__lead{
  margin:clamp(20px,2.6vw,36px) 0 0;color:var(--ink-70);
  font-size:clamp(.95rem,1.08rem,1.08rem);font-weight:300;line-height:1.62;
}

/* — les trois formules — */
.tarifs__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.tarif__carte{
  border:1px solid var(--line);padding:clamp(24px,2.6vw,38px);
  display:flex;flex-direction:column;min-width:0;
}
.tarif__carte--phare{background:var(--paper-2)}
.tarif__nom{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(20px,1.55rem,1.55rem);line-height:1.15;margin:0;
}
.tarif__pitch{margin:.7rem 0 0;color:var(--ink-45);font-size:.82rem;font-weight:300;line-height:1.5}
.tarif__prix{
  margin:clamp(18px,2vw,28px) 0 0;padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--line);font-weight:300;line-height:1;
}
.tarif__prix strong{font-weight:300;font-size:clamp(30px,2.5rem,2.5rem);letter-spacing:-.01em}
.tarif__prix span{font-size:.78rem;color:var(--ink-45);margin-left:.35rem}
.tarif__apres{margin:.5rem 0 0;color:var(--ink-45);font-size:.72rem;font-weight:300}
.tarif__liste{list-style:none;margin:clamp(18px,2vw,26px) 0 0;padding:0;
  font-size:.82rem;font-weight:300;color:var(--ink-70);line-height:1.55}
.tarif__liste li{position:relative;padding-left:1.1rem;margin-bottom:.5rem}
.tarif__liste li:before{content:"—";position:absolute;left:0;color:var(--ink-28)}

/* — modules — */
.tarifs__modules{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(24px,4vw,70px);align-items:start}
.tarifs__modules-tete h3,.tarifs__compare h3{
  font-family:var(--serif);font-style:italic;font-weight:300;text-transform:lowercase;
  font-size:clamp(24px,2.4rem,2.4rem);line-height:1.05;margin:.8rem 0 0;
}
.tarifs__modules-tete p:last-child{margin:1.2rem 0 0;color:var(--ink-70);font-size:.86rem;
  font-weight:300;line-height:1.6}
.tarifs__tableau{overflow-x:auto}
.tarifs__tableau table{width:100%;min-width:420px;border-collapse:collapse;
  font-size:.82rem;font-weight:300}
.tarifs__tableau th,.tarifs__tableau td{padding:.62rem .5rem;border-bottom:1px solid var(--line);
  text-align:right;white-space:nowrap}
.tarifs__tableau thead th{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-45);font-weight:400}
.tarifs__tableau th[scope=row],.tarifs__tableau thead th:first-child{
  text-align:left;white-space:normal;font-weight:300;color:var(--ink)}
.tarifs__tableau tbody tr:last-child td,.tarifs__tableau tbody tr:last-child th{border-bottom:0}

/* — comparaison — */
.tarifs__compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(24px,4vw,70px);align-items:start}
.tarifs__compare-texte p{margin:0 0 1.2rem;color:var(--ink-70);font-size:.9rem;
  font-weight:300;line-height:1.7}
.tarifs__compare-texte p:last-child{margin-bottom:0}
.tarifs__compare-texte strong{color:var(--ink);font-weight:400}

/* — inclus / exclus — */
.tarifs__inclus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,4vw,70px)}
.tarifs__ul{list-style:none;margin:1.4rem 0 0;padding:0;font-size:.86rem;
  font-weight:300;color:var(--ink-70);line-height:1.55}
.tarifs__ul li{position:relative;padding-left:1.2rem;margin-bottom:.85rem}
.tarifs__ul li:before{content:"+";position:absolute;left:0;color:var(--ink-45)}
.tarifs__ul--non li:before{content:"\00D7"}
.tarifs__mention{max-width:78ch;color:var(--ink-45);font-size:.76rem;
  font-weight:300;line-height:1.7;margin:0}

@media (max-width:1000px){
  .tarifs__grille{grid-template-columns:1fr}
  .tarifs__modules,.tarifs__compare{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tarifs__inclus{grid-template-columns:1fr}
  /* le rem tombe a 13px sur mobile : on repasse en px pour rester lisible */
  .tarifs__tableau table{min-width:330px;font-size:13px}
  .tarifs__tableau thead th{font-size:10px}
  .tarifs__lead{font-size:15px}
  .tarif__pitch{font-size:13px}
  .tarif__prix strong{font-size:34px}
  .tarif__prix span{font-size:12px}
  .tarif__apres{font-size:12px}
  .tarif__liste{font-size:13.5px}
  .tarifs__modules-tete p:last-child{font-size:14px}
  .tarifs__compare-texte p{font-size:14px}
  .tarifs__ul{font-size:14px}
  .tarifs__mention{font-size:12px}
  .tarifs__grille{gap:18px}
}