/* ══════════════════════════════════════════════════════════════
   adelzemiti.com — papier technique
   Jade profond sur papier clair. Instrument Serif × IBM Plex.
   ══════════════════════════════════════════════════════════════ */

:root{
  --paper:    #f2f5f4;
  --paper-2:  #e9efee;
  --white:    #ffffff;
  --screen:   #f7fbfa;

  --ink:      #0a1e20;
  --ink-2:    #16383a;
  --muted:    #5a6d6e;
  --faint:    #647877;   /* 4.7:1 sur blanc — lisible en 10-11px */

  --jade:     #067a6e;
  --jade-lit: #0fbfa9;
  --jade-dk:  #04564e;
  --cyan:     #00a2c2;
  --rose:     #c33d47;

  --line:     rgba(10,30,32,.13);
  --line-2:   rgba(10,30,32,.07);

  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans:  "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --sh-sm: 0 1px 2px rgba(10,30,32,.05);
  --sh-md: 0 1px 2px rgba(10,30,32,.05), 0 10px 26px -12px rgba(10,30,32,.18);
  --sh-lg: 0 1px 3px rgba(10,30,32,.06), 0 28px 60px -26px rgba(6,122,110,.34);

  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1320px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:
    radial-gradient(900px 560px at 82% -10%, rgba(15,191,169,.12), transparent 62%),
    radial-gradient(700px 460px at 2% 8%,  rgba(0,162,194,.08), transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── texture : grille millimétrée + grain papier ─────────── */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(rgba(10,30,32,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,30,32,.028) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(150% 115% at 50% -5%, #000 8%, transparent 88%);
}
.vignette{
  position:fixed; inset:-50%; z-index:2; pointer-events:none;
  opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .nav, .foot{ position:relative; z-index:3; }

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px var(--gut);
  backdrop-filter:blur(14px) saturate(1.4);
  background:rgba(242,245,244,.82);
  border-bottom:1px solid var(--line-2);
}
.nav__mark{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  color:var(--ink); text-decoration:none; text-transform:uppercase;
}
.nav__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--jade-lit); box-shadow:0 0 0 3px rgba(15,191,169,.2);
}
.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a{
  font-size:13.5px; color:var(--muted); text-decoration:none;
  transition:color .22s ease;
}
.nav__links a:hover{ color:var(--jade); }
.nav__cta{
  padding:7px 15px; border:1px solid var(--line);
  border-radius:2px; color:var(--ink) !important; background:var(--white);
  box-shadow:var(--sh-sm);
}
.nav__cta:hover{ border-color:var(--jade); color:var(--jade) !important; }

.nav__lang{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  padding:6px 9px; border:1px solid var(--line-2); border-radius:2px;
  color:var(--muted) !important;
}
.nav__lang:hover{ color:var(--jade) !important; border-color:var(--jade); }

/* Le sélecteur de langue survit au repli mobile — c'est la seule
   entrée de nav qu'un visiteur anglophone doit pouvoir trouver. */
@media (max-width:820px){
  .nav__links a:not(.nav__cta):not(.nav__lang){ display:none; }
}

/* ── reveal ──────────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(16px);
  animation:rise .85s cubic-bezier(.2,.7,.25,1) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; animation:none; }
}

/* ══ HERO — identité ═════════════════════════════════════ */
.hero{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(56px,9vw,120px) var(--gut) clamp(48px,7vw,88px);
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  gap:clamp(30px,5vw,76px); align-items:center;
}
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; gap:34px; }
}

/* ── portrait ────────────────────────────────────────────
   Photo N&B sur fond sombre : on l'assume comme bloc de
   contraste plutôt que de la détourer. Filet jade en tête
   (écho au bezel de la console) + duotone très léger pour
   l'accorder à la palette sans virer au filtre Instagram. */
.portrait{ margin:0; width:100%; max-width:390px; justify-self:end; }
/* Sous 960px la contrainte de largeur passe sur le cadre seul :
   sinon la légende hérite des 184px du portrait et casse en deux lignes. */
@media (max-width:960px){
  .portrait{ order:-1; max-width:none; justify-self:start; }
  .portrait__frame{ max-width:184px; }
}

