/* ============================================================
   HOME V5 — système de composition
   Axe central · menu-terminal · bento · statement plein écran.

   QUATRE REGISTRES, PAS UN DE PLUS
     .display  très grand — hero, chiffres, statement, contact
     .titre    grand — titres de section, clients
     body      normal
     .ui       petit — menu, libellés des boxes, pied de page
   Une police (Inter, déjà auto-hébergée), trois graisses (400/500/600 —
   la 600 uniquement pour les chiffres en gras des accroches).
   Palette : papier · blanc · encre · gris · quatre densités de rose.
   ============================================================ */

/* V18b — corps : Inter auto-hébergée · titres : Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap');
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* NEXUS — papier de sécurité : périwinkle, menthe, cuivre sur encre indigo */
  /* V17 MONOCLE — la palette exacte des design tokens de monocle.com :
     les couleurs prononcées (jaunes 500/400, bleu 500, rouge 500) ET
     leurs tons doux (jaunes 50/100, bleus 100/200, saumon 300). Encre
     noire, crème en fond, rouge en micro-touches. */
  /* Répartition MONOCLE (analysée sur leur site) : ~90 % de blanc et
     de crème avec l'encre noire et des filets gris ; le jaune fort en
     PETITS éléments seulement (contours, boutons) ; les tons pâles en
     fonds discrets ; le bleu jamais en grand aplat ; le rouge en
     micro-signes. */
  --papier: #FFFFFF;          /* neutral-50 — leur fond principal */
  --blanc: #FFFFFF;           /* les cartes */
  --creme: #FDFCF3;           /* yellow-100 — sections et états doux */
  --encre: #000000;           /* l'encre éditoriale */
  --gris: #6E6E6E;            /* neutral-500 — leur texte secondaire */
  --panneau: #FDFBE4;         /* yellow-50 — le jaune doux, au menu */

  --jaune: #FFC500;           /* yellow-500 — LE jaune Monocle */
  --jaune-vif: #FFD400;       /* yellow-400 — le second jaune prononcé */
  --jaune-pale: #FDFBE4;      /* yellow-50 — le jaune discret */
  --bleu: #25AAE1;            /* blue-500 — traits */
  --bleu-guide: #64D5FF;      /* blue-200 = leur --surface-travel, LE bleu
                                 des City Guides (token exact) — CTA principaux */
  --bleu-clair: #64D5FF;      /* blue-200 */
  --bleu-pale: #E5F4FC;       /* blue-100 */
  --jaune-fonce: #C79000;     /* le jaune foncé — micro-touches (ex-rouge) */
  --saumon: #F07060;          /* salmon-300 — venn */

  --accent-1: var(--creme);       /* voile — survols des boxes */
  --accent-2: var(--creme);       /* fonds doux, box ouverte */
  --accent-3: color-mix(in srgb, var(--jaune) 35%, var(--blanc)); /* sélection */
  --accent-4: var(--jaune);       /* petits indicateurs : dot, fil, séparateurs — LE jaune Monocle */
  --aube: var(--jaune);
  --ligne-lilas: #1690C4;         /* venn : bleu */
  --ligne-menthe: var(--saumon);  /* venn : saumon */
  --ligne-cuivre: var(--jaune-fonce); /* venn : jaune profond */

  --grotesk: "Inter", "Suisse Int'l", -apple-system, "Helvetica Neue", sans-serif;
  --titres: "Poppins", "Inter", sans-serif;

  --t-display: clamp(52px, 9.6vw, 150px);
  --t-titre: clamp(30px, 3.9vw, 58px);
  --t-body: 17px;
  --t-ui: 12px;

  --rayon: 8px;
  --gap: clamp(18px, 2vw, 26px); /* de l'air pour la plaque décalée */
  --marge: clamp(16px, 4vw, 40px);
  --max: 1240px;
  --s-section: clamp(64px, 9vw, 112px);
}
@media (min-width: 1024px) { :root { --t-body: 18px; --t-ui: 13px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
strong { font-weight: 600; }
body {
  font-family: var(--grotesk);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }

/* ---------- les quatre registres ---------- */
.display { font-size: var(--t-display); font-weight: 500; line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; }
.titre   { font-size: var(--t-titre);   font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.ui      { font-size: var(--t-ui);      font-weight: 500; line-height: 1.2;  letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- un lien, un bouton ---------- */
.lien {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  transition: text-decoration-color 0.25s ease;
}
.lien:hover { text-decoration-color: currentColor; }
.lien .arr, .btn .arr { display: inline-block; transition: transform 0.25s ease; }
.lien:hover .arr, .btn:hover .arr, a.box:hover .arr { transform: translateX(5px); }
.lien:hover .arr-bas, .box:hover .arr-bas { transform: translateY(4px); }

.btn {
  display: inline-block;
  padding: 15px 22px;
  font-weight: 500;
  color: var(--encre);
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--accent-2);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--encre); color: var(--papier); }

/* ---------- le menu-terminal : un objet, pas une barre ---------- */
.term {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 6px 6px 6px 16px;
  background: color-mix(in srgb, var(--panneau) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 13px;
  white-space: nowrap;
}
.term .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-4);
  margin-right: 14px;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.term:hover .dot { transform: scale(1.25); }
.term a {
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--gris);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.term a:hover { background: var(--blanc); color: var(--encre); }
.term a.actif { color: var(--encre); }
.term a.actif::before { content: ''; }
/* le sélecteur de langue : discret, au bout du menu */
.term .sep { width: 1px; height: 16px; margin: 0 4px 0 8px; background: color-mix(in srgb, var(--gris) 35%, transparent); }
.term a.lang { padding: 9px 8px; font-size: 11px; }
@media (max-width: 899px) { .term .sep { margin: 0 2px 0 4px; } .term a.lang { padding: 9px 6px; } }

/* ---------- composition centrée ---------- */
.centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 3vw, 40px);
  margin-inline: auto;
}

/* ---------- hero : typographie, espace, une lueur ----------
   plein écran : la lueur remplit tout le premier écran */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 96px var(--marge) 40px;
}
.hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  /* la lueur emplit le hero : dense en bas, l'air libre en haut */
  background:
    radial-gradient(75% 85% at 50% 100%, var(--accent-2) 0%, transparent 80%),
    linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--accent-2) 70%, transparent) 100%);
  pointer-events: none;
}
.hero .centre { position: relative; z-index: 1; max-width: 1120px; gap: clamp(18px, 2.8vh, 32px); }
/* les liens du hero restent en encre pleine sur la lueur */
.hero .lien { color: var(--encre); }
.hero .ui { color: var(--gris); }
.hero h1 { max-width: 10.6em; }
.hero p { max-width: 30em; }
/* le bouton en avant, le lien secondaire dessous, centrés */
.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: clamp(4px, 1vw, 12px);
}
/* sur la lueur rose, le bouton passe en encre pour se détacher */
.hero-cta .btn { background: var(--encre); color: var(--papier); }
.hero-cta .btn:hover { background: var(--blanc); color: var(--encre); }

