/* ===========================================================
   LEELOO CREATION — Design system v4
   Poppins · Pantone 2728 C "Absolute Zero" #024BB9
   =========================================================== */
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-400i.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Covered By Your Grace';src:url('../fonts/CoveredByYourGrace.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-Regular.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --blue:#024BB9; --blue-deep:#01337D;
  --cream:#F1EEE6; --cream-2:#E7E3D8;
  --ink:#12120F;   --ink-soft:#57574F;
  --yellow:#E8EC6B; --orange:#EF6511; --white:#fff;

  --font:'Poppins',"Helvetica Neue",Arial,sans-serif;
  --mono:'Courier Prime',ui-monospace,"Courier New",monospace;
  --hand:'Covered By Your Grace','Bradley Hand',cursive;

  --fs-hero:clamp(2.4rem,6.4vw,6rem);
  --fs-xl:clamp(2rem,4.6vw,4.1rem);
  --fs-lg:clamp(1.6rem,3vw,2.7rem);
  --fs-md:clamp(1.2rem,1.9vw,1.7rem);
  --fs-sm:clamp(1rem,1.35vw,1.18rem);
  --fs-body:clamp(.96rem,1.02vw,1.06rem);
  --fs-lead:clamp(1rem,1.2vw,1.16rem);

  /* respiration : espace systématique entre titre et texte */
  --gap-title:clamp(1.5rem,2.4vw,2.4rem);
  --gap-block:clamp(1.1rem,1.6vw,1.6rem);

  --pad:clamp(20px,5vw,72px);
  --maxw:1600px; --r:16px; --hdr:78px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);
  font-size:var(--fs-body);line-height:1.7;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:var(--cream)}
[id]{scroll-margin-top:calc(var(--hdr) + 20px)}

h1,h2,h3,h4{margin:0;letter-spacing:-.035em;line-height:1.02}
h3,h4{font-weight:800;text-transform:uppercase}
/* H1 : Poppins Bold, capitales */
h1{font-weight:700;text-transform:uppercase}
/* H2 par défaut : Poppins Light, bas de casse (titres de sections internes,
   pages projet). Interlettrage desserré : la Light supporte mal un tracking serré. */
h2{font-weight:300;text-transform:lowercase;letter-spacing:-.02em}
/* Grands titres de section : Poppins Bold, capitales */
h2.h-xl{font-weight:700;text-transform:uppercase;letter-spacing:-.035em}
.h-hero{font-size:var(--fs-hero);line-height:1.04}
.h-xl{font-size:var(--fs-xl);line-height:1.06}
.h-lg{font-size:var(--fs-lg);line-height:1.1}
.h-md{font-size:var(--fs-md);line-height:1.15;letter-spacing:-.025em}
.h-sm{font-size:var(--fs-sm);line-height:1.25;letter-spacing:-.015em}
h1+*,h2+*,h3+*{margin-top:var(--gap-title)}
p{margin:0 0 var(--gap-block)}
p:last-child{margin-bottom:0}
.lead{font-size:var(--fs-lead);line-height:1.75;max-width:62ch;color:#2B2B26}
.muted{color:var(--ink-soft)}
strong,b{font-weight:600}
/* Libellés manuscrits, entourés d'un cercle dessiné à la main.
   inline-block pour que le cercle épouse la largeur du texte. */
.eyebrow{font-family:var(--hand);font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:.01em;
  text-transform:none;color:var(--ink-soft);margin:0 0 1.5rem;display:inline-block;
  line-height:1.3;position:relative;padding:.4em 1.5em .5em}
.eyebrow::before,.hero__kick::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('../img/cercle.svg') center/100% 100% no-repeat}
/* sur fond sombre, le tracé bleu passe en blanc */
.eyebrow--light::before,.hero:not(.hero--plain) .hero__kick::before{
  filter:brightness(0) invert(1);opacity:.9}
.eyebrow--light{color:rgba(255,255,255,.72)}
.idx{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink-soft)}
.mark{background:linear-gradient(180deg,transparent 58%,var(--yellow) 58%,var(--yellow) 94%,transparent 94%);padding:0 .06em}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(76px,9vw,140px)}
.rule{height:1px;background:rgba(18,18,15,.16);border:0;margin:0}
.center{text-align:center;margin-inline:auto}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.7em;font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:.74rem;
  /* line-height:1 pour que la boîte de ligne épouse les capitales ;
     le padding haut légèrement supérieur compense l'absence de jambages */
  line-height:1;padding:1.28em 1.9em 1.32em;
  border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(0);transition:transform .5s var(--ease),background .4s}
.btn:hover{transform:translateY(-3px);color:var(--white);border-color:var(--blue)}
.btn:hover::before{background:var(--blue)}
.btn{color:var(--cream)}
.btn--blue{border-color:var(--blue);color:var(--white)}
.btn--blue::before{background:var(--blue)}
.btn--blue:hover{border-color:var(--ink)}.btn--blue:hover::before{background:var(--ink)}
.btn--ghost{color:var(--ink)}
.btn--ghost::before{transform:translateY(101%)}
.btn--ghost:hover::before{transform:translateY(0)}
.btn--light{border-color:var(--cream);color:var(--ink)}
.btn--light::before{background:var(--cream)}
.btn--light:hover{color:var(--ink);border-color:var(--yellow)}
.btn--light:hover::before{background:var(--yellow)}
.btn--outline-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn--outline-light::before{background:#fff;transform:translateY(101%)}
.btn--outline-light:hover{color:var(--ink);border-color:#fff}
.btn--outline-light:hover::before{transform:translateY(0)}
.btn .arw{display:inline-block;line-height:1;transition:transform .5s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

/* lien texte animé */
.lnk{position:relative;font-weight:600;display:inline-block}
.lnk::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease)}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:80;padding-block:15px;
  transition:transform .5s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(241,238,230,.93);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(18,18,15,.1);transition:opacity .4s}
.hdr.is-stuck::before{opacity:1}
.hdr.is-hidden{transform:translateY(-105%)}
.hdr.nav-open{transform:none!important}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:clamp(26px,2.3vw,32px);width:auto;
  filter:brightness(0);opacity:.92;transition:filter .4s,opacity .35s,transform .5s var(--ease)}
