/* ==========================================================================
   PERSO — themes.css — DIRECTIONS ARTISTIQUES DU HUB (2026-10-30)
   --------------------------------------------------------------------------
   Chargé APRÈS perso.css. La mise en page ne bouge pas : un thème ne change
   que les jetons (couleurs, polices, casse, traits, arrondis, ombres) et
   quelques détails d'habillage propres à sa direction.

   Le thème actif est posé sur <html data-theme="…"> par inc/header.php
   (réglage « theme », choisi dans Réglages). Sans attribut : « Ambre »,
   le thème d'origine défini dans perso.css.

   Polices hébergées ici (assets/fonts/, sous-ensemble latin) : aucune
   requête vers Google, le hub reste sans ressource externe.
   ========================================================================== */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/space-grotesk-1.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/jetbrains-mono-1.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-2.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-1.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/inter-1.woff2) format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/unbounded-1.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-mono-1.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/plex-mono-2.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/manrope-1.woff2) format('woff2'); }

/* ---------- Câblage commun des jetons (sans effet sur « Ambre ») ---------- */
h1, h2, h3, .wordmark, .page-title, .app-tile .app-label, .note-card .n-title,
.cand-card .c-firme, .pf-title, .stat-tuile .v, .sheet-title, .res-card .r-title,
.cal-head h2, .login-box h1 { font-family: var(--f-titre); }

.card h2, .launcher-cat, label, .badge, .res-badge, .tab, .btn, .chip, .utility a,
.appname, .msec, .sheet-grid dt, .sheet-sec h3, .form-sec > .sec-lbl, .cal-dow,
.tp-fac legend, .row .t-meta, .note-card .n-meta, .pf-meta, .cand-card .c-date,
.mitem .mdate, .app-tile .app-desc, .page-sub, .tag-mini, .stat-tuile .l,
.login-box .tag { font-family: var(--f-libelle); }

.card, .app-tile, .note-card, .cand-card, .res-card, .pf-card, .stat-tuile,
.modal-panel, .login-box, .mail3, .flash, .cal-grid { border-radius: var(--rayon); }
.cal-grid, .mail3 { overflow: hidden; }
.pf-media, .res-card .r-thumb { border-radius: calc(var(--rayon) * .6); }

.btn, .chip, input, select, textarea, .badge, .res-badge, .app-tile .ico, .tick,
.cal-nav, .modal-close, .tp-puce, .tp-radio span, .tag-mini, .cal-ev, .att-vue,
.att-ic, .kbd, .svg-bulle { border-radius: var(--rayon-sm); }

.app-tile, .note-card, .cand-card, .res-card, .pf-card { transition: border-color .12s, color .12s, box-shadow .15s, transform .15s; }
.app-tile:hover, a.note-card:hover, .note-card[data-modal]:hover, .cand-card:hover,
.res-card.clickable:hover, .pf-card:hover { box-shadow: var(--ombre); }

/* Sur le tableau de bord, notes récentes et portfolio occupent toute la
   largeur de leur carte au lieu de laisser un vide à droite. */
.card > .notes-grid, .card > .pf-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Bandeau du haut et contenu : toute la largeur, gouttière qui suit l'écran. */
.bar, .subbar { padding-left: max(clamp(16px, 2.4vw, 44px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 2.4vw, 44px), env(safe-area-inset-right)); }
.main { padding-left: max(clamp(16px, 2.4vw, 44px), env(safe-area-inset-left)); padding-right: max(clamp(16px, 2.4vw, 44px), env(safe-area-inset-right)); }

/* ==========================================================================
   0. INVPROD — la charte v9 du studio, sans accent : noir, blanc, gris,
   Montserrat, texture en fond, cadres fins, coins droits. Le blanc tient
   le rôle de l'accent. Polices et texture copiées depuis invprod.ch.
   ========================================================================== */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/montserrat-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: 'Montserrat'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/montserrat-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; }
