/* Catalogue 3 (Indépendants) : styles des pages (sommaire, branche, logiciel).
 * Fond vivant commun (29/10, /commun/fond-vivant.css) : perle bleutée en clair, nuit profonde en sombre, jamais de blanc plat. Chaque branche apporte sa couleur exacte (--c), vive, jamais ternie :
 * --t texte posé sur la couleur (blanc ou foncé, contraste AA), --b boutons (= --c), --f petit texte de la couleur sur
 * fond clair (assombri au noir, AA), --g grand titre, --o fond très clair (couleur mélangée à du blanc pur), --l reflet clair.
 * Calculées par outils/construire-catalogue3.mjs. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../accueil/polices/geist-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: "Geist"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../accueil/polices/geist-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --papier: #edf0f7;          /* = --fv-base du fond vivant commun */
  --surface: #ffffff;
  --voile: rgb(var(--blanc) / .9);
  --encre: #0a0a0b;
  --doux: #555b68;
  --faible: #575d6b;          /* 29/10 : lisible (AA) sur le fond perle et ses taches bleues */
  --trait: #dfe1e6;
  --trait-doux: #eceef1;
  /* les mêmes teintes en triplets, pour les voiles translucides ; le mode sombre les redéfinit plus bas */
  --blanc: 255 255 255; --papier-rgb: 237 240 247; --encre-rgb: 10 10 11;
  --gris: #eceef1; --texte2: #2f343d; --gris-moyen: #9aa0ab; --texte3: #3a3f48;
  --focus: #0a0a0b;
  /* sommaire : neutre, graphite */
  --c: #5b616c; --t: #ffffff; --b: #5b616c; --f: #4f545e; --g: #5b616c; --o: var(--gris); --l: #b9bdc4;
  --large: 1680px;
  --marge: clamp(16px, 3.6vw, 64px);
  --rayon: 18px;
  color-scheme: light;
}
/* ---------- Mode sombre : par défaut sans choix, ou choix du bouton du bandeau, commun à tout le site (theme.js pose data-theme) */
html[data-theme="dark"] {
  --papier: #05070d; --surface: #131725; --voile: rgba(19, 23, 37, .82); --encre: #f2f2f4; --doux: #a9aeb8; --faible: #949aa6;
  --trait: #2a3042; --trait-doux: #1f2433;
  --blanc: 19 23 37; --papier-rgb: 5 7 13; --encre-rgb: 242 242 244;
  --gris: #1d2232; --texte2: #d4d7de; --gris-moyen: #70757f; --texte3: #c4c8d0;
  --focus: #f2f2f4;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }
html[lang="zh-Hans"] body { font-family: "Geist", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--papier); color: var(--encre);
  font: 400 16px/1.55 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
main { position: relative; z-index: 1; flex: 1; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 10px; background: var(--encre); color: var(--surface); text-decoration: none; }
.evitement:focus { top: 12px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.large { width: 100%; max-width: calc(var(--large) + 2 * var(--marge)); margin: 0 auto; padding: 0 var(--marge); }
.ti { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
mark { background: color-mix(in srgb, var(--c) 22%, var(--surface)); color: inherit; border-radius: 3px; padding: 0 1px; }

/* =================================================================== BANDEAU
 * Comme la vitrine : pas de barre pleine, deux bulles de verre flottantes (nom et navigation à gauche, réglages à droite).
 * Pas de logo dans le bandeau (décision du 02/11) : le logo IAP sert seulement d'icône d'onglet. */
.tete { position: sticky; top: 0; z-index: 30; pointer-events: none; }
.tete-in { display: flex; align-items: center; gap: 10px; height: 76px; padding: 0 max(12px, calc(var(--marge) - 10px)); }
.bulle { pointer-events: auto; display: flex; align-items: center; min-width: 0; border-radius: 999px; border: 1px solid rgb(var(--encre-rgb) / .06); background: rgb(var(--blanc) / .8); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); box-shadow: 0 12px 34px -16px rgb(var(--encre-rgb) / .22), 0 1px 2px rgb(var(--encre-rgb) / .04); }
.gauche { gap: 2px; padding: 5px 8px 5px 14px; }
.droite { margin-left: auto; gap: 2px; padding: 5px; }
.tete :focus-visible { outline-color: var(--focus); outline-offset: 2px; border-radius: 999px; }
.marque { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding-right: 12px; text-decoration: none; font-weight: 600; font-size: 15.5px; letter-spacing: .01em; color: var(--encre); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 2px; padding-left: 8px; border-left: 1px solid var(--trait); }
.retour, .son, .icone { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--encre); cursor: pointer; transition: background .2s; }
.retour svg, .son svg, .icone svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.retour:hover, .son:hover, .icone:hover, .nav-sommaire:hover, .nav-site:hover { background: rgb(var(--encre-rgb) / .08); }
.retour[hidden], .son[hidden], .icone[hidden] { display: none; }
.nav-sommaire, .nav-site { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: 14.5px; font-weight: 500; color: var(--encre); white-space: nowrap; transition: background .2s; }
.nav-site { color: var(--doux); font-weight: 400; }
.nav-sommaire[aria-current="page"] { background: rgb(var(--encre-rgb) / .05); }
.langue { position: relative; display: inline-flex; align-items: center; }
.langue-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 64px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--encre); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .2s; }
.langue-btn:hover, .langue-btn[aria-expanded="true"] { background: rgb(var(--encre-rgb) / .08); }
.langue-btn i { width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.langue-btn[aria-expanded="true"] i { transform: rotate(225deg); margin-top: 3px; }
.langue-liste { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; min-width: 150px; margin: 0; padding: 6px; list-style: none; border: 1px solid rgb(var(--encre-rgb) / .08); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 44px -16px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .08); }
.langue-liste[hidden] { display: none; }
/* 30/10 : devise et langue côte à côte ; jamais sur deux lignes, plus serrés sur petit écran */
.langue-btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 420px) { .langue-btn { min-width: 0; gap: 5px; padding: 0 8px 0 10px; } }
.langue-liste li { display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; color: var(--encre); cursor: pointer; white-space: nowrap; }
.langue-liste li:hover, .langue-liste li:focus-visible { background: rgb(var(--encre-rgb) / .07); outline: none; }
.langue-liste li[aria-selected="true"] { font-weight: 600; }
.langue-liste li[aria-selected="true"]::after { content: ""; width: 5px; height: 10px; margin: -2px 2px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.son .barre { display: none; }
.son.coupe .onde { display: none; }
.son.coupe .barre { display: inline; }
@media (max-width: 900px) { .nav-site { display: none; } }
@media (max-width: 640px) {
  .tete-in { gap: 6px; height: 66px; padding: 0 10px; }
  /* plus de logo à côté du nom (30/10) : sur téléphone, le nom est caché, donc tout le lien ; la flèche et « Sommaire » restent */
  .marque { display: none; }
  .gauche .nav { border-left: 0; padding-left: 0; }
  .gauche { padding: 4px 6px 4px 12px; }
  .droite { padding: 4px; }
  .retour, .son, .icone { width: 44px; height: 44px; }
  .nav-sommaire { min-height: 44px; padding: 0 10px; }
  .nav { padding-left: 4px; }
  .langue-btn { min-width: 58px; padding: 0 10px; height: 44px; }
  .ariane a { min-height: 44px; }
}


/* =================================================================== COMMUN */
.ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--doux); }
.ariane li { display: inline-flex; align-items: center; min-width: 0; }
.ariane li + li::before { content: "/"; margin-right: 8px; color: var(--gris-moyen); }
.ariane a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.ariane a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.ariane [aria-current] { color: var(--encre); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 1px solid transparent; border-radius: 999px; background: var(--b); color: var(--t); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, border-color .25s; }
.bouton:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--b) 80%, #000); }
.bouton:active { transform: scale(.97); }
.bouton.second { background: var(--surface); color: var(--encre); border-color: var(--trait); }
.bouton.second:hover { border-color: var(--encre); box-shadow: none; }
.bouton[aria-disabled="true"] { background: var(--gris); color: var(--doux); cursor: not-allowed; transform: none; box-shadow: none; }
.bientot { margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--doux); font-size: 12.5px; font-weight: 500; }
.bloc-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 24px; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--trait); }
.bloc-tete h2 { margin: 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 500; letter-spacing: -.02em; }
.bloc-tete p { margin: 0; font-size: 14.5px; color: var(--doux); }
/* la mention de prix : petite icône (cycle pour l'abonnement, clé pour la licence), dans la couleur de la branche */
.tarif { display: inline-flex; align-items: center; gap: 6px; flex: none; white-space: nowrap; font-size: 14px; color: var(--doux); font-variant-numeric: tabular-nums; }
.tarif b { font-weight: 600; color: var(--encre); }
.tarif .ti { width: 14px; height: 14px; stroke: var(--c); stroke-width: 1.9; }