.brand:hover img{opacity:1;transform:translateY(-2px)}
.hdr--over:not(.is-stuck) .brand img{filter:none;opacity:1}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.nav a{font-weight:600;text-transform:uppercase;font-size:.74rem;letter-spacing:.1em;
  position:relative;padding:.3em 0;transition:transform .4s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.nav a:hover{transform:translateY(-2px)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.hdr--over:not(.is-stuck){color:#fff}
.hdr--over:not(.is-stuck) .nav a::after{background:#fff}
.hdr--over:not(.is-stuck) .burger{border-color:#fff}
.hdr--over:not(.is-stuck) .burger span{background:#fff}
.hdr .btn{padding:.85em 1.4em;font-size:.68rem}
.burger{display:none;width:44px;height:44px;border:1.5px solid var(--ink);border-radius:50%;
  background:transparent;cursor:pointer;padding:0;place-items:center}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink);margin:3.5px auto;
  transition:transform .4s var(--ease),opacity .3s}
.burger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- HERO plein écran (photo ou vidéo) ---------- */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;
  object-position:var(--focus,center 30%);animation:kenburns 26s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.11)}}
/* la vidéo d'accueil porte déjà son propre mouvement : pas de zoom en plus */
.hero__media video.hero__vid{animation:none;pointer-events:none}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(10,10,8,.52) 0%,rgba(10,10,8,.2) 34%,rgba(10,10,8,.3) 62%,rgba(10,10,8,.74) 100%)}
.hero__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding-block:calc(var(--hdr) + 24px) clamp(26px,3.4vw,48px);color:#fff}
/* même traitement sur les héros ; align-self évite que l'élément
   s'étire sur toute la largeur de la colonne flex */
.hero__kick{position:relative;display:inline-flex;align-self:flex-start;align-items:center;
  gap:.6rem;margin-bottom:1.1rem;padding:.4em 1.5em .5em;
  font-family:var(--hand);font-size:clamp(1.05rem,1.5vw,1.35rem);letter-spacing:.01em;
  text-transform:none;line-height:1.3;color:rgba(255,255,255,.9)}
.hero__kick i{width:8px;height:8px;border-radius:50%;background:var(--orange);
  animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}
.hero h1{color:#fff;max-width:none}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero__sub{font-size:var(--fs-lead);color:rgba(255,255,255,.9);max-width:48ch;
  margin-top:var(--gap-title)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:var(--gap-title)}
.hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-top:clamp(20px,3vw,38px);padding-top:16px;border-top:1px solid rgba(255,255,255,.26)}
.hero__stats{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;margin:0;padding:0;list-style:none}
.hero__stats div{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.68)}
.hero__stats b{display:block;font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
  color:#fff;margin-top:.15rem}
/* hero avec photo à droite (services / projets) */
.hero--split .hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);
  align-items:center;justify-content:initial}
.hero--split .hero__shot{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;
  max-height:64svh;align-self:center;box-shadow:0 30px 70px rgba(0,0,0,.3)}
.hero--split .hero__shot img{width:100%;height:100%;object-fit:cover;animation:none}
.scroll-cue{display:inline-flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.8);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.scroll-cue span{display:block;width:1px;height:34px;background:rgba(255,255,255,.5);
  position:relative;overflow:hidden}
.scroll-cue span::after{content:"";position:absolute;inset:0;background:#fff;
  animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* mots forts de la vidéo d'accueil */
.words{display:flex;flex-wrap:wrap;gap:.12em .3em;font-weight:700;text-transform:uppercase;
  font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.035em;color:#fff}
/* seuls les MOTS s'animent ; les lignes ne sont que des conteneurs,
   sinon les opacités se multiplient et les délais s'additionnent */
.words .wline{display:flex;opacity:1;transform:none;transition:none}
.words .wline>span{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,.2s)}
.is-ready .words .wline>span{opacity:1;transform:none}
.words em{font-style:normal;color:var(--yellow)}

/* ---------- marquee ---------- */
.mq{background:var(--blue);color:var(--cream);padding:15px 0;overflow:hidden;
  border-block:1.5px solid var(--ink)}
.mq--yellow{background:var(--yellow);color:var(--ink)}
.mq--ink{background:var(--ink);color:var(--cream)}
.mq__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__track>span{font-weight:700;text-transform:uppercase;font-size:clamp(1rem,1.9vw,1.7rem);
  letter-spacing:-.02em;padding-inline:.55em;white-space:nowrap;display:flex;align-items:center;gap:.55em}
.mq__track>span::after{content:"";width:.3em;height:.3em;border-radius:50%;
  background:currentColor;display:inline-block;opacity:.75}
@keyframes slide{to{transform:translateX(-50%)}}
/* bandeau collé au bas du hero */
.mq--pinned{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:0}

/* ---------- compétences soulignées ---------- */
.skills{list-style:none;margin:var(--gap-title) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 2.1rem}
.skills li{display:flex;align-items:baseline;gap:.5rem}
.skills i{font-family:var(--mono);font-style:normal;font-size:.6rem;letter-spacing:.1em;
  color:var(--yellow);opacity:.85}
.skills span{position:relative;font-weight:600;font-size:clamp(.8rem,1vw,.95rem);
  color:#fff;padding-bottom:.28em;white-space:nowrap}
.skills span::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease),height .3s}
.skills.is-in span::after{transform:scaleX(1)}
.skills li:nth-child(1) span::after{transition-delay:.05s}
.skills li:nth-child(2) span::after{transition-delay:.15s}
.skills li:nth-child(3) span::after{transition-delay:.25s}
.skills li:nth-child(4) span::after{transition-delay:.35s}
.skills li:nth-child(5) span::after{transition-delay:.45s}
.skills li:hover span::after{height:8px}

/* ---------- VITRINE PROJET plein écran, photo non recadrée ---------- */
.show{position:relative;background:var(--ink);border-top:1.5px solid var(--ink)}
.show__media{position:relative;width:100%;min-height:100svh;display:flex;
  align-items:center;justify-content:center;background:var(--ink)}
.show__media img{width:100%;height:auto;display:block}   /* aucun recadrage */
.show__capwrap{position:absolute;inset:0;pointer-events:none;
  padding:calc(var(--hdr) + 26px) var(--pad) clamp(26px,3.5vw,46px)}
.show__cap{position:sticky;top:calc(var(--hdr) + 26px);pointer-events:auto;
  display:inline-block;max-width:min(560px,88vw);color:#fff;
  background:rgba(10,10,8,.56);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px)}
.show__no{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--yellow)}
.show__cap h3{font-size:clamp(1.4rem,2.6vw,2.4rem);color:#fff;margin-top:.5rem}
.show__cap .quoi{margin-top:var(--gap-block);color:rgba(255,255,255,.86);font-size:.95rem}
.show__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62)}
.show__cap .btn{margin-top:1.3rem}

/* ---------- CARTES ÉPINGLÉES (empilement au scroll) ---------- */
.stack{position:relative;display:grid;gap:clamp(18px,2.4vw,28px)}
.stack__i{position:sticky;top:calc(var(--hdr) + 28px + var(--i) * 14px);
  transform:translateY(40px) scale(.97);opacity:0;
  transition:transform .85s var(--ease),opacity .7s var(--ease)}
.stack__i.is-in{transform:none;opacity:1}
.stack .step,.stack .tile{box-shadow:0 22px 60px rgba(18,18,15,.13)}