.portrait__frame{
  position:relative; overflow:hidden;
  border-radius:6px;
  border:1px solid var(--line); border-top:3px solid var(--jade);
  background:var(--ink);
  /* Ombre neutre : une ombre teintée jade reproduisait le halo vert
     que le voile posait sur la photo. */
  box-shadow:
    0 1px 3px rgba(10,30,32,.08),
    0 34px 64px -26px rgba(10,30,32,.42);
}
/* La photo est livrée telle quelle : elle est déjà en noir et blanc,
   un grayscale() serait redondant et un voile teinté la dénaturait. */
.portrait__frame img{
  display:block; width:100%; height:auto;
}

.portrait figcaption{
  display:flex; align-items:center; justify-content:flex-end; gap:9px;
  margin-top:13px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}
.portrait figcaption::before{
  content:""; width:18px; height:1px; background:var(--jade-lit); flex:none;
}
@media (max-width:960px){
  .portrait figcaption{ justify-content:flex-start; font-size:9.5px; white-space:nowrap; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 26px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--jade);
}
.eyebrow__led{
  width:6px; height:6px; border-radius:50%; background:var(--jade-lit);
  box-shadow:0 0 0 3px rgba(15,191,169,.22);
  animation:blink 2.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.3} }

h1{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(52px,8vw,116px); line-height:.92;
  letter-spacing:-.02em; color:var(--ink);
}

.hero__tag{
  margin:0 0 30px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3.6vw,48px); line-height:1.12;
  letter-spacing:-.01em; color:var(--ink-2); max-width:28ch;
}
.hero__tag em{ font-style:italic; color:var(--jade); }

.lede{
  margin:0 0 16px; max-width:56ch;
  font-size:clamp(16px,1.35vw,18px); color:var(--ink-2); line-height:1.66;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.btn--lg{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:15px; font-weight:500;
  padding:14px 26px; border-radius:4px; cursor:pointer;
  text-decoration:none; transition:all .22s ease;
}
.btn--lg:active{ transform:translateY(1px); }
.btn--lg:focus-visible{ outline:2px solid var(--jade); outline-offset:2px; }
.btn--lg-primary{
  background:var(--jade); color:var(--white); border:1px solid var(--jade);
  box-shadow:0 6px 20px -8px rgba(6,122,110,.7);
}
.btn--lg-primary:hover{ background:var(--jade-dk); border-color:var(--jade-dk); }
.btn--lg-ghost{
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.btn--lg-ghost:hover{ border-color:var(--jade); color:var(--jade); }

.stack{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; padding:0; margin:30px 0 0;
}
.stack li{
  font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
  padding:6px 11px; border:1px solid var(--line-2); border-radius:2px;
  background:var(--white); box-shadow:var(--sh-sm);
}

/* ══ CONSOLE (section spécialité) ════════════════════════ */
.console{ max-width:960px; }

/* sous-titre de bande + intertitre */
.band__sub{
  margin:10px 0 0; max-width:56ch;
  font-size:15.5px; color:var(--muted); line-height:1.65;
}
h3.sub{
  margin:clamp(40px,5vw,64px) 0 6px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.6vw,30px); line-height:1.15; color:var(--ink);
}

/* ══ CONSOLE ═════════════════════════════════════════════ */
.console__bezel{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:clamp(18px,2.4vw,26px);
  box-shadow:var(--sh-lg);
}
.console__bezel::before{
  content:""; position:absolute; inset:0; border-radius:8px;
  border-top:3px solid var(--jade); pointer-events:none;
}

.console__head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px solid var(--line-2);
}
.console__spacer{ flex:1; }
.console__title{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); font-weight:500;
}
.led{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:#c3d0cf; transition:background .3s ease, box-shadow .3s ease;
}
.led[data-state="idle"]{ background:#9db6b3; }
.led[data-state="live"]{
  background:var(--jade-lit);
  box-shadow:0 0 0 4px rgba(15,191,169,.24);
  animation:blink 1.1s ease-in-out infinite;
}
.led[data-state="wait"]{
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,162,194,.2);
  animation:blink .7s ease-in-out infinite;
}
.readout{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint);
  display:inline-flex; gap:7px; align-items:baseline;
}
.readout b{ font-weight:400; }
.readout i{ font-style:normal; color:var(--jade); font-weight:500; }