/* =================================================================== SOMMAIRE */
.ouverture { padding: clamp(30px, 5vw, 84px) 0 clamp(48px, 6vw, 96px); }
.ouv-sur { margin: 0 0 18px; font-size: 15px; color: var(--doux); }
.ouverture h1 { margin: 0; font-size: clamp(31px, 4.3vw, 76px); line-height: 1.05; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
br.coupe { display: none; }
@media (min-width: 1100px) { br.coupe { display: inline; } }
.ouv-bas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 560px); gap: clamp(28px, 5vw, 110px); align-items: start; margin-top: clamp(26px, 3.2vw, 50px); }
.ouv-texte { margin: 0; max-width: 36em; font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.55; color: var(--doux); }
.chercher { position: relative; max-width: 560px; }
.chercher input { width: 100%; height: 54px; padding: 0 50px 0 48px; border: 1px solid var(--trait); border-radius: 999px; background: rgb(var(--blanc) / .92); font: inherit; font-size: 16px; color: var(--encre); }
.chercher input::-webkit-search-cancel-button { display: none; }
.chercher input::placeholder { color: var(--faible); }
.chercher input:focus { outline: none; border-color: var(--encre); box-shadow: 0 0 0 4px rgb(var(--encre-rgb) / .07); }
.chercher > .ic { position: absolute; left: 18px; top: 50%; margin-top: -9px; color: var(--faible); pointer-events: none; }
.effacer { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--doux); }
.effacer:hover { background: rgb(var(--encre-rgb) / .06); }
.effacer[hidden] { display: none; }

