/* Les cinq polices sont hebergees ici. Fontshare a coupe notre acces le
   2026-09-01: leur CSS repondait 200 avec un message d'erreur, donc la police
   tombait en secours systeme sans la moindre alerte. Aucune police de
   production ne vient plus d'un CDN gratuit. */
@font-face{font-family:"Satoshi";font-weight:500;font-style:normal;font-display:swap;
  src:url(assets/fonts/satoshi-500.woff2) format("woff2")}
@font-face{font-family:"Satoshi";font-weight:700;font-style:normal;font-display:swap;
  src:url(assets/fonts/satoshi-700.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;
  src:url(assets/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;
  src:url(assets/fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:"DM Serif Display";font-weight:400;font-style:italic;font-display:swap;
  src:url(assets/fonts/dmserif-italic.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:400;font-style:normal;font-display:swap;
  src:url(assets/fonts/roboto-400.woff2) format("woff2")}
@font-face{font-family:"Roboto";font-weight:500;font-style:normal;font-display:swap;
  src:url(assets/fonts/roboto-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;
  src:url(assets/fonts/jbmono-400.woff2) format("woff2")}

/* =========================================================
   maritimo · theme
   Toutes les valeurs viennent de research/PLAYBOOK.md.
   Seul fichier du site qui connaisse une couleur ou une police.
   ========================================================= */
:root{
  /* --- palette, 5 couleurs, pas une de plus --- */
  --ink:#0B1418; --paper:#E8E3DA; --sand:#C9BCA6; --sea:#145A6E; --signal:#E4572E;
  --line:rgba(11,20,24,.15); --line-ink:rgba(232,227,218,.15);
  --mute:#6E747A; --mute-ink:rgba(232,227,218,.62);

  /* --- echelle typo: base 18, ratio 1.333, huit tailles --- */
  --t-xs:13px; --t-s:15px; --t-base:18px; --t-m:24px;
  --t-l:32px;  --t-xl:56px; --t-2xl:96px;
  --t-3xl:clamp(2.9rem,6.6vw,104px);

  /* --- espacement, base 8 --- */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px;
  --s5:64px; --s6:104px; --s7:168px; --s8:272px;

  /* --- un seul easing sur toute la page --- */
  --ease:cubic-bezier(.16,1,.3,1);
  --d-micro:300ms; --d-move:900ms; --d-long:1200ms;

  --font-display:"Satoshi",ui-sans-serif,system-ui,sans-serif;
  --font-text:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:5vw;
}
@media(max-width:900px){
  :root{
    /* Le mobile n'est pas le desktop retreci: l'echelle est refaite. */
    --t-3xl:clamp(2.6rem,12vw,4.2rem); --t-2xl:44px; --t-xl:34px;
    --t-l:26px; --t-m:20px; --t-base:17px;
    --s8:120px; --s7:88px; --s6:64px; --s5:44px;
    --gutter:22px;
  }
}

body{font-family:var(--font-text);font-size:var(--t-base);line-height:1.55;
     background:var(--paper);color:var(--ink)}

/* --- roles typographiques --- */
.display{font-family:var(--font-display);font-weight:700}

/* Le mot qui porte le sens sort de la grotesque: serif italique, orange, en
   poids normal. Trois raisons pour les reglages qui suivent. La serif a un
   oeil plus petit que Satoshi, donc 1.1em pour retrouver la meme hauteur
   apparente. Elle est plus etroite, donc on rend la chasse au lieu de la
   serrer. Et elle penche, donc un rien d'air a droite pour que le mot suivant
   ne vienne pas coller au jambage. */
.hi{font-family:"DM Serif Display",Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:400;color:var(--signal);
  font-size:1.04em;letter-spacing:-.006em;padding-right:.05em}
.on-sea .hi,.hero .hi{color:var(--signal)}
.h-hero{font-size:var(--t-3xl);line-height:1.03;letter-spacing:-.035em;font-weight:700}
.h-1{font-size:var(--t-2xl);line-height:1.06;letter-spacing:-.032em;font-weight:700}
.h-2{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.028em;font-weight:700}
.h-3{font-size:var(--t-l);line-height:1.18;letter-spacing:-.022em;font-weight:700}
.lead{font-size:var(--t-m);line-height:1.45;letter-spacing:-.011em;max-width:34ch}
.body{font-size:var(--t-base);line-height:1.55;max-width:62ch}
.small{font-size:var(--t-s);line-height:1.55;max-width:62ch;color:var(--mute)}
.label{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
       text-transform:uppercase;color:var(--mute)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
     font-feature-settings:"tnum" 1}

/* --- conteneurs: une largeur DIFFERENTE par section --- */
.w-full{width:100%;padding-inline:var(--gutter)}
.w-1440{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.w-1240{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.w-1180{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.w-1040{max-width:1040px;margin-inline:auto;padding-inline:var(--gutter)}
.w-880 {max-width:880px; margin-inline:auto;padding-inline:var(--gutter)}
.w-680 {max-width:680px; margin-inline:auto;padding-inline:var(--gutter)}

/* --- paddings verticaux ASYMETRIQUES, neuf couples differents --- */
.p-01{padding:0 0 var(--s6)}
.p-02{padding:var(--s7) 0 var(--s6)}
.p-03{padding:var(--s6) 0 var(--s6)}
.p-04{padding:var(--s5) 0 var(--s5)}
.p-05{padding:var(--s8) 0 var(--s7)}
.p-06{padding:var(--s6) 0 var(--s4)}
.p-07{padding:var(--s7) 0 var(--s5)}
.p-08{padding:var(--s6) 0 var(--s7)}
.p-09{padding:0}

.on-ink{background:var(--ink);color:var(--paper)}
.on-ink .label,.on-ink .small{color:var(--mute-ink)}
.on-sand{background:var(--sand);color:var(--ink)}
.on-sea{background:var(--ink);color:var(--paper)}
.on-sea .label,.on-sea .small{color:rgba(232,227,218,.62)}

header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;
  padding:var(--s3) var(--gutter);mix-blend-mode:difference;color:var(--paper);
  pointer-events:none;will-change:transform;
  transition:transform 520ms var(--ease),opacity 300ms var(--ease);
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase}
header nav{margin-left:auto;display:flex;gap:var(--s3);pointer-events:auto}
header > span{pointer-events:auto}
header a{opacity:.6;transition:opacity var(--d-micro) var(--ease)}
header a:hover,header a:focus-visible{opacity:1}
header.away{transform:translateY(-110%);opacity:0}
@media(max-width:760px){header nav{display:none}}

/* ============ 01 HERO ============ conteneur 1440 pleine largeur */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink)}
.hero__img{position:absolute;inset:0;overflow:hidden}
.hero__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
/* voile: sans lui le titre clair sur eau claire n'est pas lisible */
.hero__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,20,24,.62) 0%,rgba(11,20,24,.18) 38%,rgba(11,20,24,.86) 100%)}
.hero__in{position:relative;z-index:3;width:100%;color:var(--paper);
  padding-block:calc(var(--s5) + 56px) var(--s5)}
.hero .h-hero{max-width:15ch}
.hero .lead{color:rgba(232,227,218,.82);margin-top:var(--s3)}
/* la preuve chiffree monte dans le hero: 60% des visiteurs ne verront
   jamais la section 05 (research/COPY.md) */
.proof{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2);
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line-ink)}
.proof b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-l);letter-spacing:-.03em;line-height:1}
.proof span{font-size:var(--t-s);color:rgba(232,227,218,.62);max-width:34ch}
.hero__foot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  margin-top:var(--s4)}
.avail{display:flex;align-items:center;gap:var(--s1);font-size:var(--t-s);
  color:rgba(232,227,218,.62)}