/* ---------- clients : une composition typographique ---------- */
.clients { padding: clamp(72px, 9vw, 128px) var(--marge) 0; }
.clients p {
  max-width: 1100px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.55em;
  row-gap: 0.08em;
  text-align: center;
}
.clients .sep { color: var(--accent-4); }

/* ---------- bento : quelques gros objets ---------- */
.bento {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-section) var(--marge) 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.box {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 32px);
  min-height: clamp(240px, 26vw, 360px);
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), background-color 0.4s ease;
}
a.box:hover { transform: translateY(-4px); background: var(--accent-1); }
.box .ui { color: var(--encre); }
.box .chiffre { font-size: min(var(--t-display), 30cqw); }
.box .chiffre-long { font-size: min(var(--t-display), 17cqw); }
.box .chiffre + p, .box .chiffre-long + p { margin-top: 10px; max-width: 18em; }
.box-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 24px; }
.box-pied > span:first-child { max-width: 24em; }

.box-rose { background: var(--accent-2); }
a.box-rose:hover { background: var(--accent-3); }

.box-grad {
  background: var(--accent-2);
  transition: background-color 0.4s ease, transform 0.4s cubic-bezier(.2,.7,.2,1);
  justify-content: flex-end;
}
a.box-grad:hover { background: var(--accent-3); }

/* bento 1 — preuves */
.b-wingo   { grid-column: 1 / 9;  grid-row: 1 / 3; min-height: clamp(380px, 40vw, 560px); }
.b-wingo .chiffre { font-size: min(36cqw, 230px); } /* la plus grande box porte le plus grand chiffre */
.b-20      { grid-column: 9 / 13; grid-row: 1; }
.b-grad    { grid-column: 9 / 13; grid-row: 2; }
.b-fischer { grid-column: 1 / 13; min-height: clamp(240px, 22vw, 320px); }
.b-fischer .large {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 40px;
}
.b-fischer .large p { max-width: 20em; }

/* bento 2 — autres projets */
.b-tiers { grid-column: span 4; }
.tous { margin-top: clamp(32px, 4vw, 56px); text-align: center; }

/* ---------- à propos : court ---------- */
.apropos { padding: clamp(32px, 4.5vw, 56px) var(--marge) 0; }
.apropos .centre { max-width: 38em; gap: clamp(20px, 2.4vw, 32px); }
.portrait { width: min(300px, 64vw); height: auto; border-radius: var(--rayon); filter: grayscale(1); }
/* le parcours et la FAQ : colonne de lecture, alignée à gauche */
.longue {
  max-width: 38em;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-titre { margin-top: clamp(40px, 6vw, 72px); }
.qr { max-width: 38em; text-align: left; }
.qr p:first-child { font-weight: 600; }
.qr p + p { margin-top: 6px; }
.qr + .qr { margin-top: clamp(20px, 3vw, 28px); }
.apropos p { max-width: 34em; }

/* ---------- contact : un dernier écran presque vide ---------- */
.contact {
  position: relative;
  min-height: 74svh;
  display: grid;
  place-items: center;
  padding: clamp(96px, 12vw, 160px) var(--marge) 140px;
}
.contact::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50vh;
  background: radial-gradient(60% 90% at 50% 0%, var(--accent-2) 0%, transparent 72%);
  opacity: 0.8;
  pointer-events: none;
}
.contact .centre { position: relative; max-width: 900px; }
.contact .voies { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }

/* ---------- pied de page ---------- */
footer { padding: 0 var(--marge) 40px; }
footer p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  color: var(--gris);
  text-align: center;
}
footer a:hover { color: var(--encre); }

/* ---------- apparition au scroll ---------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); }
.rv.vu { opacity: 1; transform: none; }

/* ---------- mobile : de grands blocs, pas des cartes ---------- */
@media (max-width: 899px) {
  .term { top: 12px; padding: 5px 5px 5px 14px; }
  .term a { padding: 9px 10px; }
  .hero { padding-top: 100px; }
  .bento > .box { grid-column: 1 / -1; grid-row: auto; }
  .b-wingo { min-height: 72svh; }
  .b-20, .b-grad { min-height: 44svh; }
  .b-fischer { min-height: 52svh; }
  .b-tiers { min-height: 56svh; }
  /* sur mobile les résultats occupent vraiment le bloc */
  .box .chiffre { font-size: min(34cqw, 150px); }
  .box .chiffre-long { font-size: min(20cqw, 150px); }
  .b-wingo .chiffre { font-size: min(38cqw, 230px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .box, .box-grad, .term .dot, .lien .arr, .btn .arr { transition: none; }
}

/* ============================================================
   BOXES DÉPLIABLES (projets, bio, FAQ) — la box s'élargit au clic
   ============================================================ */
.b-7 { grid-column: span 7; }
.b-5 { grid-column: span 5; }

.depliable { cursor: pointer; }
.depliable:not(.ouverte):hover { transform: translateY(-4px); background: var(--accent-1); }
.depliable:not(.ouverte):hover .plus .arr { transform: rotate(90deg); }
/* la box activée se voit : aplat rose, libellés en encre */
.depliable.ouverte { grid-column: 1 / -1; background: var(--accent-2); }
.depliable.ouverte .ui { color: var(--encre); }
/* la tête reste cliquable pour refermer ; le texte laisse la place au bouton Fermer */
.depliable.ouverte .box-tete { padding-right: clamp(100px, 14vw, 130px); }

/* la tête : tout le teaser est le bouton */
.box-tete {
  all: unset;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  flex: 1;
  width: 100%;
  cursor: pointer;
}
.box-tete:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
.accroche { max-width: 30em; }
.accroche strong { font-weight: 600; }

/* l'aperçu : l'image du projet, visible avant d'ouvrir */
.apercu {
  border-radius: calc(var(--rayon) - 6px);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--blanc);
}
.apercu img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.depliable:not(.ouverte):hover .apercu img { transform: scale(1.02); }
.apercu-contenue img { object-fit: contain; padding: clamp(12px, 8%, 40px); }
.depliable.ouverte .apercu { display: none; } /* le détail montre la grande image */
.plus .arr { display: inline-block; transition: transform 0.3s ease; }
.depliable.ouverte .plus { display: none; }

/* fermer : icône et texte, en haut à droite de la bento ouverte */
.fermer-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: clamp(10px, 1.4vw, 20px);
  right: clamp(8px, 1.2vw, 18px);
  padding: 12px; /* cible tactile confortable */
  z-index: 2;
  display: none;
  align-items: center;
  gap: 8px;
  font-size: var(--t-ui);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fermer-btn .croix { font-size: 1.5em; line-height: 1; letter-spacing: 0; }
.fermer-btn:hover { color: var(--accent-4); }
.fermer-btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
.depliable.ouverte .fermer-btn { display: inline-flex; }

/* le détail : se déplie en hauteur (pilotée en JS, fiable partout) */
.box-detail {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.55s cubic-bezier(.2,.7,.2,1);
}
.detail-in {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 56px);
}
.detail-in img { width: 100%; height: auto; border-radius: calc(var(--rayon) - 6px); }
.detail-blocs { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 3vw, 40px); }
.detail-blocs h3 { margin-bottom: 10px; color: var(--gris); }
.detail-blocs p { max-width: 34em; }
@media (min-width: 900px) {
  .detail-blocs { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 80px); }
}