/* les 13 entrées : chacune dans sa bulle (carte arrondie, fond blanc translucide, ombre douce), les unes sous les autres */
.entrees { margin-top: 0; }
.branches { display: grid; gap: clamp(12px, 1.2vw, 18px); margin: 0; padding: 0; list-style: none; }
.br { border-radius: 24px; background: rgb(var(--blanc) / .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .05), 0 14px 34px -22px rgb(var(--encre-rgb) / .38), 0 2px 6px -2px rgb(var(--encre-rgb) / .07); transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease; }
.br:hover, .br:focus-within { background: color-mix(in srgb, var(--c) 7%, rgb(var(--blanc) / .88)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 20px 40px -22px rgb(var(--encre-rgb) / .45); transform: translateY(-1px); }
.br a { display: grid; grid-template-columns: 10px minmax(0, 1.05fr) minmax(0, 1.3fr) clamp(150px, 15vw, 210px) 44px; align-items: center; gap: 0 clamp(16px, 2.4vw, 40px); padding: clamp(18px, 1.8vw, 26px) clamp(16px, 1.6vw, 26px) clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 32px); border-radius: 24px; text-decoration: none; }
.br a:focus-visible { outline-offset: 3px; border-radius: 24px; }
.br-pastille { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.br-nom { font-size: clamp(20px, 1.9vw, 30px); line-height: 1.15; letter-spacing: -.025em; font-weight: 500; }
.br-texte { font-size: 15px; line-height: 1.5; color: var(--doux); }
.br-chiffres { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 14px; color: var(--doux); text-align: right; font-variant-numeric: tabular-nums; }
.br-chiffres b { font-size: 15px; font-weight: 600; color: var(--encre); }
.br-rond { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(var(--encre-rgb) / .05); box-shadow: inset 0 0 0 1px var(--trait); transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.br-fl { width: 22px; height: 22px; fill: none; stroke: var(--doux); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease, stroke .25s ease; }
.br a:hover .br-rond, .br a:focus-visible .br-rond { background: var(--b); box-shadow: none; transform: scale(1.06); }
.br a:hover .br-fl, .br a:focus-visible .br-fl { transform: translateX(2px); stroke: var(--t); }
/* le sur mesure : dernière bulle, graphite et noir */
.br.sur-mesure .br-pastille { background: var(--encre); }
.br.sur-mesure { box-shadow: 0 0 0 1.5px var(--encre), 0 14px 34px -22px rgb(var(--encre-rgb) / .38); }
.br.sur-mesure:hover, .br.sur-mesure:focus-within { background: rgb(var(--blanc) / .92); box-shadow: 0 0 0 1.5px var(--encre), 0 20px 40px -22px rgb(var(--encre-rgb) / .45); }
.br.sur-mesure a:hover .br-rond { background: var(--encre); } .br.sur-mesure a:hover .br-fl { stroke: var(--surface); }

/* résultats de la recherche */
.resultats { margin-top: 8px; }
.lignes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0 16px; list-style: none; border-radius: 22px; background: rgb(var(--blanc) / .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.lignes li { border-bottom: 1px solid var(--trait); }
.ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-height: 54px; height: 100%; padding: 15px 12px 14px; text-decoration: none; transition: background-color .2s ease; }
.ligne:hover { background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.ligne-t { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; line-height: 1.4; min-width: 0; }
.ligne-t .pastille { transform: translateY(-1px); }
.rien { padding: 40px 4px; color: var(--doux); }

/* comment il se vend : trois colonnes à filets, sans cadres */
.achat { margin-top: 0; }
.achat-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); padding: 26px clamp(20px, 2.4vw, 36px) 28px; border-radius: 22px; background: rgb(var(--blanc) / .74); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.achat-grille h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.achat-grille h3 .ti { color: var(--encre); width: 17px; height: 17px; }
.achat-grille .prix-ligne { margin: 0 0 12px; font-size: 15px; color: var(--encre); }
.achat-grille p { margin: 0; color: var(--doux); font-size: 15px; }
@media (max-width: 1180px) { .lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .ouv-bas { grid-template-columns: 1fr; gap: 30px; }
  .achat-grille { grid-template-columns: 1fr; gap: 26px; }
  .br a { grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1fr) 150px 44px; }
  .br-texte { font-size: 14px; }
}
@media (max-width: 760px) {
  .br a { grid-template-columns: 10px minmax(0, 1fr) 44px; grid-template-areas: "p n f" ". c f"; gap: 3px 14px; padding: 14px 12px 14px 18px; }
  .br-pastille { grid-area: p; align-self: center; }
  .br-nom { grid-area: n; font-size: 19px; }
  .br-texte { display: none; }
  .br-chiffres { grid-area: c; flex-direction: row; align-items: baseline; flex-wrap: wrap; justify-content: flex-start; gap: 0 12px; font-size: 13.5px; text-align: left; }
  .br-chiffres b { font-size: 13.5px; font-weight: 500; color: var(--doux); }
  .br-rond { grid-area: f; align-self: center; }
}
@media (max-width: 680px) {
  .ouverture { padding-top: 24px; }
  .ouverture h1 { font-size: clamp(27px, 7.9vw, 40px); }
  .ouv-texte { font-size: 16.5px; }
  .lignes { grid-template-columns: 1fr; }
}

/* =================================================================== BRANCHE */
.cat-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding: 26px 0 36px; }
.cat-sur { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 14.5px; color: var(--doux); }
.cat-tete h1 { margin: 0; font-size: clamp(38px, 4.6vw, 76px); line-height: 1.02; letter-spacing: -.038em; font-weight: 500; color: var(--encre); max-width: 14ch; text-wrap: balance; }
.cat-tete h1::after { content: ""; display: block; width: 72px; height: 7px; margin-top: 22px; border-radius: 4px; background: var(--c); }
.cat-texte { margin: 20px 0 0; max-width: 34em; font-size: clamp(17px, 1.2vw, 19px); line-height: 1.55; color: var(--encre); }
.cat-pour { margin: 14px 0 0; font-size: 15px; color: var(--doux); max-width: 38em; }
.cat-chiffres { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 26px 0 0; padding: 16px 0 0; border-top: 1px solid var(--trait); font-size: 15px; color: var(--doux); }
.cat-chiffres b { color: var(--encre); font-weight: 600; }
.cat-visuel { position: relative; height: 440px; }
.cat-visuel::before { content: ""; position: absolute; inset: 4% 6%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, var(--surface)), rgba(255, 255, 255, 0)); }
.grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.carte-l { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 20px; background: var(--voile); text-decoration: none; box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .08); transition: box-shadow .25s ease, transform .25s ease; overflow: hidden; }
.carte-l:focus-visible { outline-offset: 4px; border-radius: 22px; }
.carte-l:hover { box-shadow: 0 0 0 1.5px var(--c), 0 26px 44px -30px rgb(var(--encre-rgb) / .55); transform: translateY(-2px); }
.carte-vis { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: radial-gradient(90% 90% at 70% 20%, color-mix(in srgb, var(--c) 18%, var(--surface)) 0%, color-mix(in srgb, var(--c) 8%, var(--surface)) 62%, color-mix(in srgb, var(--c) 11%, var(--surface)) 100%); }
.carte-vis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(rgba(255, 255, 255, 0), color-mix(in srgb, var(--c) 8%, var(--surface))); pointer-events: none; }
.carte-corps { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 18px; }
.carte-corps h3 { overflow-wrap: normal; word-break: normal; hyphens: manual; margin: 0; font-size: 18px; line-height: 1.28; letter-spacing: -.012em; font-weight: 600; }
.carte-corps p { margin: 8px 0 0; color: var(--doux); font-size: 15px; line-height: 1.5; }
.carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.carte-voir { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--encre); }
.carte-voir .ic { width: 16px; height: 16px; transition: transform .25s ease; }
.carte-l:hover .carte-voir .ic { transform: translateX(3px); }
.voisins { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(56px, 6vw, 84px); }
.voisins a { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border-radius: var(--rayon); text-decoration: none; background: var(--voile); box-shadow: 0 0 0 1px var(--trait-doux); transition: box-shadow .2s ease, background-color .2s ease; }
/* survol et focus : la teinte de la branche mêlée à la surface du thème (et non au blanc), le texte garde la couleur de l'encre */
.voisins a:hover, .voisins a:focus-visible { box-shadow: 0 0 0 1.5px var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: var(--encre); }
.voisins a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.voisins small { font-size: 13.5px; color: var(--doux); }
.voisins span { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 500; }
.voisins .suiv { text-align: right; align-items: flex-end; }
@media (max-width: 1400px) { .grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1060px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .cat-tete { grid-template-columns: 1fr; gap: 10px; padding-top: 14px; }
  .cat-visuel { height: 300px; margin: 0 -8px; }
}
@media (max-width: 620px) {
  .grille { grid-template-columns: 1fr; gap: 14px; }
  .cat-visuel { height: 320px; }
  .voisins { grid-template-columns: 1fr; }
  .voisins .suiv { text-align: left; align-items: flex-start; }
}

/* un halo blanc très fin derrière les textes posés directement sur le fond : le ruban ne gêne jamais la lecture */
.ouverture, .cat-tete, .log-entete, .log-suite, .bloc-tete, .achat-grille { text-shadow: 0 0 10px rgb(var(--papier-rgb) / .95), 0 0 3px rgb(var(--papier-rgb) / .9); }
.prix-boite, .detail, .carte-l, .branches, .modeles { text-shadow: none; }