.avail i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}

/* --- bouton, un seul modele sur la page --- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);padding:18px 30px;
  border:1px solid currentColor;border-radius:2px;font-size:var(--t-s);
  letter-spacing:.02em;will-change:transform;
  transition:background var(--d-micro) var(--ease),color var(--d-micro) var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--signal);border-color:var(--signal);
  color:var(--paper)}
.btn > span{display:block;will-change:transform}

/* ============ 02 PROBLEMA ============ conteneur 680, colonne etroite */
.lit{font-family:var(--font-display);font-weight:700;font-size:var(--t-xl);
  line-height:1.14;letter-spacing:-.03em}
.lit s{text-decoration:none;color:var(--sand);
  transition:color 420ms linear}
.lit s.on{color:var(--ink)}
/* 02 · le prix des plateformes. Quatre chiffres, pas quatre paragraphes:
   le rythme vient de l'alternance chiffre / phrase courte, pas de la longueur. */
/* Deux colonnes: la phrase qui pose le probleme a gauche, les chiffres et le
   verdict a droite. La colonne de gauche colle, donc la phrase reste sous les
   yeux pendant qu'on lit les taux. */
@media(min-width:1000px){
  .pb2__g{display:grid;grid-template-columns:1fr 1fr;
    column-gap:var(--s7);align-items:start}
  .pb2__g > .label{grid-column:1}
  .pb2__g > .lit{grid-column:1;position:sticky;top:16vh;margin-top:var(--s4)}
  .pb2__g > .taxas,.pb2__g > .coup,.pb2__g > .dur,
  .pb2__g > .verdict,.pb2__g > .aveu{grid-column:2}
  .pb2__g > .taxas{grid-row:1 / span 2;margin-top:0}
}
.taxas{display:grid;gap:0;margin-top:var(--s6)}
.taxa{display:grid;grid-template-columns:minmax(110px,.34fr) 1fr;gap:4px var(--s3);
  align-items:baseline;padding:var(--s4) 0;border-top:1px solid var(--line);
  grid-template-areas:"m m" "n p"}
/* Le nom de la plateforme, pose comme une etiquette. Pas de logo redessine:
   un logo approximatif se voit tout de suite et fait faux. */
.taxa__m{grid-area:m;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  margin-bottom:6px}
.taxa b{grid-area:n}
.taxa p{grid-area:p}
.taxa--fort .taxa__m{color:var(--signal);opacity:.75}
.taxa b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,5.4vw,3.1rem);line-height:1;letter-spacing:-.045em;
  font-weight:400;display:flex;align-items:baseline;gap:7px}
.taxa b i{font-style:normal;font-size:var(--t-xs);letter-spacing:.1em;
  color:var(--mute);text-transform:uppercase}
.taxa p{font-size:var(--t-s);color:var(--mute);max-width:46ch}
.taxa--fort b{color:var(--signal)}
.taxa--fort b i{color:var(--signal);opacity:.7}

/* la phrase qui bascule: seule, grande, beaucoup d'air autour */
.coup{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,4.4vw,2.4rem);line-height:1.12;letter-spacing:-.028em;
  margin:var(--s6) 0 var(--s5);max-width:20ch}

/* trois lignes qui montent en poids: la derniere porte le coup */
.dur{display:grid;gap:var(--s2);max-width:40ch}
.dur p{font-size:var(--t-m);line-height:1.35;letter-spacing:-.011em;color:var(--mute)}
/* Dans un bloc decoupe, le style doit venir d'une CLASSE: le decoupage garde
   les classes, jamais les balises. Un <b> nu perd son style sans rien dire. */
.dur p .fort{font-style:normal;color:var(--ink)}

.verdict{margin-top:var(--s6);max-width:26ch;display:grid;gap:6px}
.verdict p{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.3rem,3.6vw,2rem);line-height:1.18;letter-spacing:-.024em}

/* ============ 03 CALCULADORA ============ conteneur 1240, fond ink */
/* Plus de cadre autour du calculateur, et un bloc plus court: il prenait
   la moitie de la section pour dire deux chiffres. */
.calc__box{margin-top:var(--s5)}
.calc__ctrl{display:grid;gap:1px;background:var(--line-ink);
  border-bottom:1px solid var(--line-ink)}
@media(min-width:820px){.calc__ctrl{grid-template-columns:1fr 1fr}}
.ctrl{background:var(--ink);padding:var(--s3) var(--s4)}
.ctrl label{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:var(--s2)}
.ctrl label span:first-child{font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute-ink)}
.ctrl label b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-m);color:var(--paper)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;
  background:transparent;display:block;cursor:ew-resize}
