/* ============================================================================
   Bubble Insight — la couche de design commune à toutes les pages.

   Elle n'existait pas : chaque page portait son propre <style> et sa propre
   copie de l'ancienne palette. C'est ce qui rendait tout changement de
   couleur impossible à tenir d'une page à l'autre.

   La référence est la page simplifiée du 28/08 — Kinfolk pour l'air et le
   sérieux, aplats géométriques pour le peps — avec la palette qu'Audrey a
   composée elle-même le 28/08 et validée : « Je crois que j'aime bien la
   palette là. »

   Une seule police : Instrument Sans, auto-hébergée. Bricolage Grotesque est
   écartée — « je n'aime pas la police du tout ; elle manque d'élégance ».
   ========================================================================= */

:root{
  /* Sa palette. Les neuf teintes dérivées sont calculées avec l'arithmétique
     du sélecteur, et leurs contrastes retombent sur ceux de sa capture :
     13,3:1 pour le texte, 6,8:1 pour le bandeau, 1,6:1 pour l'accent. */
  --paper:#F7F6F1;
  --soft:#E8E8E3;
  --rule:#D6D5D2;
  --ink:#262A2F;
  /* 7E8080 à l'origine : 3,67:1 sur crème, sous les 4,5:1 WCAG AA relevés
     par Lighthouse. 666868 passe sur blanc (5,6), crème (5,2) et soft (4,6)
     en restant un gris doux — 01/09. */
  --ink-soft:#666868;
  --band:#4C5762;
  --band-ink:#FFFFFF;
  /* Corail #DC5E4A essayé le 03/09, abricot rétabli le même jour. */
  --pop:#EEBB7D;
  --pop-ink:#111111;
  --s1:#4C5762;
  --s2:#B6BABB;
  --s3:#EEBB7D;

  /* Son accent est à 1,6:1 sur le fond : parfait en aplat sous du texte
     sombre, trop pâle pour un filet d'un pixel. Cette variante assombrie
     ne sert QUE les traits fins et les petits points, jamais les aplats —
     sinon on trahirait la couleur qu'elle a choisie. */
  --pop-line:#C08A3E;

  --text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --max:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--pop);color:var(--pop-ink)}
:focus-visible{outline:2px solid var(--band);outline-offset:2px}

.wrap,.shell{max-width:var(--max);margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem)}

/* — Le bandeau. Elle le garde : « la couleur, pas le bandeau : je garde le
     bandeau dans une autre teinte. » — */
nav{background:var(--band);color:var(--band-ink)}
.nav-in{
  /* La barre respire plus large que la colonne de contenu : liens
     agrandis le 03/09 « sans passer sur 2 lignes ». */
  max-width:calc(var(--max) + 6rem);margin:0 auto;padding:0 clamp(1.25rem,5vw,3.5rem);
  display:flex;align-items:center;gap:clamp(.9rem,2.2vw,1.8rem);
  min-height:78px;flex-wrap:wrap;
}
.wordmark{
  display:inline-flex;align-items:center;gap:.6rem;
  font-weight:600;font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;
}
/* Le logo vectorisé (vol09 n°13, version blanche) dans le bandeau — 01/09.
   Le footer garde l'anneau composé. */
.wordmark-logo{height:52px;width:auto;display:block}
/* La bulle, en tête — sa demande. Un anneau fin avec son point décalé,
   jamais un rond plat : proscrit depuis le 17/08. */
.wordmark .dot{
  width:1.15em;height:1.15em;border-radius:50%;
  border:1.6px solid currentColor;position:relative;flex:0 0 auto;background:none;
}
.wordmark .dot::after{
  content:"";position:absolute;right:-.16em;bottom:-.04em;
  width:.34em;height:.34em;border-radius:50%;background:var(--pop);
}
.nav-links{display:flex;gap:clamp(.75rem,1.6vw,1.3rem);margin:0 0 0 auto;padding:0;list-style:none;flex-wrap:wrap}
.nav-links a{
  font-size:.9rem;letter-spacing:.02em;text-decoration:none;opacity:.92;
  padding:.25rem 0;border-bottom:1px solid transparent;white-space:nowrap;
}
.nav-links a:hover,.nav-links a:focus-visible{border-bottom-color:currentColor;opacity:1}
.nav-links a[aria-current="page"]{border-bottom-color:var(--pop);opacity:1}
.has-sub{position:relative}
.caret{font-size:.7em;opacity:.7}
.sub{
  position:absolute;left:0;top:100%;z-index:30;min-width:16rem;margin:0;padding:.5rem 0;
  list-style:none;background:var(--band);border-top:1px solid rgba(255,255,255,.18);
  opacity:0;visibility:hidden;transition:opacity .15s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible}
.sub a{display:block;padding:.45rem clamp(1rem,2vw,1.4rem);border-bottom:0;font-size:.85rem}
.sub a:hover{background:rgba(255,255,255,.08)}
.nav-cta{
  font-size:.83rem;text-decoration:none;border:1px solid currentColor;
  padding:.44rem 1rem;white-space:nowrap;
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--pop);color:var(--pop-ink);border-color:var(--pop)}
.lang{font-size:.75rem;letter-spacing:.1em;opacity:.75;white-space:nowrap}
.lang a{text-decoration:none}
.lang a[aria-current="page"]{opacity:1;font-weight:600}