/* ---------- étapes / tuiles ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px)}
.step{background:var(--white);border-radius:var(--r);padding:28px 24px;
  border:1px solid rgba(18,18,15,.1);
  transition:transform .55s var(--ease),background .4s,color .4s,box-shadow .5s}
.step:hover{transform:translateY(-8px);background:var(--blue);color:var(--white)}
.step:hover .step__n,.step:hover p{color:rgba(255,255,255,.86)}
.step__n{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--blue);
  display:block;margin-bottom:2rem;transition:color .4s}
.step h3{font-size:1.02rem}
.step p{font-size:.87rem;color:var(--ink-soft);margin:0;transition:color .4s}
.sec--tint{background:var(--blue);color:var(--white)}
.sec--tint .eyebrow{color:rgba(255,255,255,.7)}
.sec--tint h2{color:#fff}
.sec--tint .lead{color:rgba(255,255,255,.86)}
.sec--tint .step{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff}
.sec--tint .step p{color:rgba(255,255,255,.78)}
.sec--tint .step__n{color:var(--yellow)}
.sec--tint .step:hover{background:#fff;color:var(--ink)}
.sec--tint .step:hover p{color:var(--ink-soft)}
.sec--tint .step:hover .step__n{color:var(--blue)}
.tile{border-radius:var(--r);background:var(--white);border:1px solid rgba(18,18,15,.1);
  overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch}
.tile__shot{overflow:hidden;min-height:220px}
.tile__shot img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.tile:hover .tile__shot img{transform:scale(1.05)}
.tile__body{padding:clamp(22px,2.4vw,32px)}
.tile h3{font-size:1.05rem}
.tile ul{list-style:none;margin:var(--gap-block) 0 0;padding:0;display:grid;gap:.4rem;
  font-size:.86rem;color:var(--ink-soft)}

/* ---------- OFFRES (accordéon + prix) ---------- */
.offer{background:var(--white);border:1px solid rgba(18,18,15,.12);border-radius:var(--r);
  overflow:hidden;transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.offer:hover{box-shadow:0 24px 60px rgba(18,18,15,.12)}
.offer--hi{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.offer__grid{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch}
/* l'image ne doit pas s'étirer quand le panneau « Voir le détail » s'ouvre :
   align-self:start l'empêche de suivre la hauteur de la colonne de droite,
   aspect-ratio lui donne une hauteur à partir de sa largeur, max-height la plafonne. */
.offer__shot{position:relative;overflow:hidden;align-self:start;width:100%;aspect-ratio:1/1;
  max-height:620px;transition:height .55s var(--ease)}
.offer__shot img{position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;transition:transform 1.1s var(--ease)}
/* panneau ouvert : l'image occupe toute la hauteur disponible de la colonne ;
   à la fermeture, retour au carré 1/1 défini plus haut. */
.offer.is-open .offer__shot{align-self:stretch;aspect-ratio:auto;max-height:none}
.offer:hover .offer__shot img{transform:scale(1.05)}
.offer__body{padding:clamp(24px,3vw,42px);display:flex;flex-direction:column}
.offer__fam{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft)}
.offer--hi .offer__fam{color:rgba(241,238,230,.62)}
.offer h3{font-size:clamp(1.3rem,2vw,1.9rem);margin-top:.8rem}
.offer__txt{margin-top:var(--gap-block);font-size:.94rem;color:var(--ink-soft)}
.offer--hi .offer__txt{color:rgba(241,238,230,.88)}
.offer__price{display:flex;align-items:baseline;gap:.6rem;margin-top:var(--gap-title);
  padding-top:1.1rem;border-top:1px solid rgba(18,18,15,.14)}
.offer--hi .offer__price{border-color:rgba(241,238,230,.22)}
.offer__price b{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:800;letter-spacing:-.03em}
.offer__price span{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft)}
.offer--hi .offer__price span{color:rgba(241,238,230,.6)}
.offer__more{margin-top:1.2rem;border:0;background:transparent;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font);font-weight:600;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:inherit}
.offer__more i{width:34px;height:34px;border-radius:50%;border:1.5px solid currentColor;
  display:grid;place-items:center;font-style:normal;font-size:1.05rem;
  transition:transform .5s var(--ease),background .35s,color .35s}
.offer__more:hover i{background:var(--blue);border-color:var(--blue);color:#fff;transform:rotate(90deg)}
.offer__more[aria-expanded="true"] i{transform:rotate(45deg)}
.offer__panel{overflow:hidden;height:0;transition:height .55s var(--ease)}
.offer__panelin{padding-top:var(--gap-title);display:grid;gap:var(--gap-title)}
.offer__panel h4{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.18em;
  color:var(--ink-soft);text-transform:uppercase;margin-bottom:.9rem}
.offer--hi .offer__panel h4{color:rgba(241,238,230,.6)}
.offer__list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.offer__list li{position:relative;padding-left:1.4rem;font-size:.88rem;color:var(--ink-soft)}
.offer--hi .offer__list li{color:rgba(241,238,230,.88)}
.offer__list li::before{content:"→";position:absolute;left:0;color:var(--blue);font-family:var(--mono)}
.offer--hi .offer__list li::before{color:var(--yellow)}
.offer .btn{margin-top:var(--gap-title);align-self:flex-start}

/* ---------- avis / faq ---------- */
/* Avis : une seule rangée, 3 cartes visibles, on fait défiler avec les flèches.
   scroll-snap garde toujours une carte alignée sur le bord gauche. */
.quotes{--qgap:clamp(16px,2.2vw,26px);--qvue:3;
  display:flex;gap:var(--qgap);margin-top:1rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  /* le défilement horizontal rogne aussi en hauteur : on laisse la place au
     soulèvement au survol (-6px) et à l'ombre portée */
  padding:10px 0 40px}
.quotes::-webkit-scrollbar{display:none}
.quotes>.quote{flex:0 0 calc((100% - (var(--qvue) - 1) * var(--qgap)) / var(--qvue));
  scroll-snap-align:start}
.quotes__tete{display:flex;justify-content:flex-end;gap:.6rem;margin-top:var(--gap-title)}
.qbtn{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(18,18,15,.28);
  background:transparent;color:var(--ink);cursor:pointer;font-size:1.1rem;line-height:1;
  display:grid;place-items:center;
  transition:background .35s var(--ease),color .35s var(--ease),
    border-color .35s var(--ease),opacity .35s var(--ease)}
.qbtn:hover:not(:disabled){background:var(--blue);border-color:var(--blue);color:#fff}
.qbtn:disabled{opacity:.28;cursor:default}
.quote{background:var(--cream);border:1px solid rgba(18,18,15,.14);border-radius:var(--r);
  padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;gap:.55rem;
  transition:transform .5s var(--ease),box-shadow .5s}
.quote:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(18,18,15,.1)}
/* ordre de lecture : nom, note, prestation, filet, puis l'avis */
.quote__nom{display:flex;align-items:center;gap:.55rem;font-weight:800;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.02rem;line-height:1.1;
  color:var(--ink)}
.quote__avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.quote__stars{color:var(--orange);letter-spacing:.2em;font-size:.95rem;line-height:1}
.quote__role{position:relative;font-size:.92rem;color:var(--ink);margin:.35rem 0 1.5rem;
  padding-bottom:1rem}
.quote__role::after{content:"";position:absolute;left:0;bottom:0;
  width:min(100%,11em);height:2px;background:var(--ink);opacity:.85}
.quote__txt{display:grid;gap:.7rem}
.quote p{font-size:.9rem;margin:0;color:var(--ink-soft);line-height:1.55}
.faq{border-top:1px solid rgba(18,18,15,.18)}
.faq details{border-bottom:1px solid rgba(18,18,15,.18)}
.faq summary{list-style:none;cursor:pointer;padding:1.5rem 3.2rem 1.5rem 0;position:relative;
  font-weight:700;text-transform:uppercase;font-size:clamp(.9rem,1.3vw,1.1rem);
  letter-spacing:-.015em;transition:color .3s,padding-left .4s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue);padding-left:.5rem}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;translate:0 -50%;
  font-family:var(--mono);font-size:1.4rem;color:var(--blue);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 3.2rem 1.7rem 0;color:var(--ink-soft);max-width:82ch;margin:0}