input[type=range]::-webkit-slider-runnable-track{height:1px;background:rgba(232,227,218,.62)}
input[type=range]::-moz-range-track{height:1px;background:rgba(232,227,218,.62)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--paper);margin-top:-6.5px;border:0;
  transition:background var(--d-micro) var(--ease)}
input[type=range]:hover::-webkit-slider-thumb{background:var(--signal)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:0}
.calc__body{display:grid;gap:1px;background:var(--line-ink)}
@media(min-width:900px){.calc__body{grid-template-columns:1.35fr 1fr}}
.calc__c,.calc__n{background:var(--ink)}
.calc__c{padding:var(--s4) var(--s4) var(--s3);display:flex;align-items:center}
#bars{display:block;width:100%;height:158px}
.calc__n{padding:var(--s4)}
.nrow{padding:var(--s3) 0;border-bottom:1px solid var(--line-ink)}
.nrow:last-child{border:0;padding-bottom:0}
.nrow em{font-style:normal;font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute-ink);
  display:block;margin-bottom:var(--s2)}
.big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:clamp(2rem,3.6vw,3.2rem);line-height:1;letter-spacing:-.04em;
  display:block;white-space:nowrap}
.big.acc{color:var(--signal)}
.nrow s{text-decoration:none;display:block;margin-top:var(--s2);
  font-size:var(--t-s);color:var(--mute-ink)}
.cap{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s2);
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-ink)}

/* ============ 04 SERVICOS ============ 1440 pleine largeur */
.srv{border-top:1px solid var(--line)}
.srv__row{display:grid;grid-template-columns:44px 1fr;gap:var(--s2);
  padding:var(--s4) var(--gutter);border-bottom:1px solid var(--line);
  transition:background var(--d-micro) var(--ease),
             padding-left 620ms var(--ease)}
.srv__row:hover{background:rgba(11,20,24,.04);padding-left:calc(var(--gutter) + 20px)}
.srv__row b{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--mute);
  padding-top:.5em}
.srv__row p{grid-column:2/-1}
.srv__row h3{font-family:var(--font-display);font-weight:700;font-size:var(--t-l);
  letter-spacing:-.02em;line-height:1.15}
.srv__row p{font-size:var(--t-s);color:var(--mute);max-width:52ch;margin-top:var(--s1)}
@media(min-width:1000px){
  .srv__row{grid-template-columns:44px .9fr 1.1fr;align-items:baseline}
  .srv__row p{margin-top:0}
}
/* une seule image coupe la liste en deux, plein cadre */
.srv__band{position:relative;overflow:hidden;height:62vh;margin:0;background:var(--ink)}
.srv__band img{object-position:center 74%}   /* le bateau est en bas de la photo */
@media(max-width:760px){.srv__band{height:52vh}}
.srv__band img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}

/* ============ 05 O ESTUDO ============ 1180, fond ink */
.stats{display:grid;gap:var(--s4) var(--s3);margin-top:var(--s6)}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat b{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-xl);line-height:.95;letter-spacing:-.04em}
.stat span{display:block;margin-top:var(--s2);font-size:var(--t-s);
  color:var(--mute-ink);max-width:22ch}
.mapwrap{display:grid;gap:var(--s4);margin-top:var(--s7)}
@media(min-width:1000px){.mapwrap{grid-template-columns:1fr 300px;gap:var(--s5)}}
#mapa{display:block;width:100%;height:600px}
@media(max-width:900px){#mapa{height:420px}}
.leg{display:grid;gap:var(--s3)}
.leg div{display:grid;grid-template-columns:10px 1fr;gap:var(--s2);align-items:start}
.leg i{width:8px;height:8px;border-radius:50%;margin-top:7px}
.leg b{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-s)}
.leg span{color:var(--mute-ink);font-size:var(--t-xs);line-height:1.5;display:block;
  margin-top:4px}
.mapinfo{border-top:1px solid var(--line-ink);margin-top:var(--s2);
  padding-top:var(--s3);min-height:86px}
.mapinfo b{display:block;font-family:var(--font-display);font-size:var(--t-m)}
.mapinfo span{color:var(--mute-ink);font-size:var(--t-xs);line-height:1.5;
  display:block;margin-top:6px}

/* ============ 06 TEMAS ============ 1440 pleine largeur, fond sand
   Aucune image: six palettes, ce qui est plus juste qu'une photo. */
/* Le conteneur donne la distance de defilement, le rail y reste colle.
   On n'epingle PAS la section avec ScrollTrigger: prendre le controle du
   defilement casse facilement sur telephone, alors qu'un sticky tient seul. */
/* 160vh au lieu de 280: la section prend une fois et demie l'ecran, pas
   trois. Les captures sont plus petites en consequence, sinon le rail devrait
   filer six fois plus vite que la page et on ne lirait plus rien. */
/* Plus de conteneur haut ni de scene collante: la section fait un ecran. */
/* La scene se fige, le rail defile a l'horizontale, et quand la derniere
   page est passee la page repart vers le bas toute seule: c'est ce que fait
   un conteneur haut avec un enfant colle. Aucun ScrollTrigger, aucun pin:
   prendre le controle du defilement casse facilement sur telephone. */
/* 300vh, dont 200 de course utile: dix pages sur 1 260 px de defilement
   passaient en trois crans de molette et on ne voyait rien. */
.railwrap{position:relative;min-height:320vh}
.railstage{position:sticky;top:0;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4)}
@media(max-width:760px){.railwrap{min-height:290vh}}
@media (prefers-reduced-motion:reduce){
  .railwrap{min-height:0}
  .railstage{position:static;min-height:0}
}

/* scroll-padding: sans lui, l'accroche colle la carte au bord et coupe le
   numero. */
/* Pas de scroll-snap: avec un defilement pilote, l'accroche rattrape chaque
   image et on saute d'une vue a l'autre au lieu de glisser. */
