/* =============================================================
   Alexandre Colas — landing page
   Palette échantillonnée directement dans le portrait :
   le fond du studio, le blanc de la chemise, le bleu de la veste.
   ============================================================= */

:root{
  /* Fond du studio (portrait) */
  --taupe-hi:#d2c1b1;
  --taupe:#b09c89;
  --taupe-lo:#85705c;

  /* Chemise */
  --bone:#e9e3d9;
  --bone-hi:#f4f0e9;

  /* Veste */
  --navy:#0d1728;
  --navy-2:#16233a;
  --navy-3:#25344f;

  --ink:#101b2e;
  --ink-soft:#3d4a5e;
  --sand:#c3b5a4;

  --line-dark:rgba(16,27,46,.16);
  --line-light:rgba(233,227,217,.16);

  --shell:1200px;
  --gutter:clamp(1.25rem,4vw,3.5rem);

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter Tight",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;line-height:1.05;letter-spacing:-.02em}

a{color:inherit}

::selection{background:var(--navy);color:var(--bone-hi)}

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--bone-hi);
  padding:.75rem 1.25rem;font-size:.9rem;
}
.skip:focus{left:0}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
  border-radius:2px;
}
.section--navy :where(a,button):focus-visible,
.site-footer :where(a,button):focus-visible{outline-color:var(--bone-hi)}

/* ── Grain partagé : c'est lui qui fait disparaître la frontière
      entre la photo et le fond en CSS. ───────────────────────── */
.grain::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.42;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =============================================================
   EN-TÊTE
   ============================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  min-height:82px;
}

.wordmark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.02rem;
  letter-spacing:-.01em;
  text-decoration:none;
  line-height:1.2;
  display:flex;align-items:center;gap:.7rem;
}
/* Le monogramme AC : la barre du A est une piqûre de couture. */
.wordmark__mark{width:46px;height:46px;flex:none;display:block}
.wordmark__text{display:flex;flex-direction:column}
.wordmark__role{
  font-family:var(--font-mono);
  font-weight:400;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.62;
  margin-top:.25rem;
}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a{
  text-decoration:none;
  font-size:.94rem;
  font-weight:500;
  padding-block:.4rem;
  position:relative;
}
.nav a:not(.nav__cta)::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.nav a:not(.nav__cta):hover::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  border:1px solid currentColor;
  border-radius:999px;
  padding:.45rem 1.1rem;
  transition:background-color .25s var(--ease),color .25s var(--ease);
}
.nav__cta:hover{background:var(--ink);color:var(--bone-hi);border-color:var(--ink)}