/* =================================================================== LOGICIEL */
.log { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(400px, .7fr); grid-template-areas: "scene entete" "scene suite"; grid-template-rows: auto 1fr; gap: 0 clamp(28px, 3vw, 60px); align-items: start; padding-top: 10px; }
@media (min-width: 961px) { .log.log-large { grid-template-columns: minmax(0, 1.5fr) minmax(380px, .5fr); } }
.log-entete { grid-area: entete; padding-top: 30px; }
.log-suite { grid-area: suite; padding-bottom: 20px; }
.log-scene { grid-area: scene; position: sticky; top: 80px; height: clamp(560px, calc(100vh - 112px), 800px); }
.log-scene::before { content: ""; position: absolute; inset: 6% 4% 14%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, var(--surface)), rgba(255, 255, 255, 0)); pointer-events: none; }
.log-scene .hote { position: relative; height: 100%; }
.log-exemple { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-size: 13px; color: var(--faible); }
.log-cat { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; margin: 0; font-size: 14.5px; font-weight: 500; color: var(--encre); text-decoration: none; }
a.log-cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.log h1 { overflow-wrap: normal; word-break: normal; hyphens: manual; margin: 8px 0 0; font-size: clamp(30px, 2.9vw, 48px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; }
.log-accroche { margin: 16px 0 0; font-size: clamp(16.5px, 1.15vw, 18.5px); line-height: 1.55; color: var(--doux); }
.log-h { margin: 32px 0 10px; font-size: 15px; font-weight: 600; color: var(--encre); }
.etapes { margin: 0; padding: 0; list-style: none; counter-reset: e; }
.etapes li { counter-increment: e; }
.etapes button { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 0 12px; width: 100%; padding: 12px 12px 13px 0; border: 0; border-top: 1px solid var(--trait-doux); background: none; text-align: left; cursor: pointer; }
.etapes li:last-child button { border-bottom: 1px solid var(--trait-doux); }
.etapes button::before { content: counter(e); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--trait); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--doux); transition: background-color .3s, color .3s, box-shadow .3s; }
.etapes b { font-weight: 600; font-size: 16px; line-height: 1.35; padding-top: 3px; color: var(--doux); transition: color .3s; }
.etapes span { font-size: 14.5px; line-height: 1.45; color: var(--doux); }
.etapes .ici::before { background: var(--b); color: var(--t); box-shadow: none; }
.etapes .ici b { color: var(--encre); }
.etapes button::after { content: ""; position: absolute; left: 42px; right: 0; bottom: -1px; height: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; }
.etapes .ici::after { animation: seg var(--t, 3s) linear both; }
.en-pause-page .etapes .ici::after { animation-play-state: paused; }
@keyframes seg { to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .etapes .ici::after { animation: none; } }
.relies { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.relies li { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 13px 4px 11px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait-doux); font-size: 14px; }
.relies svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plus p { margin: 0; font-size: 16px; line-height: 1.55; padding-left: 14px; border-left: 3px solid var(--c); }
.prix-boite { margin-top: 30px; padding: 24px 24px 22px; border-radius: 22px; background: rgb(var(--blanc) / .96); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .08), 0 24px 48px -34px rgb(var(--encre-rgb) / .55); }
.prix-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 16px; }
.prix-montant { margin: 0; font-size: 15px; color: var(--doux); }
.prix-montant b { display: block; font-size: 42px; line-height: 1.05; font-weight: 600; letter-spacing: -.03em; color: var(--encre); }
.mode { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 16px; background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: var(--encre); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mode .ti { stroke: var(--c); stroke-width: 2; }
.mode.sur-mesure { background: var(--gris); color: var(--texte3); }
.prix-note { margin: 12px 0 0; font-size: 15px; font-weight: 500; color: var(--encre); }
.prix-explique { margin: 14px 0 0; font-size: 15px; line-height: 1.5; }
.prix-tva { margin: 6px 0 0; font-size: 13.5px; color: var(--doux); }
.prix-lignes { margin: 18px 0 0; padding: 0; border-top: 1px solid var(--trait-doux); }
.prix-lignes div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--trait-doux); font-size: 14.5px; }
.prix-lignes dt { color: var(--doux); flex: none; max-width: 48%; } .prix-lignes dd { margin: 0; text-align: right; min-width: 0; }
.prix-action { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; }
.prix-action .bouton { flex: 1 1 auto; }
.prix-action p { margin: 0; font-size: 13.5px; color: var(--doux); flex: 1 1 100%; }
.prix-action p a { display: inline-block; padding: 12px 0; color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.sur-etapes { margin: 16px 0 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.5; }
.sur-etapes li + li { margin-top: 8px; }
.sur-etapes li::marker { color: var(--encre); font-weight: 600; }

/* « Voir les détails » */
.detail { margin-top: 22px; border-radius: 20px; background: var(--voile); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .08); }
.detail summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 20px; border-radius: 20px; cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; }
.detail summary::-webkit-details-marker { display: none; }
.detail summary:hover { background: color-mix(in srgb, var(--c) 7%, var(--surface)); }
.detail-ind { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--c) 15%, var(--surface)); flex: none; }
.detail-ind::before, .detail-ind::after { content: ""; position: absolute; width: 12px; height: 1.8px; border-radius: 1px; background: var(--encre); transition: transform .25s ease; }
.detail-ind::after { transform: rotate(90deg); }
.detail[open] .detail-ind::after { transform: rotate(0deg); }
.detail-corps { padding: 2px 20px 20px; }
.dt { padding: 16px 0; border-top: 1px solid var(--trait-doux); }
.dt h3 { margin: 0 0 8px; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; }
.dt p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--texte2); }
.dt p + p { margin-top: 8px; }
.dt-intro { color: var(--doux) !important; margin-bottom: 8px !important; }
.dt-etapes { margin: 0; padding: 0 0 0 22px; font-size: 15px; line-height: 1.55; color: var(--texte2); }
.dt-etapes li + li { margin-top: 7px; }
.dt-etapes li::marker { color: var(--encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-besoins { margin: 0; padding: 0; list-style: none; }
.dt-besoins li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 8px 0; font-size: 15px; line-height: 1.45; }
.dt-besoins li + li { border-top: 1px dashed var(--trait-doux); }
.dt-besoins b { font-weight: 600; }
.dt-besoins .pour { color: var(--doux); }
.dt-besoins .option { padding: 1px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 15%, var(--surface)); color: var(--encre); font-size: 12.5px; font-weight: 500; }
.dt-plus { margin: 0 0 4px; padding: 0; list-style: none; }
.dt-plus li { display: flex; gap: 10px; padding: 6px 0; font-size: 15px; line-height: 1.5; }
.dt-plus .ti { margin-top: 3px; color: var(--c); width: 16px; height: 16px; stroke-width: 2; }
.dt-cmp { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgb(var(--blanc) / .7); box-shadow: inset 0 0 0 1px var(--trait-doux); }
.dt-cmp h4 { margin: 0 0 4px; font-size: 14.5px; font-weight: 600; }
.dt-cmp p { font-size: 14.5px; }
.dt-limites { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--texte2); }
.dt-limites li + li { margin-top: 4px; }
.dt-ici { margin-top: 6px !important; font-weight: 600; color: var(--encre) !important; }
.dt-ref { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--trait-doux); font-size: 13px; color: var(--faible); }
.log-voisins { margin-top: clamp(64px, 7vw, 96px); }
@media (max-width: 960px) {
  .log { grid-template-columns: 1fr; grid-template-areas: "entete" "scene" "suite"; grid-template-rows: auto; gap: 0; }
  .log-entete { padding-top: 6px; }
  .log-scene { position: relative; top: 0; height: auto; margin: 16px 0 0; }
  .log-scene::before { inset: 0 0 18%; }
  .log-scene .hote { height: auto; }
  .log-exemple { position: static; margin-top: 4px; }
  .log-suite { padding-top: 6px; }
  .etapes-bloc { display: none; }
  .log.sur .etapes-bloc { display: none; }
}
@media (min-width: 961px) { .log-scene .sc-barre { display: none; } }
@media (max-width: 520px) {
  .prix-boite { padding: 20px 16px 18px; border-radius: 18px; }
  .prix-montant b { font-size: 36px; }
  .prix-lignes div { flex-direction: column; gap: 2px; }
  .prix-lignes dt { max-width: none; }
  .prix-lignes dd { text-align: left; }
  .detail summary { padding: 0 16px; }
  .detail-corps { padding: 2px 16px 16px; }
}