/* — Typographie — */
h1,h2,h3{font-family:var(--text);font-weight:400;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,5.6vw,4.1rem);line-height:1.1;letter-spacing:-.028em}
h2{font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.15;max-width:22ch}
h3{font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
p{margin:0}
.label,.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0;
}
.lede{font-size:1.04rem;color:var(--ink-soft);max-width:56ch;margin:0}
.sub-lede{font-size:1.06rem;color:var(--ink-soft);max-width:34ch;line-height:1.6;margin:0}

/* Le surlignage d'un mot : un aplat, jamais un filet — c'est là que son
   abricot fonctionne le mieux. */
.accent{
  background:linear-gradient(transparent 62%,var(--pop) 62%,var(--pop) 92%,transparent 92%);
  padding:0 .06em;
}

/* — Boutons — */
.btn{
  display:inline-block;font:inherit;font-size:.92rem;font-weight:500;text-decoration:none;
  padding:.82rem 1.7rem;border:1px solid var(--ink);color:var(--ink);background:transparent;
  cursor:pointer;
}
.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--pop);border-color:var(--pop);color:var(--pop-ink)}
.btn.solid:hover,.btn.solid:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.actions{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:clamp(1.5rem,3vw,2.1rem)}
.actions.centre{justify-content:center}

/* — Sections — */
section.blk{padding:clamp(4rem,10vw,7.5rem) 0}
section.blk .label{margin-bottom:1.6rem}
section.blk h2{margin-bottom:1.2rem}
.tinted{background:var(--soft)}
.tinted .shell,.tinted .wrap{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
hr.filet{border:0;border-top:1px solid var(--rule);margin:0}

/* — L'ouverture — */
.hero{padding:clamp(1.8rem,3.5vw,2.8rem) 0 0;text-align:center}
.hero .eyebrow{margin-bottom:clamp(1rem,2vw,1.4rem)}
.hero h1{margin:0 auto clamp(1.3rem,3vw,1.9rem);max-width:19ch}
.hero .sub-lede{margin-left:auto;margin-right:auto}
.hero-band{margin-top:clamp(1.6rem,3.2vw,2.6rem)}
.hero-band > img,.hero-band > video{width:100%;height:clamp(220px,34svh,340px);object-fit:cover;object-position:50% 50%}
/* Le roulé en calques : fond vide librement recadré, bulle + ombre
   positionnées par le script (bornées à la hauteur de bande : la bulle est
   toujours entière). L'image fixe d'origine reste le secours sans JS et en
   prefers-reduced-motion. */
.roll-stage{display:none;position:absolute;inset:0;overflow:hidden}
.roll-stage .roll-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 51%}
.roll-mover{position:absolute;inset:0;transform:translateX(calc(-1 * var(--roll-dist,120vw)))}
.roll-mover img{position:absolute;max-width:none;height:auto;right:auto;bottom:auto}
.roll-sync .roll-stage{display:block}
.roll-sync .hero-still{display:none}
.roll-sync .roll-mover{animation:roll-in 6s cubic-bezier(.35,.45,.25,1) .4s forwards}
@keyframes roll-in{to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .roll-stage,.roll-sync .roll-stage{display:none}
  .roll-sync .hero-still{display:block}
}
/* Les trois lignes se révèlent au passage de la bulle. */
.roll-sync .spaces-sync .space{opacity:0;transform:translateY(6px);
  transition:opacity .6s ease,transform .6s ease}
.roll-sync .spaces-sync .space.lit{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .roll-sync .spaces-sync .space{opacity:1;transform:none;transition:none}
}

/* — Le premier écran, au pixel : le filet bas de la bande « Space to… »
     coïncide avec le bas de l'écran au chargement (01/09). Le bandeau de nav
     fait 78px ; la sphère absorbe la hauteur restante. min-height, pas
     height : sur un petit écran le contenu reprend son cours et défile. — */
.fold{min-height:calc(100svh - 78px);display:flex;flex-direction:column}
.fold .hero-band{flex:1 1 0;min-height:240px;position:relative;overflow:hidden}
/* Pleine largeur, et la sphère jamais coupée : le sujet (boule + ombre) vit
   entre 28 % et 74 % de la hauteur du fichier — le recadrage ne mange que le
   mur et la table. object-position 51 % garde ce couloir au centre. */
.fold .hero-band > img,.fold .hero-band > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 51%}

/* — La bande des trois « Space to… » — */
.spaces{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:repeat(3,1fr)}
.space{padding:clamp(1rem,2vw,1.35rem) clamp(1rem,2.5vw,2rem);display:flex;align-items:center;gap:.9rem}
.space+.space{border-left:1px solid var(--rule)}
.space i{width:.92rem;height:.92rem;border-radius:50%;border:1.5px solid var(--ink);flex:0 0 auto;display:block}
.space:nth-child(2) i{border-color:var(--band)}
.space:nth-child(3) i{border-color:var(--pop-line)}
.space span{font-size:.96rem;line-height:1.4}

/* — Les aplats géométriques : sa réponse « oui » aux formes dessinées — */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.forms{aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;background:var(--soft)}
.forms>*{position:relative;overflow:hidden}
.f-a{background:var(--s1)}
.f-a::after{content:"";position:absolute;inset:18%;border-radius:50%;background:var(--paper)}
.f-b{background:var(--s2)}
.f-b::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:100%;background:var(--s3);border-radius:100% 0 0 0}
.f-c{background:var(--soft)}
.f-c::after{content:"";position:absolute;inset:22%;border:2px solid var(--s1);border-radius:50%}
.f-d{background:var(--s3)}
.f-d::after{content:"";position:absolute;right:-30%;top:-30%;width:100%;height:100%;border-radius:50%;background:var(--s1)}