.wave{
  display:block; width:100%; height:132px;
  border-radius:4px;
  background:
    repeating-linear-gradient(to right, rgba(6,122,110,.07) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(to bottom, rgba(6,122,110,.05) 0 1px, transparent 1px 33px),
    var(--screen);
  border:1px solid var(--line-2);
}

.console__script{
  margin-top:14px; padding:13px 15px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:4px;
  border-left:2px solid var(--jade);
}
.console__scriptLabel{
  display:block; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  margin-bottom:7px;
}
.console__script p{
  margin:0; font-family:var(--serif); font-size:19px; line-height:1.4;
  color:var(--ink); font-style:italic;
  transition:opacity .28s ease;
}
.console__script p.is-swapping{ opacity:0; }

.verticals{ border:0; padding:0; margin:18px 0 0; }
.verticals legend{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint); padding:0; margin-bottom:9px;
}
.verticals__row{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:13px; color:var(--muted);
  background:var(--paper);
  border:1px solid var(--line); border-radius:2px;
  padding:8px 13px; cursor:pointer;
  transition:all .2s ease;
}
.chip:hover{ color:var(--jade); border-color:var(--jade); background:var(--white); }
.chip.is-active{
  color:var(--white); background:var(--jade); border-color:var(--jade);
  font-weight:500; box-shadow:0 4px 14px -6px rgba(6,122,110,.6);
}
.chip:focus-visible{ outline:2px solid var(--jade); outline-offset:2px; }

/* Aidel : le « i » en jade, comme le « qui tiennent » du hero.
   Le libellé est enveloppé dans un <span> côté HTML : sans ça, le
   gap du flex s'applique entre « A », « i » et « del », et le nom
   s'affiche « A i del ». */