/* état après défilement : barre marine, toujours lisible */
.site-header.is-stuck,
.site-header:has(.nav.is-open){
  background:rgba(13,23,40,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:var(--bone-hi);
  box-shadow:0 1px 0 var(--line-light);
}
.site-header.is-stuck .nav__cta:hover{background:var(--bone-hi);color:var(--navy);border-color:var(--bone-hi)}

.burger{display:none}

/* =============================================================
   HERO
   ============================================================= */
.hero{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  display:flex;align-items:center;
  margin-top:-82px;padding-top:82px;
  overflow:hidden;
  /* le dégradé prolonge l'éclairage du studio présent sur la photo */
  background:
    radial-gradient(122% 100% at 70% 34%,
      var(--taupe-hi) 0%,
      #c6b3a2 30%,
      var(--taupe) 60%,
      #96826f 84%,
      var(--taupe-lo) 100%);
}

.hero__media{
  position:absolute;
  right:0;bottom:0;top:0;
  width:min(48vw,660px);
  z-index:-1;
}
/* <picture> est « inline » par défaut : sans cette règle, le
   height:100% de l'image se mesurerait sur l'enveloppe au lieu du
   conteneur, et le portrait s'effondrerait. */
.hero__media picture{display:block;width:100%;height:100%}
.showcase__shot picture,.case__shot picture{display:block}

.hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:52% 12%;
  /* double masque : la photo se dissout de tous les côtés */
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000 30%,#000 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 12%,#000 84%,transparent 100%);
  mask-image:
    linear-gradient(to right,transparent 0,#000 30%,#000 93%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000 12%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

.hero__inner{position:relative;z-index:1;padding-block:clamp(4rem,10vh,7rem)}

/* Le texte occupe une colonne dont la largeur se calcule sur la part
   de photo qui déborde dans la grille : ils ne se croisent jamais.

   La condition de proportion compte autant que la largeur : sur un
   écran plus haut que large, la colonne de photo devient étroite et
   haute, et `cover` agrandit alors énormément le portrait pour la
   remplir. Sous 4/5, on repasse donc à la photo posée au-dessus. */
@media (min-width:761px) and (min-aspect-ratio:4/5){
  .hero__inner{
    display:grid;
    grid-template-columns:
      minmax(0,1fr)
      max(0px,
        min(var(--shell),100vw) / 2 - 50vw - var(--gutter)
        + min(33.6vw,462px)   /* 70 % de la photo : là où elle devient opaque */
        + 1.5rem);            /* respiration entre le texte et le visage */
    column-gap:clamp(1.5rem,3vw,3rem);
  }
  .hero__inner > *{grid-column:1}
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6rem;
  margin:0 0 1.6rem;
  color:var(--ink);
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--navy);
  box-shadow:0 0 0 4px rgba(13,23,40,.14);
}

.hero__title{
  font-weight:800;
  font-size:clamp(2.05rem,9.4vw,4.35rem);
  line-height:.94;
  letter-spacing:-.03em;
  margin:0 0 1.75rem;
}
.hero__title span{display:block}
.hero__title em{
  font-style:normal;
  color:var(--bone-hi);
  text-shadow:0 1px 24px rgba(16,27,46,.22);
}
@media (min-width:761px) and (min-aspect-ratio:4/5){
  .hero__title{font-size:clamp(2.15rem,4.4vw,3.9rem)}
}

.lede{
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  line-height:1.55;
  max-width:46ch;
  color:var(--ink-soft);
  margin:0 0 2.5rem;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:3.5rem}

.facts{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);
}
.facts li{display:flex;align-items:center;gap:.7rem}
.facts li::before{content:"";width:14px;height:1px;background:currentColor;opacity:.55}

/* =============================================================
   BOUTONS
   ============================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);
  font-size:.95rem;font-weight:600;
  text-decoration:none;
  padding:.95rem 1.7rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--solid{background:var(--navy);color:var(--bone-hi)}
.btn--solid:hover{background:var(--navy-2)}

.btn--ghost{border-color:rgba(16,27,46,.4);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(244,240,233,.35)}

.btn--full{width:100%}

/* =============================================================
   SECTIONS GÉNÉRIQUES
   ============================================================= */
.section{padding-block:clamp(5rem,11vw,8.5rem)}

/* L'en-tête est collant et haut de 82px : sans cette réserve, une
   ancre amène le haut de la section pile dessous, et son étiquette
   disparaît derrière la barre. */
.section[id],.hero[id]{scroll-margin-top:6rem}
.section--bone{background:var(--bone);color:var(--ink)}
.section--navy{background:var(--navy);color:var(--bone)}

.label{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 1.1rem;
  opacity:.62;
}

.section__title{
  font-size:clamp(1.85rem,1.2rem + 2.4vw,3rem);
  max-width:20ch;
  margin:0 0 clamp(2.75rem,5vw,4rem);
}
.section--navy .section__title{letter-spacing:-.025em}

/* Un chapô sous le titre reprend l'espacement que portait le titre seul. */
.section__title:has(+ .section__lede){margin-bottom:1.4rem}
.section__lede{margin-bottom:clamp(2.75rem,5vw,4rem);max-width:56ch}

/* =============================================================
   DERNIÈRE RÉALISATION (accueil)
   ============================================================= */
.showcase__inner{
  display:grid;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:center;
}
@media (min-width:900px){
  .showcase__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
}
.showcase .section__title{
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.25rem);
  max-width:18ch;
  color:var(--bone-hi);
  margin-bottom:1.25rem;
}
.showcase .lede{margin-bottom:1.75rem;max-width:38ch}

