/* ============================================================================
   LE BRIEF, pages d'étude de cas
   ----------------------------------------------------------------------------
   Même système visuel que la home. Le balisage des trois pages est conservé tel
   quel : c'est cette feuille qui reprend chaque classe héritée (.hero, .num,
   .insight, .stats, .vs, .steps, .rules, .note, .gal, .skills…) et la traduit
   dans le monde du brief. Aucun fond clair, sauf les maquettes d'e-mail, qui
   doivent ressembler à des e-mails.
   ==========================================================================*/

:root{
  --prune:#693163;
  --vin:#762c49;
  --bordeaux:#4d142a;
  --rose:#d8a6d8;

  --fond:#2e0b1a;
  --champ:#3d0f22;

  --encre:#fdf6fa;
  --encre-2:#e0b9cb;
  --encre-3:#cb9fb3;
  --trait:rgba(216,166,216,.26);
  --trait-fort:rgba(216,166,216,.5);

  --ui:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,'Cascadia Mono',monospace;
  --marge:clamp(18px,4.5vw,64px);

  /* alias des anciens jetons, pour que les styles en ligne des pages
     continuent de fonctionner sans les éditer */
  --accent:#d8a6d8;
  --strong:#fdf6fa;
  --soft:#d8a6d8;
  --second:#e0b9cb;
  --ink:#fdf6fa;
  --meta:#cb9fb3;
  --line:rgba(216,166,216,.26);
  --bg:#2e0b1a;
  --card:#3d0f22;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--fond);color:var(--encre);
  font-family:var(--ui);font-size:17px;line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--rose);color:var(--fond)}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}

.wrap{max-width:860px;margin:0 auto;padding:0 var(--marge)}
.sans{font-family:var(--ui)}

/* ------------------------------------------------------- barre du document */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(46,11,26,.86);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--trait);
  font-family:var(--mono);
}
.topbar .wrap{
  max-width:1180px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px var(--marge);
}
.topbar a{
  display:flex;align-items:center;gap:11px;
  color:var(--encre);text-decoration:none;
  font-family:var(--ui);font-size:14.5px;font-weight:800;letter-spacing:-.035em;
  font-variation-settings:"wdth" 92;
}
/* le monogramme, dessiné en CSS pour ne pas toucher au balisage des pages */
.topbar a::before{
  content:"VB";
  display:grid;place-items:center;flex:none;width:32px;height:32px;
  border-radius:4px;background:var(--rose);color:var(--fond);
  font-size:12.5px;font-weight:900;letter-spacing:-.06em;
}
.topbar a:hover{color:var(--rose)}
.topbar span{
  font-size:12px;font-weight:500;letter-spacing:-.06em;
  text-transform:uppercase;color:var(--rose);white-space:nowrap;
}

/* ------------------------------------------------------- cartouche de tête */
header.hero{
  background:none;color:var(--encre);
  padding:clamp(46px,7vw,86px) 0 clamp(34px,5vw,54px);
  margin-bottom:clamp(30px,4.5vw,50px);
  border-bottom:1px solid var(--trait);
}
header.hero.dark{background:none}
header.hero .wrap{max-width:1180px}
.tagline{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.05em;
  text-transform:uppercase;color:var(--rose);margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.tagline::after{content:"";flex:1;height:1px;background:var(--trait);max-width:340px}
h1{
  font-size:clamp(38px,6.4vw,80px);font-weight:900;line-height:1;
  letter-spacing:-.045em;word-spacing:.05em;
  font-variation-settings:"wdth" 84;max-width:16ch;text-wrap:balance;
  margin-bottom:20px;
}
.sub{
  font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--encre-2);
  max-width:56ch;
}
.badge{
  display:inline-flex;align-items:center;margin-top:24px;
  background:none;border:1px solid var(--trait);border-radius:2px;
  padding:6px 12px;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:-.06em;
  color:var(--encre-3);
}

/* ---------------------------------------------------- grammaire des champs */
section{margin-bottom:clamp(38px,5.5vw,62px)}
.num{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.05em;
  text-transform:uppercase;color:var(--rose);margin-bottom:14px;
  display:flex;align-items:center;gap:12px;
}
.num::after{content:"";flex:1;height:1px;background:var(--trait)}
h2{
  font-size:clamp(27px,3.8vw,44px);font-weight:800;line-height:1.06;
  letter-spacing:-.04em;word-spacing:.06em;
  font-variation-settings:"wdth" 88;max-width:20ch;text-wrap:balance;
  margin-bottom:clamp(14px,1.6vw,20px);
}
h3{
  font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.18;
  letter-spacing:-.035em;font-variation-settings:"wdth" 92;
  margin:30px 0 10px;
}
h4{font-family:var(--ui)}
p{margin-bottom:1em;max-width:68ch}
p:last-child{margin-bottom:0}
ul{margin:0 0 1em 20px}
li{margin-bottom:7px;max-width:66ch}
strong{font-weight:700;color:var(--encre)}
em{font-style:normal;font-weight:700;color:var(--rose)}
b{font-weight:700}