.chip--aidel em{ font-style:normal; color:var(--jade-lit); font-weight:600; }
.chip--aidel.is-active em{ color:#bff5ec; }

/* ── formulaire d'accès à la démo ────────────────────────── */
.gate{ margin-top:18px; }
.gate__intro{
  margin:0 0 14px; font-size:14.5px; line-height:1.6; color:var(--muted);
}
.gate__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media (max-width:620px){ .gate__grid{ grid-template-columns:1fr; } }
.gate__wide{ grid-column:1 / -1; }

.gate label{ display:flex; flex-direction:column; gap:5px; }
/* Restreint aux étiquettes de la grille : sans `.gate__grid`, la
   phrase de consentement héritait de ce style et s'affichait en
   capitales monospace. Un consentement doit se lire normalement. */
.gate__grid label > span{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint);
}
.gate input[type="text"], .gate input:not([type]),
.gate input[type="email"], .gate input[type="tel"]{
  font-family:var(--sans); font-size:14.5px;
  padding:10px 12px; width:100%;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:4px;
}
.gate input:focus{
  outline:none; border-color:var(--jade); background:var(--white);
  box-shadow:0 0 0 3px rgba(15,191,169,.16);
}
.gate input[aria-invalid="true"]{ border-color:var(--rose); background:#fff6f6; }

/* ── champ téléphone avec indicatif ─────────────────────────
   Le select et l'input partagent une seule bordure : deux cadres
   côte à côte casseraient l'alignement de la grille. */
.tel{
  display:flex; align-items:stretch; width:100%;
  border:1px solid var(--line); border-radius:4px;
  background:var(--paper); overflow:hidden;
}
.tel:focus-within{
  border-color:var(--jade); background:var(--white);
  box-shadow:0 0 0 3px rgba(15,191,169,.16);
}
.tel__code{
  flex:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:13px; color:var(--ink);
  padding:0 8px 0 11px; border-right:1px solid var(--line-2);
}
.tel__code:focus{ outline:none; }
.tel input{
  flex:1; min-width:0;
  border:0 !important; background:transparent !important;
  box-shadow:none !important; border-radius:0 !important;
}
.tel input:focus{ outline:none; box-shadow:none !important; }
.tel:has(input[aria-invalid="true"]){ border-color:var(--rose); background:#fff6f6; }

/* Dans la console, le champ vit dans une colonne étroite. */
.callback .tel{ background:var(--paper); }

/* Pot de miel : invisible pour l'humain, mais pas display:none —
   certains robots ignorent les champs masqués de cette façon. */
.gate__hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

.gate__consent{
  flex-direction:row !important; align-items:flex-start; gap:9px;
  margin-top:14px; font-size:13px; line-height:1.55; color:var(--muted);
}
.gate__consent input{ margin-top:2px; flex:none; accent-color:var(--jade); }
.gate__consent a{ color:var(--jade); }
.gate__consent.is-missing{ color:var(--rose); }
.gate__consent.is-missing a{ color:var(--rose); }

.btn--gate{ width:100%; margin-top:16px; min-height:0; padding:13px 18px; }

/* Les CTA restent masqués tant que le formulaire n'est pas validé.
   Le vrai contrôle est côté serveur : /api/session exige le jeton. */
.console__actions.is-locked{ display:none; }

.console__actions{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px;
}
/* Tant que le rappel Twilio n'est pas branché, son formulaire est
   masqué et le bouton d'appel occupe toute la largeur. Un CTA qui
   promet « l'agent vous appelle » puis répond « en cours de
   branchement » est pire que pas de CTA du tout. */
.console__actions--solo{ grid-template-columns:1fr; }
@media (max-width:720px){ .console__actions{ grid-template-columns:1fr; } }

.btn{
  font-family:var(--sans); font-size:15px; font-weight:500;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:14px 18px; min-height:62px;
  border-radius:4px; cursor:pointer; text-align:center;
  transition:transform .16s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--jade); outline-offset:2px; }
.btn__ic{ font-size:11px; opacity:.85; }
.btn__sub{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; opacity:.72; font-weight:400;
}
.btn--primary{
  background:var(--jade); color:var(--white); border:1px solid var(--jade);
  box-shadow:0 6px 20px -8px rgba(6,122,110,.7);
}
.btn--primary:hover{
  background:var(--jade-dk); border-color:var(--jade-dk);
  box-shadow:0 10px 26px -8px rgba(6,122,110,.8);
}
.btn--ghost{
  background:var(--white); color:var(--ink);
  border:1px solid var(--line); box-shadow:var(--sh-sm);
}
.btn--ghost:hover{ border-color:var(--jade); color:var(--jade); }

.callback{ display:flex; flex-direction:column; gap:7px; }
.callback input{
  font-family:var(--mono); font-size:14px; letter-spacing:.04em;
  padding:11px 13px; width:100%;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:4px;
}
.callback input::placeholder{ color:#9fb0af; }
.callback input:focus{
  outline:none; border-color:var(--jade); background:var(--white);
  box-shadow:0 0 0 3px rgba(15,191,169,.16);
}
.callback input[aria-invalid="true"]{ border-color:var(--rose); }
.callback .btn{ min-height:0; padding:11px 14px; }

.console__status{
  margin:14px 0 0; min-height:18px;
  font-family:var(--mono); font-size:11px; line-height:1.5;
  letter-spacing:.02em; color:var(--faint);
}
.console__status[data-tone="warn"]{ color:var(--cyan); }
.console__status[data-tone="err"]{ color:var(--rose); }

/* ══ PREUVES ═════════════════════════════════════════════
   Les meilleurs arguments arrivaient à 40 % de la page.
   Ce bandeau les remonte juste sous le hero. */
.proof{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) clamp(26px,3vw,38px);
}
.proof__row{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,44px);
  list-style:none; padding:0; margin:0;
}
@media (max-width:860px){ .proof__row{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .proof__row{ grid-template-columns:1fr; } }
/* Filet vertical entre les chiffres plutôt qu'un cadre : les
   chiffres respirent au lieu d'être enfermés dans des boîtes. */
.proof__row li{
  display:flex; flex-direction:column; gap:6px;
  padding-left:clamp(16px,2vw,26px);
  border-left:1px solid var(--line-2);
}
.proof__row li:first-child{ padding-left:0; border-left:0; }
@media (max-width:860px){
  .proof__row li:nth-child(3){ padding-left:0; border-left:0; }
}
@media (max-width:480px){
  .proof__row li{ padding-left:0; border-left:0; }
}
.proof__row b{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,3vw,38px); line-height:1.02; color:var(--jade);
}
.proof__row span{ font-size:13px; line-height:1.5; color:var(--muted); }