.rail{display:flex;gap:var(--s3);overflow-x:auto;
  padding:0 var(--gutter);
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}

/* La fiche d'ouverture d'un site: numero, a qui il parle, sa palette. */
.cas{flex:none;width:min(78vw,280px);
  display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s2)}
.cas b{font-family:var(--font-mono);font-size:var(--t-xs);color:rgba(11,20,24,.5);
  letter-spacing:.16em}
.cas h4{font-family:var(--font-display);font-weight:700;font-size:var(--t-l);
  line-height:1.1;letter-spacing:-.022em}
/* JAMAIS un selecteur de balise nu sous un bloc decoupe: apres decoupage,
   ".cas h4 span" touchait aussi les 21 spans de caracteres, chacun passait en
   display:block, et le titre sortait a une lettre par ligne. */
.cas h4 .ou{display:block;font-family:var(--font-mono);font-weight:400;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(11,20,24,.5);margin-top:6px}
.cas__sw{display:flex;height:34px;width:100%;border-radius:6px;overflow:hidden}
.cas__sw i{flex:1}
.cas p{font-size:var(--t-s);color:rgba(11,20,24,.62);max-width:30ch}

/* les deux fleches, discretes, a droite sous le rail */
/* legende a gauche, fleches a droite, sur la meme ligne */
.railpied{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.railnav{display:flex;gap:10px;flex:none}
.railnav__b{width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(11,20,24,.07);color:var(--ink);font-size:16px;line-height:1;
  transition:background var(--d-micro) var(--ease)}
.railnav__b:hover,.railnav__b:focus-visible{background:rgba(11,20,24,.16)}

/* Une page de site. Aucun cadre: l'image se suffit, elle EST le cadre. */
.shot{flex:none;margin:0;
  width:min(92vw,calc(36svh * 1.618))}
.shot img{display:block;width:100%;height:auto;aspect-ratio:1100/680;
  object-fit:cover;border-radius:10px}
@media(max-width:760px){
  .cas{width:66vw}
  .shot{width:92vw}
}

/* ============ 07 METODO ============ 1040 */
/* La photo garde SON format. Elle fait 736 px de large a la source: l'etaler
   sur une bande de 1 040 px la montait a 2,8x sur un ecran Retina, et ca se
   voyait. A 440 px de large elle reste nette. */
.metodo__img{position:relative;overflow:hidden;margin-bottom:var(--s6);
  width:min(92vw,440px);aspect-ratio:736/1308;border-radius:10px;background:var(--ink)}
.metodo__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
@media(min-width:900px){
  #metodo .w-1040{display:grid;grid-template-columns:440px 1fr;
    column-gap:var(--s6);align-items:start}
  .metodo__img{grid-column:1;grid-row:1 / span 4;margin-bottom:0;width:440px;
    position:sticky;top:12vh}
  #metodo .label,#metodo h2,#metodo .small{grid-column:2}
  /* la liste passe a droite aussi: sinon la colonne reste a moitie vide */
  #metodo .sem{grid-column:2;margin-top:var(--s5)}
  #metodo .sm{grid-template-columns:46px 1fr}
  #metodo .sm p{grid-column:2;margin-top:6px}
}
/* 07 · les quatre semaines. Une ligne chacune, et un trait qui se remplit
   sous les numeros: la duree se voit au lieu de se lire. */
.sem{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none}
.sm{display:grid;grid-template-columns:56px 1fr;gap:var(--s3) var(--s4);
  align-items:baseline;padding:var(--s4) 0;position:relative;
  border-top:1px solid var(--line)}
.sm b{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;
  color:var(--sand);font-weight:400}
.sm h4{font-family:var(--font-display);font-weight:700;font-size:var(--t-l);
  letter-spacing:-.022em;line-height:1.1}
.sm p{grid-column:2;font-size:var(--t-s);color:var(--mute);max-width:44ch;
  margin-top:calc(var(--s2) * -1 + 4px)}
@media(min-width:900px){
  .sm{grid-template-columns:56px 200px 1fr;align-items:baseline}
  .sm p{grid-column:3;margin-top:0}
}

/* ============ 08 PRECOS ============ 880, respiration maximale */
.price{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media(min-width:760px){
  /* subgrid: nom, prix, description et liste s'alignent d'une colonne a
     l'autre. Sans ca chaque colonne demarre ou elle veut et ca se voit. */
  .price{grid-template-columns:repeat(3,1fr);gap:var(--s6);align-items:stretch}
  .p-col{grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--s2)}
}
.p-col{display:grid;gap:var(--s2);align-content:start}
/* JAMAIS la classe .w ici: c'est celle que le decoupage pose sur chaque mot.
   Les descriptions heritaient du mono majuscule du nom de plan. */
.p-col .p-nom{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.p-col b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:var(--t-xl);letter-spacing:-.04em;line-height:1;white-space:nowrap}

/* Le plan qui doit sauter aux yeux: une bulle encre, un bandeau sable en
   haut, et le reste de la section reste sur le papier. Pas de contour, un
   aplat: c'est la surface qui differencie, pas un trait. */
/* La bulle du plan mis en avant. Le bandeau est SORTI du flux, sinon cette
   colonne a un enfant de plus que les autres et le subgrid ne peut plus
   aligner les lignes. */
.p-col--fort{position:relative;background:var(--ink);color:var(--paper);
  border-radius:16px;padding:var(--s5) var(--s4) var(--s5);
  margin:calc(var(--s5) * -1) 0 0;
  box-shadow:0 2px 6px rgba(11,20,24,.06),
             0 14px 28px rgba(11,20,24,.10),
             0 40px 70px rgba(11,20,24,.13)}
.p-flag{position:absolute;top:0;left:0;right:0;
  background:var(--sand);color:var(--ink);border-radius:16px 16px 0 0;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;text-align:center;padding:10px var(--s3)}
.p-col--fort .p-nom{color:rgba(232,227,218,.55)}
.p-col--fort .small{color:rgba(232,227,218,.72)}
.p-col--fort li{color:rgba(232,227,218,.78)}
.p-col--fort li::before{background:var(--signal)}
.p-col ul{list-style:none;display:grid;gap:var(--s1);margin-top:var(--s2)}
.p-col li{font-size:var(--t-s);color:var(--mute);padding-left:var(--s3);position:relative}
.p-col li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;
  background:var(--sand)}