/* — Grille de cartes : offres, membres de l'écosystème, témoignages — */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:2.5rem}
.cards.trois{grid-template-columns:repeat(3,1fr)}
.cards.deux{grid-template-columns:repeat(2,1fr)}
.card{display:flex;flex-direction:column;gap:.9rem;text-decoration:none;height:100%}
.card .plate{aspect-ratio:1;position:relative;overflow:hidden;background:var(--soft)}
.card .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card p{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
/* Les quatre offres en petites capitales. all-small-caps et non small-caps :
   les titres anglais portent quatre initiales majuscules là où le français
   n'en a qu'une, et small-caps rendrait les trois langues différentes.
   Le letter-spacing négatif hérité de h3 colle les capitales : on le renverse.
   Limité à #do — les autres grilles .card gardent leur casse. */
#do .card h3{font-variant-caps:all-small-caps;letter-spacing:.06em;font-size:1.05rem;line-height:1.35}
/* margin-top:auto — sans lui, un titre à deux lignes décale le lien et la
   rangée perd sa ligne de base. */
.card .more{
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  border-bottom:1px solid var(--pop-line);align-self:flex-start;padding-bottom:1px;margin-top:auto;
}

/* — Citations — */
blockquote{
  margin:0;font-size:clamp(1.25rem,2.9vw,1.85rem);line-height:1.38;
  letter-spacing:-.015em;max-width:26ch;font-weight:400;
}
.byline{margin-top:1.4rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* — Corps de texte long : « à propos », mentions légales — */
.prose{max-width:62ch}
/* Variantes : intro pleine largeur (alignée sur la grille qui suit) et
   section resserrée quand elle suit directement le titre de page — 01/09. */
.prose-full,.prose-full .lede{max-width:none}
section.blk.blk-tight{padding-top:clamp(1.8rem,3.5vw,2.6rem)}

/* — Le témoignage vedette (page témoignages, choix A du 01/09) : composé
     comme le manifeste, corps un peu plus mesuré pour les longues citations,
     pas de filet haut (le titre de page en a déjà un). — */
.manifesto-testimonial{border-top:0}
/* Deux colonnes seulement (pas de photo à droite) et citation pleine
   largeur — « occupons davantage la largeur », 01/09. */
.manifesto.manifesto-testimonial .wrap{grid-template-columns:auto 1fr}
.manifesto.manifesto-testimonial .big{font-size:clamp(1.15rem,2.3vw,1.55rem);max-width:none}
.manifesto-testimonial .who-row{display:flex;align-items:center;gap:1rem;margin-top:1.6rem}
.manifesto-testimonial .avatar{width:6rem;height:6rem;border-radius:50%;object-fit:cover;flex:none;background:var(--soft)}
.manifesto-testimonial .who{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
/* La vedette en vidéo (04/09) : le lecteur d'abord, le contexte à côté.
   Pas de guillemet ouvrant — ce n'est pas une citation mais un reportage. */
.manifesto.manifesto-video{border-top:0}
.manifesto.manifesto-video .wrap{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center}
.video-vedette{margin:0}
.video-vedette video{display:block;width:100%;height:auto;background:var(--ink)}
.manifesto-video .label{margin-bottom:.9rem}
.manifesto-video .big{font-size:clamp(1.1rem,2.2vw,1.45rem);max-width:34ch}
.manifesto-video .credit{margin-top:1.4rem;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft)}
@media (max-width:60rem){
  .manifesto.manifesto-video .wrap{grid-template-columns:1fr}
}
.prose p+p{margin-top:1.1rem}
.prose h2{margin:2.6rem 0 1rem}
.prose h3{margin:2rem 0 .6rem}
.prose ul{margin:1rem 0;padding-left:1.2rem}
.prose li+li{margin-top:.4rem}
.prose a{text-decoration:underline;text-decoration-color:var(--pop-line);text-underline-offset:2px}

/* — Formulaire — */
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem}
input[type=text],input[type=email],textarea,select{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);line-height:1.5;
  padding:.7rem .8rem;border:1.5px solid var(--rule);background:#FFFFFF;
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--band);outline-offset:1px;border-color:var(--band)}
.field+.field{margin-top:1.1rem}

/* — Pied de page — */
footer.foot{background:var(--band);color:var(--band-ink)}
footer.foot .wrap,footer.foot .shell{padding-top:3rem;padding-bottom:3rem}
footer.foot a{text-decoration:none;opacity:.9}
footer.foot a:hover{opacity:1;text-decoration:underline}
.foot-main{display:grid;grid-template-columns:1.6fr 1fr 1.3fr 1.3fr;gap:clamp(1.5rem,4vw,3rem)}
.foot-brand .wordmark-logo{height:88px}
.foot-brand p{margin-top:1rem;font-size:.9rem;opacity:.82;max-width:34ch;line-height:1.6}
/* La triade, dite par la lumière : un anneau fin et son point, jamais des
   ronds plats. Les trois teintes sortent de la palette en cours — l'ancienne
   version les avait codées en dur en corail, turquoise et ardoise, trois
   couleurs qu'elle a rejetées. */