/* ══ SCHÉMA DE CHAÎNE ════════════════════════════════════
   Des flèches en CSS plutôt qu'un SVG : responsive sans
   viewBox à recalculer, et lisible par un lecteur d'écran. */
.flow{ margin:18px 0 0; }
.flow figcaption{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:9px;
}
.flow ol{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:6px;
  list-style:none; padding:0; margin:0; counter-reset:f;
}
.flow li{
  position:relative; counter-increment:f;
  flex:1 1 auto; min-width:118px;
  padding:9px 12px 9px 26px;
  font-size:12.5px; line-height:1.35; color:var(--ink-2);
  background:var(--white);
  border:1px solid var(--line-2); border-radius:3px;
  border-left:2px solid var(--jade-lit);
}
.flow li::before{
  content:counter(f);
  position:absolute; left:9px; top:9px;
  font-family:var(--mono); font-size:10px; color:var(--jade);
}
/* Chevron entre les étapes, masqué en fin de ligne */
.flow li:not(:last-child)::after{
  content:"›"; position:absolute; right:-6px; top:50%;
  transform:translateY(-50%); z-index:1;
  font-size:15px; color:var(--faint); line-height:1;
}
@media (max-width:600px){
  .flow li{ flex:1 1 100%; }
  .flow li:not(:last-child)::after{ content:none; }
}

/* ══ SPECS ═══════════════════════════════════════════════
   Ligne discrète, jamais une grille : le bandeau de preuves
   juste au-dessus occupe déjà ce format. Deux rangées de quatre
   cartes identiques se lisaient comme un mur et diluaient les
   chiffres, qui sont l'argument fort. */
.specs{
  max-width:var(--maxw); margin:0 auto;
  padding:0 var(--gut) clamp(48px,7vw,88px);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 0;
}
.spec{ display:inline-flex; align-items:baseline; gap:7px; }
.spec:not(:last-child)::after{
  content:"·"; color:var(--line); margin:0 18px; font-size:14px;
}
.spec b{
  font-family:var(--sans); font-weight:600; font-size:13.5px;
  color:var(--ink-2); letter-spacing:-.005em;
}
.spec span{
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
@media (max-width:820px){
  .spec{ flex:1 1 100%; }
  .spec:not(:last-child)::after{ content:none; }
}

/* ══ BANDS ═══════════════════════════════════════════════ */
.band{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(56px,8vw,104px) var(--gut);
  border-top:1px solid var(--line-2);
}
.band--alt{ background:linear-gradient(to bottom, rgba(15,191,169,.05), transparent 70%); }

.band__head{
  display:flex; align-items:baseline; gap:18px; margin-bottom:clamp(30px,4vw,52px);
}
.band__num{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--jade-lit);
  padding-top:6px; font-weight:500;
}
.band__head h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,4vw,50px); line-height:1.05; letter-spacing:-.01em;
}

/* Grilles à compte fixe : 4 cartes → 2×2, 6 cartes → 3×2.
   Jamais d'`auto-fit`, qui laisse une case orpheline. */
.cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); border-radius:4px;
  overflow:hidden;
}
.cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:1000px){ .cards--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px){ .cards, .cards--3{ grid-template-columns:1fr; } }
.card{
  background:var(--white); padding:clamp(24px,2.8vw,34px);
  transition:background .3s ease;
}
.card:hover{ background:var(--screen); }
.card h3{
  margin:0 0 12px; font-family:var(--sans); font-weight:600;
  font-size:16.5px; color:var(--ink);
}
.card p{ margin:0; font-size:14.5px; line-height:1.68; color:var(--muted); }

/* ── réalisations ────────────────────────────────────────── */
.works{ display:flex; flex-direction:column; }
.work{
  display:grid; grid-template-columns:minmax(200px,.3fr) 1fr;
  gap:clamp(16px,3vw,48px);
  padding:clamp(26px,3.2vw,38px) 0;
  border-top:1px solid var(--line-2);
}
.work:last-child{ border-bottom:1px solid var(--line-2); }
@media (max-width:760px){ .work{ grid-template-columns:1fr; gap:14px; } }