.faq a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- à propos ---------- */
.about{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,5vw,80px);align-items:start}
.about__media{position:sticky;top:calc(var(--hdr) + 28px);border-radius:var(--r);
  overflow:hidden;background:var(--cream-2)}
.about__media img{width:100%;height:auto}     /* image entière, on la découvre en scrollant */
.about__txt>*+*{margin-top:var(--gap-title)}

/* ---------- formulaire ---------- */
.form{display:grid;gap:20px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:.55rem}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:var(--font);font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid rgba(18,18,15,.2);border-radius:12px;padding:15px 16px;
  transition:border-color .3s,box-shadow .3s,transform .3s}
.field textarea{min-height:170px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(2,75,185,.16)}
.form__note{grid-column:1/-1;font-size:.8rem;color:var(--ink-soft)}

/* ---------- CTA & footer ---------- */
.cta{background:var(--blue);color:var(--white);text-align:center;
  padding-block:clamp(74px,9vw,132px);overflow:hidden}
.cta h2{color:#fff}.cta h2 em{font-style:normal;color:var(--yellow)}
.cta p{color:rgba(255,255,255,.86);max-width:56ch;margin-inline:auto}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--gap-title)}
.ftr{background:var(--ink);color:var(--cream);padding-block:clamp(52px,7vw,88px) 28px}
.ftr__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-bottom:42px;
  border-bottom:1px solid rgba(241,238,230,.18)}
.ftr h4{font-size:.7rem;letter-spacing:.16em;color:rgba(241,238,230,.55);font-family:var(--mono);
  font-weight:400;margin-bottom:1.1rem;text-transform:uppercase}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem}
.ftr a:hover{color:var(--yellow)}
.ftr__logo{height:46px;width:auto;margin-bottom:1.1rem;filter:brightness(0) invert(1);opacity:.95}
.ftr__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:20px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(241,238,230,.55)}

/* ---------- divers ---------- */
.pagehead{padding-top:clamp(120px,13vw,180px);padding-bottom:clamp(36px,4.5vw,60px)}
.crumb{font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--gap-title)}
.chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid rgba(18,18,15,.24);border-radius:999px;padding:8px 14px}
/* Galerie bento : chaque rangée est remplie sur toute la largeur, et dans une
   rangée les cadres partagent la même hauteur avec une largeur proportionnelle
   au format de la photo (--fg). Une image reste donc à ses proportions exactes :
   les paysages prennent un cadre large, les portraits un cadre étroit et haut. */
.gal{--g:clamp(14px,2vw,24px);--hmax:700px;display:grid;gap:var(--g);justify-items:center}
/* --sum = somme des ratios de la rangée : la largeur maximale qui en découle
   empêche une rangée de portraits de devenir démesurément haute ; dans ce cas
   la rangée est simplement centrée au lieu de s'étirer. */
/* flex-start et non stretch : sur les petits écrans les cadres passent à la
   ligne, et sans cela le plus haut imposerait sa hauteur à son voisin, qui
   serait alors rogné. Sur grand écran les hauteurs sont déjà égales par calcul. */
.gal__row{display:flex;gap:var(--g);align-items:flex-start;width:100%;
  max-width:calc(var(--hmax) * var(--sum, 2) + (var(--n, 2) - 1) * var(--g))}
.gal figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--cream-2);
  flex:0 1 0;flex-grow:var(--fg,1);min-width:0}
.gal img,.gal video{display:block;width:100%;height:100%;object-fit:cover}
/* crédit photo : posé en bas du cadre, sur un voile pour rester lisible */
.gal__cr{position:absolute;left:0;right:0;bottom:0;padding:.5rem .7rem .45rem;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-align:right;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.42))}
.gal__cr a{color:#fff;text-decoration:underline;text-underline-offset:.2em}
.gal figure{position:relative}
.gal video{background:var(--ink)}
@media(max-width:760px){
  .gal__row{flex-wrap:wrap;max-width:none}
  .gal figure{flex-basis:calc(50% - var(--g) / 2);flex-grow:1}
}
@media(max-width:520px){
  .gal figure{flex-basis:100%}
}
.shot{position:relative;overflow:hidden;border-radius:var(--r);background:var(--cream-2);aspect-ratio:16/9}
.shot img{width:100%;height:100%;object-fit:cover}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);
  transform-origin:left;background:var(--blue);z-index:95;pointer-events:none}