/* ------------------------------------------------------------ l'idée forte */
.insight{
  background:var(--prune);color:var(--encre);border-radius:5px;
  padding:clamp(28px,4vw,42px);margin:30px 0;text-align:left;
}
.insight.dark{background:var(--bordeaux)}
.insight .lab{
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.05em;
  text-transform:uppercase;color:#f4e0ef;margin-bottom:14px;
}
.insight .txt{
  font-size:clamp(21px,2.8vw,30px);line-height:1.2;font-weight:800;
  letter-spacing:-.04em;font-variation-settings:"wdth" 90;max-width:24ch;
}
.pull{
  border-left:1px solid var(--rose);padding:6px 0 6px 22px;margin:26px 0;
  font-size:clamp(19px,2.4vw,25px);line-height:1.3;font-weight:700;
  letter-spacing:-.035em;font-variation-settings:"wdth" 92;color:var(--encre);
  max-width:32ch;
}

/* ------------------------------------------------------------- les chiffres */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:4px;
  overflow:hidden;margin:26px 0}
.stat{background:var(--fond);padding:22px 20px;text-align:left}
.stat .n{
  font-family:var(--ui);font-size:clamp(32px,4vw,44px);font-weight:900;
  color:var(--rose);line-height:.95;letter-spacing:-.05em;
  font-variation-settings:"wdth" 86;
}
.stat .n small{font-size:.48em;font-weight:800}
.stat .l{
  font-family:var(--mono);font-size:12px;letter-spacing:-.06em;color:var(--encre-3);
  margin-top:12px;line-height:1.45;
}

/* -------------------------------------------------------------- avant/après */
.vs{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  border:1px solid var(--trait);border-radius:4px;overflow:hidden;margin:26px 0;
  font-family:var(--ui);
}
.vs>div{padding:22px 24px}
.vs .a{background:rgba(176,58,46,.13)}
.vs .b{background:rgba(63,167,108,.11)}
.vs .mid{background:var(--champ);display:flex;align-items:center;justify-content:center;
  padding:0 14px;border-left:1px solid var(--trait);border-right:1px solid var(--trait);
  color:var(--rose);font-size:22px}
.vs h4{font-family:var(--mono);font-size:12px;letter-spacing:-.05em;
  text-transform:uppercase;margin-bottom:13px;font-weight:600}
.vs .a h4{color:#f0a49b}
.vs .b h4{color:#84d9ab}
.vs ul{margin:0 0 0 17px;font-size:15.5px;line-height:1.5;color:var(--encre-2)}
.vs li{margin-bottom:7px}

/* ------------------------------------------------------------ les étapes */
.steps{counter-reset:s;margin:26px 0}
.steps .s{position:relative;padding-left:56px;margin-bottom:20px;font-family:var(--ui)}
.steps .s::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  width:36px;height:36px;border-radius:4px;
  background:none;border:1px solid var(--rose);color:var(--rose);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.06em;
}
.steps .s b{display:block;color:var(--encre);font-size:17px;font-weight:700;
  letter-spacing:-.03em;margin-bottom:3px}
.steps .s span{font-size:15.5px;color:var(--encre-2);line-height:1.55}

/* --------------------------------------------------------------- oui / non */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0;
  font-family:var(--ui)}
.rules>div{border-radius:4px;padding:20px 22px;border:1px solid var(--trait)}
.rules .y{background:rgba(63,167,108,.11)}
.rules .n{background:rgba(176,58,46,.13)}
.rules h4{font-family:var(--mono);font-size:12px;letter-spacing:-.05em;
  text-transform:uppercase;margin-bottom:12px;font-weight:600}
.rules .y h4{color:#84d9ab}
.rules .n h4{color:#f0a49b}
.rules p{font-size:15.5px;margin-bottom:8px;line-height:1.5;color:var(--encre-2)}

/* ---------------------------------------------------------------- tableaux */
.tw{overflow-x:auto;margin:24px 0}
table{
  width:100%;border-collapse:collapse;background:none;font-size:15.5px;
  font-family:var(--ui);border:1px solid var(--trait);border-radius:4px;
  overflow:hidden;
}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--trait);
  vertical-align:top;color:var(--encre-2)}
th{background:var(--champ);color:var(--rose);font-family:var(--mono);
  font-size:11.5px;letter-spacing:-.05em;text-transform:uppercase;font-weight:600}