/* Logos : hauteur commune, largeur libre — c'est le seul réglage qui
   fait cohabiter un wordmark large et une icône d'app carrée.
   Désaturés au repos pour ne pas concurrencer la palette jade,
   couleur d'origine au survol de la ligne. */
.work__logo{
  display:block; height:34px; width:auto; max-width:160px;
  object-fit:contain; object-position:left center;
  margin-bottom:15px;
  filter:grayscale(1); opacity:.7;
  transition:filter .35s ease, opacity .35s ease;
}
/* Les icônes d'app ont des angles arrondis sur fond opaque :
   sans ce rayon, les coins noirs bavent sur le papier clair. */
.work__logo--mark{ border-radius:22%; }

/* Rebond permanent, très léger : 5px, avec un petit contre-temps à
   l'atterrissage pour que ça se lise comme un rebond et pas comme
   une respiration. Décalé d'une ligne à l'autre — sinon les cinq
   logos montent ensemble et l'effet devient un tic. */
@keyframes logoBounce{
  0%, 100%{ transform:translateY(0); }
  45%     { transform:translateY(-5px); }
  70%     { transform:translateY(-1px); }
}
.work__logo{ animation:logoBounce 2.8s ease-in-out infinite; }
.work:nth-child(2) .work__logo{ animation-delay:-.45s; }
.work:nth-child(3) .work__logo{ animation-delay:-.9s; }
.work:nth-child(4) .work__logo{ animation-delay:-1.35s; }
.work:nth-child(5) .work__logo{ animation-delay:-1.8s; }

/* Au survol : le logo se pose et reprend ses couleurs. */
.work:hover .work__logo{
  filter:none; opacity:1;
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce){
  .work__logo{ animation:none; }
}

.work__more{
  display:inline-block; margin-top:18px;
  font-family:var(--sans); font-size:14px; font-weight:500;
  color:var(--jade); text-decoration:none;
  border-bottom:1px solid rgba(6,122,110,.3);
  transition:border-color .2s ease, color .2s ease;
}
.work__more:hover{ color:var(--jade-dk); border-color:var(--jade-dk); }

.work__tag{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--jade-lit); font-weight:500;
}
.work__id h3{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.8vw,32px); line-height:1.08; color:var(--jade-dk);
}
.work__id h3 a{
  color:inherit; text-decoration:none;
  transition:color .2s ease;
}
.work__id h3 a:hover{ color:var(--jade-lit); }

.work__url{
  display:inline-block; margin-top:9px;
  font-family:var(--mono); font-size:11px; letter-spacing:.03em;
  color:var(--faint); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.work__url:hover{ color:var(--jade); border-color:rgba(6,122,110,.5); }
.work__body p{ margin:0 0 12px; font-size:15.5px; line-height:1.7; color:var(--ink-2); }
.work__note{
  color:var(--muted) !important; font-size:14.5px !important;
  padding-left:14px; border-left:2px solid var(--line);
}
.work__stack{
  display:flex; flex-wrap:wrap; gap:6px;
  list-style:none; padding:0; margin:16px 0 0;
}
.work__stack li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
  padding:5px 10px; border:1px solid var(--line-2); border-radius:2px;
  background:var(--white);
}

.cases{ list-style:none; padding:0; margin:0; }
.cases li{
  display:grid; grid-template-columns:minmax(180px,.32fr) 1fr; gap:clamp(16px,3vw,48px);
  padding:22px 0; border-top:1px solid var(--line-2); align-items:baseline;
}
.cases li:last-child{ border-bottom:1px solid var(--line-2); }
.cases b{
  font-family:var(--serif); font-weight:400; font-size:22px; color:var(--jade-dk);
}
.cases span{ font-size:14.5px; color:var(--muted); line-height:1.65; }
@media (max-width:680px){ .cases li{ grid-template-columns:1fr; gap:6px; } }

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(24px,3vw,44px); }
.step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-bottom:16px;
  font-family:var(--mono); font-size:13px; color:var(--white);
  background:var(--jade); border-radius:50%;
}
.step h3{ margin:0 0 10px; font-family:var(--sans); font-weight:600; font-size:16px; }
.step p{ margin:0; font-size:14.5px; line-height:1.68; color:var(--muted); }