.hdr--over .progress{background:var(--yellow)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s}.rv-d4{transition-delay:.28s}
.rv-up{opacity:0;transform:translateY(40px) scale(.985);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv-up.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .quotes{--qvue:2}
  .ftr__top{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
  .about__media{position:static}
  .hero--split .hero__in{grid-template-columns:1fr}
  .hero--split .hero__shot{display:none}
  .offer__grid,.tile{grid-template-columns:1fr}
  .offer__shot,.tile__shot{aspect-ratio:16/9;min-height:0}
  .offer__shot,.offer.is-open .offer__shot{max-height:none;aspect-ratio:16/9;
    align-self:start;height:auto}
}
@media(max-width:860px){
  .nav{position:fixed;inset:0;background:var(--cream);flex-direction:column;justify-content:center;
    gap:24px;transform:translateY(-100%);transition:transform .6s var(--ease);z-index:70;
    height:100dvh;overflow-y:auto}
  .nav.is-open{transform:none}
  .nav a{font-size:1.7rem;color:var(--ink)}
  .hdr--over:not(.is-stuck) .nav a{color:var(--ink)}
  .burger{display:grid;z-index:90}
  .hdr .btn{display:none}
  .form{grid-template-columns:1fr}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .stack__i{position:static;top:auto}
  .show__cap{max-width:100%}
}
@media(max-width:520px){
  .steps{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
}
@media(max-height:640px){.hero__stats,.skills{display:none}}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv,.rv-up,.stack__i,.words span{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* hero en deux colonnes : le titre partage la largeur avec la photo,
   il doit donc être plus petit que sur un hero pleine largeur */
.hero--split h1{font-size:min(4.4vw,8vh,3.5rem);line-height:1.06}
.hero--split .hero__sub{font-size:clamp(.95rem,1.05vw,1.08rem);max-width:42ch;
  margin-top:var(--gap-block)}
.hero--split .hero__cta{margin-top:var(--gap-block)}
.hero--split .hero__in{padding-bottom:clamp(58px,7vw,86px)}  /* place pour le bandeau collé */
.hero--split .chips{margin-top:var(--gap-block)}
@media(max-width:1080px){.hero--split h1{font-size:min(7vw,9vh,3.2rem)}}

/* =========================================================
   HÉROS SANS PHOTO DE FOND — fond beige, photo à droite
   (services · portfolio · à propos)
   ========================================================= */
.hero--plain{background:var(--cream);color:var(--ink)}
.hero--plain .hero__media,.hero--plain .hero__veil{display:none}
.hero--plain h1,.hero--plain h2{color:var(--ink)}
.hero--plain .hero__sub{color:#2B2B26}
.hero--plain .hero__kick{color:var(--ink-soft)}
.hero--plain .hero__foot{border-top-color:rgba(18,18,15,.18)}
.hero--plain .hero__stats div{color:var(--ink-soft)}
.hero--plain .hero__stats b{color:var(--ink)}
.hero--plain .scroll-cue{color:var(--ink-soft)}
.hero--plain .scroll-cue span{background:rgba(18,18,15,.35)}
.hero--plain .scroll-cue span::after{background:var(--ink)}
.hero--plain .chip{border-color:rgba(18,18,15,.24);color:var(--ink)}
.hero--plain .hero__shot{box-shadow:0 26px 64px rgba(18,18,15,.16)}

/* =========================================================
   GRILLE PORTFOLIO — cadres identiques, photo centrée,
   nom + nature du projet DANS le cadre
   ========================================================= */
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,32px);
  align-items:stretch}
.card{grid-column:span 4;position:relative;display:flex;flex-direction:column;isolation:isolate}
.card__media{position:relative;overflow:hidden;border-radius:var(--r);background:var(--cream-2);
  aspect-ratio:3/4;clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}

.card.is-in .card__media{clip-path:inset(0 0 0 0)}
.card__media img{width:100%;height:100%;object-fit:cover;object-position:center center;
  transition:transform 1.1s var(--ease),filter .6s}
.card:hover .card__media img{transform:scale(1.05);filter:brightness(.82)}
.card__no{position:absolute;top:14px;left:14px;z-index:3;background:var(--cream);color:var(--ink);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;padding:6px 11px;border-radius:999px;
  transition:transform .5s var(--ease),background .35s,color .35s}
.card:hover .card__no{transform:translateY(-3px);background:var(--blue);color:#fff}
.card__go{position:absolute;right:14px;top:14px;z-index:3;width:42px;height:42px;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;opacity:0;
  transform:translateY(-8px) scale(.85);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.card:hover .card__go{opacity:1;transform:none}
/* légende à l'intérieur du cadre */
.card__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,1.6vw,22px);
  color:#fff;background:linear-gradient(180deg,rgba(10,10,8,0) 0%,rgba(10,10,8,.62) 42%,
  rgba(10,10,8,.9) 100%);transform:translateY(0);transition:padding-bottom .5s var(--ease)}
.card:hover .card__cap{padding-bottom:calc(clamp(16px,1.6vw,22px) + 6px)}
.card__cap h3{font-size:clamp(1.02rem,1.35vw,1.3rem);color:#fff;letter-spacing:-.03em}
.card__cap p{margin:.45rem 0 0;font-size:.84rem;line-height:1.45;color:rgba(255,255,255,.9)}
.card__cap .card__tag{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.66)}
@media(max-width:1080px){.card{grid-column:span 6}}
@media(max-width:640px){.card{grid-column:span 12}}
@media(prefers-reduced-motion:reduce){.card__media{clip-path:none}}

/* ---------- BLOG ----------
   Cartes d'article : même vocabulaire que les cartes projet (cadre arrondi,
   photo qui respire au survol), mais titre et extrait sous la photo plutôt
   qu'en incrustation, pour que le texte reste lisible et indexable. */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,32px)}
.post{display:flex;flex-direction:column;background:var(--white);
  border:1px solid rgba(18,18,15,.12);border-radius:var(--r);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.post:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(18,18,15,.12)}
.post__shot{overflow:hidden;aspect-ratio:3/2;background:var(--cream-2)}
.post__shot img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.post:hover .post__shot img{transform:scale(1.05)}
.post__body{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;
  gap:.6rem;flex:1}
.post__meta{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0}
.post h3{font-size:clamp(1.02rem,1.35vw,1.24rem);font-weight:700;
  text-transform:none;letter-spacing:-.025em;line-height:1.22}
.post__ex{margin:0;font-size:.88rem;font-weight:300;line-height:1.55;
  color:var(--ink-soft)}
.post__go{margin-top:auto;padding-top:.5rem;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
@media(max-width:1080px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.posts{grid-template-columns:1fr}}

/* Article : une seule colonne de lecture, images en pleine largeur du wrap */
/* en-tête et corps partagent exactement la même colonne de 820 px, centrée
   dans le wrap : les titres s'alignent au pixel près. */
.art__tete{max-width:820px;margin-inline:auto}
.art__projet{margin-top:calc(var(--gap-title) * 1.2)}
.art__meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;flex-wrap:wrap;
  gap:.6rem;margin:var(--gap-block) 0 0}
.art__chapo{font-size:calc(var(--fs-lead) * 1.06);margin-top:var(--gap-block)}
.art{max-width:820px;margin-inline:auto}
.art h2{margin-top:calc(var(--gap-title) * 1.4)}
.art h2:first-child{margin-top:var(--gap-title)}
.art .lead{max-width:none}
/* la photo de couverture prend toute la largeur du wrap ; à l'intérieur de
   l'article, les visuels s'alignent sur la colonne de lecture. */
.art__gal{margin:var(--gap-title) 0}
.lien{color:var(--blue);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px}
.lien:hover{text-decoration-thickness:2px}

/* hors du corps d'article, ces titres doivent aussi être en Poppins Bold
   majuscules : la règle h2 globale les mettrait en Light bas de casse. */
h2.h-bold{font-weight:700;text-transform:uppercase;letter-spacing:-.035em}

/* Bande de conversion en fin d'article. Pleine largeur comme le bandeau CTA du
   site, pour qu'elle se lise comme une section et non comme un encadré posé
   dans la colonne de lecture. */
.artcta{background:var(--ink);color:var(--cream);
  padding-block:clamp(64px,8vw,112px);margin-top:clamp(56px,7vw,96px)}