/* ---------- Fenêtre « Être prévenu » */
.prevenir { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 22px; background: var(--surface); color: var(--encre); box-shadow: 0 40px 80px -30px rgb(var(--encre-rgb) / .5); }
.prevenir::backdrop { background: rgb(var(--encre-rgb) / .35); }
.prevenir-in { position: relative; padding: 26px 26px 24px; }
.prevenir h2 { margin: 0 44px 10px 0; font-size: 22px; letter-spacing: -.02em; font-weight: 500; }
.prevenir p { margin: 0 0 12px; color: var(--doux); }
.prevenir-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.fermer { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.fermer:hover { background: rgb(var(--encre-rgb) / .06); }


/* =================================================================== RETOUCHES DU 25/10 */
html[lang="zh-Hans"] .log h1, html[lang="zh-Hans"] .carte-corps h3 { word-break: normal; }
/* fond du sommaire : les bulles sont posées sur le fond animé */
body { padding-bottom: 0; }

/* ---------- Recherche, métiers */
.ouv-droite { min-width: 0; }
.metiers { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; max-width: 560px; }
.metiers.ouvert { max-height: 232px; overflow: auto; padding: 2px 2px 6px; }
.puce { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border: 1px solid var(--trait); border-radius: 999px; background: rgb(var(--blanc) / .82); color: var(--encre); font-size: 14px; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.puce:hover { border-color: var(--encre); }
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }
.puce.plus { color: var(--doux); border-style: dashed; }
.ouv-liens { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 18px 0 0; font-size: 14.5px; }
.ouv-liens a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--encre); text-underline-offset: 3px; }
.ouv-liens a:hover { text-decoration: underline; }
.res-tete { margin: 0 0 14px; font-size: 14.5px; color: var(--doux); }
.res-tete b { color: var(--encre); font-weight: 600; }
.rien { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 4px 40px; color: var(--encre); font-size: 17px; }
.rien[hidden] { display: none; }
.reco { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 17%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent); color: var(--encre); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.reco .ti { width: 12px; height: 12px; stroke: var(--c); stroke-width: 2.2; }
.carte-l .reco { position: absolute; left: 12px; top: 12px; z-index: 3; background: color-mix(in srgb, var(--c) 17%, var(--surface)); }

/* ---------- Pied de page de chaque page : licence, suivi ou abonnement, puis la ligne légale */
.pied { position: relative; z-index: 1; margin-top: clamp(72px, 9vw, 132px); padding-bottom: calc(clamp(36px, 5vw, 72px) + env(safe-area-inset-bottom)); }
.pied .bloc-tete { border-bottom-color: var(--trait); }
.pied-legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 22px; margin: clamp(36px, 4.5vw, 64px) 0 0; font-size: 13px; line-height: 1.5; color: var(--faible); text-align: center; text-shadow: 0 0 10px rgb(var(--papier-rgb) / .95), 0 0 3px rgb(var(--papier-rgb) / .9); }
.pied-legal .tva { flex: 1 1 100%; margin-bottom: 2px; }
.pied-legal a { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; }
.pied-legal a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.pied-liens { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pied-liens a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 0 18px 0 22px; border-radius: 18px; background: rgb(var(--blanc) / .78); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .06), 0 10px 26px -20px rgb(var(--encre-rgb) / .4); font-size: 16px; font-weight: 500; text-decoration: none; text-shadow: none; transition: box-shadow .2s ease, transform .2s ease; }
.pied-liens a:hover { box-shadow: 0 0 0 1.5px var(--encre), 0 14px 30px -20px rgb(var(--encre-rgb) / .5); transform: translateY(-1px); }
.pied-liens .ic { width: 20px; height: 20px; color: var(--doux); }
@media (min-width: 1200px) {
  .pied.deux { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
  .pied.deux .achat-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 2.4vw, 40px); }
  .pied.deux .pied-legal { justify-content: flex-start; text-align: left; margin-top: 28px; gap: 0 18px; }
  .pied.deux .pied-col2 .bloc-tete { margin-bottom: 16px; }
}
@media (max-width: 1199px) { .pied.deux .pied-col2 { margin-top: clamp(44px, 6vw, 72px); } }

/* ---------- Fiche : actions, comparateur sur 12 mois, aperçu du mail, question fréquente */
.log-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 18px 0 0; }
.bouton.petit { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.bouton.petit .ic { width: 17px; height: 17px; }
.bouton.second { background: var(--surface); }
.lien-inst { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--encre); font-size: 14.5px; text-underline-offset: 3px; }
.lien-inst:hover { text-decoration: underline; }
.log-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.cmp12 { margin-top: 22px; padding: 20px 20px 18px; border-radius: 20px; background: var(--voile); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .08); }
.cmp12 h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.cmp12 > p { margin: 0 0 14px; font-size: 14px; color: var(--doux); }
.cmp12-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp12-col { padding: 14px 14px 13px; border-radius: 14px; background: rgb(var(--blanc) / .7); box-shadow: inset 0 0 0 1px var(--trait-doux); }
.cmp12-col.mieux { box-shadow: inset 0 0 0 1.5px var(--c); }
.cmp12-col h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; font-weight: 600; }
.cmp12-col h3 .ti { stroke: var(--c); stroke-width: 2; }
.cmp12-col .total { display: block; margin: 8px 0 2px; font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cmp12-col small { display: block; font-size: 13px; line-height: 1.45; color: var(--doux); }
.cmp12-barre { height: 8px; margin-top: 12px; border-radius: 4px; background: var(--trait-doux); overflow: hidden; }
.cmp12-barre i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.cmp12-conclusion { margin: 14px 0 0 !important; font-size: 14.5px !important; color: var(--encre) !important; }
.mail { margin-top: 22px; border-radius: 20px; background: var(--voile); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .08); overflow: hidden; }
.mail h2 { margin: 0; padding: 16px 20px 0; font-size: 16px; font-weight: 600; }
.mail-carte { margin: 12px 14px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait-doux); overflow: hidden; }
.mail-objet { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--trait-doux); font-size: 14.5px; }
.mail-objet small { display: block; font-size: 12px; color: var(--faible); }
.mail-objet b { font-weight: 600; }
.mail-corps { position: relative; max-height: 210px; margin: 0; padding: 14px 16px 18px; overflow: hidden; font-size: 14px; line-height: 1.55; color: var(--texte2); white-space: pre-line; }
.mail-corps::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(rgb(var(--blanc) / 0), var(--surface)); }
.mail-note { margin: 0; padding: 0 20px 16px; font-size: 13px; color: var(--doux); }
.faq { margin-top: 22px; }
.faq .detail-corps p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--texte2); }
.faq .detail-corps p + p { margin-top: 8px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 20px); max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px; background: var(--encre); color: var(--papier); font-size: 14.5px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 520px) { .cmp12-grille { grid-template-columns: 1fr; } }