.note{
  margin:clamp(32px,4vw,52px) 0 0; padding-top:22px;
  border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
}

/* ══ WHO ═════════════════════════════════════════════════ */
.who{
  border-top:1px solid var(--line-2);
  background:linear-gradient(to bottom, rgba(0,162,194,.06), transparent 55%);
}
.who__inner{ max-width:760px; margin:0 auto; padding:clamp(56px,8vw,104px) var(--gut); }
.who h2{
  margin:0 0 22px; font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,4vw,46px); line-height:1.05;
}
.who__lede{
  font-family:var(--serif); font-size:clamp(21px,2.3vw,28px);
  line-height:1.4; color:var(--jade-dk); margin:0 0 22px;
}
.who p{ font-size:15.5px; line-height:1.72; color:var(--muted); margin:0 0 16px; }

/* ══ CONTACT ═════════════════════════════════════════════ */
.contact{
  border-top:1px solid var(--line-2);
  padding:clamp(64px,9vw,120px) var(--gut);
  text-align:center;
}
.contact h2{
  margin:0 0 18px; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,5.4vw,68px); line-height:1;
}
.contact__lede{
  max-width:52ch; margin:0 auto 34px; color:var(--muted);
  font-size:15.5px; line-height:1.7;
}
.mail{
  display:inline-block; font-family:var(--mono);
  font-size:clamp(15px,2.2vw,21px); letter-spacing:.02em;
  color:var(--white); text-decoration:none; background:var(--jade);
  padding:16px 32px; border:1px solid var(--jade); border-radius:4px;
  box-shadow:0 8px 24px -10px rgba(6,122,110,.8);
  transition:all .24s ease;
}
.mail:hover{
  background:var(--jade-dk); border-color:var(--jade-dk);
  box-shadow:0 14px 34px -10px rgba(6,122,110,.9);
  transform:translateY(-1px);
}
.contact__alt{ margin:22px 0 0; font-size:13.5px; color:var(--muted); }
.linkish{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--jade);
  border-bottom:1px solid rgba(6,122,110,.4);
}
.linkish:hover{ border-color:var(--jade); }

/* ══ ÉTUDES DE CAS ═══════════════════════════════════════ */
.artHero{
  max-width:820px; margin:0 auto;
  padding:clamp(52px,8vw,104px) var(--gut) clamp(36px,5vw,60px);
}
.artHero h1{
  font-size:clamp(40px,6vw,80px); line-height:1; margin:0 0 24px;
}
.artHero .lede{ max-width:60ch; }

.artToc{
  display:flex; flex-direction:column;
  margin-top:38px; border-top:1px solid var(--line-2);
}
.artToc a{
  display:flex; align-items:baseline; gap:16px;
  padding:15px 4px; border-bottom:1px solid var(--line-2);
  color:var(--ink); text-decoration:none;
  font-size:16px; transition:all .2s ease;
}
.artToc a:hover{ color:var(--jade); padding-left:12px; }
.artToc b{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--jade-lit); font-weight:500;
}

.art{
  padding:clamp(48px,7vw,88px) var(--gut);
  border-top:1px solid var(--line-2);
  scroll-margin-top:80px;
}
.art--alt{ background:linear-gradient(to bottom, rgba(15,191,169,.05), transparent 60%); }
.art > *{ max-width:760px; margin-left:auto; margin-right:auto; }

.art__head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:clamp(22px,3vw,34px);
}
.art__num{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--jade-lit); font-weight:500; padding-top:8px; flex:none;
}
.art__head h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.8vw,46px); line-height:1.06; letter-spacing:-.01em;
}

/* NB : margin-left/right restent `auto` partout — le shorthand `margin:0 0 16px`
   écraserait le centrage hérité de `.art > *` et désalignerait le texte. */
.art__lede{
  font-family:var(--serif); font-size:clamp(22px,2.7vw,32px);
  line-height:1.36; color:var(--jade-dk);
  margin:0 auto 32px; padding-left:20px; border-left:2px solid var(--jade-lit);
}