/* ============ 09 CONTACTO ============ 1440, deux colonnes, fond sea */
.ct{display:grid;min-height:88svh}
@media(min-width:900px){.ct{grid-template-columns:.85fr 1.15fr}}
.ct__left{position:relative;overflow:hidden;display:flex;align-items:flex-end;
  padding:var(--s5) var(--gutter);min-height:44vh}
.ct__left img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08)}
.ct__left::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,20,24,.14) 0%,rgba(11,20,24,.42) 40%,rgba(11,20,24,.90) 68%,rgba(11,20,24,.98) 100%)}
.ct__left > *{position:relative;z-index:2}
.ct__right{padding:var(--s6) var(--gutter)}
form{display:grid;gap:var(--s3);margin-top:var(--s4)}
.fld label{display:block;font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.13em;text-transform:uppercase;color:rgba(232,227,218,.62);
  margin-bottom:var(--s1)}
.fld input,.fld textarea,.fld select{width:100%;background:transparent;border:0;
  border-bottom:1px solid rgba(232,227,218,.32);padding:12px 2px;font:inherit;
  font-size:var(--t-base);color:var(--paper);
  transition:border-color var(--d-micro) var(--ease)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;
  border-bottom-color:var(--signal)}
.fld textarea{min-height:92px;resize:vertical}
.fld option{background:var(--ink);color:var(--paper)}
.msg{border-left:2px solid var(--paper);padding:var(--s2) 0 var(--s2) var(--s2);
  font-size:var(--t-s);display:none}
.msg.show{display:block}

footer{background:var(--ink);color:var(--mute-ink);padding:var(--s5) var(--gutter) var(--s4)}
.frow{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between}
.fcol{display:grid;gap:var(--s1);font-size:var(--t-s)}
.fcol h5{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:rgba(232,227,218,.62);margin-bottom:var(--s1);font-weight:400}
.fcol a{transition:color var(--d-micro) var(--ease)}
.fcol a:hover,.fcol a:focus-visible{color:var(--paper)}
.fend{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-ink);
  font-size:var(--t-xs)}


/* ============ HERO MOBILE ============
   Le hero desktop est une photo plein cadre avec le texte dessus. En 390px
   ce meme cadre force un 16:9 dans un 9:19.5: object-fit coupe 74% de la
   largeur, il ne reste qu'une bande d'eau vide et le bateau sort du cadre.
   On ne recadre donc pas: on COMPOSE. L'image devient un bloc contenu en
   4:3, le texte passe dessous sur l'encre, et on retire deux blocs pour
   tenir la regle d'une seule idee par ecran. */
@media(max-width:760px){
  /* L'image est maintenant un 9:16 natif: on peut revenir au plein cadre,
     qui est plus fort qu'un bloc contenu, sans rien perdre au recadrage. */
  .hero{min-height:100svh;display:flex;align-items:flex-end;padding-bottom:var(--s4)}
  .hero__img{position:absolute;inset:0;aspect-ratio:auto}
  .hero__img::after{content:none}
  .hero__img picture{display:block;width:100%;height:100%}
  .hero__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
  /* le voile ne sert plus a rendre le texte lisible, seulement a raccorder
     l'image au fond encre */
  .hero__img::after{background:linear-gradient(180deg,
      rgba(11,20,24,.45) 0%,rgba(11,20,24,.12) 34%,rgba(11,20,24,.92) 100%)}
  .hero__in{padding-block:var(--s5) 0}
  .hero .h-hero{max-width:none}
  .hero .lead{margin-top:var(--s2);max-width:none}
  .hero .label{display:none}          /* redondant avec le titre */
  .proof{margin-top:var(--s3);padding-top:var(--s3);
         display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:baseline}
  .proof b{font-size:var(--t-m)}
  .proof span{font-size:var(--t-xs);line-height:1.45}
  .hero__foot{margin-top:var(--s4);gap:var(--s3);flex-direction:column;align-items:stretch}
  .hero .btn{justify-content:center}
}


/* ============ HERO EN SEQUENCE ============
   Veo n'est pas accessible sur ce compte (Flow repond "vous n'avez pas
   acces"). La sequence est donc faite de plans fixes qui se fondent l'un
   dans l'autre avec une lente derive d'echelle. Trois points de vue, huit
   secondes chacun: a l'oeil ca lit comme un montage, ca pese 250 Ko au lieu
   de plusieurs Mo, et ca ne demande aucun decodage video. */
.seq{position:absolute;inset:0;overflow:hidden}
/* la video, quand elle joue, passe devant les plans fixes */
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 900ms var(--ease);z-index:1;
  filter:brightness(.78) contrast(1.04) saturate(1.06)}
.seq.video .hero__vid{opacity:1}
.seq.video .seq__dots{display:none}
.seq__p{position:absolute;inset:0;opacity:0;
  transition:opacity 1200ms var(--ease)}
.seq__p.on{opacity:1}
.seq__p img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transform-origin:center;
  transition:transform 9000ms linear}
.seq__p.on img{transform:scale(1.14)}
/* le voile: le titre doit rester lisible sur les trois plans, pas seulement
   sur le premier */
.seq::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(180deg,rgba(11,20,24,.70) 0%,rgba(11,20,24,.34) 30%,rgba(11,20,24,.90) 100%),
    linear-gradient(90deg,rgba(11,20,24,.66) 0%,rgba(11,20,24,.22) 46%,rgba(11,20,24,0) 72%)}
/* les temoins de plan, en bas: on voit ou on en est */
.seq__dots{position:absolute;left:var(--gutter);bottom:var(--s3);z-index:4;
  display:flex;gap:8px}
.seq__dots i{width:26px;height:2px;background:rgba(232,227,218,.28);display:block}
.seq__dots i.on{background:var(--signal)}
@media(prefers-reduced-motion:reduce){
  .seq__p{transition:none}.seq__p img{transition:none;transform:none}
}