.showcase__shot{
  display:block;
  border-radius:6px;
  overflow:hidden;
  background:var(--bone-hi);
  box-shadow:0 2px 4px rgba(0,0,0,.2),0 26px 60px -22px rgba(0,0,0,.65);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.showcase__shot img{width:100%;height:auto}
.showcase__shot:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(0,0,0,.2),0 34px 70px -22px rgba(0,0,0,.75);
}
@media (prefers-reduced-motion:reduce){
  .showcase__shot:hover{transform:none}
}

/* =============================================================
   SERVICES
   ============================================================= */
/* Une liste à filets plutôt que des colonnes : elle accueille
   autant de prestations que nécessaire sans les écraser. */
.offer{border-top:1px solid var(--line-dark)}
.offer__item{
  display:grid;
  gap:.6rem;
  padding:1.85rem 0;
  border-bottom:1px solid var(--line-dark);
}
@media (min-width:760px){
  .offer__item{
    grid-template-columns:minmax(0,16rem) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,3.5rem);
    align-items:baseline;
  }
}
.offer__item h3{font-size:1.3rem;font-weight:600;margin:0}
.offer__item p{margin:0;color:var(--ink-soft);max-width:58ch}
.offer__item .link-out{margin-top:.9rem}
@media (min-width:760px){.offer__item .link-out{grid-column:2}}

/* =============================================================
   À PROPOS
   Le taupe du hero revient ici, et nulle part ailleurs : c'est le
   fond du studio du portrait, donc la couleur des deux seuls
   moments où la page parle de la personne. Dégradé volontairement
   plus plat qu'au hero, pour ne pas passer pour un second hero.
   ============================================================= */
.about{
  position:relative;
  isolation:isolate;
  color:var(--ink);
  background:linear-gradient(158deg,#cbb9a8 0%,var(--taupe) 58%,#9c8975 100%);
}

.about__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
@media (min-width:900px){
  .about__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    column-gap:clamp(3rem,6vw,5.5rem);
  }
  .about__intro{position:sticky;top:7rem;align-self:start}
}

.about__intro .section__title{max-width:15ch;margin-bottom:0}

.about__text p{margin:0;color:var(--ink-soft);max-width:60ch}
.about__text p + p{margin-top:1.15rem}

/* Le passage personnel change de registre : un filet le sépare du
   propos professionnel plutôt qu'un simple retour à la ligne. */
.about__text .about__aside{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-dark);
  font-size:.96rem;
}

/* =============================================================
   MÉTHODE
   ============================================================= */
.steps{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,3.2vw,2.75rem);
}
@media (min-width:620px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;padding-top:1.6rem;border-top:1px solid var(--line-light)}
.step__num{
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.14em;
  color:var(--sand);
  display:block;margin-bottom:1.1rem;
}
.step h3{font-size:1.2rem;font-weight:600;margin-bottom:.7rem;color:var(--bone-hi)}
.step p{margin:0;color:rgba(233,227,217,.68);font-size:.98rem}

/* =============================================================
   CONTACT
   ============================================================= */
.contact{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
@media (min-width:900px){
  .contact{grid-template-columns:1fr 1fr}
}
.contact .section__title{margin-bottom:1.5rem}
.contact .lede{margin-bottom:2.5rem}

.contact__details{margin:0;display:grid;gap:1.4rem}
.contact__details dt{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin-bottom:.3rem;
}
.contact__details dd{margin:0;font-size:1.02rem}
.contact__details a{text-decoration:none;border-bottom:1px solid var(--line-dark);padding-bottom:1px}
.contact__details a:hover{border-color:var(--ink)}

.form{display:grid;gap:1.35rem}
.field{display:grid;gap:.45rem}
.field label{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.7;
}
.field input,
.field select,
.field textarea{
  font-family:var(--font-body);
  font-size:1rem;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-dark);
  padding:.7rem .1rem;
  width:100%;
  transition:border-color .25s var(--ease);
}
.field textarea{resize:vertical;line-height:1.55}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23101b2e' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .3rem center;
  padding-right:1.75rem;
  border-radius:0;
}
.field input:hover,
.field textarea:hover,
.field select:hover{border-color:rgba(16,27,46,.45)}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:none;border-color:var(--navy);border-bottom-width:2px;padding-bottom:calc(.7rem - 1px)}
.field input::placeholder,
.field textarea::placeholder{color:rgba(61,74,94,.5)}