.artcta__in{display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(34px,5vw,86px);align-items:start}
.artcta h2{color:#fff;max-width:18ch}
.artcta .lead{color:rgba(241,238,230,.82);max-width:44ch;margin-top:var(--gap-block)}
.artcta__direct{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  margin-top:var(--gap-title)}
.artcta__mail{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(241,238,230,.86);
  text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}
.artcta__mail:hover{color:#fff;text-decoration-thickness:2px}

.artcta__form{display:grid;gap:clamp(18px,2vw,26px);padding-top:.4rem}
.artcta__f{display:grid;gap:.45rem}
.artcta__f label{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(241,238,230,.62)}
.artcta__f input,.artcta__f textarea{width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(241,238,230,.32);color:var(--cream);font:inherit;
  font-weight:300;font-size:1rem;padding:.5rem 0 .6rem;border-radius:0;
  transition:border-color .35s var(--ease)}
.artcta__f textarea{resize:vertical;min-height:3.4em;line-height:1.55}
.artcta__f input:focus,.artcta__f textarea:focus{outline:0;border-bottom-color:var(--cream)}
.artcta__f input:-webkit-autofill{-webkit-text-fill-color:var(--cream);
  -webkit-box-shadow:0 0 0 60px var(--ink) inset}
.artcta__form .btn{justify-self:start;margin-top:.4rem}
@media(max-width:900px){
  .artcta__in{grid-template-columns:1fr;gap:clamp(30px,6vw,44px)}
  .artcta h2{max-width:none}
}

/* ---------- BOUTONS : du plein, sans liseré ----------
   Le fond était porté par un calque ::before à angles droits, rogné par
   l'arrondi du bouton : le long des extrémités, un mince filet clair laissait
   voir la page au travers. Le fond est désormais porté par le bouton lui-même
   (il couvre aussi la zone de bordure), et le calque de survol reprend le même
   arrondi. Les variantes volontairement en contour gardent leur trait. */
.btn{background:var(--ink);border-color:transparent}
.btn::before{border-radius:inherit}
.btn:hover{border-color:transparent}

.btn--blue{background:var(--blue);border-color:transparent}
.btn--blue:hover{border-color:transparent}

.btn--light{background:var(--cream);border-color:transparent}
.btn--light:hover{border-color:transparent}

.btn--ghost{background:transparent;border-color:var(--ink)}
.btn--ghost:hover{border-color:var(--blue)}

.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.55)}
.btn--outline-light:hover{border-color:#fff}

/* respiration entre la bande de contact et la section « Voir plus » */
.artcta{margin-bottom:clamp(64px,8vw,110px)}

/* ---------- Avis Google (remplis par la fonction serverless) ---------- */
.avis__note{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  margin-top:var(--gap-block)}
.avis__note b{font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:800;letter-spacing:-.03em;
  line-height:1}
.avis__etoiles{color:var(--orange);letter-spacing:.16em;font-size:.95rem}
.avis__nb{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft)}
.quote__auteur{margin-top:auto;display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft)}
.quote__auteur img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.quote__auteur b{display:block;font-family:var(--font);font-weight:700;font-size:.95rem;
  letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-bottom:.1rem}
.avis__pied{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  margin-top:var(--gap-title)}
.avis__source{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft)}

/* =========================================================
   Ajustements — titre sur deux lignes, puces, survols
   ========================================================= */

/* titre d'accueil : une ligne = un bloc */
.words{flex-direction:column;align-items:flex-start;gap:0}
.wline{display:flex;flex-wrap:wrap;gap:.12em .3em}

/* hero en deux colonnes : plus de place au texte, photo décalée à droite */
.hero--split .hero__in{grid-template-columns:1.32fr .68fr}
@media(max-width:1080px){.hero--split .hero__in{grid-template-columns:1fr}}

/* Services : la photo occupe davantage la colonne de droite.
   Cadre (coins arrondis) et ombre portée hérités de .hero--split /.hero--plain ;
   le format 3/4 colle mieux au portrait de la photo qu'un 4/5. */
.hero--split.hero--shot-lg .hero__in{grid-template-columns:1.12fr .88fr}
/* 19/25 (0,76) : le format le plus haut qui laisse le cadre remplir toute la
   largeur de la colonne sans dépasser la hauteur disponible du hero.
   Le plafond retire la place prise par l'en-tête et le bandeau jaune collé. */
.hero--split.hero--shot-lg .hero__shot{aspect-ratio:19/25;
  max-height:calc(100svh - 200px)}
@media(max-width:1080px){.hero--split.hero--shot-lg .hero__in{grid-template-columns:1fr}}

/* étiquettes de projet : bien visibles au survol */
.chip{transition:background .35s var(--ease),color .35s var(--ease),
  border-color .35s var(--ease),transform .4s var(--ease)}
.chip:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.hero .chip{border-color:rgba(255,255,255,.5);color:#fff}
.hero .chip:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}

/* listes imbriquées dans les offres */
.offer__sub{list-style:none;margin:.5rem 0 .2rem;padding:0;display:grid;gap:.35rem}
.offer__sub li{position:relative;padding-left:1rem;font-size:.84rem;opacity:.9}
.offer__sub li::before{content:"·";position:absolute;left:.15rem;color:var(--blue);font-weight:700}
.offer--hi .offer__sub li::before{color:var(--yellow)}
.offer__option{margin-top:var(--gap-block);padding:.9rem 1.1rem;border-radius:12px;
  background:rgba(2,75,185,.07);font-size:.85rem;color:var(--ink-soft)}
.offer--hi .offer__option{background:rgba(232,236,107,.12);color:rgba(241,238,230,.85)}

/* puces dans les textes de projet */
/* Pages projet : intertitres en Poppins Bold majuscules, texte courant en Light.
   Ces règles annulent le h2 global (Light bas de casse) sur ces pages seulement. */
.projtxt h2,.projtxt h3,.projtxt h4{font-weight:700;text-transform:uppercase;
  letter-spacing:-.03em}
.projtxt p,.projtxt .lead,.projtxt li{font-weight:300}

.proj__puces{list-style:none;margin:var(--gap-block) 0;padding:0;display:grid;gap:.5rem;
  max-width:62ch}
.proj__puces li{position:relative;padding-left:1.5rem;color:#2B2B26;font-size:var(--fs-lead)}
.proj__puces li::before{content:"→";position:absolute;left:0;color:var(--blue);
  font-family:var(--mono)}

/* lien d'évitement : visible seulement au clavier */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);
  padding:.9em 1.4em;border-radius:0 0 12px 0;font-weight:600;font-size:.8rem}
.skip:focus{left:0}

/* sélecteur de langue */
.lang{display:flex;align-items:center;gap:.4rem;margin:0;font-weight:600;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase}
.lang a{position:relative;padding:.25em .1em;opacity:.55;transition:opacity .3s var(--ease)}
.lang a:hover{opacity:1}
.lang a[aria-current]{opacity:1}
.lang a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--blue)}
.hdr--over:not(.is-stuck) .lang a[aria-current]::after{background:#fff}
.lang span{opacity:.35}
@media(max-width:860px){.lang{margin-left:auto;margin-right:8px;z-index:90;position:relative}}

/* ---------- bloc Instagram (portfolio) ---------- */
.insta .lead{margin-inline:auto}
.insta .eyebrow{margin-inline:auto}
/* aperçu Instagram : vignettes carrées, chacune renvoie vers le compte */
.insta__compte{display:flex;align-items:center;justify-content:center;gap:.85rem;
  margin-top:var(--gap-title);font-weight:600;font-size:1rem}
.insta__pastille{width:56px;height:56px;border-radius:50%;flex:none;background:var(--blue)
  url('../img/logo-mark.png') center/62% no-repeat}
/* toutes les publications sur une seule rangée */
.insta__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);
  margin-top:1.4rem}