.art h3{
  margin:38px auto 12px; font-family:var(--sans); font-weight:600;
  font-size:17px; color:var(--ink); letter-spacing:-.005em;
}
.art p{ margin:0 auto 16px; font-size:16px; line-height:1.75; color:var(--ink-2); }
.art b{ font-weight:600; color:var(--ink); }
.art em{ font-style:italic; }

.art__list{ margin:0 auto 16px; padding-left:0; list-style:none; }
.art__list li{
  position:relative; padding-left:20px; margin-bottom:14px;
  font-size:16px; line-height:1.7; color:var(--ink-2);
}
.art__list li::before{
  content:""; position:absolute; left:0; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--jade-lit);
}

.art__take{
  margin:36px auto 0; padding:22px 24px;
  background:var(--white); border:1px solid var(--line-2);
  border-left:3px solid var(--jade); border-radius:4px;
  box-shadow:var(--sh-sm);
}
.art__take b{
  display:block; margin-bottom:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--jade); font-weight:500;
}
.art__take p{ margin:0; font-size:15.5px; color:var(--muted); }

/* ══ PAGES PROJET ════════════════════════════════════════ */
.projHero{
  max-width:820px; margin:0 auto;
  padding:clamp(40px,6vw,72px) var(--gut) clamp(32px,4vw,52px);
}
.crumb{
  display:inline-block; margin-bottom:clamp(24px,3vw,40px);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
  transition:color .2s ease;
}
.crumb:hover{ color:var(--jade); }

.projHero__logo{
  display:block; height:48px; width:auto; max-width:210px;
  object-fit:contain; object-position:left center; margin-bottom:22px;
}
.projHero__logo--mark{ border-radius:22%; }

.projHero h1{
  margin:6px 0 18px; font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,5.6vw,72px); line-height:1; letter-spacing:-.02em;
}
.projHero .lede{ max-width:58ch; margin-bottom:28px; }

.projHero__actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* tableau de stack */
.projStack{ list-style:none; padding:0; margin:0; }
.projStack li{
  display:grid; grid-template-columns:minmax(140px,.26fr) 1fr;
  gap:clamp(14px,3vw,40px);
  padding:16px 0; border-top:1px solid var(--line-2); align-items:baseline;
}
.projStack li:last-child{ border-bottom:1px solid var(--line-2); }
.projStack b{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--jade); font-weight:500;
}
.projStack span{ font-size:15px; color:var(--ink-2); line-height:1.6; }
@media (max-width:640px){ .projStack li{ grid-template-columns:1fr; gap:6px; } }

/* navigation entre projets */
.projNav{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(48px,6vw,80px) var(--gut);
  border-top:1px solid var(--line-2);
}
.projNav h2{
  margin:0 0 24px; font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,3vw,34px); line-height:1.1;
}
.projNav__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--line-2); border:1px solid var(--line-2); border-radius:4px;
  overflow:hidden;
}
.projNav__grid a{
  display:flex; flex-direction:column; gap:6px;
  padding:20px 22px; background:var(--white); text-decoration:none;
  transition:background .25s ease;
}
.projNav__grid a:hover{ background:var(--screen); }
.projNav__grid b{
  font-family:var(--serif); font-weight:400; font-size:19px; color:var(--jade-dk);
}
.projNav__grid span{ font-size:13px; color:var(--muted); line-height:1.5; }

/* renvoi vers les études depuis l'accueil */
.more{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; margin-top:clamp(28px,3.5vw,44px); padding-top:26px;
  border-top:1px solid var(--line-2);
}
.more p{ margin:0; max-width:46ch; font-size:15px; color:var(--muted); line-height:1.6; }
.more b{ display:block; font-family:var(--sans); font-weight:600; color:var(--ink); font-size:16px; margin-bottom:4px; }

/* ══ FOOT ════════════════════════════════════════════════ */
.foot{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  padding:26px var(--gut) 40px;
  border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  color:var(--faint);
}
.foot a{ color:var(--faint); text-decoration:none; }
.foot a:hover{ color:var(--jade); }
.foot__sep{ opacity:.5; }