en tout début de : voile plein
écran aux couleurs Ibudo (points + wordmark), retiré par orbital.js dès
que la page est chargée (600 ms min, failsafe 4 s, reduced-motion : retrait
immédiat). Variante sombre : .splash.ink. La variante .static sert aux
démos du catalogue (remplit son conteneur au lieu de l'écran). */
.splash{position:fixed;inset:0;z-index:calc(var(--z-modal) + 50);display:grid;place-items:center;
background:var(--bg);transition:opacity .45s var(--ease),visibility .45s}
.splash.ink{background:var(--ibu-ink-700)}
.splash .inner{display:grid;justify-items:center;gap:var(--s-6)}
.splash img{height:26px}
.splash.ink img{filter:brightness(0) invert(1)}
.splash.done{opacity:0;visibility:hidden;pointer-events:none}
.splash.static{position:absolute;z-index:1}
/* ==========================================================================
CARTE DE LISTING
.vcard est faite pour des libellés courts : son titre est en --t-h3, soit
jusqu'à 32 px face à un corps de 15 px, et son lien « go » n'apparaît qu'au
survol en laissant un vide réservé. Sur une liste de projets aux titres longs,
le résultat est un titre démesuré posé au-dessus d'un trou. D'où cette carte,
pensée pour du contenu : titre à l'échelle du texte, hauteurs égales, et un
pied de carte qui porte la méta au lieu d'un blanc.
========================================================================== */
.listing-card{display:flex;flex-direction:column;gap:var(--s-2);height:100%;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
padding:var(--s-5);text-decoration:none;color:inherit;
transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),
transform var(--dur-2) var(--ease)}
.listing-card:hover{border-color:var(--accent);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.listing-card:active{transform:translateY(-2px) scale(.99)}
.listing-card .lc-org{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
font-size:var(--t-xs);font-weight:var(--fw-semi);letter-spacing:.06em;
text-transform:uppercase;color:var(--text-muted)}
.listing-card .lc-org i{color:var(--a-green-500,#01d859);font-size:1.1em}
.listing-card .lc-demo{text-transform:none;letter-spacing:0;font-weight:var(--fw-med);
background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);
padding:1px 8px;color:var(--text-muted)}
/* Titre à l'échelle du contenu : lisible, hiérarchisé, jamais monumental. */
.listing-card .lc-title{overflow-wrap:anywhere;font-family:var(--font-display);font-weight:var(--fw-semi);
font-size:var(--t-h4);line-height:1.25;margin:0;text-wrap:balance}
.listing-card .lc-text{overflow-wrap:anywhere;color:var(--text-muted);font-size:var(--t-sm);margin:0}
/* Pied : la méta remplit l'espace au lieu de le laisser vide, et pousse les
cartes d'une même rangée à la même hauteur. */
.listing-card .lc-foot{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;
gap:6px;flex-wrap:wrap;border-top:1px solid var(--border)}
/* Pastille ODD. Autonome : elle sert dans une carte de listing, dans un
rapport, sur un tableau de bord et sur la page d'un objectif. Definie sous
un parent, elle n'avait aucun style dans trois de ces quatre endroits.
La largeur est un minimum, pas une taille fixe : « 17 » ne doit pas avoir
moins de place que « 4 », et un cercle ecrase se voit tout de suite. */
.sdg-badge{display:inline-grid;place-items:center;box-sizing:border-box;
min-width:28px;height:28px;padding-inline:7px;border-radius:var(--r-pill);
color:#fff;font-family:var(--font-display);font-size:13px;font-weight:var(--fw-semi);
line-height:1;font-variant-numeric:tabular-nums;text-decoration:none;flex:0 0 auto;
transition:transform var(--dur-2),box-shadow var(--dur-2)}
a.sdg-badge:hover{transform:scale(1.06);box-shadow:var(--shadow-1)}
a.sdg-badge:active{transform:scale(.96)}
.sdg-badge:focus-visible{outline:2px solid var(--text);outline-offset:2px}
/* Variante compacte pour le pied d'une carte de listing, ou elle accompagne
un texte de 12 px et ne doit pas lui voler la vedette. */
.sdg-badge.sm{min-width:22px;height:22px;padding-inline:5px;font-size:11px}
.listing-card .lc-meta{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
color:var(--text-muted);font-size:var(--t-xs)}
/* ==========================================================================
PAGE DE DÉTAIL (projet, organisation, ressource)
Contenu principal plus colonne d'action collante. Sans cette colonne, une
fiche au contenu court se lit comme une suite de blocs pleine largeur séparés
de grands vides, et l'action utile finit reléguée tout en bas.
========================================================================== */
.detail-split{display:grid;gap:var(--s-8);grid-template-columns:minmax(0,1fr)}
@media (min-width:920px){
.detail-split{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:var(--s-10)}
.detail-aside{position:sticky;top:var(--s-8);align-self:start}
}
/* Bandeau d'en-tête d'une page de détail : plus dense qu'un hero de landing.
Le titre y reste en h1 et non en .display, qui est réservé aux accueils.
IMPORTANT : ce bloc PEINT son fond. Poser data-theme="ink" sur une section
redéfinit ses tokens mais ne dessine rien : sans background, on obtient un
texte clair sur du blanc, c'est-à-dire un grand vide. Constaté en production
le 2026-08-02. Le fond et la couleur de texte viennent donc des tokens, ce qui
marche aussi bien en clair qu'en Ink. */
.detail-head{padding-block:clamp(36px,4vw,64px);background:var(--bg);color:var(--text)}
/* RYTHME VERTICAL.
L'espacement entre les éléments d'un en-tête doit suivre la taille du titre,
pas une valeur fixe. Avec 16 px au-dessus d'un titre de 70 px et 12 px en
dessous, tout se colle et le bloc paraît compressé, quelle que soit la
hauteur du bandeau. Les écarts sont donc proportionnels : em pour ce qui
touche au titre, échelle d'espacement pour le reste. */
.detail-head .overline{color:var(--text-faint);margin-bottom:var(--s-5)}
.detail-head h1{color:var(--text);font-size:clamp(1.9rem, 1.4rem + 2vw, 3rem);
margin:0 0 var(--s-5)}
.detail-head .lead{max-width:52ch;color:var(--text-muted);margin:0}
.detail-head .chip-row{margin-top:var(--s-8)}
.detail-head .head-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-10)}
.detail-head a{color:inherit}
/* Accueil : même alignement à gauche que les autres en-têtes, mais une échelle
de titre plus grande et un rythme proportionnellement plus large, parce que
c'est la seule affirmation de la page.
⚠️ L'échelle d'espacement du DS n'a PAS de --s-7, --s-9 ni --s-11. Un var()
sur un token inexistant rend la déclaration invalide et la marge tombe à zéro
sans le moindre avertissement : c'est ce qui collait tout le bloc. */
.detail-head.is-home{padding-block:clamp(64px,6.5vw,112px)}
.detail-head.is-home .overline{margin-bottom:var(--s-6)}
.detail-head.is-home h1{font-size:var(--t-h1);max-width:17ch;margin:0 0 var(--s-6)}
.detail-head.is-home .lead{max-width:54ch;font-size:var(--t-lead)}
.detail-head.is-home .head-actions{margin-top:var(--s-12)}
/* Rôle ouvert : une ligne, pas une carte. Une carte pour trois mots crée
un bloc vide qui donne l'impression que la page manque de contenu. */
/* Le chiffre reste insecable (« 20 h par semaine · 10 places » ne doit pas se
casser n'importe ou), mais la RANGEE, elle, se replie. Sans ce flex-wrap, un
intitule long dans une colonne etroite poussait le chiffre hors de la carte.
justify-content plutot que margin-left:auto : une fois repliee, la seconde
ligne revient au debut au lieu de rester collee a droite, toute seule. */
.role-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:2px var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--border)}
.role-row:last-child{border-bottom:0}
.role-row .rr-name{font-weight:var(--fw-semi);min-width:0}
.role-row .rr-meta{color:var(--text-muted);font-size:var(--t-sm);
font-variant-numeric:tabular-nums;white-space:nowrap}
/* Case à cocher dont le libellé est une PHRASE, éventuellement avec des liens.
.check est un inline-flex avec gap : sans conteneur, chaque fragment de texte
et chaque
devient un élément flex distinct, la phrase se casse en colonnes
et la ponctuation finale se détache. Le libellé doit donc tenir dans un seul
, et l'alignement passe en haut dès qu'il occupe plusieurs lignes. */
.check > span{display:block;min-width:0}
.check.check-start{align-items:flex-start;line-height:var(--lh-normal,1.55)}
.check.check-start input{flex:0 0 auto;margin-top:.15em}
/* ==========================================================================
CERTIFICAT & VÉRIFICATION
Famille ajoutée pour ENGAGE (certification de l'engagement). Trois niveaux de
confiance à distinguer d'un coup d'œil : vérifié, attesté, auto-déclaré. La
distinction est portée par la FORME (icône, contour) autant que par la
couleur, pour rester lisible en daltonisme et en impression noir et blanc.
========================================================================== */
/* Sceau de confiance. */
.trust-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
font-size:var(--t-xs);font-weight:var(--fw-semi);line-height:1;border:1px solid transparent;white-space:nowrap}
.trust-badge i{font-size:1.05em}
.trust-badge.verified{background:var(--a-green-50,#e9fbf1);color:var(--a-green-700,#017a33);
border-color:var(--a-green-500,#01d859)}
.trust-badge.attested{background:var(--ibu-blue-50,#eef3fe);color:var(--ibu-blue-700,#1450b4);
border-color:var(--ibu-blue-200,#b9cdf7)}
.trust-badge.declared{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.trust-badge.revoked{background:var(--a-red-50,#fdecec);color:var(--a-red-700,#b3261e);
border-color:var(--a-red-500,#f04438)}
/* Carte de certificat : bandeau d'accent en tête, contenu en paires. */
.cert-card{position:relative;background:var(--surface);border:1px solid var(--border);
border-radius:var(--r-lg);padding:var(--s-6);overflow:hidden;
box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06)}
.cert-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent)}
.cert-card.is-revoked::before{background:var(--a-red-500,#f04438)}
.cert-card.is-revoked{opacity:.92}
.cert-card .cert-head{display:flex;align-items:flex-start;gap:var(--s-4);flex-wrap:wrap;
margin-bottom:var(--s-5)}
.cert-card .cert-head h2,.cert-card .cert-head h3{margin:0;font-family:var(--font-display);
font-weight:var(--fw-semi);text-wrap:balance}
.cert-card .cert-id{font-family:var(--font-mono);font-size:var(--t-sm);letter-spacing:.06em;
color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Paires clé/valeur du certificat. */
.cert-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s-4) var(--s-5);
margin:var(--s-5) 0}
.cert-meta > div{min-width:0}
.cert-meta dt,.cert-meta .k{color:var(--text-muted);font-size:var(--t-xs);text-transform:uppercase;
letter-spacing:.06em;margin-bottom:3px}
.cert-meta dd,.cert-meta .v{margin:0;font-weight:var(--fw-med);overflow-wrap:anywhere}
/* Empreinte : monospace, coupable proprement, sélectionnable d'un clic. */
.hash-mono{font-family:var(--font-mono);font-size:var(--t-xs);color:var(--text-muted);
background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
padding:8px 10px;overflow-wrap:anywhere;user-select:all;display:block}
/* Bandeau de résultat de vérification. */
.verify-banner{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-6);
border-radius:var(--r-lg);border:1px solid transparent;margin-bottom:var(--s-6)}
.verify-banner .vb-icon{flex:0 0 auto;width:44px;height:44px;border-radius:var(--r-pill);
display:grid;place-items:center;font-size:22px}
.verify-banner h1,.verify-banner h2{margin:0 0 2px;font-size:var(--t-h4);font-family:var(--font-display)}
.verify-banner p{margin:0;font-size:var(--t-sm)}
.verify-banner.ok{background:var(--a-green-50,#e9fbf1);border-color:var(--a-green-500,#01d859)}
.verify-banner.ok .vb-icon{background:var(--a-green-500,#01d859);color:#fff}
.verify-banner.ko{background:var(--a-red-50,#fdecec);border-color:var(--a-red-500,#f04438)}
.verify-banner.ko .vb-icon{background:var(--a-red-500,#f04438);color:#fff}
.verify-banner.warn{background:var(--a-yellow-50,#fffbe6);border-color:var(--a-yellow-600,#d9b400)}
.verify-banner.warn .vb-icon{background:var(--a-yellow-600,#d9b400);color:var(--ibu-ink-900,#111)}
/* QR de vérification, posé à côté du certificat. */
.cert-qr{display:grid;gap:var(--s-2);justify-items:center;text-align:center}
.cert-qr img,.cert-qr svg{width:132px;height:132px;border:1px solid var(--border);
border-radius:var(--r-md);background:#fff;padding:6px}
.cert-qr .cap{font-size:var(--t-xs);color:var(--text-muted)}
@media (max-width:640px){
.cert-card{padding:var(--s-5)}
.verify-banner{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}
/* ---- Réordonnancement (poignée, flèches, barre d'enregistrement) -------- */
/* La poignée fait 40 px de zone tactile pour une icône de 20 : en dessous, on
rate la prise sur mobile et le glisser devient un défilement. */
.reorder-handle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
border:0;border-radius:var(--r-sm);background:none;color:var(--text-faint);cursor:grab;
transition:background-color .15s cubic-bezier(.2,0,0,1),color .15s cubic-bezier(.2,0,0,1)}
.reorder-handle:hover{background:var(--surface-2);color:var(--text-muted)}
.reorder-handle:active{cursor:grabbing;scale:.96}
.reorder-handle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.reorder-row{transition:box-shadow .15s cubic-bezier(.2,0,0,1),opacity .15s cubic-bezier(.2,0,0,1)}
.reorder-row.is-dragging{opacity:.6;box-shadow:0 1px 2px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.16)}
.reorder-arrows{display:none;flex-direction:column;gap:2px;flex:none}
.reorder-arrows .btn{min-height:36px;padding-inline:var(--s-2)}
@media (hover:none){.reorder-handle{display:none}.reorder-arrows{display:flex}}
.order-bar{position:sticky;bottom:var(--s-4);z-index:5;display:flex;gap:var(--s-4);align-items:center;
justify-content:space-between;max-width:44rem;margin-top:var(--s-5);padding:var(--s-3) var(--s-4);
border-radius:var(--r-md);background:var(--surface);font-size:var(--t-sm);
box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.12)}
/* ---- Objectifs de developpement durable, en fiche projet ----------------
Grille a deux colonnes et non un flex en ligne : la pastille tient sa propre
colonne, et TOUT le texte, intitule comme cibles, s'aligne sur la seconde.
Avec l'ancien flex, l'intitule s'alignait sur la pastille mais les cibles
retombaient sur une indentation en pixels qui ne coincidait avec rien :
trois alignements differents dans un meme bloc. */
.sdg-list{display:grid;gap:var(--s-6)}
.sdg-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:start}
.sdg-item .pill{text-decoration:none}
.sdg-body{min-width:0}
.sdg-goal{margin:0;font-weight:var(--fw-semi);text-wrap:pretty}
.sdg-target{margin:var(--s-3) 0 0;font-size:var(--t-sm);color:var(--text-muted);text-wrap:pretty}
.sdg-target strong{color:var(--text);font-variant-numeric:tabular-nums;margin-right:.35em}
/* ---- Rapport par ODD ---------------------------------------------------
Le libelle est le nom COURT de l'objectif, pas son intitule officiel : la
version longue fait trois lignes et noie le chiffre, qui est ce qu'on vient
lire. L'intitule complet reste en infobulle et sur la page /odd/. */
.sdg-report-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
gap:var(--s-4);align-items:start;padding-block:var(--s-4)}
.sdg-report-row + .sdg-report-row{border-top:1px solid var(--border)}
.srr-label{margin:0 0 var(--s-3);font-weight:var(--fw-semi);text-wrap:pretty}
.srr-bar{display:block;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.srr-bar > span{display:block;height:100%;border-radius:3px}
.srr-figures{text-align:right;min-width:8rem}
.srr-hours{display:block;font-weight:var(--fw-semi);font-variant-numeric:tabular-nums}
.srr-sub{display:block;font-size:var(--t-xs);color:var(--text-muted)}
@media (max-width:560px){
.sdg-report-row{grid-template-columns:auto minmax(0,1fr)}
.srr-figures{grid-column:2;text-align:left;min-width:0}
}
/* ---- Guide de demarrage ------------------------------------------------
Une seule etape porte un bouton : celle a faire maintenant. Un guide qui
propose quatre actions equivalentes ne guide rien, il remet la decision a
celui qui vient justement d'arriver. */
.steps-guide{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1,4px);counter-reset:sg}
.steps-guide li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-4);
align-items:center;padding:var(--s-4);border-radius:var(--r-md);
transition:background-color var(--dur-2)}
.steps-guide li.is-current{background:var(--accent-soft)}
.steps-guide .sg-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
background:var(--surface-2);color:var(--text-faint);flex:0 0 auto}
.steps-guide li.is-current .sg-mark{background:var(--accent);color:var(--on-accent)}
.steps-guide li.is-done .sg-mark{background:var(--a-green-500,#01D859);color:#0b3d1d}
.steps-guide .sg-body{min-width:0;display:grid;gap:2px}
.steps-guide .sg-body strong{font-family:var(--font-display);font-size:var(--t-body)}
.steps-guide .sg-body span{font-size:var(--t-sm);color:var(--text-muted);text-wrap:pretty}
.steps-guide li.is-done .sg-body strong{color:var(--text-muted);text-decoration:line-through;
text-decoration-thickness:1px;text-decoration-color:var(--border-strong)}
.steps-guide .sg-later{font-size:var(--t-xs);color:var(--text-faint);white-space:nowrap}
@media (max-width:560px){
.steps-guide li{grid-template-columns:auto minmax(0,1fr)}
.steps-guide li > .btn,.steps-guide .sg-later{grid-column:2}
}
/* ═══ Initiales colorées ══════════════════════════════════════════════════
Sans photo, .avatar retombe sur un disque gris. Répété quinze fois sur une
grille de projets, ça donne une page morte et des personnes indistinctes.
La couleur se pose par data-accent, donc elle vient des tokens et reste dans
la palette. Elle doit être DÉTERMINISTE côté serveur (dérivée du nom) : la
même personne garde sa couleur d'un écran à l'autre, c'est ce qui la rend
reconnaissable du coin de l'oeil. */
/* Initiales assombries vers l'encre : l'accent fort seul sur son fond pâle
tombait sous le contraste AA (axe-core, 2026-09-15 : jaune 1,8:1, rouge
3,6:1, violet 4,2:1). Mêlé à 55 % d'encre, chaque accent dépasse 6:1 et
garde sa teinte. */
.avatar[data-accent]{background:var(--accent-soft);color:color-mix(in srgb,var(--accent-strong) 45%,var(--ibu-ink-900));
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)}
[data-theme="ink"] .avatar[data-accent]{background:color-mix(in srgb,var(--accent) 30%,transparent);
color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
/* ═══ Orbite d'événements ═════════════════════════════════════════════════
Carrousel 3D en boucle pour une page d'index d'événements. Chaque entrée est
un « viseur » : un disque qui cadre le visuel de l'événement. Celui du centre
est net et de face, les autres reculent, pivotent et se floutent. La mise au
point fait le travail que ferait autrement un titre énorme : elle dit où
regarder, sans crier.
Le placement est calculé en JS (data-orbit dans orbital.js) parce qu'il dépend
du nombre d'entrées ; le CSS ne porte que l'apparence et les transitions, pour
qu'un défaut de JS laisse une liste de liens utilisable. */
.event-orbit{position:relative;perspective:1200px;perspective-origin:50% 45%;
min-height:clamp(280px,32vw,380px);display:grid;place-items:center}
.orbit-track{position:relative;width:100%;height:100%;transform-style:preserve-3d;
display:grid;place-items:center}
.orbit-item{position:absolute;display:grid;justify-items:center;gap:var(--s-4);
text-decoration:none;color:inherit;will-change:transform,filter,opacity;
transition:transform var(--dur-6,.6s) var(--ease),filter var(--dur-6,.6s) var(--ease),
opacity var(--dur-6,.6s) var(--ease)}
.orbit-lens{position:relative;width:clamp(160px,21vw,260px);aspect-ratio:1;border-radius:50%;
overflow:hidden;background:var(--surface-2);display:grid;place-items:center;
box-shadow:0 24px 60px -20px rgba(0,0,0,.55),0 0 0 10px rgba(255,255,255,.06),
inset 0 0 0 1px rgba(0,0,0,.08)}
.orbit-lens img{width:100%;height:100%;object-fit:cover;display:block}
/* Le cercle du viseur, posé par-dessus l'image : c'est lui qui donne l'idée
d'optique plutôt que de simple vignette ronde. */
.orbit-lens::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--accent) 65%,transparent),
inset 0 0 0 12px rgba(255,255,255,.14)}
.orbit-item .orbit-name{font-family:var(--font-display);font-weight:var(--fw-semi);
font-size:var(--t-body);text-align:center;max-width:22ch;text-wrap:balance}
/* text-wrap:balance repartit les deux lignes au lieu d'en laisser une orpheline ;
tabular-nums fige la largeur des chiffres, sans quoi la ligne se decale a
chaque rotation du carrousel (le nombre de projets et les dates changent). */
.orbit-item .orbit-meta{font-size:var(--t-xs);color:var(--text-muted);
text-wrap:balance;font-variant-numeric:tabular-nums}
/* La plage de dates ne se coupe jamais en son milieu : la ligne casse avant le
separateur, pas entre « au » et la date de fin. */
.orbit-meta .orbit-dates{white-space:nowrap}
/* Les entrées hors foyer : reculées, floutées, effacées. Elles restent
cliquables, elles ne sont pas décoratives. */
.orbit-item[data-focus="0"]{z-index:3}
.orbit-item:not([data-focus="0"]){filter:blur(5px) saturate(.5);opacity:.42;z-index:1}
/* Au-delà des voisines immédiates, rien : trois cercles flous superposés
derrière le viseur ne se lisent plus comme une file, mais comme une tache. */
.orbit-item[data-far="1"]{opacity:0;pointer-events:none}
.orbit-item:not([data-focus="0"]) .orbit-name,
.orbit-item:not([data-focus="0"]) .orbit-meta{opacity:0}
.orbit-item:focus-visible{outline:none}
.orbit-item:focus-visible .orbit-lens{outline:3px solid var(--accent);outline-offset:6px}
.orbit-nav{display:flex;gap:var(--s-3);justify-content:center;align-items:center;margin-top:var(--s-6)}
.orbit-dots{display:inline-flex;gap:8px;align-items:center}
.orbit-dots button{width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
background:var(--border);transition:background var(--dur-3,.3s) var(--ease),transform var(--dur-3,.3s) var(--ease)}
.orbit-dots button[aria-current="true"]{background:var(--accent);transform:scale(1.35)}
/* Cible tactile : la pastille fait 9px, son atteinte doit faire 40px. */
.orbit-dots button{position:relative}
.orbit-dots button::before{content:"";position:absolute;inset:-16px}
@media (max-width:640px){
.event-orbit{min-height:340px}
.orbit-item:not([data-focus="0"]){opacity:.35}
}
@media (prefers-reduced-motion:reduce){
.orbit-item{transition:none}
.orbit-item:not([data-focus="0"]){filter:none;opacity:.7}
}
/* ═══ Scène d'accueil plein écran ═════════════════════════════════════════
Une page d'index qui tient sur le premier écran : photo de fond, contenu
centré, pied de page collé en bas SANS position:fixed (qui mangerait le
contenu au moindre débordement). 100svh et non 100vh : sur mobile, vh compte
la barre d'adresse repliée, et le pied de page se retrouve sous le pli. */
body.stage-page{min-height:100svh;display:flex;flex-direction:column}
/* Le pied de page du parc s'ouvre sur 80px de vide, ce qui convient à une page
longue. Sur une page tenue en un écran, ces 80px sont une bande morte prise
sur la scène. On les rend au contenu. */
body.stage-page .footer{padding-block:var(--s-6) var(--s-6)}
body.stage-page > main{flex:1;display:flex;flex-direction:column;justify-content:center}
/* Le voile et la photo sont DEUX COUCHES DE LA MÊME propriété background, et
non un pseudo-élément en z-index négatif. Motif : avec isolation:isolate, un
::before en z-index:-1 dépend de l'ordre de peinture du contexte
d'empilement, et le résultat n'était pas celui attendu (photo invisible sous
un aplat). Deux couches de background, elles, se composent toujours dans
l'ordre déclaré : le dégradé d'abord, donc au-dessus, la photo dessous.
La photo arrive par --stage-img, posée en ligne par le gabarit. */
/* Bandeau de consentement, ancre en bas de l'ecran.
Compact sous 480 px : mesure a 375 px, la version confortable montait a
190 px de haut et recouvrait entierement les commandes du carrousel de
l'accueil, qui est concu pour tenir sur un seul ecran. */
.consent-bar{position:fixed;inset:auto var(--s-4) var(--s-4) var(--s-4);z-index:60;
max-width:640px;margin-inline:auto;padding:var(--s-5);border:1px solid var(--border);
border-radius:var(--r-lg);background:var(--surface-raised);box-shadow:var(--shadow-2)}
.consent-bar p{margin:0 0 var(--s-4);font-size:var(--t-sm);text-wrap:pretty}
@media (max-width:480px){
.consent-bar{padding:var(--s-4)}
.consent-bar p{margin-bottom:var(--s-3);font-size:var(--t-xs)}
}
.stage-photo{position:relative;flex:1;display:grid;place-items:center;
/* Place rendue au bandeau de consentement tant qu'il est affiche. Le facteur
2 n'est pas arbitraire : le contenu est centre (place-items:center), donc
une reserve posee en bas ne le remonte que de la moitie. Pour degager une
hauteur H, il faut donc en reserver 2H. Sans bandeau la variable n'existe
pas et la valeur de repli, 0px, ne change rien. */
padding-bottom:calc(var(--consent-h, 0px) * 2);
/* La transformation 3D pose les voisins de l'orbite hors champ : mesures
a 375 px, ils allaient jusqu'a x=484 et creusaient 197 px de defilement
horizontal vers du vide, puisqu'ils sont flous ou transparents. On coupe
a la scene. Rien d'autre ne deborde de cette section. */
overflow:hidden;
/* Trois couches. Un puits sombre au centre, là où vivent le titre et le
viseur : c'est lui qui sépare le contenu de la photo. Un dégradé vertical
pour ancrer le haut et le bas. La photo dessous, qui respire sur les bords.
Sans ce puits, deux couches photographiques de force égale se battaient et
le titre devenait pénible à lire. */
background-image:radial-gradient(ellipse 62% 58% at 50% 46%,
rgba(11,13,32,.95) 0%,rgba(11,13,32,.72) 55%,rgba(11,13,32,.30) 100%),
linear-gradient(180deg,rgba(11,13,32,.72) 0%,rgba(11,13,32,.42) 45%,rgba(11,13,32,.92) 100%),
var(--stage-img,none);
background-size:cover,cover,cover;background-position:center,center,center;
background-repeat:no-repeat,no-repeat,no-repeat;
/* Multiply plutôt qu'une simple superposition : le voile assombrit la photo
sans la laver, elle garde sa matière et cesse de concurrencer le contenu.
Deux couches photographiques de force égale, c'est du bruit. */
background-blend-mode:normal,multiply,normal}
.stage-photo,.stage-photo .orbit-name,.stage-photo h1,.stage-photo .lead{color:#fff}
.stage-photo .lead{color:rgba(255,255,255,.78)}
.stage-photo .orbit-meta{color:rgba(255,255,255,.66)}
.stage-photo .orbit-lens{background:rgba(255,255,255,.08)}
.stage-photo .orbit-dots button{background:rgba(255,255,255,.28)}
.stage-photo .orbit-dots button[aria-current="true"]{background:#fff}
.stage-photo .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.stage-photo .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
/* ═══ Vignette générée ════════════════════════════════════════════════════
Une carte sans image laissait un trou, et une grille où une tuile sur deux a
une image et l'autre non est exactement ce qui donne des hauteurs en dents de
scie. Ici : un aplat dégradé tiré de l'accent, l'initiale du projet en grand.
Déterministe, donc le même projet garde sa vignette d'une visite à l'autre. */
.thumb{position:relative;display:grid;place-items:center;width:100%;height:170px;
border-radius:var(--r-md);overflow:hidden;background:var(--surface-sunken)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;
outline:1px solid rgba(0,0,0,.1);outline-offset:-1px}
.thumb.generated{background:linear-gradient(135deg,
color-mix(in srgb,var(--accent) 24%,var(--surface-raised)) 0%,
color-mix(in srgb,var(--accent) 8%,var(--surface-raised)) 100%)}
.thumb.generated span{font-family:var(--font-display);font-weight:var(--fw-black);
font-size:3.2rem;line-height:1;color:color-mix(in srgb,var(--accent) 62%,transparent);
user-select:none}
/* Le motif des quatre points, en filigrane : la vignette générée reste une
surface Ibudo, pas un carré de couleur anonyme. */
.thumb.generated::after{content:"";position:absolute;right:12px;bottom:12px;width:46px;height:8px;
background:radial-gradient(circle 4px at 4px 4px,color-mix(in srgb,var(--accent) 45%,transparent) 99%,transparent 100%)
repeat-x;background-size:14px 8px;opacity:.8}
/* ═══ Grille de projets ═══════════════════════════════════════════════════
Trois par ligne, toutes de la même hauteur. C'est ce que fait l'outil de
référence, et c'est ce qui rend une liste de vingt-trois projets lisible :
le bento donnait des tuiles de 202 à 420px, l'oeil n'a plus de ligne de base.
Le titre et le résumé sont tronqués à un nombre de lignes fixe, sinon la
variation de contenu ressort quand même. */
.project-grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.project-grid > *{min-width:0}
.project-grid .listing-card{height:100%}
/* Aucune hauteur réservée : la vignette est en tête de tuile, elle s'aligne
d'elle-même d'une tuile à l'autre. Les anciens min-height (2 lignes de titre,
3 de texte) laissaient des blancs sous chaque titre court et chaque texte
court (retour client du 2026-09-19). Le seul espace libre d'une tuile plus
courte que ses voisines est désormais au-dessus du pied, en un seul endroit. */
.project-grid .lc-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.project-grid .lc-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.project-grid .listing-card > .thumb:first-child{width:calc(100% + 2 * var(--s-5));height:auto;aspect-ratio:16/9;
margin:calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-2);
border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
.project-grid .listing-card > .thumb img{outline:0}
/* Une pastille (Épinglé, Brouillon, Scellé) garde sa largeur de pastille. */
.listing-card .lc-demo{align-self:flex-start}
.listing-card .lc-pills{display:flex;flex-wrap:wrap;gap:6px}
/* Dans la grille, les pastilles se posent sur la vignette au lieu de rallonger
la tuile (et, par ricochet, toutes ses voisines de rangée). */
.project-grid .listing-card{position:relative}
.project-grid .lc-pills{position:absolute;top:var(--s-3);left:var(--s-3);right:var(--s-3);z-index:1;pointer-events:none}
.project-grid .lc-pills .lc-demo{background:rgba(255,255,255,.94);border-color:transparent;color:var(--ibu-ink-900);
box-shadow:0 4px 12px -4px rgba(10,12,42,.4)}
/* Fiche épinglée (programme, règles, FAQ) : toute la tuile prend la teinte de
l'accent de l'événement, et une punaise en médaillon précède le titre. La
couleur dit « repère de l'organisation » d'un coup d'œil, sans pastille. */
.listing-card.is-pinned{
background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 11%,var(--surface)) 0%,
color-mix(in srgb,var(--accent) 4%,var(--surface)) 100%);
border-color:color-mix(in srgb,var(--accent) 42%,var(--border))}
.listing-card.is-pinned .lc-foot{border-top-color:color-mix(in srgb,var(--accent) 24%,var(--border))}
/* La punaise, plantée dans le coin haut droit de la vignette, légèrement
inclinée comme une vraie punaise. */
.lc-pin{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
background:var(--accent);color:var(--on-accent,#fff);font-size:17px;
box-shadow:0 0 0 3px color-mix(in srgb,#fff 85%,transparent),0 8px 18px -6px rgba(10,12,42,.55)}
.lc-pin i{transform:rotate(18deg)}
.project-grid .lc-pin{position:absolute;top:var(--s-3);right:var(--s-3);z-index:2;pointer-events:none}
@media (max-width:900px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.project-grid{grid-template-columns:minmax(0,1fr)}}
/* ═══ Accueil à onglets : bandeau, onglets, outils, cartes d'événement ════
Collab, 2026-09-15. Remplace la scène photo plein écran (.stage-photo et le
carrousel .event-orbit, gardés plus haut pour d'autres usages) : le contenu
se voit dès l'arrivée, en deux onglets filtrables par année. */
/* Bandeau court, fond clair : l'anneau ouvert du logo en filigrane remplace la
photo. Aucune image à charger avant le contenu. */
.home-band{position:relative;overflow:hidden;isolation:isolate;
padding-block:clamp(36px,5.5vw,72px) clamp(28px,4vw,52px);
background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--bg)) 0%,var(--bg) 100%)}
.home-band::before{content:"";position:absolute;z-index:-1;pointer-events:none;
right:max(-140px,calc(50% - 760px));top:50%;width:min(540px,78vw);aspect-ratio:1;border-radius:50%;
border:clamp(28px,4.4vw,56px) solid color-mix(in srgb,var(--accent) 11%,transparent);
border-left-color:transparent;transform:translateY(-50%) rotate(-28deg)}
.home-band-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:var(--s-8);align-items:center}
.home-title{font-size:clamp(1.9rem,1.2rem + 2vw,2.75rem);line-height:1.05;letter-spacing:var(--tr-tight);
max-width:24ch;margin:var(--s-3) 0 var(--s-4);text-wrap:balance}
.home-band .lead{max-width:54ch;margin:0;text-wrap:pretty}
.home-stats{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-10);margin-top:var(--s-6)}
/* La pile : trois projets posés en éventail. Rayon 16, image pleine carte, un
voile en bas pour lire le titre sur n'importe quelle image. */
.home-pile{position:relative;height:clamp(250px,24vw,320px);margin-right:var(--s-4)}
.home-pile-card{position:absolute;top:50%;left:50%;width:min(300px,72%);aspect-ratio:4/3;overflow:hidden;
border-radius:var(--r-md);background:var(--surface-sunken);color:#fff;text-decoration:none;
box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 48px -24px rgba(10,12,42,.55);
transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r));
transition:transform var(--dur-3) var(--ease),box-shadow var(--dur-3) var(--ease)}
.home-pile-card:nth-child(1){--dx:-18%;--dy:-10%;--r:-7deg;z-index:1}
.home-pile-card:nth-child(2){--dx:22%;--dy:-4%;--r:5deg;z-index:2}
.home-pile-card:nth-child(3){--dx:0%;--dy:14%;--r:-1.5deg;z-index:3}
.home-pile-card img{display:block;width:100%;height:100%;object-fit:cover}
.home-pile-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(180deg,transparent 45%,rgba(10,12,42,.78) 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.home-pile-label{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:flex;flex-direction:column;gap:1px;
font-size:var(--t-xs);color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.home-pile-label strong{font-family:var(--font-display);font-size:var(--t-sm);color:#fff;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-pile-label > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-pile-card:hover,.home-pile-card:focus-visible{z-index:4;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy) - 8px)) rotate(0deg) scale(1.03);
box-shadow:0 0 0 1px rgba(0,0,0,.06),0 34px 60px -26px rgba(10,12,42,.6)}
.home-pile-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (max-width:900px){
.home-band-grid{grid-template-columns:1fr}
.home-pile{display:none}
}
@media (max-width:640px){
.home-band .lead{display:none}
.home-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-top:var(--s-5)}
.home-stats strong{font-size:1.6rem}
.home-stats span{font-size:var(--t-xs);line-height:1.3}
}
@media (prefers-reduced-motion:reduce){ .home-pile-card{transition:none} }
.home-stats > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.home-stats strong{font-family:var(--font-display);font-weight:var(--fw-black);line-height:1;
font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);letter-spacing:var(--tr-tight);
font-variant-numeric:tabular-nums;color:var(--text)}
.home-stats span{font-size:var(--t-sm);color:var(--text-muted)}
/* Onglets collés sous l'en-tête (70 px) : on change d'onglet sans remonter. */
.home-tabs{position:sticky;top:70px;z-index:calc(var(--z-nav) - 1);
background:color-mix(in srgb,var(--bg) 90%,transparent);
backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
box-shadow:0 1px 0 var(--border)}
.home-tabs .container{display:flex;gap:var(--s-8)}
.home-tabs a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:56px;
font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--t-body);
color:var(--text-muted);text-decoration:none;transition:color var(--dur-2) var(--ease)}
.home-tabs a:hover{color:var(--text)}
.home-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;
background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease)}
.home-tabs a[aria-current="page"]{color:var(--text)}
.home-tabs a[aria-current="page"]::after{transform:scaleX(1)}
.home-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.home-tabs .count{min-width:26px;padding:1px 8px;border-radius:var(--r-pill);text-align:center;
background:var(--surface-2);font-size:var(--t-xs);font-variant-numeric:tabular-nums;color:var(--text-muted);
transition:background var(--dur-2),color var(--dur-2)}
.home-tabs a[aria-current="page"] .count{background:var(--accent-soft);color:var(--accent-strong)}
.home-body{padding-block:var(--s-8) var(--section-y)}
.home-tools{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.home-tools .input-group{flex:1 1 280px;max-width:440px}
.home-tools .select{width:auto;min-width:190px}
.home-subbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin:var(--s-5) 0 var(--s-6)}
.home-years{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.home-years::-webkit-scrollbar{display:none}
.home-years a{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Sans barre d’années ni compteur, la grille garde l’écart sous le formulaire. */
.home-results > :first-child:not(.home-subbar){margin-top:var(--s-6)}
.home-count{margin-left:auto;font-size:var(--t-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}
/* Résultats remplacés sans rechargement : la liste s'estompe si la réponse
tarde (au-delà de 140 ms, sinon aucun clignotement), puis les cartes
arrivent en léger décalé. Entrée marquée, sortie discrète. */
.home-results{transition:opacity var(--dur-1) var(--ease)}
/* Au moins un écran sous les onglets collés (en-tête 70 + onglets 57) : sans
cela, passer d'une longue liste de projets à un seul événement raccourcit la
page, le navigateur remonte et les onglets sautent au lieu de rester en place. */
.home-body{min-height:calc(100vh - 127px);min-height:calc(100svh - 127px)}
.home-results.is-loading{opacity:.5}
.home-results.is-entering :is(.project-grid,.event-grid) > *,
.home-results.is-entering .empty{animation:home-in var(--dur-3) var(--ease-out) backwards;
animation-delay:calc(var(--n,0) * 28ms)}
@keyframes home-in{from{opacity:0;transform:translateY(10px);filter:blur(3px)}}
/* Tuile de la vitrine : événement et année sur UNE ligne. « Festival International
Ibudo de l'Innovation » en capitales prenait trois lignes en tête de chaque tuile. */
.listing-card .lc-org:has(.lc-event){flex-wrap:nowrap;min-width:0}
.listing-card .lc-event{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listing-card .lc-org:has(.lc-event) > span:not(.lc-event){flex:0 0 auto}
@media (max-width:640px){
.home-tabs .container{gap:0}
.home-tabs a{flex:1;justify-content:center}
.home-tools .input-group{flex-basis:100%;max-width:none}
.home-tools .select{flex:1 1 0;min-width:0}
/* Les listes s'appliquent d'elles-mêmes (data-auto-submit) et la recherche
part sur Entrée : le bouton prendrait la place des deux listes. */
.home-tools .btn{display:none}
.home-count{margin-left:0}
}
/* ═══ Visuel dessiné ══════════════════════════════════════════════════════
Remplace l'image absente d'un événement ou d'un projet : dégradé à l'accent,
deux anneaux, grande icône, titre court. Ce n'est pas une image : il remplit
son cadre (parent positionné et dimensionné) et tout est mesuré en unités de
conteneur, donc rien n'est jamais recadré. Sous un seuil de taille, le texte
s'efface plutôt que de devenir illisible ou de déborder. */
:is(.visual,.vs-dot){--vi-a:#357ae9;--vi-b:#1b1f5e}
:is(.visual,.vs-dot)[data-accent="green"]{--vi-a:#01a847;--vi-b:#0b5a3c}
:is(.visual,.vs-dot)[data-accent="violet"]{--vi-a:#ad61ff;--vi-b:#5b2bb5}
:is(.visual,.vs-dot)[data-accent="red"]{--vi-a:#ff4e63;--vi-b:#b3203a}
:is(.visual,.vs-dot)[data-accent="yellow"]{--vi-a:#f5b700;--vi-b:#e2552b}
.visual{position:absolute;inset:0;display:block;overflow:hidden;container-type:size;isolation:isolate;
color:#fff;background:linear-gradient(135deg,var(--vi-a),var(--vi-b));user-select:none}
.visual::before{content:"";position:absolute;inset:0;z-index:-1;background:
radial-gradient(circle at 85% 20%,rgba(255,255,255,.28),transparent 42%),
radial-gradient(circle at 10% 110%,rgba(0,0,0,.22),transparent 50%)}
.vi-ring{position:absolute;width:97cqh;height:97cqh;right:-19cqh;top:-17cqh;border-radius:50%;
border:max(1px,.32cqh) solid rgba(255,255,255,.35)}
.vi-ring-2{width:66cqh;height:66cqh;right:-3cqh;top:-2cqh}
.vi-dots{position:absolute;left:7cqw;top:11cqh;display:flex;gap:1.9cqh}
.vi-dots i{width:2.5cqh;height:2.5cqh;border-radius:50%;background:#fff;opacity:.85}
.vi-dots i:nth-child(2){opacity:.6}
.vi-dots i:nth-child(3){opacity:.4}
.vi-dots i:nth-child(4){opacity:.2}
.vi-icon{position:absolute;right:7cqw;top:50%;transform:translateY(-50%);font-size:min(47cqh,30cqw);line-height:1;
opacity:.95;filter:drop-shadow(0 2.8cqh 6cqh rgba(0,0,0,.18))}
.vi-text{position:absolute;left:7cqw;bottom:12cqh;display:flex;flex-direction:column;gap:2.4cqh;
max-width:calc(86cqw - min(47cqh,30cqw) - 4cqw)}
.vi-title{font-family:var(--font-display);font-weight:var(--fw-black);
/* La taille suit le cadre ET le titre : --vi-len (nombre de caractères) et
--vi-word (le mot le plus long), posés par col_visual. Sans eux, un titre
de 28 caractères réclamait une troisième ligne et se faisait couper.
1,75 = un caractère d'Outfit Black vaut environ 0,57 em de large. */
font-size:clamp(14px,min(16cqh,8.5cqw,
calc((86cqw - min(47cqh,30cqw) - 4cqw) * 3.5 / var(--vi-len,12)),
calc((86cqw - min(47cqh,30cqw) - 4cqw) * 1.75 / var(--vi-word,8))),120px);
letter-spacing:-.03em;line-height:.95;text-wrap:balance;overflow-wrap:anywhere;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding-bottom:.06em}
.vi-sub{font-family:var(--font-body);font-weight:var(--fw-semi);font-size:clamp(11px,min(5.3cqh,2.9cqw),36px);
line-height:1.25;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visual.is-icon .vi-icon{font-size:min(52cqh,34cqw)}
.visual.is-icon .vi-icon{right:auto;left:50%;transform:translate(-50%,-50%)}
@container (max-height:120px) or (max-width:240px){
.vi-text,.vi-dots{display:none}
.vi-icon{right:auto;left:50%;transform:translate(-50%,-50%)}
}
/* Carte d'événement : le médaillon du logo chevauche le bas de la couverture.
Le texte du visuel remonte au-dessus, sinon la ligne de dates passe dessous. */
.ec-cover:has(+ .ec-body .ec-logo) .vi-text{bottom:26cqh}
.event-card.wide .ec-cover .vi-text{bottom:12cqh}
/* Image déposée en tête d'une page de projet. */
.card-cover{display:block;width:100%;border-radius:var(--r-lg);margin:var(--s-6) 0}
/* Bannière des pages événement et projet, à la place de la couverture. */
.visual-banner{position:relative;height:clamp(140px,26vw,300px);border-radius:var(--r-lg);overflow:hidden;
margin-bottom:var(--s-6)}
.visual-banner.is-card{height:clamp(160px,36vw,300px);margin:var(--s-6) 0}
.thumb .visual{border-radius:inherit}
/* Bloc « Visuel » des formulaires : aperçu, titre court, couleur, palette. */
.visual-field{display:grid;gap:var(--s-2);min-width:0;margin:0 0 var(--s-5);padding:var(--s-5);
border:1px solid var(--border);border-radius:var(--r-lg)}
.visual-field legend{padding:0 var(--s-2);font-family:var(--font-display);font-weight:var(--fw-bold)}
.visual-field > .hint{margin:0 0 var(--s-2);font-size:var(--t-xs);color:var(--text-faint)}
.visual-field .field{margin-bottom:var(--s-2)}
.visual-field .label{font-family:var(--font-display);font-weight:var(--fw-semi);font-size:var(--t-sm)}
.visual-preview{position:relative;width:100%;max-width:440px;aspect-ratio:16/9;margin-bottom:var(--s-3);
border-radius:var(--r-md);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 18px 36px -24px rgba(10,12,42,.5)}
.visual-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.visual-swatches .vs-item{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;
padding:5px;border:1.5px solid var(--border);border-radius:var(--r-pill);cursor:pointer;
font-family:var(--font-body);font-weight:var(--fw-reg);transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.visual-swatches .vs-auto{padding-right:14px}
.vs-item input{position:absolute;opacity:0;pointer-events:none}
.vs-dot{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--vi-a),var(--vi-b))}
.vs-item:hover{border-color:var(--border-strong)}
.vs-item:has(input:checked){border-color:var(--text);box-shadow:0 0 0 3px var(--ring)}
.vs-item:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.icon-palette{min-width:0;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.ip-tools{display:grid;gap:var(--s-3);padding:var(--s-3);border-bottom:1px solid var(--border);background:var(--surface-2)}
.ip-themes{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ip-themes::-webkit-scrollbar{display:none}
.ip-themes .pill{flex:0 0 auto;white-space:nowrap;cursor:pointer;min-height:32px}
.ip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px;padding:var(--s-3);
max-height:288px;overflow-y:auto;overscroll-behavior:contain}
.icon-palette .ip-item{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r-sm);
cursor:pointer;font-size:24px;color:var(--text);transition:background-color var(--dur-1),color var(--dur-1)}
.icon-palette .ip-item:hover{background:var(--surface-2)}
.ip-item input{position:absolute;opacity:0;pointer-events:none}
.icon-palette .ip-item:has(input:checked){background:var(--accent-soft);color:var(--accent-strong);box-shadow:inset 0 0 0 2px var(--accent)}
.ip-item:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.icon-palette .ip-auto{grid-column:span 3;aspect-ratio:auto;display:flex;justify-content:center;gap:8px;
font-family:var(--font-display);font-size:var(--t-xs);font-weight:var(--fw-semi)}
.ip-auto i{font-size:22px}
.ip-empty{margin:0;padding:var(--s-5);text-align:center;font-size:var(--t-sm)}
/* Carte d'événement. Rayon extérieur 22 ; le médaillon du logo (16) est posé
dans un liseré de 4 px de la couleur de la carte : 16 + 4 ≈ rayon voisin. */
.event-grid{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.event-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
background:var(--surface-raised);border-radius:var(--r-lg);color:inherit;text-decoration:none;
box-shadow:0 0 0 1px var(--border),0 1px 2px rgba(10,12,42,.04);
transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.event-card:hover{transform:translateY(-3px);
box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 50%,var(--border)),
0 22px 44px -26px color-mix(in srgb,var(--accent) 60%,rgba(10,12,42,.6))}
.event-card:active{transform:translateY(-3px) scale(.99)}
.event-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ec-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
background:var(--surface-sunken)}
.ec-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-4) var(--ease)}
.ec-cover::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.event-card:hover .ec-cover img{transform:scale(1.035)}
.ec-cover.generated{background:
radial-gradient(circle at 78% 18%,color-mix(in srgb,#fff 22%,transparent),transparent 42%),
linear-gradient(135deg,var(--accent) 0%,color-mix(in srgb,var(--accent) 38%,var(--ibu-ink-900)) 100%)}
.ec-cover .ec-cover-logo{width:38%;height:auto;max-height:62%;object-fit:contain;margin:auto;position:absolute;inset:0;
border-radius:var(--r-md);filter:drop-shadow(0 12px 22px rgba(10,12,42,.3))}
.event-card:hover .ec-cover .ec-cover-logo{transform:scale(1.04)}
.ec-initial{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);
font-weight:var(--fw-black);font-size:clamp(3.5rem,8vw,5.5rem);line-height:1;color:rgba(255,255,255,.92)}
.ec-body{position:relative;display:flex;flex-direction:column;gap:var(--s-2);flex:1;min-width:0;
padding:var(--s-5) var(--s-6) var(--s-6)}
.ec-logo{display:grid;place-items:center;width:64px;height:64px;margin:calc(-32px - var(--s-5)) 0 var(--s-1);
border-radius:var(--r-md);background:var(--surface-raised);overflow:hidden;
box-shadow:0 0 0 4px var(--surface-raised),0 10px 22px -12px rgba(10,12,42,.45)}
.ec-logo img{width:100%;height:100%;object-fit:contain}
.ec-meta{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2) var(--s-3);font-size:var(--t-xs);color:var(--text-muted)}
.ec-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:var(--r-pill);
font-family:var(--font-display);font-weight:var(--fw-semi);background:var(--surface-2);color:var(--text)}
.ec-status i{width:7px;height:7px;border-radius:50%;background:var(--n-400)}
.ec-status.is-ongoing{background:var(--a-green-100);color:#0a5a2c}
.ec-status.is-ongoing i{background:var(--a-green-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--a-green-500) 25%,transparent)}
.ec-status.is-upcoming{background:var(--ibu-blue-50);color:var(--ibu-blue-700)}
.ec-status.is-upcoming i{background:var(--ibu-blue-500)}
.ec-dates{font-variant-numeric:tabular-nums}
.ec-name{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h4);line-height:1.15;
margin:var(--s-1) 0 0;text-wrap:balance;overflow-wrap:anywhere}
.ec-tagline{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
font-size:var(--t-sm);color:var(--text-muted);text-wrap:pretty}
.ec-foot{margin-top:auto;padding-top:var(--s-4);display:flex;align-items:center;gap:var(--s-4);
border-top:1px solid var(--border);font-size:var(--t-sm);color:var(--text-muted)}
.ec-count{display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.ec-go{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
font-family:var(--font-display);font-weight:var(--fw-semi);color:var(--accent-strong)}
.ec-go i{transition:transform var(--dur-2) var(--ease)}
.event-card:hover .ec-go i{transform:translateX(3px)}
/* Un seul résultat : pleine largeur, couverture à gauche.
La couverture garde son 16:9 et c'est elle qui fixe la hauteur de la carte :
une affiche porte souvent du texte (titre, dates) qu'un recadrage coupait.
Le texte se resserre à côté (logo sur la ligne du statut) pour tenir dans
cette hauteur ; s'il la dépasse (écran étroit), la couverture s'étire et
seulement alors se recadre. */
@media (min-width:861px){
.event-card.wide{grid-column:1 / -1;flex-direction:row}
.event-card.wide .ec-cover{flex:0 0 58%;aspect-ratio:16/9;align-self:stretch}
.event-card.wide .ec-body{display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;
column-gap:var(--s-4);row-gap:var(--s-2);padding:var(--s-8) var(--s-8) var(--s-6)}
.event-card.wide .ec-body > *{grid-column:1 / -1}
.event-card.wide .ec-logo{grid-column:auto;margin:0;width:56px;height:56px}
.event-card.wide .ec-logo + .ec-meta{grid-column:auto;flex-direction:column;align-items:flex-start;
justify-content:center;gap:var(--s-1)}
.event-card.wide .ec-name{font-size:var(--t-h3);margin-top:var(--s-3)}
.event-card.wide .ec-tagline{-webkit-line-clamp:3;font-size:var(--t-body)}
.event-card.wide .ec-foot{margin-top:var(--s-4)}
}
@media (min-width:861px) and (max-width:1099px){
.event-card.wide .ec-body{padding:var(--s-6) var(--s-6) var(--s-5)}
.event-card.wide .ec-name{font-size:var(--t-h4);margin-top:var(--s-2)}
.event-card.wide .ec-tagline{-webkit-line-clamp:2;font-size:var(--t-sm)}
.event-card.wide .ec-foot{margin-top:var(--s-3)}
}
@media (prefers-reduced-motion:reduce){
.event-card,.ec-cover img,.ec-go i,.home-tabs a::after{transition:none}
.home-results.is-entering :is(.project-grid,.event-grid) > *,.home-results.is-entering .empty{animation:none}
.event-card:hover,.event-card:hover .ec-cover img{transform:none}
}
/* ═══ Aperçu en fenêtre ═══════════════════════════════════════════════════
Fenêtre superposée qui affiche le contenu d'une page sans quitter la liste.
Comportement : data-peek (orbital.js). Le lien reste un vrai lien, la fenêtre
n'est qu'un raccourci : sans JavaScript, on obtient la page complète. */
/* Largeur déduite de la marge du fond (.modal-overlay) : un 94vw posé en plus
de cette marge débordait dès que l'écran passait sous 680 px environ. */
/* max-width et pas seulement width : la fenêtre porte aussi la classe .modal,
plafonnée à 440 px, qui gagnait sur la largeur voulue. L'aperçu s'ouvrait donc
à moitié de sa taille, ce qui écrasait tout le contenu repris de la page. */
.peek-modal{--peek-pad:var(--s-8);position:relative;width:min(880px,calc(100vw - 2 * var(--s-5)));
max-width:min(880px,calc(100vw - 2 * var(--s-5)));max-height:88vh;overflow:auto;
container-type:inline-size;
background:var(--surface-raised);border-radius:var(--r-lg);padding:var(--s-8) var(--s-8) var(--s-10);
box-shadow:0 40px 90px -30px rgba(11,13,32,.55),0 0 0 1px rgba(0,0,0,.06)}
/* Les titres de la page reprise sont calibrés sur la LARGEUR DE L'ÉCRAN : dans
une fenêtre deux fois plus étroite, le titre d'un projet montait à 70 px et
tombait en trois lignes sous le bouton de fermeture. Ici, ils suivent la
largeur de la fenêtre, et la première ligne laisse la place au bouton. */
.peek-modal :is(h1,h2,h3){text-wrap:balance}
.peek-modal h1{font-size:clamp(1.6rem,5cqw,2.7rem);line-height:1.06;letter-spacing:-.02em;
padding-right:calc(var(--s-8) + 20px)}
.peek-modal h1 + .lead{padding-right:calc(var(--s-8) + 20px)}
.peek-modal h2{font-size:clamp(1.25rem,3.4cqw,1.9rem)}
.peek-modal h3{font-size:clamp(1.1rem,2.6cqw,1.5rem)}
.peek-modal .lead{font-size:clamp(1rem,2.1cqw,1.2rem)}
.peek-modal .section{padding-block:0}
.peek-modal .container,.peek-modal .container.narrow{padding-inline:0;max-width:none}
/* Le visuel ou la photo passe EN TÊTE, sur toute la largeur, comme la couverture
d'un article. Essayé d'abord en colonne à gauche : dès que l'image était moins
haute que le texte, elle laissait une colonne blanche sous elle. En tête, la
largeur sert à l'image et le texte garde une longueur de ligne lisible.
La page reprise est une suite d'éléments frères : « order » suffit à remonter
le visuel, sans toucher au balisage de la page. */
.peek-modal .container{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.peek-modal .container > :is(.visual-banner,img){order:-1;width:calc(100% + 2 * var(--peek-pad));
max-width:none;margin:calc(var(--peek-pad) * -1) calc(var(--peek-pad) * -1) var(--s-6);
border-radius:var(--r-lg) var(--r-lg) 0 0}
/* Le visuel dessiné suit une hauteur choisie ; une photo déposée garde SES
proportions (un recadrage couperait le texte des affiches). */
.peek-modal .container > .visual-banner{height:clamp(180px,24vw,340px)}
.peek-modal .container > img{height:auto;max-height:min(62vh,520px);object-fit:contain;background:var(--surface-sunken)}
/* Avec une couverture en tête, le bouton de fermeture ne gêne plus le titre. */
.peek-modal .container:has(> .visual-banner,> img) :is(h1,h1 + .lead){padding-right:0}
.peek-modal .container > :is(p,.prose,.lead){max-width:74ch}
@media (min-width:1180px){
.peek-modal{width:min(1040px,calc(100vw - 2 * var(--s-5)));max-width:min(1040px,calc(100vw - 2 * var(--s-5)))}
}
/* Le bouton de fermeture vit dans une zone collante de hauteur nulle : il reste
en haut à droite pendant le défilement sans prendre de place dans le flux.
En flottant, il repoussait la couverture, qui ne touchait plus le haut. */
.peek-close-zone{position:sticky;top:0;z-index:3;height:0;display:flex;justify-content:flex-end}
.peek-close{margin:calc(var(--s-4) * -1) calc(var(--s-4) * -1) 0 0;background:var(--surface-raised);
box-shadow:0 2px 10px -4px rgba(10,12,42,.35)}
.peek-body:focus{outline:none}
.peek-body .loading-state{display:grid;place-items:center;min-height:220px}
/* Plein écran sur téléphone : le fond perd sa marge et la fenêtre S'ÉTIRE dans
la grille au lieu d'imposer 100vw. 100vw ajouté à la marge du fond poussait
la fenêtre de 20 px hors de l'écran, bouton Fermer et champs rognés à droite
(iPhone, 2026-09-15). */
@media (max-width:640px){
.peek-overlay{padding:0;place-items:stretch}
.peek-modal{--peek-pad:var(--s-5);width:auto;height:auto;max-height:none;min-width:0;border-radius:0;
padding:max(var(--s-5),env(safe-area-inset-top)) var(--s-5) max(var(--s-8),env(safe-area-inset-bottom))}
.peek-close{margin:calc(var(--s-3) * -1) calc(var(--s-2) * -1) 0 0}
}
/* La première section d'une page porte l'écart d'ouverture, pas l'écart de
séparation. --section-y sert à mettre de l'air ENTRE deux sections ; appliqué
en tête de page, il creuse un vide de 115px sous l'en-tête. Mesuré sur
/projets le 2026-08-31. Un hero garde son propre rythme et n'est pas touché. */
main > .section:first-child{padding-top:var(--s-10)}
/* Pied de page d'une ligne. Le pied par défaut réserve --s-20 en haut pour ses
colonnes de liens ; quand il n'y en a pas, ces 80px deviennent une bande vide
sous le contenu. Mesuré sur collab.ibudo.co le 2026-09-01. */
.footer.footer-slim{padding-block:var(--s-8)}
.footer.footer-slim .bottom{margin-top:0;border-top:0;padding-top:0}
/* ═══ Page d'authentification sous en-tête ════════════════════════════════
.auth-split porte min-height:100vh : il est fait pour occuper TOUT l'écran,
seul, sans barre de navigation ni section autour. Empilé sous un en-tête et
dans une section paddée, il dépasse de la hauteur de l'en-tête plus les
marges, et force à défiler pour voir un formulaire de trois champs. Mesuré
sur collab.ibudo.co le 2026-09-01.
Ici : la page occupe exactement l'écran, et le volet se répartit ce qui reste
sous l'en-tête. La colonne de marque se recadre donc d'elle-même. */
body.auth-page{min-height:100svh;display:flex;flex-direction:column}
body.auth-page > main{flex:1;display:flex;min-height:0}
/* PAS de height:100% ici. Poser une hauteur explicite désactive l'étirement
par défaut du conteneur flex, et le pourcentage retombe sur « auto » parce que
la hauteur du parent dépend elle-même de la répartition flex. Résultat mesuré :
le volet redescendait à 500px dans un main de 829px. On laisse align-items:
stretch faire le travail, c'est exactement ce pour quoi il existe. */
body.auth-page .auth-split{flex:1;min-height:0}
/* Marque en haut, message au milieu, mention en bas. flex-end tassait les
trois blocs contre le bas et laissait les deux tiers de la colonne vides. */
body.auth-page .auth-aside{justify-content:space-between;padding:clamp(28px,3.5vw,52px)}
/* Sous 900px la colonne de marque n'apporte plus rien et vole la moitié de
l'écran à un formulaire : elle disparaît. */
@media (max-width:900px){
body.auth-page .auth-split{grid-template-columns:1fr}
body.auth-page .auth-aside{display:none}
}
/* ═══ Coque applicative, sans en-tête public ══════════════════════════════
.app-shell porte min-height:100vh : elle est faite pour occuper l'écran
seule. Sous un en-tête public, elle le dépasse d'autant, et il faut défiler
pour voir une colonne latérale qui est à moitié vide. Mesuré le 2026-09-01.
La navigation latérale se cale en haut et laisse son vide en bas, plutôt que
de répartir ses entrées sur toute la hauteur : une liste de six liens étalée
sur 900px ne se lit pas comme un menu. */
body.app-page{min-height:100svh}
body.app-page .app-shell{min-height:100svh}
body.app-page .app-nav{position:sticky;top:0;height:100svh;overflow-y:auto}
body.app-page .app-main{min-height:100svh}
@media (max-width:860px){
.app-shell,body.app-page .app-shell{grid-template-columns:1fr}
.app-menu-btn{display:inline-flex;margin-left:calc(var(--s-2) * -1)}
.app-topbar{padding-inline:var(--s-4);gap:var(--s-2)}
.app-content{padding:var(--s-5) var(--s-4)}
.app-nav,body.app-page .app-nav{position:fixed;inset:0 auto 0 0;z-index:calc(var(--z-modal) + 1);
width:min(300px,86vw);height:100svh;overflow-y:auto;visibility:hidden;transform:translateX(-100%);
transition:transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3);
padding-top:max(var(--s-6),env(safe-area-inset-top));padding-bottom:max(var(--s-6),env(safe-area-inset-bottom));
box-shadow:0 0 60px rgba(11,13,32,.45)}
.app-menu-open .app-nav,body.app-page.app-menu-open .app-nav{visibility:visible;transform:none;
transition:transform var(--dur-3) var(--ease)}
.app-menu-open::after{content:"";position:fixed;inset:0;z-index:var(--z-modal);background:rgba(10,12,42,.55)}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){ .app-nav,body.app-page .app-nav{transition:none} }
/* ═══ Chat : messagerie (liste, fil, saisie) et fenêtre flottante ═════════
Démo : idl/messagerie.html. Composant d'affichage seul : l'application
branche ses données et son script (collab : assets/app/messagerie.js).
.chat deux volets, liste à gauche et discussion à droite ; sous
820px un seul volet, .has-conv montre la discussion.
.chat-dock bulle fixe en bas à droite et son panneau ; plein écran sous
640px. Se hisse au-dessus du bandeau de cookies via
--consent-h, posée par ce bandeau.
Menus d'un message : , qui marche sans script et
sur du contenu arrivé après le chargement (data-dropdown ne se branche
qu'au démarrage). */
.chat{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
height:clamp(420px,calc(100svh - 64px - var(--s-8) * 2),960px)}
.chat-list{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border)}
.chat-list-head{padding:var(--s-4) var(--s-4) var(--s-3);font-family:var(--font-display);font-weight:var(--fw-semi)}
.chat-items{overflow-y:auto;min-height:0;flex:1;padding:0 var(--s-2) var(--s-2);overscroll-behavior:contain}
.chat-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-3);align-items:center;
padding:var(--s-3);border-radius:var(--r-sm);color:inherit;text-decoration:none}
.chat-item:hover{background:var(--surface-2)}
.chat-item:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.chat-item.active{background:var(--accent-soft)}
.chat-item .ci-body{display:grid;min-width:0;gap:1px}
.chat-item .ci-title,.chat-item .ci-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-item .ci-title{font-size:var(--t-sm);font-weight:var(--fw-med)}
.chat-item .ci-sub{font-size:var(--t-xs);color:var(--text-muted)}
.chat-item .ci-meta{display:grid;justify-items:end;gap:4px;font-size:var(--t-xs);color:var(--text-muted);white-space:nowrap}
.chat-item .ci-count{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);display:grid;place-items:center;
background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:var(--fw-semi)}
.chat-item.unread .ci-title{font-weight:var(--fw-semi)}
.chat-item.unread .ci-sub{color:var(--text)}
.chat-group-ico{width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-xs);display:grid;place-items:center;
background:var(--accent-soft);color:var(--accent-strong);font-size:18px}
.chat-pane{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);min-height:0;min-width:0}
.chat-head{display:flex;align-items:center;gap:var(--s-3);min-height:60px;padding:var(--s-2) var(--s-4);border-bottom:1px solid var(--border)}
.chat-head .ch-title{display:block;font-size:var(--t-sm);font-weight:var(--fw-semi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .ch-title a{color:inherit}
.chat-head .ch-sub{display:block;font-size:var(--t-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .ch-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.chat-back{display:none}
.chat-log{overflow-y:auto;min-height:0;padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);
background:var(--bg-subtle);overscroll-behavior:contain}
.chat-day{align-self:center;font-size:var(--t-xs);color:var(--text-muted);padding:var(--s-2) 0}
.chat-msg{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:min(560px,86%)}
.chat-msg.mine{align-self:flex-end;align-items:flex-end}
.chat-msg .cm-author{font-size:var(--t-xs);color:var(--text-muted);padding:0 var(--s-2)}
.chat-msg .cm-bubble{background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 14px 4px;
padding:8px 12px;font-size:var(--t-sm);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg .cm-bubble a{color:var(--accent-strong);text-decoration:underline}
.chat-msg.mine .cm-bubble{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:14px 14px 4px 14px}
.chat-msg.mine .cm-bubble a{color:inherit}
.chat-msg.deleted .cm-bubble{background:transparent;border-style:dashed;color:var(--text-muted);font-style:italic}
.chat-msg .cm-foot{display:flex;align-items:center;gap:var(--s-2);font-size:11px;color:var(--text-muted);padding:0 var(--s-2)}
.chat-msg.sending .cm-bubble{opacity:.6}
.cm-more{position:relative}
.cm-more>summary{list-style:none;cursor:pointer;border-radius:var(--r-xs);color:var(--text-faint);line-height:1}
.cm-more>summary::-webkit-details-marker{display:none}
.chat-msg .cm-more>summary{padding:2px 4px;opacity:0;transition:opacity var(--dur-1)}
.chat-msg:hover .cm-more>summary,.chat-msg .cm-more[open]>summary,.chat-msg .cm-more>summary:focus-visible{opacity:1}
.cm-more>summary:focus-visible{outline:2px solid var(--ring)}
@media (hover:none){ .chat-msg .cm-more>summary{opacity:1} }
.cm-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:230px;padding:var(--s-2);background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-2);display:grid;gap:2px}
.chat-msg:not(.mine) .cm-menu{right:auto;left:0}
.chat-log .chat-msg:last-child .cm-menu,.chat-log .chat-msg:nth-last-child(2) .cm-menu{top:auto;bottom:calc(100% + 4px)}
.cm-menu form{margin:0}
.cm-menu a,.cm-menu button{display:flex;align-items:center;gap:.6em;width:100%;padding:8px 10px;border:0;background:none;
border-radius:var(--r-xs);font:inherit;font-size:var(--t-sm);color:var(--text);text-align:left;cursor:pointer;text-decoration:none}
.cm-menu a:hover,.cm-menu button:hover{background:var(--surface-2)}
.cm-menu .ti{color:var(--text-faint)}
.cm-menu-title{font-size:var(--t-xs);color:var(--text-muted);padding:4px 10px}
.chat-bottom{background:var(--surface);border-top:1px solid var(--border)}
.chat-notice{margin:var(--s-3) var(--s-4)}
.chat-compose{display:flex;align-items:flex-end;gap:var(--s-2);padding:var(--s-3) var(--s-4)}
.chat-compose textarea{flex:1;min-width:0;resize:none;min-height:42px;max-height:160px;padding:10px 12px;font:inherit;font-size:var(--t-sm);
line-height:1.4;color:var(--text);background:var(--surface);border:1px solid var(--input-border);border-radius:var(--r-sm)}
.chat-compose textarea:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px var(--ring)}
@media (pointer:coarse){.chat-compose textarea{font-size:16px}}
.chat-empty{display:grid;justify-items:center;align-content:center;gap:var(--s-2);height:100%;padding:var(--s-8);
text-align:center;color:var(--text-muted);font-size:var(--t-sm)}
.chat-empty .ti{font-size:32px;color:var(--text-faint)}
@media (max-width:820px){
.chat{grid-template-columns:1fr;height:calc(100svh - 64px - var(--s-4) * 2)}
.chat>.chat-pane{display:none}
.chat.has-conv>.chat-list{display:none}
.chat.has-conv>.chat-pane{display:grid}
.chat-back{display:inline-flex}
}
/* Fenêtre flottante */
.chat-dock{position:fixed;right:clamp(12px,3vw,24px);bottom:calc(clamp(12px,3vw,24px) + var(--consent-h,0px));z-index:calc(var(--z-nav) + 5)}
.chat-dock-btn{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;
background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-3);font-size:26px;text-decoration:none;
transition:transform var(--dur-1) var(--ease-out)}
.chat-dock-btn:hover{transform:translateY(-2px)}
.chat-dock-btn:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.chat-dock-btn .dock-count{position:absolute;top:-4px;right:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
display:grid;place-items:center;background:var(--color-feedback-danger);color:var(--on-accent);font-size:12px;
font-weight:var(--fw-semi);border:2px solid var(--bg)}
.chat-dock-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(380px,calc(100vw - 24px));height:min(580px,calc(100svh - 110px - var(--consent-h,0px)));
display:grid;grid-template-rows:minmax(0,1fr);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
box-shadow:var(--shadow-3);overflow:hidden}
.chat [hidden],.chat-dock [hidden]{display:none!important}
.chat-dock-panel>.chat-list{border-right:0}
.chat-dock-panel .chat-back{display:inline-flex}
.chat-dock-panel .chat-list-head{display:flex;align-items:center;gap:var(--s-2)}
.chat-dock-panel .chat-list-head .btn{margin-left:auto}
@media (prefers-reduced-motion:no-preference){ .chat-dock-panel:not([hidden]){animation:chat-in var(--dur-2) var(--ease-out)} }
@keyframes chat-in{from{opacity:0;transform:translateY(8px)}}
@media (max-width:640px){
.chat-dock-panel{position:fixed;inset:0;width:auto;height:auto;border-radius:0;border:0}
.chat-dock.open .chat-dock-btn{display:none}
}
/* Photo d'une personne qui ouvre « Voir le profil » ou « Écrire » */
.person-chip{display:inline-flex;align-items:center;gap:var(--s-2);color:inherit}
.person-menu>summary.person-chip{color:inherit;padding:2px 6px 2px 2px;border-radius:var(--r-pill)}
.person-menu>summary.person-chip:hover{background:var(--surface-2)}
.person-menu .cm-menu{left:0;right:auto;min-width:210px}