.field__error{
  margin:0;
  font-size:.85rem;
  color:#8c2f26;
}
.field.is-invalid input,
.field.is-invalid textarea{border-color:#8c2f26}

/* Piège à robots : hors écran plutôt que display:none, que certains
   robots savent détecter et contourner. */
.pot-de-miel{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.form__legal{
  margin:0;font-size:.82rem;line-height:1.5;
  color:var(--ink-soft);opacity:.8;
}
.form__legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

.form__status{margin:0;font-size:.92rem;min-height:1.4em}
.form__status.is-ok{color:var(--navy);font-weight:500}
.form__status.is-error{color:#8c2f26}

.btn--full{margin-top:.5rem}

/* =============================================================
   PIED DE PAGE
   ============================================================= */
.site-footer{background:var(--navy);color:var(--bone);padding-block:4rem 2.25rem;border-top:1px solid var(--line-light)}
.site-footer__inner{display:grid;gap:2.75rem 3rem}
@media (min-width:760px){
  .site-footer__inner{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start}
}

.site-footer__brand{max-width:34ch}
.site-footer__logo{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;color:inherit;
  font-family:var(--font-display);font-weight:800;font-size:1.02rem;
}
.site-footer__mark{width:1.9rem;height:1.9rem;flex:none;color:var(--taupe-hi)}
.site-footer__baseline{
  margin:.9rem 0 0;font-size:.9rem;line-height:1.6;opacity:.62;
}

.site-footer__cols{display:grid;gap:2rem 1.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){
  .site-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.site-footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;font-size:.92rem}
.site-footer__title{
  margin:0 0 .35rem;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--taupe-hi);opacity:.85;
}
.site-footer__col a{text-decoration:none;opacity:.75;transition:opacity .2s var(--ease)}
.site-footer__col a:hover,.site-footer__col a[aria-current="page"]{opacity:1}
.site-footer__zone{margin:0;font-size:.9rem;opacity:.5}

.site-footer__legal{
  grid-column:1/-1;margin:0;
  padding-top:1.75rem;border-top:1px solid var(--line-light);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  opacity:.5;
}

/* =============================================================
   PAGE PORTFOLIO
   ============================================================= */
.section--navy .lede{color:rgba(233,227,217,.7)}
.section--navy .btn--solid{background:var(--bone-hi);color:var(--navy)}
.section--navy .btn--solid:hover{background:#fff}
.section--navy .btn--ghost{border-color:var(--line-light);color:var(--bone-hi)}
.section--navy .btn--ghost:hover{border-color:var(--bone-hi);background:rgba(233,227,217,.08)}

.page-head{padding-bottom:clamp(4.5rem,9vw,7rem)}
.page-head .section__title{max-width:22ch;color:var(--bone-hi);margin-bottom:1.5rem}

.case{padding-top:clamp(3.5rem,7vw,6rem)}
.case__shot{
  margin:0 0 clamp(3rem,6vw,5rem);
  border-radius:6px;
  overflow:hidden;
  background:var(--bone-hi);
  box-shadow:0 2px 4px rgba(13,23,40,.06),0 24px 60px -20px rgba(13,23,40,.35);
}
.case__shot img{width:100%;height:auto}

.case__body{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){
  .case__body{
    grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
    column-gap:clamp(3rem,6vw,6rem);
  }
  .case__intro{grid-column:1 / -1}
  .case__text{grid-column:1}
  .case__meta{grid-column:2;position:sticky;top:7rem;align-self:start}
}

.case__intro .section__title{max-width:24ch;margin-bottom:1.25rem}
.case__intro .lede{margin-bottom:1.5rem}

.case__status{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--taupe-lo);
  border:1px solid var(--taupe);
  border-radius:999px;
  padding:.35rem .85rem;
  margin:0 0 1rem;
}

/* Projet de démonstration, sans client réel. Le badge est plein plutôt
   qu'en contour : il doit se lire au premier coup d'œil et ne jamais être
   confondu avec « projet en cours », qui désigne un vrai client. */
.case__status--demo{
  color:var(--bone-hi);
  background:var(--taupe-lo);
  border-color:var(--taupe-lo);
}

.case:has(+ .case-divider){padding-bottom:0}
.case-divider + .case{padding-top:0}
.case-divider{
  display:flex;align-items:center;justify-content:center;gap:1.5rem;
  padding:clamp(3rem,6vw,4.5rem) var(--gutter);
}
.case-divider::before,.case-divider::after{content:"";flex:1;max-width:280px;height:1px;background:var(--line-dark)}
.case-divider span{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.7;white-space:nowrap;
}

.link-out{
  display:inline-flex;align-items:baseline;gap:.5rem;
  font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--line-dark);
  transition:border-color .25s var(--ease),gap .25s var(--ease);
}
.link-out:hover{border-color:var(--ink);gap:.8rem}
.section--navy .link-out{color:var(--bone-hi);border-color:var(--line-light)}
.section--navy .link-out:hover{border-color:var(--bone-hi)}

.case__text h3{
  font-size:1.15rem;font-weight:600;
  margin:2.5rem 0 .85rem;
}
.case__text h3:first-child{margin-top:0}
.case__text p{margin:0;color:var(--ink-soft);max-width:62ch}

.case__list{
  list-style:none;margin:0;padding:0;max-width:62ch;
  border-top:1px solid var(--line-dark);
}
.case__list li{
  padding:.85rem 0 .85rem 1.6rem;
  border-bottom:1px solid var(--line-dark);
  color:var(--ink-soft);
  position:relative;
}
.case__list li::before{
  content:"";position:absolute;left:0;top:1.55em;
  width:10px;height:1px;background:var(--ink);opacity:.45;
}

.case__meta{
  margin:0;display:grid;gap:1.4rem;
  padding-top:1.75rem;
  border-top:1px solid var(--line-dark);
}
.case__meta dt{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin-bottom:.35rem;
}
.case__meta dd{margin:0;font-size:.98rem;line-height:1.45}

/* ── Grille des réalisations ──────────────────────────────────
   La page portfolio ne déplie plus les études de cas : elle les
   annonce. Chaque carte mène à sa propre page. */
.work-grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem) clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* La carte entière est cliquable : le lien du titre s'étend sur la
   carte grâce au ::after ci-dessous. Un seul lien, donc une seule
   destination — les liens externes restent sur la page d'étude. */