/* ---------- Pages « Installation » et « Nouveautés » */
.page-simple { padding: clamp(28px, 4vw, 56px) 0 0; }
.page-simple h1 { margin: 0; max-width: 18ch; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.05; letter-spacing: -.038em; font-weight: 500; text-wrap: balance; text-shadow: 0 0 10px rgb(var(--papier-rgb) / .95), 0 0 3px rgb(var(--papier-rgb) / .9); }
.page-simple .intro { max-width: 40em; margin: 18px 0 0; font-size: clamp(17px, 1.25vw, 19.5px); line-height: 1.55; color: var(--doux); text-shadow: 0 0 10px rgb(var(--papier-rgb) / .95), 0 0 3px rgb(var(--papier-rgb) / .9); }
.inst { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; counter-reset: inst; }
.inst li { counter-increment: inst; display: flex; flex-direction: column; border-radius: 24px; background: rgb(var(--blanc) / .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .05), 0 14px 34px -22px rgb(var(--encre-rgb) / .38); overflow: hidden; }
.inst-img { display: grid; place-items: center; padding: 22px 18px 6px; background: radial-gradient(90% 90% at 70% 20%, color-mix(in srgb, var(--encre) 7%, transparent), transparent 70%); }
.inst-img svg { width: 100%; max-width: 230px; height: auto; fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inst-img .fond-s { fill: var(--surface); } .inst-img .doux { stroke: var(--gris-moyen); } .inst-img .plein { fill: var(--encre); stroke: none; } .inst-img .ok { stroke: var(--vert); }
.inst-corps { padding: 14px 22px 24px; }
.inst-corps h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.inst-corps h2::before { content: counter(inst); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--encre); color: var(--papier); font-size: 14px; font-weight: 600; }
.inst-corps p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--doux); }
.inst-note { max-width: 46em; margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 20px 24px; border-radius: 20px; background: rgb(var(--blanc) / .78); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .06); font-size: 15px; line-height: 1.6; }
.inst-note p { margin: 0; } .inst-note p + p { margin-top: 8px; color: var(--doux); }
.page-simple .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; }
.nouv { max-width: 52em; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.nouv li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 28px; padding: 22px 24px; border-radius: 22px; background: rgb(var(--blanc) / .78); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .05), 0 14px 34px -22px rgb(var(--encre-rgb) / .38); }
.nouv li + li { margin-top: 14px; }
.nouv time { font-size: 14.5px; color: var(--doux); font-variant-numeric: tabular-nums; padding-top: 3px; }
.nouv h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.nouv ul { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--doux); }
@media (max-width: 1100px) { .inst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* la mise en place en cinq étapes : cinq colonnes sur grand écran, trois sur écran moyen */
@media (min-width: 1300px) { .inst.cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 901px) and (max-width: 1299px) { .inst.cinq { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .inst { grid-template-columns: 1fr; } .nouv li { grid-template-columns: 1fr; padding: 18px 18px; } }
html { --vert: #2f7d54; } html[data-theme="dark"] { --vert: #5fb585; }

/* ---------- Mode présentation : plein écran, textes plus grands, flèches pour passer d'une fiche à l'autre */
.pres-barre { display: none; }
body.presentation .nav, body.presentation .nav-site, body.presentation .langue, body.presentation .ariane, body.presentation .pied, body.presentation .voisins,
body.presentation .detail, body.presentation .faq, body.presentation .mail, body.presentation .cmp12, body.presentation .log-actions, body.presentation .relies,
body.presentation .log-exemple, body.presentation .reco-hors { display: none !important; }
body.presentation .tete-in { height: 64px; }
body.presentation .log h1 { font-size: clamp(36px, 3.6vw, 66px); }
body.presentation .log-accroche { font-size: clamp(19px, 1.6vw, 26px); }
body.presentation .etapes b { font-size: clamp(18px, 1.35vw, 23px); } body.presentation .etapes span { font-size: clamp(15.5px, 1.15vw, 19px); }
body.presentation .log-h { font-size: 17px; }
body.presentation .prix-montant b { font-size: clamp(46px, 3.6vw, 62px); } body.presentation .prix-montant, body.presentation .prix-explique { font-size: 17px; }
body.presentation .cat-tete h1 { font-size: clamp(48px, 5.6vw, 96px); } body.presentation .cat-texte { font-size: clamp(20px, 1.6vw, 26px); }
body.presentation .carte-corps h3 { font-size: 21px; } body.presentation .carte-corps p { font-size: 16.5px; }
body.presentation .br-nom { font-size: clamp(24px, 2.3vw, 38px); } body.presentation .br-texte { font-size: 17px; }
body.presentation .pres-barre { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; border: 1px solid rgb(var(--encre-rgb) / .08); background: rgb(var(--blanc) / .86); -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); box-shadow: 0 12px 34px -16px rgb(var(--encre-rgb) / .3); font-size: 14px; color: var(--doux); }
body.presentation .pres-barre button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--encre); cursor: pointer; }
body.presentation .pres-barre button:hover { background: rgb(var(--encre-rgb) / .08); }
body.presentation .pres-barre svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.presentation .pres-barre span { padding: 0 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.presentation main { padding-bottom: 84px; }
@media (max-width: 640px) { body.presentation .pres-barre span { display: none; } }

/* ---------- Mode sombre : ce qui n'est pas déjà couvert par les variables */
html[data-theme="dark"] .bulle { border-color: rgb(255 255 255 / .08); box-shadow: 0 12px 34px -16px rgb(0 0 0 / .6), 0 1px 2px rgb(0 0 0 / .3); }
html[data-theme="dark"] .br, html[data-theme="dark"] .inst li, html[data-theme="dark"] .nouv li, html[data-theme="dark"] .pied-liens a, html[data-theme="dark"] .achat-grille, html[data-theme="dark"] .prix-boite, html[data-theme="dark"] .detail, html[data-theme="dark"] .carte-l, html[data-theme="dark"] .voisins a {
  box-shadow: 0 0 0 1px rgb(255 255 255 / .07), 0 14px 34px -22px rgb(0 0 0 / .7);
}
html[data-theme="dark"] .br:hover, html[data-theme="dark"] .br:focus-within { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent), 0 20px 40px -22px rgb(0 0 0 / .8); }
html[data-theme="dark"] .carte-l:hover { box-shadow: 0 0 0 1.5px var(--c), 0 26px 44px -30px rgb(0 0 0 / .8); }
html[data-theme="dark"] .voisins a:hover, html[data-theme="dark"] .voisins a:focus-visible { background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--encre); box-shadow: 0 0 0 1.5px var(--c), 0 18px 38px -24px rgb(0 0 0 / .8); }
html[data-theme="dark"] .voisins a:hover small, html[data-theme="dark"] .voisins a:focus-visible small { color: var(--texte3); }
html[data-theme="dark"] .pied-liens a:hover, html[data-theme="dark"] .pied-liens a:focus-visible, html[data-theme="dark"] .impa-lien a:hover, html[data-theme="dark"] .impa-lien a:focus-visible { color: var(--encre); }
html[data-theme="dark"] .bouton.second { background: var(--gris); color: var(--encre); }
html[data-theme="dark"] .bouton[aria-disabled="true"] { background: var(--gris); color: var(--doux); }
html[data-theme="dark"] .bientot { background: var(--surface); }
html[data-theme="dark"] .puce[aria-pressed="true"] { color: var(--papier); }
html[data-theme="dark"] .chercher input { background: rgb(var(--blanc) / .9); }
html[data-theme="dark"] .prevenir { box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8); }
html[data-theme="dark"] .prevenir::backdrop { background: rgb(0 0 0 / .6); }
html[data-theme="dark"] .mode.sur-mesure { background: var(--gris); color: var(--texte3); }
html[data-theme="dark"] .mail-corps::after { background: linear-gradient(rgb(26 27 32 / 0), var(--surface)); }
html[data-theme="dark"] .inst-img svg .doux { stroke: #70757f; }
/* 29/10 au soir (comme sur la vitrine) : le bouton montre le thème actif, la lune en sombre, le soleil en clair */
.theme-lune { display: none; } html[data-theme="dark"] .theme-lune { display: inline; } html[data-theme="dark"] .theme-soleil { display: none; }
/* le bouton se voit tout de suite : un anneau ; le soleil chaud en clair, la lune bleu clair en sombre */
#theme.icone { color: #b26b12; background: rgb(245 176 66 / .1); box-shadow: inset 0 0 0 1px rgb(178 107 18 / .3); transition: background .2s, box-shadow .2s; }
#theme.icone:hover { background: rgb(245 176 66 / .17); box-shadow: inset 0 0 0 1px rgb(178 107 18 / .5); }
#theme .theme-lune { fill: currentColor; fill-opacity: .22; }
html[data-theme="dark"] #theme.icone { color: #c9d4ff; background: rgb(157 176 255 / .1); box-shadow: inset 0 0 0 1px rgb(157 176 255 / .34), 0 0 18px -6px rgb(157 176 255 / .6); }
html[data-theme="dark"] #theme.icone:hover { background: rgb(157 176 255 / .16); box-shadow: inset 0 0 0 1px rgb(157 176 255 / .55), 0 0 22px -6px rgb(157 176 255 / .75); }
@media (prefers-reduced-motion: reduce) { .br, .br-rond, .br-fl, .toast { transition: none; } }
.pied.deux .pied-legal a { min-height: 32px; }
.inst-corps h2 { align-items: flex-start; } @media (min-width: 1101px) { .inst-corps h2 { min-height: 56px; } }
.retour, .son, .icone { flex: none; }

/* ---------- Retouches du 25/10 (soir) : liste des langues sous le bouton, IMPA Guide, formulaires visibles, appel de 20 minutes */
.cat-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.cat-actions .bouton { white-space: normal; text-align: left; }
.cat-actions .ic { flex: none; }
.impa-lien { margin: clamp(30px, 4vw, 52px) 0 clamp(26px, 3vw, 40px); }
.impa-lien a { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 24px; background: rgb(var(--blanc) / .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .06), 0 14px 34px -22px rgb(var(--encre-rgb) / .38); text-decoration: none; color: var(--encre); transition: transform .2s, box-shadow .2s; }
.impa-lien a:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), 0 18px 38px -22px rgb(var(--encre-rgb) / .45); }
.impa-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.impa-ic .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.impa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.impa-txt b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.impa-txt small { font-size: 14px; line-height: 1.45; color: var(--doux); }
.impa-lien > a > .ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.inst-note.abo { margin-top: 14px; }
.inst-note.abo h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.inst-note.abo p + p { margin-top: 6px; }
.guide-page h1 { max-width: 22ch; }
.guide-page .cat-sur { margin-bottom: 14px; }
.guide-sec { counter-increment: gsec; margin: 18px 0 0; padding: 22px clamp(18px, 2.4vw, 32px) 24px; border-radius: 24px; background: rgb(var(--blanc) / .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .05), 0 14px 34px -22px rgb(var(--encre-rgb) / .38); }
.page-simple { counter-reset: gsec; }
.guide-sec h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.015em; }
.gnum::before { content: counter(gsec); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--encre); color: var(--papier); font-size: 14px; font-weight: 600; }
.guide-sec p { margin: 0 0 8px; max-width: 46em; font-size: 15.5px; line-height: 1.6; color: var(--texte2); }
.guide-sec a { color: var(--encre); text-underline-offset: 3px; }
.guide-note { font-size: 14px !important; color: var(--doux) !important; }
.guide-etapes { margin: 6px 0 12px; padding: 0; list-style: none; counter-reset: ge; display: grid; gap: 8px; max-width: 46em; }
.guide-etapes li { counter-increment: ge; display: flex; gap: 12px; align-items: baseline; padding: 11px 16px; border-radius: 16px; background: var(--voile); box-shadow: inset 0 0 0 1px var(--trait-doux); font-size: 15.5px; line-height: 1.5; color: var(--encre); }
.guide-etapes li::before { content: counter(ge); flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--c, var(--encre)); min-width: 1.1em; }
.guide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; padding: 0; list-style: none; }
.guide-chips li { padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--encre)) 14%, var(--surface)); box-shadow: inset 0 0 0 1px var(--trait-doux); font-size: 14.5px; }
.guide-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.guide-branches a { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border-radius: 18px; background: var(--voile); box-shadow: inset 0 0 0 1px var(--trait-doux); text-decoration: none; transition: background .2s, transform .2s; }
.guide-branches a:hover { background: color-mix(in srgb, var(--c) 10%, var(--surface)); transform: translateY(-1px); }
.guide-branches span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.guide-branches b { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.guide-branches small { font-size: 13px; color: var(--doux); }
.guide-branches .ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.guide-liste { margin: 0; padding: 0; list-style: none; }
.guide-liste li { padding: 7px 0; font-size: 15px; line-height: 1.55; color: var(--texte2); }
.guide-liste li + li { border-top: 1px dashed var(--trait-doux); }
.guide-liste b { color: var(--encre); font-weight: 600; margin-right: 4px; }
.guide-depart { margin-top: 8px !important; font-size: 14.5px !important; }
.guide-depart b { color: var(--encre); font-weight: 600; }
.fiche { margin-top: 10px; }
.fiche summary { min-height: 54px; }
.fiche .detail-corps { padding-top: 0; }
.fiche .dt p { max-width: none; }
details.mini { margin-top: 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--trait-doux); background: rgb(var(--blanc) / .6); }
details.mini summary { padding: 11px 16px; cursor: pointer; font-size: 14.5px; font-weight: 500; }
details.mini .guide-liste { padding: 0 16px 10px; }
.guide-lien { margin: 14px 0 0 !important; }
.guide-abo { margin: 6px 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; }
.guide-abo li { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-radius: 16px; background: var(--voile); box-shadow: inset 0 0 0 1px var(--trait-doux); font-size: 15px; line-height: 1.5; color: var(--texte2); }
.guide-abo b { font-weight: 600; color: var(--encre); }
.form-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; padding: 0; list-style: none; }
.form-grille li { padding: 16px 18px 12px; border-radius: 18px; background: var(--voile); box-shadow: inset 0 0 0 1px var(--trait-doux); }
.form-grille h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.form-grille h3 a { color: var(--encre); text-decoration: none; }
.form-grille h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.form-grille p { margin: 0 !important; font-size: 14.5px !important; color: var(--doux) !important; }
.form-grille .guide-liste li { padding: 6px 0; font-size: 14.5px; background: none; box-shadow: none; border-radius: 0; }
.prix-action .bouton.second { flex: 1 1 auto; }
@media (max-width: 900px) { .guide-branches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .guide-branches { grid-template-columns: minmax(0, 1fr); } .impa-lien a { padding: 16px; gap: 12px; } .guide-etapes li { padding: 10px 14px; } }