/* ---- lisibilite du titre sur la video, en portrait ----
   Le sujet du plan 9:16 tombait exactement dans la bande de texte. On garde
   le haut du cadre (eau propre) et on pousse le bateau vers le bas, puis on
   renforce le voile la ou le texte se pose. */
@media(max-width:760px){
  /* En portrait le texte occupe la moitie basse: le voile y devient presque
     opaque, et le haut reste ouvert sur l'image. */
  .hero__vid{object-position:center 30%;filter:brightness(.72) contrast(1.04) saturate(1.06)}
  .seq::after{background:linear-gradient(180deg,
      rgba(11,20,24,.46) 0%,
      rgba(11,20,24,.28) 24%,
      rgba(11,20,24,.70) 52%,
      rgba(11,20,24,.94) 100%)}
}


/* ============ 04 SERVIÇOS · demonstrations ============
   Refonte: plus aucun cadre au trait ni de bleu teal. Les boites cerclees
   de bleu fonce donnaient un air de tableau de bord et rappelaient un autre
   projet. Ici la separation vient du TON et de l'espace, jamais d'un contour.
   Une seule teinte chaude, le sable, pour ce qui est actif. */
.srv2{display:grid;gap:0}
.svc{background:var(--paper);padding:var(--s6) var(--gutter);
  display:grid;gap:var(--s4);align-items:center}
.svc + .svc{border-top:1px solid var(--line)}
@media(min-width:1000px){
  .svc{grid-template-columns:.8fr 1.2fr;gap:var(--s6);padding-block:var(--s7)}
  .svc:nth-child(even) .svc__demo{order:-1}
}
.svc__t b{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--sand);
  letter-spacing:.16em}
.svc__t h3{font-family:var(--font-display);font-weight:700;font-size:var(--t-xl);
  letter-spacing:-.018em;line-height:1.06;margin:var(--s2) 0 var(--s3)}
.svc__t p{font-size:var(--t-s);color:var(--mute);max-width:38ch}

/* Plus aucun panneau, plus aucun cadre. Les demos vivent a meme le papier:
   ce qui les separe du texte est l'espace et le ton, jamais un rectangle.
   Regle de lecture: le vide est un aplat encre a 5%, l'etat actif est
   l'encre pleine avec du papier dessus. Un seul accent chaud, le sable. */
.svc__demo{padding:0;min-height:200px;
  display:flex;flex-direction:column;justify-content:center}
.demo__lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(11,20,24,.38);margin-bottom:var(--s4)}

/* 01 · calendrier: la disponibilite se lit au ton, pas a un contour */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal b{font-family:var(--font-mono);font-size:9px;color:rgba(11,20,24,.34);
  text-align:center;padding-bottom:8px;letter-spacing:.1em;font-weight:400}
.cal button{aspect-ratio:1;border:0;background:rgba(11,20,24,.08);
  color:rgba(11,20,24,.7);font-family:var(--font-mono);font-size:11px;
  cursor:pointer;transition:background var(--d-micro) var(--ease),
  color var(--d-micro) var(--ease)}
.cal button:hover:not(:disabled){background:rgba(11,20,24,.13);color:var(--ink)}
.cal button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cal button:disabled{background:transparent;color:rgba(11,20,24,.18);cursor:not-allowed}
.cal__pay{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s2);
  align-items:baseline;font-family:var(--font-mono);font-size:10px;
  color:rgba(11,20,24,.5);min-height:38px;letter-spacing:.08em}
.cal__pay i{font-style:normal}
.cal__pay em{font-style:normal;color:var(--ink);margin-left:auto;
  font-size:var(--t-s);letter-spacing:0}

/* 02 · les vitrines: des barres pleines, jamais des cases cerclees */
.vit{display:grid;gap:8px}
.vit__row{display:grid;grid-template-columns:96px 1fr;gap:var(--s3);
  align-items:center;font-family:var(--font-mono);font-size:10px;
  color:rgba(11,20,24,.5);letter-spacing:.06em}
.vit__slots{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.vit__slots span{height:16px;background:rgba(11,20,24,.09);
  transition:background 480ms var(--ease)}
.vit__slots span.sold{background:var(--ink)}
.vit__slots span.blocked{background:rgba(11,20,24,.025)}
.vit__note{margin-top:var(--s4);font-family:var(--font-mono);font-size:10px;
  color:rgba(11,20,24,.4);min-height:26px;line-height:1.7;letter-spacing:.05em}

/* 03 · la conversation, dans les vraies couleurs de WhatsApp. C'est une
   simulation de LEUR interface: fond #EFE7DE, bulle recue blanche, bulle
   envoyee #D9FDD3, coches de lecture #53BDEB. Les memes largeurs, les memes
   pointes, la meme heure en bas a droite de la bulle. */
.wa{--wa-bg:#EFE7DE; --wa-in:#FFFFFF; --wa-out:#D9FDD3;
  --wa-txt:#111B21; --wa-time:rgba(17,27,33,.45); --wa-tick:#53BDEB;
  border-radius:12px;overflow:hidden;background:var(--wa-bg);
  font-family:var(--font-text);
  box-shadow:0 1px 2px rgba(11,20,24,.06),0 10px 26px rgba(11,20,24,.07)}
.wa__hd{display:flex;align-items:center;gap:10px;background:#F0F2F5;
  padding:9px 13px;border-bottom:1px solid rgba(17,27,33,.08)}
.wa__av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;
  place-items:center;background:#00A884;color:#fff;font-size:11px;
  font-family:var(--font-mono);letter-spacing:.03em}
.wa__who{display:grid;line-height:1.25}
.wa__who b{font-size:13.5px;font-weight:500;color:var(--wa-txt)}
.wa__who em{font-style:normal;font-size:11px;color:rgba(17,27,33,.5)}

.wa__fil{display:grid;gap:3px;padding:14px 12px 16px;min-height:210px;
  align-content:start}