.foot-triad{display:flex;align-items:center;gap:.5rem;margin-top:1.4rem}
.foot-triad i{display:block;border-radius:50%;border:1.6px solid currentColor;opacity:.75}
.foot-triad i:nth-child(1){width:.5rem;height:.5rem;background:var(--pop);border-color:var(--pop)}
.foot-triad i:nth-child(2){width:.85rem;height:.85rem}
.foot-triad i:nth-child(3){width:1.2rem;height:1.2rem}
.foot-col h3{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:.9rem}
.foot-col ul{margin:0;padding:0;list-style:none;font-size:.9rem}
.foot-col li+li{margin-top:.5rem}
.foot-legal-id{margin-top:1rem;opacity:.7;line-height:1.55}
.foot-bottom{
  margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.18);
  display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.8rem;opacity:.8;
}
.foot-lang{margin-left:auto}

@media (max-width:60rem){
  .duo{grid-template-columns:1fr}
  .cards,.cards.trois{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:38rem){
  .spaces{grid-template-columns:1fr}
  .space+.space{border-left:0;border-top:1px solid var(--rule)}
  .cards,.cards.trois,.cards.deux{grid-template-columns:1fr}
  .nav-links{display:none}
  .foot-fine{margin-left:0}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
@media (max-width:60rem){ .foot-main{grid-template-columns:1fr 1fr} }
@media (max-width:38rem){ .foot-main{grid-template-columns:1fr} .foot-lang{margin-left:0} }

/* — Le manifeste : un grand guillemet, deux paragraphes, et elle.
     La photo (Martin Pilette, bois et crème — la palette) tient la
     troisième colonne ; sous 60rem elle passe sous le texte. — */
.manifesto{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.manifesto .wrap{padding-top:clamp(3.5rem,8vw,6rem);padding-bottom:clamp(3.5rem,8vw,6rem);
  display:grid;grid-template-columns:auto 1fr minmax(230px,30%);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.manifesto-photo{margin:0}
.manifesto-photo img{display:block;width:100%;height:auto}
@media (max-width:60rem){
  .manifesto .wrap{grid-template-columns:auto 1fr}
  .manifesto-photo{grid-column:2;max-width:24rem}
}
.bigquote{font-size:clamp(4rem,10vw,7rem);line-height:.7;color:var(--pop);user-select:none}
.manifesto .big{font-size:clamp(1.3rem,2.8vw,1.8rem);line-height:1.35;letter-spacing:-.015em;max-width:34ch}
.manifesto .small{margin-top:1.2rem;color:var(--ink-soft);max-width:52ch}

/* — Les convictions : du texte et des filets, plus de photos de fond — */
/* L'intro de la section prend la même largeur que la grille des cartes
   en dessous (demande du 01/09) — les gabarits 22ch/56ch sautent ici. */
#believe h2,#believe .lede{max-width:none}
.beliefs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3.5rem);
  margin-top:2.5rem}
/* Le procédé précédent — photo de réunion sous un voile encre, texte révélé au
   survol — est retiré (demande d'Audrey, 04/09). Deux reproches, tous deux
   fondés : les photos ne disaient rien des convictions, et le texte restait
   invisible tant qu'on ne survolait pas. Il est maintenant toujours lisible.

   Depuis le 08/09, les quatre images sont celles qu'Audrey a envoyées
   elle-même (compositions géométriques en papier découpé, format 5:4),
   recolorées dans la palette du site : ses corails deviennent l'abricot, ses
   gris foncés l'ardoise, son fond crème le papier de la section. */
.belief{display:grid;gap:.8rem;align-content:start}
/* Une vignette, pas un panneau : à pleine largeur de colonne l'image écrasait
   le texte. Au format 5:4 de ses images, pour ne rien rogner de ses
   compositions. */
.belief-visuel{display:block;width:clamp(12rem,23vw,20rem);aspect-ratio:5/4;object-fit:cover;
  background:var(--soft);margin-bottom:.6rem}
.belief h3{font-size:1.15rem}
.belief p{font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.belief .closing{color:var(--ink)}

@media (max-width:640px){
  .beliefs{grid-template-columns:1fr}
  /* Sur une colonne, la vignette calée à gauche laissait la moitié droite vide :
     elle se centre, le texte reste au fer à gauche (demande de Laurent, 07/09). */
  .belief-visuel{margin-left:auto;margin-right:auto}
}

/* — « Why organisations choose Bubble Insight » — */
.why-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--rule)}
.why-list li{padding:1.1rem 0;border-bottom:1px solid var(--rule);font-size:clamp(1.1rem,2.2vw,1.4rem);
  letter-spacing:-.015em;color:var(--ink-soft)}
/* Le même surlignage bas que « space » dans le titre d'accueil : un aplat
   qui ne couvre que le pied du mot, jamais un filet. */
.why-list em{font-style:normal;color:var(--ink);
  background:linear-gradient(transparent 62%,var(--pop) 62%,var(--pop) 92%,transparent 92%);
  padding:0 .06em}

/* — L'interlude : une phrase seule — */
.interlude{background:var(--band);color:var(--band-ink)}
.interlude .wrap{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(3rem,7vw,5rem);text-align:center}
.interlude p{font-size:clamp(1.3rem,3.2vw,2rem);line-height:1.3;letter-spacing:-.02em;max-width:28ch;margin:0 auto}

@media (max-width:60rem){
  .beliefs{grid-template-columns:1fr}
  .manifesto .wrap{grid-template-columns:1fr}
}

/* Quatre offres, quatre compositions. Le même jeu de formes répété quatre
   fois donnait une rangée monotone : on tourne l'attribution des teintes et
   le sens des quarts de cercle, sans changer le vocabulaire. */
.cards .card:nth-child(2) .f-a{background:var(--s3)}
.cards .card:nth-child(2) .f-b::after{border-radius:0 100% 0 0}
.cards .card:nth-child(2) .f-d{background:var(--s2)}
.cards .card:nth-child(2) .f-d::after{background:var(--s3);right:auto;left:-30%}

.cards .card:nth-child(3) .f-a{background:var(--s2)}
.cards .card:nth-child(3) .f-a::after{background:var(--s1)}
.cards .card:nth-child(3) .f-b{background:var(--s1)}
.cards .card:nth-child(3) .f-b::after{background:var(--s2);border-radius:0 0 100% 0}
.cards .card:nth-child(3) .f-d{background:var(--soft)}
.cards .card:nth-child(3) .f-d::after{background:var(--s3)}

.cards .card:nth-child(4) .f-a{background:var(--soft)}
.cards .card:nth-child(4) .f-a::after{background:var(--s3);inset:26%}
.cards .card:nth-child(4) .f-b{background:var(--s1)}
.cards .card:nth-child(4) .f-b::after{background:var(--s2);border-radius:0 0 0 100%}
.cards .card:nth-child(4) .f-c::after{border-color:var(--s3)}
.cards .card:nth-child(4) .f-d{background:var(--s2)}
.cards .card:nth-child(4) .f-d::after{background:var(--s1);right:auto;left:-30%;top:auto;bottom:-30%}

/* — En-tête de page intérieure : un filet et deux lignes, pas une photo de
     fond. « Plus élégant à l'ouverture. » — */
.page-head{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule)}
/* Tête de page avec illustration à droite du titre (témoignages, 01/09). */
.page-head-illu .wrap{display:grid;grid-template-columns:1fr minmax(220px,320px);
  gap:clamp(1.5rem,4vw,3rem);align-items:center}