/* ---------- Défilement fluide partout (30/10, « un peu saccadé ») : les grands blocs (lignes, grilles, cartes, guides) n'ont plus de
 * flou d'arrière-plan sur ordinateur non plus. Un flou posé sur une grande surface doit être recalculé par la carte graphique
 * à chaque image dès que le contenu défile dessus ; le voile presque plein donne le même rendu sans ce coût. Seules les
 * petites bulles de la tête gardent leur flou. */
.br, .lignes, .achat-grille, .inst li, .impa-lien a, .guide-sec { -webkit-backdrop-filter: none; backdrop-filter: none; }
.br, .inst li, .impa-lien a, .guide-sec { background: rgb(var(--blanc) / .93); }
.lignes, .achat-grille { background: rgb(var(--blanc) / .9); }

/* ---------- Téléphone et écran tactile (29/10, « pas du tout fluide ») : le fond animé change à chaque image, et chaque voile
 * flouté posé dessus devait être recalculé à chaque image. Ici : aucun flou, des voiles presque pleins, des ombres courtes.
 * Les sélecteurs html[data-theme] passent devant les ombres du mode sombre ; la même règle sert aux deux thèmes. */
@media (max-width: 820px), (pointer: coarse) {
  .bulle, .br, .lignes, .achat-grille, .inst li, .impa-lien a, .guide-sec, body.presentation .pres-barre { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bulle, body.presentation .pres-barre { background: rgb(var(--blanc)); } /* plein : sans flou, le texte de la page transparaissait */
  .br, .inst li, .impa-lien a, .guide-sec { background: rgb(var(--blanc) / .93); }
  .lignes, .achat-grille { background: rgb(var(--blanc) / .9); }
  html[data-theme] .bulle { box-shadow: 0 6px 16px -12px rgb(0 0 0 / .35); }
  html[data-theme] .br, html[data-theme] .inst li, html[data-theme] .impa-lien a, html[data-theme] .guide-sec, html[data-theme] .nouv li, html[data-theme] .pied-liens a, html[data-theme] .prix-boite {
    box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .07), 0 8px 18px -14px rgb(0 0 0 / .3);
  }
  /* ces blocs n'ont qu'un filet en clair : en sombre, le filet seul, sans la grande ombre */
  html[data-theme="dark"] .achat-grille, html[data-theme="dark"] .detail, html[data-theme="dark"] .carte-l, html[data-theme="dark"] .voisins a { box-shadow: 0 0 0 1px rgb(255 255 255 / .07); }
}