.insta__post{position:relative;display:block;overflow:hidden;border-radius:calc(var(--r) / 1.6);
  aspect-ratio:1/1;background:var(--cream-2)}
.insta__post img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.insta__post::after{content:"";position:absolute;inset:0;background:var(--blue);opacity:0;
  transition:opacity .45s var(--ease)}
.insta__ico{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:1.5rem;opacity:0;transform:scale(.85);z-index:2;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.insta__post:hover img{transform:scale(1.07)}
.insta__post:hover::after{opacity:.55}
.insta__post:hover .insta__ico,.insta__post:focus-visible .insta__ico{opacity:1;transform:none}
@media(max-width:820px){.insta__grid{grid-template-columns:repeat(2,1fr)}
  .quotes{--qvue:1}}

/* ============================================================
   LANDING « VITRINES DE NOËL »
   Réutilise au maximum les blocs du site (hero, chips, form,
   cta) ; seules les compositions propres à la page sont ici.
   ============================================================ */
.hero--noel{min-height:min(100svh,860px)}
.hero--noel .hero__veil{background:linear-gradient(180deg,
  rgba(10,10,8,.26) 0%,rgba(10,10,8,.38) 30%,rgba(10,10,8,.72) 62%,rgba(10,10,8,.93) 100%)}
/* contraste du titre sans assombrir la vitrine : ombre très diffuse, invisible
   en tant qu'ombre, mais qui décolle le blanc du fond */
.hero--noel h1,.hero--noel .hero__sub{text-shadow:0 2px 30px rgba(10,10,8,.62)}
.hero--noel .hero__media img{animation:none}
.hero--noel .chip{font-size:.70rem;padding:10px 18px}
.hero--noel .h-hero{max-width:17ch;line-height:.98}
.noel-rare__mini{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.82);align-self:center}

.noel-intro{max-width:62ch;margin-top:var(--gap-title)}
.noel-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);
  margin-top:var(--gap-title)}
.noel-chip{background:var(--cream-2);border-radius:var(--r);padding:clamp(18px,2.2vw,30px)}
.noel-chip span{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft)}
.noel-chip h3{font-size:var(--fs-md);font-weight:700;margin:.5rem 0 .3rem}
.noel-chip p{color:var(--ink-soft)}

.noel-ab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);
  margin-top:var(--gap-title)}
.noel-ab figure{margin:0}
.noel-ab__im{border-radius:var(--r);overflow:hidden;aspect-ratio:16/11;background:var(--cream-2)}
.noel-ab__im img{width:100%;height:100%;object-fit:cover}
.noel-ab figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}
.noel-legende{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--ink-soft);margin-top:1rem}

.noel-reals{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
  margin-top:var(--gap-title);align-items:stretch}
.noel-real{display:block;background:var(--white);border-radius:var(--r);overflow:hidden;
  color:inherit;text-decoration:none;transition:transform .5s var(--ease)}
.noel-real:hover{transform:translateY(-6px)}
.noel-real__im{aspect-ratio:4/5;overflow:hidden;background:var(--cream-2)}
.noel-real__im img{width:100%;height:100%;object-fit:cover;display:block}
.noel-real__b{padding:clamp(14px,1.6vw,22px)}
.noel-real__b h3{font-size:var(--fs-sm);font-weight:700}
.noel-real__l{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin:.25rem 0}
.noel-real__q{color:var(--ink-soft);font-size:.92rem}

.noel-offres{background:var(--cream-2)}
.noel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
  margin-top:var(--gap-title);align-items:start}
.noel-offre{position:relative;background:var(--white);border-radius:var(--r);
  padding:clamp(22px,2.6vw,36px);border:1px solid rgba(2,75,185,.22)}
.noel-offre--hi{background:var(--blue);color:var(--cream);border-color:transparent}
.noel-offre__n{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft)}
.noel-offre--hi .noel-offre__n{color:rgba(241,238,230,.75)}
.noel-offre h3{font-size:var(--fs-md);font-weight:700;margin:.6rem 0 .2rem;line-height:1.12}
.noel-offre__sous{color:var(--ink-soft);margin-bottom:1.1rem}
.noel-offre--hi .noel-offre__sous{color:rgba(241,238,230,.82)}
.noel-offre ul{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.55rem}
.noel-offre li{padding-left:1.3rem;position:relative;font-size:.96rem}
.noel-offre li::before{content:"→";position:absolute;left:0;color:var(--blue)}
.noel-offre--hi li::before{color:var(--yellow)}
.noel-offre__prix{display:flex;flex-direction:column;gap:.15rem;
  border-top:1px solid rgba(18,18,15,.14);padding-top:1rem}
.noel-offre--hi .noel-offre__prix{border-top-color:rgba(241,238,230,.28)}
.noel-offre__prix b{font-size:var(--fs-md);font-weight:700}
.noel-offre__prix span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--ink-soft)}
.noel-offre--hi .noel-offre__prix span{color:rgba(241,238,230,.8)}
.noel-offre__badge{position:absolute;top:-12px;right:clamp(16px,2vw,28px);background:var(--yellow);
  color:var(--ink);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.42rem .8rem;border-radius:999px}
.noel-note{color:var(--ink-soft);max-width:62ch;margin-top:var(--gap-title)}

.noel-tailles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);
  margin-top:var(--gap-title)}
.noel-taille{background:var(--cream-2);border-radius:var(--r);padding:.9rem 1.2rem;
  display:flex;align-items:baseline;gap:.8rem}
.noel-taille b{font-size:var(--fs-md);color:var(--blue)}
.noel-taille span{color:var(--ink-soft);font-size:.92rem}
.noel-tar{margin-top:clamp(14px,1.8vw,24px);overflow-x:auto;border-radius:var(--r)}
.noel-tar table{width:100%;border-collapse:collapse;min-width:540px;background:var(--white)}
.noel-tar th{background:var(--blue);color:var(--cream);font-family:var(--mono);font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.85rem 1rem;text-align:center}
.noel-tar th:first-child{text-align:left}
.noel-tar td{padding:1rem;border-bottom:1px solid rgba(18,18,15,.1);text-align:center;
  font-weight:700;font-size:var(--fs-sm);color:var(--blue)}
.noel-tar td:first-child{text-align:left;color:var(--ink);font-weight:400}
.noel-tar__n{font-family:var(--mono);font-size:.74rem;color:var(--blue);margin-right:.6rem}
.noel-tar td b{display:inline;font-weight:700}
.noel-tar td i{display:block;font-style:normal;color:var(--ink-soft);font-size:.86rem}
.noel-tar tr:last-child td{border-bottom:none}
.noel-opts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,50px);
  margin-top:var(--gap-title)}
