/* PalaoBreeZ — styles propres à chaque écran (cotes relevées sur les maquettes 1586 × 992). */

/* Menu « plus » de l'en-tête */
.menu-plus { position: relative; }
.menu-plus summary { list-style: none; cursor: pointer; }
.menu-plus summary::-webkit-details-marker { display: none; }
.menu-deroulant { position: absolute; right: 0; top: calc(58px * var(--eb)); min-width: calc(230px * var(--eb)); background: #fff; border: 1px solid var(--contour); border-radius: var(--r); box-shadow: var(--ombre); padding: calc(8px * var(--eb)); display: flex; flex-direction: column; z-index: 30; }
.menu-deroulant a, .menu-deroulant button { text-align: left; padding: calc(10px * var(--eb)) calc(12px * var(--eb)); border-radius: 8px; font-size: max(11px, calc(15px * var(--et))); width: 100%; }
.menu-deroulant a:hover, .menu-deroulant button:hover { background: var(--ivoire); }
.menu-nom { padding: calc(8px * var(--eb)) calc(12px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); color: var(--gris); border-bottom: 1px solid var(--trait-doux); margin-bottom: calc(4px * var(--eb)); }

/* Icônes des modes */
.ic-onde { color: var(--cuivre); }
.ic-vert { color: #17895F; }

/* =================== 04 — Créer une palabre =================== */
/* Grille fluide : aucune largeur fixe, tout tient sans défilement de 1366 × 768 à 1920 × 1080. */
.ecran-creer { padding-top: calc(14px * var(--eb)); padding-bottom: calc(14px * var(--eb)); }
.creer-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(360px * var(--eb))); column-gap: calc(20px * var(--eb)); align-items: start; max-width: calc(1280px * var(--eb)); }
.creer-form { display: flex; flex-direction: column; gap: calc(12px * var(--eb)); min-width: 0; }
.creer-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(16px * var(--eb)); flex-wrap: wrap; }
.etapes { list-style: none; margin: calc(4px * var(--eb)) 0 0; padding: 0; display: flex; align-items: center; min-width: 0; flex: 0 1 calc(420px * var(--eb)); }
.etape { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); white-space: nowrap; }
.etape span { width: calc(24px * var(--eb)); height: calc(24px * var(--eb)); border-radius: 50%; border: 1px solid var(--contour); display: inline-flex; align-items: center; justify-content: center; font-size: max(11px, calc(12px * var(--et))); font-weight: 600; color: var(--encre); background: #fff; }
.etape.faite { font-weight: 700; color: var(--encre); }
.etape.faite span { background: var(--cuivre); border-color: var(--cuivre); color: #fff; }
.etape-ligne { flex: 1; min-width: calc(16px * var(--eb)); height: 1px; background: var(--contour); margin: 0 calc(10px * var(--eb)); }
.formats, .options { border: 0; margin: 0; padding: 0; min-width: 0; }
.formats legend, .options legend { padding: 0; }
.formats-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--eb)); }
.format-carte { position: relative; display: grid; grid-template-columns: calc(28px * var(--eb)) minmax(0, 1fr); column-gap: calc(12px * var(--eb)); align-items: start; min-height: calc(76px * var(--eb)); padding: calc(12px * var(--eb)) calc(34px * var(--eb)) calc(12px * var(--eb)) calc(14px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: #fff; cursor: pointer; }
.format-carte input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.format-carte .radio { position: absolute; top: calc(12px * var(--eb)); right: calc(12px * var(--eb)); width: calc(16px * var(--eb)); height: calc(16px * var(--eb)); border-radius: 50%; border: 1.5px solid #9AA3AD; background: #fff; }
.format-carte.choisie { border-color: var(--cuivre); box-shadow: inset 0 0 0 1px var(--cuivre); background: var(--cuivre-voile); }
.format-carte.choisie .radio { border-color: var(--cuivre); box-shadow: inset 0 0 0 3px #fff; background: var(--cuivre); }
.format-carte input:focus-visible ~ .radio { outline: 3px solid rgba(213,74,24,.5); outline-offset: 2px; }
.format-ic { color: var(--encre); }
.format-ic.ic-webinaire { color: var(--cuivre); }
.format-textes strong { display: block; font-size: max(11px, calc(15px * var(--et))); font-weight: 700; line-height: calc(20px * var(--et)); }
.format-textes small { display: block; font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); margin-top: 2px; line-height: calc(17px * var(--et)); }
.label-ligne { display: flex; justify-content: space-between; align-items: baseline; }
.compteur { text-align: right; font-size: max(11px, calc(12px * var(--et))); color: var(--gris); line-height: calc(16px * var(--et)); }
.ligne-date { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: calc(12px * var(--eb)); }
.ligne-fuseau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12px * var(--eb)); }
.ligne-date .champ, .ligne-fuseau .champ { padding: 0 calc(12px * var(--eb)); }
.ligne-date select, .ligne-fuseau select { text-overflow: ellipsis; min-width: 0; }
.options-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(8px * var(--eb)) calc(10px * var(--eb)); }
.option-carte { display: grid; grid-template-columns: calc(20px * var(--eb)) minmax(0, 1fr) calc(46px * var(--eb)); column-gap: calc(12px * var(--eb)); align-items: center; min-height: calc(52px * var(--eb)); padding: calc(8px * var(--eb)) calc(12px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: #fff; }
.option-textes label { display: block; font-weight: 600; font-size: max(11px, calc(13.5px * var(--et))); line-height: calc(18px * var(--et)); }
.option-textes small { display: block; font-size: max(11px, calc(12px * var(--et))); line-height: calc(16px * var(--et)); color: var(--gris); }
.option-carte .bascule, .apercu .bascule { width: calc(46px * var(--eb)); height: calc(26px * var(--eb)); }
.option-carte .bascule span::after { width: calc(20px * var(--eb)); height: calc(20px * var(--eb)); }
.option-carte .bascule input:checked + span::after { transform: translateX(20px); }
.actions-creer { display: flex; justify-content: space-between; gap: calc(12px * var(--eb)); flex-wrap: wrap; }
.actions-creer .btn-cuivre { min-width: calc(160px * var(--eb)); }
.apercu { padding: calc(16px * var(--eb)); background: var(--surface-chaude); min-width: 0; }
.apercu h2 { font-size: max(11px, calc(16px * var(--et))); font-weight: 700; line-height: calc(22px * var(--et)); }
.apercu-visuel { position: relative; margin-top: calc(10px * var(--eb)); height: calc(104px * var(--eb)); border-radius: var(--r); overflow: hidden; border: 1px solid var(--contour); }
.apercu-visuel img { width: 100%; height: 100%; object-fit: cover; }
.apercu-voile { position: absolute; inset: 0; padding: 0 calc(14px * var(--eb)) calc(10px * var(--eb)); display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(to top, rgba(15,20,18,.75), rgba(15,20,18,.05) 80%); }
.apercu-voile strong { font-size: max(11px, calc(16px * var(--et))); font-weight: 600; line-height: calc(21px * var(--et)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apercu-voile > span { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.apercu-liste { margin: calc(10px * var(--eb)) 0 0; padding: calc(4px * var(--eb)) calc(12px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: #fff; }
.apercu-liste > div { display: grid; grid-template-columns: calc(92px * var(--eb)) minmax(0, 1fr); align-items: start; padding: calc(7px * var(--eb)) 0; }
.apercu-liste > div + div { border-top: 1px solid #E6EAE7; }
.apercu-liste dt { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); font-weight: 600; }
.apercu-liste dt .ic-webinaire, .apercu-liste dt [data-apercu-icone] .ic { color: var(--cuivre); }
.apercu-liste dd { margin: 0; font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); min-width: 0; }
.apercu-liste .mode-nom { color: var(--cuivre); display: block; font-weight: 600; }
.apercu-liste dd small { display: block; font-size: max(11px, calc(12px * var(--et))); color: var(--gris); margin-top: 2px; line-height: calc(16px * var(--et)); }
.apercu-liste .pastille { height: calc(24px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); padding: 0 calc(10px * var(--eb)); white-space: normal; }
.regles { padding-top: calc(12px * var(--eb)); }
.regles h3 { font-size: max(11px, calc(13.5px * var(--et))); font-weight: 600; }
.regles ul { list-style: none; margin: calc(8px * var(--eb)) 0 0; padding: 0 calc(12px * var(--eb)); background: #fff; border: 1px solid var(--contour); border-radius: var(--r); }
.regles li { display: grid; grid-template-columns: calc(32px * var(--eb)) minmax(0, 1fr); column-gap: calc(12px * var(--eb)); align-items: center; padding: calc(8px * var(--eb)) 0; }
.regles li + li { border-top: 1px solid #E6EAE7; }
.regle-ic { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.t-menthe { background: #E4F4EC; color: var(--baobab); }
.t-cuivre { background: #FDEDE3; color: var(--cuivre); }
.t-bleu { background: #E8F0FA; color: #1B3F6B; }
.regles strong { display: block; font-size: max(11px, calc(13px * var(--et))); font-weight: 600; }
.regles small { display: block; font-size: max(11px, calc(12px * var(--et))); color: var(--gris); line-height: calc(16px * var(--et)); }
@media (max-width: 1100px) { .creer-grille { grid-template-columns: minmax(0, 1fr); row-gap: calc(16px * var(--eb)); } }

/* =================== Connexion / inscription / invitation =================== */
.corps-auth, .corps-public { background: var(--ivoire) url("../img/texture-feuilles.svg") no-repeat left top / 900px auto; }
.auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(40px * var(--eb)) calc(16px * var(--eb)); gap: calc(28px * var(--eb)); }
.auth-marque { display: flex; align-items: center; gap: calc(12px * var(--eb)); }
.auth-marque img { height: calc(58px * var(--eb)); width: auto; }
.auth-carte { width: min(calc(460px * var(--eb)), 100%); padding: calc(36px * var(--eb)) calc(36px * var(--eb)) calc(28px * var(--eb)); }
.auth-carte h1 { font-size: max(11px, calc(32px * var(--et))); font-weight: 700; letter-spacing: -.5px; }
.auth-carte form { margin-top: calc(26px * var(--eb)); display: flex; flex-direction: column; }
.auth-carte .champ { height: calc(48px * var(--eb)); margin-bottom: calc(18px * var(--eb)); }
.auth-carte .champ .ic { color: var(--gris); }
.auth-btn { margin-top: calc(8px * var(--eb)); height: calc(50px * var(--eb)); }
.auth-note { display: flex; gap: calc(10px * var(--eb)); align-items: center; margin-top: calc(22px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); color: var(--gris); }
.auth-oubli { margin: calc(-4px * var(--eb)) 0 calc(4px * var(--eb)); text-align: right; font-size: max(11px, calc(13.5px * var(--et))); }
.auth-oubli a, .auth-note a { color: #1763C6; text-decoration: underline; }
.auth-note .ic { color: var(--baobab); }
.invit-carte { width: min(calc(560px * var(--eb)), 100%); padding: calc(32px * var(--eb)); }
.invit-carte h1 { font-size: max(11px, calc(30px * var(--et))); font-weight: 700; letter-spacing: -.4px; margin-top: calc(8px * var(--eb)); }
.invit-meta { display: grid; gap: calc(12px * var(--eb)); margin: calc(22px * var(--eb)) 0; padding: calc(18px * var(--eb)); background: var(--ivoire); border-radius: var(--r); }
.invit-meta div { display: flex; align-items: center; gap: calc(12px * var(--eb)); font-size: max(11px, calc(15px * var(--et))); }
.invit-meta .ic { color: var(--baobab); }
.invit-actions { display: flex; gap: calc(12px * var(--eb)); flex-wrap: wrap; }
.invit-actions form { display: contents; }

/* =================== 05 — Mes palabres =================== */
.ecran-palabres { padding-top: calc(16px * var(--eb)); }
.palabres-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(320px * var(--eb))); column-gap: calc(20px * var(--eb)); align-items: start; max-width: calc(1400px * var(--eb)); }
.palabres-principal { min-width: 0; }
.palabres-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(16px * var(--eb)); }
.btn-creer { gap: calc(8px * var(--eb)); }
.ic-plus-blanc { --plus-trait: var(--cuivre-fonce); color: #fff; }
.onglets { display: grid; grid-template-columns: repeat(3, 1fr); height: calc(42px * var(--eb)); padding: calc(4px * var(--eb)); margin-top: calc(14px * var(--eb)); }
.onglets a { display: flex; align-items: center; justify-content: center; gap: calc(8px * var(--eb)); border-radius: 8px; font-size: max(11px, calc(14px * var(--et))); color: var(--encre); }
.onglets a .ic { color: var(--encre); }
.onglets a.actif { background: #FDEEE5; color: var(--cuivre); font-weight: 600; }
.onglets a.actif .ic { color: var(--cuivre); }
.filtres { display: flex; flex-wrap: wrap; gap: calc(10px * var(--eb)); margin-top: calc(12px * var(--eb)); align-items: center; }
.filtres .champ { height: calc(40px * var(--eb)); padding: 0 calc(12px * var(--eb)); width: auto; }
.filtre-recherche { flex: 1 1 calc(240px * var(--eb)); min-width: 0; }
.filtre-mode, .filtre-date { flex: 0 1 calc(190px * var(--eb)); min-width: 0; }
.vue-btn { width: calc(40px * var(--eb)); height: calc(40px * var(--eb)); border-radius: var(--r-s); border: 1px solid var(--contour); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--encre); flex: none; }
.vue-btn.actif { border-color: var(--cuivre); background: #FEF2EB; color: var(--cuivre); }
.filtre-actif { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(30px * var(--eb)); padding: 0 calc(10px * var(--eb)); margin-top: calc(10px * var(--eb)); border: 1px solid var(--contour); border-radius: 12px; background: var(--menthe-pale); font-size: max(11px, calc(13px * var(--et))); }
.filtre-actif a { color: #1763C6; text-decoration: underline; }
.une { position: relative; display: grid; grid-template-columns: minmax(0, calc(300px * var(--eb))) minmax(0, 1fr); column-gap: calc(18px * var(--eb)); padding: calc(12px * var(--eb)); margin-top: calc(12px * var(--eb)); }
.une-visuel { position: relative; border-radius: 10px; overflow: hidden; height: calc(176px * var(--eb)); }
.une-visuel img { width: 100%; height: 100%; object-fit: cover; }
.badge { position: absolute; top: calc(8px * var(--eb)); left: calc(8px * var(--eb)); height: calc(24px * var(--eb)); padding: 0 calc(9px * var(--eb)); border-radius: 7px; display: inline-flex; align-items: center; font-size: max(11px, calc(12.5px * var(--et))); font-weight: 600; }
.badge-cuivre { background: var(--cuivre-fonce); color: #fff; }
.badge-vert { background: #1E6B56; color: #fff; }
.badge-jaune { background: #F6C445; color: var(--encre); }
.badge-gris { background: #5F6B7A; color: #fff; }
.une-date { position: absolute; left: calc(8px * var(--eb)); bottom: calc(8px * var(--eb)); display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(30px * var(--eb)); padding: 0 calc(10px * var(--eb)); border-radius: 8px; background: rgba(22, 24, 24, .66); color: #fff; font-size: max(11px, calc(13px * var(--et))); }
.une-corps { min-width: 0; padding-right: calc(44px * var(--eb)); }
.une-corps h2 { font-size: max(11px, calc(19px * var(--et))); font-weight: 700; letter-spacing: -.2px; line-height: calc(24px * var(--et)); }
.ligne-mode { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); margin-top: 2px; }
.une-desc { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); margin-top: calc(4px * var(--eb)); line-height: calc(19px * var(--et)); }
.une-stats { list-style: none; padding: 0; margin: calc(10px * var(--eb)) 0 0; display: flex; gap: calc(22px * var(--eb)); flex-wrap: wrap; }
.une-stats li { display: flex; align-items: flex-start; gap: calc(8px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); line-height: calc(15px * var(--et)); }
.une-stats b { display: block; font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre); font-weight: 600; }
.une-stats .acces { white-space: pre-line; }
.une-corps > .pastille { margin-top: calc(10px * var(--eb)); height: calc(26px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); padding: 0 calc(10px * var(--eb)); }
.une-actions { display: flex; gap: calc(10px * var(--eb)); margin-top: calc(12px * var(--eb)); flex-wrap: wrap; }
.une-actions .btn { height: calc(36px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); padding: 0 calc(14px * var(--eb)); }
.menu-carte { position: absolute; top: calc(12px * var(--eb)); right: calc(12px * var(--eb)); }
.menu-carte summary { list-style: none; }
.menu-carte summary::-webkit-details-marker { display: none; }
.kebab { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); border: 1px solid var(--contour); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
.menu-carte .menu-deroulant { top: calc(38px * var(--eb)); }
.cartes-palabres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10px * var(--eb)); margin-top: calc(10px * var(--eb)); }
.carte-palabre { position: relative; display: grid; grid-template-columns: calc(96px * var(--eb)) minmax(0, 1fr); column-gap: calc(12px * var(--eb)); padding: calc(10px * var(--eb)) calc(12px * var(--eb)) 0; }
.cp-visuel { position: relative; height: calc(100px * var(--eb)); border-radius: 8px; overflow: hidden; }
.cp-visuel img { width: 100%; height: 100%; object-fit: cover; }
.cp-visuel .badge { top: calc(5px * var(--eb)); left: calc(5px * var(--eb)); height: calc(20px * var(--eb)); font-size: max(11px, calc(11.5px * var(--et))); padding: 0 calc(7px * var(--eb)); }
.cp-corps { min-width: 0; }
.cp-corps h3 { font-size: max(11px, calc(15px * var(--et))); font-weight: 700; line-height: calc(20px * var(--et)); padding-right: calc(38px * var(--eb)); }
.cp-corps h3 a:hover { text-decoration: underline; }
.cp-corps .ligne-mode { font-size: max(11px, calc(13px * var(--et))); }
.cp-desc { font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); line-height: calc(17px * var(--et)); margin-top: 2px; height: calc(34px * var(--eb)); overflow: hidden; }
.cp-meta { list-style: none; padding: 0; margin: calc(6px * var(--eb)) 0 0; display: flex; gap: calc(12px * var(--eb)); font-size: max(11px, calc(11.5px * var(--et))); line-height: calc(14px * var(--et)); color: var(--encre-douce); flex-wrap: wrap; }
.cp-meta li { display: flex; align-items: center; gap: calc(6px * var(--eb)); }
.cp-meta .ic { width: calc(16px * var(--eb)); height: calc(16px * var(--eb)); }
.cp-meta b { color: var(--encre); font-weight: 600; }
.cp-pied { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(10px * var(--eb)); height: calc(38px * var(--eb)); margin-top: calc(8px * var(--eb)); border-top: 1px solid #E6EAE7; font-size: max(11px, calc(12.5px * var(--et))); }
.stable { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); }
.stable .ic { color: #17895F; }
.progression { width: calc(140px * var(--eb)); height: calc(6px * var(--eb)); border-radius: 6px; background: #F1EDE8; overflow: hidden; border: 1px solid var(--contour); }
.progression span { display: block; height: 100%; background: var(--cuivre); border-radius: 6px; }
.etapes-texte { color: var(--encre-douce); }
.cartes-palabres.en-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.palabres-cote { padding-top: calc(4px * var(--eb)); display: flex; flex-direction: column; gap: calc(12px * var(--eb)); min-width: 0; }
.semaine { padding: calc(12px * var(--eb)) calc(14px * var(--eb)) calc(4px * var(--eb)); background: #FBFAF8; }
.semaine h2 { font-size: max(11px, calc(16px * var(--et))); font-weight: 700; line-height: calc(22px * var(--et)); }
.semaine ol { list-style: none; margin: calc(6px * var(--eb)) 0 0; padding: 0; }
.semaine li { display: grid; grid-template-columns: calc(10px * var(--eb)) calc(88px * var(--eb)) calc(22px * var(--eb)) minmax(0,1fr) calc(16px * var(--eb)); align-items: center; column-gap: calc(6px * var(--eb)); min-height: calc(52px * var(--eb)); border-bottom: 1px solid #E6EAE7; }
.semaine li:last-child { border-bottom: 0; }
.point { width: calc(8px * var(--eb)); height: calc(8px * var(--eb)); border-radius: 50%; background: #17895F; }
.point-cuivre { background: var(--cuivre); }
.sem-date { font-size: max(11px, calc(12px * var(--et))); color: var(--encre-douce); line-height: calc(16px * var(--et)); }
.sem-date b { display: block; color: var(--encre); font-weight: 600; font-size: max(11px, calc(12.5px * var(--et))); }
.sem-ic { color: var(--encre); width: calc(18px * var(--eb)); height: calc(18px * var(--eb)); }
.sem-titre { font-size: max(11px, calc(12px * var(--et))); color: var(--encre-douce); line-height: calc(16px * var(--et)); min-width: 0; }
.sem-titre b { display: block; color: var(--encre); font-weight: 600; font-size: max(11px, calc(13px * var(--et))); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.semaine .chev { width: calc(16px * var(--eb)); height: calc(16px * var(--eb)); }
.sem-vide { display: block !important; min-height: 0 !important; padding: calc(14px * var(--eb)) 0; color: var(--gris); font-size: max(11px, calc(13px * var(--et))); }
.invit-attente { display: grid; grid-template-columns: calc(36px * var(--eb)) minmax(0, 1fr) calc(16px * var(--eb)); column-gap: calc(12px * var(--eb)); align-items: center; padding: calc(12px * var(--eb)); border-radius: var(--r); background: #FEF7F1; border: 1px solid var(--contour); }
.ia-ic { width: calc(36px * var(--eb)); height: calc(36px * var(--eb)); border-radius: 50%; background: #FDE8DA; color: var(--cuivre); display: flex; align-items: center; justify-content: center; }
.invit-attente b { display: block; font-size: max(11px, calc(14px * var(--et))); font-weight: 600; }
.invit-attente em { font-style: normal; color: var(--cuivre); }
.invit-attente small { display: block; font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); line-height: calc(17px * var(--et)); margin-top: 2px; }
[data-copie]::after { content: attr(data-copie); position: absolute; transform: translateY(-38px); background: var(--encre); color: #fff; font-size: max(11px, calc(12px * var(--et))); padding: calc(4px * var(--eb)) calc(8px * var(--eb)); border-radius: 6px; }

.filtres select { font-size: max(11px, calc(14px * var(--et))); text-overflow: clip; }

/* =================== 06 — Participants et invitations =================== */
/* Grille fluide : aucun débordement de 1366 à 1920 px. */
.ecran-participants { padding-top: calc(6px * var(--eb)); }
.participants-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(340px * var(--eb))); column-gap: calc(18px * var(--eb)); align-items: start; max-width: calc(1440px * var(--eb)); }
.participants-principal { min-width: 0; }
.fil-ariane { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); padding-top: calc(8px * var(--eb)); min-width: 0; }
.fil-ariane > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane .sep-fil { color: #A8AEB8; }
.participants-tete { display: flex; align-items: flex-start; gap: calc(12px * var(--eb)); margin-top: calc(8px * var(--eb)); }
.retour { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); flex: none; border: 1px solid var(--contour); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.participants-tete h1 { font-size: max(11px, calc(24px * var(--et))); font-weight: 700; letter-spacing: -.3px; line-height: calc(30px * var(--et)); }
.participants-tete .sous-titre { font-size: max(11px, calc(14px * var(--et))); margin-top: 2px; }
.stats-bande { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(12px * var(--eb)); padding: calc(10px * var(--eb)) 0; align-items: center; }
.stats-bande > div { display: flex; align-items: center; gap: calc(14px * var(--eb)); padding: 0 calc(18px * var(--eb)); min-width: 0; }
.stats-bande > div + div { border-left: 1px solid var(--contour); }
.stats-bande .ic { width: calc(28px * var(--eb)); height: calc(28px * var(--eb)); color: var(--baobab); }
.stats-bande .ic-cuivre { color: var(--cuivre); }
.stats-bande b { display: block; font-size: max(11px, calc(20px * var(--et))); font-weight: 700; line-height: calc(24px * var(--et)); color: var(--encre); }
.stats-bande span { font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); }
.ic-cuivre { color: var(--cuivre); }
.filtres-part { display: flex; flex-wrap: wrap; gap: calc(8px * var(--eb)); margin-top: calc(12px * var(--eb)); align-items: center; }
.filtres-part .champ { height: calc(38px * var(--eb)); padding: 0 calc(10px * var(--eb)); gap: calc(8px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); width: auto; min-width: 0; }
.filtres-part .champ:first-child { flex: 1 1 calc(170px * var(--eb)); }
.filtres-part .champ:nth-child(2), .filtres-part .champ:nth-child(3) { flex: 0 1 calc(160px * var(--eb)); }
.filtres-part .champ select { font-size: max(11px, calc(13.5px * var(--et))); text-overflow: ellipsis; min-width: 0; }
.filtres-part .champ input { font-size: max(11px, calc(13.5px * var(--et))); min-width: 0; }
.filtres-part .btn { height: calc(38px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); padding: 0 calc(12px * var(--eb)); gap: calc(6px * var(--eb)); flex: none; }
.table-part { margin-top: calc(12px * var(--eb)); overflow: hidden; }
.table-part table { width: 100%; border-collapse: collapse; table-layout: auto; }
.table-part thead th { background: #F6F8F7; height: calc(38px * var(--eb)); text-align: left; font-weight: 600; font-size: max(11px, calc(12.5px * var(--et))); white-space: nowrap; padding: 0 calc(8px * var(--eb)); border-bottom: 1px solid var(--contour); }
.table-part .tri { display: inline-block; vertical-align: middle; margin-left: 2px; }
.table-part td { height: calc(52px * var(--eb)); border-top: 1px solid #E6EAE7; padding: calc(4px * var(--eb)) calc(8px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); vertical-align: middle; }
.table-part tbody tr:first-child td { border-top: 0; }
.col-case { width: calc(34px * var(--eb)); padding-left: calc(12px * var(--eb)) !important; }
.case { width: calc(16px * var(--eb)); height: calc(16px * var(--eb)); border: 1.5px solid #9AA3AD; border-radius: 4px; display: inline-block; vertical-align: middle; accent-color: var(--baobab); margin: 0; }
.personne-cell { display: flex; align-items: center; gap: calc(10px * var(--eb)); min-width: 0; }
.personne-cell b { display: block; font-weight: 600; font-size: max(11px, calc(13.5px * var(--et))); }
.personne-cell span { font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); line-height: calc(17px * var(--et)); min-width: 0; }
.personne-cell .avatar { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); }
.personne-cell .avatar-initiales { font-size: max(11px, calc(12px * var(--et))); }
.champ-role { height: calc(32px * var(--eb)); width: calc(118px * var(--eb)); padding: 0 calc(10px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); }
.champ-role select { font-size: max(11px, calc(13px * var(--et))); }
.table-part .pastille { height: calc(26px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); padding: 0 calc(9px * var(--eb)); gap: calc(6px * var(--eb)); border-radius: 8px; }
.p-gris { background: #EEF0F3; color: var(--gris); }
.col-date { color: var(--encre-douce); line-height: calc(17px * var(--et)); white-space: nowrap; font-size: max(11px, calc(12.5px * var(--et))) !important; }
.col-actions { width: calc(44px * var(--eb)); text-align: center !important; }
.table-part .kebab { width: calc(30px * var(--eb)); height: calc(30px * var(--eb)); }
.menu-ligne { position: relative; display: inline-block; }
.menu-ligne summary { list-style: none; width: calc(30px * var(--eb)); height: calc(30px * var(--eb)); }
.menu-ligne summary::-webkit-details-marker { display: none; }
.menu-ligne .menu-deroulant { right: 0; top: calc(36px * var(--eb)); }
.role-fixe { font-weight: 600; }
.pagination { display: flex; align-items: center; gap: calc(14px * var(--eb)); justify-content: center; margin-top: calc(12px * var(--eb)); color: var(--gris); font-size: max(11px, calc(13px * var(--et))); flex-wrap: wrap; }
.pagination .btn { height: calc(34px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); }
.participants-cote { padding-top: calc(10px * var(--eb)); display: flex; flex-direction: column; gap: calc(12px * var(--eb)); min-width: 0; }
.participants-cote h2 { display: flex; align-items: center; gap: calc(10px * var(--eb)); font-size: max(11px, calc(16px * var(--et))); font-weight: 700; }
.rond-ic { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); flex: none; border-radius: 50%; background: #E1F3EA; color: var(--baobab); display: inline-flex; align-items: center; justify-content: center; }
.rond-ic .ic { width: calc(18px * var(--eb)); height: calc(18px * var(--eb)); }
.bloc-invit { padding: calc(12px * var(--eb)) calc(14px * var(--eb)) calc(14px * var(--eb)); display: flex; flex-direction: column; min-width: 0; }
.bloc-invit .champ-label { font-weight: 600; font-size: max(11px, calc(13px * var(--et))); margin: 2px 0 calc(4px * var(--eb)); line-height: calc(17px * var(--et)); }
.bloc-invit h2 + .champ-label { margin-top: calc(12px * var(--eb)); }
.bloc-invit .optionnel { color: var(--gris); font-weight: 400; }
.bloc-invit .compteur { margin: calc(3px * var(--eb)) 0 calc(6px * var(--eb)); font-size: max(11px, calc(12px * var(--et))); line-height: calc(14px * var(--et)); }
.bloc-invit textarea { height: calc(62px * var(--eb)); resize: none; font-size: max(11px, calc(13px * var(--et))); }
.bloc-invit textarea#message { height: calc(98px * var(--eb)); }
.bloc-invit .champ { height: calc(36px * var(--eb)); margin-bottom: calc(8px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); }
.case-ligne { display: flex; align-items: center; gap: calc(10px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); margin-top: calc(4px * var(--eb)); line-height: calc(18px * var(--et)); }
.case-ligne input[type="checkbox"] { width: calc(16px * var(--eb)); height: calc(16px * var(--eb)); flex: none; accent-color: var(--baobab); margin: 0; }
.invit-boutons { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: calc(8px * var(--eb)); margin-top: calc(12px * var(--eb)); }
.invit-boutons .btn { height: calc(38px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); padding: 0 calc(10px * var(--eb)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-lien { display: grid; grid-template-columns: minmax(0, 1fr) calc(76px * var(--eb)); gap: calc(12px * var(--eb)); padding: calc(12px * var(--eb)) calc(14px * var(--eb)); align-items: center; }
.bloc-lien > div { min-width: 0; }
.lien-champ { display: flex; align-items: center; gap: calc(6px * var(--eb)); margin-top: calc(10px * var(--eb)); min-width: 0; }
.lien-url { flex: 1 1 auto; min-width: 0; height: calc(32px * var(--eb)); display: flex; align-items: center; padding: 0 calc(10px * var(--eb)); background: #F4F6F8; border: 1px solid var(--contour); border-radius: 8px; font-size: max(11px, calc(12.5px * var(--et))); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.copier { flex: none; width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); border: 1px solid var(--contour); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #fff; position: relative; }
.expire { font-size: max(11px, calc(12px * var(--et))); color: var(--encre-douce); margin-top: calc(6px * var(--eb)); }
.qr { width: calc(76px * var(--eb)); height: calc(76px * var(--eb)); }
.qr svg { width: 100%; height: 100%; display: block; }
.bloc-perm { padding: calc(12px * var(--eb)) calc(14px * var(--eb)); min-width: 0; }
.perm-tete { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--eb)); }
.perm-tete h2 .ic { width: calc(20px * var(--eb)); height: calc(20px * var(--eb)); }
.champ-perm { width: calc(128px * var(--eb)); flex: none; height: calc(32px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); padding: 0 calc(10px * var(--eb)); }
.champ-perm select { font-size: max(11px, calc(13px * var(--et))); }
.perm-texte { font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); margin-top: calc(8px * var(--eb)); line-height: calc(17px * var(--et)); }
.perm-tuiles { list-style: none; padding: 0; margin: calc(10px * var(--eb)) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(6px * var(--eb)); }
.perm-tuiles li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(3px * var(--eb)); min-height: calc(72px * var(--eb)); border: 1px solid var(--contour); border-radius: 10px; padding: calc(8px * var(--eb)) 2px calc(6px * var(--eb)); font-size: max(11px, calc(12px * var(--et))); min-width: 0; }
.perm-tuiles li > .ic { color: var(--baobab); width: calc(20px * var(--eb)); height: calc(20px * var(--eb)); }
.perm-tuiles .etat-on .ic, .perm-tuiles .etat-off .ic { width: calc(16px * var(--eb)); height: calc(16px * var(--eb)); }
.perm-tuiles .etat-on .ic { color: var(--baobab); }
.perm-tuiles .etat-off .ic { color: #B9BEC6; }
.perm-tuiles li.off > .ic { color: var(--encre); }


/* =================== 09 — Sécurité et données =================== */
.ecran-securite { padding: 0 calc(24px * var(--eb)) calc(80px * var(--eb)) calc(20px * var(--eb)); }
.entete-fil + .entete-outils .segment, .entete-fil ~ .entete-outils .segment { margin-right: calc(12px * var(--eb)); }
.secu-grille { display: grid; grid-template-columns: calc(168px * var(--eb)) minmax(0, 1fr); column-gap: calc(14px * var(--eb)); margin-top: calc(16px * var(--eb)); align-items: start; max-width: calc(1400px * var(--eb)); }
.secu-principal { min-width: 0; }
.sous-nav { display: flex; flex-direction: column; gap: calc(4px * var(--eb)); padding: calc(8px * var(--eb)) calc(4px * var(--eb)); min-height: 0; border-radius: var(--r-m); }
.sous-nav a { display: flex; align-items: center; gap: calc(10px * var(--eb)); height: calc(40px * var(--eb)); padding: 0 calc(10px * var(--eb)); border-radius: 8px; font-size: max(11px, calc(14px * var(--et))); }
.sous-nav a .ic { width: calc(20px * var(--eb)); height: calc(20px * var(--eb)); }
.sous-nav a .ic { color: var(--encre); }
.sous-nav a.actif { background: #DDF6EC; font-weight: 500; }
.sous-nav a.actif .ic { color: var(--baobab); }
.reco { display: grid; grid-template-columns: calc(34px * var(--eb)) minmax(0, 1fr) auto; column-gap: calc(14px * var(--eb)); align-items: center; min-height: calc(62px * var(--eb)); padding: calc(10px * var(--eb)) calc(18px * var(--eb)) calc(10px * var(--eb)) calc(16px * var(--eb)); background: #F0FBF6; border: 1px solid var(--contour); border-radius: var(--r-m); }
.reco-ic { width: calc(34px * var(--eb)); height: calc(34px * var(--eb)); border-radius: 50%; background: var(--baobab); color: #fff; display: flex; align-items: center; justify-content: center; }
.reco strong { font-size: max(11px, calc(15px * var(--et))); font-weight: 600; }
.reco p { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); margin-top: 2px; }
.reco-lien { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); color: #1763C6; text-decoration: underline; text-underline-offset: 3px; font-size: max(11px, calc(13.5px * var(--et))); }
.secu-colonnes { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: calc(14px * var(--eb)); margin-top: calc(14px * var(--eb)); align-items: start; }
.secu-gauche, .secu-droite { min-width: 0; }
.secu-gauche { display: flex; flex-direction: column; gap: calc(15px * var(--eb)); }
.secu-droite { display: flex; flex-direction: column; gap: calc(15px * var(--eb)); }
.secu-principal .carte { border-radius: var(--r-m); }
.bloc-tete { display: flex; align-items: flex-start; gap: calc(14px * var(--eb)); position: relative; }
.bloc-tete > div { min-width: 0; }
.bloc-tete h2 { font-size: max(11px, calc(17px * var(--et))); font-weight: 600; letter-spacing: -.2px; line-height: calc(26px * var(--et)); }
.bloc-tete p { font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); margin-top: calc(3px * var(--eb)); line-height: calc(20px * var(--et)); }
.carre-ic { width: calc(40px * var(--eb)); height: calc(40px * var(--eb)); flex: none; border-radius: 12px; background: #E6F5EE; color: var(--baobab); display: inline-flex; align-items: center; justify-content: center; }
.carre-ic.petit { width: calc(42px * var(--eb)); height: calc(42px * var(--eb)); }
.carre-ic.nu { background: transparent; color: var(--baobab); }
.carre-ic.rouge { background: #FDECEB; color: var(--alerte); }
.bloc-hebergement { min-height: 0; padding: calc(16px * var(--eb)) calc(14px * var(--eb)) calc(14px * var(--eb)) calc(16px * var(--eb)); }
.region { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: calc(16px * var(--eb)); align-items: center; margin-top: calc(12px * var(--eb)); min-height: calc(80px * var(--eb)); padding: calc(10px * var(--eb)) calc(12px * var(--eb)); background: #FAFAF8; border: 1px solid var(--contour); border-radius: var(--r); }
.region small { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); }
.region strong { display: block; font-size: max(11px, calc(16px * var(--et))); font-weight: 600; color: #0E2E3A; margin-top: 2px; }
.region strong span { margin: 0 calc(4px * var(--eb)); }
.region p { font-size: max(11px, calc(13.5px * var(--et))); color: var(--gris); margin-top: calc(3px * var(--eb)); }
.pastille-actif { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(28px * var(--eb)); padding: 0 calc(12px * var(--eb)); border-radius: 12px; background: #E4F6EC; border: 1px solid var(--contour); font-size: max(11px, calc(13.5px * var(--et))); white-space: nowrap; }
.pastille-actif i { width: calc(9px * var(--eb)); height: calc(9px * var(--eb)); border-radius: 50%; background: #17895F; }
.pastille-actif.grand { height: calc(30px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); padding: 0 calc(14px * var(--eb)); }
.btn-modifier { height: calc(36px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); font-weight: 500; padding: 0 calc(16px * var(--eb)); }
.secu-duo { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: calc(14px * var(--eb)) calc(13px * var(--eb)); }
.secu-duo > * { min-width: 0; }
.bloc-auth { min-height: calc(413px * var(--eb)); padding: calc(16px * var(--eb)) calc(14px * var(--eb)) 0 calc(14px * var(--eb)); }
.ligne-bascule { display: grid; grid-template-columns: minmax(0, 1fr) calc(54px * var(--eb)); align-items: center; column-gap: calc(12px * var(--eb)); padding: calc(14px * var(--eb)) 0; }
.bloc-auth .ligne-bascule:first-of-type { margin-top: calc(14px * var(--eb)); }
.bloc-auth .ligne-bascule + .ligne-bascule { border-top: 1px solid #ECEAE6; }
.ligne-bascule label { font-size: max(11px, calc(14.5px * var(--et))); font-weight: 500; display: block; }
.ligne-bascule small { display: block; font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); margin-top: calc(3px * var(--eb)); line-height: calc(16px * var(--et)); }
.sessions { border-top: 1px solid #ECEAE6; padding-top: calc(12px * var(--eb)); }
.sessions-tete { display: flex; justify-content: space-between; gap: calc(8px * var(--eb)); flex-wrap: wrap; font-size: max(11px, calc(14px * var(--et))); font-weight: 500; }
.lien-souligne { text-decoration: underline; text-underline-offset: 3px; color: #1B3F6B; font-size: max(11px, calc(13px * var(--et))); font-weight: 400; }
.sessions ul { list-style: none; margin: calc(8px * var(--eb)) 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(4px * var(--eb)); }
.sessions li { display: grid; grid-template-columns: calc(20px * var(--eb)) minmax(0,1fr) auto; column-gap: calc(10px * var(--eb)); align-items: center; min-height: calc(48px * var(--eb)); padding: calc(4px * var(--eb)) calc(10px * var(--eb)); background: #FAFAF9; border: 1px solid var(--contour); border-radius: 8px; }
.s-qui { font-size: max(11px, calc(12px * var(--et))); color: var(--encre-douce); line-height: calc(17px * var(--et)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s-qui b { display: block; font-size: max(11px, calc(13px * var(--et))); color: var(--encre); font-weight: 600; }
.s-quand { font-size: max(11px, calc(12px * var(--et))); color: var(--encre-douce); }
.s-vide { font-size: max(11px, calc(13px * var(--et))); color: var(--gris); padding: calc(12px * var(--eb)); }
.bloc-conserv { min-height: calc(413px * var(--eb)); padding: calc(14px * var(--eb)) calc(12px * var(--eb)) 0 calc(12px * var(--eb)); display: flex; flex-direction: column; }
.bloc-conserv .bloc-tete { gap: calc(12px * var(--eb)); }
.bloc-conserv .carre-ic.petit { width: calc(36px * var(--eb)); height: calc(36px * var(--eb)); }
.bloc-conserv .bloc-tete h2 { font-size: max(11px, calc(16px * var(--et))); }
.bloc-conserv .bloc-tete p { font-size: max(11px, calc(12px * var(--et))); line-height: calc(16px * var(--et)); }
.bloc-conserv .champ-label { font-size: max(11px, calc(13px * var(--et))); font-weight: 600; margin: calc(16px * var(--eb)) 0 calc(6px * var(--eb)); line-height: calc(16px * var(--et)); }
.bloc-conserv .bloc-tete + .champ-label { margin-top: calc(24px * var(--eb)); }
.bloc-conserv .champ { height: calc(36px * var(--eb)); padding: 0 calc(12px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); }
.aide { display: block; font-size: max(11px, calc(12px * var(--et))); color: var(--gris); margin-top: calc(8px * var(--eb)); line-height: calc(16px * var(--et)); }
.bloc-consent { min-height: calc(116px * var(--eb)); padding: calc(6px * var(--eb)) calc(8px * var(--eb)) calc(8px * var(--eb)) calc(12px * var(--eb)); }
.bloc-consent .ligne-bascule { grid-template-columns: calc(36px * var(--eb)) minmax(0, 1fr) calc(54px * var(--eb)); column-gap: calc(12px * var(--eb)); padding: calc(4px * var(--eb)) 0 calc(6px * var(--eb)); }
.bloc-consent label { color: #0E2E3A; font-weight: 500; font-size: max(11px, calc(14.5px * var(--et))); }
.bloc-consent small { font-size: max(11px, calc(11.5px * var(--et))); }
.info-bande { display: flex; gap: calc(8px * var(--eb)); align-items: flex-start; font-size: max(11px, calc(11.5px * var(--et))); line-height: calc(15px * var(--et)); border: 1px solid var(--contour); color: var(--encre-douce); background: #EDFBF4; border-radius: 8px; padding: calc(6px * var(--eb)) calc(10px * var(--eb)); }
.info-bande .ic { color: var(--baobab); margin-top: 1px; }
.bloc-replays { min-height: calc(116px * var(--eb)); padding: calc(8px * var(--eb)) calc(10px * var(--eb)); }
.bloc-replays .bloc-tete { gap: calc(12px * var(--eb)); }
.bloc-replays .bloc-tete .ic { color: var(--encre); margin-top: calc(4px * var(--eb)); }
.bloc-replays h2 { font-size: max(11px, calc(14px * var(--et))) !important; line-height: calc(18px * var(--et)) !important; font-weight: 600 !important; }
.bloc-replays p { font-size: max(11px, calc(11px * var(--et))) !important; line-height: calc(14px * var(--et)) !important; margin-top: 1px !important; }
.bloc-replays .champ { height: calc(28px * var(--eb)); padding: 0 calc(8px * var(--eb)); margin-top: calc(6px * var(--eb)); border-radius: 6px; }
.bloc-replays select { font-size: max(11px, calc(12.5px * var(--et))); text-overflow: ellipsis; min-width: 0; }
.bloc-replays .aide { font-size: max(11px, calc(11px * var(--et))); line-height: calc(14px * var(--et)); margin-top: calc(4px * var(--eb)); }
.bloc-journal { min-height: calc(445px * var(--eb)); padding-bottom: calc(12px * var(--eb)) !important; padding: calc(16px * var(--eb)) calc(14px * var(--eb)) 0 calc(14px * var(--eb)); }
.voir-tout { position: absolute; right: calc(6px * var(--eb)); top: calc(6px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); }
.journal { list-style: none; margin: calc(18px * var(--eb)) 0 0; padding: 0 0 0 calc(4px * var(--eb)); position: relative; }
.journal::before { content: ""; position: absolute; left: calc(8px * var(--eb)); top: calc(18px * var(--eb)); bottom: calc(6px * var(--eb)); width: 1px; background: #DCDFE4; }
.journal li { display: grid; grid-template-columns: calc(10px * var(--eb)) calc(40px * var(--eb)) minmax(0, 1fr) auto; column-gap: 0; align-items: start; min-height: calc(64px * var(--eb)); }
.j-point { width: calc(9px * var(--eb)); height: calc(9px * var(--eb)); border-radius: 50%; background: #17895F; margin-top: calc(16px * var(--eb)); position: relative; z-index: 1; }
.journal .avatar { width: calc(36px * var(--eb)); height: calc(36px * var(--eb)); margin-left: calc(14px * var(--eb)); }
.j-reglages { display: flex; align-items: center; justify-content: center; background: #F2F4F6; color: var(--encre); }
.j-texte { padding: 0 calc(10px * var(--eb)) 0 calc(22px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); line-height: calc(17px * var(--et)); min-width: 0; }
.j-texte b { display: block; font-size: max(11px, calc(13px * var(--et))); color: #0E2E3A; font-weight: 600; margin-bottom: 1px; }
.j-date { text-align: right; font-size: max(11px, calc(12px * var(--et))); color: var(--encre-douce); line-height: calc(18px * var(--et)); white-space: nowrap; }
.bloc-ligne { display: grid; grid-template-columns: calc(40px * var(--eb)) minmax(0, 1fr) auto; column-gap: calc(14px * var(--eb)); align-items: center; min-height: calc(80px * var(--eb)); padding: calc(10px * var(--eb)) calc(14px * var(--eb)); }
.bloc-ligne > div { min-width: 0; }
.bloc-ligne h2 { font-size: max(11px, calc(15px * var(--et))); font-weight: 600; color: #0E2E3A; letter-spacing: -.2px; }
.bloc-ligne p { font-size: max(11px, calc(12px * var(--et))); color: var(--gris); line-height: calc(17px * var(--et)); margin-top: calc(3px * var(--eb)); }
.btn-telecharger { height: calc(36px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); font-weight: 500; padding: 0 calc(16px * var(--eb)); }
.bloc-danger { border: 1.5px solid #FFD9CB !important; background: #FFFDFC; }
.bloc-danger h2 { color: var(--alerte); font-size: max(11px, calc(15px * var(--et))); }
.btn-supprimer { height: calc(36px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); padding: 0 calc(14px * var(--eb)); font-weight: 500; }
.barre-enregistrer { position: fixed; left: calc(212px * var(--eb)); right: 0; bottom: 0; height: calc(52px * var(--eb)); z-index: 15; display: grid; grid-template-columns: calc(34px * var(--eb)) 1fr calc(222px * var(--eb)); column-gap: calc(20px * var(--eb)); align-items: center; padding: 0 calc(24px * var(--eb)) 0 calc(30px * var(--eb)); background: #FDFDFD; border-top: 1px solid #ECEAE6; }
.be-ic { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); border-radius: 50%; background: #E2F4EB; color: var(--baobab); display: flex; align-items: center; justify-content: center; }
.barre-enregistrer strong { display: block; font-size: max(11px, calc(13.5px * var(--et))); font-weight: 500; }
.barre-enregistrer small { font-size: max(11px, calc(11.5px * var(--et))); color: var(--gris); }
.barre-enregistrer.en-attente .be-ic { background: #FDEDE3; color: var(--cuivre); }
.btn-enregistrer { height: calc(42px * var(--eb)); background: #204644; color: #fff; font-size: max(11px, calc(15px * var(--et))); font-weight: 500; margin-top: calc(4px * var(--eb)); }
.bloc-membres { margin: calc(24px * var(--eb)) 0 0 calc(182px * var(--eb)); padding: calc(18px * var(--eb)); max-width: calc(760px * var(--eb)); }
.bloc-membres h2 { font-size: max(11px, calc(17px * var(--et))); }
.bloc-membres p { color: var(--gris); margin-top: calc(6px * var(--eb)); }
.membres-form { display: flex; gap: calc(12px * var(--eb)); margin-top: calc(14px * var(--eb)); }
.membres-form .champ { height: calc(40px * var(--eb)); }
.dialogue { border: 0; border-radius: var(--r-l); padding: calc(26px * var(--eb)); max-width: calc(460px * var(--eb)); box-shadow: 0 20px 60px rgba(16,33,58,.25); color: var(--encre); }
.dialogue::backdrop { background: rgba(16, 33, 58, .35); }
.dialogue h2 { font-size: max(11px, calc(20px * var(--et))); margin-bottom: calc(10px * var(--eb)); }
.dialogue p { color: var(--encre-douce); margin-bottom: calc(18px * var(--eb)); }
.dialogue .champ { height: calc(44px * var(--eb)); }
.dlg-actions { display: flex; justify-content: flex-end; gap: calc(10px * var(--eb)); margin-top: calc(16px * var(--eb)); }

/* =================== 02 — Tableau de bord =================== */
.lateral-a .marque-a { margin-bottom: calc(52px * var(--eb)); }
.lateral-a nav { gap: calc(6px * var(--eb)); }
.lateral-a .nav-item { height: calc(54px * var(--eb)); }
.lateral-a .nav-item + .nav-item { margin-top: 0; }
.profil-a summary { display: flex; align-items: center; gap: calc(10px * var(--eb)); list-style: none; cursor: pointer; }
.profil-a summary::-webkit-details-marker { display: none; }
.profil-a .menu-deroulant { top: calc(50px * var(--eb)); }
.salut { position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(10px * var(--eb)); }
/* 07/10 : tableau de bord aligné sur « Créer une palabre » (titre de page, sous-titre, boutons standard). */
.salut h1 { font-size: max(11px, calc(26px * var(--et))); font-weight: 700; letter-spacing: -.4px; line-height: 1.2; }
.salut p { font-size: max(11px, calc(14.5px * var(--et))); font-weight: 600; color: var(--cuivre); letter-spacing: 0; line-height: 1.35; margin-top: calc(4px * var(--eb)); }
.salut-actions { display: flex; gap: calc(10px * var(--eb)); margin-top: calc(4px * var(--eb)); margin-right: 0; }
.btn-xl { height: calc(42px * var(--eb)); font-size: max(11px, calc(14.5px * var(--et))); font-weight: 600; padding: 0 calc(18px * var(--eb)); border-radius: 12px; gap: calc(8px * var(--eb)); }
.salut-actions .btn-primaire { width: auto; background: #0B4A3C; }
.salut-actions .btn-secondaire { width: auto; border-color: #C9C4BB; }
.rejoindre-code { position: relative; }
.rejoindre-code summary { list-style: none; cursor: pointer; }
.rejoindre-code summary::-webkit-details-marker { display: none; }
.code-form { position: absolute; right: 0; top: calc(74px * var(--eb)); z-index: 10; width: calc(300px * var(--eb)); padding: calc(18px * var(--eb)); display: flex; flex-direction: column; gap: calc(10px * var(--eb)); box-shadow: var(--ombre); }
.tdb-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(300px * var(--eb))); column-gap: calc(16px * var(--eb)); margin-top: calc(16px * var(--eb)); max-width: calc(1240px * var(--eb)); }
.tdb-gauche, .tdb-droite { min-width: 0; }
.creer-rapide { height: auto; padding: calc(16px * var(--eb)) calc(18px * var(--eb)); background: #FDFAF5 url("../img/texture-feuilles.svg") no-repeat right -80px top -60px / 520px auto; display: flex; flex-direction: column; }
.cr-tete { display: flex; gap: calc(12px * var(--eb)); align-items: flex-start; padding-left: 0; }
.cr-tete h2 { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; letter-spacing: -.3px; line-height: 1.25; margin-top: 0; }
.cr-tete p { font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); margin-top: 2px; }
.cr-tete .ic { margin-top: calc(2px * var(--eb)); }
.cr-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(10px * var(--eb)); margin-top: calc(14px * var(--eb)); }
.cr-champs .champ { height: calc(42px * var(--eb)); padding: 0 calc(12px * var(--eb)) 0 calc(14px * var(--eb)); gap: calc(10px * var(--eb)); border-color: var(--contour); font-size: max(11px, calc(14.5px * var(--et))); }
.cr-champs .champ input, .cr-champs .champ select { font-size: max(11px, calc(14.5px * var(--et))); }
.cr-champs .champ .ic { color: var(--encre); }
.cr-btn { align-self: flex-end; margin-top: calc(12px * var(--eb)); height: calc(42px * var(--eb)); width: auto; font-size: max(11px, calc(14.5px * var(--et))); font-weight: 600; border-radius: 12px; background: #0B4A3C; gap: calc(8px * var(--eb)); }
.section-tete { display: flex; justify-content: space-between; align-items: center; }
.section-tete h2 { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; letter-spacing: -.3px; }
.section-tete a { display: inline-flex; align-items: center; gap: calc(6px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); font-weight: 500; }
.tdb-gauche > .section-tete { margin: calc(18px * var(--eb)) calc(4px * var(--eb)) 0 calc(4px * var(--eb)); height: calc(26px * var(--eb)); }
.modes-a { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(11px * var(--eb)); margin-top: calc(10px * var(--eb)); }
.mode-a { display: grid; grid-template-columns: calc(74px * var(--eb)) minmax(0,1fr) calc(20px * var(--eb)); column-gap: calc(14px * var(--eb)); align-items: center; height: calc(108px * var(--eb)); padding: 0 calc(12px * var(--eb)) 0 calc(16px * var(--eb)); background: #FDFAF5; }
.mode-a-ic { width: calc(74px * var(--eb)); height: calc(74px * var(--eb)); border-radius: 12px; background: #DEEBDF; display: flex; align-items: center; justify-content: center; color: var(--baobab); }
.mode-a-ic.cuivre { background: #FBE3D4; color: var(--cuivre); }
.mode-a-txt b { display: block; font-size: max(11px, calc(16.5px * var(--et))); font-weight: 600; letter-spacing: -.4px; }
.mode-a-txt small { display: block; font-size: max(11px, calc(13px * var(--et))); letter-spacing: -.1px; color: var(--encre-douce); line-height: calc(19px * var(--et)); margin-top: calc(6px * var(--eb)); white-space: pre-line; }
.a-venir { display: flex; flex-direction: column; gap: calc(10px * var(--eb)); margin-top: calc(12px * var(--eb)); }
.prochaine { position: relative; display: grid; grid-template-columns: calc(104px * var(--eb)) minmax(0, 1fr) auto auto calc(40px * var(--eb)); column-gap: 0; align-items: center; height: auto; min-height: calc(84px * var(--eb)); padding: calc(10px * var(--eb)) calc(12px * var(--eb)); background: #FDFAF5; }
.quand { width: calc(104px * var(--eb)); height: auto; border-radius: 10px; background: #F6EDE2; padding: calc(8px * var(--eb)) calc(10px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); line-height: 1.3; letter-spacing: 0; }
.quand .ic { color: var(--cuivre); margin-bottom: calc(2px * var(--eb)); }
.pro-corps { padding-left: calc(14px * var(--eb)); align-self: center; padding-top: 0; }
.pro-corps h3 { font-size: max(11px, calc(16px * var(--et))); font-weight: 600; letter-spacing: -.2px; }
.pile-avatars { display: flex; margin-top: calc(8px * var(--eb)); }
.pile-avatars img, .plus-n { width: calc(34px * var(--eb)); height: calc(34px * var(--eb)); border-radius: 50%; border: 2px solid #FDFAF5; object-fit: cover; margin-right: -2px; }
.plus-n { display: inline-flex; align-items: center; justify-content: center; background: #EEEAE3; font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); }
.pro-etat { align-self: stretch; border-left: 1px solid var(--contour); margin: calc(6px * var(--eb)) calc(12px * var(--eb)) calc(6px * var(--eb)) 0; padding-left: calc(14px * var(--eb)); display: flex; flex-direction: column; justify-content: center; gap: calc(8px * var(--eb)); }
.pro-etat .pastille { width: auto; height: calc(26px * var(--eb)); border-radius: 12px; font-size: max(11px, calc(12.5px * var(--et))); background: #EAF3EC; margin-top: -1px; }
.main-levee { color: var(--cuivre); margin-left: calc(8px * var(--eb)); }
.btn-rejoindre { width: auto; height: calc(42px * var(--eb)); background: #0B3F35; color: #fff; font-size: max(11px, calc(14.5px * var(--et))); font-weight: 600; border-radius: 10px; gap: calc(8px * var(--eb)); }
.pro-menu { position: static; }
.pro-menu .kebab { width: calc(36px * var(--eb)); height: calc(42px * var(--eb)); background: #F5EFE6; border: 0; margin-left: calc(8px * var(--eb)); }
.pro-menu .menu-deroulant { right: calc(12px * var(--eb)); top: calc(70px * var(--eb)); }
.tdb-droite { display: flex; flex-direction: column; gap: calc(12px * var(--eb)); margin-top: -1px; }
.calendrier { height: auto; padding: calc(14px * var(--eb)) calc(12px * var(--eb)) calc(12px * var(--eb)); background: #FDFAF5; }
.cal-tete { padding: 0 calc(4px * var(--eb)) 0 calc(6px * var(--eb)); }
.cal-tete h2 { font-size: max(11px, calc(16px * var(--et))); font-weight: 600; letter-spacing: -.4px; }
.cal-tete a { font-size: max(11px, calc(13px * var(--et))); font-weight: 400; }
.cal-carte { margin-top: calc(10px * var(--eb)); border: 1px solid var(--contour); border-radius: 10px; padding: calc(10px * var(--eb)) calc(4px * var(--eb)) calc(6px * var(--eb)); background: #FDFBF8; }
.cal-mois { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(12px * var(--eb)); font-size: max(11px, calc(15px * var(--et))); }
.cal-table { width: 100%; border-collapse: collapse; margin-top: calc(8px * var(--eb)); table-layout: fixed; }
.cal-table th { font-weight: 400; font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); height: calc(24px * var(--eb)); }
.cal-table abbr { text-decoration: none; }
.cal-table td { text-align: center; height: calc(32px * var(--eb)); position: relative; font-size: max(11px, calc(13.5px * var(--et))); vertical-align: middle; }
.jour { display: inline-flex; width: calc(28px * var(--eb)); height: calc(28px * var(--eb)); align-items: center; justify-content: center; border-radius: 50%; }
.jour.auj { background: #0B4438; color: #fff; font-weight: 600; }
.marque { position: absolute; left: 50%; bottom: -1px; width: calc(5px * var(--eb)); height: calc(5px * var(--eb)); border-radius: 50%; transform: translateX(-50%); background: #17895F; }
.marque.invite { background: var(--cuivre); }
.parole { height: auto; padding: calc(14px * var(--eb)) calc(16px * var(--eb)); background: #FDFAF5; }
.parole h2 { font-size: max(11px, calc(15px * var(--et))); font-weight: 600; letter-spacing: -.2px; }
.parole .section-tete .ic { color: var(--encre); }
.parole-corps { display: grid; grid-template-columns: calc(80px * var(--eb)) minmax(0, 1fr); column-gap: calc(16px * var(--eb)); margin-top: calc(12px * var(--eb)); align-items: start; }
.anneau { width: calc(80px * var(--eb)); height: calc(80px * var(--eb)); border-radius: 50%; background: conic-gradient(#1E7A5A calc(var(--pct) * 1%), #E3EDE7 0); display: flex; align-items: center; justify-content: center; position: relative; color: var(--baobab); }
.anneau::before { content: ""; position: absolute; inset: calc(11px * var(--eb)); border-radius: 50%; background: #FDFAF5; }
.anneau .ic { position: relative; }
.parole-corps b { font-size: max(11px, calc(26px * var(--et))); font-weight: 700; letter-spacing: -.5px; line-height: 1.15; display: block; margin-top: 2px; }
.parole-corps p { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); line-height: 1.4; }

/* =================== 01 — Accueil =================== */
.corps-accueil { background: #F9F6EF url("../img/texture-feuilles.svg") no-repeat left -120px top 60px / 1100px auto; }
.acc-entete { display: flex; align-items: center; gap: calc(24px * var(--eb)); height: calc(108px * var(--eb)); padding: 0 calc(42px * var(--eb)) 0 calc(78px * var(--eb)); }
.acc-marque { display: flex; align-items: center; gap: calc(16px * var(--eb)); }
.acc-marque img { height: calc(70px * var(--eb)); width: auto; }
.acc-marque span { font-size: max(11px, calc(27px * var(--et))); font-weight: 600; letter-spacing: 3.6px; color: #1C2A33; }
.acc-nav { display: flex; gap: clamp(calc(24px * var(--eb)), 3vw, calc(50px * var(--eb))); margin-left: clamp(calc(24px * var(--eb)), 5vw, calc(84px * var(--eb))); font-size: max(11px, calc(17.5px * var(--et))); font-weight: 500; }
.acc-nav a { display: inline-flex; align-items: center; gap: calc(10px * var(--eb)); }
.acc-boutons { margin-left: auto; display: flex; gap: calc(20px * var(--eb)); }
.acc-connexion { height: calc(52px * var(--eb)); width: calc(145px * var(--eb)); border-radius: 26px; border: 1px solid #A9B0B4; font-weight: 400; font-size: max(11px, calc(17px * var(--et))); background: transparent; }
.acc-creer { height: calc(52px * var(--eb)); width: calc(190px * var(--eb)); border-radius: 26px; background: #0E4A3D; color: #fff; font-size: max(11px, calc(17.5px * var(--et))); }
.heros { display: grid; grid-template-columns: minmax(0, calc(640px * var(--eb))) minmax(0, 1fr); column-gap: calc(8px * var(--eb)); padding: calc(15px * var(--eb)) calc(24px * var(--eb)) 0 calc(61px * var(--eb)); position: relative; }

.heros-texte { padding-top: calc(91px * var(--eb)); }
.heros h1 { font-size: max(11px, calc(87px * var(--et))); font-weight: 700; letter-spacing: -3.6px; line-height: calc(86px * var(--et)); color: #13213A; max-width: calc(600px * var(--eb)); }
.heros-devise { font-size: max(11px, calc(39px * var(--et))); font-weight: 600; color: #C4521F; letter-spacing: -.8px; margin-top: calc(10px * var(--eb)); line-height: calc(46px * var(--et)); }
.heros-intro { font-size: max(11px, calc(25.5px * var(--et))); color: #4E5865; line-height: calc(33px * var(--et)); margin-top: calc(22px * var(--eb)); letter-spacing: -.2px; }
.heros-actions { display: flex; gap: calc(20px * var(--eb)); margin-top: calc(34px * var(--eb)); }
.heros-cta { height: calc(63px * var(--eb)); width: calc(273px * var(--eb)); border-radius: 12px; background: #0E4A3D; color: #fff; font-size: max(11px, calc(22px * var(--et))); font-weight: 500; gap: calc(18px * var(--eb)); }
.heros-voir { height: calc(63px * var(--eb)); width: calc(291px * var(--eb)); border-radius: 12px; border: 1px solid #A9B0B4; background: transparent; font-size: max(11px, calc(18.5px * var(--et))); font-weight: 400; gap: calc(22px * var(--eb)); }
.heros-modes { list-style: none; display: flex; gap: calc(10px * var(--eb)); padding: 0; margin: calc(47px * var(--eb)) 0 0; }
.heros-modes li { display: inline-flex; align-items: center; gap: calc(14px * var(--eb)); height: calc(48px * var(--eb)); padding: 0 calc(22px * var(--eb)) 0 calc(18px * var(--eb)); border-radius: 24px; background: #FFFFFF; border: 1px solid var(--contour); font-size: max(11px, calc(16px * var(--et))); }
.maquette-salle { margin: 0 0 0 auto; width: calc(836px * var(--eb)); max-width: none; height: calc(626px * var(--eb)); border-radius: 26px; background: #FAF7F2; box-shadow: 0 18px 50px rgba(45, 38, 24, .10), 0 2px 6px rgba(45, 38, 24, .06); padding: 0 calc(10px * var(--eb)) 0 calc(17px * var(--eb)); overflow: hidden; }
.ms-barre { display: flex; align-items: center; height: calc(66px * var(--eb)); padding-left: calc(4px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); }
.ms-marque { display: flex; align-items: center; gap: calc(10px * var(--eb)); font-weight: 600; letter-spacing: 1.8px; font-size: max(11px, calc(14.5px * var(--et))); padding-right: calc(20px * var(--eb)); border-right: 1px solid #DEDAD3; }
.ms-marque img { height: calc(32px * var(--eb)); width: auto; }
.ms-titre { display: inline-flex; align-items: center; gap: calc(10px * var(--eb)); padding-left: calc(22px * var(--eb)); font-size: max(11px, calc(14.5px * var(--et))); }
.ms-reseau { margin-left: auto; display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(34px * var(--eb)); padding: 0 calc(12px * var(--eb)); border-radius: 10px; background: #F1EEE8; font-size: max(11px, calc(12.5px * var(--et))); }
.ms-deplacer { margin: 0 calc(24px * var(--eb)) 0 calc(32px * var(--eb)); color: #8A93A0; }
.ms-corps { display: grid; grid-template-columns: calc(578px * var(--eb)) calc(222px * var(--eb)); column-gap: calc(9px * var(--eb)); }
.ms-tuiles { display: grid; grid-template-columns: repeat(3, calc(187px * var(--eb))); gap: calc(6px * var(--eb)) calc(5px * var(--eb)); }
.ms-tuiles img { width: calc(187px * var(--eb)); height: calc(150px * var(--eb)); object-fit: cover; border-radius: 7px; }
.ms-tuiles img:nth-child(n+7) { height: calc(155px * var(--eb)); }
.ms-commandes { display: flex; align-items: center; justify-content: space-between; height: calc(56px * var(--eb)); margin-top: calc(11px * var(--eb)); padding: 0 calc(28px * var(--eb)) 0 calc(32px * var(--eb)); background: #181F23; border-radius: 12px; color: #fff; }
.ms-raccrocher { width: calc(58px * var(--eb)); height: calc(38px * var(--eb)); border-radius: 9px; background: #D44538; display: inline-flex; align-items: center; justify-content: center; }
.ms-cote { font-size: max(11px, calc(12.5px * var(--et))); padding: 0 calc(6px * var(--eb)); }
.ms-onglets { display: flex; justify-content: space-between; padding: calc(6px * var(--eb)) calc(8px * var(--eb)) 0 calc(12px * var(--eb)); height: calc(46px * var(--eb)); border-bottom: 1px solid #E6E2DB; }
.ms-onglets span { padding-top: calc(14px * var(--eb)); }
.ms-onglets .actif { font-weight: 600; color: #0E4A3D; border-bottom: 2px solid #0E4A3D; padding: calc(14px * var(--eb)) calc(16px * var(--eb)) 0; margin-left: calc(-12px * var(--eb)); }
.ms-recherche { display: flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(32px * var(--eb)); margin-top: calc(14px * var(--eb)); padding: 0 calc(12px * var(--eb)); background: #F1EEE8; border-radius: 8px; font-size: max(11px, calc(11px * var(--et))); color: #6B7480; }
.ms-groupe { margin: calc(18px * var(--eb)) 0 calc(8px * var(--eb)) 2px; color: #4E5865; }
.ms-p { display: grid; grid-template-columns: calc(32px * var(--eb)) 1fr calc(20px * var(--eb)) calc(18px * var(--eb)); column-gap: calc(14px * var(--eb)); align-items: center; height: calc(38px * var(--eb)); padding-left: 2px; color: #4E5865; }
.ms-p img { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); border-radius: 50%; }
.ms-p span { grid-column: 2; }
.ms-p b { font-weight: 500; color: var(--encre); font-size: max(11px, calc(13px * var(--et))); }
.ms-p small { display: block; font-size: max(11px, calc(9.5px * var(--et))); color: #8A93A0; }
.ms-p .ic:last-child { grid-column: 4; }
.ms-main { grid-column: 3; color: var(--cuivre); }
.ms-couronne { grid-column: 4; color: #E9A12B; }
.ms-demander { display: flex; align-items: center; gap: calc(10px * var(--eb)); height: calc(38px * var(--eb)); margin-top: calc(18px * var(--eb)); padding: 0 calc(14px * var(--eb)); border: 1px solid #C9C4BB; border-radius: 10px; font-size: max(11px, calc(12px * var(--et))); }
.ms-demander .ic:last-child { margin-left: auto; }
.atouts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(63px * var(--eb)); border-top: 1px solid #EAE3D7; padding: calc(44px * var(--eb)) calc(60px * var(--eb)) calc(40px * var(--eb)) calc(61px * var(--eb)); column-gap: 0; background: rgba(250, 248, 243, .7); }
.atout { display: grid; grid-template-columns: calc(77px * var(--eb)) 1fr; column-gap: calc(34px * var(--eb)); align-items: start; padding-right: calc(30px * var(--eb)); }
.atout + .atout { padding-left: calc(54px * var(--eb)); border-left: 1px solid #E5DFD4; }
.atout-ic { width: calc(77px * var(--eb)); height: calc(80px * var(--eb)); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.atout-ic::after { content: ""; position: absolute; right: calc(-18px * var(--eb)); top: 0; bottom: 0; width: 1px; background: #E5DFD4; }
.atout-ic.menthe { background: #DEE9DD; color: var(--baobab); }
.atout-ic.cuivre { background: #FBE2D3; color: #BE5121; }
.atout-ic.sable { background: #F4E7D0; color: #A26D13; }
.atout h2 { font-size: max(11px, calc(21.5px * var(--et))); font-weight: 500; letter-spacing: -.3px; margin-top: calc(8px * var(--eb)); color: #13213A; }
.atout p { font-size: max(11px, calc(14.5px * var(--et))); color: #8A93A0; line-height: calc(20px * var(--et)); margin-top: calc(10px * var(--eb)); max-width: calc(310px * var(--eb)); }

/* Aperçu de salle : mis à l'échelle (proportions de la maquette 01 conservées) pour ne jamais déborder. */
@media (max-width: 1599px) { .maquette-salle { zoom: .84; } }
@media (max-width: 1439px) { .maquette-salle { zoom: .74; } .heros h1 { font-size: max(11px, calc(78px * var(--et))); line-height: calc(78px * var(--et)); } .heros-intro { font-size: max(11px, calc(22px * var(--et))); line-height: calc(30px * var(--et)); } }
@media (max-width: 1279px) { .heros { grid-template-columns: minmax(0, 1fr); } .maquette-salle { margin: calc(32px * var(--eb)) 0 0; } }

/* =================== 11 — Système d'interface =================== */
/* Présentation « corporate » : sections en lignes pleine largeur rétractables (accordéon). */
.corps-systeme { background: #FDFCF8; }
.sys-entete { display: flex; align-items: center; gap: calc(16px * var(--eb)); flex-wrap: wrap; padding: calc(16px * var(--eb)) calc(32px * var(--eb)); border-bottom: 1px solid var(--contour); background: #fff; }
.sys-marque { display: flex; align-items: center; gap: calc(10px * var(--eb)); }
.sys-marque img { height: calc(40px * var(--eb)); width: auto; }
.sys-marque b { display: block; font-size: max(11px, calc(16px * var(--et))); font-weight: 600; letter-spacing: 2px; line-height: calc(20px * var(--et)); color: var(--encre); }
.sys-marque small { display: block; font-size: max(11px, calc(12px * var(--et))); color: var(--encre-douce); }
.sys-sep { width: 1px; height: calc(32px * var(--eb)); background: var(--contour); }
.sys-entete h1 { font-size: max(11px, calc(20px * var(--et))); font-weight: 700; letter-spacing: -.2px; }
.sys-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: calc(4px * var(--eb)) calc(14px * var(--eb)); font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); }
.sys-nav a:hover { color: var(--baobab); text-decoration: underline; }
.sys-page { max-width: calc(1240px * var(--eb)); margin: 0 auto; padding: calc(20px * var(--eb)) calc(32px * var(--eb)) calc(40px * var(--eb)); }
.sys-outils { display: flex; justify-content: space-between; align-items: center; gap: calc(12px * var(--eb)); margin-bottom: calc(12px * var(--eb)); }
.sys-outils p { font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); }
.sys-outils div { display: flex; gap: calc(8px * var(--eb)); }
.sys-section { background: #fff; border: 1px solid var(--contour); border-radius: var(--r); margin-bottom: calc(10px * var(--eb)); scroll-margin-top: 16px; }
.sys-section > h2 { margin: 0; }
.sys-bascule { width: 100%; display: grid; grid-template-columns: calc(36px * var(--eb)) minmax(0, 1fr) calc(24px * var(--eb)); align-items: center; column-gap: calc(12px * var(--eb)); padding: calc(14px * var(--eb)) calc(18px * var(--eb)); text-align: left; border-radius: var(--r); }
.sys-bascule:hover { background: #F6F8F7; }
.sys-num { width: calc(30px * var(--eb)); height: calc(30px * var(--eb)); border-radius: 50%; border: 1px solid var(--contour); display: inline-flex; align-items: center; justify-content: center; font-size: max(11px, calc(13px * var(--et))); font-weight: 700; color: var(--baobab); background: var(--menthe-pale); }
.sys-titres { display: flex; align-items: baseline; gap: calc(12px * var(--eb)); flex-wrap: wrap; min-width: 0; }
.sys-titre { font-size: max(11px, calc(19px * var(--et))); font-weight: 700; letter-spacing: -.2px; color: var(--encre); }
.sys-sous { font-size: max(11px, calc(14px * var(--et))); font-weight: 400; color: var(--encre-douce); }
.sys-chevron { color: var(--encre); transition: transform .2s; }
.sys-bascule[aria-expanded="true"] .sys-chevron { transform: rotate(180deg); }
.sys-bascule[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sys-corps { border-top: 1px solid var(--contour); padding: calc(4px * var(--eb)) calc(18px * var(--eb)) calc(14px * var(--eb)); }
.sys-corps[hidden] { display: none; }
.sys-rangee { display: grid; grid-template-columns: calc(200px * var(--eb)) minmax(0, 1fr); column-gap: calc(20px * var(--eb)); align-items: center; padding: calc(14px * var(--eb)) 0; }
.sys-rangee + .sys-rangee { border-top: 1px solid #E6EAE7; }
.sys-rangee > h3 { font-size: max(11px, calc(14px * var(--et))); font-weight: 600; margin: 0; }
.sys-rangee > h3 small { display: block; font-size: max(11px, calc(12.5px * var(--et))); font-weight: 400; color: var(--gris); margin-top: 2px; }
.sys-cellules { display: flex; flex-wrap: wrap; gap: calc(10px * var(--eb)); align-items: center; min-width: 0; }
.sys-boite { border: 1px solid var(--contour); border-radius: var(--r); background: #fff; padding: calc(10px * var(--eb)) calc(12px * var(--eb)); }
.nuancier { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(10px * var(--eb)); }
.nuancier li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.nuancier li .pastille-couleur { margin-bottom: calc(6px * var(--eb)); }
.pastille-couleur { width: calc(36px * var(--eb)); height: calc(36px * var(--eb)); border-radius: 50%; border: 1px solid var(--contour); }
.nuancier b { font-size: max(11px, calc(14px * var(--et))); font-weight: 600; }
.nuancier code { font-family: inherit; font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); }
.nuancier small { font-size: max(11px, calc(12px * var(--et))); color: var(--gris); }
.typo-ech { margin: 0; color: var(--encre); }
.typo-ech i { color: var(--cuivre); font-style: normal; }
.t-page { font-size: max(11px, calc(26px * var(--et))); font-weight: 700; letter-spacing: -.4px; line-height: calc(32px * var(--et)); }
.t-section { font-size: max(11px, calc(19px * var(--et))); font-weight: 700; letter-spacing: -.2px; line-height: calc(24px * var(--et)); }
.t-corps { font-size: max(11px, calc(14.5px * var(--et))); line-height: calc(21px * var(--et)); }
.t-legende { font-size: max(11px, calc(12.5px * var(--et))); line-height: calc(17px * var(--et)); color: var(--encre-douce); }
.aa { display: flex; align-items: center; gap: calc(14px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); background: var(--menthe-pale); }
.aa b { font-size: max(11px, calc(22px * var(--et))); font-weight: 700; color: var(--baobab); padding-right: calc(14px * var(--eb)); border-right: 1px solid var(--contour); }
.boutons-demo { display: flex; flex-wrap: wrap; gap: calc(10px * var(--eb)) calc(22px * var(--eb)); }
.boutons-demo figure { margin: 0; display: flex; flex-direction: column; gap: calc(6px * var(--eb)); align-items: flex-start; }
.boutons-demo figcaption { font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); }
.boutons-demo figcaption b { color: var(--encre); font-weight: 600; margin-right: calc(4px * var(--eb)); }
.btn-contour-vert { background: #fff; border: 1px solid #0B5A46; color: #0B5A46; }
.interrupteurs { display: flex; gap: calc(22px * var(--eb)); }
.interrupteurs label { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); color: var(--gris); }
.chip-role { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(30px * var(--eb)); padding: 0 calc(14px * var(--eb)); border-radius: 12px; background: #E4F5EC; border: 1px solid var(--contour); font-size: max(11px, calc(13.5px * var(--et))); font-weight: 600; color: var(--baobab); }
.onglets-mode { display: inline-flex; height: calc(36px * var(--eb)); border: 1px solid var(--contour); border-radius: 10px; overflow: hidden; font-size: max(11px, calc(13px * var(--et))); }
.onglets-mode span { display: flex; align-items: center; gap: calc(6px * var(--eb)); padding: 0 calc(14px * var(--eb)); }
.onglets-mode span + span { border-left: 1px solid var(--contour); }
.onglets-mode .actif { background: #0E4A3D; color: #fff; }
.qualites { display: flex; flex-wrap: wrap; gap: calc(10px * var(--eb)); }
.qualites span { display: inline-flex; align-items: center; gap: calc(8px * var(--eb)); height: calc(30px * var(--eb)); padding: 0 calc(12px * var(--eb)); border-radius: 12px; border: 1px solid var(--contour); font-size: max(11px, calc(13px * var(--et))); white-space: nowrap; }
.q-excellent { background: #E4F5EC; } .q-excellent .ic { color: #17895F; }
.q-faible { background: #FDECE2; color: var(--cuivre); }
.q-audio { background: #EEF0F3; } .q-audio .ic { color: #17895F; }
.compacts { display: flex; gap: calc(8px * var(--eb)); }
.ini { width: calc(34px * var(--eb)); height: calc(34px * var(--eb)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: max(11px, calc(12px * var(--et))); font-weight: 600; border: 1px solid var(--contour); }
.ini.actif { background: #0E5A47; color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #0E5A47; }
.ini.ma { background: #E6E6F6; color: #2C2E7A; } .ini.jb { background: #F8E9DC; color: #A26D3C; } .ini.cm { background: #DDF2E8; color: #0B5A46; } .ini.lt { background: #FCE9DE; color: #B14A1E; }
.ini.cm2 { background: #E4F5EC; color: #0B5A46; }
.ini.plus { background: #fff; color: var(--encre); }
.perms { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: calc(10px * var(--eb)); }
.perms li { display: grid; grid-template-columns: calc(32px * var(--eb)) auto calc(32px * var(--eb)); column-gap: calc(8px * var(--eb)); align-items: center; }
.perm-rond { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); border-radius: 50%; background: #0E4A3D; color: #fff; display: flex; align-items: center; justify-content: center; }
.perm-rond.off { background: #E3E5EA; color: #6B7480; }
.perms b { font-size: max(11px, calc(13px * var(--et))); font-weight: 600; display: block; }
.perms small { font-size: max(11px, calc(12px * var(--et))); color: var(--gris); display: flex; align-items: center; gap: calc(5px * var(--eb)); }
.perms small i { width: calc(7px * var(--eb)); height: calc(7px * var(--eb)); border-radius: 50%; background: #17895F; }
.main-levee-demo { display: flex; align-items: center; gap: calc(12px * var(--eb)); }
.main-rond { position: relative; width: calc(36px * var(--eb)); height: calc(36px * var(--eb)); border-radius: 50%; background: #F5C843; color: #6B4A00; display: flex; align-items: center; justify-content: center; }
.main-rond em { position: absolute; top: calc(-5px * var(--eb)); right: calc(-5px * var(--eb)); width: calc(16px * var(--eb)); height: calc(16px * var(--eb)); border-radius: 50%; background: #F2C230; border: 2px solid #fff; font-style: normal; font-size: max(11px, calc(10px * var(--et))); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.main-levee-demo b { font-size: max(11px, calc(13px * var(--et))); font-weight: 600; display: block; }
.main-levee-demo small { font-size: max(11px, calc(12px * var(--et))); color: var(--gris); }
.carte-evt { display: grid; grid-template-columns: calc(34px * var(--eb)) minmax(0, 1fr) calc(16px * var(--eb)); column-gap: calc(10px * var(--eb)); align-items: center; min-width: calc(240px * var(--eb)); }
.carte-evt:hover { border-color: var(--baobab); }
.ce-ic { width: calc(34px * var(--eb)); height: calc(34px * var(--eb)); border-radius: 8px; background: #E4F5EC; color: var(--baobab); display: flex; align-items: center; justify-content: center; }
.carte-evt b, .notif-demo b, .vide-demo b { display: block; font-size: max(11px, calc(13.5px * var(--et))); font-weight: 600; }
.carte-evt small, .notif-demo small, .vide-demo small { display: block; font-size: max(11px, calc(12px * var(--et))); color: var(--gris); }
.notif-demo { display: flex; align-items: center; gap: calc(10px * var(--eb)); background: #E3F8EE; }
.notif-demo .ic { color: #17895F; }
.vide-demo { display: flex; align-items: center; gap: calc(10px * var(--eb)); }
.vd-ic { position: relative; width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); border-radius: 50%; background: #FDECE2; color: var(--cuivre); display: flex; align-items: center; justify-content: center; }
.cellule-agenda { width: calc(64px * var(--eb)); height: calc(58px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cellule-agenda small { font-size: max(11px, calc(11.5px * var(--et))); }
.cellule-agenda b { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; color: var(--baobab); line-height: calc(22px * var(--et)); }
.cellule-agenda i { width: calc(6px * var(--eb)); height: calc(6px * var(--eb)); border-radius: 50%; background: #17895F; margin-top: 2px; }
.compacts.petits .ini { width: calc(28px * var(--eb)); height: calc(28px * var(--eb)); font-size: max(11px, calc(10.5px * var(--et))); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--contour); }
.compacts.petits { gap: 0; }
.compacts.petits .ini + .ini { margin-left: calc(-4px * var(--eb)); }
.champs-demo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12px * var(--eb)); width: 100%; }
.champs-demo small { font-size: max(11px, calc(12px * var(--et))); color: var(--gris); display: block; margin-bottom: calc(4px * var(--eb)); }
.champs-demo .champ { height: calc(36px * var(--eb)); padding: 0 calc(10px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); }
.champ.focus { border-color: #0E4A3D; box-shadow: 0 0 0 3px rgba(11, 90, 70, .12); }
.champ.succes { border-color: #5DB28E; } .champ.succes .ic { color: #17895F; }
.champ.erreur { border-color: var(--alerte); color: var(--alerte); } .champ.erreur .ic { color: var(--alerte); } .champ.erreur input { color: var(--alerte); }
.sys-retour { font-size: max(11px, calc(13.5px * var(--et))); }
@media (max-width: 1100px) { .nuancier { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sys-rangee { grid-template-columns: minmax(0, 1fr); row-gap: calc(8px * var(--eb)); } .champs-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lien-form { display: flex; flex-direction: column; gap: calc(10px * var(--eb)); margin-top: calc(18px * var(--eb)); } .lien-form .champ { height: calc(46px * var(--eb)); }

/* =================== Pages de liste : Participants (carnet), Enregistrements, Statistiques =================== */
.ecran-liste { padding-top: calc(16px * var(--eb)); }
.page-liste { max-width: calc(1240px * var(--eb)); display: flex; flex-direction: column; gap: calc(12px * var(--eb)); }
.liste-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(16px * var(--eb)); }
.page-liste .filtres { margin-top: 0; }
.page-liste .filtre-actif { margin-top: 0; align-self: flex-start; }
.liste-resume { font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); }
.texte-discret { font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); }
.btn-petit { height: calc(32px * var(--eb)); padding: 0 calc(12px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); font-weight: 600; }
.lien-sobre { display: block; font-weight: 600; color: var(--encre); }
.lien-sobre:hover { text-decoration: underline; }
.table-liste { overflow: visible; }
.table-liste table { width: 100%; border-collapse: collapse; font-size: max(11px, calc(13.5px * var(--et))); }
.table-liste th { text-align: left; font-size: max(11px, calc(12px * var(--et))); font-weight: 600; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .4px; padding: calc(10px * var(--eb)) calc(14px * var(--eb)); background: #F6F8F7; border-bottom: 1px solid var(--contour); }
.table-liste th:first-child { border-top-left-radius: var(--r); }
.table-liste th:last-child { border-top-right-radius: var(--r); }
.table-liste td { padding: calc(10px * var(--eb)) calc(14px * var(--eb)); border-bottom: 1px solid #E6EAE7; vertical-align: middle; }
.table-liste tr:last-child td { border-bottom: 0; }
.table-liste td small { display: block; font-size: max(11px, calc(12px * var(--et))); color: var(--gris); margin-top: 2px; }
.table-liste td b { font-weight: 600; }
.table-liste .num { text-align: right; white-space: nowrap; }
.table-liste .col-action { text-align: right; white-space: nowrap; width: 1%; }
.table-liste .pastille { height: calc(24px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); padding: 0 calc(10px * var(--eb)); }
.table-liste .ligne-mode { display: flex; font-size: max(11px, calc(12px * var(--et))); gap: calc(6px * var(--eb)); }
.table-liste .personne-cell { gap: calc(10px * var(--eb)); }
.table-liste .personne-cell .avatar { width: calc(32px * var(--eb)); height: calc(32px * var(--eb)); font-size: max(11px, calc(12px * var(--et))); }
.table-liste .personne-cell b { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre); }
.table-liste .personne-cell a { font-size: max(11px, calc(12.5px * var(--et))); color: var(--encre-douce); }
.table-liste .personne-cell a:hover { text-decoration: underline; }
.table-liste .vide { padding: calc(28px * var(--eb)); text-align: center; color: var(--gris); }
.table-liste .menu-ligne summary { width: auto; height: calc(32px * var(--eb)); }
.table-liste .menu-ligne .menu-deroulant { top: calc(38px * var(--eb)); min-width: calc(260px * var(--eb)); text-align: left; }
.menu-deroulant a small { display: block; font-size: max(11px, calc(12px * var(--et))); color: var(--gris); }
.etat-vide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(8px * var(--eb)); padding: calc(36px * var(--eb)) calc(24px * var(--eb)); }
.etat-vide b { font-size: max(11px, calc(16px * var(--et))); }
.etat-vide p { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); max-width: calc(520px * var(--eb)); line-height: calc(20px * var(--et)); }
.etat-vide .btn { margin-top: calc(6px * var(--eb)); }
.ev-ic { width: calc(44px * var(--eb)); height: calc(44px * var(--eb)); border-radius: 50%; background: var(--menthe); color: var(--baobab); display: flex; align-items: center; justify-content: center; border: 1px solid var(--contour); }
.ev-alerte { background: var(--alerte-pale); color: var(--alerte); }
/* Indicateurs : UNE ligne en flex (jamais de grille auto-fit), chaque indicateur est un lien. */
.indicateurs { list-style: none; margin: 0; padding: 0; display: flex; gap: calc(12px * var(--eb)); }
.indicateurs li { flex: 1 1 0; min-width: 0; display: flex; }
.indicateur { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4px * var(--eb)); padding: calc(14px * var(--eb)) calc(16px * var(--eb)); transition: border-color .15s, box-shadow .15s; }
.indicateur:hover, .indicateur:focus-visible { border-color: var(--baobab); box-shadow: 0 0 0 3px rgba(11, 90, 70, .10); }
.ind-tete { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); font-weight: 600; color: var(--encre-douce); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-tete .ic { color: var(--baobab); }
.indicateur b { font-size: max(11px, calc(26px * var(--et))); font-weight: 700; letter-spacing: -.4px; line-height: calc(32px * var(--et)); color: var(--encre); }
.indicateur small { font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); line-height: calc(17px * var(--et)); }
.ind-lien { margin-top: auto; padding-top: calc(6px * var(--eb)); display: inline-flex; align-items: center; gap: calc(6px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); font-weight: 600; color: #1763C6; text-decoration: underline; text-underline-offset: 3px; }
.graphe { padding: calc(14px * var(--eb)) calc(16px * var(--eb)) calc(12px * var(--eb)); }
.graphe-tete { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12px * var(--eb)); }
.graphe-tete h2 { font-size: max(11px, calc(16px * var(--et))); font-weight: 700; }
.barres { display: flex; align-items: stretch; gap: calc(8px * var(--eb)); height: calc(200px * var(--eb)); margin-top: calc(12px * var(--eb)); padding-top: calc(4px * var(--eb)); border-bottom: 1px solid var(--contour); }
.barre { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.barre-val { font-size: max(11px, calc(12px * var(--et))); font-weight: 600; height: calc(16px * var(--eb)); }
.barre-col { flex: 1; width: 100%; max-width: calc(44px * var(--eb)); display: flex; align-items: flex-end; }
.barre-col i { display: block; width: 100%; min-height: 2px; background: var(--baobab); border-radius: 4px 4px 0 0; }
.barre-lib { font-size: max(11px, calc(11.5px * var(--et))); color: var(--gris); height: calc(18px * var(--eb)); margin-bottom: calc(-22px * var(--eb)); white-space: nowrap; }
.graphe .barres { margin-bottom: calc(26px * var(--eb)); }

/* =================== Pages publiques : Solutions, Pour qui ?, Sécurité, Tarifs =================== */
.acc-nav a.actif { color: var(--baobab); text-decoration: underline; text-underline-offset: 6px; }
.vitrine { max-width: calc(1040px * var(--eb)); margin: 0 auto; padding: calc(32px * var(--eb)) calc(24px * var(--eb)) calc(56px * var(--eb)); }
.vitrine-tete h1 { font-size: max(11px, calc(36px * var(--et))); font-weight: 700; letter-spacing: -.8px; color: #13213A; }
.vitrine-tete p { font-size: max(11px, calc(17px * var(--et))); color: #4E5865; margin-top: calc(8px * var(--eb)); line-height: calc(25px * var(--et)); max-width: calc(720px * var(--eb)); }
.vitrine-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14px * var(--eb)); margin-top: calc(28px * var(--eb)); }
.vitrine-cartes.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vitrine-carte { background: #fff; border: 1px solid var(--contour); border-radius: var(--r); padding: calc(18px * var(--eb)) calc(20px * var(--eb)); }
.vitrine-carte h2 { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; color: var(--baobab); }
.vitrine-carte p, .vitrine-carte li { font-size: max(11px, calc(14.5px * var(--et))); color: var(--encre-douce); line-height: calc(21px * var(--et)); }
.vitrine-carte p { margin-top: calc(8px * var(--eb)); }
.vitrine-carte ul { margin: calc(10px * var(--eb)) 0 0; padding-left: calc(18px * var(--eb)); display: grid; gap: calc(6px * var(--eb)); }
.vitrine-liste { list-style: none; margin: calc(28px * var(--eb)) 0 0; padding: 0; display: grid; gap: calc(10px * var(--eb)); }
.vitrine-liste li { background: #fff; border: 1px solid var(--contour); border-radius: var(--r); padding: calc(14px * var(--eb)) calc(18px * var(--eb)); font-size: max(11px, calc(15px * var(--et))); color: var(--encre-douce); }
.vitrine-liste b { color: var(--encre); }
.vitrine-note { margin-top: calc(20px * var(--eb)); font-size: max(11px, calc(14.5px * var(--et))); color: var(--encre-douce); }
.vitrine-appel { display: flex; align-items: center; justify-content: space-between; gap: calc(16px * var(--eb)); flex-wrap: wrap; margin-top: calc(32px * var(--eb)); padding: calc(18px * var(--eb)) calc(20px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: var(--menthe-pale); font-size: max(11px, calc(15px * var(--et))); font-weight: 600; }
.vitrine-appel .btn { height: calc(44px * var(--eb)); width: auto; padding: 0 calc(22px * var(--eb)); }
/* =================== Pied de page corporate (08/10/2026) =================== */
/* Structure du portefeuille : marque · 3 colonnes de liens · bandeau éditeur. Grilles en minmax(0,1fr) : aucun débordement. */
.pied-corporate { background: var(--foret); color: #E7EFEA; font-size: max(12px, calc(14px * var(--et))); }
.pied-haut { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: calc(28px * var(--eb)) calc(36px * var(--eb)); max-width: calc(1240px * var(--eb)); margin: 0 auto; padding: calc(44px * var(--eb)) calc(40px * var(--eb)) calc(32px * var(--eb)); }
.pied-logo { display: inline-flex; align-items: center; gap: calc(10px * var(--eb)); color: #fff; font-weight: 800; letter-spacing: 1.5px; font-size: max(12px, calc(17px * var(--et))); text-decoration: none; }
.pied-logo img { width: calc(40px * var(--eb)); height: auto; }
.pied-devise { margin-top: calc(14px * var(--eb)); color: #fff; font-weight: 600; }
.pied-texte { margin-top: calc(6px * var(--eb)); color: #C9D8D0; line-height: 1.55; max-width: calc(340px * var(--eb)); }
.pied-col { display: flex; flex-direction: column; gap: calc(9px * var(--eb)); min-width: 0; }
.pied-col h2 { font-size: max(12px, calc(13px * var(--et))); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #F2B48F; margin-bottom: calc(4px * var(--eb)); }
.pied-col a { color: #F3F7F4; text-decoration: underline; text-decoration-color: rgba(243, 247, 244, .35); text-underline-offset: 3px; overflow-wrap: anywhere; }
.pied-col a:hover, .pied-col a:focus-visible { text-decoration-color: currentColor; color: #fff; }
.pied-bas { display: flex; justify-content: space-between; gap: calc(8px * var(--eb)) calc(24px * var(--eb)); flex-wrap: wrap; max-width: calc(1240px * var(--eb)); margin: 0 auto; padding: calc(16px * var(--eb)) calc(40px * var(--eb)) calc(22px * var(--eb)); border-top: 1px solid rgba(255, 255, 255, .14); color: #C9D8D0; font-size: max(12px, calc(13px * var(--et))); }
@media (max-width: 900px) {
  .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: calc(24px * var(--eb)); padding-right: calc(24px * var(--eb)); }
  .pied-marque { grid-column: 1 / -1; }
  .pied-bas { padding-left: calc(24px * var(--eb)); padding-right: calc(24px * var(--eb)); }
}
@media (max-width: 560px) {
  .pied-haut { grid-template-columns: minmax(0, 1fr); padding: calc(32px * var(--eb)) 16px calc(24px * var(--eb)); }
  .pied-bas { flex-direction: column; padding-left: 16px; padding-right: 16px; }
}
/* Pages connectées : une ligne discrète en bas du contenu. */
.pied-discret { display: flex; justify-content: space-between; align-items: center; gap: calc(6px * var(--eb)) calc(18px * var(--eb)); flex-wrap: wrap; margin-top: calc(28px * var(--eb)); padding-top: calc(14px * var(--eb)); border-top: 1px solid var(--trait); font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); }
.pied-discret nav { display: flex; flex-wrap: wrap; gap: calc(4px * var(--eb)) calc(14px * var(--eb)); min-width: 0; }
.pied-discret a { color: #1763C6; text-decoration: underline; text-underline-offset: 3px; }

/* =================== Pages légales et plan du site =================== */
.fil-ariane { font-size: max(11px, calc(13.5px * var(--et))); color: var(--gris); margin-bottom: calc(10px * var(--eb)); }
.fil-ariane a { color: #1763C6; text-decoration: underline; text-underline-offset: 3px; }
.legal-nav { display: flex; flex-wrap: wrap; gap: calc(8px * var(--eb)); margin-top: calc(24px * var(--eb)); }
.legal-nav a { padding: calc(7px * var(--eb)) calc(12px * var(--eb)); border: 1px solid var(--contour); border-radius: 999px; background: #fff; color: #1763C6; text-decoration: underline; text-underline-offset: 3px; font-size: max(11px, calc(13.5px * var(--et))); }
.legal-nav a.actif { background: var(--baobab); border-color: var(--baobab); color: #fff; text-decoration: none; font-weight: 600; }
.legal-date { margin-top: calc(12px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); color: var(--gris); }
.legal { margin-top: calc(18px * var(--eb)); background: #fff; border: 1px solid var(--contour); border-radius: var(--r); padding: calc(22px * var(--eb)) calc(26px * var(--eb)); color: var(--encre-douce); font-size: max(12px, calc(15px * var(--et))); line-height: 1.6; min-width: 0; }
.legal h2 { font-size: max(12px, calc(19px * var(--et))); font-weight: 700; color: var(--baobab); margin-top: calc(22px * var(--eb)); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul, .tableau-legal { margin-top: calc(8px * var(--eb)); }
.legal ul { padding-left: calc(20px * var(--eb)); display: grid; gap: calc(4px * var(--eb)); }
.legal b { color: var(--encre); }
.a-completer { display: inline-block; padding: 0 calc(8px * var(--eb)); border: 1px dashed var(--cuivre); border-radius: 6px; background: var(--cuivre-pale); color: var(--cuivre-fonce); font-weight: 700; }
.tableau-legal { overflow-x: auto; max-width: 100%; }
.tableau-legal table { width: 100%; border-collapse: collapse; border: 1px solid #8FA39A; font-size: max(11px, calc(14px * var(--et))); }
.tableau-legal caption { text-align: left; font-weight: 600; color: var(--encre); padding-bottom: calc(6px * var(--eb)); }
.tableau-legal th, .tableau-legal td { border: 1px solid #8FA39A; padding: calc(8px * var(--eb)) calc(10px * var(--eb)); text-align: left; vertical-align: top; }
.tableau-legal thead th { background: var(--menthe-pale); color: var(--encre); }
.tableau-legal tbody th { font-weight: 600; color: var(--encre); }
.plan-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16px * var(--eb)); margin-top: calc(18px * var(--eb)); }
.plan-rubrique { background: #fff; border: 1px solid var(--contour); border-radius: var(--r); padding: calc(18px * var(--eb)) calc(22px * var(--eb)); min-width: 0; }
.plan-rubrique h2 { font-size: max(12px, calc(18px * var(--et))); font-weight: 700; color: var(--baobab); }
.plan-rubrique p { margin-top: calc(4px * var(--eb)); color: var(--gris); font-size: max(11px, calc(14px * var(--et))); }
.plan-rubrique ul { margin: calc(12px * var(--eb)) 0 0; padding-left: calc(20px * var(--eb)); display: grid; gap: calc(7px * var(--eb)); font-size: max(12px, calc(15px * var(--et))); }
.plan-note { margin-top: calc(18px * var(--eb)); color: var(--gris); font-size: max(11px, calc(14px * var(--et))); }
@media (max-width: 700px) {
  .plan-grille { grid-template-columns: minmax(0, 1fr); }
  .legal { padding: calc(16px * var(--eb)) 14px; }
}

/* =================== Double authentification =================== */
.verif-carte { display: flex; flex-direction: column; gap: calc(14px * var(--eb)); }
.verif-info { padding: calc(10px * var(--eb)) calc(12px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); background: var(--menthe-pale); font-size: max(11px, calc(13.5px * var(--et))); }
.verif-bloc { display: flex; flex-direction: column; gap: calc(6px * var(--eb)); margin: 0 !important; }
.verif-bloc .champ { margin-bottom: 0 !important; }
.verif-cle { height: calc(48px * var(--eb)); width: 100%; }
.verif-ou { display: flex; align-items: center; gap: calc(12px * var(--eb)); color: var(--gris); font-size: max(11px, calc(13px * var(--et))); }
.verif-ou::before, .verif-ou::after { content: ""; flex: 1; height: 1px; background: var(--contour); }
.verif-confiance { margin-top: 0; }
.verif-recup .lien { font-size: max(11px, calc(13px * var(--et))); text-align: left; }
.df-page { max-width: calc(900px * var(--eb)); }
.df-bloc { padding: calc(16px * var(--eb)) calc(18px * var(--eb)); display: flex; flex-direction: column; gap: calc(12px * var(--eb)); scroll-margin-top: 80px; }
.df-tete h2 { font-size: max(11px, calc(16px * var(--et))); font-weight: 700; display: flex; align-items: center; gap: calc(10px * var(--eb)); flex-wrap: wrap; }
.df-tete h2 .pastille { height: calc(24px * var(--eb)); font-size: max(11px, calc(12px * var(--et))); }
.df-tete p { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); margin-top: calc(4px * var(--eb)); line-height: calc(19px * var(--et)); }
.df-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--contour); border-radius: var(--r); }
.df-liste li { display: flex; justify-content: space-between; align-items: center; gap: calc(12px * var(--eb)); padding: calc(10px * var(--eb)) calc(12px * var(--eb)); }
.df-liste li + li { border-top: 1px solid #E6EAE7; }
.df-liste b { display: block; font-size: max(11px, calc(14px * var(--et))); }
.df-liste small { font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); }
.df-ligne { display: flex; gap: calc(10px * var(--eb)); align-items: center; flex-wrap: wrap; }
.df-ligne .champ { flex: 1 1 calc(220px * var(--eb)); width: auto; min-width: 0; }
.df-qr { display: grid; grid-template-columns: calc(176px * var(--eb)) minmax(0, 1fr); gap: calc(18px * var(--eb)); align-items: start; }
.df-qr-image { width: calc(176px * var(--eb)); height: calc(176px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); padding: calc(6px * var(--eb)); background: #fff; }
.df-qr p { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); }
.df-secret { display: block; margin: calc(8px * var(--eb)) 0 calc(12px * var(--eb)); padding: calc(8px * var(--eb)) calc(10px * var(--eb)); border: 1px solid var(--contour); border-radius: 8px; background: #F6F8F7; font-size: max(11px, calc(14px * var(--et))); letter-spacing: 1px; word-break: break-all; }
.df-codes { border: 1px solid var(--contour); border-radius: var(--r); padding: calc(12px * var(--eb)) calc(14px * var(--eb)); background: #FFFBEF; }
.df-codes ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(6px * var(--eb)) calc(18px * var(--eb)); margin: calc(10px * var(--eb)) 0 calc(12px * var(--eb)); padding-left: calc(22px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); }
.df-etat { font-size: max(11px, calc(13.5px * var(--et))); }
.df-membres { margin-top: calc(12px * var(--eb)); }
.infos-org { margin-top: calc(12px * var(--eb)); }
.infos-org th { width: 34%; text-transform: none; letter-spacing: 0; font-size: max(11px, calc(13.5px * var(--et))); border-radius: 0 !important; border-bottom: 1px solid #E6EAE7; }
@media (max-width: 700px) { .df-qr { grid-template-columns: minmax(0, 1fr); } .df-ligne .btn { flex: 1 1 100%; } }

/* ---------- Cinq salles pré-définies (décision du 06/10/2026) : 5 encadrés sur une ligne en bureau ---------- */
.formats-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(8px * var(--eb)); }
.formats-5 .format-carte { grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: calc(6px * var(--eb)); min-height: 0; padding: calc(12px * var(--eb)) calc(10px * var(--eb)) calc(12px * var(--eb)) calc(12px * var(--eb)); }
.formats-5 .format-textes strong { font-size: max(11px, calc(14px * var(--et))); line-height: calc(18px * var(--et)); padding-right: calc(14px * var(--eb)); }
.formats-5 .format-textes em { display: block; font-style: normal; font-size: max(11px, calc(11.5px * var(--et))); font-weight: 600; line-height: calc(15px * var(--et)); color: var(--cuivre-fonce); margin-top: 1px; }
.formats-5 .format-textes small { font-size: max(11px, calc(12px * var(--et))); line-height: calc(16px * var(--et)); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.format-ic.ic-celebration { color: var(--cuivre); }
.format-ic.ic-recueillement { color: #5B666C; }
.aide-champ { display: block; margin-top: calc(5px * var(--eb)); font-size: max(11px, calc(12px * var(--et))); color: var(--gris); }
.champ input[aria-invalid="true"] { color: var(--alerte); }
.ic-celebration { color: var(--cuivre); }
.ic-recueillement { color: #5B666C; }
/* Aperçu : habillage festif (Célébrations) ou sobre (Recueillements). */
.apercu-motif { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.apercu[data-habillage="festif"] .apercu-visuel { border-color: #E9A12B; }
.apercu[data-habillage="festif"] .apercu-motif { background:
  radial-gradient(circle at 10% 20%, rgba(233, 161, 43, .9) 0 2.5px, transparent 3.5px),
  radial-gradient(circle at 70% 12%, rgba(213, 74, 24, .85) 0 2.5px, transparent 3.5px),
  radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .85) 0 2px, transparent 3px),
  radial-gradient(circle at 88% 40%, rgba(233, 161, 43, .85) 0 2px, transparent 3px),
  linear-gradient(180deg, rgba(213, 74, 24, .18), rgba(233, 161, 43, .12));
  background-size: calc(70px * var(--eb)) calc(60px * var(--eb)), calc(90px * var(--eb)) calc(70px * var(--eb)), calc(60px * var(--eb)) calc(50px * var(--eb)), calc(80px * var(--eb)) calc(66px * var(--eb)), 100% 100%; }
.apercu[data-habillage="sobre"] .apercu-visuel img { filter: grayscale(1) brightness(.85); }
.apercu[data-habillage="sobre"] .apercu-motif { background: linear-gradient(180deg, rgba(43, 46, 48, .25), rgba(43, 46, 48, .45)); }
.apercu[data-habillage="sobre"] .apercu-visuel { border-color: #A9AFB2; }
.apercu-voile { z-index: 2; }
/* Tableau de bord : 5 modes */
.modes-a.modes-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(10px * var(--eb)); }
.modes-5 .mode-a { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: calc(8px * var(--eb)); height: auto; min-height: 0; padding: calc(12px * var(--eb)); align-items: start; position: relative; }
.modes-5 .mode-a-ic { width: calc(40px * var(--eb)); height: calc(40px * var(--eb)); border-radius: 10px; }
.modes-5 .mode-a-ic .ic { width: calc(24px * var(--eb)); height: calc(24px * var(--eb)); }
.modes-5 .mode-a-txt b { font-size: max(11px, calc(14px * var(--et))); letter-spacing: -.2px; }
.modes-5 .mode-a-txt small { font-size: max(11px, calc(12px * var(--et))); line-height: calc(16px * var(--et)); margin-top: calc(2px * var(--eb)); }
.modes-5 .mode-a > .chev { position: absolute; top: calc(14px * var(--eb)); right: calc(10px * var(--eb)); }
.mode-a-ic.or { background: #FBEBD0; color: #B9701A; }
.mode-a-ic.gris { background: #E7E9EA; color: #4E5A60; }
@media (max-width: 1100px) {
  .formats-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .modes-a.modes-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .formats-grille.formats-5 { grid-template-columns: minmax(0, 1fr); }
  .formats-5 .format-carte { grid-template-columns: calc(28px * var(--eb)) minmax(0, 1fr); column-gap: calc(12px * var(--eb)); }
  .modes-a.modes-5 { grid-template-columns: minmax(0, 1fr); }
  .modes-5 .mode-a { grid-template-columns: calc(48px * var(--eb)) minmax(0, 1fr); column-gap: calc(12px * var(--eb)); align-items: center; }
  .modes-5 .mode-a-txt small { white-space: normal; }
}
.vitrine-cartes.cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vitrine-occasions { font-size: max(11px, calc(13px * var(--et))); font-weight: 600; color: var(--cuivre-fonce); margin-top: 2px; }
.vitrine-cartes.cinq .vitrine-carte p:not(.vitrine-occasions) { margin-top: calc(8px * var(--eb)); }
@media (max-width: 1100px) { .vitrine-cartes.cinq { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.heros-modes { flex-wrap: wrap; row-gap: calc(10px * var(--eb)); }
.heros-modes li { height: calc(42px * var(--eb)); padding: 0 calc(16px * var(--eb)) 0 calc(14px * var(--eb)); gap: calc(10px * var(--eb)); font-size: max(11px, calc(15px * var(--et))); }
/* Lancer la palabre : sous le tableau, à droite (zone « L »), action principale de l'hôte. */
.lancer-palabre { display: flex; justify-content: flex-end; margin-top: calc(22px * var(--eb)); }
.btn-lancer { min-height: calc(54px * var(--eb)); padding: 0 calc(28px * var(--eb)); font-size: max(11px, calc(16.5px * var(--et))); font-weight: 600; gap: calc(10px * var(--eb)); border-radius: 12px; }
@media (max-width: 760px) { .lancer-palabre { justify-content: stretch; } .btn-lancer { width: 100%; justify-content: center; } }
/* Tableau de bord, 1201 à 1500 px : 5 cartes à l'étroit → 3 puis 2 cartes, icône à gauche, texte aéré. */
@media (min-width: 1201px) and (max-width: 1500px) {
  .modes-a.modes-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(12px * var(--eb)); }
  .modes-5 .mode-a:nth-child(-n + 3) { grid-column: span 2; }
  .modes-5 .mode-a:nth-child(n + 4) { grid-column: span 3; }
  .modes-5 .mode-a { grid-template-columns: calc(40px * var(--eb)) minmax(0, 1fr); grid-template-rows: auto; column-gap: calc(12px * var(--eb)); align-items: center; min-height: calc(68px * var(--eb)); padding: calc(10px * var(--eb)) calc(34px * var(--eb)) calc(10px * var(--eb)) calc(12px * var(--eb)); }
  .modes-5 .mode-a-ic { width: calc(40px * var(--eb)); height: calc(40px * var(--eb)); }
  .modes-5 .mode-a-txt b { font-size: max(11px, calc(14px * var(--et))); line-height: calc(19px * var(--et)); }
  .modes-5 .mode-a-txt small { font-size: max(11px, calc(12px * var(--et))); line-height: calc(16px * var(--et)); margin-top: calc(2px * var(--eb)); white-space: normal; }
  .modes-5 .mode-a > .chev { top: 50%; transform: translateY(-50%); right: calc(14px * var(--eb)); }
}
/* Code de la palabre (lot K) */
.code-palabre { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8px * var(--eb)) calc(12px * var(--eb)); margin-top: calc(10px * var(--eb)); padding: calc(10px * var(--eb)) calc(12px * var(--eb)); border: 1px solid #B9C6BF; border-radius: 12px; background: #F6FAF8; }
.code-libelle { font-size: max(11px, calc(13px * var(--et))); color: var(--encre-douce); }
.code-valeur { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; letter-spacing: .12em; color: var(--encre); font-variant-numeric: tabular-nums; }
.code-copier { min-height: calc(34px * var(--eb)); padding: 0 calc(12px * var(--eb)); font-size: max(11px, calc(13px * var(--et))); gap: calc(6px * var(--eb)); margin-left: auto; }
.code-grand .code-valeur { font-size: max(11px, calc(24px * var(--et))); }
.code-compact { padding: calc(6px * var(--eb)) calc(10px * var(--eb)); margin-top: calc(8px * var(--eb)); }
.code-compact .code-valeur { font-size: max(11px, calc(15px * var(--et))); }
/* Message d'erreur de « Rejoindre avec un code » : style des messages de champ (pas celui du sous-titre d'accueil). */
.salut .code-form .erreur-champ { font-size: max(11px, calc(13px * var(--et))); line-height: 1.4; font-weight: 500; color: #B42F28; margin: 6px 0 4px; letter-spacing: 0; }
/* Tarifs (07/10) : trois formules côte à côte, empilées sous 900 px ; Enseignants mise en avant discrètement. */
.tarifs-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14px * var(--eb)); margin-top: calc(24px * var(--eb)); align-items: stretch; }
.tarif-carte { background: #fff; border: 1px solid var(--contour); border-radius: var(--r); padding: calc(18px * var(--eb)) calc(20px * var(--eb)) calc(20px * var(--eb)); display: flex; flex-direction: column; min-width: 0; }
.tarif-carte.tarif-avant { border: 2px solid var(--baobab); background: var(--menthe-pale); padding: calc(17px * var(--eb)) calc(19px * var(--eb)) calc(19px * var(--eb)); }
.tarif-carte h2 { font-size: max(11px, calc(18px * var(--et))); font-weight: 700; color: var(--baobab); }
.tarif-cible { font-size: max(11px, calc(13.5px * var(--et))); color: var(--encre-douce); margin-top: calc(2px * var(--eb)); }
.tarif-prix { display: flex; align-items: baseline; gap: calc(6px * var(--eb)); margin-top: calc(14px * var(--eb)); }
.tarif-prix b { font-size: max(11px, calc(30px * var(--et))); font-weight: 700; letter-spacing: -.5px; color: var(--encre); line-height: 1.1; }
.tarif-prix span { font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); }
.tarif-facture { font-size: max(11px, calc(13px * var(--et))); color: var(--gris); margin-top: calc(2px * var(--eb)); }
.tarif-points { list-style: none; margin: calc(14px * var(--eb)) 0 0; padding: calc(14px * var(--eb)) 0 0; border-top: 1px solid var(--contour); display: grid; gap: calc(8px * var(--eb)); }
.tarif-points li { display: flex; align-items: flex-start; gap: calc(8px * var(--eb)); font-size: max(11px, calc(14px * var(--et))); color: var(--encre-douce); line-height: 1.4; }
.tarif-points .ic { flex: none; color: var(--baobab); margin-top: 2px; }
.tarifs-mention { margin-top: calc(14px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); }
@media (max-width: 900px) { .tarifs-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Cycle de vie d'une palabre (07/10/2026) : Annuler / Rétablir / Supprimer / Abandonner ---------- */
.onglets.onglets-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.onglets.onglets-5 a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 calc(6px * var(--eb)); }
.badge-annulee { background: #FDF1E8; color: #B23A10; border: 1px solid #F1C7B4; }
.menu-deroulant .menu-sep { display: block; height: 1px; background: var(--contour); margin: calc(6px * var(--eb)) calc(4px * var(--eb)); }
.menu-deroulant form { margin: 0; }
.menu-deroulant button .ic, .menu-deroulant a .ic { vertical-align: -3px; margin-right: calc(4px * var(--eb)); }
.menu-deroulant .menu-alerte { color: var(--alerte); }
.menu-deroulant .menu-alerte:hover { background: #FDF1E8; }
.menu-deroulant .menu-grise, .menu-deroulant .menu-grise:hover { color: var(--gris-clair); background: none; cursor: not-allowed; }
.menu-deroulant .menu-explication { display: block; padding: 0 calc(12px * var(--eb)) calc(8px * var(--eb)); font-size: max(11px, calc(12px * var(--et))); color: var(--gris); line-height: 1.35; max-width: calc(250px * var(--eb)); }
.cp-etat-cycle { margin-top: calc(6px * var(--eb)); font-size: max(11px, calc(12.5px * var(--et))); color: var(--gris); }
.stable.stable-gris, .stable.stable-gris .ic { color: var(--gris); }
.participants-tete-actions { margin-left: auto; display: flex; align-items: center; gap: calc(8px * var(--eb)); position: relative; }
.menu-fiche { position: relative; }
.btn-abandonner { border: 1px solid var(--contour); }
.bandeau-annulee { margin-top: calc(12px * var(--eb)); padding: calc(10px * var(--eb)) calc(14px * var(--eb)); border: 1px solid #F1C7B4; border-radius: var(--r); background: #FDF1E8; color: #7A2C0B; font-size: max(11px, calc(13.5px * var(--et))); display: flex; gap: calc(8px * var(--eb)); align-items: flex-start; }
.corbeille-note { display: flex; gap: calc(6px * var(--eb)); align-items: flex-start; }
.dlg-palabre { width: min(calc(460px * var(--eb)), calc(100vw - 32px)); }
.dlg-palabre .dlg-comprends { margin: calc(4px * var(--eb)) 0 0; padding: calc(10px * var(--eb)); border: 1px solid var(--contour); border-radius: var(--r); align-items: flex-start; }
.dlg-palabre .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) {
  .onglets.onglets-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; row-gap: calc(4px * var(--eb)); }
  .participants-tete { flex-wrap: wrap; }
  .participants-tete-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
  .dlg-palabre .dlg-actions { flex-direction: column-reverse; }
  .dlg-palabre .dlg-actions .btn { width: 100%; }
}
.menu-deroulant button:has(.ic), .menu-deroulant a:has(.ic) { display: flex; align-items: center; gap: calc(6px * var(--eb)); }
.menu-deroulant button:has(.ic) .ic, .menu-deroulant a:has(.ic) .ic { margin-right: 0; flex: none; }
/* Notes des onglets Annulées / Supprimées : texte long, sur plusieurs lignes (jamais tronqué). */
.filtre-actif.note-onglet { display: flex; height: auto; min-height: calc(30px * var(--eb)); padding: calc(6px * var(--eb)) calc(10px * var(--eb)); align-items: flex-start; line-height: 1.4; max-width: 100%; }
.filtre-actif.note-onglet .ic { flex: none; margin-top: 1px; }
.dlg-palabre [hidden] { display: none !important; }
.menu-deroulant .menu-sep:first-child { display: none; }

/* Contact : sujet en liste de thématiques (08/10/2026). */
.champ-select select { min-width: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: var(--encre); }
.champ-facultatif { font-weight: 400; color: var(--gris); }
/* Sommaire des documents légaux. */
.legal-sommaire { margin-bottom: calc(18px * var(--eb)); padding: calc(14px * var(--eb)) calc(18px * var(--eb)); background: var(--menthe-pale); border: 1px solid var(--contour); border-radius: var(--r); }
.legal-sommaire h2 { margin-top: 0; font-size: max(12px, calc(16px * var(--et))); }
.legal-sommaire ol { margin: calc(8px * var(--eb)) 0 0; padding-left: calc(22px * var(--eb)); columns: 2 calc(240px * var(--eb)); column-gap: calc(28px * var(--eb)); }
.legal-sommaire li { break-inside: avoid; margin-bottom: calc(4px * var(--eb)); }
.legal h2[id] { scroll-margin-top: calc(90px * var(--eb)); }
/* En-tête commun : cloche et menu du compte (08/10/2026) */
.entete-outils .cloche-a { display: inline-flex; align-items: center; }
.entete-outils .profil-a .menu-deroulant { top: calc(52px * var(--eb)); }
.notifications-page { display: flex; flex-direction: column; gap: calc(26px * var(--eb)); }
.notifications-page .titre-section { margin: 0 0 calc(10px * var(--eb)); font-size: max(15px, calc(19px * var(--et))); }
.notifications-page .col-action { white-space: nowrap; }
.notifications-page .col-action .btn + .btn { margin-left: calc(6px * var(--eb)); }
/* Paramètres en onglets (08/10/2026) : la barre d'onglets en haut, chaque onglet s'ouvre dans le même cadre. */
.param-page { max-width: calc(1460px * var(--eb)); margin-top: calc(16px * var(--eb)); }
.onglets-param { display: flex; gap: calc(8px * var(--eb)); margin-top: calc(14px * var(--eb)); padding: calc(6px * var(--eb)); background: #fff; border: 1px solid var(--contour); border-radius: var(--r-m); overflow-x: auto; scrollbar-width: thin; }
.onglets-param a { flex: 1 1 0; min-width: max-content; display: inline-flex; align-items: center; justify-content: center; gap: calc(8px * var(--eb)); height: calc(46px * var(--eb)); padding: 0 calc(16px * var(--eb)); border-radius: 8px; color: var(--encre); text-decoration: none; font-size: max(12px, calc(15px * var(--et))); font-weight: 500; border: 1px solid transparent; }
.onglets-param a:hover { background: var(--ivoire); }
.onglets-param a.actif { background: #DDF6EC; border-color: var(--baobab); color: var(--baobab-fonce); font-weight: 600; }
.onglets-param a.actif .ic { color: var(--baobab); }
.onglets-param a:focus-visible { outline: 3px solid var(--baobab); outline-offset: 2px; }
.param-cadre { margin-top: calc(14px * var(--eb)); }
.param-panneau[hidden], [data-barre-zone][hidden] { display: none !important; }
.param-panneau > .secu-colonnes { margin-top: 0; }
.param-panneau .bloc-membres { margin: 0 0 calc(14px * var(--eb)); max-width: none; }
.param-panneau .carte { border-radius: var(--r-m); }
/* Mes palabres : bouton « Ouvrir » sous la vignette des cartes, à gauche du code (08/10/2026). */
.cp-ouvrir { margin-top: calc(10px * var(--eb)); }
.cp-ouvrir .btn { width: 100%; justify-content: center; min-height: calc(40px * var(--eb)); padding: 0 calc(8px * var(--eb)); gap: calc(6px * var(--eb)); font-size: max(12px, calc(14px * var(--et))); }
.cp-gauche { min-width: 0; }
/* Salle : fenêtre « Test audio » (08/10/2026). */
.test-audio { max-width: calc(480px * var(--eb)); width: calc(100% - 32px); }
.test-audio .ta-bloc { border: 1px solid var(--contour); border-radius: var(--r-m); padding: calc(12px * var(--eb)) calc(14px * var(--eb)); margin-top: calc(12px * var(--eb)); }
.test-audio h3 { display: flex; align-items: center; gap: calc(8px * var(--eb)); font-size: max(13px, calc(15px * var(--et))); }
.test-audio p { color: var(--gris); margin: calc(6px * var(--eb)) 0 calc(10px * var(--eb)); }
.ta-niveau { height: calc(12px * var(--eb)); border-radius: 99px; background: #E6ECE9; overflow: hidden; border: 1px solid var(--contour); }
.ta-niveau span { display: block; height: 100%; width: 0; background: var(--baobab); transition: width .08s linear; }
.ta-actions { display: flex; flex-wrap: wrap; gap: calc(8px * var(--eb)); margin-top: calc(10px * var(--eb)); }
.test-audio .ta-verdict { color: var(--baobab-fonce); font-weight: 600; min-height: 1.2em; margin-bottom: 0; }
.test-audio .dlg-actions { margin-top: calc(14px * var(--eb)); display: flex; justify-content: flex-end; }