tr:last-child td{border-bottom:none}
td strong{color:var(--encre)}

/* ---------------------------------------------------------------- encadrés */
.note{
  background:var(--champ);border:1px solid var(--trait);
  border-left:1px solid var(--rose);
  border-radius:0 4px 4px 0;padding:18px 22px;margin:24px 0;
  font-size:16px;line-height:1.6;color:var(--encre-2);
}
.note.warn{border-left-color:#f0a49b}
.note.fix{border-left-color:#84d9ab}
.note .lab{
  font-family:var(--mono);font-size:12px;letter-spacing:-.05em;text-transform:uppercase;
  color:var(--rose);display:block;margin-bottom:8px;font-weight:600;
}
.note.warn .lab{color:#f0a49b}
.note.fix .lab{color:#84d9ab}
.note strong{color:var(--encre)}

/* ----------------------------------------------------------------- visuels */
figure{margin:26px 0}
figure img{width:100%;display:block;border-radius:4px;border:1px solid var(--trait);
  background:var(--champ)}
figcaption{
  font-family:var(--mono);font-size:12px;letter-spacing:-.06em;color:var(--encre-3);
  margin-top:10px;line-height:1.5;
}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:26px 0}
.gal figure{margin:0}
.gal img{aspect-ratio:1/1;object-fit:cover}
/* les affiches sont verticales : elles se montrent entières, jamais recadrées */
.gal.affiches{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gal.affiches img{aspect-ratio:auto;object-fit:contain;background:none;border-color:var(--trait-fort)}

/* ------------------------------------------------------- ce que ça démontre */
.skills{
  background:var(--champ);border:1px solid var(--trait);border-radius:5px;
  padding:26px 28px;margin:18px 0 40px;
}
.skills h3{margin-top:0;font-size:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips span{
  font-family:var(--mono);font-size:12px;letter-spacing:-.06em;
  background:none;color:var(--encre-2);border:1px solid var(--trait);
  border-radius:2px;padding:6px 11px;
}

/* -------------------------------------------------------- sortie de la page */
.casefoot{
  background:var(--prune);border:0;border-radius:5px;
  padding:clamp(28px,4vw,46px);margin:10px 0 34px;
}
.casefoot .claim{
  font-family:var(--ui);font-size:clamp(21px,2.8vw,30px);font-weight:800;
  line-height:1.15;letter-spacing:-.04em;font-variation-settings:"wdth" 90;
  color:var(--encre);margin-bottom:22px;max-width:22ch;
}
.casefoot .go{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.casefoot .go a{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:-.05em;
  text-decoration:none;padding:14px 22px;border-radius:3px;
  transition:background .2s,color .2s,border-color .2s;
}
.casefoot .go a.p{background:var(--encre);color:var(--prune)}
.casefoot .go a.p:hover{background:var(--rose)}
.casefoot .go a.s{border:1px solid rgba(253,246,250,.42);color:var(--encre)}
.casefoot .go a.s:hover{background:rgba(253,246,250,.14);border-color:var(--encre)}

/* -------------------------------------------------------------------- pied */
footer{
  border-top:1px solid var(--trait);padding:26px 0 54px;color:var(--encre-3);
  font-family:var(--mono);font-size:12px;letter-spacing:-.06em;line-height:1.7;
  max-width:80ch;
}

/* --------------------------------------------------------------- maquettes */
/* L'étude KIKO porte son propre bloc <style>, chargé après cette feuille : les
   surcharges ci-dessous sont donc préfixées par body pour gagner en spécificité
   plutôt que d'aller éditer la page.

   Parti pris : la maquette d'e-mail garde un fond clair. Un e-mail doit
   ressembler à un e-mail, pas à une section du site. On la traite comme une
   pièce jointe, encadrée, et on redéfinit les alias de couleur à l'intérieur
   pour que son texte reste lisible sur blanc. */
body .mail{
  --strong:#4d142a; --meta:#6b6b6b; --line:#e8e2e8; --card:#ffffff; --accent:#693163;
  background:#ffffff;color:#1c1a1c;
  border:1px solid var(--trait-fort);border-radius:5px;overflow:hidden;margin:22px 0;
}
body .mail strong,body .mail b{color:#4d142a}
body .mail em{color:#762c49}
body .mail .hd{border-bottom:1px solid #e8e2e8}
body .mail .cta{background:#4d142a;color:#ffffff}

/* Le bloc « variantes testées » n'est pas un e-mail : il repasse dans le monde
   du brief au lieu de rester une boîte claire au milieu d'une page sombre. */
body .alt{
  background:var(--champ);color:var(--encre-2);
  border:1px solid var(--trait);border-radius:4px;
}
body .alt b{color:var(--rose)}
body .why{color:var(--encre-2);border-left:1px solid var(--rose);padding-left:18px}
body .why b{color:var(--rose)}
body .kit div{background:var(--champ);border:1px solid var(--trait);border-radius:4px}
body .kit b{color:var(--encre)}

/* ============================================================================
   LA LOUPE — visionneuse plein écran
   Les planches montrent les visuels à 240 px : on n'y lit rien. Un clic ouvre
   l'image en grand, et plusieurs visuels dans une même planche forment un
   carrousel. Comportement dans js/loupe.js.
   ==========================================================================*/

/* l'affordance : la vignette dit qu'elle s'ouvre, au repos comme au survol */
figure.agrandissable{position:relative}
figure.agrandissable img{cursor:zoom-in;transition:opacity .25s}
figure.agrandissable::after{
  content:"AGRANDIR";
  position:absolute;left:10px;top:10px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:-.04em;
  color:var(--fond);background:var(--rose);
  padding:5px 9px;border-radius:2px;
  opacity:0;transform:translateY(-4px);
  transition:opacity .22s,transform .22s;pointer-events:none;
}
figure.agrandissable:hover::after,
figure.agrandissable:focus-within::after{opacity:1;transform:none}
figure.agrandissable:hover img{opacity:.82}
figure.agrandissable img:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

html.loupe-ouverte{overflow:hidden}

.loupe{
  position:fixed;inset:0;z-index:200;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  opacity:0;transition:opacity .2s ease-out;
}
.loupe.visible{opacity:1}
.loupe[hidden]{display:none}
/* Pas de backdrop-filter ici : il casse la composition du fond dans Chromium
   et le flou décoratif n'apporte rien. Un aplat quasi opaque suffit, et la page
   qui transparaît à peine derrière rappelle qu'on est toujours dans le dossier. */
.loupe-fond{
  position:absolute;inset:0;
  background:rgba(20,4,12,.975);
  cursor:zoom-out;
}

.loupe-barre{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px var(--marge);
}
.loupe-compte{
  font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:-.06em;
  color:var(--rose);
}

.loupe-bouton{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:-.05em;
  color:var(--encre);background:none;border:1px solid var(--trait-fort);
  border-radius:3px;padding:10px 15px;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.loupe-bouton:hover{background:var(--rose);border-color:var(--rose);color:var(--fond)}
.loupe-bouton .ico{width:15px;height:15px}

.loupe-nav{
  position:absolute;top:50%;z-index:3;margin-top:-24px;
  width:48px;height:48px;padding:0;justify-content:center;
  background:rgba(46,11,26,.72);backdrop-filter:blur(6px);
}
.loupe-prec{left:clamp(8px,2vw,24px)}
.loupe-suiv{right:clamp(8px,2vw,24px)}
.loupe-prec .ico{transform:rotate(180deg)}

.loupe-scene{
  position:relative;z-index:2;margin:0;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:0 clamp(64px,9vw,110px);
}
.loupe-scene img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:4px;border:1px solid var(--trait);background:none;
  opacity:0;transform:scale(.985);
  transition:opacity .28s ease-out,transform .28s ease-out;
}
.loupe-scene img.arrivee{opacity:1;transform:none}
.loupe-legende{
  font-family:var(--mono);font-size:12.5px;letter-spacing:-.06em;
  color:var(--encre-2);text-align:center;max-width:64ch;line-height:1.55;margin:0;
}

.loupe-vignettes{
  position:relative;z-index:2;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:16px var(--marge) clamp(18px,3vw,26px);
}
.loupe-vignette{
  width:64px;height:64px;padding:0;border:1px solid var(--trait);
  border-radius:3px;overflow:hidden;background:var(--champ);cursor:pointer;
  opacity:.5;transition:opacity .2s,border-color .2s;
}
.loupe-vignette img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.loupe-vignette:hover{opacity:.85}
.loupe-vignette[aria-selected="true"]{opacity:1;border-color:var(--rose)}

@media(prefers-reduced-motion:reduce){
  .loupe,.loupe-scene img,figure.agrandissable::after,figure.agrandissable img{
    transition:none}
  .loupe-scene img{opacity:1;transform:none}
}
@media(max-width:640px){
  .loupe-scene{padding:0 12px}
  .loupe-nav{width:42px;height:42px;margin-top:-21px}
  .loupe-vignette{width:48px;height:48px}
  figure.agrandissable::after{content:"VOIR";font-size:10px}
}

@media(max-width:640px){
  .vs{grid-template-columns:1fr}
  .vs .mid{display:none}
  .rules{grid-template-columns:1fr}
  .topbar span{display:none}
}