/* l'impact : une rangée de grands chiffres */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(24px, 3vw, 48px) clamp(36px, 5vw, 80px);
  padding-block: clamp(8px, 1.5vw, 24px);
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-width: 15em;
}
.stat .ui { color: var(--gris); }

/* ============================================================
   COMPLÉMENTS UNE-PAGE — logos, domaines, FAQ bento, contact
   ============================================================ */

/* les références : une bento de logos à côté de la bio */
.refs { justify-content: flex-start; gap: clamp(20px, 2.4vw, 28px); }
.refs .ui { color: var(--gris); }
.refs-grille {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 32px) clamp(16px, 2vw, 28px);
  align-items: center;
  justify-items: center;
  align-content: space-evenly;
  padding-block: clamp(8px, 1.2vw, 16px);
}
.refs-grille img { height: clamp(17px, 1.8vw, 24px); width: auto; max-width: 100%; filter: brightness(0) opacity(0.55); }
.refs-grille img.lg-haut { height: clamp(26px, 2.7vw, 38px); }

/* le portrait : cadre dans la couleur signature, image en noir et blanc.
   Le cadre vit sur un conteneur — un filtre désature TOUT l'élément,
   bordure comprise. */
.cadre {
  display: inline-block;
  border: 8px solid var(--accent-2);
  border-radius: var(--rayon);
  overflow: hidden;
  line-height: 0;
}
.cadre .portrait { border: none; border-radius: 0; }

/* l'intro de la zone projets : un titre posé, sans écraser la zone */
.intro {
  max-width: 30em;
  margin: 0 auto;
  padding: 0 var(--marge);
  text-align: center;
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}
.intro + .bento { padding-top: clamp(36px, 4.5vw, 64px); }

/* domaines : trois formats qui convergent vers l'impact */
.domaines { padding: var(--s-section) var(--marge) 0; }
.domaines .centre { max-width: 900px; }
.venn-intro { color: var(--encre); }

/* le venn : trois grands cercles, un minimum de texte, la densité fait le reste */
.venn { width: min(100%, 760px); height: auto; }
.venn circle {
  mix-blend-mode: multiply;
  stroke: var(--encre);
  stroke-opacity: 0.12;
  stroke-width: 1;
}
.venn .c-continu   { fill: var(--accent-3); fill-opacity: 0.10; }
.venn .c-projet    { fill: var(--accent-2); fill-opacity: 0.14; }
.venn .c-transfert { fill: var(--accent-4); fill-opacity: 0.07; }
.venn text { font-family: var(--grotesk); fill: var(--encre); text-anchor: middle; }
.venn .venn-titre  { font-size: 22px; font-weight: 600; }
.venn .venn-txt    { font-size: 17px; font-weight: 400; }
.venn .venn-centre { font-size: 20px; font-weight: 600; }

/* la variante verticale : trois cercles en chaîne pour les petits écrans */
.venn-mobile { display: none; width: min(100%, 380px); }
.venn-mobile .venn-titre  { font-size: 23px; }
.venn-mobile .venn-txt    { font-size: 18px; }
.venn-mobile .venn-centre { font-size: 22px; }
@media (max-width: 639px) {
  .venn-desktop { display: none; }
  .venn-mobile { display: block; }
}

/* FAQ en bento */
.faq { padding: var(--s-section) var(--marge) 0; }
.faq > .titre { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.faq .bento { padding: 0; }
.box-faq { min-height: 0; justify-content: flex-start; gap: 10px; text-align: left; }
.box-faq p:first-child { font-weight: 600; }
.b-4 { grid-column: span 4; }
.b-6 { grid-column: span 6; }

/* mission : la ligne d'ouverture du détail */
.mission { font-weight: 600; }

/* résultats : la liste des chiffres du cas */
.chiffres { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.detail-blocs-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  text-align: left;
}
.detail-blocs-3 h3 { margin-bottom: 10px; color: var(--gris); }
@media (min-width: 900px) {
  .detail-blocs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 64px); }
}

/* fil de lecture : où j'en suis sur la page */
.progression { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent-4); z-index: 60; }