.wa__b{max-width:76%;padding:6px 9px 8px;border-radius:8px;position:relative;
  font-size:13.5px;line-height:1.42;color:var(--wa-txt);
  opacity:0;transform:translateY(7px) scale(.985);
  transition:opacity 260ms var(--ease),transform 260ms var(--ease);
  box-shadow:0 1px .5px rgba(11,20,24,.13)}
.wa__b.on{opacity:1;transform:none}
.wa__b--in{background:var(--wa-in);justify-self:start;border-top-left-radius:0}
.wa__b--out{background:var(--wa-out);justify-self:end;border-top-right-radius:0}
/* la pointe, comme chez eux: un petit triangle colle au coin haut */
.wa__b--in::before,.wa__b--out::before{content:"";position:absolute;top:0;
  width:9px;height:13px}
.wa__b--in::before{left:-8px;background:var(--wa-in);
  clip-path:polygon(100% 0,100% 100%,0 0)}
.wa__b--out::before{right:-8px;background:var(--wa-out);
  clip-path:polygon(0 0,0 100%,100% 0)}
/* l'heure et les coches, en bas a droite dans la bulle */
.wa__m{float:right;display:inline-flex;align-items:center;gap:3px;
  margin:6px -2px -3px 8px;font-size:10.5px;color:var(--wa-time);
  font-family:var(--font-text)}
.wa__ck{width:16px;height:15px;flex:none;margin-bottom:-3px}
.wa__ck path{fill:rgba(17,27,33,.42);transition:fill 400ms var(--ease)}
.wa__ck.lu path{fill:var(--wa-tick)}
/* les trois points pendant que ca ecrit */
.wa__tap{display:inline-flex;gap:3px;padding:3px 1px}
.wa__tap i{width:6px;height:6px;border-radius:50%;background:rgba(17,27,33,.32);
  animation:waTap 1.3s infinite}
.wa__tap i:nth-child(2){animation-delay:.18s}
.wa__tap i:nth-child(3){animation-delay:.36s}
@keyframes waTap{0%,60%,100%{opacity:.28;transform:none}
  30%{opacity:.9;transform:translateY(-3px)}}
.wa__pay{display:inline-block;margin-top:7px;background:#00A884;color:#fff;
  font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:20px;
  opacity:0;transform:scale(.94);
  transition:opacity 280ms var(--ease),transform 280ms var(--ease)}
.wa__pay.on{opacity:1;transform:none}
.chat__t{display:flex;gap:var(--s2);margin-top:var(--s3)}
.chat__t button{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  border:0;background:none;color:rgba(11,20,24,.36);padding:2px 0;cursor:pointer;
  transition:color var(--d-micro) var(--ease)}
.chat__t button[aria-pressed="true"]{color:var(--ink)}
.chat__timer{font-family:var(--font-mono);font-size:10px;color:rgba(11,20,24,.4);
  letter-spacing:.08em;margin-top:var(--s2)}

/* 04 · la fiche Google. C'est une simulation de LEUR interface, donc elle
   emprunte leur typographie (Roboto), leurs couleurs de texte (#202124 et
   #5f6368), leur ambre d'etoiles (#FBBC04) et leur bleu de bouton (#1a73e8).
   Le badge est le vrai: Google verifie un profil d'etablissement et lui donne
   cette coche. Il n'existe pas de badge "meilleur vendeur" chez eux, donc on
   n'en invente pas un. Toujours aucun cadre: la fiche pose a meme le papier. */
.gmb{display:grid;gap:0;font-family:"Roboto",system-ui,sans-serif;
  --g-txt:#202124; --g-sec:#5f6368; --g-blue:#1a73e8}
/* L'avant / apres des avis. Les etoiles de Google sont a leur ambre, les
   pastilles de Tripadvisor a leur vert: ce sont leurs interfaces, on les
   montre telles qu'elles sont. */
.av{display:grid;gap:var(--s3);margin-top:var(--s4)}
.av__r{display:grid;gap:6px 10px;align-items:center;
  grid-template-columns:1fr auto 1fr;grid-template-areas:"q q q" "av fl ap"}
.av__q{grid-area:q;display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--g-sec)}
.av__q svg{width:15px;height:15px;flex:none}
.av__av,.av__ap{display:grid;gap:3px;min-width:0}
.av__av{grid-area:av;opacity:.45}
.av__ap{grid-area:ap}
.av__fl{grid-area:fl;font-size:13px;color:rgba(11,20,24,.3);padding:0 2px}
.av__av b,.av__ap b{font-family:inherit;font-weight:500;font-size:15px;color:var(--g-txt)}
.av__av em,.av__ap em{font-style:normal;font-size:11px;color:var(--g-sec)}
.av__ap b{font-size:19px}