.noel-opts h3{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:.8rem}
.noel-opts ul{list-style:none;padding:0;margin:0}
.noel-opts li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid rgba(18,18,15,.1)}
.noel-opts li b{color:var(--blue);white-space:nowrap}
.noel-opts p{color:var(--ink-soft)}

.noel-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);
  margin-top:var(--gap-title)}
.noel-split__c{background:var(--cream-2);border-radius:var(--r);padding:clamp(22px,2.8vw,40px)}
.noel-split__c--moi{background:var(--ink);color:var(--cream)}
.noel-split__c h3{font-family:var(--mono);font-size:.8rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:1.1rem;color:var(--blue)}
.noel-split__c--moi h3{color:var(--yellow)}
.noel-split__c ul{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.noel-split__c li{padding-left:1.5rem;position:relative;font-size:var(--fs-sm)}
.noel-split__c li::before{content:"→";position:absolute;left:0;color:var(--blue)}
.noel-split__c--moi li::before{color:var(--yellow)}

.noel-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,22px);
  margin-top:var(--gap-title)}
.noel-etape{background:var(--white);border-radius:var(--r);overflow:hidden;
  padding:0 0 clamp(18px,2vw,26px)}
.noel-etape__shot{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2)}
.noel-etape__shot img{width:100%;height:100%;object-fit:cover}
.noel-etape .step__n{display:block;margin:clamp(16px,2vw,24px) clamp(16px,1.8vw,24px) .4rem}
.noel-etape h3{font-size:var(--fs-sm);font-weight:700;padding:0 clamp(16px,1.8vw,24px);
  margin-bottom:.35rem}
.noel-etape p{color:var(--ink-soft);padding:0 clamp(16px,1.8vw,24px);font-size:.94rem}

.noel-insp{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);
  margin-top:var(--gap-title)}
.noel-insp figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;
  background:var(--cream-2);position:relative}
.noel-insp img{width:100%;height:100%;object-fit:cover}

.noel-rare{background:var(--ink);color:var(--cream);
  padding-block:clamp(76px,9vw,140px);text-align:center}
.noel-rare .wrap{max-width:72ch}
.noel-rare .lead{color:rgba(241,238,230,.84)}
.noel-rare__dl{font-family:var(--mono);font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:.1em;
  text-transform:uppercase;color:var(--yellow);margin-top:var(--gap-title)}
.noel-rare__sous{color:rgba(241,238,230,.6);margin-top:.6rem}

.noel-form{display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(28px,5vw,70px);align-items:start}

@media(max-width:980px){
  .noel-chips,.noel-reals,.noel-grid,.noel-tailles{grid-template-columns:1fr}
  .noel-etapes,.noel-insp{grid-template-columns:repeat(2,1fr)}
  .noel-opts,.noel-split,.noel-form{grid-template-columns:1fr}
}
@media(max-width:620px){
  .noel-ab{grid-template-columns:1fr}
  .noel-etapes,.noel-insp{grid-template-columns:1fr}
}

/* --- Noël : correctifs de mise en page ------------------------------- */
/* section « votre vitrine travaille… » : texte + photo côte à côte */
.noel-prob{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);
  align-items:stretch}
.noel-prob__txt{display:flex;flex-direction:column}
.noel-prob__txt h2{max-width:16ch}
.noel-prob .noel-intro{margin-top:var(--gap-title);max-width:none}
.noel-prob__im{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  min-height:320px;background:var(--cream-2)}
.noel-prob__im img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}

/* les 3 cartes d'offre : hauteur identique, prix et bouton alignés en bas */
.noel-grid{align-items:stretch}
.noel-offre{display:flex;flex-direction:column}
.noel-offre ul{flex:1 0 auto}
.noel-offre__prix{margin-top:auto}
.noel-offre__cta{margin-top:1.2rem;width:100%;justify-content:center}

/* le fond crème s'arrêtait au ras du titre suivant : on aère des deux côtés */
/* .noel-offres / .noel-tarifs : on laisse le rembourrage de .sec s'appliquer */

/* rangées de boutons semées dans la page */
.noel-cta-row{display:flex;flex-wrap:wrap;gap:clamp(14px,1.6vw,24px);align-items:center;
  margin-top:var(--gap-title)}
.noel-cta-row--center{justify-content:center}
.noel-cta-tel{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase}
.noel-rare .noel-cta-row{margin-top:clamp(26px,3vw,40px)}

/* dernier appel : tout centré, bouton plus large */
.cta--noel{text-align:center}
.cta--noel .wrap{max-width:1180px}
.cta--noel h2{max-width:26ch;margin-inline:auto;text-wrap:balance}
.cta--noel .lead{max-width:52ch;margin-inline:auto}
.cta--noel .cta__row{justify-content:center}
.btn--xl{padding:1.15rem 2.4rem;font-size:var(--fs-sm)}
.cta__tel{margin-top:1.1rem;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em}

@media(max-width:980px){
  .noel-prob{grid-template-columns:1fr}
  .noel-prob__im{aspect-ratio:4/3;height:auto;min-height:0}
}

/* bouton pleine largeur des cartes d'offre : centrage garanti quel que soit
   le display hérité de .btn */
.noel-offre__cta{display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;width:100%;text-align:center}

/* --- Noël : rythme vertical unifié ----------------------------------
   Règle : un séparateur = un seul blanc. Une section sans fond ne pose
   pas de marge basse devant une bande colorée (la bande apporte la
   sienne), et reprend une marge haute juste après une bande.          */
.sec--flush-top{padding-top:0}
.sec--flush-bottom{padding-bottom:0}

/* --- Noël : bloc avis ----------------------------------------------- */
.noel-avis__grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,26px);margin-top:var(--gap-title);align-items:stretch}
.noel-avis__q{display:flex;flex-direction:column;background:var(--white);
  border-radius:var(--r);padding:clamp(22px,2.6vw,36px)}
.noel-avis__q blockquote{margin:0;flex:1 0 auto;font-size:var(--fs-sm);line-height:1.55}
.noel-avis__q figcaption{margin-top:1.4rem;padding-top:1.1rem;
  border-top:1px solid rgba(18,18,15,.14)}
.noel-avis__nom{display:block;font-weight:700;font-size:var(--fs-sm)}
.noel-avis__meta{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-top:.35rem;line-height:1.5}
.noel-avis__et{display:flex;gap:.18rem;margin-bottom:.9rem;color:var(--blue);
  font-size:.86rem;letter-spacing:.14em}
.noel-avis__lien{display:inline-block;margin-top:.8rem;font-family:var(--mono);
  font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.noel-avis__lien .arw{display:inline-block;transition:transform .4s var(--ease)}
.noel-avis__lien:hover .arw{transform:translateX(4px)}
@media(max-width:980px){.noel-avis__grid{grid-template-columns:1fr}}