.work-card{
  position:relative;display:flex;flex-direction:column;
  padding-top:1.5rem;border-top:1px solid var(--line-dark);
}
.work-card__shot{
  margin:0 0 1.5rem;border-radius:6px;overflow:hidden;background:var(--bone-hi);
  box-shadow:0 2px 4px rgba(13,23,40,.06),0 18px 44px -18px rgba(13,23,40,.32);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.work-card__shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.work-card:hover .work-card__shot{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(13,23,40,.08),0 28px 58px -18px rgba(13,23,40,.4);
}
@media (prefers-reduced-motion:reduce){.work-card:hover .work-card__shot{transform:none}}

.work-card .case__status{margin-bottom:.9rem;align-self:start}
.work-card h2{font-size:clamp(1.3rem,1.05rem + .9vw,1.65rem);margin:0 0 .7rem;max-width:22ch}
.work-card h2 a{text-decoration:none}
.work-card h2 a::after{content:"";position:absolute;inset:0}
.work-card h2 a:focus-visible{outline:none}
.work-card:has(a:focus-visible){outline:2px solid var(--ink);outline-offset:8px}
.work-card__lede{margin:0 0 1.5rem;color:var(--ink-soft);max-width:44ch}
.work-card__more{
  margin:auto 0 0;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);
}
.work-card__more span{display:inline-block;transition:transform .25s var(--ease)}
.work-card:hover .work-card__more span{transform:translateX(.35rem)}