html[data-theme="invprod"] {
  --noir: #000; --panel: #111; --gris-fonce: #1a1a1a; --gris-moyen: #8c8c8c;
  --gris-clair: #d9d9d9; --blanc: #fff; --bord: #333; --ligne: #222; --hors: #070707;
  --accent: #fff; --accent-soft: #1f1f1f; --accent-encre: #000; --accent-survol: transparent;
  --ok: #7dd87d; --warn: #f2c94c; --err: #ff6b6b; --voile: rgba(0, 0, 0, .8);
  --f-texte: 'Montserrat', Arial, sans-serif;
  --f-titre: 'Montserrat', Arial, sans-serif;
  --f-libelle: 'Montserrat', Arial, sans-serif;
  --cat-organisation: #fff; --cat-communication: #bdbdbd; --cat-creation: #8c8c8c; --cat-systeme: #555;
}
/* Texture du studio, à 6 % comme sur invprod.ch (sans la parallaxe). */
html[data-theme="invprod"] body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(texture.webp) center / cover no-repeat; opacity: .06;
}
html[data-theme="invprod"] .shell { position: relative; z-index: 1; }
html[data-theme="invprod"] .top { background: rgba(0, 0, 0, .92); }
html[data-theme="invprod"] .page-title { font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
html[data-theme="invprod"] .card h2 { color: var(--blanc); font-weight: 700; letter-spacing: .08em; }
html[data-theme="invprod"] .app-tile:hover, html[data-theme="invprod"] .app-tile:hover .ico { border-color: var(--blanc); }
/* Boutons pleins blancs qui se creusent au survol, comme le CRM. */
html[data-theme="invprod"] .btn { font-weight: 700; letter-spacing: .14em; transition: .25s; }
html[data-theme="invprod"] .btn-primary:hover { background: transparent; color: var(--blanc); border-color: var(--blanc); }
html[data-theme="invprod"] .btn:hover { border-color: var(--blanc); }
html[data-theme="invprod"] .tick svg { color: var(--ok); }
html[data-theme="invprod"] .mitem.on { background: var(--gris-fonce); }

/* ==========================================================================
   1. LABO — chambre noire. Noir chaud, lumière inactinique rouge-orangé,
   libellés en chasse fixe comme un time-code, tuiles en cadre de visée.
   ========================================================================== */
html[data-theme="labo"] {
  --noir: #0c0a09; --panel: #15110f; --gris-fonce: #221b18; --gris-moyen: #8f8279;
  --gris-clair: #e9e0d5; --blanc: #fff7ee; --bord: #2f2622; --ligne: #241d1a; --hors: #0f0c0b;
  --accent: #ff5a1f; --accent-soft: #3a170c; --accent-encre: #160602; --accent-survol: #ff7d4d;
  --ok: #a3d36a; --warn: #f0b43c; --err: #ff4f8b; --voile: rgba(8, 5, 4, .82);
  --f-texte: 'Space Grotesk', system-ui, sans-serif;
  --f-titre: 'Space Grotesk', system-ui, sans-serif;
  --f-libelle: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --chasse: .5;
  --cat-organisation: #ff5a1f; --cat-communication: #5fb8b0; --cat-creation: #e8c547; --cat-systeme: #8f8279;
}
html[data-theme="labo"] .row { border-bottom-style: dashed; }
html[data-theme="labo"] .card h2 { color: var(--gris-clair); }
html[data-theme="labo"] .card h2::before,
html[data-theme="labo"] .launcher-cat::after { color: var(--accent); }
html[data-theme="labo"] .card h2::before { content: '● '; font-size: .6em; margin-right: 4px; flex: none; order: -1; }
html[data-theme="labo"] .card h2 { justify-content: flex-start; gap: 6px; }
html[data-theme="labo"] .card h2 a { margin-left: auto; }
html[data-theme="labo"] .launcher-cat::after { content: ''; flex: 1; height: 1px; background: var(--bord); }
html[data-theme="labo"] .wordmark { letter-spacing: .02em; font-weight: 700; }
html[data-theme="labo"] .page-title { font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; }
/* Tuiles : coins de cadrage au lieu d'un cadre plein. */
html[data-theme="labo"] .app-tile {
  --coin: var(--gris-moyen);
  border-color: transparent;
  background:
    linear-gradient(var(--coin), var(--coin)) top left / 14px 1px no-repeat,
    linear-gradient(var(--coin), var(--coin)) top left / 1px 14px no-repeat,
    linear-gradient(var(--coin), var(--coin)) top right / 14px 1px no-repeat,
    linear-gradient(var(--coin), var(--coin)) top right / 1px 14px no-repeat,
    linear-gradient(var(--coin), var(--coin)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--coin), var(--coin)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--coin), var(--coin)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--coin), var(--coin)) bottom right / 1px 14px no-repeat,
    var(--panel);
}
html[data-theme="labo"] .app-tile:hover { --coin: var(--accent); border-color: transparent; }
html[data-theme="labo"] .app-tile .ico { border-style: dashed; border-radius: 50%; }
html[data-theme="labo"] .app-tile .app-label { font-weight: 600; letter-spacing: .02em; }
html[data-theme="labo"] .tab.active { color: var(--accent); }
html[data-theme="labo"] .pf-media img { filter: grayscale(1) sepia(.25) contrast(1.05); }