.page-head-illu .head-illu{width:100%;height:auto;display:block}
@media (max-width:60rem){
  .page-head-illu .wrap{grid-template-columns:1fr}
  .page-head-illu .head-illu{max-width:15rem}
}
.page-head .label{margin-bottom:1rem}
.page-head h1{max-width:20ch}

/* — Récit avec portrait tenu à droite — */
.story-grid{display:grid;grid-template-columns:1fr 22rem;gap:clamp(2rem,5vw,4rem);align-items:start}
.portrait{margin:0;position:sticky;top:2rem}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--soft)}
.portrait figcaption{margin-top:.7rem;font-size:.82rem;color:var(--ink-soft)}

/* — Listes mises en avant — */
.freedoms,.shifts{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.5rem}
.freedoms li,.shifts li{padding-left:1.4rem;position:relative;color:var(--ink-soft)}
.freedoms li::before,.shifts li::before{
  content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
  border-radius:50%;border:1.5px solid var(--pop);
}
.shifts li::before{background:var(--pop);border-color:var(--pop)}

/* — Texte décalé, illustration à côté (À propos, puis Écosystème) — */
.about-more{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
/* En miroir sur l'écosystème : la même asymétrie deux fois se remarquerait. */
.about-more.inverse{grid-template-columns:minmax(0,1fr) minmax(0,21rem)}
.about-more.inverse .about-illu{order:2}
.about-illu{margin:0}
.about-illu img{display:block;width:100%;height:auto;background:var(--soft)}

/* — Diplômes et certifications — */
/* Deux colonnes égales laissaient sept lignes de vide sous « Education », qui
   n'a que deux entrées face aux neuf de sa voisine : la grille suit désormais
   le contenu, et les certifications se répartissent sur deux colonnes. */
.cred-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,2fr);
  gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
.cred-col{border-top:1px solid var(--rule);padding-top:1.15rem}
.cred-col h3{margin-bottom:1rem}
.cred-col ul{margin:0;padding:0;list-style:none;font-size:.95rem;color:var(--ink-soft)}
/* La même puce que les bascules du récit, en plus discret : sans elle, les
   deux listes se lisaient comme des paragraphes cassés. */
.cred-col li{padding-left:1.35rem;position:relative;margin-bottom:.5rem;break-inside:avoid}
.cred-col li::before{content:"";position:absolute;left:0;top:.55em;
  width:.42rem;height:.42rem;border-radius:50%;background:var(--pop)}
.cred-col:nth-child(2) ul{columns:2;column-gap:clamp(1.5rem,3vw,2.5rem)}

@media (max-width:60rem){
  .cards.membres{row-gap:5rem;margin-top:5rem}
  .temoin-bande, .temoin-bande.inverse{grid-template-columns:1fr}
  .temoin-bande.inverse .temoin-photo{order:0}
  .temoin-photo{max-width:12rem}
  .temoin-paire{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}
  .portrait{position:static;max-width:22rem}
  .cred-grid{grid-template-columns:1fr}
  .about-more, .about-more.inverse{grid-template-columns:1fr}
  .about-more.inverse .about-illu{order:0}
  .about-illu{max-width:20rem}
  .cred-col:nth-child(2) ul{columns:1}
}

/* — Témoignages — */
/* La rangée défilable : toutes les cartes sur une ligne, défilement
   horizontal à la molette/au doigt, accroche douce carte par carte. */
/* — Témoignages : composition éditoriale — */
/* La rangée défilable calait toutes les cartes sur la plus longue citation et
   écrasait l'attribution contre l'avatar. Ici chaque témoignage prend le
   format que sa longueur appelle. */
.temoignages{display:grid;gap:clamp(1.5rem,3vw,2.5rem);margin-top:2.5rem}

/* Bande : le portrait en grand d'un côté, la citation de l'autre. Une bande
   sur deux inverse l'ordre, sinon les photos forment une colonne. */