/* ── Page d'étude de cas ──────────────────────────────────────── */
.page-head .label a{color:inherit}
.page-head .case__status{margin-top:.25rem}
.section--navy .case__status{color:var(--bone-hi);border-color:var(--line-light)}
.section--navy .case__status--demo{background:var(--taupe-lo);border-color:var(--taupe-lo)}

.case-nav{
  display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:baseline;
  margin-top:clamp(3rem,6vw,4.5rem);
  padding-top:1.75rem;border-top:1px solid var(--line-dark);
}
.case-nav p{margin:0}
.case-nav__all{flex:1 1 100%}
.case-nav__next{margin-left:auto;text-align:right}
.case-nav__prev span,.case-nav__next span{
  display:block;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.6;margin-bottom:.25rem;
}
.case-nav__prev a,.case-nav__next a{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  text-decoration:none;border-bottom:1px solid var(--line-dark);
  transition:border-color .25s var(--ease);
}
.case-nav__prev a:hover,.case-nav__next a:hover{border-color:var(--ink)}

/* =============================================================
   PAGE MENTIONS LÉGALES
   ============================================================= */
.legal__date{
  font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(233,227,217,.55);
  margin:1.75rem 0 0;
}

.legal__grid{display:grid;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:900px){
  .legal__grid{
    grid-template-columns:minmax(0,15rem) minmax(0,1fr);
    column-gap:clamp(3rem,6vw,5.5rem);
  }
  .legal__toc{position:sticky;top:7rem;align-self:start}
}

.legal__toc ol{
  list-style:none;margin:0;padding:0;
  counter-reset:toc;
  border-top:1px solid var(--line-dark);
}
.legal__toc li{counter-increment:toc;border-bottom:1px solid var(--line-dark)}
.legal__toc a{
  display:flex;gap:.75rem;
  padding:.7rem 0;
  font-size:.92rem;
  text-decoration:none;color:var(--ink-soft);
  transition:color .2s var(--ease);
}
.legal__toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--font-mono);font-size:.66rem;
  opacity:.5;padding-top:.2em;
}
.legal__toc a:hover{color:var(--ink)}

.legal__body > section + section{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  padding-top:clamp(2.5rem,4vw,3.5rem);
  border-top:1px solid var(--line-dark);
}
.legal__body h2{
  font-size:clamp(1.25rem,1.05rem + .6vw,1.55rem);
  font-weight:600;
  margin-bottom:1.1rem;
  scroll-margin-top:7rem;
}
.legal__body section{scroll-margin-top:7rem}
.legal__body p{margin:0 0 1rem;color:var(--ink-soft);max-width:64ch}
.legal__body p:last-child{margin-bottom:0}
.legal__body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-dark);transition:text-decoration-color .2s var(--ease)}
.legal__body a:hover{text-decoration-color:var(--ink)}
.legal__body strong{color:var(--ink);font-weight:600}