/* Passage d'une page à l'autre sans rechargement (navigation.js) : la page arrive en fondu, montée de 8 px, 320 ms,
 * décélération douce ; le curseur patiente si la page suivante tarde. Rien si l'utilisateur réduit les animations. */
main:focus { outline: none; }
main.c3-arrivee > * { animation: c3-arrivee .32s cubic-bezier(.2, 0, 0, 1) backwards; }
@keyframes c3-arrivee { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html.c3-charge, html.c3-charge * { cursor: progress; }
@media (prefers-reduced-motion: reduce) { main.c3-arrivee > * { animation: none; } }

/* Branches en préparation (29/10) : « Bientôt » à la place du prix, une note sobre quand la branche en a une */
.tarif.prep span:first-child, .br-chiffres .bientot, .cat-chiffres .bientot { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 12px; background: color-mix(in srgb, var(--c) 14%, var(--surface)); color: var(--encre); font-size: 13px; font-weight: 600; white-space: nowrap; }
.mode.preparation { background: color-mix(in srgb, var(--c) 15%, var(--surface)); }
.cat-note { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 8%, var(--surface)); color: var(--encre); font-size: 15px; line-height: 1.5; max-width: 62ch; }
.log-prep .prix-montant b { font-size: clamp(28px, 4vw, 36px); }

/* 30/10 : les 5 branches en préparation mises en avant, juste après les branches ouvertes */
.br.prep.a-la-une .br-chiffres .bientot { background: color-mix(in srgb, var(--c) 32%, var(--surface)); }

/* ---------- Mode léger (02/11, /commun/leger.js) : appareil modeste, même sur ordinateur. Les réglages du téléphone (bloc
 * ci-dessus) s'appliquent partout : aucun flou, voiles presque pleins, ombres courtes ; ni rubans WebGL (fonds.js), ni
 * boucle des scènes 3D (scene3d.js, comme « réduire les animations »), ni musique tant qu'on ne la demande pas (musique.js),
 * ni fondu à chaque changement de page. */
html.leger .bulle, html.leger body.presentation .pres-barre { background: rgb(var(--blanc)); }
html.leger .br, html.leger .inst li, html.leger .impa-lien a, html.leger .guide-sec { background: rgb(var(--blanc) / .93); }
html.leger .lignes, html.leger .achat-grille { background: rgb(var(--blanc) / .9); }
html.leger[data-theme] .bulle { box-shadow: 0 6px 16px -12px rgb(0 0 0 / .35); }
html.leger[data-theme] .br, html.leger[data-theme] .inst li, html.leger[data-theme] .impa-lien a, html.leger[data-theme] .guide-sec, html.leger[data-theme] .nouv li, html.leger[data-theme] .pied-liens a, html.leger[data-theme] .prix-boite {
  box-shadow: 0 0 0 1px rgb(var(--encre-rgb) / .07), 0 8px 18px -14px rgb(0 0 0 / .3);
}
html.leger[data-theme="dark"] .achat-grille, html.leger[data-theme="dark"] .detail, html.leger[data-theme="dark"] .carte-l, html.leger[data-theme="dark"] .voisins a { box-shadow: 0 0 0 1px rgb(255 255 255 / .07); }
html.leger .prevenir { box-shadow: 0 16px 36px -20px rgb(0 0 0 / .5); }
html.leger .pied-legal { text-shadow: none; }
html.leger main.c3-arrivee > * { animation: none; }
html.leger .bouton:hover, html.leger .br:hover, html.leger .impa-lien a:hover, html.leger .pied-liens a:hover { transform: none; }

/* ---------- Confort au doigt (02/11) : sur écran tactile, toute cible fait au moins 44 px de haut, deux cibles voisines
 * restent espacées (puces des métiers, liens du pied, fil d'Ariane, liens d'une ligne). */
@media (pointer: coarse) {
  .retour, .son, .icone { min-width: 44px; min-height: 44px; }
  .nav-sommaire, .nav-site, .langue-btn, .langue-liste li { min-height: 44px; }
  .puce { min-height: 44px; }
  .ariane a, .log-cat, .ouv-liens a, .lien-inst { min-height: 44px; }
  .ouv-liens { gap: 6px 22px; }
  .pied-legal a, .pied.deux .pied-legal a { min-height: 44px; }
  .pied-legal { gap: 2px 22px; }
}

/* 03/11 : « Prendre toute la branche » (abonnement de la branche entière), avec son prix sous le libellé.
   Les boutons ont leur propre fond : jamais le halo de lisibilité des blocs de texte (.cat-tete, .log-entete...).
   Teinte douce de la branche (pas la couleur pleine), texte à l'encre du thème, couleur pleine réservée à l'icône. */
.bouton { text-shadow: none; }
.cat-actions .branche-tout { padding-block: 8px; background: color-mix(in srgb, var(--b) 10%, var(--surface)); color: var(--encre); border-color: color-mix(in srgb, var(--b) 38%, var(--trait)); }
.cat-actions .branche-tout:hover { border-color: color-mix(in srgb, var(--b) 70%, var(--trait)); box-shadow: none; }
.cat-actions .branche-tout .ic { color: var(--b); }
.cat-actions .branche-tout span { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cat-actions .branche-tout small { font-size: 0.8em; font-weight: 400; color: var(--doux); }

/* 03/11 : bulle de profil (/commun/profil.css) dans la pilule de droite, juste après le bouton du son : toujours visible,
   40 px comme les autres boutons ronds (44 px au doigt) ; couleurs du thème du catalogue */
.tete .profil-bulle { display: inline-flex; margin-left: 0; }
html[data-theme="dark"] { --photo: #2a3042; --teinte-rgb: 255 255 255; --ombre-rgb: 0 0 0; --sur-encre: #0a0a0b; --trait-2: #3a4157; }