.temoin-bande{margin:0;display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,2.8rem);align-items:start;
  background:var(--paper);border:1px solid var(--rule);padding:clamp(1.4rem,3vw,2.2rem)}
.temoin-bande.inverse{grid-template-columns:minmax(0,1fr) minmax(0,15rem)}
.temoin-bande.inverse .temoin-photo{order:2}
/* Les portraits sont des carrés de 480 px : au-delà de 240 px d'affichage ils
   mollissent sur les écrans à haute densité. */
.temoin-photo{display:block;width:100%;max-width:15rem;aspect-ratio:1;
  object-fit:cover;background:var(--soft)}

.temoin-paire{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem)}
.temoin-carte{margin:0;background:var(--paper);border:1px solid var(--rule);
  padding:clamp(1.4rem,3vw,2rem);display:flex;flex-direction:column}
/* La photo passe en tête de carte, à la taille d'un vrai portrait : en pastille
   de 50 px sous la citation, elle ne se voyait pas. 13rem tient largement dans
   les 480 px de la source, même sur écran à haute densité. */
.temoin-carte .temoin-photo{max-width:13rem;margin-bottom:1.3rem}

.temoignages .mark{display:block;font-size:2.6rem;line-height:.6;color:var(--pop);
  user-select:none;margin-bottom:1rem}
.temoin-carte .temoin-photo+.mark{margin-top:0}
/* Le blockquote global impose une grande capitale et 26ch : ici la citation
   est du texte courant, pas un exergue. */
.temoignages blockquote{margin:0;max-width:none;font-weight:400;
  font-size:clamp(.98rem,1.6vw,1.08rem);line-height:1.6;letter-spacing:0}
.temoin-carte blockquote{flex:1}

/* Nom et fonction sur leurs propres lignes : en capitales dans la colonne
   étroite d'une carte, une fonction longue tenait sur dix lignes. */
.temoin-qui{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem;
  padding-top:1.2rem;border-top:1px solid var(--rule)}
.temoin-qui .avatar{width:3.1rem;height:3.1rem;border-radius:50%;object-fit:cover;
  flex:none;background:var(--soft)}
.temoin-nom{display:block;font-weight:600;font-size:.95rem;color:var(--ink)}

/* Photos de contexte : une salle, un atelier, une équipe — des images larges,
   pas des portraits. Hauteur fixe et largeur libre, donc, plutôt qu'un carré
   qui les recadrerait de travers. Elles débordent en défilant si elles sont
   nombreuses, sans jamais élargir la page. */
.temoin-photos{display:flex;gap:.55rem;list-style:none;margin:1.1rem 0 0;padding:0;
  overflow-x:auto;scrollbar-width:thin}
.temoin-photos li{flex:none}
.temoin-photos img{display:block;height:5.5rem;width:auto;max-width:none;
  object-fit:cover;background:var(--soft)}
.temoin-bande .temoin-photos img{height:11rem}
.temoin-photos li{display:flex;flex-direction:column;gap:.45rem;max-width:22rem}
.temoin-photo-texte{margin:0;font-size:.85rem;line-height:1.45;color:var(--ink-soft)}

/* La vignette devient un bouton : le contour au clavier doit rester visible,
   et le curseur annoncer que ça s'ouvre. */
.temoin-photo-ouvrir{display:block;padding:0;border:0;background:none;cursor:zoom-in}
.temoin-photo-ouvrir:focus-visible{outline:2px solid var(--band);outline-offset:2px}

/* — Agrandissement — */
.visionneuse{border:0;padding:0;background:none;max-width:min(92vw,1100px);max-height:92vh}
.visionneuse::backdrop{background:rgba(38,42,47,.82)}
.visionneuse img{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;
  margin:0 auto;background:var(--soft)}
.visionneuse-legende{margin:.7rem 0 0;text-align:center;font-size:.85rem;color:var(--paper)}
.visionneuse-legende[hidden]{display:none}
.visionneuse-fermer{position:absolute;top:-2.6rem;right:0;width:2.2rem;height:2.2rem;
  border:0;border-radius:50%;background:none;color:var(--paper);font-size:1.7rem;
  line-height:1;cursor:pointer}
.visionneuse-fermer:hover,.visionneuse-fermer:focus-visible{background:rgba(255,255,255,.16)}
@media (max-width:40rem){ .visionneuse-fermer{top:auto;bottom:-2.8rem;right:50%;transform:translateX(50%)} }
.temoin-role{display:block;font-size:.85rem;color:var(--ink-soft);line-height:1.4;margin-top:.15rem}

/* — Cartes de l'écosystème : photo, langues, lien LinkedIn — */
/* Chaque membre dans sa carte, la bulle du portrait à cheval sur le bord haut :
   sans fond ni bordure, les dix membres se lisaient comme trois colonnes de
   texte plutôt que comme dix fiches.

   La bulle est sortie du flux : décalée par une marge négative, elle allongeait
   la carte (qui porte height:100%) au-delà de sa cellule, et la rangée suivante
   venait mordre dessus. L'écart entre rangées lui réserve sa place. */
/* La marge du haut doit elle aussi loger la bulle : à 2.5rem, la première
   rangée de portraits mordait sur le paragraphe d'introduction. */
.cards.membres{row-gap:6rem;margin-top:6rem}

/* La liste des outils : trente entrées, en colonnes pour qu'elle se parcoure
   du regard plutôt qu'à la ligne. La puce reprend l'abricot des convictions. */