.legal__list{
  margin:0 0 1.25rem;
  display:grid;gap:0;
  border-top:1px solid var(--line-dark);
  max-width:64ch;
}
.legal__list > div{
  display:grid;gap:.15rem .5rem;
  padding:.8rem 0;
  border-bottom:1px solid var(--line-dark);
}
@media (min-width:620px){
  .legal__list > div{grid-template-columns:13rem minmax(0,1fr);align-items:baseline}
}
.legal__list dt{
  font-family:var(--font-mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.6;
}
.legal__list dd{margin:0;color:var(--ink-soft)}

.legal__note{
  background:rgba(244,240,233,.75);
  border-left:2px solid rgba(185,138,26,.6);
  padding:1rem 1.25rem;
  font-size:.94rem;
}

/* Emplacement à compléter — volontairement voyant tant qu'il reste. */
.todo{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.05em;
  background:#f7e4bc;color:#6b4a05;
  border:1px dashed #b98a1a;
  border-radius:3px;
  padding:.05rem .5rem;
  white-space:nowrap;
}

/* =============================================================
   PAGE 404
   ============================================================= */
.notfound{
  min-height:100svh;
  display:flex;align-items:center;
  background:var(--navy);color:var(--bone);
  margin-top:-82px;padding:calc(82px + clamp(4rem,9vw,7rem)) 0 clamp(4rem,9vw,7rem);
}
.notfound .section__title{
  color:var(--bone-hi);
  max-width:14ch;
  margin-bottom:1.5rem;
}
.notfound .lede{color:rgba(233,227,217,.7);margin-bottom:clamp(2.5rem,5vw,3.5rem)}

.notfound__links{
  list-style:none;margin:0;padding:0;
  border-top:1px solid var(--line-light);
  max-width:56rem;
}
.notfound__links li{
  display:grid;gap:.35rem;
  padding:1.4rem 0;
  border-bottom:1px solid var(--line-light);
}
@media (min-width:700px){
  .notfound__links li{
    grid-template-columns:minmax(0,12rem) minmax(0,1fr);
    column-gap:clamp(2rem,4vw,3.5rem);
    align-items:baseline;
  }
}
.notfound__links a{
  font-family:var(--font-display);
  font-weight:600;font-size:1.15rem;
  color:var(--bone-hi);
  text-decoration:none;
  position:relative;
  justify-self:start;
}
.notfound__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.2rem;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease);
}
.notfound__links a:hover::after{transform:scaleX(1);transform-origin:left}
.notfound__links span{color:rgba(233,227,217,.62);font-size:.96rem}

.next-up__inner{
  display:flex;flex-wrap:wrap;align-items:end;
  justify-content:space-between;gap:2.5rem;
}
.next-up .section__title{color:var(--bone-hi);margin-bottom:1.25rem;max-width:16ch}
.next-up .lede{margin:0;max-width:40ch}

/* =============================================================
   ANIMATIONS
   ============================================================= */
.reveal{opacity:0;transform:translateY(18px)}
.is-ready .reveal{
  animation:rise .85s var(--ease) forwards;
  animation-delay:calc(var(--d,0) * 90ms + 120ms);
}
@keyframes rise{to{opacity:1;transform:none}}

.hero__media img{
  opacity:0;
  transform:scale(1.05);
}
.is-ready .hero__media img{
  animation:settle 1.6s var(--ease) forwards;
}
@keyframes settle{to{opacity:1;transform:none}}

.watch{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.watch.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.is-ready .reveal,
  .hero__media img,.is-ready .hero__media img,
  .watch,.watch.is-visible{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .btn:hover{transform:none}
}

/* =============================================================
   MOBILE
   ============================================================= */
@media (max-width:860px){
  .burger{
    display:inline-flex;align-items:center;gap:.55rem;
    background:none;border:0;padding:.4rem 0;cursor:pointer;
    min-height:44px;              /* cible tactile : moins, on rate le bouton */
    color:inherit;font-family:var(--font-mono);
    font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  }
  /* Hauteurs et positions en pixels entiers : à 1,5px une barre
     tombe entre deux pixels et se dilue, l'autre s'aligne et reste
     nette — elles n'avaient plus le même poids à l'écran. */
  .burger__bars{
    width:20px;height:10px;position:relative;display:block;
  }
  .burger__bars::before,.burger__bars::after{
    content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
    transition:transform .3s var(--ease),top .3s var(--ease);
  }
  .burger__bars::before{top:0}
  .burger__bars::after{top:8px}
  .burger[aria-expanded="true"] .burger__bars::before{top:4px;transform:rotate(45deg)}
  .burger[aria-expanded="true"] .burger__bars::after{top:4px;transform:rotate(-45deg)}

  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;
    gap:0;
    background:var(--navy);color:var(--bone-hi);
    padding:0 var(--gutter);
    max-height:0;overflow:hidden;
    transition:max-height .4s var(--ease);
  }
  .nav.is-open{max-height:22rem;padding-block:.5rem 1.5rem}
  .nav a{width:100%;padding:.95rem 0;border-bottom:1px solid var(--line-light);font-size:1.05rem}
  .nav a:last-child{border-bottom:0}
  /* Bouton plein couleur os : en contour seul sur le marine du menu,
     on ne le distinguait pas des liens. */
  .nav a.nav__cta{
    background:var(--bone-hi);color:var(--navy);
    border:1px solid var(--bone-hi);border-radius:999px;
    margin-top:1rem;padding:.7rem 1.4rem;text-align:center;
  }
  .site-header .nav .nav__cta:hover{background:var(--bone);border-color:var(--bone);color:var(--navy)}
  .site-header__inner{position:relative}

  /* Voile sombre sous le menu ouvert : la page est « en pause », on
     comprend qu'un toucher à côté referme le menu. Il laisse passer
     les touchers, que main.js intercepte. */
  body::after{
    content:"";position:fixed;inset:0;z-index:40;
    background:rgba(13,23,40,.55);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .4s var(--ease),visibility 0s linear .4s;
  }
  body:has(.nav.is-open)::after{
    opacity:1;visibility:visible;
    transition:opacity .4s var(--ease),visibility 0s;
  }
}

