/* ============================================================
   Merci Meuf · styles communs à toutes les pages refaites en v5.1
   (menu du bas, haut de page, boutons, formes, pied de page,
   cartes). Les valeurs viennent de tokens.css.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
/* Focus : citron dans les blocs charbon et sur photo, charbon dans les blocs pierre fixes */
.hero,.nb,.foot,.depart,.idees li.k,.tuile.k,.boite.k,.lb-carte.charbon{--focus:var(--lime)}
.uband{--focus:var(--charcoal)}

/* Typo */
.t{font-family:var(--serif);letter-spacing:-.022em;line-height:1.04;text-wrap:balance}
.t i,.it,.it i{font-style:italic}
.it{font-family:var(--serif)}
.mo{font:400 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.mu{color:var(--muted)}
.sec{font:600 26px/1.2 var(--sans)}
.lime{color:var(--lime)}
.hl{background:var(--lime);color:var(--charcoal);padding:0 .2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Mise en page */
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-left:48px;padding-right:48px}}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:56px;align-items:center}
.forme{display:inline-block;line-height:0;flex:none}

/* Boutons pleins, rectangle doux */
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 20px;border-radius:var(--radius-btn);border:0;font:400 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:background .3s ease-in-out,color .3s ease-in-out}
.btn::after{content:">"}
.btn.k{background:var(--charcoal);color:var(--offwhite)}
.btn.k::before{content:"";position:absolute;inset:0;background:#4a4844;transform:scaleX(0);transform-origin:left;transition:transform .45s ease-in-out;z-index:-1}
.btn.k:hover::before{transform:scaleX(1)}
.btn.cr{background:var(--cream);color:var(--charcoal)}
.btn.cr:hover{background:var(--lime)}
.btn.st{background:var(--surface);color:var(--fg)}
.btn.st:hover{background:var(--surface-hover)}

/* Barre du haut : logo et thème */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo .mot{font-family:var(--logo);font-size:28px;letter-spacing:-.06em;line-height:1}
.logo .mot i{font-style:italic}
.theme-btn{width:44px;height:44px;border:0;border-radius:999px;background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.on-photo .theme-btn{background:var(--cream);color:var(--charcoal)}
.theme-btn .sun{display:none}
.is-dark .theme-btn .sun{display:block}
.is-dark .theme-btn .moon{display:none}

/* Menu du bas : pilule charbon */
.nb{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;display:flex;gap:4px;align-items:center;max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;background:var(--charcoal);color:var(--cream);border-radius:999px;padding:6px;font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;box-shadow:0 0 0 1px rgba(240,237,231,.1)}
.nb::-webkit-scrollbar{display:none}
.nb a{padding:12px 15px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .25s ease-in-out}
.nb a:hover{background:#3f3e3b}
.nb a[aria-current]{background:var(--cream);color:var(--charcoal)}
.nb a.home{display:grid;place-items:center;width:42px;height:38px;padding:0}
@media (max-width:640px){.nb a{padding:12px}}

/* Haut de page en photo */
.hero{position:relative;background:var(--charcoal);color:var(--cream);overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,43,43,.35),rgba(43,43,43,.55) 60%,rgba(43,43,43,.82))}
.hero .in{position:relative}
.hero .logo{color:var(--cream)}

/* Point repère (citron) */
.dot{position:absolute;right:16px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--lime)}
.card:hover .dot{animation:mm-pulse 1.6s ease-in-out infinite}
@keyframes mm-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}

/* Univers en bande pierre */
.uband{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--stone);color:var(--charcoal)}
.uband a{display:flex;flex-direction:column;gap:10px;padding:28px 24px 30px;text-decoration:none;transition:background .25s}
.uband a+a{border-left:1px solid rgba(43,43,43,.15)}
.uband a:hover{background:#d6d1c6}
.uband .n{font:italic 400 26px/1.1 var(--serif)}
.uband .d{font-size:15px;line-height:1.45;color:#5f5c56}
@media (max-width:900px){.uband{grid-template-columns:1fr 1fr}.uband a+a{border-left:0}.uband a{border-top:1px solid rgba(43,43,43,.15)}}
@media (max-width:480px){.uband{grid-template-columns:1fr}}

/* Bandes qui s'élargissent */
.bands{display:flex;gap:6px;height:500px}
.band{flex:1;min-width:0;position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--charcoal);color:var(--offwhite);text-decoration:none;transition:flex .5s ease-in-out}
.bands:hover .band{flex:.75}.bands .band:hover{flex:2.4}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .g{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(43,43,43,.82))}
.band .c{position:absolute;left:20px;right:20px;bottom:22px;display:flex;flex-direction:column;gap:6px}
@media (max-width:760px){.bands{flex-direction:column;height:auto}.band{height:170px;flex:none!important}}