.outils-liste{columns:3;column-gap:clamp(1.5rem,3vw,2.5rem);list-style:none;
  margin:1.6rem 0 0;padding:0;font-size:.92rem;color:var(--ink-soft)}
.outils-liste li{position:relative;padding-left:1.1rem;margin-bottom:.45rem;
  break-inside:avoid;line-height:1.4}
.outils-liste li::before{content:"";position:absolute;left:0;top:.5em;
  width:.35rem;height:.35rem;border-radius:50%;background:var(--pop)}
@media (max-width:60rem){ .outils-liste{columns:2} }
@media (max-width:40rem){ .outils-liste{columns:1} }

/* — Bande des certifications — */
/* Les logos sont détourés : le blanc de fond a été retiré à la source, quand
   il y en avait un, en ne touchant qu'au blanc qui borde l'image — le fond
   violet de 16PF ou le cadre rouge de Hogan appartiennent à ces marques. */
.logos-bande{overflow:hidden;margin-top:clamp(2rem,4vw,3rem);padding:1.4rem 0}
.logos-piste{display:flex;width:max-content;animation:logos-defile 70s linear infinite}
.logos-piste:hover{animation-play-state:paused}
.logos-serie{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.logos-serie li{margin-right:clamp(1.5rem,3vw,2.75rem)}
.logos-serie img{display:block;height:3.4rem;width:auto;max-width:none;object-fit:contain}

@keyframes logos-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .logos-bande{overflow-x:auto}
  .logos-piste{animation:none}
}

/* Les logos clients, en mosaïque : vingt-neuf marques se lisent mieux toutes
   posées que défilant une à une. Chaque logo occupe une case de largeur fixe et
   se borne en hauteur comme en largeur, si bien qu'un logo très horizontal
   reste dans sa case au lieu de la déborder. */
.logos-mosaique{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));
  list-style:none;gap:clamp(1.6rem,3vw,2.6rem) 2rem;
  margin:clamp(2rem,4vw,3rem) 0 0;padding:0}
.logos-mosaique li{aspect-ratio:3/1;
  display:flex;align-items:center;justify-content:center}
.logos-mosaique img{display:block;max-height:100%;max-width:100%;
  width:auto;height:auto;object-fit:contain}
.card.member{position:relative;background:var(--soft);gap:.7rem;
  padding:5.4rem clamp(1.2rem,2.5vw,1.7rem) clamp(1.4rem,3vw,1.9rem)}
.card .member-photo{position:absolute;top:-3.4rem;left:clamp(1.2rem,2.5vw,1.7rem);
  width:8.5rem;height:8.5rem;border-radius:50%;object-fit:cover;background:var(--soft)}
.card.member h3{margin-top:0}
.card.member p{max-width:none}
.card .langs{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.card .linkedin{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;color:var(--band);transition:color .2s,background-color .2s;
  border-radius:50%}
.card .linkedin:hover,.card .linkedin:focus-visible{color:var(--pop-ink);background:var(--pop)}
.card .linkedin svg{display:block}
/* Logos partenaires : hauteur commune, largeur libre — les deux SVG n'ont
   pas le même ratio (Mine 148×112, MRG 191×69). */
.card .partner-logo{height:3.4rem;width:auto;margin-top:auto;align-self:start}
/* Le logo Mine est presque carré (148×112) : à hauteur égale il paraît
   minuscule à côté du MRG tout en largeur — on lui donne plus de haut. */
.card .partner-logo.tall{height:5.2rem}

/* — Page d'offre : le texte à gauche, l'encadré « comment ça prend vie » à
     droite. Elle a jugé cette mise en page « presque bonne ». — */
.body-grid{display:grid;grid-template-columns:1fr 20rem;gap:clamp(2rem,5vw,4rem);align-items:start;
  padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.how{background:var(--soft);padding:clamp(1.4rem,3vw,2rem);position:sticky;top:2rem}
.how h2{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;margin-bottom:1rem;max-width:none}
.how ul{margin:0;padding:0;list-style:none;font-size:.95rem;color:var(--ink-soft)}
.how li{padding-left:1.2rem;position:relative}
.how li+li{margin-top:.6rem}
.how li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:.45rem;border-radius:50%;background:var(--pop)}
.how .note{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--rule);font-size:.88rem;color:var(--ink-soft)}
.tagline{margin-top:1rem;font-size:1.06rem;color:var(--ink-soft);max-width:44ch}

@media (max-width:60rem){
  .body-grid{grid-template-columns:1fr}
  .how{position:static}
}

/* — Contact : le formulaire, et le Calendly juste à côté, « sur la page
     contact seulement, à côté du formulaire » (27/08). — */