/* copier l'adresse en un clic */
.copier {
  all: unset;
  cursor: pointer;
  font-size: var(--t-ui);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  padding: 7px 12px;
  border-radius: 9px;
  background: var(--panneau);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.copier:hover { color: var(--encre); background: var(--blanc); }
.copier:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* ============================================================
   BIO ET FAQ DÉPLIABLES
   ============================================================ */
.b-centre { grid-column: 1 / -1; }
@media (min-width: 900px) { .b-centre { grid-column: 3 / 11; } .depliable.ouverte.b-centre { grid-column: 1 / -1; } }
.box .cadre { width: min(210px, 48vw); }
.box .portrait { width: 100%; }
.bio-detail p { max-width: 38em; }
.bio-detail p + p { margin-top: 14px; }

/* FAQ : une question par ligne, un simple + à droite */
.box-faq {
  grid-column: 1 / -1;
  min-height: 0;
  padding: clamp(18px, 2.2vw, 26px) clamp(22px, 2.6vw, 36px);
}
.box-faq .box-tete { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; }
.box-faq .accroche { font-weight: 600; max-width: none; }
.box-faq .signe { font-size: 24px; line-height: 1; transition: transform 0.3s ease; }
.box-faq.ouverte .signe { transform: rotate(45deg); }
.box-faq.ouverte .box-tete { padding-right: 0; } /* pas de bouton Fermer ici */
.box-faq .detail-in { padding-top: 16px; gap: 0; }
.box-faq .detail-in p { max-width: 42em; }

/* la box d'appel en fin de projets : un projet en tête ? → contact */
.box-cta { justify-content: space-between; }
.box-cta .cta-titre {
  font-size: clamp(20px, 2.1vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 12em;
}
.box-cta .btn { align-self: flex-start; background: var(--encre); color: var(--papier); }
a.box-cta:hover .btn { background: var(--blanc); color: var(--encre); }
@media (max-width: 899px) {
  /* sur mobile, la box d'appel se dimensionne sur son contenu */
  .box-cta { min-height: 0; gap: 28px; }
}

/* ============================================================
   V17b — MONOCLE éditorial : blanc dominant, encre noire, le jaune
   fort UNIQUEMENT en contour des bento et sur les boutons, le jaune
   pâle pour les dégradés, le bleu réduit aux traits du venn, le
   rouge en micro-signes. Plat, subtil, topographie et grain gardés.
   ============================================================ */

::selection { background: var(--accent-3); color: var(--encre); }

/* les courbes de niveau : la topographie du fond, comme les
   fines lignes gravées des pages du passeport */
:root {
  --topo: url("topo.svg");
}
/* V18 — la topographie de carte suisse revient en fond (courbes de
   niveau irrégulières de topo.svg, tracées à l'encre, opacités .05-.09
   cuites dans le fichier — régénérable via topo_gen.py) */
:root { --topo: url("topo.svg"); }
body { background: var(--topo), var(--papier); }

/* les titres : Poppins, géométrique et franche */
.display, .titre, .intro, .cta-titre {
  font-family: var(--titres);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.intro { font-size: clamp(24px, 2.7vw, 37px); }
.box-cta .cta-titre { font-size: clamp(24px, 2.6vw, 35px); }

/* le grain : le papier de sécurité, sur tout le site.
   Il sert aussi de dithering aux lueurs (anti-banding, surtout OLED). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* le hero : plus aucun dégradé — le papier, la topographie, l'encre.
   Il garde le fold à lui seul (min-height 100svh) ; son bloc descend
   un peu pour réduire le vide entre le CTA et la section suivante */
.hero::after { content: none; }
.hero { padding-top: calc(96px + 9svh); }

/* les boutons : JAUNE PLEIN, noirs au survol — mêmes angles que les bento */
.btn { background: var(--jaune); color: var(--encre); border-radius: var(--rayon); }
.btn:hover { background: var(--encre); color: var(--blanc); }
.hero-cta .btn { background: var(--jaune); color: var(--encre); }
.hero-cta .btn:hover { background: var(--encre); color: var(--blanc); }
.box-cta .btn { background: var(--jaune); color: var(--encre); }

/* le titre tient sur deux lignes à toutes les largeurs (plafond par
   langue, recalé pour la serif plus étroite) */
.hero h1 { font-size: min(8.8vw, 106px); }
html[lang^="de"] .hero h1 { font-size: min(9.8vw, 118px); }
html[lang="en"] .hero h1 { font-size: min(8vw, 95px); }

/* les bento : jaune pâle, à FILET NOIR fin — la ligne de la référence */
.box {
  background: var(--jaune-pale);
  border: 1px solid var(--encre);
  box-shadow: none;
}
.box .ui { color: var(--encre); }
/* pas de gras dans les textes des bento — les chiffres restent en ligne */
.box strong { font-weight: 400; }
/* le carré jaune devant les libellés, comme les marqueurs de section Monocle */
.box .ui::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 10px;
  background: var(--jaune);
  border-radius: 50%;
  vertical-align: baseline;
}
.depliable.ouverte .ui::before { background: var(--encre); }

/* le JAUNE = l'état sélectionné ; le BLEU City Guides = le survol */
::selection { background: var(--jaune); color: var(--encre); }
.depliable.ouverte { background: var(--jaune); }

.depliable:not(.ouverte):hover { background: var(--bleu-guide); }
a.box:hover { background: var(--bleu-guide); }
a.box-grad:hover { background: var(--bleu-guide); }
a.box-cta:hover .btn { background: var(--encre); color: var(--blanc); }
.term a:hover { background: var(--bleu-guide); color: var(--encre); }
.copier:hover { background: var(--bleu-guide); color: var(--encre); }
.lien:hover { text-decoration-color: var(--bleu-guide); }
.btn:hover { background: var(--bleu-guide); color: var(--encre); }
.hero-cta .btn:hover { background: var(--bleu-guide); color: var(--encre); }

/* le NOIR éditorial : le menu-terminal, le contact et le pied de page —
   comme le panneau final « On en parle ? » de la référence */
/* la barre Monocle : jaune, pleine largeur, permanente — le point
   passe au NOIR (l'écho de la carte de partage) */
.term {
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 52px;
  transform: none;
  justify-content: center;
  background: var(--jaune);
  border-radius: 0;
  padding: 0 var(--marge);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.term .dot { width: 14px; height: 14px; background: var(--encre); }
.term a { border-radius: 5px; color: var(--encre); }
.term .sep { background: color-mix(in srgb, var(--encre) 35%, transparent); }
.term a:hover, .term a.actif { background: var(--encre); color: var(--jaune); }
/* le fil de lecture court SOUS la barre, en noir */
.progression { top: 52px; background: var(--encre); }

.contact { background: var(--encre); }
/* le point, en écho : noir sur jaune en haut de page, jaune sur noir
   ici — il marque l'arrivée, là où on se parle */
.contact .titre::before {
  content: '';
  display: block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--jaune);
  margin: 0 auto 20px;
}
.contact .titre, .contact .lien, .contact p { color: var(--blanc); }
.contact .btn { background: var(--jaune); color: var(--encre); }
.contact .btn:hover { background: var(--bleu-guide); color: var(--encre); }
.contact .copier { background: #2C2C2C; color: #D9D9D9; }
.contact .copier:hover { background: var(--jaune); color: var(--encre); }

footer { background: var(--encre); padding-top: 8px; }
footer p { color: #B3B3B3; }
footer a:hover { color: var(--blanc); }

/* le venn : les trois encres du trio */
.venn .c-continu   { fill: var(--ligne-lilas);  fill-opacity: 0.12; stroke: var(--ligne-lilas);  stroke-opacity: 0.5; }
.venn .c-projet    { fill: var(--ligne-menthe); fill-opacity: 0.12; stroke: var(--ligne-menthe); stroke-opacity: 0.5; }
.venn .c-transfert { fill: var(--ligne-cuivre); fill-opacity: 0.09; stroke: var(--ligne-cuivre); stroke-opacity: 0.5; }

/* les textes du venn : le titre centré dans chaque cercle,
   la phrase courbée le long de la bordure */
.venn .venn-titre { font-size: 24px; }
.venn .venn-bord  { font-size: 16px; font-weight: 500; letter-spacing: 0.02em; fill: var(--encre); }
.venn-mobile .venn-titre { font-size: 25px; }
.venn-mobile .venn-bord  { font-size: 18px; }

/* le contact : plus de dégradé non plus */
.contact::before { content: none; }

/* le venn, façon infographie Monocle : traits noirs GRAS, aplats
   plats de leurs couleurs qui se multiplient aux recouvrements,
   libellés bien visibles, surlignage jaune sur la convergence */
/* trait des cercles = le même 1px que le filet des bento, quelle que
   soit l'échelle du SVG (pas de tirets ici, non-scaling-stroke sans risque) */
.venn circle { stroke: var(--encre); stroke-opacity: 1; stroke-width: 1; vector-effect: non-scaling-stroke; }
.venn .c-continu   { fill: var(--bleu-guide); fill-opacity: 0.45; stroke: var(--encre); }
.venn .c-projet    { fill: var(--saumon);     fill-opacity: 0.38; stroke: var(--encre); }
.venn .c-transfert { fill: var(--jaune);      fill-opacity: 0.42; stroke: var(--encre); }
/* le graphe, un poil plus petit : titre + venn + légende tiennent
   dans un écran */
.venn { width: min(100%, 530px); }
/* 27px dans le viewBox de 800 rendu à 530px ≈ les 18px de la légende */
.venn .venn-titre { font-size: 27px; font-weight: 500; }
/* la convergence : blanc sur pastille noire, même arrondi que les
   bento et la barre de navigation */
.venn-chip rect { fill: var(--encre); } /* rx 12 ≈ les 8px des bento à l'échelle */
.venn .venn-centre { font-size: 27px; font-weight: 500; fill: var(--blanc); }
.venn-mobile .venn-titre { font-size: 22px; }
.venn-mobile .venn-centre { font-size: 22px; }

/* la légende : carrés de couleur + phrases, visibles d'un coup */
.venn-legende {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  max-width: 34em;
}
.venn-legende li { display: flex; align-items: baseline; gap: 14px; }
.venn-legende .carre {
  flex: none;
  width: 13px; height: 13px;
  transform: translateY(1px);
  border: 1px solid var(--encre);
  border-radius: 50%;
}
.carre-continu   { background: var(--bleu-guide); }
.carre-projet    { background: var(--saumon); }
.carre-transfert { background: var(--jaune); }
.venn-legende b { font-weight: 600; }

/* les titres de section : un tiers plus grands ; celui des domaines
   tient sur une ligne */
.titre { font-size: clamp(39px, 5vw, 75px); }
.intro { font-size: clamp(31px, 3.5vw, 48px); }
.domaines .centre { max-width: 1100px; gap: clamp(18px, 2.2vw, 28px); }
.domaines .titre { font-size: clamp(32px, 4.2vw, 60px); }

/* le portrait : sans cadre */
.cadre { border: none; }

/* les logos : encre neutre */
.refs-grille img { filter: brightness(0) opacity(0.6); }

/* ============================================================
   FAQ V17s — plus de cartes : une liste réglée, à la Monocle.
   Filets horizontaux fins, question surlignée au survol (bleu)
   et à l'ouverture (jaune), flèche qui pivote.
   ============================================================ */
.faq .bento { gap: 0; }
.box-faq {
  background: transparent;
  border: none;
  border-top: 1px solid var(--encre);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(18px, 2.2vw, 26px) 4px;
}
.faq .bento .box-faq:last-child { border-bottom: 1px solid var(--encre); }
.box-faq .accroche {
  width: fit-content;
  padding: 2px 10px;
  margin-left: -10px;
  transition: background-color 0.2s ease;
}
.box-faq:hover,
.depliable.box-faq:not(.ouverte):hover { background: transparent; }
.box-faq:not(.ouverte):hover .accroche { background: var(--bleu-guide); }
.box-faq.ouverte { background: transparent; }
.box-faq.ouverte .accroche { background: var(--jaune); }
.box-faq .signe { font-size: 22px; }
.box-faq.ouverte .signe { transform: rotate(90deg); }

/* ============================================================
   MOBILE V18b — la grille Monocle : DEUX colonnes de bento sur
   petit écran (leur grille d'articles mobile), hauteurs au contenu.
   Les FAQ (liste réglée) et la box ouverte gardent toute la largeur.
   ============================================================ */
@media (max-width: 899px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bento > .box {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    padding: 14px;
    gap: 12px;
  }
  .bento > .box-faq,
  .bento > .depliable.ouverte,
  .bento > .b-centre { grid-column: 1 / -1; }
  .box .accroche { font-size: 15px; line-height: 1.45; }
  .box .ui { font-size: 10px; letter-spacing: 0.08em; }
  .box .ui::before { width: 8px; height: 8px; margin-right: 7px; }
  .box .plus { font-size: 13px; }
  .box .cadre { width: min(140px, 60cqw); }
}

/* ============================================================
   V19 « eddie » — TROIS couleurs seulement : noir, blanc et le
   violet d'eddie.eco (#B7B2FF, leur « Dull Lavender »). Plus de
   jaune, plus de bleu, plus de saumon. Système d'eddie : aplats
   sans filet, grands arrondis identiques pour les bento et les
   boutons, boutons noirs à survol violet, menu en pilule flottante.
   Les teintes pâles sont le violet mêlé de blanc — pas une 4e couleur.
   ============================================================ */
:root {
  --violet: #B7B2FF;
  --violet-pale: color-mix(in srgb, var(--violet) 22%, var(--blanc));
  --violet-doux: color-mix(in srgb, var(--violet) 50%, var(--blanc));
  --rayon: 24px;              /* un seul angle : bento, boutons, menu */
  --rayon-grand: 40px;        /* les grands panneaux (contact) */
  --gris: #5E5E66;            /* l'encre adoucie, pour le secondaire */
  --panneau: var(--blanc);
  --accent-1: var(--violet-pale);
  --accent-2: var(--violet-pale);
  --accent-3: var(--violet);
  --accent-4: var(--violet);
}
@media (max-width: 899px) { :root { --rayon: 20px; --rayon-grand: 28px; } }

::selection { background: var(--violet); color: var(--encre); }

/* les boutons : NOIRS, pilule au même angle que les bento, violet au survol */
.btn,
.hero-cta .btn,
.box-cta .btn {
  background: var(--encre);
  color: var(--blanc);
  border-radius: var(--rayon);
  padding: 15px 26px;
}
.btn:hover,
.hero-cta .btn:hover,
a.box-cta:hover .btn { background: var(--violet); color: var(--encre); }
.lien:hover { text-decoration-color: var(--violet); }

/* le menu : une pilule blanche flottante, comme leurs conteneurs de nav —
   la tuile violette en tête (leur icône), l'actif en pilule noire */
.term {
  top: 14px; left: 50%; right: auto;
  width: auto;
  height: auto;
  transform: translateX(-50%);
  padding: 6px 6px 6px 8px;
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--rayon);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 8%, transparent);
}
.term .dot {
  width: 34px; height: 34px;
  border-radius: 12px;
  background: var(--violet);
  margin-right: 8px;
}
.term a { border-radius: calc(var(--rayon) - 6px); color: var(--encre); }
.term a:hover { background: var(--violet); color: var(--encre); }
.term a.actif { background: var(--encre); color: var(--blanc); }
.term .sep { background: color-mix(in srgb, var(--encre) 20%, transparent); }
.progression { top: 0; background: var(--violet); }
@media (max-width: 899px) {
  .term { top: 10px; max-width: calc(100vw - 20px); }
  .term .dot { width: 26px; height: 26px; border-radius: 9px; margin-right: 4px; }
}

/* les bento : aplats violet pâle SANS filet, grand arrondi ;
   survol = le violet plein, ouverte = le violet plein aussi */
.box {
  background: var(--violet-pale);
  border: none;
  border-radius: var(--rayon);
}
.box .ui::before { background: var(--violet); border-radius: 50%; }
.depliable:not(.ouverte):hover,
a.box:hover,
a.box-grad:hover { background: var(--violet-doux); }
.depliable.ouverte { background: var(--violet); }
.depliable.ouverte .ui::before { background: var(--encre); }
.fermer-btn:hover { color: var(--blanc); }
.apercu, .detail-in img { border-radius: calc(var(--rayon) - 8px); }
.apercu { background: var(--blanc); }

/* copier */
.copier { background: var(--violet-pale); border-radius: 999px; }
.copier:hover { background: var(--violet); color: var(--encre); }

/* le venn : UN violet en trois densités, qui se multiplient aux
   recouvrements — la convergence en pilule noire */
.venn .c-continu   { fill: var(--violet); fill-opacity: 0.30; stroke: var(--encre); }
.venn .c-projet    { fill: var(--violet); fill-opacity: 0.55; stroke: var(--encre); }
.venn .c-transfert { fill: var(--violet); fill-opacity: 0.15; stroke: var(--encre); }
.venn-chip rect { fill: var(--encre); rx: 28px; }
.venn-mobile .venn-chip rect { rx: 24px; }
.carre-continu   { background: color-mix(in srgb, var(--violet) 30%, var(--blanc)); }
.carre-projet    { background: color-mix(in srgb, var(--violet) 55%, var(--blanc)); }
.carre-transfert { background: color-mix(in srgb, var(--violet) 15%, var(--blanc)); }

/* FAQ : liste réglée gardée, surlignage en pilule violette */
.box-faq { background: transparent; border-radius: 0; }
.box-faq .accroche { border-radius: 999px; padding: 3px 12px; margin-left: -12px; }
.box-faq:not(.ouverte):hover .accroche { background: var(--violet-pale); }
.box-faq.ouverte .accroche { background: var(--violet); }

/* le contact : un grand panneau noir arrondi posé dans la page,
   comme leurs grands blocs — le point violet au-dessus du titre */
.contact {
  margin: var(--s-section) var(--marge) 0;
  border-radius: var(--rayon-grand);
  min-height: 64svh;
}
.contact .titre::before { background: var(--violet); border-radius: 12px; width: 26px; height: 26px; }
.contact .btn { background: var(--violet); color: var(--encre); }
.contact .btn:hover { background: var(--blanc); color: var(--encre); }
.contact .copier { background: color-mix(in srgb, var(--blanc) 12%, var(--encre)); color: var(--blanc); }
.contact .copier:hover { background: var(--violet); color: var(--encre); }
.contact .lien:hover { text-decoration-color: var(--violet); }

/* le pied de page repasse au blanc, sous le panneau */
footer { background: transparent; padding-top: 32px; }
footer p { color: var(--gris); }
footer a:hover { color: var(--encre); }

/* ============================================================
   V19c — le violet devient le bleu nuit #101585. Couleur FONCÉE :
   tout ce qui se pose dessus passe en BLANC (box ouverte, survols
   pleins, contact) ; les teintes pâles sont éclaircies d'autant.
   ============================================================ */
:root {
  --violet: #101585;
  --violet-pale: color-mix(in srgb, var(--violet) 9%, var(--blanc));
  --violet-doux: color-mix(in srgb, var(--violet) 20%, var(--blanc));
}
::selection { background: var(--violet); color: var(--blanc); }

/* boutons noirs → bleu nuit au survol, texte blanc */
.btn:hover,
.hero-cta .btn:hover,
a.box-cta:hover .btn { background: var(--violet); color: var(--blanc); }

/* menu */
.term a:hover { background: var(--violet); color: var(--blanc); }

/* la box ouverte : aplat bleu nuit, texte blanc */
.depliable.ouverte,
.depliable.ouverte .ui,
.depliable.ouverte .lien,
.depliable.ouverte .fermer-btn { color: var(--blanc); }
.depliable.ouverte .ui::before { background: var(--blanc); }
.depliable.ouverte h3,
.depliable.ouverte .stat .ui { color: color-mix(in srgb, var(--blanc) 72%, transparent); }
.depliable.ouverte .fermer-btn:hover { color: var(--violet-doux); }
.depliable.ouverte :focus-visible { outline-color: var(--blanc); }

/* copier, FAQ */
.copier:hover { background: var(--violet); color: var(--blanc); }
.box-faq.ouverte .accroche { background: var(--violet); color: var(--blanc); }

/* le venn : des densités plus légères, le bleu nuit est dense */
.venn .c-continu   { fill-opacity: 0.12; }
.venn .c-projet    { fill-opacity: 0.24; }
.venn .c-transfert { fill-opacity: 0.05; }
.carre-continu   { background: color-mix(in srgb, var(--violet) 12%, var(--blanc)); }
.carre-projet    { background: color-mix(in srgb, var(--violet) 24%, var(--blanc)); }
.carre-transfert { background: color-mix(in srgb, var(--violet) 5%, var(--blanc)); }

/* le contact : le panneau passe au bleu nuit, bouton blanc,
   point blanc au-dessus du titre */
.contact { background: var(--violet); }
.contact .titre::before { content: none; } /* V19d : plus de point au-dessus du titre */
.contact .btn { background: var(--blanc); color: var(--encre); }
.contact .btn:hover { background: var(--encre); color: var(--blanc); }
.contact .copier { background: color-mix(in srgb, var(--blanc) 14%, var(--violet)); color: var(--blanc); }
.contact .copier:hover { background: var(--blanc); color: var(--encre); }
.contact .lien:hover { text-decoration-color: var(--blanc); }

/* ============================================================
   V19e — le bleu devient #002FA7 (bleu Klein, sans dérive violette)
   et c'est LE survol, partout : bento, boutons, liens, menu, FAQ,
   copier, pied de page. Sur l'aplat bleu, le texte passe en blanc.
   Le contact redevient noir pour que le survol bleu s'y voie.
   ============================================================ */
:root {
  --violet: #002FA7;
  --violet-pale: color-mix(in srgb, var(--violet) 8%, var(--blanc));
  --violet-doux: color-mix(in srgb, var(--violet) 18%, var(--blanc));
}

/* bento : survol = bleu plein, texte blanc (comme la box ouverte) */
.depliable:not(.ouverte):hover,
a.box:hover,
a.box-grad:hover { background: var(--violet); color: var(--blanc); }
.depliable:not(.ouverte):hover .ui,
.depliable:not(.ouverte):hover .lien,
a.box:hover .ui,
a.box:hover .cta-titre { color: var(--blanc); }
.depliable:not(.ouverte):hover .ui::before,
a.box:hover .ui::before { background: var(--blanc); }
a.box-cta:hover .btn { background: var(--blanc); color: var(--encre); }

/* liens : le texte passe au bleu au survol */
.lien:hover { color: var(--violet); text-decoration-color: var(--violet); }
.depliable .lien:hover,
.depliable.ouverte .lien:hover { color: var(--blanc); text-decoration-color: var(--blanc); }
footer a:hover { color: var(--violet); }

/* FAQ : la question surlignée en bleu plein au survol */
.box-faq:not(.ouverte):hover .accroche { background: var(--violet); color: var(--blanc); }

/* le contact : retour au noir, bouton blanc → bleu au survol */
.contact { background: var(--encre); }
.contact .btn { background: var(--blanc); color: var(--encre); }
.contact .btn:hover { background: var(--violet); color: var(--blanc); }
.contact .copier { background: color-mix(in srgb, var(--blanc) 14%, var(--encre)); color: var(--blanc); }
.contact .copier:hover { background: var(--violet); color: var(--blanc); }
.contact .lien:hover { color: var(--blanc); text-decoration-color: var(--violet); }

/* ============================================================
   V19f — FAQ : la question ouverte n'a PAS de fond bleu, seul le
   surlignage bleu de la question reste pendant qu'elle est dépliée.
   Pied de page en bleu Klein, texte blanc.
   ============================================================ */
.depliable.box-faq.ouverte { background: transparent; color: var(--encre); }
.depliable.box-faq.ouverte .signe { color: var(--encre); }
.depliable.box-faq.ouverte .accroche,
.depliable.box-faq:not(.ouverte):hover .accroche { background: var(--violet); color: var(--blanc); }
.depliable.box-faq:not(.ouverte):hover { background: transparent; color: var(--encre); }

footer { background: var(--violet); margin-top: var(--marge); padding: 32px var(--marge); }
footer p { color: var(--blanc); }
footer a:hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   V19g — le pied de page entre dans le grand panneau du contact :
   une ligne discrète en bas du bloc noir. Plus de bande bleue.
   ============================================================ */
.contact { padding-bottom: clamp(120px, 12vw, 150px); }
.contact footer {
  position: absolute;
  left: 0; right: 0; bottom: clamp(22px, 3vw, 34px);
  margin: 0;
  padding: 0 var(--marge);
  background: none;
}
.contact footer p { color: color-mix(in srgb, var(--blanc) 62%, transparent); }
.contact footer a:hover { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body > footer { display: none; }
/* le panneau touche le bas de page avec une marge égale */
body > main { padding-bottom: var(--marge); }

/* ============================================================
   V19h — le venn est le MÊME sur mobile et sur ordinateur : les
   trois cercles qui se recoupent. La chaîne verticale est retirée ;
   sur petit écran, libellés et pastille grossissent dans le SVG.
   ============================================================ */
.venn-mobile { display: none !important; }
.venn-desktop { display: block !important; }
@media (max-width: 639px) {
  .venn-desktop { width: 100%; }
  .venn-desktop .venn-titre { font-size: 38px; }
  .venn-desktop .venn-chip { transform-box: view-box; transform-origin: 400px 384px; transform: scale(1.35); }
}

/* le carré du menu ne se tasse jamais (menu DE plus long sur mobile) */
.term .dot { flex: none; }

/* V19i — mobile : la bio et les références en pleine largeur, le nom
   se dimensionne sur la bento pour ne jamais être coupé */
@media (max-width: 899px) {
  .bento > #bio,
  .bento > .refs { grid-column: 1 / -1; }
  #bio .titre { font-size: min(clamp(39px, 5vw, 75px), 13cqw); overflow-wrap: anywhere; }
}

/* ============================================================
   V20 — FR, DE et EN : hero « Plus d'impact… », accroches chiffrées,
   les deux Suisses (carte) et l'IA (schéma) à la place du venn.
   ============================================================ */
/* le titre tient TOUJOURS sur deux lignes : chaque ligne est insécable
   et la taille suit la largeur utile (--h1-em = ligne la plus longue, en em) */
html[lang] .hero h1 {
  --h1-em: 12.4;
  font-size: min(96px, calc((100vw - 2 * var(--marge)) / var(--h1-em)));
  max-width: none;
  line-height: 1.02;
}
html[lang^="de"] .hero h1 { --h1-em: 11; }
html[lang="en"] .hero h1 { --h1-em: 10.6; }
.hero h1 .ligne { display: block; white-space: nowrap; }
html[lang] .hero p { max-width: 36em; line-height: 1.65; }

/* la citation : une phrase en très grand, le registre des titres */
.citation { padding: var(--s-section) var(--marge) 0; }
.citation blockquote { max-width: 1100px; }
.citation p {
  font-family: var(--titres);
  font-weight: 500;
  font-size: clamp(32px, 4.8vw, 68px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.citation p::before { content: '«\00a0'; }
.citation p::after { content: '\00a0»'; }
html[lang^="de"] .citation p::before { content: '«'; }
html[lang^="de"] .citation p::after { content: '»'; }
html[lang="en"] .citation p::before { content: '“'; }
html[lang="en"] .citation p::after { content: '”'; }

/* mobile : les projets sur UNE colonne, le chiffre et la phrase respirent */
@media (max-width: 899px) {
  #projets .bento > .box { grid-column: 1 / -1; padding: 20px; }
}

/* V20 — langues : les trois toujours visibles, la langue courante en
   pilule bleu Klein (menu et pied de page) */
.term a.lang.langue-active,
.term a.lang.langue-active:hover { background: var(--violet); color: var(--blanc); }
.contact footer .langues { display: inline-flex; gap: 4px; }
.contact footer .langues a { padding: 3px 8px; border-radius: 999px; }
.contact footer .langues a.langue-active { background: var(--violet); color: var(--blanc); }
.contact footer .langues a.langue-active:hover { text-decoration: none; }
/* mobile : trois langues au menu → espacements resserrés pour tenir à 360px */
@media (max-width: 899px) {
  .term { font-size: 11px; letter-spacing: 0.05em; padding: 5px; }
  .term a { padding: 9px 6px; }
  .term a.lang { padding: 7px 5px; font-size: 11px; }
  .term .dot { margin-right: 2px; }
  .term .sep { margin: 0 2px; }
}
@media (max-width: 359px) {
  .term .dot { display: none; }
  .term a { padding: 9px 5px; }
  .term a.lang { padding: 6px 4px; }
}

/* ============================================================
   V20 — la pastille du menu devient un bouton : elle fait tourner
   l'accent du site entre bleu Klein, rose framboise et jaune Monocle.
   Tout le système suit --violet (l'accent historique) ; les teintes
   pâles se recalculent seules.
   ============================================================ */
:root[data-teinte="rose"]  { --violet: #E3124D; }  /* rose-rouge framboise, blanc lisible dessus */
:root[data-teinte="jaune"] { --violet: #FFC500; }  /* le jaune Monocle */
:root[data-teinte="jaune"] {
  --violet-pale: color-mix(in srgb, var(--violet) 14%, var(--blanc));
  --violet-doux: color-mix(in srgb, var(--violet) 32%, var(--blanc));
}

.term .dot {
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.term .dot:hover { transform: scale(1.1) rotate(-8deg); }
.term .dot:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }

/* sur le jaune, le texte passe en NOIR partout où il était blanc sur l'accent */
[data-teinte="jaune"] ::selection { color: var(--encre); }
[data-teinte="jaune"] .btn:hover,
[data-teinte="jaune"] .hero-cta .btn:hover,
[data-teinte="jaune"] .term a:hover,
[data-teinte="jaune"] .term a.lang.langue-active,
[data-teinte="jaune"] .copier:hover,
[data-teinte="jaune"] .contact .btn:hover,
[data-teinte="jaune"] .contact .copier:hover,
[data-teinte="jaune"] .contact footer .langues a.langue-active,
[data-teinte="jaune"] .depliable.box-faq.ouverte .accroche,
[data-teinte="jaune"] .depliable.box-faq:not(.ouverte):hover .accroche,
[data-teinte="jaune"] .depliable.ouverte,
[data-teinte="jaune"] .depliable.ouverte .ui,
[data-teinte="jaune"] .depliable.ouverte .lien,
[data-teinte="jaune"] .depliable.ouverte .fermer-btn,
[data-teinte="jaune"] .depliable:not(.ouverte):hover,
[data-teinte="jaune"] .depliable:not(.ouverte):hover .ui,
[data-teinte="jaune"] .depliable:not(.ouverte):hover .lien,
[data-teinte="jaune"] a.box:hover,
[data-teinte="jaune"] a.box:hover .ui,
[data-teinte="jaune"] a.box:hover .cta-titre { color: var(--encre); }
[data-teinte="jaune"] .depliable.ouverte h3,
[data-teinte="jaune"] .depliable.ouverte .stat .ui { color: color-mix(in srgb, var(--encre) 65%, transparent); }
[data-teinte="jaune"] .depliable.ouverte .ui::before,
[data-teinte="jaune"] .depliable:not(.ouverte):hover .ui::before,
[data-teinte="jaune"] a.box:hover .ui::before { background: var(--encre); }
[data-teinte="jaune"] .depliable.ouverte :focus-visible { outline-color: var(--encre); }
[data-teinte="jaune"] .depliable .lien:hover,
[data-teinte="jaune"] .depliable.ouverte .lien:hover { color: var(--encre); text-decoration-color: var(--encre); }
[data-teinte="jaune"] a.box-cta:hover .btn { background: var(--encre); color: var(--blanc); }
/* un lien jaune sur blanc serait illisible : l'encre reste, le soulignement prend le jaune */
[data-teinte="jaune"] .lien:hover { color: var(--encre); text-decoration-color: var(--violet); }
[data-teinte="jaune"] footer a:hover { color: var(--encre); }
[data-teinte="jaune"] .contact .lien:hover,
[data-teinte="jaune"] .contact footer a:hover { color: var(--blanc); }

/* la langue active : un carré arrondi, de la famille des bento et de la
   pastille (même proportion d'arrondi), plus un rond */
.term a.lang.langue-active { border-radius: 10px; }
.contact footer .langues a { border-radius: 7px; }
@media (max-width: 899px) { .term a.lang.langue-active { border-radius: 8px; } }
/* le jaune est clair : le venn prend des densités plus fortes */
[data-teinte="jaune"] .venn .c-continu   { fill-opacity: 0.30; }
[data-teinte="jaune"] .venn .c-projet    { fill-opacity: 0.55; }
[data-teinte="jaune"] .venn .c-transfert { fill-opacity: 0.14; }
[data-teinte="jaune"] .carre-continu   { background: color-mix(in srgb, var(--violet) 30%, var(--blanc)); }
[data-teinte="jaune"] .carre-projet    { background: color-mix(in srgb, var(--violet) 55%, var(--blanc)); }
[data-teinte="jaune"] .carre-transfert { background: color-mix(in srgb, var(--violet) 14%, var(--blanc)); }