/* Complément exact de la règle ci-dessus : téléphones, et tout
   écran en portrait, tablettes comprises. */
@media (max-width:760px),(max-aspect-ratio:4/5){
  .hero{
    display:block;
    min-height:0;
    padding-bottom:3.5rem;
    background:
      radial-gradient(120% 60% at 62% 16%,
        var(--taupe-hi) 0%,
        #c6b3a2 34%,
        var(--taupe) 66%,
        #96826f 100%);
  }
  /* Pleine largeur, sur la même verticale que le texte. C'est la
     proportion qui est pilotée, pas la hauteur : une bande large et
     courte réduirait le cadrage au front et aux yeux. */
  .hero__media{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1.1;
    height:auto;
    max-height:58vh;
    top:auto;bottom:auto;
    z-index:0;
    margin-bottom:-2.5rem;
  }
  .hero__media img{
    object-position:52% 8%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 62%,transparent 98%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 62%,transparent 98%);
    -webkit-mask-composite:source-over;
    mask-composite:add;
  }
  .hero__inner{padding-block:0}
  .hero__title{max-width:none}
  .hero__actions{margin-bottom:2.5rem}
  .btn{flex:1 1 auto}
  .facts{flex-direction:column;gap:.5rem}
}

/* Sur tablette, une bande aussi haute que sur téléphone occuperait
   presque tout l'écran avant le premier mot. La proportion s'élargit
   donc, sans jamais devenir assez plate pour couper le visage. */
@media (min-width:600px) and (max-width:760px),
       (min-width:600px) and (max-aspect-ratio:4/5){
  .hero__media{aspect-ratio:4 / 3}
  .hero__media img{
    /* Le portrait remonte et le fondu descend : sinon la dissolution
       commence sur la barbe au lieu du buste. */
    object-position:52% 18%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 74%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 74%,transparent 100%);
  }
}

/* ── Deux vues de plus par étude de cas ───────────────────────
   Le texte décrit des écrans qu'on ne voyait jamais : la carte de
   Brasa, la grille d'honoraires de Lexora, le curseur de Noverde.
   La légende dit ce qu'il faut regarder. */
.case__vues{
  margin:clamp(3rem,6vw,4.5rem) 0 0;
  display:grid;gap:clamp(2rem,4vw,3rem);
  grid-template-columns:1fr;
}
@media (min-width:820px){.case__vues{grid-template-columns:repeat(2,minmax(0,1fr))}}

.case__vue{margin:0}
.case__vue img{
  width:100%;height:auto;border-radius:6px;
  background:var(--bone-hi);
  box-shadow:0 2px 4px rgba(13,23,40,.06),0 18px 44px -18px rgba(13,23,40,.32);
}
.case__vue figcaption{
  margin-top:1rem;
  color:var(--ink-soft);font-size:.94rem;line-height:1.5;
  padding-left:1.6rem;position:relative;
}
.case__vue figcaption::before{
  content:"";position:absolute;left:0;top:.72em;
  width:10px;height:1px;background:var(--ink);opacity:.45;
}