.contact-grid{display:grid;grid-template-columns:1fr 20rem;gap:clamp(2rem,5vw,4rem);align-items:start;
  padding-top:clamp(2.5rem,6vw,4rem);padding-bottom:clamp(2.5rem,6vw,4rem)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.field-row+.field{margin-top:1.1rem}
form .btn{margin-top:1.4rem}
.error{display:block;margin-top:.3rem;font-size:.82rem;color:#B0453A}
.sent{background:var(--soft);border-left:3px solid var(--pop);padding:.9rem 1.1rem;margin:1.4rem 0}
/* Le pot de miel : hors écran, jamais display:none — un robot ignore un
   champ caché, il remplit un champ qu'il croit visible. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aside{background:var(--soft);padding:clamp(1.4rem,3vw,2rem);position:sticky;top:2rem;display:grid;gap:.9rem}
.aside h2{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;max-width:none}
.aside p{font-size:.93rem;color:var(--ink-soft);line-height:1.55}
.aside .mail{font-weight:600;text-decoration:underline;text-decoration-color:var(--pop-line);text-underline-offset:3px}

@media (max-width:60rem){
  .contact-grid{grid-template-columns:1fr}
  .aside{position:static}
}
@media (max-width:38rem){ .field-row{grid-template-columns:1fr} }

/* L'espacement vertical entre champs ne doit pas s'appliquer à l'intérieur
   d'une rangée à deux colonnes : il y décalait le second champ de 17,6 px. */
.field-row .field+.field{margin-top:0}

/* ── Deux réglages faits sur l'anglais, que le français fait dérailler ──
   Le titre : 87 caractères en anglais, 104 en français. À la même taille il
   passait de trois à cinq lignes et mangeait 45 % du premier écran. On
   descend l'échelle et on élargit la mesure — la taille n'a jamais été le
   grief, c'est la longueur du français qui l'est.
   Le bandeau : les intitulés français font 1 086 px pour 1 068 disponibles,
   d'où le sélecteur de langue rejeté à la ligne. On resserre les gouttières
   plutôt que de rapetisser le texte. */
h1{font-size:clamp(1.9rem,4.2vw,3.25rem)}
.hero h1{max-width:27ch}

.nav-in{gap:clamp(.8rem,1.7vw,1.5rem)}
.nav-links{gap:clamp(.7rem,1.4vw,1.15rem)}
.nav-links a{white-space:nowrap}
.lang,.nav-cta{flex:0 0 auto}

/* Entre 38rem et 72rem, les intitulés français et néerlandais ne laissent
   plus la place au sélecteur de langue : il tombait à la ligne à gauche,
   ce qui avait l'air d'un accident. On assume la deuxième rangée et on
   l'aligne à droite, sous le bouton — le bandeau respire au lieu de casser. */
@media (min-width:38.01rem) and (max-width:72rem){
  .nav-in{padding-top:.6rem;padding-bottom:.6rem;min-height:0}
  .nav-in .lang{margin-left:auto;order:3}
  .nav-in .nav-cta{order:2}
}

/* Le menu se replie à 56rem et non 38rem : entre les deux, les intitulés
   se cassaient sur trois rangées, ce qui avait l'air d'un bug. Sous ce
   seuil, le burger prend le relais (01/09) : il rouvre les mêmes liens en
   panneau sous le bandeau, sous-menu des offres indenté. */
.nav-burger{display:none}
@media (max-width:56rem){
  nav{position:relative}
  .nav-links{display:none}
  .nav-in{padding-top:.55rem;padding-bottom:.55rem}
  .nav-in .lang{margin-left:0;order:3}
  .nav-burger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    order:4;width:2.6rem;height:2.6rem;padding:.55rem;
    background:none;border:1.5px solid currentColor;color:inherit;cursor:pointer;
  }
  .nav-burger span{display:block;height:1.5px;background:currentColor;transition:transform .2s,opacity .2s}
  nav.nav-open .nav-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  nav.nav-open .nav-burger span:nth-child(2){opacity:0}
  nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  nav.nav-open .nav-links{
    display:flex;flex-direction:column;gap:.15rem;
    position:absolute;top:100%;left:0;right:0;z-index:40;
    background:var(--band);margin:0;
    padding:.9rem clamp(1.25rem,5vw,3.5rem) 1.3rem;
    border-top:1px solid rgba(255,255,255,.16);
    box-shadow:0 22px 34px rgba(0,0,0,.28);
  }
  nav.nav-open .nav-links a{font-size:.98rem;padding:.5rem 0}
  nav.nav-open .sub{
    position:static;opacity:1;visibility:visible;min-width:0;
    background:none;border-top:0;margin:0;padding:0 0 .3rem 1.1rem;
  }
  nav.nav-open .caret{display:none}
}

/* ── Le titre d'accueil, réglé par langue ──
   La même phrase fait 73 caractères en anglais et 104 en français : 43 % de
   plus. À taille égale l'anglais tient sur deux lignes et le français sur
   trois, et le bloc français écrasait l'ouverture. Le site étant trilingue,
   l'échelle l'est aussi — l'attribut lang est déjà sur <html>. */
html[lang="fr"] .hero h1,
html[lang="nl"] .hero h1{font-size:clamp(1.75rem,3.5vw,2.7rem);max-width:30ch}

/* — Galerie : bandeau en boucle — */
/* La piste contient deux fois la même série. L'animation la décale d'exactement
   une série, donc l'image qui sort à gauche est déjà revenue à droite : la
   boucle n'a pas de couture. La marge portée par chaque vignette (et non un
   gap sur la piste) est ce qui rend ce compte juste. */
.galerie{overflow:hidden;padding:clamp(2.5rem,6vw,4.5rem) 0;background:var(--paper)}
.galerie-piste{display:flex;width:max-content;animation:galerie-defile 80s linear infinite}
.galerie-piste:hover{animation-play-state:paused}
.galerie-serie{display:flex;margin:0;padding:0;list-style:none}
.galerie-serie li{margin-right:clamp(.75rem,1.5vw,1.25rem)}
.galerie-serie img{display:block;height:clamp(11rem,20vw,16rem);width:auto;
  max-width:none;object-fit:cover;background:var(--soft)}

@keyframes galerie-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Sans animation, le bandeau reste parcourable à la main plutôt que figé sur
   ses trois premières images. */
@media (prefers-reduced-motion:reduce){
  .galerie{overflow-x:auto}
  .galerie-piste{animation:none}
}