/* ==========================================================================
   2. PAPIER — clair, éditorial. Fond papier, encre noire, titres en
   sérif, filets fins, accent vermillon. Le seul thème clair.
   ========================================================================== */
html[data-theme="papier"] {
  color-scheme: light;
  --noir: #f1ece2; --panel: #f8f5ee; --gris-fonce: #e6dfd1; --gris-moyen: #7a7264;
  --gris-clair: #2a2722; --blanc: #12110f; --bord: #cdc4b3; --ligne: #e0d9cb; --hors: #ebe5d8;
  --accent: #c8401f; --accent-soft: #f4dccf; --accent-encre: #fff8f2; --accent-survol: #a63417;
  --ok: #2f7d4f; --warn: #9a6a08; --err: #b4232c; --voile: rgba(40, 32, 22, .45);
  --f-texte: 'Inter', system-ui, sans-serif;
  --f-titre: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-libelle: 'Inter', system-ui, sans-serif;
  --chasse: 1.1;
  --cat-organisation: #c8401f; --cat-communication: #2f6f8f; --cat-creation: #7a4f9a; --cat-systeme: #7a7264;
}
html[data-theme="papier"] h1, html[data-theme="papier"] h2, html[data-theme="papier"] h3,
html[data-theme="papier"] .page-title, html[data-theme="papier"] .app-tile .app-label,
html[data-theme="papier"] .note-card .n-title, html[data-theme="papier"] .cand-card .c-firme,
html[data-theme="papier"] .pf-title, html[data-theme="papier"] .sheet-title,
html[data-theme="papier"] .res-card .r-title, html[data-theme="papier"] .stat-tuile .v { font-weight: 400; }
html[data-theme="papier"] .note-card .n-title, html[data-theme="papier"] .cand-card .c-firme,
html[data-theme="papier"] .res-card .r-title { font-size: 1.25rem; line-height: 1.15; }
html[data-theme="papier"] .pf-title { font-size: 1.1rem; line-height: 1.15; }
html[data-theme="papier"] .stat-tuile .v { font-size: 1.9rem; }
html[data-theme="papier"] .page-title { font-size: 2.6rem; line-height: 1.05; letter-spacing: -.01em; }
html[data-theme="papier"] .wordmark { font-family: var(--f-titre); font-size: 1.35rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
html[data-theme="papier"] .wordmark .dot { color: var(--accent); }
html[data-theme="papier"] .top { background: var(--noir); border-bottom-color: var(--blanc); }
html[data-theme="papier"] .subbar { border-top-color: var(--bord); }
/* Titres de section en italique, casse de phrase. */
html[data-theme="papier"] .card h2, html[data-theme="papier"] .launcher-cat {
  font-family: var(--f-titre); font-style: italic; font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 1.35rem; color: var(--blanc);
}
html[data-theme="papier"] .card h2 a { font-family: var(--f-libelle); font-style: normal; font-size: .72rem; }
html[data-theme="papier"] .launcher-cat { border-bottom: 1px solid var(--blanc); padding-bottom: 6px; }
html[data-theme="papier"] .card { background: transparent; border-color: var(--bord); border-top: 2px solid var(--blanc); }
html[data-theme="papier"] .app-tile { background: var(--panel); }
html[data-theme="papier"] .app-tile .app-label { font-size: 1.3rem; text-transform: none; letter-spacing: 0; }
html[data-theme="papier"] .app-tile .ico { border: 0; }
html[data-theme="papier"] .app-tile .ico svg { width: 30px; height: 30px; stroke-width: 1.2; }
html[data-theme="papier"] .app-tile:hover { border-color: var(--blanc); }
html[data-theme="papier"] .app-tile:hover .ico { color: var(--accent); }
html[data-theme="papier"] .note-card, html[data-theme="papier"] .pf-card,
html[data-theme="papier"] .cand-card, html[data-theme="papier"] .res-card { background: var(--panel); }
html[data-theme="papier"] .pf-media img { filter: grayscale(1) contrast(1.1); opacity: 1; }
html[data-theme="papier"] .btn-primary:hover { color: var(--accent-encre); }
html[data-theme="papier"] input, html[data-theme="papier"] select, html[data-theme="papier"] textarea { background: #fffdf8; }
html[data-theme="papier"] .tick svg { color: var(--ok); }

/* ==========================================================================
   3. SIGNAL — brutaliste. Noir pur, cadres épais, jaune-vert électrique,
   titres très larges, ombres pleines décalées au survol.
   ========================================================================== */
html[data-theme="signal"] {
  --noir: #000; --panel: #0b0b0b; --gris-fonce: #1d1d1d; --gris-moyen: #9b9b9b;
  --gris-clair: #f2f2f2; --blanc: #fff; --bord: #e9e9e9; --ligne: #2a2a2a; --hors: #050505;
  --accent: #d4ff00; --accent-soft: #283000; --accent-encre: #000; --accent-survol: #e6ff66;
  --ok: #3ddc97; --warn: #ffb000; --err: #ff3b3b; --voile: rgba(0, 0, 0, .86);
  --f-texte: 'Inter', system-ui, sans-serif;
  --f-titre: 'Unbounded', 'Arial Black', sans-serif;
  --f-libelle: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --chasse: .4;
  --trait: 2px;
  --ombre: 6px 6px 0 var(--accent);
  --cat-organisation: #d4ff00; --cat-communication: #00d1ff; --cat-creation: #ff4fd8; --cat-systeme: #9b9b9b;
}
html[data-theme="signal"] .page-title { font-size: 2.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }
html[data-theme="signal"] .wordmark { font-weight: 900; letter-spacing: 0; }
html[data-theme="signal"] .top { border-bottom: 2px solid var(--bord); }
html[data-theme="signal"] .tab.active { background: var(--accent); color: var(--accent-encre); border-bottom-color: var(--accent); }
html[data-theme="signal"] .card h2 { color: var(--blanc); font-weight: 600; }
html[data-theme="signal"] .launcher-cat { color: var(--blanc); font-size: .8rem; }
html[data-theme="signal"] .launcher-cat .cat-dot { border-radius: 0; width: 14px; height: 14px; }
html[data-theme="signal"] .app-tile .tile-dot { border-radius: 0; width: 10px; height: 10px; opacity: 1; }
html[data-theme="signal"] .app-tile .app-label { font-weight: 700; font-size: .74rem; }
html[data-theme="signal"] .app-tile:hover, html[data-theme="signal"] .cand-card:hover,
html[data-theme="signal"] .note-card[data-modal]:hover, html[data-theme="signal"] a.note-card:hover,
html[data-theme="signal"] .res-card.clickable:hover, html[data-theme="signal"] .pf-card:hover {
  border-color: var(--blanc); transform: translate(-3px, -3px);
}
html[data-theme="signal"] .app-tile:hover .ico { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
html[data-theme="signal"] .btn:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="signal"] .btn-primary:hover { color: var(--accent-encre); }
html[data-theme="signal"] .stat-tuile .v { font-weight: 800; }
html[data-theme="signal"] .pf-media img { filter: grayscale(1) contrast(1.35); opacity: 1; }
@media (hover: none), (pointer: coarse) {
  html[data-theme="signal"] .app-tile:hover { transform: none; }
}

/* ==========================================================================
   4. NUIT — doux et arrondi. Bleu nuit, pervenche, une seule famille
   (Manrope), pas de majuscules forcées, surfaces pleines plutôt que cadres.
   ========================================================================== */
html[data-theme="nuit"] {
  --noir: #0d1120; --panel: #151a2d; --gris-fonce: #1f2539; --gris-moyen: #8189a6;
  --gris-clair: #d9def0; --blanc: #f4f6ff; --bord: #252c45; --ligne: #1e2439; --hors: #10142a;
  --accent: #8b9dff; --accent-soft: #252e57; --accent-encre: #0d1120; --accent-survol: #a9b6ff;
  --ok: #5fd3a4; --warn: #f5c36b; --err: #ff7a8a; --voile: rgba(5, 8, 20, .7);
  --f-texte: 'Manrope', system-ui, sans-serif;
  --f-titre: 'Manrope', system-ui, sans-serif;
  --f-libelle: 'Manrope', system-ui, sans-serif;
  --casse: none;
  --chasse: 0;
  --rayon: 16px;
  --rayon-sm: 10px;
  --ombre: 0 14px 34px rgba(0, 0, 0, .38);
  --cat-organisation: #8b9dff; --cat-communication: #5fd3a4; --cat-creation: #f59fd0; --cat-systeme: #8189a6;
}
html[data-theme="nuit"] body { font-size: 14.5px; }
html[data-theme="nuit"] .top { background: rgba(13, 17, 32, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: transparent; }
html[data-theme="nuit"] .subbar { border-top-color: transparent; gap: 6px; padding-bottom: 8px; }
html[data-theme="nuit"] .tab { border-bottom: 0; border-radius: 999px; padding: 7px 14px; }
html[data-theme="nuit"] .tab.active { background: var(--accent-soft); color: var(--blanc); }
html[data-theme="nuit"] .wordmark { font-weight: 800; letter-spacing: -.01em; font-size: .95rem; }
html[data-theme="nuit"] .appname { font-weight: 600; font-size: .9rem; }
html[data-theme="nuit"] .utility a { font-size: .82rem; }
html[data-theme="nuit"] .page-title { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
html[data-theme="nuit"] .card { border-color: transparent; }
html[data-theme="nuit"] .card h2 { font-size: .95rem; font-weight: 700; color: var(--blanc); }
html[data-theme="nuit"] .launcher-cat { font-size: .95rem; color: var(--blanc); }
html[data-theme="nuit"] .label, html[data-theme="nuit"] label { font-size: .8rem; font-weight: 600; }
html[data-theme="nuit"] .app-tile { border-color: transparent; }
html[data-theme="nuit"] .app-tile:hover { border-color: transparent; transform: translateY(-2px); background: var(--gris-fonce); }
html[data-theme="nuit"] .app-tile .ico { width: 52px; height: 52px; border: 0; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
html[data-theme="nuit"] .app-tile:hover .ico { background: var(--accent); color: var(--accent-encre); }
html[data-theme="nuit"] .app-tile .app-label { font-size: .95rem; font-weight: 700; }
html[data-theme="nuit"] .app-tile .app-desc { font-size: .76rem; }
html[data-theme="nuit"] .note-card, html[data-theme="nuit"] .cand-card,
html[data-theme="nuit"] .res-card, html[data-theme="nuit"] .stat-tuile { border-color: transparent; }
html[data-theme="nuit"] .pf-card { background: var(--panel); border-color: transparent; }
html[data-theme="nuit"] .card .note-card, html[data-theme="nuit"] .card .pf-card,
html[data-theme="nuit"] .card .stat-tuile { background: var(--gris-fonce); }
html[data-theme="nuit"] .pf-media { border: 0; }
html[data-theme="nuit"] .badge, html[data-theme="nuit"] .res-badge, html[data-theme="nuit"] .chip { border-radius: 999px; font-weight: 600; }
html[data-theme="nuit"] .btn { font-weight: 700; }
html[data-theme="nuit"] .btn-primary:hover { color: var(--accent-encre); }
html[data-theme="nuit"] input, html[data-theme="nuit"] select, html[data-theme="nuit"] textarea { background: var(--gris-fonce); border-color: transparent; }
html[data-theme="nuit"] input:focus, html[data-theme="nuit"] select:focus, html[data-theme="nuit"] textarea:focus { border-color: var(--accent); }
html[data-theme="nuit"] .cal-ev { border-left: 0; }
html[data-theme="nuit"] .mnav { border-left: 0; border-radius: 10px; }
html[data-theme="nuit"] .mitem.on { border-left: 0; padding-left: 13px; }
html[data-theme="nuit"] .row { border-bottom-color: var(--ligne); }
html[data-theme="nuit"] .pf-media img { filter: saturate(.6); opacity: .9; }
html[data-theme="nuit"] .modal-panel { border-color: transparent; }

/* ---------- Sélecteur de thème (Réglages) ---------- */
.theme-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 4px; }
.theme-opt { display: block; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; }
.theme-opt input { position: absolute; opacity: 0; pointer-events: none; }
.theme-opt .apercu { display: block; border: 2px solid var(--bord); border-radius: var(--rayon); overflow: hidden; }
.theme-opt input:checked + .apercu { border-color: var(--accent); }
.theme-opt input:focus-visible + .apercu { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-opt .ap-haut { display: flex; align-items: center; gap: 6px; height: 64px; padding: 10px 12px; }
.theme-opt .ap-haut i { display: block; width: 18px; height: 18px; }
.theme-opt .ap-nom { display: block; padding: 8px 12px 2px; color: var(--blanc); font-size: .95rem; font-weight: 700; }
.theme-opt .ap-desc { display: block; padding: 0 12px 10px; color: var(--gris-moyen); font-size: .76rem; line-height: 1.4; }