/* Photos et cartes */
.photo{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--charcoal)}
.photo img{width:100%;height:100%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{min-height:44px;border:0;border-radius:999px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--fg);font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
span.chip{cursor:default;min-height:36px}

/* Pied de page */
.foot{position:relative;overflow:hidden;background:#2b2b2b;color:#f0ede7;padding-block:72px 120px}
.foot .filigrane{position:absolute;right:-120px;top:-90px;pointer-events:none}
.foot .cols{display:grid;grid-template-columns:repeat(3,auto);gap:14px 56px}
.foot .cols a{text-decoration:none}
.foot .cols a:hover{color:var(--lime)}
.foot .big{display:block;margin-top:56px;font-family:var(--logo);font-size:clamp(72px,14vw,220px);line-height:.85;letter-spacing:-.06em;position:relative}
.foot .big i{font-style:italic}
@media (max-width:640px){.foot .cols{grid-template-columns:repeat(2,auto);gap:12px 32px}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   Le site comme une appli, sur téléphone (planche du 28 oct. 2026)
   ============================================================ */
/* S3 · toucher qui répond : pas de flash gris, pas de zoom au double tap, les boutons s'enfoncent */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,input,label,summary{touch-action:manipulation}
.btn,.chip,.theme-btn,.nb a,.nb .nb-f{transition:transform .15s ease-in-out,background .3s ease-in-out,color .3s ease-in-out}
.btn:not(:disabled):active,.chip:not(:disabled):active,.theme-btn:active{transform:scale(.96)}
.nb a:active .nb-f{transform:scale(.9)}
@media (hover:none){a[class*="carte"]:active,.band:active{transform:scale(.98);transition:transform .15s ease-in-out}}

/* Le menu : sur ordinateur la pilule (le nom long), sur téléphone la barre d'onglets */
.nb .nb-f,.nb .nb-court{display:none}

/* S2 · pages qui s'enchaînent : un fondu doux, le menu ne bouge pas */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease-in-out}
.nb{view-transition-name:menu-bas}

/* Ancre du haut de page collant : n'existe que sur téléphone */
.topbar-place{display:none}

@media (max-width:760px){
  /* M3 · barre d'onglets charbon, collée en bas, toute la largeur */
  .nb{left:0;right:0;bottom:0;transform:none;max-width:none;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:visible;border-radius:0;padding:8px max(4px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));box-shadow:none;border-top:1px solid rgba(240,237,231,.1);font-size:12px;letter-spacing:.03em}
  .nb a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:0;border-radius:0;color:#9d9890;min-width:0}
  .nb a:hover,.nb a[aria-current]{background:none}
  .nb a[aria-current]{color:var(--cream)}
  .nb a.home{display:none}
  .nb .nb-f{display:grid;place-items:center;width:52px;height:30px;border-radius:999px}
  .nb a[aria-current] .nb-f{background:var(--cream);color:var(--charcoal)}
  .nb .nb-court{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .nb .nb-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* la page s'arrête au-dessus de la barre */
  body.avec-menu{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body.avec-menu:has(> footer.foot){padding-bottom:0}
  .avec-menu .foot{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}

  /* S4 · haut de page collant : le logo et le thème restent en haut, sur un fond flouté dès qu'on descend */
  .avec-menu .topbar-place{display:block;height:88px}
  .avec-menu .topbar{position:fixed;top:0;left:0;right:0;z-index:25;max-width:none;padding-top:max(22px,calc(env(safe-area-inset-top,0px) + 10px));transition:padding .25s ease-in-out,background .25s ease-in-out,border-color .25s ease-in-out;border-bottom:1px solid transparent}
  .avec-menu.defile .topbar{padding-block:max(10px,env(safe-area-inset-top,0px)) 10px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .avec-menu.defile .topbar .logo{color:var(--fg)}
  .avec-menu.defile .topbar.on-photo .logo svg rect{fill:currentColor!important}
  .avec-menu.defile .topbar.on-photo .theme-btn{background:var(--surface);color:var(--fg)}
  .avec-menu .topbar .logo .mot,.avec-menu .topbar .logo svg{transition:transform .25s ease-in-out}
  .avec-menu.defile .topbar .logo svg{transform:scale(.8)}
  .avec-menu.defile .topbar .logo .mot{transform:scale(.86);transform-origin:left center}
  .avec-menu.defile .topbar{--focus:var(--fg)}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .btn:active,.chip:active,.theme-btn:active,.nb a:active .nb-f,a[class*="carte"]:active,.band:active{transform:none}
}

/* 28 oct. 2026 : logos des réseaux en haut de l'accueil (sans rond), réseaux et jour / nuit dans le pied de page */
.topbar .reseaux{display:flex;gap:4px;align-items:center}
.topbar .reseaux a{display:grid;place-items:center;width:40px;height:40px;color:inherit}
.topbar.on-photo .reseaux a{color:var(--offwhite)}
.topbar .reseaux a:hover{color:var(--lime)}
.foot-res{display:flex;flex-wrap:wrap;gap:8px}
.foot-res a,.foot .foot-theme{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--strong-line);background:transparent;color:var(--on-strong);font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;width:auto;height:auto;cursor:pointer}
.foot-res a:hover,.foot .foot-theme:hover{border-color:var(--lime);color:var(--lime)}
.foot-res svg{width:18px;height:18px}
@media (max-width:760px){.avec-menu.defile .topbar.on-photo .reseaux a{color:var(--fg)}}
/* Applis du labo : icône carrée et ligne longue (planche 3 ter, 28 oct. 2026 ; icônes du 1er nov. 2026, sans bleu) */
.ico-appli{display:inline-grid;place-items:center;flex:none;border-radius:23%;line-height:0}
/* La feuille qui dépasse : ce qu'on obtient avec une appli, posé sur papier (1er nov. 2026) */
.feuille{position:absolute;display:block;background:var(--paper);color:var(--charcoal);border-radius:8px;padding:10px;line-height:0;box-shadow:0 8px 20px rgba(43,43,43,.22);transform:rotate(-6deg);pointer-events:none}
.feuille-mot{width:170px;padding:12px 14px;font:italic 400 15px/1.3 var(--serif)}
.ligne-appli{display:flex;align-items:center;gap:22px;padding:24px 26px;border-radius:var(--radius-md);text-decoration:none}
.ligne-appli.charbon{background:var(--charcoal);color:var(--cream)}
.ligne-appli.pierre{background:var(--stone);color:var(--charcoal)}
.la-x{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.la-e{font-size:12px;opacity:.75}
.la-t{font:400 clamp(24px,2.6vw,30px)/1.12 var(--serif);letter-spacing:-.015em}
.la-t i{font-style:italic}
.la-p{font-size:15.5px;line-height:1.5;opacity:.85;max-width:62ch}
.la-q{font:italic 400 19px/1.35 var(--serif);opacity:.9}
.ligne-appli.charbon .la-btn{background:var(--cream);color:var(--charcoal)}
.ligne-appli.pierre .la-btn{background:var(--charcoal);color:var(--cream)}
.ligne-appli:hover .la-btn{background:var(--lime);color:var(--charcoal)}
@media (max-width:700px){.ligne-appli{flex-wrap:wrap;padding:22px}.la-btn{width:100%;justify-content:center}}
/* Cartes réflexion (R1) et épisode, rangées qui défilent (pages sujets, 28 oct. 2026) */
.carte-r{position:relative;display:grid;grid-template-columns:42% minmax(0,1fr);align-items:center;min-height:190px;border-radius:var(--radius-md);overflow:hidden;background:var(--paper);text-decoration:none}
.carte-r img{width:100%;height:100%;object-fit:cover;display:block}
.cr-x{display:flex;flex-direction:column;gap:6px;padding:18px 20px}
.cr-t{font:400 22px/1.12 var(--serif);letter-spacing:-.015em}.cr-t i{font-style:italic}
.cr-s{font:italic 400 16px/1.3 var(--serif);color:var(--fg2)}
.carte-e{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 12px 18px;border-radius:var(--radius-md);background:var(--paper);text-decoration:none;height:100%}
.ce-t{font:400 22px/1.12 var(--serif);letter-spacing:-.015em}.ce-t i{font-style:italic}
.ce-s{font-size:15px;line-height:1.45;color:var(--muted)}
.rangee{display:flex;flex-direction:column;gap:16px}
.rangee-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.rangee-h h2{font:600 clamp(22px,2.4vw,28px)/1.2 var(--sans);margin:0}
.rangee-h a{font:400 13px var(--mono);text-transform:uppercase;letter-spacing:.05em;text-decoration:none}
.rangee-h a:hover{text-decoration:underline;text-underline-offset:4px}
.rang-defile{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin;margin-inline:calc(var(--gutter,24px) * -1);padding-inline:var(--gutter,24px);scroll-padding-inline:var(--gutter,24px)}
.rang-defile>*{flex:none;scroll-snap-align:start}
.rang-defile .carte-r{width:min(440px,84vw)}
.rang-defile .carte-e{width:min(270px,70vw)}
.wrap{--gutter:16px}
@media (min-width:700px){.wrap{--gutter:48px}}
.hero .in>.topbar{width:100%;box-sizing:border-box}

/* Étiquettes (labo, « Voir tout »…) : la police des paragraphes, en capitales et en gras (28 oct. 2026) */
.eti,.rangee-h a{font:700 12px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.topbar.logo-droite{justify-content:flex-end}
.carte-r{min-height:150px}

/* 1er nov. 2026 : la barre du haut collante aussi sur ordinateur (comme sur téléphone) */
@media (min-width:761px){
  .avec-menu .topbar-place{display:block;height:84px}
  .avec-menu .topbar{position:fixed;top:0;left:0;right:0;z-index:25;max-width:none;padding-inline:max(48px,calc((100vw - 1280px) / 2 + 48px));transition:padding .25s ease-in-out,background .25s ease-in-out,border-color .25s ease-in-out;border-bottom:1px solid transparent}
  .avec-menu.defile .topbar{padding-block:10px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line);--focus:var(--fg)}
  .avec-menu.defile .topbar .logo{color:var(--fg)}
  .avec-menu.defile .topbar.on-photo .logo svg rect{fill:currentColor!important}
  .avec-menu.defile .topbar.on-photo .reseaux a{color:var(--fg)}
  .avec-menu .topbar .logo .mot,.avec-menu .topbar .logo svg{transition:transform .25s ease-in-out}
  .avec-menu.defile .topbar .logo svg{transform:scale(.8)}
  .avec-menu.defile .topbar .logo .mot{transform:scale(.86);transform-origin:left center}
}

/* 1er nov. 2026 : filtres en onglets (planche 11 bis, G3) : recherche au-dessus, sujets soulignés, liste / grille en icônes */
.filtres{display:flex;flex-direction:column;gap:14px}
.recherche{height:48px;width:100%;box-sizing:border-box;border:0;border-radius:999px;background:var(--paper);color:var(--fg);padding:0 20px;font:400 15px var(--sans)}
.onglets-ligne{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
.onglets{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.onglets::-webkit-scrollbar{display:none}
.onglets:not(.onglets-ligne .onglets){border-bottom:1px solid var(--line)}
.onglets button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;color:var(--muted,#6a665f);font:500 15px var(--sans);white-space:nowrap;cursor:pointer;box-shadow:inset 0 -2px 0 transparent}
.onglets button[aria-pressed="true"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg)}
.onglets button:hover{color:var(--fg)}
.bascule{flex:none;display:inline-flex;padding:4px;border-radius:999px;background:var(--surface)}
.bascule button{width:40px;height:36px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--fg);cursor:pointer}
.bascule button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
@media (max-width:640px){.onglets{gap:20px}}