/* les cinq marques: etoiles pour Google, pastilles pour Tripadvisor */
.et,.ro{display:flex;gap:2px;height:12px;align-items:center}
.et s,.ro s{display:block;text-decoration:none}
.et s{width:12px;height:12px;background:rgba(11,20,24,.16);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.et s.on{background:#FBBC04}
.ro s{width:11px;height:11px;border-radius:50%;
  box-shadow:inset 0 0 0 1.6px rgba(11,20,24,.22)}
.ro s.on{box-shadow:inset 0 0 0 6px #00AA6C}
.gmb__top{display:flex;align-items:center;gap:7px}
.gmb__top b{font-family:inherit;font-size:21px;font-weight:500;letter-spacing:0;
  color:var(--g-txt);line-height:1.25}
.gmb__ok{width:15px;height:15px;flex:none}
.gmb__stars{display:flex;gap:3px;align-items:center;margin-top:7px}
.gmb__stars i{width:12px;height:12px;background:rgba(11,20,24,.16);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transition:background 460ms var(--ease)}
.gmb__stars i.on{background:#FBBC04}
.gmb__stars em{font-style:normal;font-family:inherit;font-size:13px;
  color:var(--g-sec);margin-left:7px;letter-spacing:0}
.gmb__cat{font-size:13px;color:var(--g-sec);margin-top:5px}
.gmb__badge{margin-top:9px;font-size:12px;color:var(--g-sec);letter-spacing:0}
.gmb__btn{font-family:inherit;font-size:13px;font-weight:500;letter-spacing:.01em;
  text-transform:none;color:#fff;background:var(--g-blue);justify-self:start;
  border:0;border-radius:100px;padding:9px 19px;margin-top:var(--s3)}
.gmb__ask{font-family:var(--font-mono);font-size:10px;color:rgba(11,20,24,.4);
  margin-top:var(--s4);line-height:1.8;letter-spacing:.05em}

/* 08 · les temoignages, en bulles. Un pave de texte a douze n'est pas lu:
   une bulle avec des initiales et un nom se lit comme une conversation. */
/* Colonnes de type journal plutot qu'une grille rigide: les bulles se
   rangent d'elles-memes et les hauteurs differentes creent le rythme.
   Une grille a deux colonnes egales alignait tout et faisait catalogue. */
.deps{margin-top:var(--s6);columns:1;column-gap:var(--s5)}
@media(min-width:820px){.deps{columns:2}}
@media(min-width:1240px){.deps{columns:3;column-gap:var(--s4)}}
.dep{margin:0 0 var(--s5);display:grid;gap:var(--s3);align-content:start;
  break-inside:avoid}

.dep__t{margin:0;position:relative;font-size:var(--t-s);line-height:1.6;
  color:rgba(232,227,218,.82);background:rgba(232,227,218,.06);
  border-radius:18px 18px 18px 5px;padding:var(--s4);
  /* Pas de -webkit-line-clamp: avec du rembourrage il laisse depasser une
     ligne coupee en deux. Une hauteur limitee plus un fondu se termine net. */
  --lignes:6;
  max-height:calc(var(--lignes) * 1.6em + var(--s4) * 2);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 2.6em), transparent);
          mask-image:linear-gradient(#000 calc(100% - 2.6em), transparent)}
/* hauteurs volontairement inegales: c'est ce qui fait vivre la colonne */
.dep:nth-child(3n+1) .dep__t{--lignes:5}
.dep:nth-child(3n+2) .dep__t{--lignes:8}
.dep:nth-child(4n)   .dep__t{--lignes:4}
.dep.ouvert .dep__t{max-height:none;overflow:visible;
  -webkit-mask-image:none;mask-image:none}
/* la pointe de la bulle, en bas a gauche */
.dep__t::after{content:"";position:absolute;left:0;bottom:-7px;
  width:14px;height:8px;background:rgba(232,227,218,.06);
  clip-path:polygon(0 100%,0 0,100% 0)}

.dep__q{display:grid;grid-template-columns:38px 1fr;gap:0 12px;
  align-items:center;padding-left:2px}
.dep__ini{grid-row:1 / span 2;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--sand);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em}
.dep__q b{font-family:var(--font-display);font-weight:700;font-size:var(--t-s);
  letter-spacing:-.014em;color:var(--paper);align-self:end}
.dep__q span{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(232,227,218,.4);align-self:start}

.dep__tr{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:rgba(232,227,218,.34);padding-left:50px;margin-top:calc(var(--s3) * -1 + 2px)}
.dep__b{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer;
  color:var(--sand);border-bottom:1px solid rgba(201,188,166,.42);
  transition:color var(--d-micro) var(--ease),border-color var(--d-micro) var(--ease)}
.dep__b:hover,.dep__b:focus-visible{color:var(--paper);border-color:var(--paper)}
.dep__b--plus{justify-self:start;margin-top:calc(var(--s3) * -1 + 4px);margin-left:2px}
.dep.ouvert .dep__b--plus{display:none}

/* 05 · la grille, au format 4:5 d'Instagram */
/* Le geste de publier: un plus qui s'allume, puis la photo qui part de lui
   et glisse a sa place dans la grille. */
.ig__bar{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3)}
.ig__plus{width:26px;height:26px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-family:var(--font-mono);font-size:15px;
  line-height:1;background:rgba(11,20,24,.08);color:rgba(11,20,24,.5);
  transition:background 260ms var(--ease),color 260ms var(--ease),
             transform 260ms var(--ease)}
.ig__plus.on{background:var(--ink);color:var(--paper);transform:scale(1.14)}
.ig__act{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(11,20,24,.38);
  transition:color 260ms var(--ease)}
.ig__plus.on + .ig__act{color:var(--ink)}
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ig span{aspect-ratio:4/5;background:rgba(11,20,24,.05);opacity:0;
  background-size:cover;background-position:center;
  transition:opacity 520ms var(--ease),transform 620ms var(--ease)}
.ig span.on{opacity:1;transform:none !important}
.ig__d{font-family:var(--font-mono);font-size:10px;color:rgba(11,20,24,.4);
  margin-top:var(--s3);letter-spacing:.08em}

/* 06 · les deux destins */
.own{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.own__c{display:grid;gap:var(--s2);align-content:start}
.own__c b{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(11,20,24,.38);font-weight:400}

.own__c u{text-decoration:none;font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;font-size:var(--t-2xl);line-height:1;
  letter-spacing:-.03em;color:rgba(11,20,24,.26)}
.own__c.win u{color:var(--ink)}
.own__u{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:rgba(11,20,24,.4);margin-top:-4px}
/* Une seule echelle pour les deux barres: 8 contre 2 000 fait un trait
   de 0,4% a gauche et toute la largeur a droite. C'est ca, la demonstration. */
.own__bar{height:8px;background:rgba(11,20,24,.07);margin-top:var(--s2);width:100%}
.own__bar i{display:block;height:100%;width:0;background:rgba(11,20,24,.3);
  min-width:2px;transition:none}
.own__c.win .own__bar i{background:var(--ink)}
.own__list{display:grid;gap:5px;margin-top:var(--s1);min-height:82px}
.own__list i{font-style:normal;font-family:var(--font-mono);font-size:10px;
  color:rgba(11,20,24,.56);opacity:0;transform:translateY(6px);letter-spacing:.05em;
  transition:opacity 460ms var(--ease),transform 460ms var(--ease)}
.own__list i.on{opacity:1;transform:none}
.own__none{font-family:var(--font-mono);font-size:10px;
  color:rgba(11,20,24,.3);line-height:1.8;letter-spacing:.05em}