@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('polices/instrument-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('polices/instrument-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('polices/instrument-sans-italique-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Sans';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('polices/instrument-sans-italique-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('polices/source-serif-4-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('polices/source-serif-4-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('polices/source-serif-4-italique-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('polices/source-serif-4-italique-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url('polices/fraunces-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 500 600;
font-display: swap;
src: url('polices/fraunces-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('polices/caveat-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('polices/caveat-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--ink: #1b1a19;
--paper: #f7f5f1;
--surface: #fff;
--surface-2: #f1eee8;
--muted: #5f5b55;
--faint: #706c66;
--line: #e3ded5;
--line-strong: #cfc8bc;
--accent-brut: #605a90;
--sur-accent: #fff;
--sur-photo: #fff;
--sur-pastille-claire: #1b1a19;
--polaroid-cadre: #fbfaf7;
--polaroid-fond: #e8e4dc;
--gabarit-apercu-a: #7a5a3c;
--gabarit-apercu-b: #c9a476;
--bandeau: #2a2724;
--sur-bandeau: #f7f5f1;
--entete: #4d4843;
--sur-entete: #f7f5f1;
--entete-trait: #403c37;
--entete-coeur: #c9c3f2;
--interrupteur-pastille: #f7f5f1;
--nav-colonne: #5b554e;
--sur-colonne: #f7f5f1;
--nav-colonne-trait: #6e675f;
--nav-colonne-titre: #ddd7cd;
--nav-famille: rgb(255 255 255 / 8%);
--nav-rond: #706960;
--nav-plus: #b9e6c2;
--nav-chiffre: #c2564b;
--sur-nav-chiffre: #fff;
--nav-admin: #f0c060;
--accent-loreside: #605a90;
--sur-accent-loreside: #fff;
--renc-flamme: #d9683f;
--renc-or: #e0a03c;
--renc-gris: #8a8f98;
--renc-nuit: #3a1f4d;
--renc-tuile: #a8402a;
--renc-peche: #f0a27c;
--meteo-defaut: #7aa6d6;
--meteo-ciel: #e2b44a;
--meteo-nuit: #4a5a9a;
--meteo-arc: #b67ad6;
--meteo-pluie: #5f8fb8;
--meteo-froid: #8fc3e0;
--meteo-vent: #6f7c8c;
--meteo-chaud: #d9683f;
--renc-ombre-legere: rgba(0, 0, 0, .12);
--renc-ombre: rgba(0, 0, 0, .25);
--renc-ombre-forte: rgba(0, 0, 0, .3);
--renc-voile: rgba(0, 0, 0, .38);
--renc-verre: rgba(255, 255, 255, .18);
--renc-filet: rgba(255, 255, 255, .7);
--renc-lait: rgba(255, 255, 255, .92);
--connect-nuit: #14061a;
--connect-carte: #20082c;
--connect-carte-2: #2a0b3a;
--connect-rose: #e644a8;
--connect-rose-sombre: #8a1a5a;
--connect-violet: #330099;
--connect-texte: #f5d8e8;
--connect-texte-2: #b47190;
--connect-texte-3: #a17b93;
--connect-filet: rgba(230, 68, 168, .18);
--connect-filet-fort: rgba(230, 68, 168, .4);
--connect-rose-doux: rgba(230, 68, 168, .12);
--connect-rouge: #ff4466;
--connect-rouge-doux: rgba(255, 68, 85, .14);
--connect-verre: rgba(255, 255, 255, .08);
--connect-verre-filet: rgba(255, 255, 255, .18);
--connect-degrade: rgba(5, 1, 18, .97);
--connect-voile: rgba(6, 2, 16, .97);
--connect-blanc: #fff;
--connect-ombre: rgba(0, 0, 0, .6);
--relay-nuit: #030a06;
--relay-fond-2: #071410;
--relay-carte: #081a12;
--relay-carte-2: #0c2419;
--relay-vert: #3e9c69;
--relay-vert-doux: rgba(28, 138, 78, .14);
--relay-filet: rgba(28, 138, 78, .22);
--relay-filet-fort: rgba(28, 138, 78, .5);
--relay-or: #ffaa22;
--relay-rouge: #ff4466;
--relay-rouge-doux: rgba(255, 68, 102, .12);
--relay-texte: #cfe8d8;
--relay-texte-2: #8aaa98;
--relay-texte-3: #738e7f;
--relay-blanc: #fff;
--maire-nuit: #050c1c;
--maire-carte: #0a1630;
--maire-carte-2: #0f1f40;
--maire-or: #2e8bff;
--maire-or-vif: #5fb0ff;
--maire-or-sombre: #0a2a7a;
--maire-tuile: #2e8bff;
--maire-or-doux: rgba(46, 139, 255, .1);
--maire-filet: rgba(46, 139, 255, .18);
--maire-filet-fort: rgba(46, 139, 255, .45);
--maire-texte: #dceaff;
--maire-texte-2: #8fb3e0;
--maire-texte-3: #7a9cc8;
--maire-alerte: #ff4422;
--maire-alerte-doux: rgba(255, 68, 34, .12);
--maire-officiel: #ffd166;
--symph-nuit: #0a0a0c;
--symph-fond-2: #121214;
--symph-carte: #18181c;
--symph-carte-2: #22222a;
--symph-blanc: #ffffff;
--symph-gris: #a2a2ac;
--symph-texte: #e8e8ec;
--symph-texte-2: #a8a8b4;
--symph-filet: rgba(255, 255, 255, .16);
--symph-filet-doux: rgba(255, 255, 255, .07);
--symph-doux: rgba(255, 255, 255, .12);
--symph-lueur: rgba(140, 0, 200, .14);
--symph-vert: #22dd66;
--symph-rouge: #ff4455;
--symph-ombre: rgba(0, 0, 0, .55);
--swift-nuit: #040814;
--swift-fond-2: #0a1428;
--swift-carte: #1a0f08;
--swift-carte-2: #231810;
--swift-cuivre-sombre: #7a2800;
--swift-cuivre: #c46a1a;
--swift-orange: #e08a3a;
--swift-or: #ffaa22;
--swift-vert: #22dd88;
--swift-rouge: #ff4466;
--swift-gris: #9a9aa4;
--swift-texte: #f0dbc8;
--swift-texte-2: #c4a68c;
--swift-texte-3: #9c8473;
--swift-filet: rgba(224, 138, 58, .22);
--swift-filet-doux: rgba(224, 138, 58, .1);
--swift-doux: rgba(224, 138, 58, .12);
--swift-or-doux: rgba(255, 170, 34, .15);
--swift-vert-doux: rgba(34, 221, 136, .12);
--swift-rouge-doux: rgba(255, 68, 102, .12);
--swift-pulsation: rgba(255, 170, 34, .22);
--swift-papier: #f4ede1;
--swift-papier-2: #ebe3d3;
--journal-marge: rgba(200, 80, 80, .45);
--journal-ligne: rgba(140, 100, 60, .2);
--journal-tache: rgba(40, 25, 15, .5);
--swift-encre: #2a2015;
--swift-encre-2: #5a3a1a;
--swift-marge: rgba(200, 80, 80, .4);
--swift-ombre: rgba(0, 0, 0, .5);
--aether-nuit: #04080f;
--aether-carte: #0b1322;
--aether-carte-2: #0e1a2e;
--aether-turquoise: #44ccbb;
--aether-turquoise-sombre: #0a4045;
--aether-texte: #c8f0e8;
--aether-texte-2: #86bfb2;
--aether-blanc: #ffffff;
--aether-filet: rgba(68, 204, 187, .18);
--aether-filet-doux: rgba(68, 204, 187, .08);
--aether-doux: rgba(68, 204, 187, .12);
--aether-or: #ffcc44;
--aether-or-doux: rgba(255, 204, 68, .1);
--aether-orange: #ff8a3d;
--aether-orange-doux: rgba(255, 138, 61, .12);
--aether-rouge: #ff5a5a;
--aether-rouge-doux: rgba(255, 90, 90, .14);
--aether-orage: #8a7ad6;
--aether-ciel-soleil: rgba(255, 200, 50, .16);
--aether-ciel-pluie: rgba(60, 100, 160, .22);
--aether-ciel-froid: rgba(180, 220, 255, .12);
--aether-ciel-vent: rgba(60, 0, 120, .2);
--aether-ciel-chaud: rgba(255, 120, 30, .18);
--aether-goutte: rgba(100, 160, 255, .55);
--aether-flocon: rgba(235, 245, 255, .85);
--aether-brume: rgba(180, 200, 220, .1);
--aether-eclat: rgba(255, 220, 100, .7);
--bs-nuit: #0d0c14;
--bs-carte: #16141f;
--bs-carte-2: #1f1c2b;
--bs-rouge: #a78bfa;
--bs-rouge-sombre: #7c3aed;
--bs-texte: #ece8f5;
--bs-texte-2: #aaa3bf;
--bs-texte-3: #8f88a6;
--bs-filet: rgba(139, 92, 246, .22);
--bs-filet-doux: rgba(139, 92, 246, .09);
--bs-doux: rgba(139, 92, 246, .12);
--bs-lueur: rgba(124, 58, 237, .22);
--ap-messages-degrade-a: #219b4d; --ap-messages-degrade-b: #33ee77; --ap-messages-sur-degrade: #1b1a19;
--ap-messages-nuit: #091913; --ap-messages-fond-2: #0a2016; --ap-messages-carte: #0b2619; --ap-messages-carte-2: #0e3420;
--ap-messages-texte: #ebfdf1; --ap-messages-texte-2: #a7dbbd; --ap-messages-texte-3: #83be9e;
--ap-messages-accent: #33ee77; --ap-messages-accent-fort: #70f3a0; --ap-messages-sur-accent: #1b1a19;
--ap-messages-filet: #165931; --ap-messages-filet-fort: #1e8445; --ap-messages-filet-doux: #103b23; --ap-messages-doux: #103b23;
--ap-echo-degrade-a: #268cbf; --ap-echo-degrade-b: #33bbff; --ap-echo-sur-degrade: #1b1a19; --ap-echo-sur-accent: #1b1a19;
--ap-rencontres-degrade-a: #5c1e70; --ap-rencontres-degrade-b: #a737cb; --ap-rencontres-sur-degrade: #f4f2ee; --ap-rencontres-sur-accent: #1b1a19;
--ap-maire-degrade-a: #2c84f2; --ap-maire-degrade-b: #69abff; --ap-maire-sur-degrade: #1b1a19; --ap-maire-sur-accent: #1b1a19;
--ap-annonces-degrade-a: #08321d; --ap-annonces-degrade-b: #0e5a34; --ap-annonces-sur-degrade: #f4f2ee; --ap-annonces-sur-accent: #1b1a19;
--ap-livraison-degrade-a: #c77125; --ap-livraison-degrade-b: #d79962; --ap-livraison-sur-degrade: #1b1a19; --ap-livraison-sur-accent: #1b1a19;
--ap-playlist-degrade-a: #a6a6a6; --ap-playlist-degrade-b: #ffffff; --ap-playlist-sur-degrade: #1b1a19; --ap-playlist-sur-accent: #1b1a19;
--ap-meteo-degrade-a: #33998c; --ap-meteo-degrade-b: #44ccbb; --ap-meteo-sur-degrade: #1b1a19; --ap-meteo-sur-accent: #1b1a19;
--ap-potins-degrade-a: #e639ac; --ap-potins-degrade-b: #ff3fbf; --ap-potins-sur-degrade: #1b1a19;
--ap-potins-nuit: #190b18; --ap-potins-fond-2: #210c1e; --ap-potins-carte: #280e23; --ap-potins-carte-2: #37112e;
--ap-potins-texte: #ffecf9; --ap-potins-texte-2: #e0aad1; --ap-potins-texte-3: #c486b5;
--ap-potins-accent: #ff3fbf; --ap-potins-accent-fort: #ff79d2; --ap-potins-sur-accent: #1b1a19;
--ap-potins-filet: #5e1b4a; --ap-potins-filet-fort: #8c256c; --ap-potins-filet-doux: #3e1333; --ap-potins-doux: #3e1333;
--ap-blindspot-degrade-a: #442082; --ap-blindspot-degrade-b: #7c3aed; --ap-blindspot-sur-degrade: #f4f2ee; --ap-blindspot-sur-accent: #1b1a19;
--nav-rp: #6f4f9c;
--nav-rp-trait: #e6ddf3;
--nav-hrp: #95621a;
--nav-hrp-trait: #f3e6cf;
--hauteur-marque: 44px;
--warn: #8c4a56;
--warn-soft: #f6ecee;
--tri-en-retard: #b8463c;
--tri-presque: #b06a12;
--sur-pastille-tri: #fff;
--anniv-contour: #c9628f;
--story-blanc: #ffffff;
--story-noir: #14120f;
--story-rose: #ff4d6d;
--story-jaune: #ffd166;
--story-bleu: #4dd4ff;
--story-vert: #8ef58e;
--story-scene: #0b0a09;
--story-voile: rgba(0, 0, 0, .55);
--story-voile-fort: rgba(0, 0, 0, .72);
--story-ombre: rgba(0, 0, 0, .8);
--story-ombre-douce: rgba(0, 0, 0, .5);
--story-filet: rgba(255, 255, 255, .7);
--hm-nuit: #050b1a;
--hm-surface: #0a1530;
--hm-surface-2: #0d1c40;
--hm-trait: rgba(60, 140, 255, .22);
--hm-trait-doux: rgba(60, 140, 255, .12);
--hm-texte: #e6f0ff;
--hm-texte-2: #a3bfe6;
--hm-texte-3: #7896c4;
--hm-accent: #33aaff;
--hm-accent-fort: #66c2ff;
--hm-lueur: rgba(51, 170, 255, .18);
--hm-rose: #ff66cc;
--hm-danger: #ff5a6a;
--hm-or: #ffb627;
--hm-sur-accent: #001028;
--hm-voile: rgba(5, 11, 26, .94);
--hm-ombre: rgba(0, 0, 0, .45);
--hm-sur-photo: #ffffff;
--hm-police-titre: 'Rajdhani', 'Instrument Sans', system-ui, sans-serif;
--hm-police: 'Exo 2', 'Instrument Sans', system-ui, sans-serif;
--hm-police-chiffres: 'Share Tech Mono', ui-monospace, monospace;
--font-ui: 'Instrument Sans', system-ui, -apple-system, sans-serif;
--font-rp: 'Source Serif 4', Georgia, serif;
--font-title: 'Fraunces', Georgia, serif;
--marge: 16px;
--marge-page: 20px;
--rayon-s: 8px;
--rayon: 10px;
--rayon-l: 14px;
--rayon-pilule: 999px;
--largeur-contenu: 640px;
--largeur-texte: 38ch;
--seuil-bureau: 900px;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) {
--ink: #eceae6;
--paper: #131312;
--surface: #1c1b19;
--surface-2: #252320;
--muted: #a8a298;
--faint: #8f8980;
--line: #302d29;
--line-strong: #413d37;
--sur-accent: #131312;
--warn: #d59aa4;
--warn-soft: #2a1f21;
--tri-en-retard: #e07a70;
--tri-presque: #e8a548;
--sur-pastille-tri: #131312;
--anniv-contour: #e08fb5;
--nav-rp: #b9a0e3;
--nav-rp-trait: #3a3050;
--nav-hrp: #e2b46c;
--nav-hrp-trait: #45391f;
--entete: #2a2724;
--sur-entete: #f7f5f1;
--entete-trait: #2a2724;
--entete-coeur: #a59fd6;
--interrupteur-pastille: #f7f5f1;
--nav-colonne: #211f1c;
--sur-colonne: #f7f5f1;
--nav-colonne-trait: #3a3632;
--nav-colonne-titre: #a39d93;
--nav-famille: rgb(255 255 255 / 5%);
--nav-rond: #3a3733;
--nav-plus: #9fd3a8;
--nav-admin: #e0a43a;
}
}
html[data-theme='sombre'] {
--ink: #eceae6;
--paper: #131312;
--surface: #1c1b19;
--surface-2: #252320;
--muted: #a8a298;
--faint: #8f8980;
--line: #302d29;
--line-strong: #413d37;
--sur-accent: #131312;
--warn: #d59aa4;
--warn-soft: #2a1f21;
--tri-en-retard: #e07a70;
--tri-presque: #e8a548;
--sur-pastille-tri: #131312;
--anniv-contour: #e08fb5;
--nav-rp: #b9a0e3;
--nav-rp-trait: #3a3050;
--nav-hrp: #e2b46c;
--nav-hrp-trait: #45391f;
--entete: #2a2724;
--sur-entete: #f7f5f1;
--entete-trait: #2a2724;
--entete-coeur: #a59fd6;
--interrupteur-pastille: #f7f5f1;
--nav-colonne: #211f1c;
--sur-colonne: #f7f5f1;
--nav-colonne-trait: #3a3632;
--nav-colonne-titre: #a39d93;
--nav-famille: rgb(255 255 255 / 5%);
--nav-rond: #3a3733;
--nav-plus: #9fd3a8;
--nav-admin: #e0a43a;
}
:root,
.app,
.fenetre {
--accent: var(--accent-brut);
--accent-soft: color-mix(in oklab, var(--accent) 11%, var(--surface));
--accent-ink: color-mix(in oklab, var(--accent) 62%, var(--ink));
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']),
html:not([data-theme='clair']) .app,
html:not([data-theme='clair']) .fenetre {
--accent: color-mix(in oklab, var(--accent-brut) 62%, #fff);
}
}
html[data-theme='sombre'],
html[data-theme='sombre'] .app,
html[data-theme='sombre'] .fenetre {
--accent: color-mix(in oklab, var(--accent-brut) 62%, #fff);
}
.theme-vignette-loreside  { --tv-fond: #f7f5f1; --tv-blocs: #ffffff; --tv-accent: var(--accent, #605a90); --tv-encre: #1b1a19; }
.theme-vignette-parchemin { --tv-fond: #efe4cc; --tv-blocs: #f8f0dd; --tv-accent: #8a4b2b; --tv-encre: #1b1a19; --tv-police: 'Fraunces', Georgia, serif; }
.theme-vignette-nuit      { --tv-fond: #141826; --tv-blocs: #1d2336; --tv-accent: #8fa4e8; --tv-encre: #f4f2ee; --tv-police: 'Fraunces', Georgia, serif; }
.theme-vignette-papier    { --tv-fond: #ffffff; --tv-blocs: #ffffff; --tv-accent: #2f2f2f; --tv-encre: #1b1a19; --tv-police: 'Source Serif 4', Georgia, serif; }
.theme-vignette-neon      { --tv-fond: #120f1c; --tv-blocs: #1c1729; --tv-accent: #e04fbf; --tv-encre: #f4f2ee; --tv-police: 'Instrument Sans', system-ui, sans-serif; }
:root {
--noir-55: rgb(0 0 0 / 55%);
--blanc: rgb(255 255 255);
--noir-45: rgb(0 0 0 / 45%);
--blanc-75: rgb(255 255 255 / 75%);
--noir-18: rgb(0 0 0 / 18%);
--noir-22: rgb(0 0 0 / 22%);
--noir-25: rgb(0 0 0 / 25%);
--noir-28: rgb(0 0 0 / 28%);
--noir-35: rgb(0 0 0 / 35%);
--noir-30: rgb(0 0 0 / 30%);
--blanc-14: rgba(255, 255, 255, .14);
--blanc-26: rgba(255, 255, 255, .26);
--ombre-section-28: rgba(40, 30, 60, .28);
--ombre-section-22: rgba(40, 30, 60, .22);
--noir-12: rgba(0, 0, 0, .12);
--voile-couv-tw: rgba(20, 18, 16, .55);
--noir-62: rgba(0, 0, 0, .62);
--noir-0: rgba(0, 0, 0, 0);
--noir-60: rgba(0, 0, 0, .6);
--noir-58: rgba(0, 0, 0, .58);
--noir-66: rgba(0, 0, 0, .66);
--couv-teinte-6f6690: #6f6690;
--couv-teinte-56727e: #56727e;
--couv-teinte-86695a: #86695a;
--couv-teinte-627d5e: #627d5e;
--couv-teinte-86566b: #86566b;
--couv-teinte-8a7a52: #8a7a52;
--blanc-12: rgb(255 255 255 / 12%);
--blanc-22: rgb(255 255 255 / 22%);
--creme-72: rgb(247 245 241 / 72%);
--voile-50: rgb(20 18 16 / 50%);
--nuit: #14120f;
--noir-32: rgb(0 0 0 / 32%);
--blanc-6: rgb(255 255 255 / 6%);
--nuit-bouton: #2c2926;
--noir-16: rgb(0 0 0 / 16%);
--renc-aimer: #d9683f;
--gris-7: rgb(128 128 128 / 7%);
--gris-14: rgb(128 128 128 / 14%);
--gris-26: rgb(128 128 128 / 26%);
--gris-40: rgb(128 128 128 / 40%);
--gris-55: rgb(128 128 128 / 55%);
--nuit-apercu: #16140f;
--jeu-juste: #4fb07a;
--blanc-80: rgb(255 255 255 / 80%);
--noir-65: rgb(0 0 0 / 65%);
--noir-50: rgb(0 0 0 / 50%);
--voile-notif-42: rgb(20 18 15 / 42%);
--blanc-85: rgb(255 255 255 / 85%);
--noir: #000000;
--noir-80: rgb(0 0 0 / 80%);
--blanc-70: rgb(255 255 255 / 70%);
--noir-78: rgb(0 0 0 / 78%);
--nuit-lecteur: #0b0a09;
--blanc-35: rgb(255 255 255 / 35%);
--blanc-65: rgb(255 255 255 / 65%);
--blanc-8: rgb(255 255 255 / 8%);
--blanc-55: rgb(255 255 255 / 55%);
--blanc-40: rgb(255 255 255 / 40%);
--blanc-60: rgb(255 255 255 / 60%);
--voile-visionneuse-88: rgb(12 10 9 / 88%);
--noir-40: rgb(0 0 0 / 40%);
--blanc-32: rgb(255 255 255 / 32%);
--nouvelle-developpement: #4a8fc4;
--creme: #f7f5f1;
--blanc-24: rgb(255 255 255 / 24%);
--noir-14: rgb(0 0 0 / 14%);
--blanc-30: rgb(255 255 255 / 30%);
--creme-24: rgb(247 245 241 / 24%);
--creme-60: rgb(247 245 241 / 60%);
--creme-56: rgb(247 245 241 / 56%);
--creme-84: rgb(247 245 241 / 84%);
--creme-12: rgb(247 245 241 / 12%);
--ombre-encre-8: rgb(27 26 25 / 8%);
--blanc-16: rgb(255 255 255 / 16%);
--voile-55: rgb(20 18 16 / 55%);
--noir-20: rgb(0 0 0 / 20%);
--blanc-10: rgb(255 255 255 / 10%);
--noir-11: rgb(0 0 0 / 11%);
--noir-17: rgb(0 0 0 / 17%);
--voile-60: rgb(20 18 16 / 60%);
--nuit-video: #101014;
--blanc-92: rgb(255 255 255 / 92%);
--ident-personnage: #3f6b4e;
--ident-fiction: #a0723a;
--teinte-defaut: #5a4a76;
--ecusson-plateforme: #918c84;
--pulse-decrocher: #2f9e61; --pulse-raccrocher: #d2463c; --sur-pulse-appel: #ffffff; }
:root { --sur-visionneuse: #ffffff; }
:root {
--ecl-rose: #a8344b;
--ecl-rose-soft: #fbecef;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) { --ecl-rose: #e48a9c; --ecl-rose-soft: #2a1d20; }
}
html[data-theme='sombre'] { --ecl-rose: #e48a9c; --ecl-rose-soft: #2a1d20; }
:root {
--tel-pastille: #ff3b30;
--tel-pastille-texte: #ffffff;
--tel-pastille-contour: #080d1a;
--tel-pastille-contour-bulle: #ffffff;
--tel-pastille-lueur: rgba(255, 59, 48, .6);
--pulse-vif: #22dd66;
--sur-pulse-vif: #04140a;
--pulse-titre: #17803f;
--commerage-vif: #ff79d2;
--commerage-titre: #b0127f;
--tel-voile-verrou: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 50%, rgba(0, 0, 0, .85) 100%);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) { --pulse-titre: #33ee77; --commerage-titre: #ff79d2; }
}
html[data-theme='sombre'] { --pulse-titre: #33ee77; --commerage-titre: #ff79d2; }
:root {
--fic-perso: #3f6b4e;
--fic-lieu: #a8642a;
--fic-voile: rgba(21, 20, 20, .55);
--sur-fic-voile: #ece8e3;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) { --fic-perso: #7cc8a4; --fic-lieu: #e0a24a; }
}
html[data-theme='sombre'] { --fic-perso: #7cc8a4; --fic-lieu: #e0a24a; }
* { box-sizing: border-box; }
html {
color-scheme: light dark;
-webkit-text-size-adjust: 100%;
}
html[data-theme="clair"] { color-scheme: light; }
html[data-theme="sombre"] { color-scheme: dark; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
button, select, input, textarea {
font-family: inherit;
font-size: inherit;
color: inherit;
}
button { touch-action: manipulation; }
a { color: var(--accent-ink); }
img { max-width: 100%; height: auto; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
.app {
display: flex;
flex-direction: column;
height: 100svh;
background: var(--surface);
position: relative;
overflow: hidden;
overflow: clip;
}
.wordmark {
display: flex;
align-items: center;
text-decoration: none;
}
.wordmark { flex: none; }
.wordmark img {
height: var(--hauteur-marque);
width: auto;
max-width: none;
aspect-ratio: 440 / 107;
display: block;
}
@media (max-width: 420px) { :root { --hauteur-marque: 32px; } }
@media (max-width: 360px) { :root { --hauteur-marque: 26px; } }
.avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--blanc-12);
border: 1px solid var(--blanc-22);
display: grid;
place-items: center;
font-size: 11px;
font-weight: 600;
color: var(--sur-bandeau);
cursor: pointer;
flex: none;
text-decoration: none;
}
.strip {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 13px var(--marge);
background: var(--bandeau);
font-size: 12.5px;
color: var(--creme-72);
}
.strip a,
.strip button {
background: none;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
text-decoration: none;
}
.scroll {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) {
.page { padding: 32px var(--marge) 64px; }
.rpg-head {
max-width: var(--largeur-contenu);
margin-left: auto;
margin-right: auto;
}
}
.page {
padding: var(--marge-page) var(--marge) 28px;
max-width: var(--largeur-contenu);
margin: 0 auto;
}
h1 {
font-family: var(--font-title);
font-size: 23px;
font-weight: 600;
letter-spacing: -.015em;
margin: 0 0 3px;
}
h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
h3 { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.sub { color: var(--muted); font-size: 13px; margin: 0; }
.rule { height: 1px; background: var(--line); margin: 20px 0; }
.section + .section { margin-top: 24px; }
.prose {
font-family: var(--font-rp);
font-size: 15.5px;
line-height: 1.7;
margin: 0;
}
.prose p { margin: 0 0 .8em; }
.prose p:last-child { margin: 0; }
.prose em { color: var(--muted); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--rayon);
border: 1px solid var(--line-strong);
background: none;
cursor: pointer;
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
}
.btn-main {
background: var(--accent);
border-color: var(--accent);
color: var(--sur-accent);
}
.btn-warn { color: var(--warn); border-color: var(--warn); }
.btn-w { width: 100%; }
@media (min-width: 700px) {
.btn-w { width: auto; }
}
.btn-s { padding: 5px 10px; font-size: 12.5px; border-radius: var(--rayon-s); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.crest {
width: 50px;
height: 50px;
border-radius: 10px;
flex: none;
display: grid;
place-items: center;
font-family: var(--font-title);
font-weight: 600;
font-size: 17px;
color: var(--blanc);
}
.face {
width: 26px;
height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 10.5px;
font-weight: 600;
color: var(--blanc);
flex: none;
object-fit: cover;
}
.faces { display: flex; }
.faces .face { border: 2px solid var(--surface); margin-left: -7px; }
.faces .face:first-child { margin-left: 0; }
.item {
display: flex;
gap: 12px;
padding: 13px 0;
border-top: 1px solid var(--line);
width: 100%;
text-align: left;
background: none;
border-left: 0;
border-right: 0;
border-bottom: 0;
cursor: pointer;
align-items: flex-start;
color: inherit;
font: inherit;
text-decoration: none;
}
.item:first-of-type { border-top: 0; }
.item-body { flex: 1; min-width: 0; }
.item-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.item-name {
font-family: var(--font-title);
font-size: 16px;
font-weight: 600;
letter-spacing: -.01em;
}
.meta { color: var(--muted); font-size: 12.5px; margin: 1px 0 0; }
.mine { color: var(--faint); font-size: 12.5px; margin: 5px 0 0; }
.item-accroche { margin: 5px 0 0; font-family: var(--font-rp); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.count {
background: var(--accent);
color: var(--sur-accent);
font-size: 11px;
font-weight: 500;
padding: 1px 7px;
border-radius: var(--rayon-pilule);
flex: none;
}
.tag {
font-size: 11px;
color: var(--accent-ink);
background: var(--accent-soft);
padding: 1px 7px;
border-radius: var(--rayon-pilule);
font-weight: 500;
display: inline-block;
}
.tag.grey { color: var(--faint); background: var(--surface-2); }
.tag.warn { color: var(--warn); background: var(--warn-soft); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.chip {
border: 1px solid var(--line-strong);
background: none;
border-radius: var(--rayon-pilule);
padding: 4px 11px;
font-size: 12.5px;
color: var(--muted);
cursor: pointer;
text-decoration: none;
}
.chip[aria-pressed='true'],
.barre-filtres-pose > .barre-filtres-choix {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
.field {
width: 100%;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 9px;
padding: 8px 11px;
font-size: 16px;
}
@media (min-width: 520px) {
.field { font-size: 14px; }
}
.lab {
font-size: 12.5px;
color: var(--muted);
display: block;
margin: 12px 0 4px;
}
.lab:first-child { margin-top: 0; }
.row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-top: 1px solid var(--line);
font-size: 13.5px;
}
.row:first-of-type { border-top: 0; }
.row .muted { color: var(--muted); font-size: 12.5px; }
.toggle {
width: 40px;
height: 23px;
border-radius: var(--rayon-pilule);
border: 0;
background: var(--line-strong);
position: relative;
cursor: pointer;
flex: none;
}
.toggle[aria-pressed='true'] { background: var(--accent); }
.toggle i {
position: absolute;
top: 3px;
left: 3px;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--blanc);
transition: transform .16s ease;
}
.toggle[aria-pressed='true'] i { transform: translateX(17px); }
.note-box {
background: var(--surface-2);
border-radius: var(--rayon);
padding: 11px 13px;
font-size: 12.5px;
color: var(--muted);
line-height: 1.55;
}
.hint {
background: var(--accent-soft);
color: var(--accent-ink);
border-radius: var(--rayon);
padding: 11px 13px;
font-size: 12.5px;
line-height: 1.55;
}
.danger {
background: var(--warn-soft);
color: var(--warn);
border-radius: var(--rayon);
padding: 11px 13px;
font-size: 12.5px;
line-height: 1.55;
}
.cover {
height: 140px;
position: relative;
overflow: hidden;
background: var(--accent-soft);
}
.cover .sky { position: absolute; inset: 0; background: var(--accent); opacity: .16; }
.cover .r1 {
position: absolute;
left: -6%; right: -6%; bottom: -14px;
height: 92px;
background: var(--accent);
opacity: .34;
border-radius: 52% 48% 0 0 / 100% 96% 0 0;
}
.cover .r2 {
position: absolute;
left: -18%; right: 8%; bottom: -24px;
height: 74px;
background: var(--accent);
opacity: .55;
border-radius: 46% 54% 0 0 / 100% 90% 0 0;
}
.rpg-head { padding: 0 var(--marge); margin-top: -26px; position: relative; }
.rpg-head .crest {
width: 56px;
height: 56px;
font-size: 21px;
border: 3px solid var(--surface);
border-radius: 12px;
}
.rpg-title {
font-family: var(--font-title);
font-size: 24px;
font-weight: 600;
letter-spacing: -.02em;
margin: 11px 0 3px;
}
.tagline {
font-family: var(--font-rp);
font-size: 15px;
line-height: 1.6;
color: var(--muted);
margin: 0;
max-width: var(--largeur-texte);
}
.stats { margin: 13px 0 0; font-size: 13.5px; color: var(--muted); }
.stats b {
font-size: 15.5px;
font-weight: 600;
color: var(--ink);
font-family: var(--font-title);
}
.scene {
border-top: 1px solid var(--line);
padding: 15px 0;
width: 100%;
text-align: left;
background: none;
border-left: 0;
border-right: 0;
border-bottom: 0;
cursor: pointer;
display: block;
color: inherit;
font: inherit;
text-decoration: none;
}
.scene:first-of-type { border-top: 0; }
.scene-title {
font-family: var(--font-title);
font-size: 17px;
font-weight: 600;
letter-spacing: -.01em;
margin: 8px 0 4px;
}
.excerpt {
font-family: var(--font-rp);
font-size: 14.5px;
line-height: 1.6;
color: var(--muted);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.scene-meta { font-size: 12.5px; color: var(--faint); margin: 7px 0 0; }
.turn { padding: 20px 0; border-top: 1px solid var(--line); }
.turn:first-of-type { border-top: 0; padding-top: 0; }
.turn-head { display: flex; gap: 10px; align-items: center; margin-bottom: 11px; }
.turn-head .face { width: 34px; height: 34px; font-size: 12px; }
.turn-name { font-family: var(--font-title); font-size: 15.5px; font-weight: 600; }
.turn-when { font-size: 12px; color: var(--faint); }
.composer {
margin-top: 20px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface-2);
padding: 12px;
}
.as {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: var(--muted);
margin-bottom: 9px;
flex-wrap: wrap;
}
.as select {
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
padding: 4px 9px;
font-size: 12.5px;
}
.ghost {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--rayon-s);
padding: 10px 11px;
color: var(--faint);
font-family: var(--font-rp);
font-size: 15px;
min-height: 60px;
}
.ghost[contenteditable] { color: var(--ink); }
.ghost[contenteditable] h3 {
margin: .9em 0 .35em;
font-family: var(--font-title);
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
.ghost[contenteditable] > :first-child { margin-top: 0; }
.ghost[contenteditable] blockquote {
margin: .6em 0;
padding: 2px 0 2px 12px;
border-left: 3px solid var(--line-strong);
color: var(--muted);
}
.ghost[contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ghost p { margin: 0 0 .7em; }
.ghost p:last-child { margin: 0; }
.ghost.ghost-vide::before {
content: attr(data-invite);
color: var(--faint);
pointer-events: none;
display: block;
}
.ghost blockquote {
margin: .6em 0;
padding-left: 12px;
border-left: 3px solid var(--line-strong);
color: var(--muted);
}
.tools {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 9px;
color: var(--faint);
font-size: 15px;
}
.outils { display: flex; gap: 2px; }
.outil {
width: 34px;
height: 34px;
border: 0;
border-radius: var(--rayon-s);
background: none;
color: var(--muted);
cursor: pointer;
font-size: 14px;
font-family: var(--font-rp);
}
.outil:hover { background: var(--surface); color: var(--ink); }
.outil[data-action='gras'] { font-weight: 700; }
.outil[data-action='italique'] { font-style: italic; }
.prose blockquote {
margin: .8em 0;
padding-left: 14px;
border-left: 3px solid var(--line-strong);
color: var(--muted);
}
.prose ul, .prose ol { margin: .6em 0; padding-left: 1.3em; }
.prose a { color: var(--accent-ink); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 11px;
}
.card { text-align: center; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; text-decoration: none; }
.card .portrait {
width: 100%;
aspect-ratio: 3 / 4;
border-radius: 9px;
display: grid;
place-items: center;
color: var(--blanc);
font-family: var(--font-title);
font-size: 19px;
font-weight: 600;
object-fit: cover;
}
.card span { display: block; font-size: 12.5px; font-weight: 500; margin-top: 5px; line-height: 1.3; }
.card small { color: var(--faint); font-size: 11.5px; }
.msg {
max-width: 80%;
padding: 9px 12px;
border-radius: var(--rayon-l);
font-size: 14px;
line-height: 1.5;
margin-bottom: 8px;
}
.msg.them { background: var(--surface-2); border-bottom-left-radius: 4px; }
.msg.me {
background: var(--accent);
color: var(--sur-accent);
margin-left: auto;
border-bottom-right-radius: 4px;
}
.msg-when { font-size: 11px; color: var(--faint); margin: 0 0 14px; }
.veil {
position: absolute;
inset: 0;
background: var(--voile-50);
display: grid;
place-items: center;
padding: 24px;
z-index: 20;
}
.modal {
background: var(--surface);
border-radius: var(--rayon-l);
padding: 18px;
width: 100%;
max-width: 320px;
}
.modal h3 { font-family: var(--font-title); font-size: 17px; margin: 0 0 6px; }
.modal p { font-size: 13px; color: var(--muted); margin: 0 0 14px; line-height: 1.55; }
.modal .acts { display: flex; gap: 8px; }
.modal .acts .btn { flex: 1; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.centre { text-align: center; }
.lecture-seule {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.chat {
margin-top: 14px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface-2);
padding: 10px 12px;
max-height: 46svh;
overflow-y: auto;
overscroll-behavior: contain;
}
.chat-ligne {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 5px 0;
}
.chat-ligne + .chat-ligne { border-top: 1px solid var(--line); }
.chat-corps { flex: 1; min-width: 0; }
.chat-auteur { font-weight: 600; font-size: 12.5px; }
.chat-quand { font-size: 11px; color: var(--faint); }
.chat-texte {
margin: 1px 0 0;
font-size: 14px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.chat-retirer { flex: none; }
.chat-retirer button {
border: 0;
background: none;
color: var(--faint);
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 2px 4px;
opacity: 0;
}
.chat-ligne:hover .chat-retirer button,
.chat-retirer button:focus-visible { opacity: 1; }
.chat-envoi {
display: flex;
gap: 8px;
margin-top: 10px;
}
.chat-envoi .field { flex: 1; }
.chat-envoi .btn { flex: none; }
.signaler { margin: 10px 0 0; }
.signaler a {
font-size: 11.5px;
color: var(--faint);
text-decoration: none;
}
.signaler a:hover { color: var(--warn); }
.mention {
color: var(--accent-ink);
background: var(--accent-soft);
padding: 0 3px;
border-radius: 4px;
font-weight: 500;
}
.mentions-liste {
position: absolute;
z-index: 30;
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--rayon-s);
box-shadow: 0 6px 18px var(--noir-12);
padding: 4px;
min-width: 160px;
max-height: 200px;
overflow-y: auto;
}
.mentions-liste button {
display: block;
width: 100%;
text-align: left;
border: 0;
background: none;
padding: 7px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13.5px;
}
.mentions-liste button:hover,
.mentions-liste button[aria-selected='true'] {
background: var(--accent-soft);
color: var(--accent-ink);
}
.chiffres {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 10px;
margin-top: 14px;
}
.chiffre {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--rayon-s);
padding: 12px 13px;
}
.chiffre b {
display: block;
font-family: var(--font-title);
font-size: 26px;
font-weight: 600;
line-height: 1.1;
color: var(--ink);
}
.chiffre span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.chiffre em {
display: block;
font-style: normal;
font-size: 12px;
color: var(--faint);
margin-top: 5px;
}
.chiffre em.monte::before,
.chiffre em.baisse::before {
content: '';
display: inline-block;
width: 11px;
height: 11px;
margin-right: 4px;
vertical-align: -1px;
background-color: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
transform: rotate(90deg);
}
.sms-fil { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.sms { max-width: 78%; align-self: flex-start; }
.sms-moi { align-self: flex-end; text-align: right; }
.sms-qui {
font-size: 12px;
color: var(--faint);
margin: 0 0 3px 12px;
}
.sms-texte {
display: inline-block;
text-align: left;
margin: 0;
padding: 9px 13px;
border-radius: 16px;
background: var(--surface-2);
color: var(--ink);
font-size: 14.5px;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.sms-moi .sms-texte { background: var(--accent); color: var(--sur-accent); }
.sms-quand { font-size: 11.5px; color: var(--faint); margin: 3px 12px 0; }
.sms-ecrire { margin-top: 20px; }
.sms-ligne { display: flex; gap: 8px; align-items: center; }
.sms-ligne .field { flex: 1; min-width: 0; }
.sms-ligne .btn { flex: 0 0 auto; }
#chatbox {
position: fixed;
right: 28px;
bottom: 16px;
z-index: 60;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
font-family: var(--font-ui);
}
@media (max-width: 899px) {
#chatbox { right: 12px; }
}
.cb-bulle {
position: relative;
width: 52px;
height: 52px;
border-radius: 50%;
border: 0;
background: var(--accent);
color: var(--sur-accent);
cursor: pointer;
box-shadow: 0 4px 16px var(--noir-22);
display: grid;
place-items: center;
flex: 0 0 auto;
}
.cb-bulle:hover { filter: brightness(1.08); }
.cb-bulle .ico { width: 26px; height: 26px; }
.cb-pastille {
position: absolute;
top: -2px;
right: -2px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: var(--rayon);
background: var(--warn);
color: var(--blanc);
font-size: 11.5px;
font-weight: 600;
line-height: 20px;
text-align: center;
}
.cb-panneau,
.cb-fenetre {
width: min(340px, calc(100vw - 24px));
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--rayon-l);
box-shadow: 0 10px 32px var(--noir-18);
overflow: hidden;
display: flex;
flex-direction: column;
}
.cb-tete,
.cb-fil-tete {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 13px;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
font-size: 13.5px;
font-weight: 600;
}
.cb-tete a { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--accent-ink); }
.cb-liste { max-height: min(50vh, 420px); overflow-y: auto; }
.cb-item {
display: flex;
gap: 10px;
width: 100%;
padding: 10px 13px;
border: 0;
border-bottom: 1px solid var(--line);
background: none;
text-align: left;
cursor: pointer;
color: inherit;
font: inherit;
}
.cb-item:last-child { border-bottom: 0; }
.cb-item:hover { background: var(--surface-2); }
.cb-neuf { background: var(--accent-soft); }
.cb-crest {
display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
color: var(--blanc); font-family: var(--font-title); font-size: 13px; font-weight: 600;
}
.cb-item-corps { flex: 1; min-width: 0; }
.cb-item-haut { display: flex; align-items: center; gap: 6px; }
.cb-item-haut b { font-size: 13.5px; font-weight: 600; }
.cb-item-n {
margin-left: auto;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background: var(--warn);
color: var(--blanc);
font-size: 11px;
line-height: 18px;
text-align: center;
}
.cb-item-extrait,
.cb-item-ou {
display: block;
font-size: 12.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cb-item-ou { color: var(--faint); font-size: 11.5px; margin-top: 1px; }
.cb-vide { padding: 22px 16px; text-align: center; color: var(--faint); font-size: 12.5px; margin: 0; }
.cb-fenetre { height: min(64vh, 480px); }
.cb-fil-retour,
.cb-fil-fermer {
border: 0;
background: none;
cursor: pointer;
color: var(--muted);
font-size: 19px;
line-height: 1;
padding: 2px 5px;
}
.cb-fil-fermer { margin-left: auto; }
.cb-fil-crest { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto; }
.cb-fil-qui { min-width: 0; }
.cb-fil-nom { display: block; font-size: 13.5px; }
.cb-fil-ou { display: block; font-size: 11.5px; color: var(--faint); font-weight: 400; }
.cb-fil-messages {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 8px;
}
.cb-msg { max-width: 80%; align-self: flex-start; }
.cb-msg-moi { align-self: flex-end; }
.cb-msg-qui { font-size: 11px; color: var(--faint); margin: 0 0 2px 10px; }
.cb-msg-moi .cb-msg-qui { display: none; }
.cb-msg-texte {
margin: 0;
padding: 8px 12px;
border-radius: var(--rayon-l);
background: var(--surface-2);
font-size: 14px;
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.cb-msg-moi .cb-msg-texte { background: var(--accent); color: var(--sur-accent); }
.cb-fil-ecrire {
display: flex;
gap: 7px;
padding: 9px 10px;
border-top: 1px solid var(--line);
}
.cb-fil-ecrire textarea {
flex: 1;
min-width: 0;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
padding: 8px 13px;
font: inherit;
font-size: 13.5px;
background: var(--paper);
color: var(--ink);
}
.cb-fil-ecrire button {
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: var(--accent);
color: var(--sur-accent);
cursor: pointer;
font-size: 16px;
flex: 0 0 auto;
}
.cb-sans-js {
padding: 9px 14px;
border-radius: var(--rayon-pilule);
background: var(--accent);
color: var(--sur-accent);
font-size: 13px;
}
.mess { display: flex; gap: 20px; align-items: flex-start; }
.mess-liste { flex: 0 0 320px; min-width: 0; }
.mess-fils { margin-top: 14px; }
.mess-fil {
display: flex;
gap: 10px;
padding: 11px 10px;
border-radius: var(--rayon);
border-bottom: 1px solid var(--line);
color: inherit;
text-decoration: none;
}
.mess-fil:hover { background: var(--surface-2); }
.mess-fil-neuf { background: var(--accent-soft); }
.mess-fil-actif { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.mess-ouverte {
flex: 1;
min-width: 0;
align-self: stretch;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--rayon-l);
overflow: hidden;
min-height: min(70vh, 560px);
}
.mess-tete {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: var(--surface-2);
}
.mess-qui b { display: block; font-size: 14.5px; }
.mess-qui small { display: block; font-size: 12px; color: var(--faint); }
.mess-retour { display: none; font-size: 22px; line-height: 1; color: var(--muted); padding: 0 4px; }
.mess-flux {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 9px;
}
.mess-flux .cb-msg { max-width: min(70%, 520px); }
.mess-flux .cb-msg-texte { font-size: 14.5px; }
.mess-ecrire {
display: flex;
gap: 8px;
padding: 11px 12px;
border-top: 1px solid var(--line);
}
.mess-ecrire .field { flex: 1; min-width: 0; margin: 0; }
.mess-ecrire .btn { flex: 0 0 auto; }
.mess-rien { margin: auto; padding: 32px; text-align: center; max-width: 380px; color: var(--muted); }
@media (max-width: 899px) {
.mess { display: block; }
.mess-liste { flex: none; }
.mess-ouvert .mess-liste { display: none; }
.mess:not(.mess-ouvert) .mess-ouverte { display: none; }
.mess-retour { display: block; }
.mess-ouverte { min-height: calc(100svh - 190px); }
}
.tel-scene { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tel {
position: relative;
width: 340px;
height: 700px;
max-height: calc(100svh - 190px);
background: var(--nuit);
border-radius: 38px;
padding: 10px;
box-shadow: 0 18px 46px var(--noir-32), inset 0 0 0 1px var(--blanc-6);
}
.tel-volume,
.tel-veille {
position: absolute;
width: 3px;
background: var(--nuit-bouton);
border-radius: 3px;
}
.tel-volume { left: -3px; top: 130px; height: 76px; }
.tel-veille { right: -3px; top: 160px; height: 58px; }
.tel-ecran {
position: relative;
height: 100%;
border-radius: 30px;
background: var(--paper);
display: flex;
flex-direction: column;
overflow: hidden;
}
.tel-barre {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 20px 5px;
font-size: 12px;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.tel-barre::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 108px;
height: 22px;
background: var(--nuit);
border-radius: 0 0 12px 12px;
}
.tel-signes { display: flex; align-items: center; gap: 6px; }
:root {
--tel-pile-pleine: #4cd964;
--tel-pile-moyenne: #ffcc00;
--tel-pile-faible: #ff3b30;
}
.tel-reseau { display: flex; align-items: flex-end; gap: 2px; height: 9px; }
.tel-reseau > i { width: 3px; border-radius: 1px; background: currentColor; }
.tel-reseau > i:nth-child(1) { height: 3px; }
.tel-reseau > i:nth-child(2) { height: 5px; }
.tel-reseau > i:nth-child(3) { height: 7px; }
.tel-reseau > i:nth-child(4) { height: 9px; }
.tel-batterie { display: inline-flex; align-items: center; gap: 3px; }
.tel-batterie-corps {
position: relative;
box-sizing: border-box;
width: 24px;
height: 12px;
margin-right: 3px;
border: 1.5px solid color-mix(in srgb, currentColor 65%, transparent);
border-radius: 3px;
}
.tel-batterie-corps::after {
content: '';
position: absolute;
top: 50%;
right: -4.5px;
width: 2px;
height: 5px;
transform: translateY(-50%);
border-radius: 0 1px 1px 0;
background: color-mix(in srgb, currentColor 55%, transparent);
}
.tel-batterie-niveau {
display: block;
width: var(--tel-niveau, 72%);
height: 100%;
border-radius: 1px;
background: var(--tel-pile-pleine);
}
.tel-batterie-moyenne .tel-batterie-niveau { background: var(--tel-pile-moyenne); }
.tel-batterie-faible .tel-batterie-niveau { background: var(--tel-pile-faible); }
.tel-batterie-pct { font-size: 10px; font-weight: 600; opacity: .75; }
.tel-batterie-pct::after { content: attr(data-pct) "\202F%"; }
.tel-appbar {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px 10px;
border-bottom: 1px solid var(--line);
background: var(--surface);
}
.tel-retour {
position: relative;
display: grid; place-items: center;
width: 22px; height: 22px;
color: var(--accent-ink); text-decoration: none;
}
.tel-retour::before { content: ''; position: absolute; inset: -11px; }
.tel-retour .ico { width: 20px; height: 20px; }
.tel-appbar-titre {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-title);
font-size: 16px;
font-weight: 600;
}
.tel-appbar-actions { flex: none; }
.tel-corps { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.tel-corps > * { flex-shrink: 0; }
.tel-home { flex: 0 0 auto; display: grid; place-items: center; padding: 7px 0 9px; }
.tel-home-barre {
position: relative;
width: 118px; height: 5px; border-radius: 3px;
background: var(--line-strong);
}
.tel-home-barre::before { content: ''; position: absolute; inset: -19.5px -24px; }
.tel-accueil { padding: 18px 16px; }
.tel-profil { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-bottom: 22px; }
.tel-profil-portrait {
width: 64px;
height: 64px;
border-radius: 50%;
object-fit: cover;
display: grid;
place-items: center;
color: var(--blanc);
font-family: var(--font-title);
font-size: 21px;
font-weight: 600;
}
.tel-profil b { font-size: 15px; }
.tel-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
.tel-app {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
text-decoration: none;
color: var(--ink);
}
.tel-icone {
width: 58px;
height: 58px;
border-radius: 16px;
display: grid;
place-items: center;
box-shadow: 0 3px 10px var(--noir-16);
}
.tel-icone::after {
content: '';
width: 58%;
height: 58%;
background-color: var(--blanc);
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
.tel-icone-echo     { background: linear-gradient(150deg, #6f5bd6, #4a3aa0); }
.tel-icone-messages { background: linear-gradient(150deg, #4a9d6e, #2f7150); }
.tel-icone-rencontres   { background: linear-gradient(150deg, #d9683f, #a8402a); }
.tel-icone-annonces { background: linear-gradient(150deg, #d7a93f, #a67a1c); }
.tel-icone-livraison { background: linear-gradient(150deg, #4a7fb5, #2c5382); }
.tel-icone-playlist { background: linear-gradient(150deg, #c2559b, #8d356e); }
.tel-icone-meteo { background: linear-gradient(150deg, #3f9fab, #21707c); }
.tel-icone-potins { background: linear-gradient(135deg, #4d1339, #ff3fbf); }
.tel-icone { box-shadow: 0 3px 12px var(--noir-45); }
.tel-icone-echo       { background: linear-gradient(135deg, #0a3a88, #33bbff); }
.tel-icone-messages   { background: linear-gradient(135deg, #044422, #33ee77); }
.tel-icone-rencontres { background: linear-gradient(135deg, #4a0a2a, #e644a8); }
.tel-icone-annonces   { background: linear-gradient(135deg, #032014, #0e5a34); }
.tel-icone-livraison  { background: linear-gradient(135deg, #7a2800, #c46a1a); }
.tel-icone-playlist   { background: linear-gradient(135deg, #d0d0d0, #ffffff); }
.tel-icone-playlist::after { background-color: #8d356e; }
.tel-icone-meteo      { background: linear-gradient(135deg, #0a4045, #44ccbb); }
.tel-icone-img > img[src^="/assets/applis/"] { width: 72%; height: 72%; margin: auto; object-fit: contain; border-radius: 0; }
.tel-app-nom { font-size: 12px; text-align: center; line-height: 1.25; }
.tel-app-n {
position: absolute;
top: -5px;
right: 6px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: var(--rayon);
background: var(--warn);
color: var(--blanc);
font-size: 11.5px;
font-weight: 600;
line-height: 20px;
text-align: center;
}
.tel-changer { margin-top: 26px; text-align: center; }
.tel-changer-lab { display: block; font-size: 11.5px; color: var(--faint); margin-bottom: 5px; }
.tel-changer select {
font: inherit;
font-size: 13px;
padding: 6px 10px;
border-radius: var(--rayon-s);
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--ink);
}
.tel-vide { padding: 26px 18px; text-align: center; color: var(--faint); font-size: 13px; margin: 0; }
.tel-erreur { margin: 10px 12px; padding: 9px 12px; border-radius: 9px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.tel-note { margin: 10px 12px; font-size: 12.5px; color: var(--muted); }
.tel-fils { display: flex; flex-direction: column; }
.tel-fil {
display: flex;
gap: 11px;
padding: 11px 14px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: inherit;
}
.tel-fil-neuf { background: var(--accent-soft); }
.tel-fil-pastille {
width: 42px;
height: 42px;
border-radius: 50%;
flex: 0 0 auto;
display: grid;
place-items: center;
color: var(--blanc);
font-size: 14px;
font-weight: 600;
}
.tel-fil-corps { flex: 1; min-width: 0; }
.tel-fil-haut { display: flex; align-items: center; gap: 6px; }
.tel-fil-haut b { font-size: 14px; }
.tel-fil-point { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; }
.tel-fil-extrait {
display: block;
font-size: 12.5px;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tel-fil-publie { display: inline-block; font-size: 11px; color: var(--faint); margin-top: 2px; }
.tel-sms { flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; }
.tel-ecrire {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 9px 10px;
border-top: 1px solid var(--line);
background: var(--surface);
}
.tel-ecrire .brouillon-note { flex: 1 0 100%; margin: 0; }
.tel-ecrire input {
flex: 1;
min-width: 0;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
padding: 8px 13px;
font: inherit;
font-size: 13.5px;
background: var(--paper);
color: var(--ink);
}
.tel-ecrire button {
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: var(--accent);
color: var(--sur-accent);
cursor: pointer;
font-size: 16px;
flex: 0 0 auto;
}
.tel-nouveau,
.tel-publier { padding: 14px; border-top: 1px solid var(--line); }
.tel-nouveau h3 { font-size: 14px; margin: 0 0 10px; }
.tel-publier summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.tel-lab { display: block; font-size: 11.5px; color: var(--muted); margin: 10px 0 4px; }
.tel-nouveau select,
.tel-nouveau input,
.tel-publier select,
.tel-publier input {
width: 100%;
font: inherit;
font-size: 13px;
padding: 7px 10px;
border-radius: 9px;
border: 1px solid var(--line-strong);
background: var(--paper);
color: var(--ink);
}
.tel-bouton {
width: 100%;
margin-top: 12px;
padding: 9px;
border: 0;
border-radius: var(--rayon-pilule);
background: var(--accent);
color: var(--sur-accent);
font: inherit;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
}
@media (max-width: 899px) {
.tel:not(.td-tel) {
width: 100%;
height: calc(100svh - 132px);
max-height: none;
padding: 0;
border-radius: var(--rayon-l);
box-shadow: none;
background: none;
}
.tel:not(.td-tel) > .tel-volume, .tel:not(.td-tel) > .tel-veille { display: none; }
.tel:not(.td-tel) > .tel-ecran { border-radius: var(--rayon-l); border: 1px solid var(--line); }
.tel:not(.td-tel) .tel-barre::before { display: none; }
}
.ech-stories {
display: flex;
gap: 12px;
padding: 12px;
overflow-x: auto;
border-bottom: 1px solid var(--line);
scrollbar-width: none;
}
.ech-stories::-webkit-scrollbar { display: none; }
.ech-story-pastille {
flex: 0 0 auto;
width: 62px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-decoration: none;
color: inherit;
}
.ech-story-rond {
width: 54px;
height: 54px;
border-radius: 50%;
object-fit: cover;
display: grid;
place-items: center;
color: var(--blanc);
font-size: 16px;
font-weight: 600;
box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}
.ech-story-moi .ech-story-rond { box-shadow: none; font-size: 24px; font-weight: 400; }
.ech-story-pastille span:last-child {
font-size: 11px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.ech-story {
border: 1px solid var(--line);
border-radius: var(--rayon-l);
overflow: hidden;
background: var(--surface);
}
.ech-story img { width: 100%; display: block; }
.ech-story p { margin: 0; padding: 12px 14px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.ech-story small { display: block; padding: 0 14px 11px; font-size: 11.5px; color: var(--faint); }
.ech-poser { padding: 12px; border-bottom: 1px solid var(--line); }
.ech-poser textarea {
width: 100%;
font: inherit;
font-size: 14px;
line-height: 1.5;
padding: 9px 11px;
border-radius: 12px;
border: 1px solid var(--line-strong);
background: var(--paper);
color: var(--ink);
resize: vertical;
}
.ech-poser-pied { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ech-poser-pied input[type="file"] { flex: 1; min-width: 0; font-size: 11px; }
.ech-poser-pied span { display: flex; gap: 6px; flex: 0 0 auto; }
.ech-poser-pied .tel-bouton { width: auto; margin: 0; padding: 7px 14px; font-size: 13px; }
.ech-poser-story {
padding: 7px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: none;
color: var(--ink);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.ech-poser-note { font-size: 11px; color: var(--faint); margin: 8px 0 0; line-height: 1.4; }
.ech-fil { display: flex; flex-direction: column; }
.ech-pub { border-bottom: 1px solid var(--line); padding: 12px 0; }
.ech-pub-tete { display: flex; align-items: flex-start; gap: 9px; padding: 0 12px; }
.ech-qui { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.ech-qui b { display: block; font-size: 13.5px; }
.ech-qui small { display: block; font-size: 11.5px; color: var(--faint); }
.ech-av {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
display: grid;
place-items: center;
color: var(--blanc);
font-size: 13px;
font-weight: 600;
}
.ech-retirer {
border: 0;
background: none;
color: var(--faint);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 3px;
}
.ech-image { width: 100%; display: block; margin-top: 10px; }
.ech-texte {
margin: 10px 0 0;
padding: 0 12px;
font-size: 14px;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ech-pub-pied { display: flex; align-items: center; gap: 14px; padding: 10px 12px 0; }
.ech-jaime {
border: 0;
background: none;
cursor: pointer;
font: inherit;
font-size: 13px;
color: var(--muted);
padding: 0;
}
.ech-jaime-on { color: var(--warn); font-weight: 600; }
.ech-commenter { font-size: 13px; color: var(--muted); text-decoration: none; }
.ech-commentaires { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 11px; }
.ech-com-qui { font-size: 13px; font-weight: 600; color: inherit; text-decoration: none; }
.ech-com-texte { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.ech-com-quand { margin: 2px 0 0; font-size: 11px; color: var(--faint); }
.ech-profil { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ech-banniere { width: 100%; object-fit: cover; display: block; }
.ech-profil-av {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
margin: -38px auto 0;
display: grid;
place-items: center;
color: var(--blanc);
font-family: var(--font-title);
font-size: 24px;
font-weight: 600;
box-shadow: 0 0 0 3px var(--paper);
position: relative;
}
.ech-profil h2 { font-size: 17px; margin: 9px 0 0; }
.ech-soustitre { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.ech-bio { font-size: 13.5px; line-height: 1.5; margin: 9px 14px 0; white-space: pre-wrap; }
.ech-comptes { font-size: 12.5px; color: var(--muted); margin: 11px 0 12px; }
.ech-comptes b { color: var(--ink); }
.ech-profil .tel-bouton { width: auto; margin: 0 auto; padding: 8px 26px; }
.tel-bouton-creux {
background: none;
color: var(--accent-ink);
border: 1px solid var(--line-strong);
}
.ech-editer { margin: 0 14px; text-align: left; }
.ech-editer summary { font-size: 12.5px; color: var(--accent-ink); cursor: pointer; text-align: center; }
.ech-editer textarea,
.ech-editer input[type="file"] {
width: 100%;
font: inherit;
font-size: 13px;
padding: 8px 10px;
border-radius: 9px;
border: 1px solid var(--line-strong);
background: var(--paper);
color: var(--ink);
}
.renc-tete { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: right; }
.renc-lien-matchs { font-size: 12.5px; color: var(--accent-ink); text-decoration: none; }
.renc-annonce {
margin: 12px;
padding: 16px;
border-radius: var(--rayon-l);
background: var(--accent-soft);
text-align: center;
}
.renc-annonce b { display: block; font-family: var(--font-title); font-size: 17px; }
.renc-annonce p { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.renc-annonce .tel-bouton { width: auto; padding: 8px 22px; margin-top: 12px; }
.renc-reglage { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.renc-reglage summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.tel-case { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 13.5px; }
.renc-reglage textarea {
width: 100%;
font: inherit;
font-size: 13px;
line-height: 1.5;
padding: 8px 10px;
border-radius: 9px;
border: 1px solid var(--line-strong);
background: var(--paper);
color: var(--ink);
resize: vertical;
}
.tel-precision { font-size: 11.5px; color: var(--faint); line-height: 1.45; margin: 9px 0 0; }
.renc-carte { padding: 14px; }
.renc-photo {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: 18px;
display: grid;
place-items: center;
color: var(--blanc);
font-family: var(--font-title);
font-size: 40px;
font-weight: 600;
}
.renc-carte-texte { margin-top: 12px; }
.renc-carte-texte h3 { font-size: 19px; margin: 0; }
.renc-soustitre { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.renc-accroche { font-size: 13.5px; line-height: 1.5; margin: 9px 0 0; white-space: pre-wrap; }
.renc-choix { display: flex; justify-content: center; gap: 26px; margin-top: 18px; }
.renc-passer,
.renc-aimer {
width: 58px;
height: 58px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--surface);
cursor: pointer;
font-size: 21px;
line-height: 1;
box-shadow: 0 3px 12px var(--noir-12);
}
.renc-passer { color: var(--muted); }
.renc-aimer { color: var(--blanc); background: var(--renc-aimer); border-color: var(--renc-aimer); }
.renc-reste { text-align: center; font-size: 11.5px; color: var(--faint); margin: 14px 0 0; }
.renc-matchs { display: flex; flex-direction: column; }
.renc-match {
display: flex;
align-items: center;
gap: 11px;
padding: 11px 14px;
border-bottom: 1px solid var(--line);
}
.renc-match-av {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
display: grid;
place-items: center;
color: var(--blanc);
font-size: 15px;
font-weight: 600;
}
.renc-match-corps { flex: 1; min-width: 0; }
.renc-match-corps b { display: block; font-size: 14px; }
.renc-match-corps small { display: block; font-size: 11.5px; color: var(--faint); }
.renc-match-ecrire {
flex: 0 0 auto;
padding: 6px 14px;
border-radius: var(--rayon-pilule);
background: var(--accent);
color: var(--sur-accent);
font-size: 12.5px;
text-decoration: none;
}
.ech-fichier {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: none;
color: var(--muted);
font-size: 12.5px;
cursor: pointer;
}
.ech-fichier::before {
content: '';
flex: 0 0 auto;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
.ech-fichier input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ech-fichier-nom {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ech-editer .ech-fichier { display: flex; width: 100%; margin-top: 4px; }
.renc-carte {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.renc-carte .renc-photo {
flex: 1;
min-height: 110px;
aspect-ratio: auto;
width: 100%;
}
.renc-carte .renc-carte-texte { flex: 0 0 auto; }
.renc-carte .renc-choix { flex: 0 0 auto; margin-top: 14px; }
.renc-carte .renc-reste { flex: 0 0 auto; margin-top: 10px; }
@media (max-width: 899px) {
.scroll-corps > .page,
.scroll-corps > .couverture + .page { padding-bottom: 76px; }
}
@media (max-width: 899px) {
.scroll-corps > .page:has(> .mess) { padding-bottom: 16px; }
}
.lien-qui { flex: 0 0 auto; }
.lien-qui .crest { object-fit: cover; }
.lien-attente { background: var(--accent-soft); border-radius: var(--rayon); padding: 10px; }
.lien-proposer { margin-top: 14px; }
.lien-communs { margin: 10px 0 4px; }
.lien-communs ul { margin: 6px 0 0; padding-left: 18px; }
.lien-communs li + li { margin-top: 3px; }
.lien-proposer summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.chrono-entree {
display: flex;
gap: 12px;
padding: 0 0 16px;
position: relative;
}
.chrono-entree:not(:last-of-type)::before {
content: '';
position: absolute;
left: 5px;
top: 16px;
bottom: 0;
width: 1px;
background: var(--line);
}
.chrono-moment {
flex: 0 0 92px;
font-size: 12px;
color: var(--muted);
padding-left: 18px;
position: relative;
line-height: 1.5;
}
.chrono-moment::before {
content: '';
position: absolute;
left: 1px;
top: 5px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
}
.chrono-corps { flex: 1 1 auto; min-width: 0; }
.chrono-titre { font-size: 14px; font-weight: 600; }
.chrono-outils { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.chrono-outils form { margin: 0; }
.chrono-editer { margin-top: 8px; }
.chrono-editer summary,
.chrono-ajout summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.chrono-ajout { margin-top: 6px; }
@media (max-width: 419px) {
.chrono-entree { display: block; }
.chrono-moment { display: block; margin-bottom: 2px; }
.chrono-corps { padding-left: 18px; }
}
.journal-entete { display: flex; gap: 8px; margin-bottom: 8px; }
.journal-entete .field { margin: 0; }
.journal-entete .field:first-child { flex: 0 0 38%; }
.journal-entete .field:last-child { flex: 1 1 auto; }
.journal-choix { display: flex; gap: 8px; margin-top: 10px; }
.journal-choix .btn { flex: 1 1 0; }
.journal-page {
padding: 16px 0;
border-top: 1px solid var(--line);
}
.journal-titre {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.journal-prive {
border-left: 3px solid var(--line-strong);
padding-left: 12px;
}
.journal-outils { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.journal-outils form { margin: 0; }
.journal-reprendre { margin-top: 8px; }
.journal-reprendre summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
@media (max-width: 419px) {
.journal-entete { display: block; }
.journal-entete .field { margin-bottom: 8px; }
}
.objet {
display: flex;
padding: 10px 0;
border-bottom: 1px solid var(--line);
}
.objet:last-of-type { border-bottom: 0; }
.objet-nom { font-weight: 600; font-size: 14px; }
.objet-partance { opacity: .72; }
.objet-offert {
background: var(--accent-soft);
border-radius: var(--rayon);
border-bottom: 0;
padding: 12px;
margin-top: 8px;
}
.objet-outils { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.objet-outils form { margin: 0; }
.objet-editer { margin-top: 8px; }
.objet-editer summary,
.objet-ajout summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.objet-ajout { margin-top: 14px; }
.succes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 4px 0 8px; }
.succes {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
}
.succes .item-body { display: flex; flex-direction: column; gap: 3px; }
.succes .item-name { font-family: var(--font-title); font-size: 16.5px; }
.succes .meta, .succes .mine { margin: 0; }
.succes-obtenu { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
.succes-marque {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 18px;
background: var(--accent);
color: var(--sur-accent);
}
.succes-vide {
background: var(--surface-2);
color: var(--faint);
}
.jauge {
display: block;
height: 4px;
margin-top: 8px;
border-radius: 99px;
background: var(--surface-2);
overflow: hidden;
}
.jauge-pleine {
display: block;
height: 100%;
background: var(--accent);
}
.ann-poser { margin-bottom: 18px; }
.ann-poser summary,
.ann-repondre summary,
.ann-reponses summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.annonce {
padding: 16px 0;
border-top: 1px solid var(--line);
}
.ann-tete { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.ann-qui { flex: 0 0 auto; }
.ann-qui .crest { object-fit: cover; }
.ann-nature {
display: inline-block;
margin: 6px 0 0;
padding: 2px 10px;
border-radius: var(--rayon-pilule);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 12px;
}
.ann-texte {
font-family: var(--font-title);
font-size: 15px;
line-height: 1.6;
margin: 0;
}
.annonce-fanee .ann-texte,
.annonce-fanee .ann-tete { opacity: .68; }
.ann-outils { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ann-outils form { margin: 0; }
.ann-reponses { margin-top: 10px; }
.ann-reponse {
padding: 10px 0 0;
border-top: 1px solid var(--line);
margin-top: 10px;
}
.ann-reponse:first-of-type { border-top: 0; }
.ann-repondre { margin-top: 10px; }
.lieu {
display: flex;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.lieu:last-of-type { border-bottom: 0; }
.lieu-ferme { opacity: .6; }
.lieu-outils { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lieu-outils form { margin: 0; }
.lieu-editer { margin-top: 8px; }
.lieu-editer summary,
.lieu-ajout summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.fiche-editer { margin-bottom: 14px; }
.fiche-editer summary { font-size: 13px; cursor: pointer; color: var(--accent-ink); }
.predefini {
padding: 16px 0;
border-top: 1px solid var(--line);
}
.pre-tete { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.pre-tete .crest { flex: 0 0 auto; object-fit: cover; }
.pre-liens {
margin: 10px 0 0;
padding: 10px 12px;
border-radius: var(--rayon);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 14px;
}
#jeu { position: relative; }
.jeu-fin {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 16px;
text-align: center;
border-radius: var(--rayon-l);
background: color-mix(in oklab, var(--paper) 88%, transparent);
backdrop-filter: blur(2px);
}
.jeu-fin-titre { margin: 0; font-family: var(--font-title); font-size: 20px; }
.jeu-fin-score { margin: 0; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.jeu-fin-mot   { margin: 0 0 6px; color: var(--muted); font-size: 14px; min-height: 1.2em; }
@media (prefers-reduced-motion: no-preference) {
.jeu-fin { animation: jeu-fin-paraitre .18s ease-out; }
@keyframes jeu-fin-paraitre { from { opacity: 0; transform: scale(.97); } }
}
.jeu-barre {
display: flex;
gap: 18px;
align-items: baseline;
margin: 14px 0 12px;
font-size: 14px;
color: var(--muted);
}
.jeu-barre b { color: var(--ink); font-size: 17px; }
.jeu-grille {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: min(100%, 380px);
aspect-ratio: 1;
padding: 8px;
border-radius: var(--rayon-l);
background: var(--surface-2);
touch-action: none;
user-select: none;
}
.jeu-case {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--rayon-s);
background: var(--gris-7);
font-family: var(--font-title);
font-size: clamp(15px, 5vw, 24px);
color: var(--ink);
transition: background .12s ease;
}
.jeu-case[data-v="0"]    { background: transparent; color: transparent; }
.jeu-case[data-v="2"]    { background: var(--gris-14); }
.jeu-case[data-v="4"]    { background: var(--gris-26); }
.jeu-case[data-v="8"]    { background: var(--gris-40); }
.jeu-case[data-v="16"]   { background: var(--gris-55); font-weight: 600; }
.jeu-case[data-v="32"]   { background: var(--accent); color: var(--sur-accent); }
.jeu-case[data-v="64"]   { background: var(--accent); color: var(--sur-accent); font-weight: 600; }
.jeu-case[data-v="128"],
.jeu-case[data-v="256"],
.jeu-case[data-v="512"]  { background: var(--accent); color: var(--sur-accent); font-weight: 700; }
.jeu-case[data-v="1024"],
.jeu-case[data-v="2048"] { background: var(--bandeau); color: var(--sur-bandeau); font-weight: 700; }
@supports (background: color-mix(in oklab, red 50%, blue)) {
.jeu-case[data-v="32"]   { background: color-mix(in oklab, var(--accent) 38%, var(--paper)); color: var(--ink); }
.jeu-case[data-v="64"]   { background: color-mix(in oklab, var(--accent) 58%, var(--paper)); color: var(--ink); font-weight: 600; }
.jeu-case[data-v="128"]  { background: color-mix(in oklab, var(--accent) 78%, var(--paper)); color: var(--ink); font-weight: 700; }
.jeu-case[data-v="256"]  { background: var(--accent); color: var(--sur-accent); font-weight: 700; }
.jeu-case[data-v="512"]  { background: color-mix(in oklab, var(--accent) 45%, var(--bandeau)); color: var(--sur-bandeau); font-weight: 700; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 70%, transparent); }
.jeu-case[data-v="1024"] { background: color-mix(in oklab, var(--accent) 20%, var(--bandeau)); color: var(--sur-bandeau); font-weight: 700; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent); }
.jeu-case[data-v="2048"] { background: var(--bandeau); color: var(--sur-bandeau); font-weight: 700; box-shadow: inset 0 0 0 2px var(--accent); }
}
.jeu-cartes {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: min(100%, 380px);
}
.jeu-carte {
aspect-ratio: 3 / 4;
min-height: 44px;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
background: var(--surface-2);
font-size: clamp(20px, 7vw, 30px);
line-height: 1;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.jeu-carte.ouverte { background: var(--surface); border-color: var(--line-strong); }
.jeu-carte.trouvee { background: var(--accent-soft); border-color: var(--accent); cursor: default; }
.jeu-paires-hud { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.jeu-paires-hud b { color: var(--ink); font-variant-numeric: tabular-nums; }
.jeu-paires-hud b.jeu-presse { color: var(--warn); }
.pastille {
position: absolute;
top: -2px;
right: -4px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: var(--rayon-pilule);
background: var(--accent);
color: var(--sur-accent);
font-size: 10.5px;
font-weight: 600;
line-height: 17px;
text-align: center;
}
.crest-s {
flex: none;
width: 26px;
height: 26px;
border-radius: var(--rayon-s);
font-size: 10px;
line-height: 26px;
text-align: center;
}
@media (min-width: 900px) {
.page { max-width: 1080px; }
.prose,
.page > .sub,
.page > p.mine,
.hint,
.note-box { max-width: 64ch; }
.section > .item,
.section > .annonce,
.section > .predefini {
break-inside: avoid;
}
.section:has(> .item + .item) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 24px;
align-items: start;
}
.section:has(> .item + .item) > h2,
.section:has(> .item + .item) > .sub,
.section:has(> .item + .item) > .mine,
.section:has(> .item + .item) > form,
.section:has(> .item + .item) > details { grid-column: 1 / -1; }
.scroll:has(.scene) .page > .scene { break-inside: avoid; }
.rpg-head { max-width: 1080px; }
}
@media (min-width: 1400px) {
.page { max-width: 1180px; }
.rpg-head { max-width: 1180px; }
}
@media (min-width: 900px) {
.mess {
align-items: stretch;
height: calc(100dvh - 200px);
min-height: 420px;
}
.mess-liste { overflow-y: auto; }
}
@media (max-width: 899px) {
.mess-ouvert .mess-ouverte {
height: calc(100svh - 136px);
min-height: 0;
}
}
.filtres {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-bottom: 14px;
}
.composeur {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding: 12px 15px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: inherit;
text-decoration: none;
}
.composeur:hover { border-color: var(--line-strong); }
.composeur .invite { flex: 1; color: var(--faint); font-size: 14.5px; }
.composeur-outils { display: flex; gap: 4px; color: var(--muted); }
.carte {
margin-bottom: 20px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
overflow: hidden;
}
.carte-tete {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px 0;
}
.portrait {
display: grid;
place-items: center;
flex: none;
width: 52px;
height: 52px;
border-radius: 16px;
color: var(--blanc);
font-family: var(--font-title);
font-size: 15px;
font-weight: 600;
}
.portrait-s { width: 38px; height: 38px; border-radius: 12px; font-size: 12.5px; }
.porte-ecu { position: relative; flex: none; }
.porte-ecu .ecu-coin {
position: absolute;
right: -4px;
bottom: -4px;
display: grid;
place-items: center;
width: 21px;
height: 21px;
border: 2px solid var(--surface);
border-radius: var(--rayon-s);
color: var(--blanc);
font-family: var(--font-title);
font-size: 8.5px;
font-weight: 600;
letter-spacing: -.02em;
}
.carte-qui { flex: 1; min-width: 0; }
.carte-nom { font-size: 15.5px; font-weight: 600; }
.carte-ou { margin: 1px 0 0; font-size: 12.5px; color: var(--muted); }
.carte-ou a { color: var(--accent-ink); font-weight: 500; text-decoration: none; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 0; }
.etiq {
padding: 3px 9px;
border-radius: var(--rayon-pilule);
background: var(--surface-2);
color: var(--muted);
font-size: 11.5px;
font-weight: 500;
}
.etiq.vive { background: var(--accent-soft); color: var(--accent-ink); }
.carte-titre {
display: block;
margin: 10px 16px 0;
font-family: var(--font-title);
font-size: 18px;
font-weight: 600;
letter-spacing: -.01em;
color: inherit;
text-decoration: none;
}
.carte-titre:hover { color: var(--accent-ink); }
.carte-texte {
margin: 9px 16px 0;
font-size: 14.5px;
color: var(--muted);
}
.carte-pied {
display: flex;
align-items: center;
gap: 4px;
margin-top: 12px;
padding: 8px 10px;
border-top: 1px solid var(--line);
}
.acte {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 38px;
padding: 8px 12px;
border-radius: var(--rayon-s);
color: var(--muted);
font-size: 13.5px;
font-weight: 500;
text-decoration: none;
}
.acte:hover { background: var(--surface-2); color: var(--ink); }
.acte.principal {
margin-left: auto;
background: var(--accent-soft);
color: var(--accent-ink);
}
.date-bloc {
display: grid;
place-items: center;
flex: none;
width: 50px;
height: 54px;
border-radius: var(--rayon);
background: var(--surface-2);
line-height: 1.15;
text-align: center;
}
.date-bloc b { font-family: var(--font-title); font-size: 20px; font-weight: 600; }
.date-bloc span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; }
.rpg-suivre {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 0 0;
}
.rpg-suivre .mine { margin: 0; }
.form-suivre { display: inline-flex; }
.btn-suivi {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent-ink);
font-weight: 600;
}
.ej-outils {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.ej-outils .field { margin: 0; }
.ej-outils select { flex: 0 0 auto; width: auto; }
.sms-liste { display: grid; gap: 10px; }
.sms-entree {
display: grid;
gap: 3px;
padding: 13px 15px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: inherit;
text-decoration: none;
}
.sms-entree:hover { border-color: var(--accent); }
.sms-entree-qui { font-size: 14px; font-weight: 600; }
.sms-entree-titre { font-size: 14px; color: var(--ink); }
.sms-entree-pied { font-size: 12px; color: var(--faint); }
.sms-lecture {
margin: 18px 0;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
}
.sms-ligne + .sms-ligne { margin-top: 9px; }
.sms-lecture .sms-qui {
margin: 0 0 3px;
font-size: 12px;
font-weight: 600;
}
.sms-ligne + .sms-ligne .sms-qui { margin-top: 13px; }
.sms-lecture .sms-texte {
max-width: 80%;
margin: 0;
padding: 8px 12px;
border-radius: 15px;
background: var(--paper);
font-size: 14px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.sms-reglage {
padding: 15px 17px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
}
.sms-reglage form { margin-top: 11px; }
.sms-demandes {
margin: 10px 0 0;
padding-left: 19px;
font-size: 13px;
color: var(--faint);
}
.sms-vers-tel { margin: 13px 0 0; font-size: 13px; }
.sms-apercu {
display: block;
margin: 11px 0 0;
padding: 10px 13px;
border-radius: var(--rayon-l);
background: var(--paper);
color: inherit;
font-size: 14px;
line-height: 1.5;
text-decoration: none;
}
.sms-apercu b { margin-right: 6px; font-weight: 600; }
.sms-apercu:hover { background: var(--line); }
.tel-vis {
margin: 12px 0 0;
padding: 0;
border: 0;
}
.tel-vis label {
display: block;
margin-bottom: 7px;
font-size: 12px;
line-height: 1.45;
}
.tel-vis input { width: auto; margin: 0 6px 0 0; display: inline; vertical-align: -2px; }
.reacs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 10px 0 0;
}
.reac {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 28px;
padding: 3px 9px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--faint);
font-size: 13px;
line-height: 1;
cursor: pointer;
}
.reac:hover { border-color: var(--accent); }
.reac-mienne {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--ink);
font-weight: 600;
}
.reacs-palette { position: relative; }
.reacs-palette > summary {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 3px 9px;
border: 1px solid transparent;
border-radius: var(--rayon-pilule);
color: var(--faint);
font-size: 13px;
line-height: 1;
list-style: none;
cursor: pointer;
}
.reacs-palette > summary::-webkit-details-marker { display: none; }
.reacs-palette > summary:hover { border-color: var(--line); color: var(--ink); }
.reacs-choix {
position: absolute;
z-index: 5;
bottom: calc(100% + 6px);
left: 0;
display: flex;
gap: 2px;
padding: 5px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface);
box-shadow: 0 6px 20px var(--noir-12);
}
.reacs-choix .reac {
min-width: 34px;
justify-content: center;
padding: 5px 7px;
border-color: transparent;
background: transparent;
font-size: 17px;
}
.reacs-choix .reac:hover { background: var(--paper); }
.reacs-muettes .reac { cursor: default; }
.reacs-muettes .reac:hover { border-color: var(--line); }
.msg .reacs, .sms-ligne .reacs, .mess-bulle .reacs { margin-top: 5px; }
.msg .reac, .sms-ligne .reac, .mess-bulle .reac { min-height: 24px; padding: 2px 7px; font-size: 12px; }
.turn-actes {
display: flex;
align-items: center;
gap: 14px;
margin: 10px 0 0;
font-size: 12px;
}
.turn-actes a,
.turn-actes button {
padding: 6px 4px;
margin: -6px -4px;
border: 0;
background: none;
color: var(--faint);
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
.turn-actes a:hover { color: var(--accent); text-decoration: underline; }
.turn-actes button:hover { color: var(--warn); text-decoration: underline; }
.turn-actes form { display: inline; }
.turn-actes { flex-wrap: wrap; row-gap: 4px; }
.turn-retire {
margin: 18px 0;
padding: 11px 15px;
border: 1px dashed var(--line);
border-radius: var(--rayon-l);
color: var(--faint);
font-size: 13px;
font-style: italic;
}
.msg-retire {
color: var(--faint);
font-size: 13px;
font-style: italic;
}
.turn form textarea,
.sms-lecture form textarea { width: 100%; }
#tel-dock {
position: fixed;
right: 94px;
bottom: 16px;
z-index: 60;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
font-family: var(--font-ui);
}
@media (max-width: 899px) {
#tel-dock { right: 76px; }
}
.td-tel {
--td-reserve: calc(var(--hauteur-entete, 60px) + 8px + 16px + 52px + 12px + env(safe-area-inset-bottom, 0px));
--td-largeur-dispo: calc(100vw - 32px);
--td-haut-max: calc(280px * 19.5 / 9);
aspect-ratio: 9 / 19.5;
width: auto;
height: min(var(--td-haut-max), calc(100dvh - var(--td-reserve)), calc(var(--td-largeur-dispo) * 19.5 / 9));
max-height: none;
border-radius: 34px;
padding: 9px;
}
.td-tel .tel-ecran { border-radius: 25px; }
.td-tel .tel-barre { padding-left: 28px; padding-right: 26px; }
#tel-dock .td-tel { min-width: 0; }
.td-tel .td-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; container-type: inline-size; }
.td-tel .td-apps .tel-app { min-width: 0; }
.td-tel .td-apps .tel-icone { width: min(58px, 100%); height: auto; aspect-ratio: 1; }
.td-tel .td-apps .tel-app-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: min(12px, 6.2cqi); }
.td-tel .tel-volume { top: 110px; height: 64px; }
.td-tel .tel-veille { top: 136px; height: 50px; }
.td-ecran, .td-ecran * { scrollbar-width: none; }
.td-ecran ::-webkit-scrollbar { display: none; }
.td-accueil { flex-grow: 1; padding: 18px 16px 6px; }
.td-tel button.tel-app {
padding: 0;
border: 0;
background: none;
font-family: inherit;
cursor: pointer;
}
.td-tel .tel-fil {
width: 100%;
border-left: 0;
border-right: 0;
border-top: 0;
background: none;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.td-fil { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.td-fil .tel-sms { flex: 1; overflow-y: auto; }
.td-fils, .td-fil { height: 100%; }
.td-appbar button.tel-retour {
border: 0;
background: none;
cursor: pointer;
}
.td-home { border: 0; cursor: pointer; }
.td-bulle {
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 52px;
height: 52px;
border: 0;
border-radius: 50%;
background: var(--ink);
color: var(--paper);
box-shadow: 0 4px 16px var(--noir-22);
cursor: pointer;
}
.td-bulle:hover { filter: brightness(1.25); }
.td-bulle .ico { width: 26px; height: 26px; }
.td-pastille {
position: absolute;
top: -2px;
right: -2px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: var(--rayon);
background: var(--warn);
color: var(--blanc);
font-size: 11.5px;
font-weight: 600;
line-height: 20px;
text-align: center;
}
@media (max-width: 599px) {
.td-tel {
position: fixed;
inset: 0;
width: auto;
height: auto;
padding: 0;
border-radius: 0;
background: var(--paper);
box-shadow: none;
}
.td-tel .tel-ecran { border-radius: 0; border: 1px solid var(--line); }
.td-tel .tel-volume, .td-tel .tel-veille, .td-tel .tel-barre::before { display: none; }
}
.td-sans-js {
padding: 8px 12px;
border-radius: var(--rayon-pilule);
background: var(--ink);
color: var(--paper);
font-size: 13px;
}
.bottin-chercher {
display: flex;
gap: 8px;
margin-top: 14px;
}
.bottin-chercher .field { flex: 1; min-width: 0; margin: 0; }
.bottin-chercher .btn, .bottin-poser .btn { flex: 0 0 auto; width: auto; }
.bottin { display: grid; }
.bottin-ligne {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
padding: 10px 12px;
border-bottom: 1px solid var(--line);
border-left: 3px solid transparent;
}
.bottin-ligne:last-child { border-bottom: 0; }
.bottin-pris     { border-left-color: var(--accent); }
.bottin-reserve  { border-left-color: var(--line-strong); }
.bottin-interdit { border-left-color: var(--warn); }
.bottin-nom { flex: 0 0 auto; font-size: 14.5px; font-weight: 600; }
.bottin-quoi { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.bottin-quoi .mine { font-size: 12.5px; }
.bottin-actes { display: flex; gap: 10px; }
.bottin-actes form { display: inline; }
.bottin-actes button {
padding: 0;
border: 0;
background: none;
color: var(--faint);
font-size: 12px;
cursor: pointer;
}
.bottin-actes button:hover { color: var(--warn); text-decoration: underline; }
.bottin-poser { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bottin-poser .field { flex: 1; min-width: 160px; margin: 0; }
.etiq.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.vide {
margin: 16px 0;
padding: 14px 16px;
border: 1px dashed var(--line);
border-radius: var(--rayon-l);
color: var(--faint);
font-size: 13.5px;
}
.scroll { padding-bottom: 84px; }
.clavier-bloc { display: contents; }
.clavier {
height: 34px;
max-width: 168px;
margin-left: 4px;
padding: 0 6px;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
background: var(--surface);
color: var(--muted);
font-family: inherit;
font-size: 13px;
}
.clavier:hover { color: var(--ink); }
.clavier-note {
flex: 1 0 100%;
margin-top: 6px;
color: var(--faint);
font-size: 12px;
line-height: 1.45;
}
.clavier-pastilles { flex: 1 1 100%; margin-top: 4px; }
.outils { flex-wrap: wrap; align-items: center; }
@media (max-width: 599px) {
.clavier { flex: 1 1 auto; max-width: none; margin-left: 0; }
.outils { gap: 6px; }
}
.ami {
display: inline-flex;
align-items: center;
gap: 8px;
color: inherit;
font-size: 14px;
text-decoration: none;
}
.ami:hover { color: var(--accent-ink); }
.ami-ligne {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
padding: 10px 2px;
border-bottom: 1px solid var(--line);
}
.ami-ligne:last-child { border-bottom: 0; }
.ami-ligne .ami { flex: 1; min-width: 0; }
.ami-actes { display: flex; gap: 8px; }
.ami-actes form { display: inline; }
.ami-actes button:not(.btn) {
padding: 0;
border: 0;
background: none;
color: var(--faint);
font-size: 12px;
cursor: pointer;
}
.ami-actes button:not(.btn):hover { color: var(--warn); text-decoration: underline; }
.amis-reglage { margin-top: 12px; }
.amis-reglage .choix {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 9px 0;
font-size: 14px;
}
.amis-reglage .choix span { display: grid; }
.amis-reglage .choix .mine { font-size: 12.5px; }
.amis-reglage .btn { width: auto; margin-top: 10px; }
.mot {
margin: 0 0 10px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.mot-attente { border-style: dashed; }
.mots-attente { margin-bottom: 16px; }
.mot-texte { margin: 0; line-height: 1.5; }
.mot-pied { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.mot-inline { display: inline; }
.mot-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.mot-actes form { display: inline; }
.mot-lien {
padding: 0;
border: 0;
background: none;
color: var(--muted);
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.mot-ecrire { margin-top: 12px; }
.mot-ecrire summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.mot-ecrire form { margin-top: 10px; }
.mot-ecrire .btn { width: auto; }
.ville-groupe + .ville-groupe { margin-top: 28px; }
.ville-groupe-tete {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.ville-groupe-tete h2 {
margin: 0;
color: var(--accent-ink);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.ville-groupe-tete::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.ville-groupe-n {
min-width: 20px;
padding: 1px 7px;
border-radius: var(--rayon);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 11px;
font-weight: 600;
text-align: center;
}
.ville-lieux {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 10px;
}
.ville-lieu {
display: block;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: inherit;
text-decoration: none;
}
.ville-lieu:hover { border-color: var(--accent); }
.ville-lieu-tete {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.ville-lieu-nom {
font-family: var(--font-title);
font-size: 17px;
font-weight: 600;
}
.ville-lieu-desc { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.ville-lieu-vide { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; }
.ville-scenes {
margin: 11px 0 0;
padding: 10px 0 0;
border-top: 1px solid var(--line);
list-style: none;
}
.ville-scenes li + li { margin-top: 6px; }
.ville-scene-titre { display: block; font-size: 13.5px; }
.ville-scene-meta { color: var(--faint); font-size: 12px; }
.ville-type-staff .ville-lieu { border-style: dashed; }
.envoi-rate textarea,
.envoi-rate .ghost[contenteditable],
.envoi-rate input[type="text"] { border-color: var(--warn); }
.envoi-echec {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 10px;
padding: 9px 12px;
border: 1px solid var(--warn);
border-radius: var(--rayon);
background: color-mix(in srgb, var(--warn) 12%, transparent);
color: var(--ink);
font-size: 13px;
}
.envoi-echec span { flex: 1 1 220px; }
.envoi-reessayer {
padding: 4px 10px;
border: 1px solid var(--warn);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--warn);
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.envoi-reessayer:hover { background: var(--warn); color: var(--blanc); }
.envoi-bulle-rate > p:first-child {
outline: 1.5px solid var(--warn);
outline-offset: -1.5px;
opacity: .85;
}
.envoi-bulle-etat {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin: 4px 0 0;
color: var(--warn);
font-size: 11.5px;
}
.envoi-bulle-rate .envoi-reessayer { padding: 1px 8px; font-size: 11.5px; }
.brouillon-note { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; }
.brouillon-effacer {
padding: 0;
border: 0;
background: none;
color: var(--accent-ink);
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.td-cadre { height: 100%; }
.td-iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--paper); }
html[data-dock] body { background: var(--paper); }
html[data-dock] .app { display: block; min-height: 0; }
html[data-dock], html[data-dock] body { overflow: hidden; }
html[data-dock] .scroll { height: 100vh; overflow: hidden; }
html[data-dock]:not(.td-dans-fenetre),
html[data-dock]:not(.td-dans-fenetre) * { scrollbar-width: none; }
html[data-dock]:not(.td-dans-fenetre) ::-webkit-scrollbar { display: none; }
html[data-dock].td-dans-fenetre .tel-corps { scrollbar-width: thin; }
html[data-dock] .page { padding: 0; max-width: none; }
html[data-dock] .tel-scene { gap: 0; }
html[data-dock] .tel {
width: 100%;
height: 100vh;
max-height: none;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
html[data-dock] .tel-ecran, html[data-dock] .tel > .tel-ecran { border: 0; border-radius: 0; }
html[data-dock] .tel-barre,
html[data-dock] .tel-home,
html[data-dock] .tel-volume,
html[data-dock] .tel-veille { display: none; }
.td-bas { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; gap: 10px; padding: 4px 12px 6px; }
.td-bas .td-home { grid-column: 2; }
.td-home { position: relative; width: 44px; height: 32px; padding: 0; border-radius: var(--rayon-s); background: none; color: var(--muted); }
.td-home::before { content: ''; position: absolute; inset: -6px 0; }
.td-home:hover { background: var(--surface); color: var(--ink); }
.td-home .ico { width: 20px; height: 20px; }
.td-taille,
.td-sortir {
position: relative;
width: 28px;
height: 22px;
padding: 0;
border: 0;
border-radius: var(--rayon-s);
background: none;
color: var(--muted);
font: inherit;
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.td-taille::before,
.td-sortir::before { content: ''; position: absolute; inset: -11px -8px; }
.td-taille:hover,
.td-sortir:hover { background: var(--surface); color: var(--ink); }
#tel-dock.td-grand .td-tel { --td-haut-max: 860px; }
@media (min-width: 600px) {
#tel-dock.td-grand .tel-corps { font-size: 15px; }
}
#tel-dock.td-taille-anime .td-tel { transition: height .3s ease-out; }
@media (max-width: 599px) {
.td-taille { visibility: hidden; }
}
.td-bureau { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.td-bureau.td-glisse .td-fen-cadre { pointer-events: none; }
.td-fen {
position: absolute;
display: flex;
flex-direction: column;
width: 460px;
height: min(680px, calc(100vh - 120px));
min-width: 300px;
min-height: 260px;
max-width: calc(100vw - 16px);
max-height: calc(100vh - 16px);
overflow: hidden;
resize: both;
pointer-events: auto;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--paper);
box-shadow: 0 18px 50px var(--noir-35);
animation: td-fen-arrive .16s ease-out;
}
.td-fen[hidden] { display: none; }
.td-fen-active { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 22px 64px var(--noir-45); }
@keyframes td-fen-arrive { from { opacity: 0; transform: scale(.96) translateY(8px); } }
.td-fen-barre {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
padding: 7px 8px 7px 14px;
border-bottom: 1px solid var(--line);
background: var(--surface);
cursor: grab;
user-select: none;
touch-action: none;
}
.td-fen-barre:active { cursor: grabbing; }
.td-fen-titre { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.td-fen-actes { display: flex; gap: 4px; }
.td-fen-bouton {
width: 26px;
height: 24px;
padding: 0;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--paper);
color: var(--muted);
font: inherit;
font-size: 13px;
line-height: 1;
cursor: pointer;
}
.td-fen-bouton:hover { color: var(--ink); border-color: var(--accent); }
.td-fen-fermer:hover { color: var(--warn); border-color: var(--warn); }
.td-fen-cadre { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--paper); }
.td-fen.td-fen-grande {
top: 16px !important;
left: 16px !important;
width: calc(100vw - 32px) !important;
height: calc(100vh - 32px) !important;
resize: none;
}
.td-fen.td-fen-grande .td-fen-barre { cursor: default; }
.td-reduites {
position: fixed;
left: 50%;
transform: translateX(-50%);
justify-content: center;
bottom: 16px;
z-index: 71;
display: flex;
flex-wrap: wrap;
gap: 6px;
max-width: calc(100vw - 200px);
}
.td-pastille-fen {
max-width: 200px;
overflow: hidden;
padding: 7px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 12.5px;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0 6px 18px var(--noir-25);
cursor: pointer;
}
.td-pastille-fen:hover { border-color: var(--accent); }
@media (max-width: 899px) {
.td-fen {
top: 50% !important;
left: 50% !important;
width: 96vw !important;
height: 86svh !important;
transform: translate(-50%, -50%);
resize: none;
animation: none;
}
.td-fen.td-fen-grande { top: 0 !important; left: 0 !important; width: 100vw !important; height: 100svh !important; transform: none; border-radius: 0; }
.td-fen-barre { cursor: default; }
.td-reduites { bottom: max(16px, env(safe-area-inset-bottom, 0px) + 16px); }
}
html[data-dock] .tel-corps { width: 100%; max-width: 720px; margin: 0 auto; }
.compte-supprimer summary { cursor: pointer; color: var(--warn); font-weight: 600; }
.compte-supprimer-corps { margin-top: 12px; font-size: 13.5px; line-height: 1.55; }
.compte-supprimer-corps p { margin: 0 0 8px; }
.compte-supprimer .btn { width: auto; }
.jeux-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.jeux-carte {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
color: var(--ink);
text-decoration: none;
}
.jeux-carte:hover { border-color: var(--accent); }
.jeux-signe { font-size: 24px; line-height: 1; }
.jeux-nom { font-weight: 600; font-size: 15px; }
.jeux-accroche { color: var(--muted); font-size: 13px; line-height: 1.4; flex: 1; }
.jeux-etat { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.jeu-regle { margin: 10px 0 14px; }
.jeu-regle summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.jeu-regle p { margin: 8px 0 0; line-height: 1.55; }
.jeu-partie,
.jeu-lancer {
margin: 16px 0;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.jeu-lancer h2 { margin-top: 0; font-size: 15px; }
.jeu-partie-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-weight: 600; }
.jeu-depart { margin: 10px 0; font-size: 17px; }
.jeu-signes { font-size: 34px; letter-spacing: 6px; }
.jeu-compte { margin: 6px 0; font-family: var(--font-title); font-size: 46px; text-align: center; }
.jeu-apports { margin: 10px 0; padding: 0; list-style: none; }
.jeu-apport { margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid var(--line); background: var(--paper); border-radius: 0 8px 8px 0; }
.jeu-apport.jeu-gagnant { border-left-color: var(--accent); }
.jeu-apport-texte { margin: 0; line-height: 1.5; }
.jeu-apport-pied { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.jeu-dessin { display: block; max-width: 100%; border-radius: var(--rayon-s); background: var(--blanc); }
.jeu-jouer { display: grid; gap: 8px; margin-top: 10px; }
.jeu-jouer .btn { justify-self: start; width: auto; }
.jeu-trois { display: grid; grid-template-columns: repeat(3, 70px); gap: 8px; }
.jeu-trois .field { text-align: center; font-size: 22px; }
.jeu-inline { display: inline; }
.jeu-lien,
.jeu-vote { padding: 0; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.jeu-lien { text-decoration: underline; }
.jeu-vote-mien { color: var(--accent-ink); font-weight: 600; }
.jeu-partie-actes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.jeu-archive { padding: 10px 0; border-bottom: 1px solid var(--line); }
.jeu-archive summary { cursor: pointer; }
.jeu-dico dt { margin-top: 10px; font-weight: 600; }
.jeu-dico dd { margin: 2px 0 0; }
.dessin-debut { width: auto; }
.dessin-atelier { display: grid; gap: 8px; }
.dessin-outils { display: flex; flex-wrap: wrap; gap: 6px; }
.dessin-outil {
min-width: 30px;
height: 30px;
padding: 0 8px;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
background: var(--paper);
color: var(--ink);
font: inherit;
cursor: pointer;
}
.dessin-outil.actif { outline: 2px solid var(--accent); outline-offset: 1px; }
.dessin-couleur { width: 30px; padding: 0; }
.dessin-toile { width: 100%; max-width: 480px; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--rayon-s); background: var(--blanc); touch-action: none; cursor: crosshair; }
.dessin-reste { margin: 0; font-variant-numeric: tabular-nums; color: var(--muted); }
.dessin-presse { color: var(--warn); font-weight: 600; }
.jeu-empilement { display: flex; justify-content: center; gap: 12px; }
.jeu-toile { width: min(62vw, 264px); aspect-ratio: 1 / 2; border-radius: var(--rayon-s); border: 1px solid var(--line); }
.jeu-cote { display: flex; flex-direction: column; gap: 8px; }
.jeu-apercu { width: 72px; height: 72px; border-radius: var(--rayon-s); background: var(--nuit-apercu); }
.jeu-infos { margin: 0; font-size: 12px; color: var(--muted); max-width: 90px; }
.jeu-commandes { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.jeu-commandes .btn { width: 46px; font-size: 18px; }
.jeu-reflexe-tete { display: flex; flex-direction: column; align-items: center; }
.jeu-reflexe-cible { font-size: 54px; text-align: center; min-height: 70px; }
.jeu-reflexe-niveau { color: var(--muted); font-size: 12px; }
.jeu-partir { display: block; margin: 40px auto; }
.jeu-reflexe-jauge { height: 6px; margin: 4px auto 14px; max-width: 320px; border-radius: 3px; background: var(--line); overflow: hidden; }
.jeu-reflexe-jauge span { display: block; height: 100%; width: 100%; background: var(--accent); }
.jeu-reflexe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-width: 360px; margin: 0 auto; }
.jeu-reflexe-case { aspect-ratio: 1; font-size: clamp(22px, 7vw, 40px); border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); cursor: pointer; }
.jeu-reflexe-case.juste { border-color: var(--jeu-juste); background: color-mix(in srgb, var(--jeu-juste) 18%, var(--surface)); }
.jeu-reflexe-case.faux { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.profil-avatar { object-fit: cover; }
.profil-pronoms { margin-left: 8px; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 400; }
.profil-presentation-texte { line-height: 1.6; }
.profil-presentation-texte p { margin: 0 0 10px; }
.profil-themes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.profil-themes .mine { margin-right: 4px; }
.profil-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.profil-avatar-apercu { display: block; width: 72px; height: 72px; margin: 6px 0; border-radius: 50%; object-fit: cover; }
.profil-banniere-apercu { display: block; width: 100%; margin: 6px 0; border-radius: var(--rayon-s); object-fit: cover; }
.carte-profil .carte-tete { display: flex; align-items: center; gap: 10px; }
.carte-profil .portrait { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: var(--blanc); }
.carte-profil .carte-qui { display: grid; }
.carte-profil .carte-nom { font-weight: 600; color: var(--ink); text-decoration: none; }
.carte-profil .carte-texte { margin: 10px 0; line-height: 1.55; }
.contact-form .btn { width: auto; margin-top: 12px; }
.contact-fil { padding: 10px 0; border-bottom: 1px solid var(--line); }
.contact-fil summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.contact-message { margin: 10px 0; padding: 10px 12px; border-radius: var(--rayon); background: var(--surface); }
.contact-message p { margin: 0 0 4px; line-height: 1.5; }
.contact-loreside { border-left: 3px solid var(--accent); }
.contact-capture { display: block; max-width: 100%; max-height: 320px; margin-top: 6px; border-radius: var(--rayon-s); }
.contact-repondre { display: grid; gap: 6px; margin-top: 8px; }
.contact-repondre .btn { justify-self: start; width: auto; }
.contact-actes { display: flex; gap: 8px; margin-top: 8px; }
.connexions-partagees summary { cursor: pointer; }
.connexion-groupe { margin: 8px 0; padding: 8px 12px; border-radius: var(--rayon); background: var(--surface); }
.connexion-indice {
margin: 8px 0 0;
padding: 8px 10px;
border-radius: var(--rayon);
background: color-mix(in srgb, var(--warn) 8%, transparent);
font-size: 13px;
}
.visages-filtres { display: grid; gap: 10px; margin: 14px 0; }
.visages-menus { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px 8px; }
.visage-filtre .field { padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
.visage-filtre { display: grid; gap: 2px; }
.visage-filtre .lab { margin: 0; font-size: 12px; }
.visage-filtre .field { margin: 0; }
.visages-filtres-actes { display: flex; gap: 8px; }
.visages-filtres-actes .btn { width: auto; }
.visage-carte small { display: block; line-height: 1.35; }
.visage-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.visage-origines { margin: 12px 0; padding: 0; border: 0; }
.visage-origines .choix-ligne { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.visage-origines .choix-ligne input { width: auto; margin: 0; }
.visage-form .btn { width: auto; }
.reseaux { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.reseau {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--ink);
text-decoration: none;
transition: border-color .15s, color .15s;
}
.reseau:hover { border-color: var(--accent); color: var(--accent-ink); }
.reseau-logo { width: 22px; height: 22px; flex: none; }
.champ-image-cache {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.champ-image-bouton { cursor: pointer; margin: 4px 0; }
.champ-image-cache:focus-visible + .champ-image-bouton,
.champ-image-bouton:has(+ .champ-image-cache:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cadrage { margin: 8px 0 4px; }
.cadrage-cadre {
position: relative;
width: 100%;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
background: var(--surface-2);
cursor: grab;
touch-action: none;
user-select: none;
}
.cadrage-cadre:active { cursor: grabbing; }
.cadrage-cadre canvas { display: block; width: 100%; height: 100%; }
.cadrage-rond { max-width: 220px; border-radius: 50%; }
.cadrage-zoom { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.cadrage-zoom input { flex: 1; accent-color: var(--accent); }
.cadrage .mine { margin: 4px 0 0; }
:root {
--tel-nuit-bas: #17142b;
--tel-nuit:
radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--accent-loreside) 70%, transparent), transparent 70%),
linear-gradient(170deg, var(--accent-loreside), var(--tel-nuit-bas) 78%);
}
.tel-ecran.tel-ecran-fond {
background: var(--tel-fond, var(--tel-nuit)) center / cover no-repeat, var(--tel-nuit-bas);
}
.tel-ecran-fond .tel-barre { color: var(--blanc); text-shadow: 0 1px 2px var(--noir-45); }
.tel-ecran-fond .tel-home-barre { background: var(--blanc-80); }
.tel-ecran-fond .td-bas button { color: var(--blanc); }
.tel-ecran-fond .tel-accueil .tel-app,
.tel-ecran-fond .tel-profil b,
.tel-ecran-fond .tel-changer-lab,
.tel-ecran-fond .tel-fond-lien,
.tel-ecran-fond .tel-vide { color: var(--blanc); text-shadow: 0 1px 3px var(--noir-65); }
.tel-accueil-pied {
display: flex;
justify-content: center;
gap: 18px;
margin: 22px 0 0;
}
.tel-fond-lien {
padding: 4px 2px;
border: 0;
background: none;
color: var(--faint);
font: inherit;
font-size: 12px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.tel-veille-bouton {
padding: 0;
border: 0;
cursor: pointer;
}
.tel-veille-bouton::before { content: ''; position: absolute; inset: -6px -10px -6px -8px; }
.tel-veille-bouton:hover,
.tel-veille-bouton:focus-visible { background: var(--accent); }
.tel-verrou {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
padding: 44px 14px 14px;
background: var(--tel-fond, var(--tel-nuit)) center / cover no-repeat, var(--tel-nuit-bas);
color: var(--blanc);
text-shadow: 0 1px 3px var(--noir-50);
touch-action: none;
user-select: none;
cursor: grab;
transition: transform .25s ease, opacity .25s ease;
}
.tel-verrou[hidden] { display: none; }
.tel-verrou.tel-verrou-glisse { transition: none; cursor: grabbing; }
.tel-verrouille .tel-barre { position: relative; z-index: 6; color: var(--blanc); }
.tel-verrou-haut { text-align: center; margin-bottom: 22px; }
.tel-verrou-heure {
margin: 0;
font-family: var(--font-title);
font-size: 62px;
font-weight: 500;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.tel-verrou-date { margin: 6px 0 0; font-size: 14px; }
.tel-verrou-date::first-letter { text-transform: uppercase; }
.tel-verrou-notifs {
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
overflow-y: auto;
}
.tel-verrou-notif {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 12px;
border: 0;
border-radius: 16px;
background: var(--voile-notif-42);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
color: var(--blanc);
font: inherit;
text-align: left;
text-decoration: none;
text-shadow: none;
cursor: pointer;
}
.tel-verrou-notif .tel-icone { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; box-shadow: none; }
.tel-verrou-notif-corps { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.tel-verrou-notif-corps b { font-size: 12px; opacity: .85; }
.tel-verrou-rien { margin: 0; text-align: center; font-size: 13px; opacity: .8; }
.tel-verrou-ouvrir {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: auto;
padding: 12px 0 4px;
border: 0;
background: none;
color: var(--blanc);
font: inherit;
font-size: 12px;
text-shadow: inherit;
cursor: pointer;
}
.tel-verrou-trait { width: 118px; height: 5px; border-radius: 3px; background: var(--blanc-85); }
@media (prefers-reduced-motion: reduce) {
.tel-verrou { transition: none; }
}
.tel-fond { padding: 12px 14px 18px; }
.tel-fond-sous { margin: 0 0 12px; font-size: 12.5px; color: var(--faint); }
.tel-fonds { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 12px 8px; }
.tel-fond-choix {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 0;
border: 0;
background: none;
color: var(--ink);
font: inherit;
cursor: pointer;
}
.tel-fond-apercu {
display: block;
width: 100%;
aspect-ratio: 9 / 16;
border: 2px solid transparent;
border-radius: 12px;
background-color: var(--nuit);
background-size: cover;
background-position: center;
box-shadow: 0 2px 8px var(--noir-18);
}
.tel-fond-nu { background: var(--surface-2); border-color: var(--line); }
.tel-fond-actuel .tel-fond-apercu { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tel-fond-nom { font-size: 11.5px; }
.tel-fond-actuel .tel-fond-nom { font-weight: 600; }
span.tel-fond-choix { cursor: default; }
.tel-fond-envoi { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.tel-fond-envoi .cadrage-cadre { max-width: 200px; margin: 0 auto; }
.tel-fond-envoi .btn { width: 100%; margin-top: 10px; }
.ech-story-vue .ech-story-rond { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--line-strong); }
.ech-diapo-scene,
.ech-creer-apercu {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 16;
width: 100%;
background-color: var(--nuit);
background-size: cover;
background-position: center;
color: var(--blanc);
}
.ech-creer-avec-media { background-image: none !important; }
.ech-diapo-scene { display: flex; flex-direction: column; }
.ech-diapo-toile { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ech-diapo-flou {
position: absolute;
inset: -20px;
width: calc(100% + 40px);
height: calc(100% + 40px);
object-fit: cover;
filter: blur(18px) brightness(.7);
}
.ech-diapo-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: transparent;
}
video.ech-diapo-media { background: var(--noir); }
.ech-diapo-texte {
position: absolute;
left: 50%;
z-index: 2;
max-width: 86%;
margin: 0;
transform: translate(-50%, -50%);
font-size: 17px;
font-weight: 600;
line-height: 1.35;
text-align: center;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ech-style-ombre { text-shadow: 0 1px 3px var(--noir-80), 0 0 12px var(--noir-50); }
.ech-style-bandeau { width: 100%; max-width: none; padding: 8px 14px; background: var(--noir-55); }
.ech-style-bulle { padding: 7px 13px; border-radius: var(--rayon-l); background: var(--blanc); color: var(--nuit); }
.ech-creer { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ech-creer-apercu { max-width: 260px; max-height: 58vh; margin: 0 auto 6px; border-radius: 16px; }
.ech-creer-apercu .ech-diapo-texte { cursor: grab; touch-action: none; user-select: none; }
.ech-creer-apercu .ech-diapo-texte.ech-texte-glisse { cursor: grabbing; outline: 1px dashed var(--blanc-70); }
.ech-creer-fichier { align-self: flex-start; }
.ech-creer-note { margin: 0; font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.ech-creer .lab { margin-top: 8px; }
.ech-creer .field { margin: 0; }
.ech-creer-y { width: 100%; accent-color: var(--accent); }
.ech-creer fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ech-creer-choix { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; }
.ech-creer-choix legend { width: 100%; }
.ech-creer-fonds { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.ech-creer-fonds legend { grid-column: 1 / -1; }
.ech-creer-fond { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.ech-creer-fond input { position: absolute; opacity: 0; pointer-events: none; }
.ech-creer-fond span:first-of-type {
display: block;
width: 100%;
aspect-ratio: 9 / 14;
border: 2px solid transparent;
border-radius: 9px;
background-size: cover;
}
.ech-creer-fond input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ech-creer-fond input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ech-creer-fond-nom { font-size: 10.5px; color: var(--muted); }
.ech-creer-tags .ech-creer-chercher { margin-bottom: 6px; }
.ech-creer-liste { display: flex; flex-direction: column; max-height: 190px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--rayon); }
.ech-creer-tag { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.ech-creer-tag:last-child { border-bottom: 0; }
.ech-creer-tag:has(input:disabled) { opacity: .5; cursor: default; }
.ech-creer-partager { margin-top: 12px; }
.ech-lecteur { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 12px; }
.ech-lecteur-barres { display: none; }
.ech-lecteur-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ech-lecteur-qui { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.ech-lecteur-qui .ech-av { width: 30px; height: 30px; font-size: 11px; }
.ech-lecteur-fermer { font-size: 12.5px; color: var(--muted); }
.ech-diapo-scene { border-radius: var(--rayon-l); }
.ech-diapo-pied { padding: 8px 2px 0; font-size: 12.5px; }
.ech-diapo-pied p { margin: 0 0 4px; }
.ech-diapo-tags a { font-weight: 600; }
.ech-diapo-quand { color: var(--faint); font-size: 11.5px; }
.ech-diapo-mot {
flex: 0 0 auto;
margin: 0;
padding: 10px 14px;
background: var(--noir-78);
color: var(--blanc);
font-size: 13.5px;
line-height: 1.45;
text-align: left;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ech-diapo-partage { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ech-diapo-mot-champ {
width: 100%;
margin-top: 6px;
padding: 9px 12px;
min-height: 44px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon);
background: var(--paper);
color: var(--ink);
font: inherit;
font-size: 16px;
}
.ech-diapo-repartager { align-self: flex-start; }
.ech-diapo-source a { display: inline-flex; align-items: center; gap: 7px; color: inherit; text-decoration: none; }
.ech-diapo-source .ech-av { width: 24px; height: 24px; font-size: 10px; }
.ech-diapo-source-nom { font-weight: 600; }
.ech-diapo-repartager {
margin: 6px 0 2px;
padding: 9px 16px;
min-height: 44px;
border: 0;
border-radius: var(--rayon-pilule);
background: var(--accent);
color: var(--sur-accent);
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.ech-diapo-deja { color: var(--faint); font-size: 11.5px; }
.ech-diapo-retirer {
margin-top: 4px;
padding: 5px 11px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: none;
color: var(--ink);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.ech-lecteur-prec, .ech-lecteur-suiv { display: none; }
.ech-lecteur-js {
flex: 1;
gap: 0;
padding: 0;
min-height: 100%;
background: var(--nuit-lecteur);
color: var(--blanc);
}
.ech-lecteur-js .ech-lecteur-barres {
position: absolute;
top: 8px;
left: 10px;
right: 10px;
z-index: 4;
display: flex;
gap: 4px;
}
.ech-barre { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: var(--blanc-35); }
.ech-barre i { display: block; width: 0; height: 100%; background: var(--blanc); }
.ech-lecteur-js .ech-lecteur-tete {
position: absolute;
top: 18px;
left: 10px;
right: 10px;
z-index: 4;
text-shadow: 0 1px 3px var(--noir-60);
}
.ech-lecteur-js .ech-lecteur-fermer { color: var(--blanc); }
.ech-lecteur-js .ech-diapo { display: none; flex-direction: column; flex: 1; }
.ech-lecteur-js .ech-diapo-active { display: flex; }
.ech-lecteur-js .ech-diapo-scene { flex: 1; aspect-ratio: auto; min-height: 320px; border-radius: 0; }
.ech-lecteur-js .ech-diapo-pied { position: relative; z-index: 4; padding: 8px 12px 10px; background: var(--nuit-lecteur); }
.ech-lecteur-js .ech-diapo-pied a { color: var(--blanc); }
.ech-lecteur-js .ech-diapo-quand { color: var(--blanc-65); }
.ech-lecteur-js .ech-diapo-deja { color: var(--blanc-65); }
.ech-lecteur-js .ech-diapo-mot { padding-top: 58px; }
.ech-lecteur-js .ech-diapo-mot-champ {
border-color: var(--blanc-35);
background: var(--blanc-8);
color: var(--blanc);
}
.ech-lecteur-js .ech-diapo-mot-champ::placeholder { color: var(--blanc-55); }
.ech-lecteur-js .ech-diapo-retirer { border-color: var(--blanc-40); color: var(--blanc); }
.ech-lecteur-js .ech-lecteur-prec,
.ech-lecteur-js .ech-lecteur-suiv {
position: absolute;
top: 56px;
bottom: 90px;
z-index: 3;
display: block;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.ech-lecteur-js .ech-lecteur-prec { left: 0; width: 33%; }
.ech-lecteur-js .ech-lecteur-suiv { right: 0; width: 67%; }
.ech-lecteur-prec:focus-visible, .ech-lecteur-suiv:focus-visible { outline: 2px solid var(--blanc-60); outline-offset: -4px; }
.ech-lecteur-pause .ech-barre i { opacity: .7; }
.visage-age { margin: 0; padding: 0; border: 0; min-width: 0; }
.visage-age legend { padding: 0; }
.visage-age-bornes { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.visage-age-bornes .field { width: 100%; min-width: 0; padding-top: 6px; padding-bottom: 6px; font-size: 13.5px; }
.brouillon-etat { margin: 4px 0 0; color: var(--faint); font-size: 11.5px; min-height: 1em; }
.brouillon-etat-ko { color: var(--warn); }
.brouillons { display: grid; gap: 8px; margin-top: 16px; }
.brouillon-ligne {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.brouillon-lien { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.brouillon-lien:hover .brouillon-extrait { text-decoration: underline; }
.brouillon-extrait { overflow-wrap: anywhere; }
.brouillon-lien .mine { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brouillon-ligne form { flex: 0 0 auto; }
.brouillon-ligne .btn { width: auto; }
.fic-avertir { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.fic-avertir-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 12px; }
.choix-ligne { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.choix-ligne input { width: auto; margin: 0; }
.fic-alertes b { display: block; }
.fic-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 18px 0 4px; }
.fic-actes form { margin: 0; }
.fic-chapitres { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 0; }
.fic-chapitres .btn { display: flex; flex-direction: column; align-items: flex-start; width: auto; max-width: 48%; text-align: left; }
.fic-chapitres .btn:last-child { align-items: flex-end; text-align: right; margin-left: auto; }
.fic-chapitre-titre { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.fic-com { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fic-com-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 4px; }
.fic-com-texte { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.fic-com-actes { display: flex; gap: 12px; margin: 6px 0 0; font-size: 12.5px; }
.fic-com-actes form { margin: 0; }
.fic-com-form { display: grid; gap: 8px; margin-top: 14px; }
.fic-com-form .btn { width: auto; justify-self: start; }
.lien-bouton { padding: 6px 2px; margin: -6px -2px; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }
.lien-bouton:hover { color: var(--ink); }
a.etiq { text-decoration: none; }
a.etiq:hover { text-decoration: underline; }
.fil-reglage { margin: 4px 0 0; text-align: right; font-size: 12.5px; }
.mess-nouveaux { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.mess-nouveaux::before,
.mess-nouveaux::after { content: ''; flex: 1; height: 1px; background: var(--accent); opacity: .5; }
.cb-vu { margin: 2px 2px 0; text-align: right; color: var(--faint); font-size: 11px; }
.emo-bouton,
.cb-fil-ecrire .emo-bouton,
.tel-ecrire .emo-bouton {
flex: 0 0 auto;
width: 34px;
height: 34px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--surface);
color: var(--muted);
font-size: 17px;
line-height: 1;
cursor: pointer;
}
.emo-bouton:hover { color: var(--ink); border-color: var(--accent); }
textarea[data-emojis] + .emo-bouton { display: block; margin: 6px 0 0 auto; }
.emo-panneau {
position: fixed;
z-index: 200;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-l);
background: var(--paper);
box-shadow: 0 12px 34px var(--noir-28);
}
.emo-panneau[hidden] { display: none; }
.emo-recherche {
margin: 8px 8px 4px;
padding: 7px 11px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 13.5px;
}
.emo-onglets { display: flex; gap: 2px; padding: 0 6px 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.emo-onglets::-webkit-scrollbar { display: none; }
.emo-onglets button { flex: 0 0 auto; padding: 4px 6px; border: 0; border-radius: var(--rayon-s); background: none; font-size: 18px; cursor: pointer; }
.emo-onglets button:hover { background: var(--surface-2); }
.emo-corps { flex: 1; overflow-y: auto; padding: 4px 8px 8px; }
.emo-famille { margin: 8px 2px 4px; color: var(--faint); font-size: 11.5px; font-weight: 600; }
.emo-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
.emo-choix { height: 36px; padding: 0; border: 0; border-radius: var(--rayon-s); background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.emo-choix:hover, .emo-choix:focus-visible { background: var(--surface-2); }
.emo-vide { margin: 14px 4px; color: var(--muted); font-size: 13px; }
.cb-cite {
display: block;
margin: 0 0 3px;
padding: 5px 9px;
border-left: 3px solid var(--accent);
border-radius: 6px;
background: var(--surface-2);
color: var(--muted);
font-size: 12px;
line-height: 1.35;
text-decoration: none;
overflow-wrap: anywhere;
}
.cb-cite b { display: block; color: var(--ink); font-size: 11.5px; }
a.cb-cite:hover { background: var(--surface); }
.mess-reponse, .cb-reponse {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 6px 12px;
border-top: 1px solid var(--line);
background: var(--surface);
color: var(--muted);
font-size: 12.5px;
}
.mess-reponse[hidden], .cb-reponse[hidden] { display: none; }
.mess-reponse-texte, .cb-reponse-texte { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mess-reponse-annuler, .cb-reponse-annuler { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 12px; cursor: pointer; }
.mess-ecrire .mess-reponse { flex-basis: 100%; border-top: 0; border-radius: var(--rayon-s); }
.mess-ecrire { flex-wrap: wrap; }
.mess-image { display: block; margin: 0 0 3px; border-radius: var(--rayon-l); overflow: hidden; background: var(--surface-2); line-height: 0; }
.mess-image img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 340px; object-fit: cover; }
.mess-image:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mess-images { display: block; }
.mess-images .pub-medias,
.mess-images .pub-carrousel { margin: 0 0 3px; border-radius: var(--rayon-l); overflow: hidden; }
.cb-msg .mess-images .pub-medias,
.cb-msg .mess-images .pub-carrousel { width: 240px; max-width: 100%; }
.mess-flux .cb-msg .mess-images .pub-medias,
.mess-flux .cb-msg .mess-images .pub-carrousel { width: 320px; max-width: 100%; }
.cb-msg .mess-images .pub-medias-seule { width: auto; max-width: 240px; }
.mess-flux .cb-msg .mess-images .pub-medias-seule { width: auto; max-width: 320px; }
.mess-images .pub-medias-seule .pub-media img { aspect-ratio: auto; height: auto; }
.cb-msg-moi .mess-images { display: flex; justify-content: flex-end; }
.mess-images .pub-media img { max-height: 340px; }
.mess-images .pub-carrousel-piste .pub-media { max-height: 320px; }
@media (hover: hover) and (pointer: fine) {
.mess-images .pub-carrousel-fleche { width: 32px; height: 32px; }
}
.cb-joindre .ico,
.mess-joindre .ico,
.mess-galerie .ico { width: 20px; height: 20px; }
.mess-joindre, .cb-joindre { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; cursor: pointer; color: var(--muted); }
.mess-joindre input, .cb-joindre input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.mess-joindre:hover, .cb-joindre:hover { color: var(--ink); }
.mess-joindre:focus-within, .cb-joindre:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mess-joindre { padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--rayon-pilule); background: var(--surface); font-size: 13px; }
.cb-joindre { justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); }
@media (max-width: 520px) { .mess-joindre-texte { display: none; } .mess-joindre { padding: 0 10px; } }
.mess-ecrire-images .comp-images,
.mess-ecrire-images .comp-erreur,
.mess-ecrire-images .comp-dispositions { flex-basis: 100%; margin: 0; }
.mess-ecrire-images .comp-outil { flex: none; }
.cb-fil-ecrire { flex-wrap: wrap; }
.cb-fil-ecrire .comp-images,
.cb-fil-ecrire .comp-erreur,
.cb-fil-ecrire .comp-dispositions { flex-basis: 100%; margin: 0; }
.cb-fil-ecrire .comp-dispositions .chip { font-size: 11.5px; padding: 2px 8px; }
.cb-fil-ecrire .comp-dispositions legend { font-size: 11px; }
@media (max-width: 520px) {
.mess-ecrire-images .comp-outil { position: relative; padding: 0 12px; }
.mess-ecrire-images .comp-outil-nom {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.cb-erreur { margin: 0; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--surface); color: var(--warn); font-size: 12.5px; }
.cb-erreur[hidden] { display: none; }
.mess-galerie { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent-ink); text-decoration: none; }
.mess-galerie:hover { text-decoration: underline; }
.galerie-mp-retour { margin: 0 0 8px; font-size: 13px; }
.galerie-mp { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 18px; }
.galerie-mp-case { margin: 0; min-width: 0; }
.galerie-mp-case .mess-image { margin: 0; border-radius: var(--rayon); aspect-ratio: 1; }
.galerie-mp-case .mess-image img { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.galerie-mp-case figcaption { margin-top: 6px; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.galerie-mp-case figcaption b { color: var(--ink); font-weight: 600; }
.galerie-mp-case figcaption a { display: block; color: var(--accent-ink); }
.galerie-mp-legende { display: block; color: var(--faint); }
.mess-cible .cb-msg-texte, .mess-cible .mess-images .pub-medias,
.mess-cible .mess-images .pub-carrousel { box-shadow: 0 0 0 3px var(--accent); }
.visionneuse { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--voile-visionneuse-88); cursor: zoom-out; }
.visionneuse img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 12px 40px var(--noir-40); }
.visionneuse-fermer { position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--blanc-14); color: var(--blanc); font-size: 24px; line-height: 1; cursor: pointer; }
.visionneuse-fermer:hover { background: var(--blanc-26); }
html.visionneuse-ouverte { overflow: hidden; }
.mess-qui { flex: 1; min-width: 0; }
.mess-qui b, .mess-qui small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mess-galerie { flex: 0 0 auto; }
@media (max-width: 520px) { .mess-galerie-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.cb-msg-moi mark { background: var(--blanc-32); }
.rech-form { display: flex; gap: 8px; margin: 14px 0 6px; }
.rech-form .field { flex: 1; min-width: 0; margin: 0; }
.rech-form .btn { flex: 0 0 auto; }
.rech-section { margin-top: 26px; }
.rech-section h2 { margin-bottom: 8px; }
.rech-jeu + .rech-jeu { margin-top: 14px; }
.rech-jeu-nom { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; }
.rech-jeu-nom .crest { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.rech-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.rech-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.rech-liste li:last-child { border-bottom: 0; }
.rech-liste li > a { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.rech-liste li > small { color: var(--faint); font-size: 12px; }
.rech-liste .crest { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; align-self: center; }
.rech-liste .portrait-s { align-self: center; }
.rech-sorte { flex: 0 0 auto; padding: 1px 7px; border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--muted); font-size: 11px; }
.rech-extrait { flex-basis: 100%; color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.rech-tout { margin: 8px 2px 0; font-size: 13px; }
.mess-recherche { margin: 12px 0 4px; }
.mess-recherche .field { margin: 0; }
.mess-recherche-bilan { margin: 6px 2px 8px; color: var(--muted); font-size: 12.5px; }
.mess-recherche-bilan a { margin-left: 6px; }
.mess-trouve .meta { white-space: normal; }
.scene-pages { display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; gap: 6px 14px; margin: 14px 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); font-size: 13px; }
.scene-pages a { color: var(--accent-ink); white-space: nowrap; }
.scene-pages-ou { text-align: center; color: var(--muted); }
@media (max-width: 520px) {
.scene-pages { grid-template-columns: 1fr 1fr; }
.scene-pages-ou { grid-column: 1 / -1; grid-row: 1; }
}
.mess-systeme { align-self: center; max-width: 90%; margin: 4px 0; padding: 3px 12px; border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--muted); font-size: 12px; text-align: center; }
.mess-systeme span { color: var(--faint); }
.mess-reglages { flex: 0 0 auto; font-size: 12.5px; color: var(--accent-ink); white-space: nowrap; }
.mess-reglages { margin-left: auto; }
.mess-reglages + .mess-galerie { margin-left: 10px; }
.cb-tete .cb-nouveau-groupe { margin-left: auto; }
.cb-tete .cb-nouveau-groupe + .cb-tout-voir { margin-left: 0; }
.cb-tete .cb-tete-bouton { min-height: 32px; background: var(--surface); color: var(--ink); font-weight: 500; text-decoration: none; }
.cb-tete .cb-tete-bouton .ico { width: 16px; height: 16px; }
@media (max-width: 599.98px) {
.cb-tete .cb-tout-voir { display: none; }
}
.mess-nouveau-groupe { margin: 10px 2px 0; font-size: 13px; }
.groupe-form .field { margin-bottom: 10px; }
.groupe-choix { margin: 8px 0 12px; padding: 0; border: 0; }
.groupe-choix .choix-ligne { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.groupe-membre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.groupe-membre:last-child { border-bottom: 0; }
.groupe-membre-nom { flex: 1; min-width: 160px; }
.groupe-membre-nom small { display: block; }
.groupe-membre form { margin: 0; }
.groupe-renommer { display: flex; gap: 8px; }
.groupe-renommer .field { flex: 1; min-width: 0; margin: 0; }
@media (max-width: 520px) {
.mess-retour { font-size: 0; }
.mess-retour::before {
content: '';
display: block;
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
}
.champ-requis { color: var(--warn); font-weight: 600; }
.champ-aide { margin: -2px 0 6px; }
.champ-ligne { padding: 10px 0; border-bottom: 1px solid var(--line); }
.champ-ligne:last-child { border-bottom: 0; }
.champ-ligne-tete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 12px; }
.champ-ligne-nom { flex: 1; min-width: 180px; }
.champ-ligne-nom small { display: block; }
.champ-ligne-gestes { display: flex; align-items: center; gap: 10px; }
.champ-ligne-gestes form { margin: 0; }
.champ-retire .champ-ligne-nom b { color: var(--faint); text-decoration: line-through; }
.champ-modifier summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; margin-top: 4px; }
.champ-apercu { padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--rayon); opacity: .85; }
.row-long { align-items: flex-start; }
.row-long .muted { white-space: normal; text-align: right; }
.renc-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 18px; scrollbar-width: none; }
.renc-photos::-webkit-scrollbar { display: none; }
.renc-carte .renc-photos { flex: 1; min-height: 110px; }
.renc-diapo { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.renc-diapo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.renc-diapo-rang { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: var(--rayon-pilule); background: var(--noir-45); color: var(--blanc); font-size: 11px; }
.renc-photos:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.renc-mes-photos { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.renc-mes-photos .tel-lab small { font-weight: 400; color: var(--faint); }
.renc-vignettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 10px; }
.renc-vignette { margin: 0; }
.renc-vignette img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.renc-vignette figcaption { display: flex; justify-content: space-between; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--faint); }
.renc-vignette form { margin: 0; }
.renc-vignette button { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 11px; cursor: pointer; }
.renc-ajout-photo { display: grid; gap: 8px; }
.renc-ajout-photo input[type=file] { font-size: 12px; max-width: 100%; }
.renc-ajout-photo { grid-template-columns: minmax(0, 1fr); }
.renc-ajout-photo .tel-bouton { margin-top: 0; }
.renc-ajout-photo:has(input[type=file]:invalid) .tel-bouton { display: none; }
.renc-ajout-photo .champ-image-bouton {
display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 0;
border: 1.5px dashed var(--line-strong); border-radius: var(--rayon); background: none;
color: var(--muted); font-size: 13px;
}
.renc-ajout-photo .champ-image-bouton::before { content: "+"; margin-right: 6px; font-size: 20px; line-height: 1; }
.tan { padding: 10px 12px 18px; }
.tan-publier, .tan-modifier { margin-bottom: 12px; }
.tan-publier summary, .tan-modifier summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
.tan-publier form, .tan-modifier form { display: grid; margin-top: 6px; }
.tel-champ { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; }
.tan-annonce { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--rayon-l); background: var(--surface); border: 1px solid var(--line); }
.tan-epinglee { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tan-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 6px; font-size: 13px; }
.tan-tete small { color: var(--faint); font-size: 11.5px; }
.tan-titre { margin: 0 0 6px; font-size: 16px; }
.tan-texte { margin: 0; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.tan-image { margin-top: 8px; border-radius: var(--rayon); }
.tan-image img { max-height: none; }
.tan-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; }
.tan-gestes form { margin: 0; }
.tan-gestes button { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 12px; cursor: pointer; }
.tan-gestes .tan-modifier { flex-basis: 100%; margin: 0; }
.nouvelle { margin: 14px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); }
.nouvelle-epinglee { border-color: var(--accent); }
.nouvelle-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; }
.nouvelle-signature { padding: 2px 9px; border-radius: var(--rayon-pilule); font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); }
.nouvelle-developpement { background: color-mix(in srgb, var(--nouvelle-developpement) 18%, var(--surface)); color: color-mix(in srgb, var(--nouvelle-developpement) 70%, var(--ink)); }
.nouvelle-titre { margin: 0 0 6px; font-size: 18px; }
.nouvelle-texte { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.nouvelle-extrait { margin: 0; color: var(--muted); font-size: 13.5px; }
.nouvelle-image { margin-top: 10px; max-width: 520px; }
.nouvelle-image img { max-height: none; }
.nouvelle-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.nouvelle-gestes form { margin: 0; }
.nouvelle-modifier { flex-basis: 100%; }
.nouvelle-modifier summary { cursor: pointer; color: var(--accent-ink); }
.nouvelles-accueil .nouvelle { margin: 10px 0; }
.tan-loreside { border-style: dashed; }
.tan-badge { padding: 1px 7px; border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--muted); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.tan-hors-jeu { margin: 8px 0 0; color: var(--faint); font-size: 11.5px; }
.ico {
display: inline-block;
flex: none;
width: 1.25em;
height: 1.25em;
vertical-align: -.25em;
background-color: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
.ico-quart { transform: rotate(90deg); }
button > .ico:only-child,
summary > .ico:only-child { display: block; margin: 0 auto; }
.acte .ico { width: 17px; height: 17px; }
.etiq .ico { width: 11px; height: 11px; vertical-align: -1px; }
.btn .ico { width: 17px; height: 17px; }
.composeur-outils .ico { width: 20px; height: 20px; }
.carte-ou .ico { width: 13px; height: 13px; vertical-align: -2px; }
.cb-fil-ecrire button .ico,
.tel-ecrire button .ico { width: 17px; height: 17px; }
.cb-fil-fermer .ico,
.td-fen-bouton .ico { width: 14px; height: 14px; }
.chat-retirer button .ico,
.ech-retirer .ico { width: 13px; height: 13px; }
.emo-bouton .ico { width: 19px; height: 19px; }
.reacs-palette > summary .ico { width: 17px; height: 17px; }
.visionneuse-fermer .ico { width: 20px; height: 20px; }
.envoi-reessayer .ico { width: 13px; height: 13px; vertical-align: -2px; }
.dessin-outil .ico { width: 17px; height: 17px; }
.renc-passer .ico,
.renc-aimer .ico { width: 24px; height: 24px; }
.succes-marque .ico { width: 22px; height: 22px; }
.jeux-signe .ico { width: 28px; height: 28px; }
.jeux-titre-signe .ico { width: .9em; height: .9em; vertical-align: -.08em; }
.jeu-image { display: inline-block; width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.jeux-signe .jeu-image { width: 56px; height: 56px; }
.jeux-titre-signe .jeu-image { width: 1.4em; height: 1.4em; vertical-align: -.3em; }
.jeux-carte .mine .ico,
.jeu-archive summary .ico { width: 14px; height: 14px; vertical-align: -2px; }
.creer-carte {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: inherit;
text-decoration: none;
}
.creer-carte:hover { border-color: var(--accent); }
.creer-carte > .ico { width: 28px; height: 28px; margin-top: 2px; color: var(--accent-ink); }
.creer-quoi { display: block; min-width: 0; }
.creer-quoi b { display: block; font-size: 15px; }
.creer-quoi span { display: block; margin-top: 4px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.creer-choix { display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 900px) {
.creer-choix { grid-template-columns: repeat(3, 1fr); }
.creer-carte { flex-direction: column; }
}
.decouvrir-rubrique h2 { display: flex; align-items: center; gap: 9px; }
.decouvrir-rubrique h2 .ico { width: 22px; height: 22px; color: var(--accent-ink); }
.decouvrir-tout { margin-top: 12px; }
.decouvrir-aussi .item > .ico { width: 22px; height: 22px; margin-top: 2px; color: var(--muted); }
.tpl { padding: 10px 12px 18px; }
.tpl-section { margin: 16px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.tpl-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none; }
.tpl-item .ico { width: 20px; height: 20px; color: var(--accent-ink); }
.tpl-item-corps { display: grid; min-width: 0; }
.tpl-item-corps b { font-size: 14px; overflow-wrap: anywhere; }
.tpl-item-corps small { color: var(--faint); font-size: 11.5px; }
.tpl-details { margin: 0 0 12px; }
.tpl-details summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
.tpl-details form { display: grid; margin-top: 6px; }
.tpl-tete { margin-bottom: 10px; }
.tpl-titre { margin: 0 0 2px; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.tpl-de { margin: 0; color: var(--faint); font-size: 12px; }
.tpl-gardee { padding: 1px 7px; border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--muted); font-weight: 600; font-size: 10.5px; }
.tpl-desc { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.tpl-tout { margin-top: 10px; }
.tpl-lecteur { position: relative; margin: 0 0 12px; border-radius: 12px; overflow: hidden; background: var(--noir); aspect-ratio: 16 / 9; }
.tpl-lecteur iframe { display: block; width: 100%; height: 100%; border: 0; }
.tpl-lecteur-fermer { position: absolute; top: 6px; right: 6px; padding: 4px 9px; border: 0; border-radius: var(--rayon-pilule); background: var(--noir-65); color: var(--blanc); font: inherit; font-size: 11.5px; cursor: pointer; }
.tpl-morceaux { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: morceau; }
.tpl-morceau { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 8px 10px; border-radius: var(--rayon); }
.tpl-morceau + .tpl-morceau { border-top: 1px solid var(--line); }
.tpl-jouer { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--accent-ink); cursor: pointer; }
.tpl-jouer .ico { width: 16px; height: 16px; }
.tpl-en-cours { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.tpl-morceau-corps { display: grid; min-width: 0; }
.tpl-morceau-corps b { font-size: 13.5px; overflow-wrap: anywhere; }
.tpl-morceau-corps small { color: var(--faint); font-size: 11.5px; }
.tpl-morceau-gestes { grid-column: 2; display: flex; gap: 2px; margin-top: 2px; }
.tpl-morceau-gestes form { margin: 0; }
.tpl-morceau-gestes button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--rayon-s); background: none; color: var(--faint); cursor: pointer; }
.tpl-morceau-gestes button:hover { background: var(--surface-2); color: var(--ink); }
.tpl-morceau-gestes .ico { width: 14px; height: 14px; }
.tpl-retirer { margin: 14px 0 0; }
.tpl-autres { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.tpl-fiche-morceaux { margin: 8px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.tpl-fiche-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0; }
.tpl-fiche .tpl-lecteur { max-width: 520px; }
@media (max-width: 899px) {
.ghost[contenteditable],
.tel-champ,
.tel-ecrire input,
.visage-filtre .field,
.visage-age-bornes .field { font-size: 16px; }
}
.vitrine-hero {
position: relative;
overflow: hidden;
isolation: isolate;
display: flex;
flex-direction: column;
margin: 6px 0 22px;
padding: 30px 22px 30px;
border-radius: 18px;
background: var(--accent-soft);
}
.vitrine-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 42%);
}
.vitrine-hero-texte { position: relative; max-width: 32em; }
.vitrine-titre { margin: 0; font-family: var(--font-title); font-size: 34px; font-weight: 600; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
.vitrine-actes { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.vitrine-actes .btn { width: auto; }
.vitrine-bulle {
order: -1;
width: 128px;
height: 128px;
margin: 0 0 18px;
filter: saturate(1.1) drop-shadow(0 14px 24px var(--noir-25));
}
@media (min-width: 720px) {
.vitrine-hero { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 24px; padding: 52px 48px 48px; }
.vitrine-hero::before { background: radial-gradient(circle at 82% 50%, color-mix(in oklab, var(--accent) 34%, transparent), transparent 48%); }
.vitrine-titre { font-size: 46px; }
.vitrine-bulle { order: 0; width: 240px; height: 240px; margin: 0; justify-self: center; }
}
.vitrine-titre[data-longue] { font-size: 30px; }
@media (min-width: 720px) { .vitrine-titre[data-longue] { font-size: 38px; } }
@media (min-width: 1000px) {
.vitrine-hero { grid-template-columns: minmax(0, 1fr) 320px; padding: 64px 56px 60px; }
.vitrine-titre { font-size: 54px; }
.vitrine-titre[data-longue] { font-size: 44px; }
.vitrine-bulle { width: 300px; height: 300px; }
}
.portes { display: grid; gap: 12px; margin: 0 0 30px; }
.porte {
position: relative;
overflow: hidden;
display: grid;
gap: 8px;
padding: 22px 20px 18px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
color: inherit;
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.porte:hover { border-color: var(--accent); transform: translateY(-2px); }
.porte > .ico { width: 34px; height: 34px; color: var(--accent-ink); }
.porte > .porte-filigrane { position: absolute; right: -24px; bottom: -28px; width: 132px; height: 132px; opacity: .07; color: var(--accent); }
.porte b { font-family: var(--font-title); font-size: 21px; font-weight: 600; line-height: 1.2; }
.porte > span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.porte em { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-style: normal; font-weight: 600; font-size: 13.5px; color: var(--accent-ink); }
.porte em .ico { width: 14px; height: 14px; }
@media (min-width: 720px) { .portes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .porte { transition: none; } .porte:hover { transform: none; } }
.vitrine-vivant { display: grid; gap: 28px; margin: 0 0 8px; }
@media (min-width: 900px) {
.vitrine-vivant { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
.vitrine-vivant:has(> .vitrine-colonne:only-child) { grid-template-columns: minmax(0, 1fr); }
.vitrine-vivant > .vitrine-colonne:not(:only-child) .univers-grille,
.vitrine-vivant > .vitrine-colonne:not(:only-child) .histoires-grille { grid-template-columns: minmax(0, 1fr); }
}
.vitrine-liste { display: grid; margin-top: 12px; }
.vitrine-colonne > h2,
.vitrine-faq > h2,
.vitrine-fin > h2 { margin: 0 0 4px; font-family: var(--font-title); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.vitrine-fiction { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.vitrine-fiction-corps { display: grid; gap: 4px; min-width: 0; }
.vitrine-fiction:hover b { color: var(--accent-ink); }
.vitrine-fiction b { font-family: var(--font-title); font-size: 18px; font-weight: 600; }
.vitrine-fiction q { quotes: "« " " »"; font-family: var(--font-rp); font-style: italic; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.vitrine-suite { margin: 12px 0 0; }
.vitrine-faq { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.vitrine-fin { margin: 34px 0 0; padding: 30px 22px; border-radius: 16px; background: var(--surface-2); text-align: center; }
.vitrine-fin .vitrine-actes { justify-content: center; }
img.crest { display: block; object-fit: cover; background: var(--surface-2); }
.cover-image { width: 100%; background: var(--surface-2); }
.cover-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rpg-signaler { margin: 26px 0 0; text-align: center; }
.univers-grille { display: grid; gap: 14px; margin: 12px 0 4px; }
@media (min-width: 600px) { .univers-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.univers-carte {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: inherit;
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.univers-carte:hover { border-color: var(--teinte, var(--accent)); transform: translateY(-2px); }
.univers-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.univers-carte-couv {
position: relative;
display: block;
overflow: hidden;
background: color-mix(in oklab, var(--teinte, var(--accent)) 20%, var(--surface-2));
}
.univers-carte-couv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.univers-carte-formes::before,
.univers-carte-formes::after { content: ""; position: absolute; background: var(--teinte, var(--accent)); }
.univers-carte-formes::before { left: -6%; right: -6%; bottom: -28%; height: 70%; opacity: .36; border-radius: 52% 48% 0 0 / 100% 96% 0 0; }
.univers-carte-formes::after { left: -18%; right: 10%; bottom: -46%; height: 64%; opacity: .6; border-radius: 46% 54% 0 0 / 100% 90% 0 0; }
.univers-carte-corps { position: relative; display: block; padding: 0 14px 14px; }
.univers-carte-ecusson { width: 68px; height: 68px; margin: -34px 0 8px; border: 3px solid var(--surface); border-radius: 16px; font-size: 22px; }
.univers-carte .item-name { font-size: 17px; }
.univers-carte .item-accroche,
.univers-carte .meta { display: block; }
.univers-carte .meta { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
.univers-carte { transition: none; }
.univers-carte:hover { transform: none; }
}
.histoires-grille { display: grid; gap: 14px; margin: 12px 0 4px; }
@media (min-width: 600px) { .histoires-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.histoire-carte {
display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start;
padding: 16px; border: 1px solid var(--line); border-radius: var(--rayon-l);
background: var(--surface); color: inherit; text-decoration: none;
transition: border-color .15s, transform .15s;
}
.histoire-carte:hover { border-color: color-mix(in oklab, var(--teinte-fictions) 55%, var(--line-strong)); transform: translateY(-2px); }
.histoire-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.histoire-carte-corps { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 100%; }
.histoire-carte-titre { font-family: var(--font-title); font-size: 18px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.histoire-carte:hover .histoire-carte-titre { color: var(--accent-ink); }
.histoire-carte-debut {
display: -webkit-box; overflow: hidden; margin-top: 2px;
font-family: var(--font-rp); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--muted);
-webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.histoire-carte-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.histoire-carte-chiffres { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .histoire-carte { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px; } }
@media (prefers-reduced-motion: reduce) {
.histoire-carte { transition: none; }
.histoire-carte:hover { transform: none; }
}
.galerie-bloc { margin: 12px 0 0; }
.galerie { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 600px) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.galerie-suite > summary {
display: inline-block;
margin-top: 10px;
padding: 6px 0;
color: var(--accent-ink);
font-size: 14px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.galerie-suite > summary::-webkit-details-marker { display: none; }
.galerie-suite > summary:hover { text-decoration: underline; }
.galerie-suite[open] > summary { display: none; }
.galerie-suite > .galerie { margin-top: 6px; }
@media (min-width: 600px) { .galerie-suite > .galerie { margin-top: 8px; } }
.galerie-lien { display: block; overflow: hidden; border-radius: var(--rayon-s); background: var(--surface-2); cursor: zoom-in; }
.galerie-lien img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .2s; }
.galerie-lien:hover img { transform: scale(1.04); }
.galerie-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .galerie-lien img { transition: none; } .galerie-lien:hover img { transform: none; } }
.visionneuse figure { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; margin: 0; }
.visionneuse figure img { max-height: calc(100dvh - 120px); }
.visionneuse figcaption { max-width: 60ch; color: var(--creme); font-size: 14px; line-height: 1.45; text-align: center; }
.visionneuse-nav {
position: absolute;
top: 50%;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--blanc-14);
color: var(--blanc);
cursor: pointer;
transform: translateY(-50%);
}
.visionneuse-nav:hover { background: var(--blanc-24); }
.visionneuse-nav .ico { width: 22px; height: 22px; }
.visionneuse-precedent { left: 10px; }
.visionneuse-suivant { right: 10px; }
.fic-couv {
position: relative;
display: block;
aspect-ratio: 2 / 3;
overflow: hidden;
border-radius: 3px 7px 7px 3px;
background: var(--surface-2);
box-shadow: 0 1px 2px var(--noir-14), 0 10px 20px -10px var(--noir-45);
container-type: inline-size;
}
.fic-couv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fic-couv-titre {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 14% 9% 10% 15%;
background: linear-gradient(160deg, color-mix(in oklab, var(--teinte) 88%, var(--blanc)), color-mix(in oklab, var(--teinte) 72%, var(--noir)));
color: var(--blanc);
}
.fic-couv-titre::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7%; width: 1px; background: var(--blanc-30); }
.fic-couv-nom {
display: -webkit-box;
overflow: hidden;
font-family: var(--font-title);
font-size: 13px;
font-size: 15cqi;
font-weight: 600;
line-height: 1.12;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.fic-couv-auteur { overflow: hidden; font-size: 9px; font-size: 8.5cqi; letter-spacing: .06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
.carte-fiction { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 0; }
@media (min-width: 600px) { .carte-fiction { grid-template-columns: 100px minmax(0, 1fr); column-gap: 18px; } }
.carte-fiction > .fic-couv-lien { align-self: start; display: block; border-radius: 3px 7px 7px 3px; text-decoration: none; }
.carte-fiction-corps { min-width: 0; }
.carte-fiction .carte-titre { margin: 0; }
.carte-fiction .carte-ou { margin-top: 3px; }
.carte-fiction .etiquettes { padding: 8px 0 0; }
.carte-fiction-debut { margin: 8px 0 0; font-family: var(--font-rp); font-size: 15px; line-height: 1.55; }
.carte-fiction .carte-pied { grid-column: 1 / -1; margin: 12px -16px 0; }
.fic-tete { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: end; }
@media (min-width: 600px) { .fic-tete { grid-template-columns: 132px minmax(0, 1fr); gap: 22px; } }
.fic-tete h1 { margin-top: 0; }
.fic-illustrations { margin-top: 18px; }
.visuel-bloc { margin-top: 18px; }
.visuel-bloc h2 { display: flex; align-items: baseline; gap: 8px; }
.visuel-apercu { display: block; margin: 10px 0 4px; border-radius: var(--rayon); object-fit: cover; background: var(--surface-2); }
.visuel-apercu-bandeau { width: 100%; }
.visuel-apercu-logo { width: 96px; height: 96px; border-radius: 16px; }
.visuel-apercu-livre { width: 132px; aspect-ratio: 2 / 3; border-radius: 3px 7px 7px 3px; }
.visuel-form { display: grid; gap: 4px; margin-top: 8px; }
.visuel-form .btn { margin-top: 8px; }
.visuel-retirer { margin-top: 10px; }
.galerie-gestion { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.galerie-gestion li {
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 6px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.galerie-gestion .galerie-lien img { width: 56px; height: 56px; }
.galerie-gestion-nom { font-size: 14px; overflow-wrap: anywhere; }
.galerie-gestion-gestes { display: flex; gap: 2px; }
.galerie-gestion-gestes form { margin: 0; }
.galerie-gestion-gestes button {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 0;
border-radius: var(--rayon-s);
background: transparent;
color: var(--muted);
cursor: pointer;
}
.galerie-gestion-gestes button:hover { background: var(--surface-2); color: var(--ink); }
.visuels-signales { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 12px 0 0; }
.visuels-signales label { display: grid; gap: 6px; font-size: 12.5px; cursor: pointer; }
.visuels-signales img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-s); background: var(--surface-2); }
.faq { margin-top: 12px; border-top: 1px solid var(--line); }
.faq-question { border-bottom: 1px solid var(--line); }
.faq-question > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 2px;
cursor: pointer;
list-style: none;
font-family: var(--font-title);
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
.faq-question > summary::-webkit-details-marker { display: none; }
.faq-question > summary:hover { color: var(--accent-ink); }
.faq-question > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--rayon-s); }
.faq-signe { width: 18px; height: 18px; color: var(--accent-ink); transition: transform .2s; }
.faq-question[open] .faq-signe { transform: rotate(45deg); }
.faq-reponse { max-width: 64ch; font-family: var(--font-rp); font-size: 16px; line-height: 1.6; }
.faq-question .faq-reponse { padding: 0 2px 18px; }
.faq-reponse p { margin: 0 0 10px; }
.faq-reponse p:last-child { margin-bottom: 0; }
.faq-ouverte { border-top: 0; }
.faq-bloc { padding: 20px 0; border-top: 1px solid var(--line); }
.faq-bloc h2 { margin: 0 0 8px; font-family: var(--font-title); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.faq-autre { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .faq-signe { transition: none; } }
.scroll:has(> .pied-site) { padding-bottom: 0; }
.pied-site { border-top: 1px solid var(--line-strong); background: var(--bandeau); color: var(--sur-bandeau); }
@media (max-width: 899px) {
.scroll:has(> .pied-site) > .scroll-corps > .page { padding-bottom: 40px; }
}
.pied-site-dedans {
display: grid;
gap: 28px;
max-width: var(--largeur-contenu);
margin: 0 auto;
padding: 34px var(--marge) 26px;
}
.pied-site .wordmark { display: inline-flex; padding: 0; background: none; }
.pied-site .wordmark img { height: 38px; }
.pied-site-phrase { margin: 12px 0 0; max-width: 36ch; color: var(--creme-72); font-size: 14px; line-height: 1.5; }
.pied-site .reseaux { margin: 16px 0 0; }
.pied-site .reseau { background: transparent; border-color: var(--creme-24); color: var(--sur-bandeau); }
.pied-site .reseau:hover { border-color: var(--creme-60); color: var(--blanc); }
.pied-site-liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.pied-site-titre { margin: 0 0 8px; color: var(--creme-56); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pied-site-liens ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pied-site-liens a { display: inline-block; padding: 5px 0; color: var(--creme-84); font-size: 14px; text-decoration: none; }
.pied-site-liens a:hover { color: var(--blanc); text-decoration: underline; }
.pied-site-liens a:focus-visible,
.pied-site .reseau:focus-visible { outline: 2px solid var(--sur-bandeau); outline-offset: 2px; }
.pied-site-bas {
max-width: var(--largeur-contenu);
margin: 0 auto;
padding: 16px var(--marge) 22px;
border-top: 1px solid var(--creme-12);
color: var(--creme-56);
font-size: 12.5px;
}
body:has(.cb-bulle) .pied-site-bas { padding-bottom: 84px; }
@media (min-width: 600px) { .pied-site-liens { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
@media (min-width: 900px) {
.pied-site-dedans { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; max-width: 1080px; padding-top: 44px; }
.pied-site-bas { max-width: 1080px; }
}
@media (min-width: 1400px) {
.pied-site-dedans,
.pied-site-bas { max-width: 1180px; }
}
.fic-lecteurs { margin: 18px 0 0; padding: 0; border: 0; }
.fic-lecteur {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 6px 0 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon);
font-size: 14px;
cursor: pointer;
}
.fic-lecteur:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.fic-lecteur input { width: auto; margin: 3px 0 0; accent-color: var(--accent); }
.fic-lecteurs .mine { margin-top: 8px; }
.jdr,
.jdr-suite,
.jdr-appel { max-width: 720px; }
.jdr,
.jdr-suite,
.jdr-appel { margin-left: auto; margin-right: auto; }
.jdr h1 { margin: 0; font-family: var(--font-title); font-size: 32px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
@media (min-width: 900px) { .jdr h1 { font-size: 42px; } }
.jdr-chapeau { margin: 14px 0 0; font-family: var(--font-rp); font-size: 19px; line-height: 1.55; }
.jdr-texte { margin-top: 8px; font-family: var(--font-rp); font-size: 17px; line-height: 1.65; }
.jdr-texte h2 { margin: 36px 0 10px; font-family: var(--font-title); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.jdr-texte h3 { margin: 24px 0 8px; font-family: var(--font-title); font-size: 19px; font-weight: 600; line-height: 1.3; }
.jdr-texte p { margin: 0 0 14px; }
.jdr-texte ul,
.jdr-texte ol { margin: 0 0 14px; padding-left: 1.3em; }
.jdr-texte li { margin: 0 0 8px; }
.jdr-texte a { color: var(--accent-ink); }
.jdr-terme { position: relative; text-decoration: underline dotted; text-underline-offset: 3px; }
.jdr-terme:hover { text-decoration-style: solid; }
@media (hover: hover) and (pointer: fine) {
.jdr-terme[data-definition]::after {
content: attr(data-definition);
position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
width: max-content; max-width: min(320px, 80vw); padding: 9px 12px;
border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); color: var(--ink);
box-shadow: 0 10px 28px -8px var(--noir-35);
font: 400 13.5px/1.45 var(--font-ui); text-align: left; text-decoration: none; white-space: normal;
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s;
}
.jdr-terme[data-definition]:is(:hover, :focus-visible)::after { opacity: 1; visibility: visible; transition-delay: .25s; }
}
@media (prefers-reduced-motion: reduce) { .jdr-terme[data-definition]::after { transition: none; } }
.jdr-loreside { margin: 4px 0 18px; padding: 12px 16px; border-radius: var(--rayon); background: var(--accent-soft); font-family: var(--font-ui); font-size: 14.5px; line-height: 1.55; }
.jdr-loreside b { color: var(--accent-ink); }
.jdr-exemple { margin: 6px 0 18px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); overflow: hidden; }
.jdr-tour { padding: 14px 18px; }
.jdr-tour + .jdr-tour { border-top: 1px solid var(--line); }
.jdr-tour p { margin: 0 0 8px; font-size: 16px; }
.jdr-tour p:last-child { margin-bottom: 0; }
.jdr-tour .jdr-tour-qui { margin-bottom: 6px; font-family: var(--font-title); font-size: 15px; font-weight: 600; color: var(--accent-ink); }
.jdr-facons dt { margin: 14px 0 2px; font-family: var(--font-title); font-size: 19px; font-weight: 600; }
.jdr-facons dd { margin: 0 0 6px; }
.jdr-suite { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.jdr-suite > h2,
.jdr-appel > h2 { margin: 0 0 12px; font-family: var(--font-title); font-size: 22px; font-weight: 600; }
.jdr-cartes { display: grid; gap: 10px; }
@media (min-width: 600px) { .jdr-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jdr-carte { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); color: inherit; text-decoration: none; }
.jdr-carte:hover { border-color: var(--accent); }
.jdr-carte b { font-family: var(--font-title); font-size: 17px; font-weight: 600; }
.jdr-carte span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.jdr-appel { margin-top: 28px; padding: 26px 20px; border-radius: 16px; background: var(--surface-2); text-align: center; }
.jdr-appel-actes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 0; }
.jdr-appel-actes .btn { width: auto; }
.lexique-lettres { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 6px; }
.lexique-lettres a {
display: grid;
place-items: center;
min-width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
color: var(--accent-ink);
font-weight: 600;
text-decoration: none;
}
.lexique-lettres a:hover { border-color: var(--accent); }
.lexique-lettre { margin-top: 22px; }
.lexique-lettre > h2 { margin: 0; font-family: var(--font-title); font-size: 30px; font-weight: 600; color: var(--accent-ink); }
.lexique { margin: 0; }
.lexique-entree { padding: 14px 10px; scroll-margin-top: 16px; }
.lexique-entree + .lexique-entree { border-top: 1px solid var(--line); }
.lexique-entree:target, .lexique-entree.cible { border-top-color: transparent; border-radius: var(--rayon-s); background: var(--accent-soft); }
.lexique dt { font-family: var(--font-title); font-size: 19px; font-weight: 600; }
.lexique-aussi { margin-left: 4px; color: var(--muted); font-family: var(--font-ui); font-size: 13px; font-weight: 400; }
.lexique dd { margin: 4px 0 0; }
.lexique dd p { margin: 0 0 6px; font-family: var(--font-rp); font-size: 16.5px; line-height: 1.6; }
.lexique dd p:last-child { margin-bottom: 0; }
.lexique .lexique-loreside,
.lexique .lexique-voir { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; }
.lexique .lexique-loreside b { color: var(--accent-ink); }
.lexique .lexique-voir { color: var(--muted); }
.lexique-voir a { color: var(--accent-ink); }
.vitrine-debuter { margin-top: 10px; }
.profil-pratiques { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
fieldset.profil-cases { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.profil-cases > legend { padding: 0; }
.profil-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; margin-top: 8px; }
.profil-cases .choix-ligne { align-items: flex-start; }
.profil-cases .choix-ligne input { margin-top: 3px; }
.profil-ecriture > h2 { margin: 0 0 8px; }
.profil-ecriture-liste { margin: 0; }
.profil-ecriture-liste > div {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2px;
padding: 10px 0;
border-top: 1px solid var(--line);
}
.profil-ecriture-liste > div:first-child { border-top: 0; padding-top: 0; }
.profil-ecriture-liste dt { color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.profil-ecriture-liste dd { margin: 0; font-size: 14.5px; }
.profil-ecriture-liste dd.profil-themes { margin: 4px 0 0; }
@media (min-width: 600px) {
.profil-ecriture-liste > div { grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.profil-ecriture-liste dd.profil-themes { margin: 0; }
}
.profil-tw-precision { color: var(--muted); font-size: 13.5px; }
.ej-cadre { margin: 6px 0 0; }
.ej-cadre a { white-space: nowrap; }
.chip:has(> input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:has(> input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:has(> input) { position: relative; }
.rpg-avatars { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.annuaire-avatars { align-items: center; margin-top: -4px; }
.chips-titre { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.annuaire-avatars-note { margin: -6px 0 12px; }
.profil-groupe { margin: 0; padding: 0; border: 0; min-width: 0; }
.profil-groupe .choix-ligne .mine { display: block; font-size: 12.5px; }
.tri-criteres { margin: 14px 0 0; padding: 4px 14px 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.tri-criteres > legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tri-bilan-compte { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.tri-ligne .meta { margin: 2px 0 0; }
.tri-perso { padding-left: 12px; border-left: 2px solid var(--line); }
.tri-manque { margin: 4px 0 0; font-size: 13.5px; color: var(--warn); }
.tri-replie { margin-top: 12px; }
.tri-replie > summary { cursor: pointer; padding: 6px 0; font-size: 13.5px; color: var(--muted); }
.heure-avis {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin: 0 0 14px;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface-2);
font-size: 13.5px;
color: var(--muted);
}
.heure-avis a { font-weight: 600; }
.heure-avis-fermer { border: 0; background: none; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.idee-depot { margin: 16px 0; }
.idee-bascule { margin: 0 0 4px; }
.idee-bascule .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 13px; font-size: 13.5px; font-weight: 600; }
.idee-bascule .chip .ico { width: 16px; height: 16px; }
.idee-depot:has(input[name='idee_sorte'][value='idee']:checked) .idee-volet-bug,
.idee-depot:has(input[name='idee_sorte'][value='bug']:checked) .idee-volet-idee { display: none; }
.idee-form .btn { margin-top: 10px; }
.idee-carte {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
gap: 14px;
padding: 14px 0;
border-top: 1px solid var(--line);
}
.idee-carte-corps .meta, .idee-carte-corps .mine { margin: 4px 0 0; }
.idee-carte-titre { margin: 0; font-weight: 600; font-size: 15.5px; }
.idee-carte-titre a { color: var(--ink); text-decoration: none; }
.idee-carte-titre a:hover { text-decoration: underline; }
.idee-carte-titre .etiq { margin-left: 4px; vertical-align: 1px; }
.idee-soutien { display: flex; flex-direction: column; align-items: stretch; align-self: start; gap: 6px; text-align: center; }
.idee-soutien-nb { font-size: 12.5px; color: var(--muted); }
.idee-soutien-nb b { display: block; font-size: 20px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.idee-soutien .btn { width: 100%; padding-inline: 6px; white-space: nowrap; }
.idee-soutenue { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.idee { margin-top: 10px; }
.idee-tete h1 { margin: 8px 0 4px; }
.idee-texte { margin: 14px 0; line-height: 1.6; }
.idee #soutien .idee-soutien { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; }
.idee #soutien .idee-soutien .btn { width: auto; }
.idee #soutien .idee-soutien-nb b { display: inline; font-size: 17px; }
.idee-reponse { margin: 18px 0 8px; padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); }
.idee-reponse h2 { margin: 0; font-size: 14px; color: var(--accent-ink); }
.idee-reponse .mine { margin: 2px 0 0; }
.idee-reponse .idee-texte { margin: 8px 0 0; }
.etiq.idee-faite { background: var(--ink); color: var(--paper); }
@media (max-width: 480px) {
.idee-carte { grid-template-columns: 100px minmax(0, 1fr); gap: 10px; }
}
.scroll { display: flex; flex-direction: column; }
.scroll-corps { flex: 1 0 auto; min-width: 0; }
.scroll > .pied-site { flex: none; }
:root {
--en-ligne: #2e9d62;
--en-ligne-texte: #22724a;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) {
--en-ligne: #3dbb78;
--en-ligne-texte: #6fd39c;
}
}
html[data-theme='sombre'] {
--en-ligne: #3dbb78;
--en-ligne-texte: #6fd39c;
}
.joueurs-en-ligne { color: var(--en-ligne-texte); font-weight: 600; }
.joueurs-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
gap: 12px;
margin: 14px 0 8px;
}
.joueur-carte {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: inherit;
text-decoration: none;
transition: border-color .15s, box-shadow .15s;
}
.joueur-carte:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px var(--ombre-encre-8); }
.joueur-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.joueur-carte-portrait { position: relative; flex: none; }
.joueur-carte .portrait { width: 56px; height: 56px; border-radius: 18px; font-size: 18px; object-fit: cover; }
.joueur-carte-corps { display: grid; gap: 6px; min-width: 0; }
.joueur-carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.joueur-carte-nom { font-family: var(--font-title); font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.joueur-carte-extrait {
display: -webkit-box;
overflow: hidden;
color: var(--muted);
font-size: 13.5px;
line-height: 1.45;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.joueurs-moi { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) { .joueur-carte { transition: none; } }
:root {
--paper: #eeeae3;
--surface-2: #f5f2ec;
--surface-3: #e7e2d9;
--teinte-univers: #605a90;
--teinte-parties: #2a7880;
--teinte-fictions: #a34a74;
--teinte-jeux: #3567ad;
--teinte-communaute: #9a5f12;
--teinte-loreside: #4b56a6;
--halo-1: color-mix(in oklab, var(--accent) 11%, transparent);
--halo-2: color-mix(in oklab, var(--teinte-parties) 9%, transparent);
--ombre-carte: 0 1px 2px rgba(27, 26, 25, .05), 0 10px 28px -20px rgba(27, 26, 25, .28);
}
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) {
--paper: #121110;
--surface-2: #24221f;
--surface-3: #2c2925;
--teinte-univers: #a9a2dc;
--teinte-parties: #6cc2c8;
--teinte-fictions: #e08bb2;
--teinte-jeux: #86aee8;
--teinte-communaute: #e0a85a;
--teinte-loreside: #9ea6ec;
--halo-1: color-mix(in oklab, var(--accent) 16%, transparent);
--halo-2: color-mix(in oklab, var(--teinte-parties) 10%, transparent);
--ombre-carte: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -18px rgba(0, 0, 0, .6);
}
}
html[data-theme='sombre'] {
--paper: #121110;
--surface-2: #24221f;
--surface-3: #2c2925;
--teinte-univers: #a9a2dc;
--teinte-parties: #6cc2c8;
--teinte-fictions: #e08bb2;
--teinte-jeux: #86aee8;
--teinte-communaute: #e0a85a;
--teinte-loreside: #9ea6ec;
--halo-1: color-mix(in oklab, var(--accent) 16%, transparent);
--halo-2: color-mix(in oklab, var(--teinte-parties) 10%, transparent);
--ombre-carte: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 30px -18px rgba(0, 0, 0, .6);
}
.scroll {
background:
radial-gradient(1100px 560px at 8% -6%, var(--halo-1), transparent 70%),
radial-gradient(900px 520px at 102% 0%, var(--halo-2), transparent 70%),
var(--paper);
}
@media (min-width: 1000px) {
.page { margin-left: auto; margin-right: auto; }
}
@media (min-width: 900px) {
.page-etroit  { max-width: 552px; }
.page-colonne { max-width: 912px; }
.page-lecture { max-width: 1032px; }
.page-large   { max-width: 1272px; }
}
:is(.page-etroit, .page-colonne, .page-lecture, .page-large, .page-fil) :is(.prose, .hint, .note-box, .danger, .faq-reponse),
:is(.page-etroit, .page-colonne, .page-lecture, .page-large, .page-fil) > :is(.sub, p.mine) { max-width: none; }
:where(.page) > h1,
:where(.page) > .titre-ligne > h1,
.lecture-texte > h1 {
margin: 0 0 4px;
font-size: 30px;
line-height: 1.15;
letter-spacing: -.02em;
text-wrap: balance;
}
:where(.page) > .sub,
.lecture-texte > .sub { font-size: 15px; }
@media (min-width: 900px) {
:where(.page:not(.page-etroit)) > h1,
:where(.page:not(.page-etroit)) > .titre-ligne > h1,
.lecture-texte > h1 { font-size: 34px; }
}
.titre-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.titre-ligne > h1 { margin: 0; }
:is(.page-colonne, .page-lecture, .page-large) .section:has(> h2:first-child):not(.section .section) {
padding: 18px 22px 20px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
scroll-margin-top: 20px;
}
:is(.page-colonne, .page-lecture, .page-large) .section:has(> h2:first-child):not(.section .section) > h2:first-child {
margin: -18px -22px 16px;
padding: 14px 22px 13px;
border-bottom: 1px solid var(--line);
border-radius: 16px 16px 0 0;
background: linear-gradient(100deg, color-mix(in oklab, var(--accent) 14%, var(--surface)) 0%, var(--surface) 75%);
font-family: var(--font-title);
font-size: 18.5px;
font-weight: 600;
letter-spacing: -.01em;
}
:is(.page-colonne, .page-lecture, .page-large) .section + .section { margin-top: 16px; }
:is(.page-colonne, .page-lecture, .page-large) .section:has(> .row):not(:has(> h2)):not(.section .section) {
padding: 4px 22px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
:is(.page-colonne, .page-lecture, .page-large) .rule { height: 0; margin: 10px 0; background: none; }
:is(.page-colonne, .page-lecture, .page-large) .section:has(> h2:first-child):not(.section .section):nth-of-type(5n+2) > h2:first-child { background: linear-gradient(100deg, color-mix(in oklab, var(--teinte-parties) 14%, var(--surface)) 0%, var(--surface) 75%); }
:is(.page-colonne, .page-lecture, .page-large) .section:has(> h2:first-child):not(.section .section):nth-of-type(5n+3) > h2:first-child { background: linear-gradient(100deg, color-mix(in oklab, var(--teinte-fictions) 13%, var(--surface)) 0%, var(--surface) 75%); }
:is(.page-colonne, .page-lecture, .page-large) .section:has(> h2:first-child):not(.section .section):nth-of-type(5n+4) > h2:first-child { background: linear-gradient(100deg, color-mix(in oklab, var(--teinte-communaute) 13%, var(--surface)) 0%, var(--surface) 75%); }
:is(.page-colonne, .page-lecture, .page-large) .section:has(> h2:first-child):not(.section .section):nth-of-type(5n+5) > h2:first-child { background: linear-gradient(100deg, color-mix(in oklab, var(--teinte-jeux) 13%, var(--surface)) 0%, var(--surface) 75%); }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .field {
min-height: 42px;
padding: 9px 13px;
border: 1px solid var(--line-strong);
border-radius: 10px;
background: var(--surface-2);
color: var(--ink);
transition: border-color .15s, box-shadow .15s, background-color .15s;
}
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .field:focus {
outline: none;
border-color: var(--accent);
background: var(--surface);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) textarea.field { line-height: 1.55; }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) input.field[type='file'] { min-height: 0; padding: 8px 10px; }
@media (min-width: 520px) {
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .field { font-size: 15px; }
}
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .lab {
margin: 16px 0 6px;
color: var(--ink);
font-size: 13.5px;
font-weight: 600;
}
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .lab:first-child { margin-top: 0; }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .lab .mine { font-weight: 400; }
@media (min-width: 700px) {
.page-colonne select.field { width: auto; min-width: min(260px, 100%); max-width: 100%; }
.page-colonne input.field:is([type='date'], [type='time'], [type='number']) { max-width: 240px; }
.page-colonne input.field:is([maxlength='20'], [maxlength='30'], [maxlength='40'], [maxlength='50'], [maxlength='60'], [maxlength='80']) { max-width: 420px; }
.page-colonne input.field:is([type='email'], [type='password']) { max-width: 440px; }
}
.champs { display: grid; gap: 0 18px; }
@media (min-width: 700px) {
.champs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .champs .field { width: 100%; min-width: 0; max-width: none; }
}
.champ .lab:first-child { margin-top: 16px; }
.profil-groupe { margin-top: 18px; }
form > input[type='hidden']:first-child + .lab,
form > input[type='hidden']:first-child + input[type='hidden'] + .lab { margin-top: 0; }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) :is(input[type='checkbox'], input[type='radio']) { accent-color: var(--accent); }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .choix-ligne { margin: 8px 0; }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .choix-ligne .mine { display: block; margin-top: 2px; }
.page-etroit > form {
padding: 22px 24px 18px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
.btn { transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.scroll .btn:not(.btn-main):not(.btn-warn):hover { background: var(--surface-2); border-color: color-mix(in oklab, var(--accent) 40%, var(--line-strong)); }
.btn-main {
background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 86%, var(--blanc)), var(--accent));
box-shadow: inset 0 1px 0 var(--blanc-16), 0 6px 16px -9px color-mix(in oklab, var(--accent) 80%, transparent);
}
.btn-main:hover { background: var(--accent); transform: translateY(-1px); }
.btn-warn:hover { background: var(--warn-soft); }
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) :is(.hint, .note-box, .danger) { font-size: 13.5px; }
.etiq.pratique-univers { background: color-mix(in oklab, var(--teinte-univers) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-univers) 78%, var(--ink)); }
.etiq.pratique-parties { background: color-mix(in oklab, var(--teinte-parties) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-parties) 78%, var(--ink)); }
.etiq.pratique-fictions { background: color-mix(in oklab, var(--teinte-fictions) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-fictions) 78%, var(--ink)); }
.lecture { display: grid; gap: 24px; }
.sommaire { display: none; }
@media (min-width: 1200px) {
.lecture:not(.lecture-sans-sommaire) { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.sommaire {
display: block;
position: sticky;
top: 24px;
max-height: calc(100dvh - 150px);
overflow-y: auto;
padding: 14px 10px 14px 14px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
}
.sommaire-titre {
margin: 0 0 8px 8px;
color: var(--accent-ink);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.sommaire ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.sommaire a {
display: block;
padding: 6px 10px;
border-left: 2px solid var(--line);
border-radius: 0 8px 8px 0;
color: var(--muted);
font-size: 13.5px;
line-height: 1.35;
text-decoration: none;
}
.sommaire a:hover { border-left-color: var(--accent); background: var(--surface-2); color: var(--ink); }
.sommaire a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lecture-texte { min-width: 0; }
.lecture-texte :is([id], .faq-bloc) { scroll-margin-top: 20px; }
.page-lecture .faq-ouverte { display: grid; gap: 14px; margin-top: 20px; }
.page-lecture .faq-ouverte .faq-bloc {
padding: 18px 22px 20px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
.page-lecture .faq-ouverte .faq-bloc h2 { margin: 0 0 10px; font-size: 20px; }
.page-lecture .faq-ouverte .faq-bloc:nth-child(4n+1) h2 { color: var(--accent-ink); }
.page-lecture .faq-ouverte .faq-bloc:nth-child(4n+2) h2 { color: color-mix(in oklab, var(--teinte-parties) 80%, var(--ink)); }
.page-lecture .faq-ouverte .faq-bloc:nth-child(4n+3) h2 { color: color-mix(in oklab, var(--teinte-fictions) 80%, var(--ink)); }
.page-lecture .faq-ouverte .faq-bloc:nth-child(4n+4) h2 { color: color-mix(in oklab, var(--teinte-communaute) 80%, var(--ink)); }
.page-lecture :is(.jdr, .jdr-suite, .jdr-appel) { max-width: none; margin-left: 0; margin-right: 0; }
.jdr-tete {
padding: 24px 26px 26px;
border: 1px solid var(--line);
border-radius: 20px;
background:
radial-gradient(120% 160% at 0% 0%, color-mix(in oklab, var(--accent) 17%, var(--surface)) 0%, transparent 60%),
radial-gradient(90% 140% at 100% 100%, color-mix(in oklab, var(--teinte-parties) 12%, var(--surface)) 0%, transparent 65%),
var(--surface);
box-shadow: var(--ombre-carte);
}
.jdr-tete .jdr-chapeau { margin-bottom: 0; }
.page-lecture .jdr-texte { margin-top: 18px; }
.page-lecture .jdr-texte h2 { padding-left: 14px; border-left: 4px solid var(--accent); }
.page-lecture .jdr-texte h2:nth-of-type(4n+2) { border-left-color: var(--teinte-parties); }
.page-lecture .jdr-texte h2:nth-of-type(4n+3) { border-left-color: var(--teinte-fictions); }
.page-lecture .jdr-texte h2:nth-of-type(4n+4) { border-left-color: var(--teinte-communaute); }
@media (min-width: 1000px) {
.vitrine-faq {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
grid-template-rows: auto auto 1fr;
gap: 0 56px;
align-items: start;
}
.vitrine-faq > h2 { grid-column: 1; grid-row: 1; }
.vitrine-faq > .faq { grid-column: 2; grid-row: 1 / span 3; }
.vitrine-faq > .vitrine-suite { grid-column: 1; grid-row: 2; }
.vitrine-faq > .vitrine-debuter { grid-column: 1; grid-row: 3; }
}
.vitrine-faq .faq-reponse { max-width: none; }
@media (prefers-reduced-motion: reduce) {
.btn,
:is(.page-etroit, .page-colonne, .page-lecture, .page-large) .field { transition: none; }
.btn-main:hover { transform: none; }
}
@media (min-width: 900px) {
.page-fil { max-width: 1112px; }
}
.accueil { display: grid; gap: 22px; align-items: start; }
@media (min-width: 1200px) {
.accueil { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
}
.accueil-fil { min-width: 0; }
@media (min-width: 1440px) {
.page-fil { max-width: none; }
.accueil { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; }
.accueil-fil { width: 100%; max-width: 760px; justify-self: center; }
}
.visuellement-cache {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.composeur-carte {
margin-bottom: 16px;
padding: 12px 14px 8px;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
.composeur-pilule {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 16px 6px 6px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface-2);
color: var(--muted);
text-decoration: none;
transition: border-color .15s, background-color .15s;
}
.composeur-pilule:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--line-strong)); background: var(--surface); }
.composeur-pilule:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.composeur-pilule .portrait { border-radius: 50%; object-fit: cover; }
.composeur-invite { flex: 1; min-width: 0; font-size: 15.5px; }
.composeur-raccourcis {
display: flex;
flex-wrap: wrap;
gap: 2px 4px;
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid var(--line);
}
.composeur-raccourci {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px;
border-radius: 10px;
color: var(--muted);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
}
.composeur-raccourci:hover { background: var(--surface-2); color: var(--ink); }
.composeur-raccourci .ico { width: 20px; height: 20px; }
.teinte-univers > .ico { color: var(--teinte-univers); }
.teinte-parties > .ico { color: var(--teinte-parties); }
.teinte-fictions > .ico { color: var(--teinte-fictions); }
.teinte-communaute > .ico { color: var(--teinte-communaute); }
.teinte-jeux > .ico { color: var(--teinte-jeux); }
.teinte-loreside > .ico { color: var(--teinte-loreside); }
.dialogue {
width: min(560px, calc(100vw - 24px));
max-height: calc(100dvh - 32px);
padding: 0;
border: 0;
border-radius: 18px;
background: var(--surface);
color: var(--ink);
box-shadow: 0 24px 70px -20px var(--noir-55);
}
.dialogue::backdrop { background: var(--voile-55); backdrop-filter: blur(2px); }
.dialogue-boite { display: flex; flex-direction: column; max-height: calc(100dvh - 32px); }
.dialogue-tete {
position: relative;
padding: 16px 52px;
border-bottom: 1px solid var(--line);
text-align: center;
}
.dialogue-tete h2 { margin: 0; font-family: var(--font-title); font-size: 19px; font-weight: 600; }
.dialogue-fermer {
position: absolute;
top: 50%;
right: 12px;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: var(--surface-2);
color: var(--muted);
cursor: pointer;
transform: translateY(-50%);
}
.dialogue-fermer:hover { background: var(--surface-3); color: var(--ink); }
.dialogue-fermer .ico { width: 18px; height: 18px; }
.dialogue-corps { overflow-y: auto; padding: 16px 18px 6px; }
.dialogue-auteur { display: flex; align-items: center; gap: 10px; }
.dialogue-auteur .portrait { border-radius: 50%; object-fit: cover; }
.dialogue-auteur b { display: block; font-size: 15px; }
.dialogue-auteur .mine { display: block; margin: 1px 0 0; }
.dialogue .dialogue-texte {
width: 100%;
min-height: 150px;
margin-top: 12px;
padding: 6px 2px;
border: 0;
background: transparent;
color: var(--ink);
font-family: var(--font-ui);
font-size: 18px;
line-height: 1.5;
resize: vertical;
}
.dialogue .dialogue-texte:focus { outline: none; }
.dialogue-pied {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 12px 18px;
border-top: 1px solid var(--line);
background: color-mix(in oklab, var(--surface-2) 60%, var(--surface));
border-radius: 0 0 18px 18px;
}
.dialogue-outil {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 60%;
padding: 7px 12px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--surface);
color: var(--muted);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
}
.dialogue-outil:hover { border-color: var(--line-strong); color: var(--ink); }
.dialogue-outil:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dialogue-outil .ico { width: 19px; height: 19px; color: var(--teinte-parties); }
.dialogue-outil-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dialogue-outil input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dialogue-compte { margin-left: auto; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.creer-choix > .creer-carte:nth-child(2) > .ico { color: var(--teinte-parties); }
.creer-choix > .creer-carte:nth-child(1) > .ico { color: var(--teinte-fictions); }
.creer-choix > .creer-carte:nth-child(3) > .ico { color: var(--teinte-jeux); }
.accueil-cote { display: grid; gap: 14px; min-width: 0; }
.bloc-cote {
padding: 14px 16px 12px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
.bloc-cote-titre {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 10px;
font-family: var(--font-title);
font-size: 17px;
font-weight: 600;
}
.bloc-cote-titre .ico { width: 20px; height: 20px; }
.bloc-cote-communaute .bloc-cote-titre .ico { color: var(--teinte-communaute); }
.bloc-cote-loreside .bloc-cote-titre .ico { color: var(--teinte-loreside); }
.bloc-cote-n {
margin-left: auto;
padding: 1px 9px;
border-radius: var(--rayon-pilule);
background: color-mix(in oklab, var(--en-ligne) 16%, var(--surface));
color: var(--en-ligne-texte);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.bloc-cote-visages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bloc-cote-visages a { position: relative; display: block; }
.bloc-cote-visages .portrait { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; font-size: 13px; object-fit: cover; }
.bloc-cote-liste { margin: 0; padding: 0; list-style: none; }
.bloc-cote-liste li { padding: 8px 0; border-top: 1px solid var(--line); }
.bloc-cote-liste li:first-child { border-top: 0; padding-top: 2px; }
.bloc-cote-liste a { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; }
.bloc-cote-liste a:hover { color: var(--accent-ink); text-decoration: underline; }
.bloc-cote-liste .mine { display: block; margin: 2px 0 0; }
.bloc-cote-nouvelle {
display: block;
margin: 0 0 8px;
padding: 10px 12px;
border-radius: 12px;
background: color-mix(in oklab, var(--teinte-loreside) 10%, var(--surface));
color: var(--ink);
text-decoration: none;
}
.bloc-cote-nouvelle .mine { display: block; margin: 0 0 2px; }
.bloc-cote-nouvelle b { font-size: 14px; line-height: 1.35; }
.bloc-cote-nouvelle:hover b { color: var(--accent-ink); }
.bloc-cote-lien { display: inline-block; margin-top: 10px; color: var(--accent-ink); font-size: 13px; font-weight: 600; text-decoration: none; }
.bloc-cote-lien:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
.composeur-pilule { transition: none; }
}
.tableau-titre {
display: flex;
align-items: center;
gap: 10px;
margin: 26px 0 12px;
font-family: var(--font-title);
font-size: 21px;
font-weight: 600;
letter-spacing: -.01em;
}
.tableau-titre + .note-box { margin-bottom: 16px; }
.annonce-portrait { border-radius: 50%; object-fit: cover; }
.annonce-anonyme { border-radius: 50%; background: var(--surface-3); color: var(--muted); }
button.acte { border: 0; background: none; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
button.acte:hover { background: var(--surface-2); color: var(--ink); }
.acte .ico { width: 18px; height: 18px; }
.dialogue input.field.dialogue-titre {
width: 100%;
max-width: none;
min-height: 0;
margin-top: 12px;
padding: 6px 2px;
border: 0;
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--ink);
font-family: var(--font-title);
font-size: 20px;
font-weight: 600;
}
.dialogue input.field.dialogue-titre:focus { border-bottom-color: var(--accent); }
.dialogue .dialogue-texte { min-height: 130px; }
.dialogue-options { margin: 4px 0 2px; padding-top: 6px; border-top: 1px solid var(--line); }
.dialogue-options .choix-ligne { align-items: flex-start; margin: 8px 0; }
.dialogue-options .choix-ligne input { margin-top: 3px; accent-color: var(--accent); }
.dialogue-options .mine { display: block; margin: 1px 0 0; }
.dialogue-citation {
margin: 0 0 4px;
padding: 10px 14px;
border-left: 3px solid var(--teinte-parties);
border-radius: 0 10px 10px 0;
background: color-mix(in oklab, var(--teinte-parties) 9%, var(--surface));
font-family: var(--font-title);
font-size: 16px;
}
.dialogue-corps > .mine { margin-top: 6px; }
.champ-couleur { width: 100%; height: 44px; padding: 4px; }
.ouvrir-resume { color: var(--muted); font-size: 14px; cursor: pointer; }
.ouvrir-resume:hover { color: var(--ink); }
.fiches-actes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.fiches-actes .ico { width: 18px; height: 18px; }
.fiches-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 200px));
justify-content: start;
gap: 14px;
margin: 16px 0 8px;
}
.fiches-grille-profil { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 170px)); margin-top: 4px; }
.fiche-carte {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
color: inherit;
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.fiche-carte:hover { border-color: color-mix(in oklab, var(--teinte-parties) 45%, var(--line-strong)); transform: translateY(-2px); }
.fiche-carte-neuve { outline: 2px solid var(--teinte-parties); outline-offset: 2px; }
.fiche-carte-lien { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
a.fiche-carte-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fiche-portrait {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
background: var(--surface-2);
}
.fiche-portrait-vide {
display: grid;
place-items: center;
background:
radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--teinte-parties) 55%, var(--surface)), transparent 70%),
linear-gradient(160deg, color-mix(in oklab, var(--accent) 70%, var(--surface)), color-mix(in oklab, var(--teinte-parties) 75%, var(--ink)));
color: var(--blanc);
font-family: var(--font-title);
font-size: 40px;
font-weight: 600;
}
.fiche-carte-corps { display: grid; gap: 4px; padding: 10px 12px 12px; }
.fiche-carte-nom { font-family: var(--font-title); font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.fiche-carte-accroche {
display: -webkit-box;
overflow: hidden;
color: var(--muted);
font-size: 13px;
line-height: 1.4;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.fiche-carte-corps .etiq { justify-self: start; margin-top: 2px; }
.fiche-carte-pied {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 0;
padding: 8px 12px 10px;
border-top: 1px solid var(--line);
}
.fiche-edition { display: grid; gap: 4px 22px; }
@media (min-width: 700px) {
.fiche-edition { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
}
.fiche-edition-portrait .fiche-portrait { max-width: 200px; margin-bottom: 4px; border-radius: 14px; }
.fiche-edition-actes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fiche-edition-actes form { margin: 0; }
.fiche-page-lignes { display: grid; gap: 0; margin: 16px 0 0; }
.fiche-page-lignes div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.fiche-page-lignes dt { color: var(--muted); font-size: 13px; font-weight: 600; }
.fiche-page-lignes dd { margin: 0; }
.fiches-depart {
margin: 16px 0 0;
padding: 12px 14px 4px;
border: 1px solid var(--line);
border-left: 3px solid var(--teinte-parties);
border-radius: 14px;
background: var(--surface);
}
.fiches-depart > .mine { margin: 0 0 8px; }
.fiches-depart-titre { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.fiche-carte { transition: none; }
.fiche-carte:hover { transform: none; }
}
.fiche-carte-univers {
justify-self: start;
margin-top: 2px;
padding: 2px 9px;
border-radius: var(--rayon-pilule);
background: color-mix(in oklab, var(--couleur-univers, var(--accent)) 16%, var(--surface));
color: color-mix(in oklab, var(--couleur-univers, var(--accent)) 70%, var(--ink));
font-size: 12px;
font-weight: 600;
}
.fiche-portrait-vide[style*='--couleur-univers'] {
background:
radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--couleur-univers) 45%, var(--surface)), transparent 70%),
linear-gradient(160deg, var(--couleur-univers), color-mix(in oklab, var(--couleur-univers) 60%, var(--ink)));
}
.fiche-carte-grise .fiche-portrait { opacity: .6; }
.nav-icone { width: 48px; height: 48px; object-fit: contain; flex: none; }
.sections { display: grid; gap: 14px; margin: 0 0 30px; }
.sections .portes { margin: 0; }
.sections .porte { grid-template-rows: auto auto 1fr auto; }
.porte-icone {
width: 88px;
height: 88px;
margin: -6px 0 2px -4px;
object-fit: contain;
filter: drop-shadow(0 10px 18px color-mix(in oklab, var(--accent) 22%, transparent));
transition: transform .25s ease;
}
.porte:hover .porte-icone { transform: translateY(-3px) rotate(-3deg); }
.porte-bientot { border-style: dashed; background: color-mix(in oklab, var(--surface) 70%, var(--paper)); }
.porte-bientot .porte-icone { opacity: .8; }
.porte-bientot:hover { border-color: var(--line); transform: none; }
.porte-bientot:hover .porte-icone { transform: none; }
.porte em.porte-bientot-etiq {
justify-self: start;
padding: 2px 10px;
border-radius: var(--rayon-pilule);
background: color-mix(in oklab, var(--teinte-communaute) 15%, var(--surface));
color: color-mix(in oklab, var(--teinte-communaute) 80%, var(--ink));
font-size: 12px;
font-weight: 700;
}
@media (min-width: 600px) and (max-width: 899px) {
.sections .portes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
.sections .portes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.decouvrir-rubrique h2 .decouvrir-icone { width: 40px; height: 40px; }
.item > .item-icone { width: 40px; height: 40px; }
.creer-carte > .nav-icone { width: 48px; height: 48px; margin-top: -4px; }
@media (prefers-reduced-motion: reduce) {
.porte-icone { transition: none; }
.porte:hover .porte-icone { transform: none; }
}
.geste-motive > summary { list-style: none; cursor: pointer; }
.geste-motive > summary::-webkit-details-marker { display: none; }
.geste-motive[open] { flex-basis: 100%; }
.geste-motive > form {
display: grid;
gap: 8px;
margin-top: 8px;
padding: 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
}
.geste-motive > form .lab { margin-top: 0; }
.geste-motive > form .btn { justify-self: start; }
.decision-motif {
padding: 12px 14px;
border-left: 3px solid var(--line-strong);
border-radius: 0 10px 10px 0;
background: var(--surface-2);
}
.sub + .section.decision { margin-top: 18px; }
.juridique .section :is(p, li) { font-size: 15px; line-height: 1.62; }
.juridique .section p { margin: 0 0 10px; }
.juridique .section p:last-child { margin-bottom: 0; }
.juridique .section ul { margin: 0 0 10px; padding-left: 1.2em; }
.juridique .section li + li { margin-top: 6px; }
.juridique .section li::marker { color: var(--faint); }
.clause {
padding: 12px 16px;
border-left: 3px solid var(--accent);
border-radius: 0 12px 12px 0;
background: color-mix(in oklab, var(--accent) 7%, var(--surface));
font-weight: 500;
}
.donnee { padding: 12px 0; border-top: 1px solid var(--line); }
.donnee:first-of-type { padding-top: 0; border-top: 0; }
.juridique .section p.donnee-quoi { margin: 0 0 6px; font-weight: 600; }
.donnee dl { display: grid; gap: 4px; margin: 0; }
.donnee dl > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; }
.donnee dt { color: var(--muted); font-size: 13px; line-height: 1.62; }
.donnee dd { margin: 0; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 560px) {
.donnee dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.liste-simple { margin: 0; padding-left: 1.2em; }
.liste-simple li + li { margin-top: 6px; }
.accord { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; cursor: pointer; }
.accord input { flex: none; width: auto; margin: 3px 0 0; }
.mention-conditions { margin: 12px 0 4px; }
.mention-conditions p { margin: 0; }
.mention-conditions p + p { margin-top: 6px; }
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.dossier .mine { margin: 2px 0 6px; }
.dossier-a-lire .lab { margin-top: 12px; }
.periode { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 14px 0 10px; }
.periode-champ { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.periode .field { margin: 0; width: auto; min-width: 0; }
.periode-resume { margin: 0 0 10px; }
.periode-plier { margin: 10px 0 4px; }
.periode-plier > summary { cursor: pointer; font-size: 13px; color: var(--muted); width: max-content; }
.medias-separateur { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.medias-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.media-tuile {
position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface);
color: var(--ink); text-decoration: none;
}
.media-tuile:hover, .media-tuile:focus-visible { border-color: var(--accent); }
.media-tuile img, .media-tuile video, .media-vide {
display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface-2);
}
.media-vide { display: grid; place-items: center; color: var(--faint); font-size: 28px; }
.media-etiquettes { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.media-etiquette {
padding: 2px 8px; border-radius: var(--rayon-pilule);
background: var(--ink); color: var(--paper); font-size: 11.5px; font-weight: 600;
}
.media-nouveau { background: var(--accent); color: var(--sur-accent); }
.media-signalee { background: var(--warn-soft); color: var(--warn); }
.media-masquee { background: var(--warn); color: var(--surface); }
.count-alerte { background: var(--warn); color: var(--surface); }
.media-signalements ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.media-signalements .decision-motif { margin-top: 6px; }
.signaler-fenetre { max-width: 420px; }
.signaler-fenetre .signaler-motifs { border: 0; margin: 0 0 10px; padding: 0; }
.signaler-fenetre .signaler-motifs .lab { margin-bottom: 4px; }
.signaler-fenetre textarea { margin-bottom: 10px; }
.signaler-retour { font-size: 13px; color: var(--ink); background: var(--surface-2); border-radius: var(--rayon); padding: 9px 11px; margin: 0 0 12px; }
.media-legende { display: grid; gap: 2px; padding: 8px 10px 10px; font-size: 12px; line-height: 1.35; }
.media-legende b { font-weight: 600; overflow-wrap: anywhere; }
.media-legende span { color: var(--faint); }
.media-grand { margin-top: 14px; border-radius: var(--rayon-l); overflow: hidden; background: var(--surface-2); }
.media-grand img, .media-grand video { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; object-fit: contain; }
.chat-onglet-nombre {
flex: none; min-width: 20px; padding: 1px 6px; border-radius: var(--rayon-pilule);
background: var(--accent); color: var(--sur-accent);
font-size: 11.5px; font-weight: 600; line-height: 1.5;
}
.chat-onglet-quoi { margin: 10px 0 0; }
.chat-fils { margin-top: 12px; }
.chat-fil { align-items: center; min-height: 44px; }
.chat-fil .face.chat-fil-face { width: 34px; height: 34px; font-size: 12px; }
.chat-fil-nom { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.chat-fil-extrait { overflow-wrap: anywhere; }
.chat-fil .tag { vertical-align: 1px; }
.chat-fil-retour { margin: 12px 0 0; }
.chat-fil-retour a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; }
.chat-fil-retour .ico { width: 16px; height: 16px; vertical-align: 0; }
.chat-fil-titre { margin: 2px 0 10px; font-size: 19px; overflow-wrap: anywhere; }
.chat-ecrire-a { margin-top: 18px; }
.chat-ecrire-a-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.chat-ecrire-a-ligne select.field { flex: 1 1 180px; width: auto; min-width: 0; max-width: 100%; min-height: 44px; margin: 0; }
.chat-ecrire-a-ligne .btn { flex: none; min-height: 44px; }
.chat-reglage { margin: 4px 0 12px; padding: 2px 14px 10px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.chat-reglage > legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.chat-reglage .row { min-height: 44px; cursor: pointer; }
.chat-reglage .row .muted { display: block; }
.chat-reglage .row input[type='checkbox'] { flex: none; margin: 0; }
.chat-reglage .mine { margin: 6px 0 0; }
.pubs { display: grid; gap: 20px; margin-top: 14px; }
.pubs-seule { margin-top: 10px; }
.pub {
padding: 14px 16px 12px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
min-width: 0;
}
.pub-tete { display: flex; align-items: center; gap: 10px; }
.pub-tete:has(> .pub-heure) { align-items: flex-start; }
.pub-heure { flex: none; display: flex; align-items: baseline; gap: 4px; margin-top: 2px; color: var(--faint); font-size: 12.5px; line-height: 20px; white-space: nowrap; }
.pub-heure .pub-quand { width: auto; }
.pub-tete > .pub-heure { order: 1; }
.pub-tete:has(> .pub-heure) > .carte-menu { order: 2; }
.pub-qui { display: grid; gap: 1px; min-width: 0; flex: 1; }
.pub-nom { color: var(--ink); font-size: 15px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.pub-nom:hover { text-decoration: underline; }
.pub-quand { color: var(--faint); font-size: 12.5px; text-decoration: none; width: max-content; }
.pub-quand:hover { color: var(--muted); text-decoration: underline; }
.pub-avatar {
position: relative; flex: none; display: grid; place-items: center;
width: 50px; height: 50px; border-radius: 50%;
background: var(--accent); color: var(--sur-accent); text-decoration: none;
}
.pub-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pub-initiales { font-family: var(--font-title); font-size: 19px; font-weight: 600; line-height: 1; }
.pub-avatar-s { width: 38px; height: 38px; }
.pub-avatar-s .pub-initiales { font-size: 15px; }
.pub-texte { margin-top: 10px; color: var(--ink); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.pub-texte > :first-child { margin-top: 0; }
.pub-texte > :last-child { margin-bottom: 0; }
.pub-texte p { margin: 0 0 .7em; }
.pub-texte h3 { margin: .9em 0 .35em; font-family: var(--font-title); font-size: 18px; font-weight: 600; line-height: 1.3; }
.pub-texte blockquote { margin: .6em 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.pub-texte ul, .pub-texte ol { margin: 0 0 .7em; padding-left: 1.3em; }
.pub-texte a { color: var(--accent-ink); }
.pub-texte-long {
max-height: 360px; overflow: hidden;
-webkit-mask-image: linear-gradient(var(--noir) 70%, transparent); mask-image: linear-gradient(var(--noir) 70%, transparent);
}
.pub-texte-long.pub-texte-ouvert { max-height: none; -webkit-mask-image: none; mask-image: none; }
.pub-voir-plus { margin-top: 4px; }
.pub-medias, .pub-carrousel { margin-top: 10px; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.pub-medias { display: grid; gap: 3px; }
.pub-media { display: block; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-2); }
.pub-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pub-media:hover img { transform: none; }
.pub-medias-seule .pub-media img { height: auto; max-height: 540px; }
.pub-medias-grille { grid-template-columns: 1fr 1fr; }
.pub-medias-grille .pub-media { aspect-ratio: 1; }
.pub-medias-grille.pub-medias-3, .pub-medias-grille.pub-medias-6 { grid-template-columns: repeat(3, 1fr); }
.pub-medias-grille.pub-medias-9 { grid-template-columns: repeat(3, 1fr); }
.pub-medias-grille.pub-medias-8 { grid-template-columns: repeat(4, 1fr); }
.pub-medias-grille.pub-medias-10 { grid-template-columns: repeat(5, 1fr); }
.pub-medias-mosaique { grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; }
.pub-medias-mosaique.pub-medias-2 { aspect-ratio: 8 / 5; }
.pub-medias-mosaique.pub-medias-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.pub-medias-mosaique.pub-medias-3 .pub-media:first-child { grid-row: span 2; }
.pub-medias-mosaique.pub-medias-4 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 2fr 1fr; aspect-ratio: 1; }
.pub-medias-mosaique.pub-medias-4 .pub-media:first-child { grid-column: span 3; }
.pub-medias-mosaique.pub-medias-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pub-medias-mosaique.pub-medias-5 .pub-media:first-child { grid-row: span 2; }
.pub-medias-mosaique.pub-medias-6 { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 1; }
.pub-medias-mosaique.pub-medias-6 .pub-media:first-child { grid-column: span 2; grid-row: span 2; }
.pub-medias-mosaique.pub-medias-7 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 4 / 3; }
.pub-medias-mosaique.pub-medias-7 .pub-media:first-child { grid-column: span 3; grid-row: span 2; }
.pub-medias-mosaique.pub-medias-8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 1; }
.pub-medias-mosaique.pub-medias-8 .pub-media:first-child { grid-column: span 3; grid-row: span 3; }
.pub-medias-mosaique.pub-medias-9 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 4 / 3; }
.pub-medias-mosaique.pub-medias-9 .pub-media:first-child { grid-column: span 2; grid-row: span 2; }
.pub-medias-mosaique.pub-medias-10 { grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); aspect-ratio: 5 / 3; }
.pub-medias-mosaique.pub-medias-10 .pub-media:first-child { grid-column: span 3; grid-row: span 2; }
.pub-carrousel { position: relative; }
.pub-carrousel-piste {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none; overscroll-behavior-x: contain;
}
.pub-carrousel-piste::-webkit-scrollbar { display: none; }
.pub-carrousel-piste .pub-media {
flex: 0 0 100%; scroll-snap-align: start;
aspect-ratio: var(--carrousel-rapport, 1); max-height: 560px;
}
.pub-carrousel-piste .pub-media img,
.pub-carrousel-piste .pub-media video { object-fit: contain; }
.pub-carrousel-fleche {
position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink);
box-shadow: 0 2px 10px var(--noir-20);
}
.pub-carrousel-prec { left: 10px; }
.pub-carrousel-suiv { right: 10px; }
.pub-carrousel-fleche[hidden] { display: none; }
.pub-carrousel-points {
position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; margin: 0;
padding: 5px 8px; border-radius: var(--rayon-pilule); background: var(--noir-35);
}
.pub-carrousel-points span { width: 7px; height: 7px; border-radius: 50%; background: var(--blanc-55); }
.pub-carrousel-points span.actif { background: var(--blanc); }
.pub-bilan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px -16px 0; padding: 8px 16px; border-top: 1px solid var(--line); }
.pub-bilan:not(:has(.reacs)):has(> .pub-compte[hidden]) { display: none; }
.pub-bilan .reacs { margin: 0; }
.pub-compte {
display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 34px; padding: 0 14px;
border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line)); border-radius: var(--rayon-pilule);
background: color-mix(in oklab, var(--accent) 8%, var(--surface)); color: var(--accent-ink);
font-size: 13px; font-weight: 600; text-decoration: none;
}
.pub-compte:hover { background: color-mix(in oklab, var(--accent) 16%, var(--surface)); }
.pub-compte[hidden] { display: none; }
.pub-compte .ico { width: 16px; height: 16px; }
.pub-actes { display: flex; gap: 4px; margin-top: 10px; padding: 4px 0; border-top: 1px solid var(--line); }
.pub-acte {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--rayon-s); background: none;
color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
}
.pub-acte:hover { background: var(--surface-2); color: var(--ink); }
.pub-acte .ico { width: 19px; height: 19px; }
.pub-reponses { margin-top: 4px; border-top: 1px solid var(--line); }
.pub-bilan + .pub-reponses { margin: 0 -16px; padding: 10px 16px 0; border-top: 1px solid var(--line); }
.pub-fil, .pub-sous-fil { margin: 0; padding: 0; list-style: none; }
.pub-sous-fil { margin: 2px 0 0 2px; padding-left: 10px; border-left: 2px solid var(--line); }
.pub-sous-fil:empty { display: none; }
.pub-reponse { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 8px; margin-top: 10px; }
.pub-reponse[hidden] { display: none; }
.pub-sous-reponse .pub-avatar-s { width: 26px; height: 26px; }
.pub-sous-reponse .pub-initiales { font-size: 11px; }
.pub-reponse-corps { min-width: 0; }
.pub-bulle {
display: inline-block; max-width: 100%; padding: 7px 12px 8px;
border-radius: 4px 16px 16px 16px; background: var(--surface-2);
}
.pub-bulle-rangee { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pub-bulle-rangee > .pub-bulle { min-width: 0; }
.menu-reponse > summary { width: 32px; height: 32px; }
.menu-reponse > summary .ico { width: 18px; height: 18px; }
.menu-reponse .carte-menu-liste { min-width: 170px; }
.pub-modifie { color: var(--faint); font-size: 12px; }
.pub-qui .pub-modifie { margin-left: 4px; }
.pub-modifier { display: grid; gap: 6px; flex: 1 1 auto; width: 100%; max-width: 560px; }
.pub-modifier textarea {
width: 100%; min-height: 40px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--rayon);
background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.45; resize: vertical;
}
.pub-modifier textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.pub-modifier-actes { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.pub-modifier-publication { display: grid; gap: 8px; margin-top: 10px; }
.pub-reponse-nom { color: var(--ink); font-size: 13.5px; font-weight: 650; text-decoration: none; }
a.pub-reponse-nom:hover { text-decoration: underline; }
.pub-reponse-texte { margin: 2px 0 0; color: var(--ink); font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.pub-reponse-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 3px 0 0 6px; color: var(--faint); font-size: 12.5px; }
.pub-reponse-actes .reacs { margin: 0; gap: 4px; }
.pub-reponse-actes .reac, .pub-reponse-actes .reacs-palette > summary { min-height: 26px; padding: 2px 7px; font-size: 12px; }
.pub-inline { display: inline; margin: 0; }
.pub-lien {
display: inline-flex; align-items: center; min-height: 30px; padding: 0 2px; border: 0; background: none;
color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 650; text-decoration: none; cursor: pointer;
}
.pub-lien:hover { color: var(--ink); text-decoration: underline; }
.pub-plus {
display: inline-flex; align-items: center; min-height: 36px; margin: 8px 0 0 40px; padding: 0 2px;
border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer;
}
.pub-plus:hover { color: var(--ink); text-decoration: underline; }
@media (pointer: coarse) {
.pub-lien, .pub-plus, .pub-reponse-actes .reac, .pub-reponse-actes .reacs-palette > summary { min-height: 44px; }
}
.pub-repondre { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 8px; margin-top: 12px; }
.pub-repondre > .pub-avatar { margin-bottom: 5px; }
.pub-repondre-champ { min-width: 0; }
.pub-repondre-a { display: flex; align-items: center; gap: 8px; margin: 0 0 4px 4px; color: var(--muted); font-size: 12.5px; }
.pub-repondre-a[hidden] { display: none; }
.pub-repondre-saisie { position: relative; }
.pub-repondre-saisie textarea {
display: block; width: 100%; min-height: 42px; max-height: 180px; margin: 0; padding: 10px 48px 10px 14px; resize: none;
overflow-y: hidden; border: 1px solid var(--line-strong); border-radius: 21px; background: var(--surface-2);
color: var(--ink); font: inherit; font-size: 15px; line-height: 1.35;
}
.pub-repondre-saisie textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-repondre-saisie textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.pub-repondre-dedans { grid-template-columns: 1fr auto; margin-top: 8px; }
.pub-repondre-dedans > .pub-avatar { display: none; }
.pub-repondre-saisie textarea[data-emojis] + .emo-bouton { position: absolute; top: 3px; right: 4px; margin: 0; }
.pub-repondre-erreur { margin: 4px 0 0 6px; color: var(--warn); font-size: 13px; }
.pub-repondre-erreur[hidden] { display: none; }
.pub-envoyer {
display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%;
background: var(--accent); color: var(--sur-accent); cursor: pointer;
}
.pub-envoyer:hover { filter: brightness(1.08); }
.pub-envoyer .ico { width: 19px; height: 19px; }
@media (max-width: 720px) {
.pub { padding: 12px 12px 10px; border-radius: 14px; }
.pub-repondre-saisie textarea { font-size: 16px; }
}
.bulle-format {
position: fixed; z-index: 80; display: flex; gap: 2px; padding: 4px;
border: 1px solid var(--line); border-radius: var(--rayon-pilule);
background: var(--surface); box-shadow: 0 8px 24px var(--noir-22);
}
.bulle-format[hidden] { display: none; }
.bulle-bouton {
display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px;
border: 0; border-radius: var(--rayon-s); background: none; color: var(--muted);
font: inherit; font-size: 15px; cursor: pointer;
}
.bulle-bouton:hover { background: var(--surface-2); color: var(--ink); }
.bulle-bouton[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
.bulle-bouton .ico { width: 17px; height: 17px; }
.bulle-titre { font-family: var(--font-title); font-weight: 600; }
.comp-corps { display: grid; gap: 12px; }
.comp-qui { display: flex; align-items: center; gap: 10px; }
.comp-qui-nom { display: grid; gap: 1px; font-size: 14px; }
.comp-zone { position: relative; }
.comp-zone .ghost { min-height: 104px; padding-right: 46px; }
.comp-zone > .emo-bouton { position: absolute; top: 6px; right: 6px; margin: 0; }
.comp-zone .tools { margin-top: 6px; }
.comp-images { display: grid; gap: 10px; }
.comp-images .pub-media { max-height: 420px; }
.comp-images[hidden] { display: none; }
.comp-medias { border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.comp-media { position: relative; }
.comp-media canvas, .pub-media canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.pub-medias-seule .comp-media canvas { height: auto; max-height: 420px; }
.pub-carrousel-piste.comp-medias { border-radius: 0; }
.comp-media-actes { position: absolute; top: 6px; right: 6px; left: 6px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.comp-media-bouton {
display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%;
background: var(--noir-55); color: var(--blanc); cursor: pointer;
}
.comp-media-bouton:hover { background: var(--noir-78); }
.comp-media-bouton[disabled] { opacity: .3; cursor: default; }
.comp-media-bouton .ico { width: 16px; height: 16px; }
.comp-dispositions { margin: 0; padding: 0; border: 0; }
.comp-dispositions[hidden] { display: none; }
.comp-dispositions legend { padding: 0; color: var(--muted); font-size: 13px; }
.comp-dispositions .chips { margin: 6px 0 0; }
.comp-dispositions .chip { min-height: 36px; display: inline-flex; align-items: center; }
.comp-erreur { margin: 0; color: var(--warn); font-size: 13.5px; }
.comp-erreur[hidden] { display: none; }
.comp-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.comp-outil {
display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px;
border: 1px solid var(--line); border-radius: var(--rayon-pilule);
color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
}
.comp-outil:hover { border-color: var(--accent); color: var(--ink); }
.comp-outil .ico { width: 18px; height: 18px; }
.comp-outil input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.comp-compte { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.comp-compte-trop { color: var(--warn); font-weight: 600; }
.comp-cadrage {
display: grid; gap: 10px; max-width: 430px; padding: 12px; border: 1px solid var(--line);
border-radius: 14px; background: var(--surface-2);
}
.comp-cadrage[hidden] { display: none; }
.comp-cadrage-cadre {
position: relative; overflow: hidden; border-radius: 10px; background: var(--noir);
touch-action: none; cursor: grab;
}
.comp-cadrage-cadre canvas { display: block; width: 100%; height: 100%; }
.comp-cadrage-ratios { display: flex; flex-wrap: wrap; gap: 6px; }
.comp-ratio {
min-height: 38px; padding: 0 13px; border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule); background: var(--surface); color: var(--muted);
font: inherit; font-size: 13px; cursor: pointer;
}
.comp-ratio[aria-pressed='true'] {
border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--ink); font-weight: 600;
}
.comp-cadrage-zoom { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.comp-cadrage-zoom input { flex: 1; }
.comp-cadrage-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fil-entrees { display: contents; }
.accueil-fil .pub, .accueil-fil .fil-entrees > * { margin-bottom: 20px; }
.pf-couverture {
position: relative;
border-radius: var(--rayon-l);
background-color: var(--surface-2);
background-size: cover;
background-position: center;
}
.pf-couverture-vide {
background-image: linear-gradient(120deg,
color-mix(in srgb, var(--accent) 40%, transparent),
color-mix(in srgb, var(--accent) 12%, transparent));
}
.pf-couverture-modifier {
position: absolute; right: 10px; bottom: 10px;
display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
border-radius: var(--rayon-pilule); background: color-mix(in srgb, var(--surface) 88%, transparent);
color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none;
box-shadow: 0 2px 10px var(--noir-18);
}
.pf-couverture-modifier:hover { background: var(--surface); }
.pf-couverture-modifier .ico { width: 17px; height: 17px; }
.pf-identite {
position: relative; z-index: 1;
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0 18px;
}
.pf-photo-boite { align-self: flex-start; margin-top: -46px; }
.pf-photo {
display: grid; place-items: center; flex: none; width: 124px; height: 124px;
border: 4px solid var(--paper); border-radius: 50%; object-fit: cover; background: var(--surface-2);
}
.pf-photo-vide { color: var(--sur-accent); font-family: var(--font-title); font-size: 40px; }
.pf-photo-boite { position: relative; flex: none; }
.pf-photo-modifier {
position: absolute; right: 4px; bottom: 4px;
display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
background: var(--surface-2); color: var(--ink); border: 3px solid var(--paper);
box-shadow: 0 2px 8px var(--noir-22);
}
.pf-photo-modifier:hover { background: var(--surface-3); }
.pf-photo-modifier .ico { width: 16px; height: 16px; }
.pf-qui { flex: 1 1 220px; min-width: 0; padding-bottom: 2px; }
.pf-qui h1 { margin: 0; overflow-wrap: anywhere; }
.pf-qui .sub { margin: 2px 0 0; }
.pf-qui .profil-pratiques { margin: 8px 0 0; }
.pf-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 4px; }
.pf-actes form { display: inline; margin: 0; }
.pf-actes .btn { min-height: 42px; }
.pf-colonnes { display: grid; gap: 16px; align-items: start; margin-top: 20px; }
.pf-cote, .pf-fil { display: grid; gap: 16px; min-width: 0; align-content: start; }
.pf-cote > .section, .pf-fil > .section { margin: 0; }
.pf-cote > .section + .section, .pf-fil > .section + .section { margin-top: 0; }
@media (min-width: 900px) {
.pf-colonnes { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
}
.pf-amis {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px;
margin: 12px 0 0; padding: 0; list-style: none;
}
.pf-ami { display: grid; justify-items: center; gap: 6px; min-width: 0; text-align: center; }
.pf-ami .pf-ami-photo { width: 64px; height: 64px; }
.pf-ami .pf-ami-photo .pub-initiales { font-size: 22px; }
.pf-ami-nom {
max-width: 100%; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 600;
text-decoration: none; text-overflow: ellipsis; white-space: nowrap;
}
.pf-ami-nom:hover { text-decoration: underline; }
.pf-amis-plus { margin-top: 10px; }
.pf-amis-plus > summary {
display: inline-flex; align-items: center; min-height: 40px;
color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.pf-amis-plus > summary:hover { color: var(--ink); }
@media (max-width: 720px) {
.pf-couverture { border-radius: var(--rayon); }
.pf-identite { display: grid; grid-template-columns: auto 1fr; margin: -38px 12px 0; gap: 8px 10px; }
.pf-photo-boite { align-self: auto; margin-top: 0; }
.pf-photo { width: 96px; height: 96px; }
.pf-photo-vide { font-size: 32px; }
.pf-qui, .pf-actes { grid-column: 1 / -1; }
.pf-actes .btn { flex: 1 1 auto; justify-content: center; }
}
.fic-lecteur-plus { margin: 6px 0 0 30px; padding: 0 0 2px; font-size: 13.5px; }
.fic-lecteur-plus .mine { margin: 4px 0 0; }
.fic-lecteurs:has(input[name="lecteurs"][value="public"]:not(:checked)) .fic-lecteur-plus.choix-ligne,
.fic-lecteurs:has(input[name="lecteurs"][value="prive"]:not(:checked)) .fic-amis-choisis { opacity: .6; }
.fic-amis-choisis .fic-avertir-liste { margin-top: 2px; }
.fic-attente {
margin: 10px 0 14px;
padding: 4px 14px 10px;
border: 1px dashed var(--line);
border-radius: var(--rayon);
}
.fic-attente h3 { margin: 10px 0 2px; font-size: 15px; }
.fic-attente .fic-com:last-child { border-bottom: 0; }
.fic-attente .fic-com-actes { align-items: center; flex-wrap: wrap; }
.fic-partages h2 { margin-bottom: 4px; }
.pub-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; color: var(--faint); font-size: 12.5px; }
.pub-ligne .pub-quand { width: auto; }
.pub-ou { color: var(--muted); }
a.pub-compte { text-decoration: none; }
a.pub-compte:hover { color: var(--muted); text-decoration: underline; }
.pub .etiquettes.pub-etiquettes { padding: 0; margin-top: 10px; }
a.etiq { text-decoration: none; }
.etiq.pratique-communaute { background: color-mix(in oklab, var(--teinte-communaute) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-communaute) 78%, var(--ink)); }
.pub-titre { margin: 10px 0 0; font-family: var(--font-title); font-size: 19.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
h1.pub-titre { font-size: 23px; }
.pub-titre a { color: var(--ink); text-decoration: none; }
.pub-titre a:hover { text-decoration: underline; }
.pub-titre + .pub-texte { margin-top: 6px; }
.pub-texte-annonce { font-family: var(--font-rp); font-size: 15.5px; line-height: 1.65; }
.pub-reponse-riche p { margin: 0 0 .5em; }
.pub-reponse-riche > :last-child { margin-bottom: 0; }
.pub-reponse-riche h3 { margin: .3em 0; font-size: 15px; }
.pub-reponse-riche blockquote { margin: .3em 0; padding-left: 10px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.pub-ferme, .pub-note { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; }
.pub-note { margin: 4px 0 0 6px; font-size: 13px; }
.pub-inviter { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin: 6px 0 0 6px; }
.pub-inviter form { margin: 0; }
.pub-ouvrir { flex-basis: 100%; }
.pub-ouvrir > summary { list-style: none; width: max-content; max-width: 100%; }
.pub-ouvrir > summary::-webkit-details-marker { display: none; }
.pub-ouvrir > form { display: grid; gap: 6px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pub-ouvrir > form .lab { margin-top: 0; }
.pub-ouvrir > form .btn { justify-self: start; }
.carte-menu-liste:has(.carte-menu-motif[open]) { min-width: 280px; }
.carte-menu-motif > summary {
display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--rayon-s);
color: var(--ink); font-size: 14px;
}
.carte-menu-motif > summary:hover { background: var(--surface-2); }
.carte-menu-motif > summary { gap: 10px; justify-content: flex-start; list-style: none; cursor: pointer; }
.carte-menu-motif > summary::-webkit-details-marker { display: none; }
.carte-menu-motif > summary > .ico { flex: none; width: 17px; height: 17px; margin: 0; color: var(--muted); }
.carte-menu-motif > form { margin: 4px; padding: 10px; }
.carte-menu-liste .carte-menu-motif-envoyer { justify-content: center; background: var(--warn); color: var(--paper); font-weight: 650; }
.carte-menu-liste .carte-menu-motif-envoyer:hover { background: var(--warn); filter: brightness(1.08); }
.annonce-places { margin-bottom: 4px; }
.annonce-places .field { width: auto; }
.pf-couverture.univers-carte-formes {
overflow: hidden;
background-color: color-mix(in oklab, var(--teinte, var(--accent)) 20%, var(--surface-2));
}
.pf-couverture.univers-carte-formes .pf-couverture-modifier { z-index: 1; }
.pf-photo-perso { color: var(--blanc); }
.pf-joueur { margin: 6px 0 0; }
.pf-colonnes-perso .pf-cote, .pf-colonnes-perso .pf-fil { gap: 24px; }
img.portrait { object-fit: cover; }
.bottin-ligne:has(.bottin-carte) { align-items: center; }
.bottin-carte { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.bottin-carte-photo { width: 38px; height: 38px; font-size: 13px; }
.bottin-carte-corps { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.bottin-carte-nom { color: var(--ink); font-weight: 600; }
.joinus-visages { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; }
.joinus-visages .ico { width: 16px; height: 16px; }
.montrer-groupe { border: 0; padding: 0; margin: 10px 0 14px; }
.montrer .choix {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 8px 0;
font-size: 14px;
}
.montrer .choix span { display: grid; }
.montrer .mine { display: block; font-size: 12.5px; }
.montrer-lignes { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 14px; }
.montrer-ligne { display: grid; gap: 6px; }
.montrer-ligne label { font-size: 14px; }
.montrer-ligne .field { margin: 0; }
@media (min-width: 600px) {
.montrer-ligne { grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 14px; }
}
.montrer .choix-ligne { align-items: flex-start; margin: 10px 0; }
.montrer .choix-ligne input { margin-top: 3px; }
.livre {
--livre-papier: color-mix(in oklab, var(--surface-2) 95%, var(--accent));
--livre-trait: color-mix(in oklab, var(--ink) 16%, transparent);
--livre-encre: color-mix(in oklab, var(--ink) 84%, var(--accent));
--livre-cuir: color-mix(in oklab, var(--accent-brut) 60%, var(--bandeau));
--livre-dore: color-mix(in oklab, var(--sur-bandeau) 42%, transparent);
--livre-h: clamp(420px, 62vh, 560px);
position: relative;
margin: 6px 0 0;
container-type: inline-size;
}
.livre-simple { --livre-h: clamp(380px, 60vh, 540px); }
.livre-couverture {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
width: calc((min(100cqw, 880px) - 22px) / 2);
height: var(--livre-h);
margin: 8px auto 12px;
padding: 36px 28px 30px 46px;
border: 0;
border-radius: 4px 12px 12px 4px;
background:
linear-gradient(90deg, var(--noir-30) 0 16px, var(--blanc-10) 16px 18px, transparent 18px),
var(--livre-cuir);
color: var(--sur-bandeau);
font: inherit;
text-align: center;
cursor: pointer;
box-shadow:
5px 5px 0 -1px var(--livre-papier),
5px 5px 0 0 var(--line-strong),
0 22px 40px -20px var(--noir-60);
transform-origin: left center;
transition: transform .25s, box-shadow .25s;
}
.livre-couverture::after {
content: '';
position: absolute;
inset: 12px 12px 12px 30px;
border: 1px solid var(--livre-dore);
border-radius: 2px 8px 8px 2px;
pointer-events: none;
}
@container (max-width: 559px) {
.livre-couverture { width: 100%; --livre-h: clamp(380px, 60vh, 540px); }
}
.livre-couverture:hover { transform: translateY(-3px); }
.livre-couverture:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.livre-couverture-orne .ico { width: 38px; height: 38px; }
.livre-couverture-orne { margin-bottom: 6px; opacity: .9; }
.livre-couverture-titre { font-family: var(--font-title); font-size: 26px; font-weight: 600; line-height: 1.15; }
.livre-couverture-de { font-size: 15px; opacity: .88; overflow-wrap: anywhere; }
.livre-couverture-compte { font-size: 12.5px; opacity: .72; }
.livre-couverture-invite {
margin-top: 22px;
padding: 7px 16px;
border: 1px solid var(--livre-dore);
border-radius: var(--rayon-pilule);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .06em;
}
.livre-couverture-ouvre { animation: livre-couverture .48s ease-in forwards; pointer-events: none; }
@keyframes livre-couverture {
to { transform: perspective(1400px) rotateY(-78deg); opacity: 0; }
}
.livre-ouvert { max-width: 880px; margin: 0 auto; outline: none; }
.livre-ouvert:focus-visible .livre-double { outline: 3px solid var(--accent); outline-offset: 4px; }
.livre-double {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
border-radius: 6px;
background: var(--livre-papier);
box-shadow: 0 0 0 1px var(--line), 0 22px 44px -24px var(--noir-55);
perspective: 2200px;
}
.livre-simple .livre-double { grid-template-columns: minmax(0, 1fr); }
.livre-simple .livre-dos,
.livre-simple .livre-droite { display: none; }
.livre-feuillet { min-width: 0; }
.livre-dos {
background: linear-gradient(90deg, transparent, var(--noir-11) 40%, var(--noir-17) 50%, var(--noir-11) 60%, transparent);
}
.livre-page {
display: flex;
flex-direction: column;
height: var(--livre-h);
padding: 16px 22px 10px;
background: var(--livre-papier);
color: var(--ink);
}
.livre-gauche .livre-page { border-radius: 6px 0 0 6px; box-shadow: inset -16px 0 18px -16px var(--noir-22); }
.livre-droite .livre-page { border-radius: 0 6px 6px 0; box-shadow: inset 16px 0 18px -16px var(--noir-18); }
.livre-simple .livre-gauche .livre-page { border-radius: 6px; box-shadow: inset 12px 0 14px -12px var(--noir-20); }
.livre-page-tete {
margin: 0 0 14px;
padding-bottom: 6px;
border-bottom: 1px solid var(--livre-trait);
color: var(--muted);
font-family: var(--font-title);
font-size: 12.5px;
letter-spacing: .04em;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.livre-page-corps { flex: 1; min-height: 0; overflow: hidden; }
.livre-page-longue .livre-page-corps { overflow-y: auto; }
.livre-folio {
margin: 8px 0 0;
color: var(--faint);
font-family: var(--font-title);
font-size: 12px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.livre-page-blanche .livre-page-corps { display: grid; place-items: center; }
.livre-page-blanche .livre-page-corps::after { content: ''; width: 46px; border-top: 1px solid var(--livre-trait); }
.livre-liste { margin: 0; padding: 0; list-style: none; }
.livre-entree { margin: 0; padding: 0 0 14px; }
.livre-entree + .livre-entree { padding-top: 12px; border-top: 1px dashed var(--livre-trait); }
.livre-entree-tete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
margin: 0 0 2px;
font-size: 13px;
}
.livre-auteur { font-weight: 600; }
.livre-auteur a { color: inherit; }
.livre-auteur .tag { margin-left: 4px; }
.livre-date { margin-left: auto; color: var(--faint); font-size: 12px; }
.livre-texte {
margin: 0;
color: var(--livre-encre);
font-family: 'Caveat', var(--font-rp);
font-size: 22px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.livre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; font-size: 12.5px; }
.livre-outils form { margin: 0; }
.livre-signaler { color: var(--muted); }
.livre-vide { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; text-align: center; }
.livre-vide p { margin: 0; max-width: 24ch; color: var(--livre-encre); font-family: 'Caveat', var(--font-rp); font-size: 24px; line-height: 1.25; }
.livre-vide-orne .ico { width: 30px; height: 30px; color: var(--faint); }
.livre-page-invite .livre-page-corps { display: grid; place-items: center; }
.livre:not(.livre-actif) .livre-liste,
.livre:not(.livre-actif) .livre-vide {
padding: 16px 18px 4px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--livre-papier);
}
.livre-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.livre-tourner { min-height: 44px; }
.livre-tourner .ico { width: 16px; height: 16px; }
.livre-indicateur {
min-width: 10em;
margin: 0;
color: var(--muted);
font-size: 13px;
text-align: center;
font-variant-numeric: tabular-nums;
}
@media (max-width: 420px) {
.livre-nav { gap: 6px; }
.livre-indicateur { min-width: 0; flex: 1; }
.livre-tourner { padding-inline: 10px; }
}
.livre-feuille {
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
width: calc(50% - 11px);
transform-style: preserve-3d;
pointer-events: none;
}
.livre-feuille-recto,
.livre-feuille-verso {
position: absolute;
inset: 0;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.livre-feuille-verso { transform: rotateY(180deg); }
.livre-feuille .livre-page { height: 100%; box-shadow: 0 0 18px var(--noir-18); }
.livre-feuille-avant { right: 0; transform-origin: -11px 50%; animation: livre-avant .56s cubic-bezier(.45, .05, .3, 1) forwards; }
.livre-feuille-arriere { left: 0; transform-origin: calc(100% + 11px) 50%; animation: livre-arriere .56s cubic-bezier(.45, .05, .3, 1) forwards; }
.livre-simple .livre-feuille { width: 100%; }
.livre-feuille-part { left: 0; transform-origin: 0 50%; animation: livre-part .5s ease-in forwards; }
.livre-feuille-revient { left: 0; transform-origin: 0 50%; animation: livre-revient .5s ease-out forwards; }
@keyframes livre-avant { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes livre-arriere { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes livre-part { from { transform: rotateY(0); opacity: 1; } 65% { opacity: 1; } to { transform: rotateY(-115deg); opacity: 0; } }
@keyframes livre-revient { from { transform: rotateY(-115deg); opacity: 0; } 35% { opacity: 1; } to { transform: rotateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.livre-couverture,
.livre-couverture-ouvre,
.livre-feuille { animation: none; transition: none; }
}
.livre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 0; }
@media (min-width: 700px) { .livre-actions { justify-content: center; text-align: center; } }
.livre-actions .mine { margin: 0; }
.livre-dialogue .dialogue-corps { padding-bottom: 18px; }
.livre-dialogue .field { margin-top: 6px; }
dialog .veil { position: fixed; }
dialog .veil .modal { border: 1px solid var(--line-strong); box-shadow: 0 18px 50px -12px var(--noir-60); }
.livre-bloc:not(.livre-fenetre) .livre-dialogue {
position: static;
display: block;
width: auto;
max-height: none;
margin: 14px 0 0;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
box-shadow: none;
}
.livre-bloc:not(.livre-fenetre) .dialogue-boite { max-height: none; }
.livre-bloc:not(.livre-fenetre) .dialogue-fermer { display: none; }
.pub-avatar.pub-avatar-univers { border-radius: 12px; background: none; overflow: hidden; }
.pub-avatar-univers .pub-ecusson { width: 100%; height: 100%; border-radius: 12px; font-size: 18px; }
.pub-avatar-univers img.pub-ecusson { object-fit: cover; }
.au-composeur { margin: 16px 0; padding: 10px 12px; }
.au-composeur .qdn-ligne-tete > .crest-s { width: 38px; height: 38px; line-height: 38px; font-size: 13px; }
.au-qui-lit { margin: 0; }
.au-section .pubs { margin-top: 12px; }
.au-toutes { margin: 14px 0 0; }
.lieu-cartes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 14px;
margin-top: 4px;
}
.lieu-carte {
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
box-shadow: var(--ombre-carte);
color: inherit;
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.lieu-carte:hover { border-color: var(--teinte, var(--accent)); transform: translateY(-2px); }
.lieu-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lieu-carte-image {
position: relative;
display: block;
aspect-ratio: 2 / 1;
overflow: hidden;
background: color-mix(in oklab, var(--teinte, var(--accent)) 20%, var(--surface-2));
}
.lieu-carte-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lieu-carte-initiale {
position: absolute;
z-index: 1;
top: 12px;
left: 16px;
color: color-mix(in oklab, var(--teinte, var(--accent)) 72%, var(--ink));
font-family: var(--font-title);
font-size: 46px;
font-weight: 600;
line-height: 1;
}
.lieu-carte-corps { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.lieu-carte-nom { font-family: var(--font-title); font-size: 17px; font-weight: 600; line-height: 1.25; }
.lieu-carte-desc {
display: -webkit-box;
overflow: hidden;
color: var(--muted);
font-size: 13px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.lieu-carte-vie { color: var(--faint); font-size: 12.5px; }
.lieu-carte-scenes {
display: block;
margin-top: 6px;
padding-top: 9px;
border-top: 1px solid var(--line);
}
.lieu-carte-scene { display: block; }
.lieu-carte-scene + .lieu-carte-scene { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) {
.lieu-carte { transition: none; }
.lieu-carte:hover { transform: none; }
}
.lieu-banniere {
overflow: hidden;
max-width: 720px;
margin: 4px 0 14px;
border-radius: var(--rayon-l);
aspect-ratio: 2 / 1;
background: var(--surface-2);
}
.lieu-banniere img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lieu-gestion-tete { display: flex; gap: 12px; align-items: flex-start; }
.lieu-gestion-tete .lieu-vignette {
flex: none;
width: 96px;
aspect-ratio: 2 / 1;
border-radius: var(--rayon-s);
}
.lieu-gestion-tete .lieu-vignette .lieu-carte-initiale { top: 6px; left: 8px; font-size: 22px; }
.lieu-image-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.lieu-image-form .visuel-apercu { width: 100%; max-width: 320px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--rayon-s); }
.cb-item-equipe,
.mess-fil-equipe { box-shadow: inset 3px 0 0 var(--accent); }
.equipe-explique { margin-top: 6px; }
.cb-fil-retour .ico { display: block; width: 22px; height: 22px; }
.cb-fil-nom,
.cb-fil-ou { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-livre { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; margin-top: 12px; }
@media (min-width: 600px) { .pub-livre { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; } }
.pub-livre-couv { display: block; align-self: start; border-radius: 3px 7px 7px 3px; text-decoration: none; }
.pub-livre-corps { min-width: 0; }
.pub-livre .pub-titre { margin-top: 0; }
.pub-livre-meta { margin: 3px 0 0; color: var(--faint); font-size: 12.5px; }
.pub-livre-meta a { color: var(--muted); }
.pub-livre-debut { margin: 8px 0 0; font-family: var(--font-rp); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.pub-bilan-fenetre { justify-content: flex-end; }
.pub-bilan-fenetre .pub-compte { margin-left: 0; }
.pub-fenetre-acte { border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.pub-fenetre-acte:hover { background: var(--surface-2); }
.fenetre {
width: min(760px, calc(100vw - 32px));
max-width: none;
height: calc(100dvh - 48px);
max-height: none;
padding: 0;
border: 0;
border-radius: 18px;
overflow: hidden;
overflow: clip;
background: var(--paper);
color: var(--ink);
box-shadow: 0 24px 70px -20px var(--noir-60);
}
.fenetre::backdrop { background: var(--voile-60); backdrop-filter: blur(2px); }
.fenetre-boite { display: flex; flex-direction: column; height: 100%; }
.fenetre-tete {
display: flex; align-items: center; gap: 8px; flex: none;
padding: 6px 10px 6px 18px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.fenetre-sorte { color: var(--muted); font-size: 13px; font-weight: 650; }
.fenetre-plein {
display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 10px;
color: var(--accent-ink); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.fenetre-plein:hover { text-decoration: underline; }
.fenetre-fermer {
display: grid; place-items: center; flex: none; width: 44px; height: 44px;
border: 0; border-radius: 50%; background: var(--surface-2); color: var(--muted); cursor: pointer;
}
.fenetre-fermer:hover { background: var(--surface-3); color: var(--ink); }
.fenetre-fermer .ico { width: 18px; height: 18px; }
.fenetre-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.fenetre-page { margin: 0 auto; }
.fenetre-page h1:focus { outline: none; }
.fenetre-page .cible:focus { outline: none; }
.fenetre-corps .btn:not(.btn-main):not(.btn-warn):hover { background: var(--surface-2); border-color: color-mix(in oklab, var(--accent) 40%, var(--line-strong)); }
@media (max-width: 640px) {
.fenetre {
width: 100vw;
height: 100dvh;
margin: 0;
border-radius: 0;
}
.fenetre-tete { padding-left: 16px; padding-top: max(6px, env(safe-area-inset-top)); }
.fenetre-corps { padding-bottom: env(safe-area-inset-bottom); }
}
.qdn {
display: grid;
gap: 10px;
padding: 10px 12px;
}
.qdn-panneaux { min-width: 0; }
.qdn-choix { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.qdn-pastilles { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 6px; min-width: 0; }
.qdn-choix > .carte-menu { flex: none; margin-left: 0; }
.qdn-onglet {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 5px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--ink);
font-size: 13.5px;
line-height: 1.25;
white-space: nowrap;
cursor: pointer;
transition: background-color .12s, border-color .12s, color .12s;
}
.qdn-onglet:hover { border-color: var(--ink); }
@media (max-width: 400px) {
.qdn-onglet { min-height: 34px; padding: 4px 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
.qdn-onglet { transition: none; }
}
.qdn-panneau { display: none; }
.qdn-formulaire { display: grid; gap: 10px; }
.qdn-composer .ghost { min-height: 104px; }
.qdn-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qdn-pied .dialogue-compte { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.qdn-panneau .hint { margin: 0; }
.qdn-panneau .annonce-places { max-width: 340px; }
#qdn-publication:checked ~ .qdn-choix .qdn-onglet[for='qdn-publication'],
#qdn-jeu-libre:checked ~ .qdn-choix .qdn-onglet[for='qdn-jeu-libre'],
#qdn-sujet:checked ~ .qdn-choix .qdn-onglet[for='qdn-sujet'],
#qdn-spontane:checked ~ .qdn-choix .qdn-onglet[for='qdn-spontane'] {
border-color: var(--accent);
background: var(--accent);
color: var(--sur-accent);
font-weight: 600;
}
#qdn-publication:focus-visible ~ .qdn-choix .qdn-onglet[for='qdn-publication'],
#qdn-jeu-libre:focus-visible ~ .qdn-choix .qdn-onglet[for='qdn-jeu-libre'],
#qdn-sujet:focus-visible ~ .qdn-choix .qdn-onglet[for='qdn-sujet'],
#qdn-spontane:focus-visible ~ .qdn-choix .qdn-onglet[for='qdn-spontane'] {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
#qdn-publication:checked ~ .qdn-panneaux .qdn-p-publication,
#qdn-jeu-libre:checked ~ .qdn-panneaux .qdn-p-jeu-libre,
#qdn-sujet:checked ~ .qdn-panneaux .qdn-p-sujet,
#qdn-spontane:checked ~ .qdn-panneaux .qdn-p-spontane { display: block; }
.qdn-onglet.qdn-commence::after {
content: '';
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.qdn-ligne .comp-zone .ghost { position: relative; min-height: 42px; }
.qdn-ligne .ghost.ghost-vide::before {
position: absolute;
inset: 10px 46px auto 11px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.qdn-ligne-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.qdn-plus { display: grid; gap: 10px; margin-top: 10px; padding-left: 48px; }
.qdn-plus .lab { margin-top: 0; }
.qdn-plus .qdn-pied { justify-content: flex-end; }
.qdn.ej-ecrire { display: block; margin-top: 16px; }
.qdn-p-publication .comp-corps { grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.qdn-p-publication .comp-qui { display: contents; }
.qdn-p-publication .comp-corps > :not(.comp-qui),
.qdn-p-publication .comp-qui-nom { grid-column: 2; }
.qdn-p-publication .comp-qui > .pub-avatar { grid-column: 1; grid-row: 1; }
.qdn-p-publication .comp-zone { grid-row: 1; }
.qdn-p-publication .comp-pied { margin-top: 10px; padding-left: 48px; }
.qdn-ligne:not(:focus-within, .qdn-en-cours, .qdn-garde):has(.ghost:is(:empty, .ghost-vide)):not(:has(details[open], .comp-images:not([hidden]), input[type='text']:not(:placeholder-shown)))
:is(.comp-qui-nom, .comp-zone .tools, .comp-volets, .sondage-composeur, .avertir-volet, .comp-pied, .qdn-plus) { display: none; }
.turn .pub-medias,
.turn .pub-carrousel,
.composer .comp-images,
.comp-gardees { margin-top: 12px; max-width: 760px; }
.composer .comp-pied {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
.composer .comp-pied .btn { margin-left: auto; }
.composer .comp-pied .btn + .btn { margin-left: 0; }
.composer .comp-dispositions { margin-top: 12px; }
.comp-gardees { border: 0; padding: 0; margin: 14px 0 0; }
.comp-gardees > legend { font-size: 13px; color: var(--faint); padding: 0; }
.comp-gardees-liste {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.comp-gardee {
display: flex;
flex-direction: column;
gap: 6px;
width: 120px;
cursor: pointer;
}
.comp-gardee img {
display: block;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 10px;
background: var(--surface-2);
}
.comp-gardee-mot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); }
.comp-gardee:has(input:not(:checked)) img { opacity: 0.35; filter: grayscale(1); }
@media (max-width: 480px) {
.comp-gardee, .comp-gardee img { width: 96px; }
.comp-gardee img { height: 96px; }
}
.liv { padding: 10px 12px 18px; }
.liv-titre { margin: 4px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.liv-titre + .liv-titre { margin-top: 16px; }
.liv-carte { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--rayon-l); background: var(--surface); border: 1px solid var(--line); }
.liv-arrivee { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.liv-attente { border-style: dashed; background: none; }
.liv-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin: 0 0 6px; font-size: 13px; }
.liv-tete small { color: var(--faint); font-size: 11.5px; }
.liv-objet { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 13.5px; }
.liv-objet .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.liv-detail { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.liv-mot { margin: 6px 0 0; color: var(--accent-ink); font-size: 13px; font-style: italic; overflow-wrap: anywhere; }
.liv-lettre {
margin-top: 8px;
padding: 10px 12px;
border-radius: var(--rayon);
background: var(--paper);
border: 1px solid var(--line);
font-family: var(--font-rp);
font-size: 13.5px;
line-height: 1.65;
overflow-wrap: anywhere;
}
.liv-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.liv-gestes form { margin: 0; flex: 1 1 84px; }
.liv-gestes .tel-bouton { margin-top: 0; }
.liv-signaler { flex-basis: 100%; color: var(--faint); font-size: 11.5px; text-align: right; }
.liv-envoyer, .liv-passees { margin-top: 14px; }
.liv-envoyer summary, .liv-passees summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; }
.liv-envoyer form { display: grid; margin-top: 6px; }
.liv-liste { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.liv-liste li { padding: 5px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.liv-liste small { margin-left: 6px; color: var(--faint); font-size: 11px; }
.mess-voix { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.mess-voix .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.mess-voix-lecteur { flex: 0 1 260px; min-width: 0; max-width: 100%; height: 34px; }
.mess-flux .mess-voix-lecteur { flex-basis: 320px; }
.mess-voix-duree { flex: none; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.cb-msg-moi .mess-voix { justify-content: flex-end; }
.mess-vocal, .cb-vocal { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 12px; background: var(--surface); color: var(--muted); font-size: 12.5px; }
.mess-vocal[hidden], .cb-vocal[hidden] { display: none; }
.mess-ecrire .mess-vocal { flex-basis: 100%; border-radius: var(--rayon-s); }
.cb-vocal { border-top: 1px solid var(--line); }
.mess-vocal-ecoute, .cb-vocal-ecoute { flex: 1 1 auto; min-width: 0; max-width: 240px; height: 32px; }
.mess-vocal-ecoute[hidden], .cb-vocal-ecoute[hidden] { display: none; }
.mess-vocal-duree, .cb-vocal-duree { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mess-vocal-retirer, .cb-vocal-retirer { flex: none; border: 0; background: none; color: var(--accent-ink); font: inherit; cursor: pointer; }
.vocal-refus { color: var(--ink); }
.mess-joindre-vocal.vocal-enregistre, .cb-joindre-vocal.vocal-enregistre { border-color: var(--accent); color: var(--accent-ink); }
.mess-joindre-vocal.vocal-enregistre .ico, .cb-joindre-vocal.vocal-enregistre .ico { animation: vocal-battement 1.2s ease-in-out infinite; }
@keyframes vocal-battement { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mess-joindre-vocal.vocal-enregistre .ico, .cb-joindre-vocal.vocal-enregistre .ico { animation: none; } }
.admin-voix { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 8px 12px; border-radius: var(--rayon); background: var(--surface-2); font-size: 13px; }
.admin-voix .ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.admin-voix audio { flex: 1 1 auto; min-width: 0; max-width: 320px; height: 34px; }
@media (max-width: 560px) { .admin-voix { flex-wrap: wrap; } .admin-voix audio { max-width: none; } }
.sondage { margin: 10px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.sondage-form { margin: 0; }
.sondage-champs { margin: 0; padding: 0; border: 0; }
.sondage-question { display: block; margin: 0 0 10px; padding: 0; font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.sondage-question .ico { width: 16px; height: 16px; margin-right: 8px; color: var(--accent-ink); }
.sondage-reponses { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sondage-reponse { margin: 0; }
.sondage-choix {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
background: var(--paper);
font-size: 13px;
line-height: 1.4;
cursor: pointer;
overflow: hidden;
}
.sondage-choix:hover { border-color: var(--accent); }
.sondage-choix input { position: relative; z-index: 1; flex: none; margin: 0; }
.sondage-marque { position: relative; z-index: 1; display: flex; flex: none; width: 16px; height: 16px; align-items: center; justify-content: center; }
.sondage-marque .ico { width: 14px; height: 14px; color: var(--accent-ink); }
.sondage-jauge { position: absolute; inset: 0 auto 0 0; z-index: 0; width: var(--part, 0%); background: var(--accent-soft); transition: width .35s ease; }
.sondage-texte { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sondage-part { position: relative; z-index: 1; flex: none; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.sondage-choisie .sondage-choix { border-color: var(--accent); }
.sondage-choisie .sondage-part { color: var(--accent-ink); }
.sondage-erreur { margin: 8px 0 0; color: var(--warn); font-size: 12.5px; }
.sondage-erreur[hidden] { display: none; }
.sondage-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.sondage-bilan { flex: 1 1 140px; min-width: 0; color: var(--faint); font-size: 11.5px; }
.sondage-pied .etiq { flex: none; }
.sondage-composeur { margin-top: 10px; }
.sondage-composeur > summary { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 0; color: var(--accent-ink); font-size: 13px; cursor: pointer; }
.sondage-composeur > summary::-webkit-details-marker { display: none; }
.sondage-composeur > summary .ico { width: 16px; height: 16px; flex: none; }
.sondage-composeur .lab { margin-top: 8px; }
.sondage-composeur textarea { resize: vertical; }
.sondage-composeur .choix-ligne { margin-top: 8px; }
.sondage-verrou { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; }
.sondage-verrou .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; }
@media (max-width: 420px) {
.sondage { padding: 10px; }
.sondage-choix { flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; }
.sondage-texte { flex-basis: calc(100% - 26px); }
.sondage-part { flex-basis: 100%; padding-left: 26px; }
}
@media (prefers-reduced-motion: reduce) { .sondage-jauge { transition: none; } }
.blocage-actes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.blocage-actes form { display: inline; margin: 0; }
@media (max-width: 520px) {
.row:has(.blocage-actes) { flex-wrap: wrap; }
.blocage-actes { justify-content: flex-start; flex-basis: 100%; }
.blocage-actes .btn { flex: 1 1 auto; justify-content: center; }
}
.montrer .choix-ligne:has(input:disabled) { opacity: .72; }
.montrer .choix-ligne:has(input:disabled) > span { cursor: default; }
[data-appareil-ici] { margin-left: 6px; }
[data-appareil-ici][hidden] { display: none; }
.scene-avec { margin-bottom: 2px; }
.scene-taguer { margin-top: 10px; }
.scene-taguer > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.scene-taguer[open] > summary { margin-bottom: 4px; }
.scene-taguer-liste {
margin: 8px 0;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--line);
border-radius: 12px;
padding: 6px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 2px;
}
.scene-taguer-un {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 8px;
border-radius: 10px;
cursor: pointer;
}
.scene-taguer-un:hover { background: var(--accent-soft); }
.scene-taguer-un input { flex: 0 0 auto; }
.scene-taguer-un > span { min-width: 0; overflow-wrap: anywhere; }
.ech-mot { font-style: italic; }
.ech-porte {
margin: 10px 12px 0;
border: 1px solid var(--line);
border-radius: 12px;
overflow: hidden;
padding-bottom: 10px;
}
.ech-porte .ech-texte { padding: 0 10px; font-style: normal; }
.ech-porte .ech-image { margin-top: 8px; }
.ech-porte-qui { display: flex; align-items: center; gap: 8px; padding: 10px 10px 0; text-decoration: none; color: inherit; }
.ech-porte-qui .ech-av { width: 26px; height: 26px; font-size: 11px; }
.ech-porte-qui b { display: block; font-size: 12.5px; }
.ech-porte-qui small { display: block; font-size: 11px; color: var(--faint); }
.ech-repartager { padding: 8px 12px 0; }
.ech-repartager > summary { cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-height: 32px; }
.ech-repartager form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ech-repartager input[type='text'] {
flex: 1 1 160px;
min-width: 0;
font-size: 16px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--card);
color: inherit;
}
.ech-deja { color: var(--faint); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.chat-actes { flex: none; display: flex; align-items: center; gap: 2px; }
.chat-modifier-lien {
color: var(--faint);
line-height: 1;
padding: 2px 4px;
opacity: 0;
}
.chat-ligne:hover .chat-modifier-lien,
.chat-modifier-lien:focus-visible { opacity: 1; }
@media (hover: none) {
.chat-modifier-lien, .chat-retirer button { opacity: .75; }
}
.chat-modifier {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 3px 0 0;
}
.chat-modifier .field { flex: 1 1 140px; min-width: 0; font-size: 16px; padding: 6px 8px; }
.chat-modifier .btn { flex: none; }
@media (max-width: 560px) {
.chat-modifier .field { flex: 1 1 100%; }
}
.chat-image { max-width: 240px; margin-top: 4px; }
.chat-image img { max-height: 240px; }
.chat-galerie { display: block; max-width: 420px; }
.chat-galerie .pub-medias,
.chat-galerie .pub-carrousel { margin-top: 4px; border-radius: 10px; }
.chat-galerie .pub-medias-seule { max-width: 240px; }
.chat-galerie .pub-medias-seule .pub-media img { max-height: 240px; }
.chat-galerie .pub-carrousel-piste .pub-media { max-height: 320px; }
@media (hover: hover) and (pointer: fine) {
.chat-galerie .pub-carrousel-fleche { width: 32px; height: 32px; }
}
.chat-envoi-images { flex-wrap: wrap; }
.chat-envoi-images .comp-images,
.chat-envoi-images .comp-erreur,
.chat-envoi-images .comp-dispositions { flex-basis: 100%; margin: 0; }
.chat-envoi-images .comp-outil { flex: none; }
@media (max-width: 520px) {
.chat-envoi-images .comp-outil { position: relative; padding: 0 12px; }
.chat-envoi-images .comp-outil-nom {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.cb-ecrit {
margin: 0;
padding: 0 12px 2px;
font-size: 12px;
font-style: italic;
line-height: 15px;
color: var(--faint);
min-height: 15px;
}
.cb-ecrit[hidden] { display: block !important; visibility: hidden; }
.titre-succes {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 8px;
color: var(--muted);
font-family: inherit;
font-size: 13px;
font-weight: 400;
vertical-align: baseline;
}
.titre-succes .ico { width: 13px; height: 13px; opacity: .75; }
.joueur-carte-tete .titre-succes { margin-left: 0; font-size: 12px; }
.prose details,
.pub-texte details,
.pub-reponse-riche details,
.profil-presentation-texte details {
margin: 10px 0;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
background: var(--surface-2);
}
.prose details > summary,
.pub-texte details > summary,
.pub-reponse-riche details > summary,
.profil-presentation-texte details > summary {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 11px;
color: var(--muted);
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
list-style: none;
}
.prose details > summary::-webkit-details-marker,
.pub-texte details > summary::-webkit-details-marker,
.pub-reponse-riche details > summary::-webkit-details-marker,
.profil-presentation-texte details > summary::-webkit-details-marker { display: none; }
.prose details > summary::after,
.pub-texte details > summary::after,
.pub-reponse-riche details > summary::after,
.profil-presentation-texte details > summary::after {
content: 'Révéler';
margin-left: auto;
color: var(--accent-ink);
font-size: 11.5px;
font-weight: 600;
}
.prose details[open] > summary::after,
.pub-texte details[open] > summary::after,
.pub-reponse-riche details[open] > summary::after,
.profil-presentation-texte details[open] > summary::after { content: 'Masquer'; }
.prose details > *:not(summary),
.pub-texte details > *:not(summary),
.pub-reponse-riche details > *:not(summary),
.profil-presentation-texte details > *:not(summary) { margin: 10px 11px; }
@media print {
.prose details > *, .pub-texte details > *,
.pub-reponse-riche details > *, .profil-presentation-texte details > * {
display: block;
}
.prose details > summary::after, .pub-texte details > summary::after,
.pub-reponse-riche details > summary::after,
.profil-presentation-texte details > summary::after { content: ''; }
}
.ghost details {
margin: 8px 0;
border-left: 3px solid var(--accent);
padding-left: 10px;
}
.ghost details > summary {
color: var(--muted);
font-size: 12.5px;
cursor: text;
list-style: none;
}
.ghost details > summary::-webkit-details-marker { display: none; }
.joinus-connexions { margin-top: 18px; }
.joinus-connexions h2 { display: flex; align-items: center; gap: 7px; }
.joinus-connexions h2 .ico { width: 18px; height: 18px; }
.joinus-connexion {
margin-top: 10px;
padding: 11px 13px;
border-radius: var(--rayon);
background: var(--surface-2);
}
.joinus-connexion-titre {
margin: 0;
font-family: var(--font-title);
font-size: 15.5px;
font-weight: 600;
}
.joinus-connexion .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; }
.joinus-connexion-texte { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.tache-nuit h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tache-fichier { margin: 2px 0 8px; }
.tache-efface { margin-top: 10px; }
.tache-efface p { margin: 0 0 6px; }
.tache-efface ul { margin: 0; padding-left: 18px; }
.tache-efface li { margin-bottom: 3px; }
.tache-efface p + p { margin-top: 8px; }
.tache-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tache-sortie {
margin: 10px 0 0;
padding: 11px 13px;
border-radius: var(--rayon-s);
background: var(--surface-2);
color: var(--ink);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: anywhere;
max-height: 60vh;
overflow-y: auto;
}
.joinus-joueurs { margin-top: 18px; }
.joinus-joueurs h2 { display: flex; align-items: center; gap: 7px; }
.joinus-joueurs h2 .ico { width: 18px; height: 18px; }
.joinus-joueurs > .sub { margin: 4px 0 0; }
.joinus-joueurs-liste {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.joinus-joueur {
padding: 10px 12px;
border-radius: var(--rayon);
background: var(--surface-2);
}
.joinus-joueur-pseudo { font-family: var(--font-title); font-size: 14.5px; font-weight: 600; }
.joinus-joueur .mine { display: block; margin-top: 3px; }
.joinus-joueur-persos { margin: 5px 0 0; padding: 0; list-style: none; }
.joinus-joueur-persos li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 5px;
font-size: 13px;
color: var(--ink);
}
.joinus-joueur .etiq { background: var(--surface); }
.note-blocage {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 7px;
margin: 12px 0 0;
padding: 10px 12px;
border-radius: var(--rayon);
border-left: 3px solid var(--warn);
background: var(--surface-2);
font-size: 13.5px;
line-height: 1.55;
}
.note-blocage .ico { width: 16px; height: 16px; flex: none; align-self: center; }
.note-blocage .mine { flex-basis: 100%; margin: 0; }
.pf-univers {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.pf-univers-lien {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px 6px 7px;
border-radius: var(--rayon-pilule);
background: color-mix(in oklab, var(--couleur-univers, var(--accent)) 14%, var(--surface));
color: color-mix(in oklab, var(--couleur-univers, var(--accent)) 72%, var(--ink));
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
}
.pf-univers-lien:hover { background: color-mix(in oklab, var(--couleur-univers, var(--accent)) 24%, var(--surface)); }
.pf-univers-logo {
width: 26px;
height: 26px;
flex: none;
border-radius: 50%;
object-fit: cover;
}
.pf-univers-logo-vide {
display: grid;
place-items: center;
background: var(--couleur-univers, var(--accent));
color: var(--blanc);
font-size: 11px;
letter-spacing: .02em;
}
.reperes-tete { margin-bottom: 26px; }
.reperes-aller { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 700px) { .reperes-aller { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reperes-aller .sommaire {
display: block;
position: static;
max-height: none;
overflow: visible;
padding: 14px 10px 14px 14px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
.reperes-chapeau {
max-width: 60ch;
margin: 10px 0 0;
color: var(--muted);
font-family: var(--font-rp);
font-size: 16.5px;
line-height: 1.6;
}
.reperes-partie { margin-top: 34px; }
.reperes-partie > h2 {
margin: 0;
font-family: var(--font-title);
font-size: 23px;
font-weight: 600;
letter-spacing: -.01em;
}
.reperes-partie > .sub { margin-top: 5px; }
.reperes-partie:nth-of-type(4n+1) > h2 { color: var(--accent-ink); }
.reperes-partie:nth-of-type(4n+2) > h2 { color: color-mix(in oklab, var(--teinte-parties) 80%, var(--ink)); }
.reperes-partie:nth-of-type(4n+3) > h2 { color: color-mix(in oklab, var(--teinte-fictions) 80%, var(--ink)); }
.reperes-partie:nth-of-type(4n+4) > h2 { color: color-mix(in oklab, var(--teinte-communaute) 80%, var(--ink)); }
.reperes-bloc {
margin-top: 14px;
padding: 16px 18px 17px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
box-shadow: var(--ombre-carte);
}
.reperes-bloc h3 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 11px;
font-family: var(--font-title);
font-size: 20px;
font-weight: 600;
line-height: 1.25;
}
.reperes-etiq { font-weight: 400; }
.reperes-texte { max-width: 64ch; font-family: var(--font-rp); font-size: 16px; line-height: 1.6; }
.reperes-texte p { margin: 0 0 10px; }
.reperes-texte p:last-child { margin-bottom: 0; }
.reperes-texte b, .reperes-texte strong { font-weight: 600; color: var(--ink); }
.reperes-ou {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 12px 0 0;
padding-top: 11px;
border-top: 1px solid var(--line);
font-size: 13px;
line-height: 1.5;
}
.reperes-ou .ico { width: 15px; height: 15px; flex: none; opacity: .8; }
.reperes-ou-mot { color: var(--muted); font-weight: 600; }
.reperes-ou-sep { color: var(--faint); }
.reperes-ou a { color: var(--accent-ink); }
.reperes-ici { color: var(--muted); }
.reperes-ici code {
padding: 1px 5px;
border-radius: var(--rayon-s);
background: var(--surface-2);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
overflow-wrap: anywhere;
}
.reperes-fin { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.reperes-fin h2 { margin: 0; font-family: var(--font-title); font-size: 21px; font-weight: 600; }
.reperes-fin-actes { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.page-lecture :is(.reperes, .reperes-fin) { max-width: none; margin-left: 0; margin-right: 0; }
.fiche-apercu { display: block; margin: 6px 0 4px; }
.fiche-apercu > * { margin-top: 0; margin-bottom: 0; }
.apercu-remplace { display: none !important; }
.cadrage-en-place { margin: 0 0 6px; }
.fiche-edition-portrait .cadrage-en-place .cadrage-cadre { max-width: 200px; border-radius: 14px; }
.profil-images .cadrage-en-place .cadrage-rond { max-width: 120px; }
.profil-avatar-vide {
display: grid;
place-items: center;
background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 65%, var(--surface)), var(--surface-2));
color: var(--blanc);
font-family: var(--font-title);
font-size: 24px;
font-weight: 600;
}
.profil-banniere-vide {
background:
radial-gradient(120% 140% at 15% 0%, color-mix(in oklab, var(--accent) 45%, var(--surface)), transparent 70%),
var(--surface-2);
}
.fiche-texte { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.fiche-avertissements {
border-left: 3px solid var(--warn, var(--accent));
background: color-mix(in oklab, var(--warn, var(--accent)) 8%, var(--surface));
}
.fiche-avertissements h2 { margin-top: 0; }
.fiche-avertissements p { margin: 0; font-size: 14px; line-height: 1.6; }
.tpl-edition { display: grid; gap: 12px; }
.tpl-edition form { margin: 0; }
.tpl-edition-liste { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; }
.tpl-edition-liste li { line-height: 1.45; }
.tpl-edition-titre { display: block; }
.tpl-edition-gestes { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.tpl-edition-gestes form { display: inline; }
.tpl-edition-ajout .champs { margin-top: 6px; }
.plan-tete { margin-bottom: 26px; }
.plan-chapeau {
max-width: 60ch;
margin: 10px 0 0;
color: var(--muted);
font-family: var(--font-rp);
font-size: 16.5px;
line-height: 1.6;
}
.plan-groupe { margin-top: 30px; }
.plan-groupe > h2 {
margin: 0;
font-family: var(--font-title);
font-size: 19px;
font-weight: 600;
letter-spacing: -.01em;
}
.plan-groupe:nth-of-type(4n+1) > h2 { color: var(--accent-ink); }
.plan-groupe:nth-of-type(4n+2) > h2 { color: color-mix(in oklab, var(--teinte-parties) 80%, var(--ink)); }
.plan-groupe:nth-of-type(4n+3) > h2 { color: color-mix(in oklab, var(--teinte-fictions) 80%, var(--ink)); }
.plan-groupe:nth-of-type(4n+4) > h2 { color: color-mix(in oklab, var(--teinte-communaute) 80%, var(--ink)); }
.plan-quoi { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.plan-liste {
margin: 12px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.plan-liste > li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
min-height: 44px;
box-sizing: border-box;
}
.plan-liste > li > a {
color: var(--ink);
font-size: 14.5px;
font-weight: 600;
text-decoration: none;
}
.plan-liste > li > a:hover,
.plan-liste > li > a:focus-visible { color: var(--accent-ink); text-decoration: underline; }
.plan-adresse {
color: var(--muted);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
word-break: break-all;
}
.plan-vide { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.plan-vide a { color: var(--accent-ink); }
.page-lecture .plan { max-width: none; margin-left: 0; margin-right: 0; }
.champs-univers {
padding-left: 14px;
border-left: 3px solid var(--accent);
}
.champs-univers > h2 { color: var(--accent-ink); }
.champs-univers > h2 + .mine { max-width: 52ch; margin-top: 4px; }
.lien-danger { color: var(--warn); }
.lien-danger:hover { color: var(--warn); }
:root {
--colonne-chatbox: 396px;
}
#tel-dock {
--td-gauche: max(16px, env(safe-area-inset-left, 0px) + 16px);
right: auto;
left: var(--td-gauche);
align-items: flex-start;
}
@media (min-width: 768px) {
#tel-dock .td-tel { --td-largeur-dispo: calc(100vw - var(--td-gauche) - var(--colonne-chatbox)); }
}
#chatbox,
#tel-dock { bottom: max(16px, env(safe-area-inset-bottom, 0px) + 16px); }
@media (max-width: 899px) {
.td-reduites { bottom: max(16px, env(safe-area-inset-bottom, 0px) + 16px); }
}
@media (max-width: 599px) {
.td-tel {
top: env(safe-area-inset-top, 0px);
right: 0;
left: 0;
}
}
.acte-enregistrer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 10px;
scroll-margin-top: 90px;
}
.acte-dit {
color: var(--accent-ink);
background: var(--accent-soft);
border-radius: var(--rayon);
padding: 6px 10px;
font-size: 12.5px;
line-height: 1.4;
}
.fic-sous-titre {
margin: 4px 0 2px;
font-family: var(--font-title);
font-size: 15.5px;
font-weight: 600;
}
.fic-garde-seul { margin-top: 8px; }
.fic-deux-gestes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-top: 16px;
}
.fic-deux-gestes .btn { min-height: 44px; }
.fic-deux-gestes .mine { flex-basis: 100%; margin: 0; }
.fic-rangement { border: 0; padding: 0; margin: 14px 0 0; }
.fic-rangement-etiq { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.etiq.fic-genre {
background: color-mix(in oklab, var(--teinte-fictions) 15%, var(--surface));
color: color-mix(in oklab, var(--teinte-fictions) 78%, var(--ink));
font-weight: 600;
}
.etiq.fic-relation { background: var(--surface-2); color: var(--muted); }
.fic-filtres { margin-top: 14px; }
.fic-filtres .etiquettes { padding: 4px 0 8px; }
.fic-filtres .lab { margin-top: 6px; }
.fic-filtre-tw {
margin-top: 12px;
padding: 10px 12px;
background: var(--surface-2);
border-radius: var(--rayon);
}
.fic-filtre-tw .mine { margin: 0 0 8px; }
.fic-repli {
margin-top: 14px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.fic-repli > summary {
display: block;
padding: 12px 14px;
min-height: 44px;
cursor: pointer;
list-style: none;
}
.fic-repli > summary::marker { content: ''; }
.fic-repli > summary::-webkit-details-marker { display: none; }
.fic-repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fic-repli-titre {
display: block;
font-family: var(--font-title);
font-size: 15.5px;
font-weight: 600;
color: var(--ink);
}
.fic-repli-titre .ico { width: 14px; height: 14px; vertical-align: -2px; background-color: var(--warn); }
.fic-repli-quoi {
display: block;
margin-top: 4px;
font-size: 12.5px;
line-height: 1.5;
color: var(--muted);
}
.fic-repli-geste {
display: inline-block;
margin-top: 8px;
padding: 3px 9px;
border-radius: var(--rayon-pilule);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 12.5px;
font-weight: 600;
}
.fic-repli[open] > summary .fic-repli-geste { display: none; }
.fic-repli[open] > summary { border-bottom: 1px solid var(--line); }
.fic-repli > .carte { margin-top: 0; border: 0; }
.fic-repli-texte > .prose { padding: 0 14px 14px; }
.fic-amis-choisis { border: 0; padding: 0; margin: 14px 0 0; }
.fic-amis-choisis > .lab { padding: 0; }
.fic-lecteurs:has(input[name="public"][value="public"]:not(:checked)) .fic-lecteur-plus.choix-ligne { opacity: .6; }
@media (min-width: 900px) and (hover: hover) {
.pf-couverture-modifier,
.pf-photo-modifier { opacity: 0; transition: opacity .14s ease; }
.pf-couverture:hover .pf-couverture-modifier,
.pf-couverture:focus-within .pf-couverture-modifier,
.pf-photo-boite:hover .pf-photo-modifier,
.pf-photo-boite:focus-within .pf-photo-modifier { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.pf-couverture-modifier,
.pf-photo-modifier { transition: none; }
}
.pf-retouches { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pf-retouche { min-width: 0; }
.pf-retouche[open] { flex: 1 1 100%; }
.pf-retouche-dit { align-self: center; }
.pf-retouche > summary { list-style: none; cursor: pointer; }
.pf-retouche > summary::-webkit-details-marker { display: none; }
.pf-retouche-geste {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0 13px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--muted);
font-size: 12.5px;
font-weight: 600;
}
.pf-retouche-geste:hover { color: var(--ink); background: var(--surface-2); }
.pf-retouche-geste .ico { width: 15px; height: 15px; }
.pf-retouche[open] > summary .pf-retouche-geste { color: var(--ink); }
.pf-retouche-form {
margin-top: 10px;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.pf-retouche-form > .lab:first-child { padding-top: 0; }
.pf-retouche-form input.field,
.pf-retouche-form select.field { max-width: 340px; }
.profil-presentation .vide { margin: 0; }
.profil-presentation .pf-retouche { margin-top: 10px; }
.pf-image-seule .profil-avatar-apercu { width: 150px; height: 150px; }
.pf-image-seule .cadrage-en-place .cadrage-rond { max-width: 220px; }
.pf-image-seule .lab { padding-top: 12px; }
.scene-avertir { border: 0; padding: 0; margin: 12px 0 0; }
.scene-avertir > .lab { padding: 0; }
.scene-avertir-liste {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 0 14px;
margin: 4px 0 10px;
}
.scene-avertir-reglage { margin-top: 12px; }
.scene-avertir-reglage > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.scene-avertir-reglage > summary .ico { background-color: var(--warn); }
.scene-avertit { margin: 8px 0 0; }
.scene-avertit-tete {
margin: 0 0 4px;
font-size: 12.5px;
font-weight: 600;
color: var(--muted);
}
.scene-avertit-tete .ico { width: 13px; height: 13px; vertical-align: -2px; background-color: var(--warn); }
.scene-avertit .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.etiq.scene-avertit-un { background: var(--surface-2); color: var(--muted); }
a.scene .scene-avertit-tete,
a.scene .etiq.scene-avertit-un { text-decoration: none; }
.scene-repli {
margin-top: 14px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.scene-repli > summary {
display: block;
padding: 12px 14px;
min-height: 44px;
cursor: pointer;
list-style: none;
}
.scene-repli > summary::marker { content: ''; }
.scene-repli > summary::-webkit-details-marker { display: none; }
.scene-repli > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scene-repli-titre {
display: block;
font-family: var(--font-title);
font-size: 15.5px;
font-weight: 600;
color: var(--ink);
}
.scene-repli-titre .ico { width: 14px; height: 14px; vertical-align: -2px; background-color: var(--warn); }
.scene-repli-quoi {
display: block;
margin-top: 4px;
font-size: 12.5px;
line-height: 1.5;
color: var(--muted);
}
.scene-repli-geste {
display: inline-block;
margin-top: 8px;
padding: 3px 9px;
border-radius: var(--rayon-pilule);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 12.5px;
font-weight: 600;
}
.scene-repli[open] > summary .scene-repli-geste { display: none; }
.scene-repli[open] > summary { border-bottom: 1px solid var(--line); }
.scene-repli > .scene { margin-top: 0; border: 0; }
.scene-repli > .turn,
.scene-repli > .turn-retire { padding-left: 14px; padding-right: 14px; }
.compteur-mots {
margin: 4px 0 0;
text-align: right;
font-size: 11.5px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.composer .compteur-mots { margin: 2px 2px 0 0; }
.tel-avis {
margin: 10px 12px;
padding: 9px 12px;
border-radius: 9px;
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 13px;
}
.tel-icone-img {
position: relative;
overflow: hidden;
}
.tel-icone-img::after { content: none; }
.tel-icone-img > img {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.tel-icone-img::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
box-shadow: inset 0 0 0 1px var(--noir-18);
pointer-events: none;
}
.app-reglage { align-items: flex-start; }
.app-reglage-tuile { flex: 0 0 auto; }
.app-reglage-corps { flex: 1; min-width: 0; }
.app-reglage-retirer {
display: flex;
align-items: center;
gap: 7px;
margin-top: 6px;
font-size: 12.5px;
color: var(--muted);
}
.app-reglage-retirer input { flex: 0 0 auto; }
.chat-ecrit {
margin: 6px 2px 0;
font-size: 12px;
font-style: italic;
line-height: 15px;
min-height: 15px;
color: var(--faint);
}
.chat-ecrit[hidden] { display: block !important; visibility: hidden; }
.chat-ecrit + .chat-envoi { margin-top: 4px; }
.chat-lu {
margin: 3px 2px 0;
text-align: right;
font-size: 11px;
color: var(--faint);
}
.pub-media-video {
aspect-ratio: var(--ratio, 16 / 9);
max-height: 70vh;
background: var(--nuit-video);
}
.pub-media-video video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
background: var(--nuit-video);
}
.chat-galerie .pub-media-video { max-height: 240px; }
.comp-media-video,
.comp-media-anime { aspect-ratio: var(--ratio, 16 / 9); background: var(--nuit-video); }
.comp-media-apercu {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
}
.comp-media-sans-apercu {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
padding: 12px;
text-align: center;
font-size: 12px;
color: var(--faint);
}
.comp-survol { outline: 2px dashed var(--accent); outline-offset: 3px; }
.compte-sommaire {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 14px 0 4px;
}
.compte-sommaire > a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-2);
color: var(--muted);
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.compte-sommaire > a:hover,
.compte-sommaire > a:focus-visible { border-color: var(--accent); color: var(--ink); }
.pf-succes-plus { margin-top: 10px; }
.pf-succes-plus > summary {
display: inline-flex; align-items: center; min-height: 40px;
color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.pf-succes-plus > summary:hover { color: var(--ink); }
@media (max-width: 720px) {
.compte-sommaire { gap: 5px; }
.compte-sommaire > a { min-height: 32px; padding: 0 9px; font-size: 12.5px; }
}
.medi-champ {
margin: 16px 0 0;
padding: 0;
border: 0;
}
.medi-champ > legend { padding: 0; }
.medi-choisies {
display: flex;
flex-direction: column;
gap: 2px;
margin: 8px 0 4px;
}
.medi-choisie {
display: flex;
align-items: baseline;
gap: 8px;
min-height: 36px;
padding: 6px 10px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
font-size: 14px;
line-height: 1.4;
}
.medi-choisie input { width: auto; margin: 0; flex: 0 0 auto; }
.medi-choisie-titre { font-weight: 600; }
.medi-choisie:has(input:not(:checked)) { opacity: .5; }
.medi-choisie:has(input:not(:checked)) .medi-choisie-titre { text-decoration: line-through; }
.medi-propositions {
display: flex;
flex-direction: column;
gap: 2px;
margin: 6px 0 0;
}
.medi-proposition {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
width: 100%;
min-height: 44px;
padding: 7px 11px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.medi-proposition:hover,
.medi-proposition:focus-visible { border-color: var(--accent); }
.medi-proposition-titre { font-weight: 600; }
.medi-deux { display: grid; gap: 0 12px; }
@media (min-width: 520px) { .medi-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.medi-inspirations .etiquettes { padding: 8px 0 0; }
.medi-etiq { background: var(--accent-soft); color: var(--accent-ink); }
.medi-aussi-bloc { margin-top: 14px; }
.medi-aussi-bloc + .medi-aussi-bloc { padding-top: 14px; border-top: 1px solid var(--line); }
.medi-aussi-titre {
margin: 0 0 8px;
font-family: var(--font-title);
font-size: 15.5px;
font-weight: 600;
}
.medi-presentation {
margin-top: 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.medi-presentation .prose { font-size: 15px; }
.medi-com {
margin-top: 12px;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.medi-com-qui {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: baseline;
margin: 0 0 4px;
font-size: 13.5px;
font-weight: 600;
}
.medi-com-texte { margin: 0; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.medi-com-actes { display: flex; gap: 12px; margin: 8px 0 0; }
.medi-com-actes form { margin: 0; }
.medi-pied { margin-top: 14px; }
.lieu-vide {
margin-top: 4px;
padding: 20px 18px;
border: 1px dashed var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
text-align: center;
}
.lieu-vide-titre {
margin: 0;
font-family: var(--font-title);
font-size: 17px;
font-weight: 600;
line-height: 1.3;
}
.lieu-vide-texte {
max-width: 48ch;
margin: 8px auto 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
.lieu-vide-geste { margin: 14px 0 0; }
.lieu-banniere { position: relative; }
.lieu-banniere-attente {
background-color: color-mix(in oklab, var(--teinte, var(--accent)) 20%, var(--surface-2));
}
@media (min-width: 900px) and (hover: hover) {
.lieu-banniere:hover .lieu-banniere-modifier,
.lieu-banniere:focus-within .lieu-banniere-modifier { opacity: 1; }
.lieu-banniere-attente .lieu-banniere-modifier { opacity: 1; }
}
.pub-avatar.pub-avatar-personnage { background: none; overflow: hidden; }
.pub-avatar-personnage .pub-perso-photo {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
color: var(--blanc);
font-size: 17px;
font-weight: 600;
letter-spacing: .02em;
}
.fic-banniere {
width: 100%;
overflow: hidden;
margin: 2px 0 14px;
border-radius: var(--rayon-l);
background: var(--surface-2);
}
.fic-banniere img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
.fic-banniere { margin-bottom: 12px; }
}
.comp-gardee video {
display: block;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 10px;
background: var(--nuit-video);
}
.comp-gardee:has(input:not(:checked)) video { opacity: 0.35; filter: grayscale(1); }
@media (max-width: 480px) {
.comp-gardee video { width: 96px; height: 96px; }
}
.pot-tete {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
margin: 0 0 6px;
font-size: 14px;
}
.pot-tete small { color: var(--muted); font-size: 12.5px; }
.pot-titre { margin: 0 0 8px; font-size: 17px; }
.pot-texte { margin: 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.pot-premiere { margin-top: 22px; }
.pot-epingle {
background: var(--surface-2);
padding: 14px 16px;
border-radius: var(--rayon-l);
}
.pot-pied {
display: flex;
flex-wrap: wrap;
gap: 8px 16px;
margin-top: 12px;
font-size: 12.5px;
}
.pot-pied a { color: var(--muted); text-decoration: none; }
.pot-pied a:hover { color: var(--ink); text-decoration: underline; }
.pot-file .meta { margin-bottom: 10px; }
.pot-rumeur {
padding: 12px 0;
border-top: 1px solid var(--line);
}
.pot-rumeur:first-of-type { border-top: 0; }
.pot-rumeur-texte { margin: 0 0 4px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.pot-gestes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 10px;
}
.pot-gestes form { margin: 0; }
.pot-promesse {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 14px 0 12px;
padding: 12px 14px;
border-radius: var(--rayon-l);
background: var(--surface-2);
border: 1px solid var(--line);
font-size: 13.5px;
line-height: 1.5;
}
.pot-promesse .ico { flex: 0 0 auto; margin-top: 2px; }
.secret {
margin: 12px 0;
padding: 12px 14px;
border-radius: var(--rayon-l);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
background: var(--surface-2);
}
.secret-etat {
margin: 0 0 6px;
color: var(--muted);
font-size: 12.5px;
}
.secret-texte { margin: 0; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.secret-revele {
border-left-color: var(--line);
background: transparent;
}
.secret-gestes {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px 12px;
margin-top: 12px;
}
.secret-gestes form { margin: 0; }
.secret-gestes details,
.secret-nouveau { width: 100%; }
.secret-gestes details summary,
.secret-nouveau summary { cursor: pointer; font-size: 13.5px; }
@media (max-width: 480px) {
.secret { padding: 10px 12px; }
.pot-promesse { padding: 10px 12px; }
.pot-gestes,
.secret-gestes { gap: 8px; }
.pot-gestes form,
.pot-gestes .btn,
.secret-gestes form,
.secret-gestes .btn { width: 100%; }
}
.etiq.sugg-sorte { font-weight: 600; }
.etiq.sugg-sorte-idee { background: var(--accent-soft); color: var(--accent-ink); }
.etiq.sugg-sorte-bug { background: color-mix(in srgb, var(--warn) 13%, transparent); color: var(--warn); }
.etiq.sugg-cherche { background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--muted); }
.sugg-filtres { margin-bottom: 10px; }
.sugg-bug {
display: grid;
grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
gap: 6px 14px;
margin: 14px 0;
}
.sugg-bug dt { color: var(--muted); font-size: 13px; }
.sugg-bug dd { margin: 0; line-height: 1.55; }
.idee-carte .idee-soutien .btn { white-space: normal; line-height: 1.25; }
@media (max-width: 560px) {
.sugg-bug { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.sugg-bug dd { margin-bottom: 10px; }
}
.roles-membre + .roles-membre { margin-top: 10px; }
.roles-membre .item-name { display: inline-flex; align-items: center; gap: 6px; }
.roles-membre .item-name .ico { flex: none; }
.roles-membre .geste-motive > summary { display: inline-block; }
.roles-membre .geste-motive form { margin-top: 8px; }
.roles-membre .item-name a { text-decoration: none; }
.roles-membre .item-name a:hover { text-decoration: underline; }
:root {
--com-image-hauteur: 280px;
}
.pub-reponse-image,
.ech-com-image {
display: block;
width: fit-content;
max-width: 100%;
margin-top: 6px;
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
.pub-reponse-image img,
.ech-com-image img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: var(--com-image-hauteur);
background: var(--surface-2);
}
.pub-bulle > .pub-reponse-image:first-child { margin-top: 0; }
.pub-repondre-image {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
margin: 6px 0 0 6px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
color: var(--muted);
font-size: 13px;
font-weight: 600;
cursor: pointer;
max-width: 100%;
}
.pub-repondre-image:hover { border-color: var(--accent); color: var(--ink); }
.pub-repondre-image .ico { flex: 0 0 auto; width: 16px; height: 16px; }
.pub-repondre-image input[type='file'] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pub-repondre-image-nom {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pub-repondre-image-pleine { border-color: var(--accent); color: var(--ink); }
@media (max-width: 520px) {
.pub-repondre-image { padding: 0 10px; }
.pub-repondre-image-pleine .pub-repondre-image-nom { max-width: 9ch; }
}
.tel-ecrire-image {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
color: var(--muted);
cursor: pointer;
}
.tel-ecrire-image:hover { color: var(--ink); background: var(--surface-2); }
.tel-ecrire-image.pub-repondre-image-pleine { color: var(--sur-accent); background: var(--accent); }
.tel-ecrire-image .ico { width: 17px; height: 17px; }
.tel-ecrire-image input[type='file'] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
opacity: 0;
}
.fiche-recherches {
margin: 0 0 6px;
padding-left: 12px;
border-left: 2px solid var(--accent-soft);
}
.fiche-recherches .item { padding-left: 0; }
.fiche-recherches .item-top { gap: 6px; flex-wrap: wrap; }
.fiche-recherches .ann-outils { margin-top: 8px; }
.fiche-recherches .annonce-fanee,
.fiche-recherches .item.annonce-fanee { opacity: .72; }
.notes-relations summary { font-weight: 600; }
.notes-relations details { border-top: 1px solid var(--line); padding-top: 8px; }
.notes-relations details + details { margin-top: 4px; }
.notes-relations .lab { margin-top: 8px; }
.section > .notes-relations { grid-column: 1 / -1; }
.annonce-composeur .annonce-sortes { flex-wrap: wrap; }
.etiq.annonce-etiq-univers { background: color-mix(in oklab, var(--teinte-univers) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-univers) 78%, var(--ink)); }
.etiq.annonce-etiq-predefini { background: color-mix(in oklab, var(--teinte-communaute) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-communaute) 78%, var(--ink)); }
.etiq.annonce-etiq-vitrine { background: color-mix(in oklab, var(--teinte-loreside) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-loreside) 78%, var(--ink)); }
.annonce-cadre-etiq { color: var(--muted); }
.annonce-cadre { min-width: 0; }
@media (min-width: 620px) {
.dialogue-options:has(.annonce-cadre) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.dialogue-options:has(.annonce-cadre) .choix-ligne { grid-column: 1 / -1; }
}
.annonce-designe { margin: 8px 0 0; font-size: 13.5px; }
.annonce-designe-vitrine {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.annonce-designe-accroche { color: var(--muted); font-family: var(--font-rp); }
.annonce-recommande { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.annonce-recommande .crest-s { flex: 0 0 auto; }
.annonce-invitation { background: var(--accent-soft); color: var(--accent-ink); }
.fiche-cat { margin-top: 18px; }
.fiche-cat:first-of-type { margin-top: 0; }
.fiche-cat-titre {
font-family: var(--font-title);
font-size: 14.5px;
color: var(--accent-ink);
margin: 0 0 8px;
padding-bottom: 5px;
border-bottom: 1px solid var(--line);
}
.fiche-texte-titre {
font-family: var(--font-title);
font-size: 14px;
margin: 14px 0 4px;
}
.prose-fiche { margin: 0 0 6px; }
.fiche-points { margin: 0 0 6px; padding-left: 18px; }
.fiche-points li { margin-bottom: 4px; }
.champ-liste { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.champ-liste .liste-elements { display: grid; gap: 8px; margin-bottom: 8px; }
.liste-element { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; }
.liste-element .liste-retirer { align-self: center; }
.liste-relation .rel-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.liste-relation .liste-relation-mots { grid-column: 1 / -1; }
.liste-relation .rel-autre { display: none; }
.liste-relation:has(.rel-lien input[value="Autre"]:checked) .rel-autre { display: block; }
.relations-main:not(:has(input[name="relations_main"]:checked)) .relations-liste { display: none; }
.relations-main .relations-liste { margin-top: 10px; }
.fiche-relations { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.fiche-relations .item-body { display: grid; gap: 2px; }
.ligne-carte-apercu { margin: 8px 0 0; padding: 8px 12px; border: 1px dashed var(--line, currentColor); border-radius: 10px; display: inline-grid; gap: 2px; }
.ligne-carte-apercu i { display: none; }
.ligne-carte-choix:has(input[name="ligne_carte"][value="metier"]:checked) .ligne-carte-apercu i[data-ligne="metier"],
.ligne-carte-choix:has(input[name="ligne_carte"][value="citation"]:checked) .ligne-carte-apercu i[data-ligne="citation"] { display: block; }
.avert-question:not(:has(.interrupteur:checked)) .avert-liste { display: none; }
.avert-question .avert-liste { margin-top: 10px; }
.champ-coches { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.champ-cat-titre {
font-family: var(--font-title);
font-size: 14.5px;
color: var(--accent-ink);
margin: 16px 0 2px;
}
.champ-cat-titre:first-of-type { margin-top: 6px; }
.champ-types summary { cursor: pointer; color: var(--accent-ink); font-size: 13px; margin: 4px 0; }
.champ-types-liste {
margin: 4px 0 10px;
padding-left: 18px;
color: var(--muted);
font-size: 13px;
}
.champ-types-liste li { margin-bottom: 3px; }
.champ-types-liste b { color: var(--ink); font-weight: 600; }
.champ-ajout-cat { margin-top: 12px; }
@media (min-width: 560px) {
.champ-ajout-cat { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: end; }
.champ-ajout-cat .lab { grid-column: 1 / -1; margin-bottom: 0; }
}
.etiq.etiq-mien {
background: var(--accent-soft);
color: var(--accent-ink);
}
.portee-choix {
border: 0;
padding: 0;
margin: 0 0 14px;
display: grid;
gap: 8px;
}
.portee-choix legend { padding: 0; }
.portee-option {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: start;
padding: 11px 13px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
cursor: pointer;
}
.portee-option input { margin: 2px 0 0; accent-color: var(--accent); }
.portee-option strong { display: block; font-weight: 600; font-size: 14px; }
.portee-option .mine { margin: 3px 0 0; }
.portee-option:has(input:checked) {
border-color: var(--accent);
background: var(--accent-soft);
}
.portee-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mess-demandes {
margin-top: 14px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
}
.mess-demandes > summary {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
font-family: var(--font-title);
font-size: 15px;
font-weight: 600;
cursor: pointer;
}
.mess-demandes > summary::-webkit-details-marker { display: none; }
.mess-demandes > p { margin: 0 14px 10px; }
.mess-demande { padding: 12px 14px; border-top: 1px solid var(--line); }
.mess-demande-qui { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.mess-demande-qui .portrait { width: 38px; height: 38px; border-radius: 14px; font-size: 14px; object-fit: cover; }
.mess-demande-qui b { display: block; font-size: 14.5px; }
.mess-demande-qui small { display: block; }
.mess-demande-mot {
margin: 8px 0 10px;
font-size: 14px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.mess-demande-actes { display: flex; flex-wrap: wrap; gap: 8px; }
.invitation-ecrire textarea { min-height: 140px; resize: vertical; }
.invitation-regles { margin-top: 10px; }
.joueur-bloc { display: grid; gap: 8px; align-content: start; }
.joueur-carte-ecrire { margin: 0; }
.cb-demandes {
display: block;
margin: 8px;
padding: 10px 12px;
border: 1px solid var(--accent);
border-radius: var(--rayon);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
}
.meteo {
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
padding: 12px 14px;
margin: 0 0 16px;
}
.meteo-temps {
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
}
.meteo-etat { font-weight: 600; font-size: 15px; }
.meteo-temp {
font-variant-numeric: tabular-nums;
color: var(--faint);
font-size: 14px;
}
.meteo-mot { margin: 6px 0 0; font-size: 14px; }
.meteo-source { margin: 6px 0 0; color: var(--faint); font-size: 12px; }
.meteo-vieille { font-style: italic; }
.meteo-tel {
border: 0;
background: none;
padding: 18px;
margin: 0;
text-align: center;
}
.meteo-tel .meteo-temps { justify-content: center; }
.meteo-tel .meteo-etat { font-size: 20px; }
.meteo-tel .meteo-temp { font-size: 16px; }
.tel-ecran-fond .meteo-tel,
.tel-ecran-fond .meteo-tel .meteo-temp,
.tel-ecran-fond .meteo-tel .meteo-source {
color: var(--blanc);
text-shadow: 0 1px 3px var(--noir-65);
}
.pseudo-teint { color: var(--pseudo); }
.pseudo-emoji { margin-right: 4px; font-style: normal; }
.pseudo-teint, .pseudo-teinte-vue { --pseudo: var(--pseudo-brut); }
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) .pseudo-teint,
html:not([data-theme='clair']) .pseudo-teinte-vue {
--pseudo: color-mix(in oklab, var(--pseudo-brut) 62%, #fff);
}
}
html[data-theme='sombre'] .pseudo-teint,
html[data-theme='sombre'] .pseudo-teinte-vue {
--pseudo: color-mix(in oklab, var(--pseudo-brut) 62%, #fff);
}
.pseudo-teintes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.pseudo-teinte-vue {
width: 22px; height: 22px; border-radius: 50%;
background: var(--pseudo); box-shadow: inset 0 0 0 1px var(--noir-12);
}
.pseudo-choix-teinte { border: 0; margin: 0; padding: 0; min-width: 0; }
.pseudo-choix-teinte .pseudo-teintes { gap: 10px; }
.pseudo-teinte-choix { position: relative; display: inline-flex; cursor: pointer; }
.pseudo-teinte-choix .pseudo-teinte-vue { width: 30px; height: 30px; }
.pseudo-teinte-aucune {
background: linear-gradient(135deg, transparent 46%, var(--muted) 46% 54%, transparent 54%), var(--surface);
box-shadow: inset 0 0 0 1px var(--line-strong);
}
.pseudo-teinte-choix input:checked + .pseudo-teinte-vue {
box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink);
}
.pseudo-teinte-choix input:focus-visible + .pseudo-teinte-vue {
outline: 2px solid var(--accent); outline-offset: 4px;
}
.pseudo-apercu { margin: 0 0 10px; font-weight: 600; font-size: 1.1em; }
.pseudo-apercu .pseudo-emoji:not(:empty) { margin-right: .3em; }
.pseudo-emoji-choix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pseudo-emoji-champ { width: 4.5em; text-align: center; font-size: 1.3em; }
.pseudo-emoji-champ[readonly] { cursor: pointer; }
.mot-anonyme { color: var(--muted); font-style: italic; }
.pub-journal .pub-tete { margin-bottom: 0; }
.pub-journal-signe {
background: var(--accent-soft);
color: var(--accent-ink);
width: 38px; height: 38px;
}
.pub-journal-signe[style*='--couleur-fait'] {
background: color-mix(in oklab, var(--couleur-fait) 14%, var(--surface));
color: color-mix(in oklab, var(--couleur-fait) 62%, var(--ink));
}
.pub-journal-signe .ico { width: 20px; height: 20px; }
.pub-journal-texte { margin: 0; font-size: 14.5px; line-height: 1.45; }
.sms-vus {
display: flex;
align-items: center;
gap: 6px;
margin: 2px 0 8px;
min-height: 20px;
}
.sms-moi + .sms-vus { justify-content: flex-end; }
.sms-vus-pile {
display: flex;
direction: rtl;
flex-direction: row-reverse;
}
.sms-vu {
width: 20px;
height: 20px;
border-radius: 50%;
overflow: hidden;
flex: none;
margin-inline-end: -6px;
border: 2px solid var(--surface);
background: var(--teinte, var(--accent));
display: grid;
place-items: center;
}
.sms-vu:first-child { margin-inline-end: 0; }
.sms-vu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sms-vu-init {
font-size: 9px;
font-weight: 700;
color: var(--blanc);
line-height: 1;
}
.sms-vu-plus {
background: var(--surface-2);
color: var(--muted);
font-size: 9px;
font-weight: 700;
border-radius: 999px;
width: auto;
min-width: 20px;
padding: 0 4px;
}
.sms-vus-quand { font-size: 11px; color: var(--faint); }
.sms-ecrit {
min-height: 15px;
margin: 0 12px 4px;
font-size: 12px;
color: var(--muted);
font-style: italic;
}
.sms-ecrit:empty { visibility: hidden; }
.sms .galerie { width: 250px; max-width: 100%; margin-top: 4px; }
.sms .galerie-seule img { aspect-ratio: auto; }
.sms-lecture .galerie { width: 320px; max-width: 100%; }
.sms-voix {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.sms-voix-lecteur { max-width: 220px; height: 32px; }
.sms-voix-duree { font-size: 11px; color: var(--muted); }
.sms-corriger { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sms-corriger .field { flex: 1 1 140px; min-width: 0; }
.sms-annuler { font-size: 12px; color: var(--muted); }
.sms-actes {
display: flex;
gap: 10px;
margin-top: 2px;
font-size: 11px;
}
.sms-actes a,
.sms-actes button {
background: none;
border: 0;
padding: 4px 0;
min-height: 24px;
font: inherit;
color: var(--faint);
cursor: pointer;
text-decoration: underline;
}
@media (hover: hover) {
.sms-actes { opacity: 0; transition: opacity .15s; }
.sms:hover + .sms-vus + .sms-actes,
.sms:hover .sms-actes,
.sms-actes:focus-within { opacity: 1; }
}
.tel-ecrire-ligne {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.tel-ecrire-ligne input[type="text"] { flex: 1 1 auto; min-width: 0; }
.sms-vocal {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
}
.sms-vocal-ecoute { flex: 1 1 auto; height: 32px; min-width: 0; }
@media (max-width: 520px) {
.tel-ecrire-ligne .comp-outil-nom { display: none; }
}
.compteur-signes {
margin: 4px 0 0;
text-align: right;
font-size: 11.5px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.compteur-signes.compteur-trop { color: var(--warn); font-weight: 600; }
.champs .compteur-signes { margin-top: 2px; }
.pf-onglets {
padding: 0; overflow: hidden;
border: 1px solid var(--line); border-radius: 16px;
background: var(--surface); box-shadow: var(--ombre-carte);
}
.pf-onglets + .pf-onglets, .pf-onglets + .section, .section + .pf-onglets { margin-top: 0; }
.pf-volet { padding: 16px 20px 18px; }
.pf-volet + .pf-volet { border-top: 1px solid var(--line); }
.pf-volet-titre { margin: 0 0 12px; font-family: var(--font-title); font-size: 18.5px; letter-spacing: -.01em; }
.pf-onglets[data-onglets-pret] .pf-volet-titre { display: none; }
.pf-onglets[data-onglets-pret] .pf-volet + .pf-volet { border-top: 0; }
.pf-onglet-nombre {
padding: 1px 6px; border-radius: 999px; background: var(--surface); color: var(--faint);
font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pf-faits { margin: 14px 0 0; }
.pf-faits > div {
display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: baseline;
padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px;
}
.pf-faits > div:first-child { border-top: 0; }
.pf-faits dt { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pf-faits dd { margin: 0; }
.pf-faits .profil-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-succes { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pf-succes li { display: flex; gap: 9px; align-items: baseline; font-size: 14px; }
.pf-succes-point { flex: none; display: inline-flex; color: var(--accent); }
.pf-succes-point .ico { width: 14px; height: 14px; }
.pf-succes-quand { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.pf-succes-serie { margin-left: 4px; color: var(--faint); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-fictions { display: grid; margin: 0; padding: 0; list-style: none; }
.pf-fictions li + li { border-top: 1px solid var(--line); }
.pf-fiction { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; color: inherit; text-decoration: none; }
.pf-fictions li:first-child .pf-fiction { padding-top: 0; }
.pf-fiction-couv { flex: none; width: 62px; }
.pf-fiction-corps { display: grid; gap: 2px; min-width: 0; }
.pf-fiction-titre { font-weight: 600; font-size: 14.5px; }
.pf-fiction:hover .pf-fiction-titre { text-decoration: underline; }
.pf-ami-commun .pf-ami-photo { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); border-radius: 50%; }
.pf-ami-commun .pf-ami-photo.contour-en-ligne { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--en-ligne), 0 0 0 6px var(--surface), 0 0 0 8px var(--accent); }
.pf-amis-communs { margin: 0; }
.pf-bascule {
position: sticky; top: 0; z-index: 5; display: flex; gap: 2px; margin: 16px 0 0;
border-bottom: 1px solid var(--line); background: var(--paper);
}
.pf-bascule[hidden] { display: none; }
.pf-bascule-bouton {
flex: 1; min-height: 46px; padding: 12px 8px 10px; border: 0; border-bottom: 2px solid transparent;
background: none; color: var(--muted); font: 600 14px var(--font-ui); cursor: pointer;
}
.pf-bascule-bouton[aria-pressed='true'] { color: var(--accent-ink); border-bottom-color: var(--accent); }
@media (max-width: 899px) {
.pf-colonnes[data-montre='fil'] > .pf-cote,
.pf-colonnes[data-montre='infos'] > .pf-fil { display: none; }
.pf-bascule:not([hidden]) + .pf-colonnes { margin-top: 14px; }
}
@media (min-width: 900px) {
.pf-bascule { display: none !important; }
}
.abo-liste { display: grid; margin: 0; padding: 0; list-style: none; }
.abo-ligne {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
padding: 10px 0; border-top: 1px solid var(--line);
}
.abo-ligne:first-child { border-top: 0; padding-top: 0; }
.abo-qui { flex: 1 1 180px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 600; }
.abo-qui .mine { margin: 0; font-weight: 400; }
.abo-photo { width: 40px; height: 40px; }
.abo-ligne form { margin: 0; }
.pf-mutuel { margin: 0; align-self: center; }
.pf-pile { display: grid; gap: 16px; max-width: 860px; margin: 20px auto 0; min-width: 0; }
.pf-pile > .section { margin: 0; }
.pf-pile > .pf-fil { display: grid; gap: 16px; min-width: 0; }
.pf-pile > .pf-fil > .section { margin: 0; }
.pf-faits + .pf-retouches { margin-top: 12px; }
.champ-autre { margin-top: 6px; }
.pf-onglets[data-onglets-pret] .pf-volet-titre + .pf-faits, .pf-volet-titre + .pf-faits { margin-top: 0; }
.pub-epinglee, .pub-masquee { display: inline-flex; align-items: center; gap: 4px; }
.pub-epinglee { color: var(--accent-ink); font-weight: 600; }
.pub-masquee { color: var(--faint); }
.pub-epinglee .ico, .pub-masquee .ico { width: 13px; height: 13px; }
.pf-composeur { margin: 0 0 14px; padding: 10px 12px; }
.pub-epinglee-boite { display: contents; }
@media (min-width: 900px) {
.pf-colonnes.pf-colonnes-quart { grid-template-columns: minmax(280px, 1fr) minmax(0, 3fr); }
.pf-colonnes-quart > .pf-cote {
position: sticky; top: 16px; align-self: start;
max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: thin;
}
.pf-colonnes-quart .pf-volet { padding: 14px 14px 16px; }
.pf-colonnes-quart .pf-faits > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (min-width: 900px) { .pf-colonnes-quart .fiches-grille-profil { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
.pf-colonnes-quart .profil-ecriture-liste > div,
.pf-colonnes-quart .pf-faits > div { grid-template-columns: minmax(0, 1fr); gap: 3px; align-items: start; }
.pf-colonnes-quart .profil-ecriture-liste dt,
.pf-colonnes-quart .pf-faits dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.pf-colonnes-quart .profil-ecriture-liste dd.profil-themes { margin: 2px 0 0; }
.pf-colonnes-quart > .pf-cote { gap: 14px; }
}
.pub-journal-ecusson { object-fit: cover; border-radius: 10px; }
.pub-journal-objet { font-weight: 600; color: var(--ink); }
.pub-journal-objet:hover { color: var(--accent-ink); }
.reac-plus { display: inline-grid; place-items: center; text-decoration: none; color: var(--muted); }
.reac-plus .ico { width: 16px; height: 16px; }
.reac-rapides { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.reac-rapides .reac-rapide { width: 64px; text-align: center; font-size: 20px; padding: 6px 4px; }
.profil-teintes { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.profil-teintes legend { margin-bottom: 6px; }
.profil-teinte { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 13px; }
.profil-teinte:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.profil-teinte input { position: absolute; opacity: 0; pointer-events: none; }
.profil-teinte:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.profil-teinte-pastille { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--pseudo-brut); }
html[data-theme='sombre'] .profil-teinte-pastille { background: color-mix(in oklab, var(--pseudo-brut) 62%, var(--blanc)); }
.profil-teinte-defaut { background: var(--accent-loreside); }
.pf-page[hidden] { display: none; }
.pf-page + .pf-page { margin-top: 20px; }
.pf-pages[data-onglets-pret] .pf-page + .pf-page { margin-top: 0; }
.pf-cartes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pf-cartes > .section.pf-carte, .pf-cartes > .section.pf-carte + .section { margin: 0; min-width: 0; }
.pf-carte-12 { grid-column: span 12; }
.pf-carte-7 { grid-column: span 7; }
.pf-carte-6 { grid-column: span 6; }
.pf-carte-5 { grid-column: span 5; }
@media (max-width: 860px) { .pf-cartes > .pf-carte { grid-column: span 12; } }
.pf-medias { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pf-media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--surface-2); position: relative; }
.pf-media img, .pf-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-medias-videos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pf-medias-videos .pf-media { aspect-ratio: 16 / 10; }
.pf-media-video::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%);
border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--blanc-92);
filter: drop-shadow(0 1px 3px var(--noir-45)); }
@media (max-width: 560px) {
.pf-medias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.pf-media { border-radius: 0; }
.pf-medias-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.pf-actes { flex-wrap: wrap; gap: 8px; }
.pf-actes > form { display: contents; }
.pf-actes .btn { width: 42px; height: 42px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%;
position: relative; flex: none; font-size: 0; gap: 0; }
.pf-actes .btn .ico { width: 19px; height: 19px; }
.pf-actes .btn > .pf-onglet-nombre { position: absolute; top: -4px; right: -6px; font-size: 10px; }
}
.pf-statut { position: absolute; left: calc(100% + 16px); bottom: calc(50% + 16px); z-index: 2; margin: 0;
width: max-content; max-width: 230px; padding: 6px 11px; border-radius: 16px;
background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); box-shadow: var(--ombre);
font-size: 12.5px; line-height: 1.3; }
.pf-statut-texte { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pf-statut small { color: var(--faint); font-size: 10.5px; margin-left: 5px; }
.pf-statut::before, .pf-statut::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; }
.pf-statut::before { left: -18px; bottom: 6px; border-width: 3px 18px 12px 0; border-color: transparent var(--line-strong) transparent transparent; }
.pf-statut::after { left: -14.5px; bottom: 8px; border-width: 2px 15px 9.5px 0; border-color: transparent var(--surface) transparent transparent; }
@media (max-width: 560px) { .pf-statut { max-width: 170px; left: calc(100% + 12px); } }
.profil-statut-champ { width: 100%; }
.profil-statut-public { margin-top: 8px; }
.pf-fil-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.pf-fil-page.pf-fil-seul { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }
.pf-fil-seul > .pf-une-cote { display: none; }
.pf-une-cote { position: sticky; top: 72px; display: grid; gap: 10px; }
.pf-une { margin: 0; }
.pf-une-titre { margin: 0 0 10px; font-family: var(--font-title); font-size: 17px; }
.pf-une-dit { margin: -4px 0 10px; color: var(--faint); font-size: 13px; }
.pf-une-modifier { margin: 0; }
.pf-une .pf-une-objet { display: flex; gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: var(--rayon); text-decoration: none; color: var(--ink); }
.pf-une .pf-une-objet:hover { background: var(--surface-2); }
.pf-une-objet small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.pf-une-objet b { display: block; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.pf-une-objet em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.pf-une-couv { width: 44px; flex: none; }
.pf-une-visage { width: 44px; aspect-ratio: 3 / 4; border-radius: 8px; object-fit: cover; flex: none; }
.pf-une-ecusson { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.pf-une-vide { display: grid; place-items: center; color: var(--blanc); font-family: var(--font-title); font-weight: 600; background: var(--accent); }
.pf-une-signe { width: 44px; height: 44px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.pf-une-signe .ico { width: 20px; height: 20px; }
.pf-une-choix { margin-top: 10px; }
.pf-une-bande { display: none; }
@media (max-width: 860px) {
.pf-fil-page { grid-template-columns: minmax(0, 1fr); }
.pf-une-cote > .pf-une { display: none; }
.pf-une-cote { position: static; }
.pf-une-bande { display: block; margin: 0 0 14px; min-width: 0; }
.pf-une-piste { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.pf-une-bande .pf-une-objet { flex: 0 0 210px; scroll-snap-align: start; display: flex; gap: 10px; align-items: center; padding: 10px;
border-radius: var(--rayon-l); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pf-une-bande .pf-une-objet b { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.pf-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.pf-album { text-decoration: none; color: var(--ink); }
.pf-album b { display: block; font-size: 14px; margin-top: 8px; }
.pf-album small { color: var(--faint); font-size: 12.5px; }
.pf-album-pile { position: relative; display: block; aspect-ratio: 1; }
.pf-album-pile img, .pf-album-vide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.pf-album-pile img:nth-last-child(3) { transform: rotate(-4deg) translate(-3px, 2px); opacity: .55; }
.pf-album-pile img:nth-last-child(2) { transform: rotate(3deg) translate(3px, 1px); opacity: .8; }
.pf-album-pile img:last-child { box-shadow: 0 2px 8px var(--noir-20); }
.pf-album-vide { display: grid; place-items: center; background: var(--surface-2); color: var(--faint); }
.pf-album-public { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-family: var(--font-ui); font-weight: 500; }
.pf-album-nouveau { margin-top: 16px; }
.pf-album-nouveau > summary { list-style: none; cursor: pointer; display: inline-flex; }
.pf-album-nouveau > summary::-webkit-details-marker { display: none; }
.pf-album-form { display: grid; gap: 6px; max-width: 420px; margin-top: 10px; }
.pf-album-retour { margin: 0 0 6px; }
.pf-album-retour a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.pf-album-titre { margin: 0 0 10px; font-family: var(--font-title); font-size: 20px; }
.pf-album-ouvert .pf-retouches { margin-bottom: 14px; }
.pf-media-boite { position: relative; margin: 0; }
.pf-media-retirer { position: absolute; top: 6px; right: 6px; margin: 0; }
.pf-media-retirer button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--noir-55); color: var(--blanc); display: grid; place-items: center; cursor: pointer; }
.pf-media-retirer .ico { width: 15px; height: 15px; }
@media (max-width: 560px) { .pf-albums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
#pf-medias { background: none; border: 0; box-shadow: none; padding: 0; }
#pf-medias .pf-volet { padding: 0; border: 0; background: none; }
.carte-statuts { margin: 0 0 14px; padding: 12px 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-l, 14px); }
.statuts-piste { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 14px 4px; scrollbar-width: none; }
.statuts-piste::-webkit-scrollbar { display: none; }
.statut-plus { flex: 0 0 44px; height: 44px; align-self: center; scroll-snap-align: start; border-radius: 50%; border: 1.5px dashed var(--line-strong);
display: grid; place-items: center; font-size: 22px; color: var(--accent-ink); text-decoration: none; }
.statut-bulle { flex: 0 0 168px; scroll-snap-align: start; padding: 9px 11px 10px; border-radius: 16px; background: var(--surface-2);
border: 1.5px solid var(--line-strong); text-decoration: none; color: var(--ink); }
.statut-bulle.statut-vu { opacity: .62; }
.statut-bulle.statut-actif { border-color: var(--accent); opacity: 1; }
.statut-mien { border-style: dashed; }
.statut-qui { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.statut-qui b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statut-photo { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; }
.statut-initiales { display: grid; place-items: center; background: var(--accent); color: var(--blanc); font-size: 11px; font-weight: 600; }
.statut-texte { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.statut-ouvert { display: flex; gap: 12px; align-items: flex-start; margin: 10px 14px 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.statut-ouvert[hidden] { display: none; }
.statut-ouvert-corps { flex: 1; min-width: 0; }
.statut-ouvert-nom { font-weight: 600; text-decoration: none; color: var(--ink); }
.statut-ouvert-texte { margin: 4px 0 2px; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: var(--accent-soft); overflow-wrap: anywhere; }
.statut-ouvert small { color: var(--faint); font-size: 12px; }
.statut-reagir { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.statut-repondre { display: flex; gap: 8px; align-items: center; }
.statut-repondre input[name='texte'] { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
@media (max-width: 560px) {
.statuts-piste { gap: 8px; padding: 2px 10px 4px; }
.statut-bulle { flex-basis: 122px; padding: 8px 9px 9px; }
.statut-qui b, .statut-texte { font-size: 12.5px; }
.statut-texte { -webkit-line-clamp: 3; }
.statut-plus { flex-basis: 38px; height: 38px; font-size: 20px; }
}
@media (max-width: 560px) {
.pub, .carte-statuts, .composeur-carte, .accueil-fil .carte, .pf-fil .carte {
margin-left: calc(-1 * var(--marge)); margin-right: calc(-1 * var(--marge));
border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
}
.pub { padding-left: 16px; padding-right: 16px; }
.accueil-fil .pub, .pf-fil .pub { margin-bottom: 8px; }
.pub .pub-medias, .pub .pub-carrousel { margin-left: -16px; margin-right: -16px; border-radius: 0; }
.pf-fil > #publications.section { background: none; border: 0; box-shadow: none; padding: 0; }
.pf-fil > #publications.section > h2 { padding: 0 2px; background: none; border: 0; }
.pub .pub { margin-left: 0; margin-right: 0; border-radius: 12px; border: 1px solid var(--line); }
}
.pub-medias-grille.pub-medias-5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.pub-medias-grille.pub-medias-5 .pub-media { aspect-ratio: auto; grid-column: span 2; }
.pub-medias-grille.pub-medias-5 .pub-media:nth-child(n+4) { grid-column: span 3; }
.pub-medias-grille.pub-medias-7 { grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr 1fr; aspect-ratio: 2; }
.pub-medias-grille.pub-medias-7 .pub-media { aspect-ratio: auto; grid-column: span 3; }
.pub-medias-grille.pub-medias-7 .pub-media:nth-child(n+5) { grid-column: span 4; }
.pub-medias-mosaique.pub-medias-2 { grid-template-columns: 2fr 1fr; }
.pub-medias-mosaique.pub-medias-8,
.pub-medias-mosaique.pub-medias-9,
.pub-medias-mosaique.pub-medias-10 { grid-template-columns: repeat(12, 1fr); }
.pub-medias-mosaique.pub-medias-8 .pub-media:first-child,
.pub-medias-mosaique.pub-medias-9 .pub-media:first-child,
.pub-medias-mosaique.pub-medias-10 .pub-media:first-child { grid-column: span 8; grid-row: span 2; }
.pub-medias-mosaique.pub-medias-8 .pub-media:nth-child(n+2),
.pub-medias-mosaique.pub-medias-9 .pub-media:nth-child(n+2),
.pub-medias-mosaique.pub-medias-10 .pub-media:nth-child(n+2) { grid-column: span 4; }
.pub-medias-mosaique.pub-medias-8 { grid-template-rows: repeat(4, 1fr); aspect-ratio: 3 / 4; }
.pub-medias-mosaique.pub-medias-8 .pub-media:nth-child(n+7) { grid-column: span 6; }
.pub-medias-mosaique.pub-medias-9 { grid-template-rows: repeat(4, 1fr); aspect-ratio: 3 / 4; }
.pub-medias-mosaique.pub-medias-10 { grid-template-rows: 4fr 4fr 3fr 4fr; aspect-ratio: 12 / 15; }
.pub-medias-mosaique.pub-medias-10 .pub-media:nth-child(n+4):nth-child(-n+7) { grid-column: span 3; }
.stats-periodes { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.stats-totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stats-total { margin: 0 !important; display: grid; gap: 2px; }
.stats-total b { font-family: var(--font-title); font-size: 30px; line-height: 1.1; }
.stats-total small { color: var(--faint); font-size: 12px; }
.stats-barres { display: flex; align-items: flex-end; gap: 2px; height: 160px; padding-top: 6px; }
.stats-barre { flex: 1; min-width: 2px; height: max(2px, var(--h)); background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.stats-barre:hover { opacity: 1; }
.stats-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.stats-colonnes > .section { margin: 0; }
.stats-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stats-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.stats-liste li span { overflow-wrap: anywhere; }
.soutenir { max-width: 680px; }
.soutenir-texte p { font-size: 15.5px; line-height: 1.6; }
.soutenir-bouton { margin: 18px 0 6px; }
.soutenir-bouton .btn { font-size: 16px; padding: 11px 22px; }
.ident { --t: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: 6px; padding: 0 4px;
background: color-mix(in srgb, var(--t) 14%, transparent); color: color-mix(in srgb, var(--t) 72%, var(--ink)); }
.ident:hover { background: color-mix(in srgb, var(--t) 24%, transparent); }
.ident-personnage { --t: #3f6b4e; }
.ident-univers { --t: #44607e; }
.ident-fiction { --t: #a0723a; }
.ident-nu { font-weight: 600; }
.pub-avec a { color: inherit; font-weight: 600; text-decoration: none; }
.pub-avec a:hover { text-decoration: underline; }
.pub-sur-la-photo { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.pub-sur-la-photo .ico { width: 16px; height: 16px; }
.comp-identifier { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: none;
color: var(--accent-ink); font: 700 17px var(--font-ui); cursor: pointer; flex: none; }
.comp-identifier:hover { border-color: var(--accent); }
.ident-liste { position: absolute; z-index: 40; width: min(300px, calc(100vw - 16px)); max-height: 320px; overflow-y: auto;
background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 30px var(--noir-14); padding: 6px; }
.ident-liste-groupe { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 6px 8px 2px; }
.ident-liste-ligne { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px;
background: none; color: var(--ink); font: 14px var(--font-ui); text-align: left; cursor: pointer; }
.ident-liste-ligne:hover, .ident-liste-ligne[aria-selected='true'] { background: var(--accent-soft); }
.ident-liste-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ident-liste-ligne small { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.ident-pastille { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--accent);
color: var(--blanc); font-size: 12px; font-weight: 600; }
.ident-sorte-joueur .ident-pastille { border-radius: 50%; }
.ident-sorte-personnage .ident-pastille { background: var(--ident-personnage); }
.ident-sorte-fiction .ident-pastille { background: var(--ident-fiction); }
.ident-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ident-ligne:last-of-type { border-bottom: 0; }
.ident-ligne-actes { display: flex; gap: 6px; }
.pub-sur-profil { color: var(--faint); font-weight: 400; }
.comp-erreur.comp-envoye { color: var(--accent-ink); }
.pf-envoye { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; }
.pf-envoye .ico { width: 18px; height: 18px; }
.pf-a-valider { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.pf-a-valider h3 { margin: 0 0 4px; font-size: 16px; }
.pf-a-valider > .mine { margin: 0 0 10px; }
.pf-a-valider-pub { padding: 12px 0; border-top: 1px solid var(--line); }
.pf-a-valider-qui { margin: 0 0 6px; }
.pf-a-valider-actes { display: flex; gap: 8px; margin-top: 10px; }
@media (min-width: 1200px) {
.accueil-cote { position: sticky; top: 16px; max-height: calc(100dvh - 100px); overflow-y: auto;
overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 4px; }
}
.scene-carte-couverture { display: block; margin: -14px -16px 12px; border-radius: 15px 15px 0 0; overflow: hidden; background: var(--surface-2); }
.scene-carte-couverture img { display: block; width: 100%; object-fit: cover; }
.scene-carte-tete { align-items: center; }
.scene-carte-univers { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; flex: 1; min-width: 0; margin: 0;
color: var(--faint); font-size: 12.5px; }
.scene-carte-univers a { color: var(--faint); text-decoration: none; }
.scene-carte-univers a:hover { color: var(--muted); text-decoration: underline; }
.scene-carte-univers-nom { font-weight: 600; }
.scene-carte-ecusson { display: inline-flex; flex: none; }
.scene-carte-ecu { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; object-fit: cover; }
.scene-carte-tete .carte-menu > summary { width: 34px; height: 34px; }
.scene-carte-qui { display: flex; align-items: center; gap: 12px; margin-top: 8px; min-width: 0; }
.scene-carte-visages { display: flex; flex: none; }
.scene-carte-visages .face { width: 38px; height: 38px; font-size: 13px; border: 2px solid var(--surface); margin-left: -10px; }
.scene-carte-visages .face:first-child { margin-left: 0; }
.scene-carte-plus { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.scene-carte-plus-etroit { display: none; }
.scene-carte-noms { display: grid; gap: 1px; min-width: 0; }
.scene-carte-noms b { color: var(--ink); font-size: 14.5px; font-weight: 650; overflow-wrap: anywhere; }
.scene-carte-ou { color: var(--faint); font-size: 12.5px; }
.scene-carte-ou a { color: var(--accent-ink); text-decoration: none; }
.scene-carte-ou a:hover { text-decoration: underline; }
.scene-carte-ou .pub-quand { color: var(--faint); }
.etiq.scene-carte-tw { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.scene-carte-extrait { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pub-bilan-fenetre .scene-carte-bilan { margin-right: auto; color: var(--muted); font-size: 13px; min-width: 0; }
.scene-carte-nb { color: var(--muted); text-decoration: none; }
.scene-carte-nb:hover { color: var(--ink); text-decoration: underline; }
.scene-carte-dernier b { color: var(--ink); font-weight: 600; }
.scene-couverture-reglage { margin-top: 12px; }
.scene-couverture-reglage > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.scene-couverture-apercu { display: block; width: 100%; max-width: 420px; object-fit: cover; border-radius: 10px; }
@media (max-width: 720px) {
.scene-carte-couverture { margin: -12px -12px 12px; border-radius: 13px 13px 0 0; }
}
@media (max-width: 560px) {
.scene-carte-couverture { margin-left: -16px; margin-right: -16px; border-radius: 0; }
.scene-carte-visage-large, .scene-carte-plus-large { display: none !important; }
.scene-carte-plus-etroit { display: grid; }
}
.scene-choix { margin: 6px 0 4px; }
.scene-choix .chip { display: inline-flex; align-items: baseline; gap: 5px; min-height: 36px; padding: 7px 13px; font-size: 13px; }
.scene-choix .chip small { font-size: 11px; opacity: .75; }
.scene-description-champ { resize: vertical; min-height: 0; }
.scene-tri { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px;
background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; line-height: 1.45; }
.scene-tri.scene-tri-hors { background: var(--surface-2); color: var(--muted); }
.composer .scene-tri { margin: 6px 0 0; }
.compteur-mots.compteur-tri-ok { color: var(--en-ligne-texte); font-weight: 600; }
.scene-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.etiq.scene-longueur { background: var(--accent-soft); color: var(--accent-ink); }
.etiq.scene-type { background: var(--surface-3); color: var(--ink); }
.scene-description { margin: 0 0 10px; color: var(--muted); font-size: 15px; line-height: 1.5;
font-style: italic; overflow-wrap: anywhere; }
.scene-carte-description { font-style: italic; }
.scene-modifier { margin-top: 12px; }
.scene-modifier > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.scene-modifier-form { display: grid; gap: 2px; padding: 4px 0 10px; }
.scene-modifier-form .btn { justify-self: start; margin-top: 10px; }
.scene-modifier .scene-avertir-reglage, .scene-modifier .scene-couverture-reglage { margin-left: 14px; }
.tri-types { margin-top: 6px; }
@media (max-width: 480px) {
.scene-longueur-detail { display: none; }
.scene-modifier .scene-avertir-reglage, .scene-modifier .scene-couverture-reglage { margin-left: 0; }
.scene-choix .chip { padding: 7px 11px; }
}
.scene-tete { position: relative; margin-bottom: 14px; }
.scene-tete h1 { margin: 2px 0 6px; overflow-wrap: anywhere; }
.scene-tete-ariane { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; max-width: 100%; margin: 0 0 6px;
color: var(--faint); font-size: 12.5px; }
.scene-tete-ariane a { color: inherit; text-decoration: none; }
.scene-tete-ariane a:hover { text-decoration: underline; }
.scene-tete-univers { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.scene-tete-ecu { width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; object-fit: cover; }
.scene-tete-couverture { position: relative; margin: -14px -16px 12px; border-radius: 15px 15px 0 0; overflow: clip;
background: var(--surface-2); display: flex; flex-direction: column; justify-content: flex-end; }
.scene-tete-couverture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene-tete-couverture::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, var(--noir-62)); }
.scene-tete-couverture .scene-tete-ariane { position: absolute; z-index: 1; left: 14px; top: 12px; margin: 0; padding: 3px 10px 3px 4px;
border-radius: var(--rayon-pilule); background: var(--noir-40); color: var(--sur-bandeau); }
.scene-tete-couverture h1 { position: relative; z-index: 1; margin: 0; padding: 0 18px 14px; color: var(--sur-bandeau); font-size: 28px;
text-shadow: 0 1px 8px var(--noir-45); }
.scene-tete .scene-etiquettes { margin: 2px 0 8px; }
.scene-tete .scene-description { margin: 0 0 12px; }
.scene-tete-qui { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scene-tete-personnes { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.scene-tete-visages { display: flex; flex: none; }
.scene-tete-visage { width: 38px; height: 38px; font-size: 13px; border: 2px solid var(--surface); margin-left: -10px; object-fit: cover; }
.scene-tete-visage:first-child { margin-left: 0; }
.scene-tete-attendu { opacity: .45; }
.scene-tete-plus { background: var(--surface-2); color: var(--muted); font-size: 12px; }
.scene-tete-noms { display: grid; gap: 1px; min-width: 0; font-size: 13.5px; }
.scene-tete-noms b { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.scene-tete-noms small { color: var(--faint); font-size: 12.5px; }
.scene-tete-attente a { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.scene-tete-attente a:hover { text-decoration: underline; }
.scene-tete-absence .tag { margin-left: 2px; }
.scene-tete-actes { display: flex; gap: 8px; margin-left: auto; }
.scene-tete-bouton { min-height: 36px; border-radius: var(--rayon-pilule); }
.scene-tete-rond { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-strong);
color: var(--muted); text-decoration: none; }
.scene-tete-rond:hover { color: var(--ink); background: var(--surface-2); }
.scene-tete-repondre .ico { width: 16px; height: 16px; }
.scene-tete-infos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px -16px 0; padding: 9px 16px 0;
border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }
.scene-tete-infos b { color: var(--ink); font-weight: 600; }
.scene-reglages { margin-bottom: 6px; }
.scene-reglages > details, .scene-reglages > form, .scene-reglages > p { margin-top: 8px; }
.scene-taguer > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.turn.scene-reponse { padding: 14px 16px 12px; border-top: 1px solid var(--line); margin-top: 14px; }
.turn.scene-reponse:first-of-type { padding-top: 14px; }
.scene-reponse-tete { align-items: center; }
.scene-reponse-tete:has(> .pub-heure) { align-items: flex-start; }
.scene-reponse-visage { position: relative; flex: none; }
.scene-reponse-portrait { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; font-size: 15px; }
.scene-reponse-portrait .pub-initiales { font-size: 16px; }
.scene-reponse-joueur { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px;
border: 2px solid var(--surface); border-radius: 50%; overflow: hidden; background: var(--accent); color: var(--sur-accent);
font-size: 8px; font-weight: 700; }
.scene-reponse-joueur img { width: 100%; height: 100%; object-fit: cover; }
.scene-reponse-nom-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.scene-reponse-tete .pub-ligne { color: var(--faint); font-size: 12.5px; }
.scene-reponse-joue { color: var(--faint); }
.scene-reponse-numero { flex: none; color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: .04em;
font-variant-numeric: tabular-nums; }
.scene-reponse > .prose { margin-top: 10px; overflow-wrap: anywhere; }
.scene-reponse > .scene-reponse-corriger { margin-top: 10px; }
.scene-reponse .pub-bilan { margin-top: 12px; }
.scene-citer { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.turn-retire { margin: 14px 0; }
.prose blockquote:has(> p:first-child > a[href*="#tour-"]:only-child),
.ghost blockquote:has(> p:first-child > a[href^="#tour-"]:only-child) {
margin: 0 0 .9em; padding: 6px 12px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0;
background: var(--surface-2); color: var(--muted); font-size: .93em;
}
.prose blockquote > p:first-child > a[href*="#tour-"]:only-child,
.ghost blockquote > p:first-child > a[href^="#tour-"]:only-child {
font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--accent-ink); text-decoration: none;
}
.prose blockquote > p:first-child > a[href*="#tour-"]:only-child:hover { text-decoration: underline; }
.prose blockquote > p:first-child:has(> a[href*="#tour-"]:only-child),
.ghost blockquote > p:first-child:has(> a[href^="#tour-"]:only-child) { margin-bottom: 2px; }
.scene-composeur { margin-top: 18px; padding: 14px 16px 12px; }
.scene-composeur-titre { margin: 0 0 10px; font-size: 15px; }
.scene-composeur .composer { margin: 0; padding: 0; border: 0; background: none; }
.scene-composeur-qui { margin-bottom: 10px; }
.scene-composeur-qui .as { margin: 0; }
.scene-composeur-visage[hidden] { display: none; }
.scene-composeur-portrait { object-fit: cover; }
.scene-composeur .comp-pied { margin-top: 10px; justify-content: flex-start; }
.scene-composeur .comp-pied .btn-main { margin-left: auto; }
@media (max-width: 720px) {
.scene-tete-couverture { margin: -12px -12px 12px; border-radius: 13px 13px 0 0; }
.scene-tete-infos { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
.turn.scene-reponse { padding: 12px 12px 10px; }
}
@media (max-width: 560px) {
.scene-composeur { margin-left: calc(-1 * var(--marge)); margin-right: calc(-1 * var(--marge));
border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
.turn.scene-reponse { padding-left: 16px; padding-right: 16px; margin-top: 8px; }
.scene-tete-couverture { margin-left: -16px; margin-right: -16px; border-radius: 0; }
.scene-tete-couverture h1 { font-size: 23px; }
.scene-tete-infos { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.scene-tete-noms b, .scene-tete-absence, .scene-tete-ouverte { display: none; }
.scene-tete-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.scene-tete-repondre { width: 36px; height: 36px; padding: 0; }
.scene-reponse-portrait { width: 42px; height: 42px; }
}
.etiq.scene-evenement { background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.etiq.scene-evenement:hover { text-decoration: underline; }
.scene-evenement-choix { margin: 2px 0 6px; padding: 8px 12px 4px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0;
background: var(--surface-2); }
.scene-evenement-choix .lab { margin-top: 0; }
.scene-evenement-choix .mine { margin: 2px 0 6px; }
@supports selector(:has(*)) {
.scene-evenement-choix { display: none; }
form:has(input[name="type"][value="evenement"]:checked) .scene-evenement-choix { display: block; }
}
.evt-form { display: grid; gap: 2px; padding: 4px 0 6px; }
.evt-form .field { min-width: 0; }
.evt-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.evt-dates .field { flex: 1 1 150px; width: auto; }
.evt-au { color: var(--muted); font-size: 13px; }
.evt-annee { max-width: 120px; }
.evt-quand, .quand-histoire { display: grid; gap: 2px; }
@supports selector(:has(*)) {
.evt-quand-champ { display: none; }
.quand-histoire:has(input[name="quand_sorte"][value="date"]:checked) .evt-quand-date,
.quand-histoire:has(input[name="quand_sorte"][value="periode"]:checked) .evt-quand-periode,
.quand-histoire:has(input[name="quand_sorte"][value="mois"]:checked) .evt-quand-mois,
.quand-histoire:has(input[name="quand_sorte"][value="annee"]:checked) .evt-quand-annee,
.quand-histoire:has(input[name="quand_sorte"][value="autre"]:checked) .evt-quand-autre { display: block; }
.quand-histoire:has(input[name="quand_sorte"]:checked:not([value=""])):not(:has(input[name="quand_sorte"][value="autre"]:checked)) .evt-quand-moment { display: block; }
}
.evt-form-pied { display: flex; justify-content: flex-end; margin-top: 12px; }
.evt-image-apercu { display: block; width: 100%; max-width: 420px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.evt-proposer > summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 600; }
.evt-tete { padding-bottom: 0; }
.evt-infos { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.evt-infos span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.evt-infos b { color: var(--ink); font-weight: 600; }
.evt-infos a { color: inherit; text-decoration: none; }
.evt-infos a:hover b { text-decoration: underline; }
.evt-description { margin: 0 0 12px; color: var(--muted); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-line; }
.evt-gestes { margin: 0 0 12px; }
.evt-jeux { margin-top: 14px; }
.evt-jeux > .sub { margin: 4px 0 0; }
.evt-motif { overflow-wrap: anywhere; }
p.evt-motif { margin: 4px 0; color: var(--warn); font-size: 13.5px; }
.evt-modifier { margin-top: 0; }
.evt-annuler { margin: 4px 0 10px; }
.evt-liste { display: grid; gap: 10px; }
.evt-carte { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); min-width: 0; }
.evt-carte-image { flex: none; width: 132px; border-radius: 10px; overflow: hidden; background: var(--surface-2); align-self: flex-start; }
.evt-carte-image img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.evt-carte-corps { flex: 1; min-width: 0; }
.evt-carte-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.evt-carte-titre a { color: var(--ink); font-weight: 650; text-decoration: none; }
.evt-carte-titre a:hover { text-decoration: underline; }
.evt-carte .evt-infos { margin-bottom: 4px; }
.evt-carte .mine { margin: 2px 0 0; }
.evt-trancher { margin-top: 8px; }
.evt-trancher > summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; color: var(--accent-ink); font-size: 13.5px; }
@media (max-width: 560px) {
.evt-carte { flex-direction: column; padding: 12px; }
.evt-carte-image { width: 100%; }
.evt-dates .field { flex-basis: 100%; }
}
.evta-album { margin-top: 14px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); min-width: 0; }
.evta-tete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; margin-bottom: 14px; }
.evta-tete-texte { flex: 1 1 220px; min-width: 0; }
.evta-tete h2 { margin: 0; font-family: var(--font-title); font-size: 20px; line-height: 1.25; overflow-wrap: anywhere; }
.evta-question { margin: 3px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.evta-sorte { margin: 2px 0 0; color: var(--faint); font-size: 12.5px; }
.evta-ajouter-bouton { margin-left: auto; }
.evta-raison { margin: -6px 0 12px; }
.evta-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; align-items: start; }
.evta-carte, .evta-ajout-carte { margin: 10px 10px 0 0; }
.evta-grille > .evta-ajout-carte { align-self: stretch; aspect-ratio: auto; min-height: 200px; }
.evta-carte { position: relative; min-width: 0; }
.evta-feuille { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--line-strong); }
.evta-feuille-1 { transform: translate(5px, -5px); opacity: .8; }
.evta-feuille-2 { transform: translate(10px, -10px); opacity: .5; }
.evta-carrousel { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.evta-carrousel:not([data-carrousel]) .evta-piste { overflow: visible; }
.evta-piste { align-items: stretch; }
.evta-diapo { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--surface-2); }
.evta-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.evta-photo > a, .evta-photo img { display: block; width: 100%; height: 100%; }
.evta-photo img { object-fit: cover; }
.evta-mots { box-sizing: border-box; display: grid; place-items: center; height: 100%; margin: 0; padding: 16px;
border: 0; background: var(--accent-soft); color: var(--accent-ink); text-align: center; overflow: hidden; }
.evta-mots p { margin: 0; font-family: var(--font-title); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.evta-mots p::before { content: "« "; }
.evta-mots p::after { content: " »"; }
.evta-masquee { display: grid; place-items: center; height: 100%; padding: 12px; color: var(--muted); font-size: 12.5px; text-align: center; }
.evta-bas { display: grid; gap: 4px; padding: 8px 10px; flex: 1; min-width: 0; }
.evta-perso { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.evta-perso > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evta-visage { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
object-fit: cover; color: var(--sur-accent); font-size: 9.5px; font-weight: 600; }
.evta-legende { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere;
min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evta-actes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; }
.evta-actes .evta-menu { margin-left: auto; }
.evta-actes .reacs { margin: 0; gap: 4px; min-width: 0; }
.evta-actes .reac, .evta-actes .reacs-palette > summary { min-height: 26px; padding: 2px 7px; font-size: 12px; }
.evta-menu > summary { width: 32px; height: 32px; }
.evta-actes .reacs:has(.reacs-palette[open]), .evta-actes .reacs-palette[open], .evta-actes .evta-menu[open] { flex-basis: 100%; }
.evta-actes .reacs-choix { position: static; flex-wrap: wrap; margin-top: 4px; box-shadow: none; border-radius: var(--rayon-s); }
.evta-actes .evta-menu[open] > summary { margin-left: auto; }
.evta-actes .carte-menu-liste { position: static; min-width: 0; margin-top: 4px; box-shadow: none; }
.evta-commandes { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 4 / 5; pointer-events: none; }
.evta-commandes .pub-carrousel-fleche { width: 32px; height: 32px; pointer-events: auto; }
.evta-commandes .pub-carrousel-prec { left: 6px; }
.evta-commandes .pub-carrousel-suiv { right: 6px; }
.evta-commandes .pub-carrousel-points { bottom: 8px; padding: 4px 7px; }
.evta-commandes .pub-carrousel-points span { width: 6px; height: 6px; }
.evta-compte { position: absolute; top: 8px; right: 8px; padding: 1px 8px; border-radius: var(--rayon-pilule);
background: var(--noir-55); color: var(--blanc); font-size: 11.5px; line-height: 1.6; }
.evta-ajout-carte { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 12px; border: 2px dashed var(--line-strong);
border-radius: 12px; color: var(--muted); font-size: 13.5px; text-align: center; text-decoration: none; }
.evta-ajout-carte b { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; color: var(--ink); font-size: 15px; }
.evta-ajout-carte:hover { border-color: var(--accent); color: var(--ink); }
.evta-ajouter { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--surface); }
.evta-ajouter h3 { margin: 0 0 4px; font-size: 16px; overflow-wrap: anywhere; }
.evta-form { display: grid; gap: 2px; min-width: 0; }
.evta-form .field { min-width: 0; }
.evta-form-pied { gap: 8px; }
.evta-regler > summary { font-weight: 600; }
.evta-lignes { list-style: none; margin: 0 0 6px; padding: 0; }
.evta-ligne { padding: 8px 0; border-top: 1px solid var(--line); }
.evta-ligne:first-child { border-top: 0; }
.evta-ligne-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.evta-ligne-tete b { overflow-wrap: anywhere; }
.evta-ligne-tete small { color: var(--faint); }
.evta-ligne-gestes { display: inline-flex; gap: 4px; margin-left: auto; }
.evta-ligne-gestes form { margin: 0; }
.evta-icone { display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; }
.evta-ligne-modifier > summary, .evta-nouvel-album > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
color: var(--accent-ink); font-size: 13.5px; cursor: pointer; }
.evta-supprimer { margin: 6px 0 4px; }
.evta-proposition { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.evta-proposition legend { padding: 0; }
.evta-proposition-ligne { display: grid; gap: 2px; margin-top: 8px; padding: 6px 12px 10px; border-radius: 10px; background: var(--surface-2); }
.evta-a-trancher { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0 6px; overflow-wrap: anywhere; }
.pub-album-evt .pub-titre { margin: 10px 0 8px; }
.evta-fil-apercu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; text-decoration: none; }
.evta-fil-tuile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: var(--surface-2); }
.evta-fil-tuile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.evta-fil-mots { display: grid; place-items: center; padding: 6px; background: var(--accent-soft); color: var(--accent-ink);
font-family: var(--font-title); font-size: 12.5px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.evta-fil-plus b { position: absolute; inset: 0; display: grid; place-items: center; background: var(--noir-45);
color: var(--blanc); font-size: 18px; font-weight: 600; }
.evta-fil-qui { margin: 8px 0 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.evta-fil-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
.evta-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
}
@media (max-width: 560px) {
.evta-album { padding: 12px; }
.evta-ajouter-bouton { margin-left: 0; }
.evta-bas { padding: 7px 8px; }
.evta-mots p { font-size: 14px; }
.evta-ligne-modifier > summary, .evta-nouvel-album > summary { min-height: 44px; }
.evta-actes .reac, .evta-actes .reacs-palette > summary { min-height: 32px; }
}
.turn.scene-reponse.scene-intervention {
border-top-color: transparent;
border-left: 3px solid var(--accent);
background: color-mix(in oklab, var(--accent) 9%, var(--surface));
}
.scene-intervention .scene-reponse-portrait { box-shadow: 0 0 0 2px var(--accent); }
.scene-intervention .pub-nom { color: var(--accent-ink); }
.scene-intervention-etiquette { background: var(--accent); color: var(--sur-accent); font-weight: 600; }
.scene-intervention > .prose { font-style: italic; }
.scene-reponse-gestes { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 12px;
margin-left: auto; min-width: 0; }
.scene-commenter { white-space: nowrap; }
.scene-reponse > .scene-commentaires { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.scene-reponse > .scene-commentaires[hidden] { display: none; }
.scene-intervention > .scene-commentaires { border-top-color: color-mix(in oklab, var(--accent) 25%, var(--line)); }
.scene-sans-personnage p { margin: 0 0 8px; }
.scene-sans-personnage p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
.turn.scene-reponse.scene-intervention { border-left-width: 3px; }
.scene-reponse-gestes { gap: 4px 10px; }
.scene-reponse > .scene-commentaires { margin-left: -4px; margin-right: -4px; }
}
.evta-carte > .evta-carrousel { border-radius: 12px 12px 0 0; }
.evta-reactions { display: flex; align-items: center; min-height: 40px; padding: 5px 8px;
border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--surface-2); min-width: 0; }
.evta-reactions .reacs { margin: 0; gap: 4px; min-width: 0; }
.evta-reactions .reac, .evta-reactions .reacs-palette > summary { min-height: 28px; padding: 2px 7px; font-size: 12px; }
.evta-reactions .reacs:has(.reacs-palette[open]), .evta-reactions .reacs-palette[open] { flex-basis: 100%; }
.evta-reactions .reacs-choix { position: static; flex-wrap: wrap; margin-top: 4px; box-shadow: none; border-radius: var(--rayon-s); }
.evta-actes { flex-wrap: wrap; }
.evta-actes > .evta-perso { flex: 1 1 0; }
.evta-modifier-qui { margin: 0 0 8px; }
.evta-modifier-photo { display: flex; align-items: flex-start; gap: 12px; min-width: 0; margin-top: 6px; }
.evta-modifier-apercu { flex: none; width: 88px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px; background: var(--surface-2); }
.evta-modifier-champ { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; }
.evta-modifier-champ .mine { margin: 2px 0 0; }
@media (max-width: 560px) {
.evta-reactions { padding: 5px 6px; }
.evta-reactions .reac, .evta-reactions .reacs-palette > summary { min-height: 32px; }
.evta-modifier-apercu { width: 72px; }
}
.pub-bilan-fenetre > .reacs { margin: 0 auto 0 0; }
.pub-bilan-fenetre > .reacs:has(+ .scene-carte-bilan) { margin-right: 0; }
.carte-pied:has(> .reacs) { flex-wrap: wrap; gap: 4px 6px; }
.carte-pied > .reacs { margin: 0 auto 0 0; }
.carte-pied > .reacs ~ .acte.principal { margin-left: 0; }
.evta-fil-pied { align-items: center; }
.evta-fil-pied > .reacs { margin: 0 auto 0 0; }
.nouvelle-gestes > .reacs { margin: 0; }
.fic-actes > .reacs { margin: 0; }
@media (max-width: 560px) {
.carte-pied > .reacs, .evta-fil-pied > .reacs { flex-basis: 100%; }
.carte-pied > .reacs ~ .acte:not(.principal) { margin-left: 0; }
.carte-pied > .reacs ~ .acte.principal { margin-left: auto; }
}
.etiq.etiq-pnj { background: var(--accent-soft); color: var(--accent-ink); }
.etiq.etiq-univers { background: color-mix(in oklab, var(--accent) 18%, var(--surface)); color: var(--accent-ink); }
.famille-phrase { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 8px 12px;
border-radius: var(--rayon); background: var(--accent-soft); color: var(--accent-ink); font-size: 13.5px; }
.famille-phrase[hidden] { display: none; }
.famille-phrase .ico { flex: none; margin-top: 2px; }
.pnj-nature { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.pnj-nature-choix { padding: 6px 14px; border-radius: var(--rayon-pilule); border: 1px solid var(--line-strong);
color: var(--ink); font-size: 13.5px; text-decoration: none; }
.pnj-nature-choix[aria-current='page'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pnj-form .profil-images { margin-top: 6px; }
.pnj-form-envoi { margin: 16px 0 0; text-align: right; }
.pnj-entourage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pnj-entourage-carte { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px;
border-radius: var(--rayon-l); background: var(--surface-2); color: var(--ink); text-decoration: none; }
a.pnj-entourage-carte:hover { background: var(--accent-soft); }
.pnj-entourage-photo.face { width: 36px; height: 36px; font-size: 12px; }
.pnj-entourage-qui { display: grid; min-width: 0; }
.pnj-entourage-qui b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnj-entourage-qui small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnj-entourage-ajout { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 14px;
border: 2px dashed var(--line-strong); border-radius: var(--rayon-l); color: var(--muted); font-size: 13.5px; text-decoration: none; }
.pnj-entourage-ajout:hover { border-color: var(--accent); color: var(--accent-ink); }
.pnj-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.pnj-lien { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 3px;
border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--ink); font-size: 13px; text-decoration: none; }
.pnj-lien > a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.pnj-lien em { font-style: normal; color: var(--faint); font-size: 11.5px; }
.pnj-lien .etiq { padding: 1px 7px; font-size: 10.5px; }
.pnj-lien-photo.face { width: 24px; height: 24px; font-size: 10px; }
.pnj-lien-retirer { display: inline; margin: 0; }
.pnj-lien-retirer button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; }
.pnj-lien-retirer button:hover { background: var(--line); color: var(--ink); }
.pnj-lien-retirer .ico { width: 10px; height: 10px; }
.pnj-gestes { display: grid; gap: 8px; margin-top: 12px; }
.pnj-cite { margin: 0; font-size: 14px; }
.pnj-voix-photo.crest { border-radius: 50%; object-fit: cover; }
.pnj-voix .portee-option { padding: 8px 10px; }
.pnj-voix-photo.crest { width: 28px; height: 28px; font-size: 11px; display: inline-grid; vertical-align: middle; margin-right: 6px; }
.av-image img { max-width: 100%; border-radius: var(--rayon); margin-top: 8px; }
.mention.mention-pnj { text-decoration: none; }
.pnj-bulle { position: absolute; z-index: 40; display: flex; gap: 10px; align-items: center; width: 260px; max-width: calc(100vw - 32px);
padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--rayon-l); background: var(--surface);
color: var(--ink); font: 13px/1.4 var(--font-ui); box-shadow: 0 10px 24px var(--noir-18); pointer-events: none; }
.pnj-bulle-photo.face { width: 40px; height: 40px; font-size: 13px; background: var(--accent); }
img.pnj-bulle-photo { object-fit: cover; }
.pnj-bulle-corps { display: grid; gap: 2px; min-width: 0; }
.pnj-bulle-corps .etiq { justify-self: start; padding: 1px 7px; font-size: 10.5px; }
.pnj-bulle-corps small { color: var(--muted); }
@media (max-width: 560px) {
.pnj-entourage { grid-template-columns: minmax(0, 1fr); }
.pnj-form-envoi { text-align: left; }
}
.lieu-etiqs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.etiq.lieu-etiq-archive { background: var(--surface-2); color: var(--faint); border: 1px dashed var(--line-strong); }
.etiq.lieu-etiq-ambiance { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.etiq.lieu-etiq-attente { background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.lieu-logo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--rayon-l);
object-fit: cover; background: color-mix(in oklab, var(--teinte, var(--accent)) 22%, var(--surface-2));
color: var(--accent-ink); font: 600 22px/1 var(--font-title); }
.lieu-logo.lieu-logo-petit { width: 36px; height: 36px; border-radius: var(--rayon); font-size: 14px; }
.lieu-tete-bloc { margin: 0 0 6px; }
.lieu-tete { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: -36px 0 0 16px; }
.lieu-tete > .lieu-logo { width: 72px; height: 72px; border: 3px solid var(--paper); }
.lieu-tete-texte { order: 3; flex: 1 0 100%; min-width: 0; margin-left: -16px; }
.pf-photo.lieu-logo-tete { border-radius: var(--rayon-l); font: 600 40px/1 var(--font-title); color: var(--accent-ink);
background: color-mix(in oklab, var(--teinte, var(--accent)) 22%, var(--surface-2)); }
.lieu-tete-texte h1 { margin: 0; font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
.lieu-tete-texte .mine { margin: 2px 0 0; }
.lieu-tete-geste { order: 2; flex: none; margin-left: auto; }
.lieu-archive-note p { margin: 0; }
.lieu-colonnes > .pf-principal { display: grid; gap: 16px; min-width: 0; align-content: start; }
.lieu-colonnes > .pf-principal > .section { margin: 0; }
.lieu-description { margin: 0; }
@media (min-width: 900px) {
.pf-colonnes.lieu-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
.lieu-gens { display: grid; gap: 8px; }
.lieu-gens-ligne { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lieu-gens-qui { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; color: var(--ink); text-decoration: none; }
.lieu-gens-qui:hover b { text-decoration: underline; }
.lieu-gens-qui > span { display: grid; min-width: 0; }
.lieu-gens-qui b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lieu-gens-qui small { color: var(--faint); font-size: 12px; }
.lieu-gens-photo.face { width: 34px; height: 34px; font-size: 12px; }
.lieu-role { flex: none; white-space: nowrap; padding: 1px 9px; border-radius: var(--rayon-pilule); background: var(--accent-soft);
color: var(--accent-ink); font-size: 12px; font-style: normal; }
.lieu-gens-geste { flex: none; margin: 0; }
.lieu-gens-geste button:not(.lien-bouton) { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0;
border: 0; border-radius: 50%; background: transparent; color: var(--faint); cursor: pointer; }
.lieu-gens-geste button:not(.lien-bouton):hover { background: var(--line); color: var(--ink); }
.lieu-gens-geste .ico { width: 11px; height: 11px; }
.lieu-gens-qui b .etiq { display: inline-block; margin-left: 4px; vertical-align: 1px; font-weight: 600; }
.lieu-gens-qui:hover b .etiq { text-decoration: none; }
.lieu-gens-reponse { display: flex; gap: 10px; }
@media (max-width: 480px) {
.lieu-gens-ligne:has(.lieu-gens-reponse) { flex-wrap: wrap; }
}
.lieu-scenes { display: grid; gap: 6px; }
.lieu-scene { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--ink);
font-size: 14px; text-decoration: none; }
.lieu-scene:hover span { text-decoration: underline; }
.lieu-scene small { flex: none; color: var(--faint); font-size: 12.5px; }
.lieu-accord { margin-top: 10px; }
.lieu-accord form { margin: 0; }
.lieu-accord .mine { margin: 0 0 6px; }
.lieu-filtres-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.lieu-filtres-form .lab { margin: 0; }
.lieu-filtres-form .field { width: auto; min-width: 0; max-width: 100%; }
.lieu-pilules-champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.lieu-form fieldset > legend.lab { float: left; width: 100%; padding: 0; margin: 14px 0 6px; }
.lieu-form fieldset > legend.lab + * { clear: both; }
.lieu-pilules { display: flex; flex-wrap: wrap; gap: 6px; }
.lieu-pilule { position: relative; display: inline-flex; }
.lieu-pilule input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lieu-pilule span { padding: 6px 12px; border-radius: var(--rayon-pilule); border: 1px solid var(--line-strong);
color: var(--ink); font-size: 13.5px; cursor: pointer; }
.lieu-pilule input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lieu-pilule input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.lieu-form .profil-images { margin-top: 6px; }
.lieu-infos-champ { margin: 0; padding: 0; border: 0; min-width: 0; }
.lieu-infos-lignes { display: grid; gap: 6px; }
.lieu-info-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
.lieu-info-gestes { display: inline-flex; gap: 2px; }
.lieu-info-gestes button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
border-radius: var(--rayon); background: transparent; color: var(--faint); cursor: pointer; }
.lieu-info-gestes button:hover { background: var(--line); color: var(--ink); }
.lieu-info-gestes .ico { width: 11px; height: 11px; }
.lieu-info-ajout { margin: 8px 0 0; }
.lieu-illegal { margin-top: 12px; }
.metier-lignes { display: grid; gap: 10px; }
.metier-ligne { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface-2); }
.metier-ligne-champs, .metier-ligne-role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.metier-ligne-role[hidden] { display: none; }
.metier-ligne-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 0; font-size: 13px; }
.lien-creer-lieu { color: var(--accent-ink); }
.lien-creer-lieu[hidden] { display: none; }
.lieux-de-la-fiche .row a { color: inherit; }
.lieux-de-la-fiche .lieu-gens { margin-top: 6px; }
.espace-lieux { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.espace-lieux .ico { flex: none; margin-top: 3px; }
.scene-tete-lieu { font-style: italic; }
@media (max-width: 560px) {
.lieu-tete { margin-left: 8px; }
.lieu-tete-texte { margin-left: -8px; }
.lieu-tete-texte h1 { font-size: 22px; }
.lieu-info-ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lieu-info-gestes { grid-column: 1 / -1; justify-self: end; }
.metier-ligne-champs, .metier-ligne-role { grid-template-columns: minmax(0, 1fr); }
}
.pf-tete-personnage .pf-photo:not(.lieu-logo-tete) {
width: 120px; height: auto; aspect-ratio: 3 / 4;
border-radius: var(--rayon-l); object-fit: cover;
}
.pf-tete-personnage .pf-photo-boite:has(.pf-photo:not(.lieu-logo-tete)) .pf-photo-modifier { right: -8px; bottom: -8px; }
.fiche-portrait { aspect-ratio: 3 / 4; }
.tel-profil-portrait { width: 60px; height: auto; aspect-ratio: 3 / 4; border-radius: var(--rayon); }
.renc-vignette img { aspect-ratio: 3 / 4; }
.fiche-apercu-portrait .profil-avatar-apercu {
width: 72px; height: auto; aspect-ratio: 3 / 4; border-radius: var(--rayon);
}
.fiche-apercu-portrait .profil-avatar-vide { display: grid; place-items: center; }
.joueur-carte .portrait,
.mess-demande-qui .portrait { border-radius: 50%; object-fit: cover; }
@media (max-width: 720px) {
.pf-tete-personnage .pf-photo:not(.lieu-logo-tete) { width: 90px; height: auto; }
}
.theme-espace {
--paper: var(--th-fond);
--surface: var(--th-blocs);
--surface-2: var(--th-surface-2);
--ink: var(--th-encre-fond);
--muted: var(--th-doux-fond);
--faint: var(--th-doux-fond);
--line: var(--th-trait-fond);
--line-strong: var(--th-trait-fond);
--accent: var(--th-accent);
--accent-brut: var(--th-accent);
--accent-soft: var(--th-accent-doux);
--accent-ink: var(--th-accent-fond);
--sur-accent: var(--th-sur-accent);
background: var(--th-fond);
color: var(--ink);
min-height: 100%;
}
.theme-espace :is(.up-bloc, .up-fiche, .theme-encre-bloc) {
--ink: var(--th-encre);
--muted: var(--th-doux);
--faint: var(--th-doux);
--line: var(--th-trait);
--line-strong: var(--th-trait-fort);
--accent-ink: var(--th-accent-texte);
color: var(--ink);
}
.theme-espace .prose a, .theme-espace .mine a, .theme-espace .up-liens a, .theme-espace .up-fil a { color: var(--accent-ink); }
.up-page { padding-top: 16px; }
.up-couverture { overflow: hidden; }
.up-tete { margin-bottom: 6px; }
.up-logo { border-radius: 26px; object-fit: cover; }
.up-logo.pf-photo-vide { color: var(--sur-photo); }
.up-identite .tagline { margin: 4px 0 0; }
.up-identite .stats { margin-top: 8px; }
.up-identite .rpg-avatars { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
@media (max-width: 720px) {
.up-logo { border-radius: 22px; }
}
.up-corps { display: grid; gap: 16px; margin-top: 18px; min-width: 0; }
.up-corps > .section { margin: 0; }
.up-blocs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) {
.up-blocs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.up-blocs > .up-bloc { grid-column: 1 / -1; }
.up-blocs > .up-bloc.up-moitie { grid-column: auto; }
}
.up-bloc {
min-width: 0; margin: 0; padding: 16px;
background: var(--th-blocs, var(--surface)); border: 1px solid var(--line);
border-radius: var(--th-rayon, var(--rayon-l));
}
.up-corps .up-bloc + .up-bloc, .up-corps .section + .up-bloc { margin-top: 0; }
.up-bloc > h2 { margin: 0 0 10px; font-family: var(--font-title); font-size: 20px; }
.up-membres-seulement {
display: inline-block; margin: -4px 0 10px; padding: 1px 9px; border-radius: var(--rayon-pilule);
background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 600;
}
.up-prose { max-width: 70ch; }
.up-texte-image { margin: 0 0 12px; }
.up-texte-image img { display: block; max-width: 100%; height: auto; border-radius: var(--rayon); }
.up-infos { display: grid; gap: 6px; margin: 0; font-size: 14.5px; }
.up-infos div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 5px; border-bottom: 1px dotted var(--line-strong); }
.up-infos dt { color: var(--muted); }
.up-infos dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.up-carte { margin: 0; }
.up-carte > a { position: relative; display: block; }
.up-carte img, .up-texte-image img { aspect-ratio: auto; object-fit: contain; }
.up-carte img { display: block; width: 100%; height: auto; border-radius: var(--rayon); }
.up-carte-agrandir {
position: absolute; right: 8px; bottom: 8px; padding: 2px 10px; border-radius: var(--rayon-pilule);
background: var(--blanc-75); color: var(--sur-pastille-claire); font-size: 12px;
}
.up-carte figcaption { margin-top: 10px; font-size: 14px; }
.up-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 12px; }
@media (max-width: 520px) { .up-album { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.up-fiche { display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; color: var(--ink); text-decoration: none; }
a.up-fiche:hover .up-fiche-nom { text-decoration: underline; }
.up-fiche-photo {
display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
border-radius: var(--rayon); background: var(--surface-2);
}
.up-fiche-photo img { width: 100%; height: 100%; object-fit: cover; }
.up-fiche-initiales { color: var(--sur-photo); font-family: var(--font-title); font-size: 28px; }
.up-fiche-nom { margin-top: 4px; font-family: var(--font-title); font-size: 15px; overflow-wrap: anywhere; }
.up-fiche-ligne { color: var(--muted); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.gabarit-arche .up-fiche-photo { border-radius: 999px 999px 10px 10px; border: 3px solid var(--th-blocs, var(--surface)); box-shadow: 0 0 0 1px var(--line); }
.gabarit-polaroid .up-fiche-photo {
border-radius: 3px; border: 6px solid var(--polaroid-cadre); border-bottom-width: 22px;
box-shadow: 0 2px 8px var(--noir-18); background-color: var(--polaroid-fond);
}
.gabarit-polaroid .up-fiche:nth-child(odd) .up-fiche-photo { transform: rotate(-1.2deg); }
.gabarit-polaroid .up-fiche:nth-child(even) .up-fiche-photo { transform: rotate(1deg); }
.up-filtres .lab { margin-top: 4px; }
.up-fil { list-style: none; margin: 0; padding: 0; }
.up-fil li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px dotted var(--line-strong); font-size: 14px; }
.up-fil li:first-child { border-top: 0; }
.up-fil-icone { flex: none; }
.up-fil li > :is(a, span:not(.up-fil-icone)) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.up-fil time { flex: none; margin-left: auto; color: var(--muted); font-size: 12.5px; }
.up-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.up-liens li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.up-liens a { font-weight: 600; overflow-wrap: anywhere; }
.up-liens small { color: var(--muted); }
.up-places { margin: 0 0 10px; font-weight: 500; }
.up-carte-fiche { display: grid; gap: 18px; }
@media (min-width: 720px) { .up-carte-fiche:has(.up-carte-fiche-photo) { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
.up-carte-fiche-photo img { display: block; width: 100%; max-width: 280px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon-l); }
.up-carte-fiche-album { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.up-carte-fiche h1 { margin: 0; }
.up-compo-section { border: 1px solid var(--line); border-radius: var(--rayon-l); margin-top: 12px; overflow: hidden; }
.up-compo-rangee {
display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0;
border-top: 1px solid var(--line); font-size: 14px;
}
.up-compo-tete { border-top: 0; background: var(--surface-2); font-weight: 600; }
.up-compo-nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.up-compo-nom small { display: block; color: var(--faint); font-weight: 400; font-size: 12.5px; }
.up-compo-masque .up-compo-nom { opacity: .55; }
.up-compo-fixe { color: var(--muted); }
.up-compo-gestes { display: flex; flex: none; gap: 4px; }
.up-compo-geste {
display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink);
font-size: 15px; cursor: pointer; text-decoration: none;
}
.up-compo-geste:disabled { opacity: .35; cursor: default; }
.up-compo-geste .ico { width: 17px; height: 17px; }
.up-compo-retirer { margin: 0; padding: 0 10px 6px; text-align: right; font-size: 12.5px; }
.up-compo-ajouter { margin: 0; padding: 9px 10px; border-top: 1px solid var(--line); font-size: 14px; }
.up-compo-ajouter .ico { width: 15px; height: 15px; }
.up-compo-reglages { padding: 6px 10px 10px; border-top: 1px solid var(--line); font-size: 13.5px; }
.up-compo-reglages > summary { cursor: pointer; color: var(--muted); }
.up-compo-renommer { display: grid; gap: 6px; margin: 8px 0; }
.up-compo-nouvelle { margin-top: 14px; }
.up-compo-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; margin-top: 6px; }
.up-compo-nouvelle .up-compo-ligne { grid-template-columns: minmax(0, 1fr) auto; }
.up-compo-lignes, .up-compo-choix { border: 0; padding: 0; margin: 14px 0 0; min-width: 0; }
.up-compo-annoncer { margin-top: 16px; padding: 10px 12px; border-radius: var(--rayon); background: var(--surface-2); }
.up-compo-image img { border-radius: var(--rayon-s); object-fit: cover; }
.up-compo-ajout { margin-top: 14px; }
.up-compo-ajout > summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.up-catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.up-catalogue-bloc {
display: block; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon);
background: var(--surface-2); color: var(--ink); text-decoration: none;
}
.up-catalogue-bloc:hover { border-color: var(--accent); }
.up-catalogue-bloc b { display: block; font-size: 14px; margin-bottom: 2px; }
.up-catalogue-bloc small { color: var(--muted); font-size: 12.5px; }
.theme-form fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.theme-ambiances-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 6px; }
.theme-ambiance, .theme-gabarit {
position: relative; display: grid; gap: 2px; padding: 8px; border: 2px solid var(--line);
border-radius: var(--rayon); font-size: 13px; cursor: pointer; text-align: center;
}
.theme-ambiance input, .theme-gabarit input { position: absolute; opacity: 0; pointer-events: none; }
.theme-ambiance:has(input:checked), .theme-gabarit:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.theme-ambiance:has(input:focus-visible), .theme-gabarit:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-ambiance-apercu { display: block; height: 34px; border-radius: 6px; margin-bottom: 4px; border: 1px solid var(--line); }
.theme-ambiance small { color: var(--muted); font-size: 11.5px; }
.theme-couleur { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px; border-radius: var(--rayon); background: var(--surface-2); }
.theme-couleur input[type='color'] { flex: none; width: 42px; height: 36px; padding: 2px; border: 2px solid var(--line-strong); border-radius: 8px; background: none; }
.theme-couleur b { display: block; font-size: 13.5px; }
.theme-couleur small { color: var(--muted); font-size: 12px; }
.theme-alerte {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding: 8px 10px;
border-radius: var(--rayon); background: var(--warn-soft); color: var(--warn); font-size: 13.5px;
}
.theme-alerte .ico { width: 16px; height: 16px; }
.theme-gabarits-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.theme-gabarit-forme { display: block; width: 46px; height: 60px; margin: 0 auto 4px; background: linear-gradient(160deg, var(--gabarit-apercu-a), var(--gabarit-apercu-b)); border-radius: 8px; }
.theme-gabarit-arche .theme-gabarit-forme { border-radius: 999px 999px 8px 8px; }
.theme-gabarit-polaroid .theme-gabarit-forme { border-radius: 3px; border: 4px solid var(--polaroid-cadre); border-bottom-width: 12px; }
.theme-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.up-sinscrire .ico, .up-bienvenue-gestes .ico, .joinus-question summary .ico { width: 17px; height: 17px; }
.up-identite .pf-actes { gap: 8px; }
.up-sinscrire-colle { display: none; }
@media (max-width: 720px) {
.up-sinscrire-colle {
display: block; position: sticky; bottom: 12px; z-index: 5; margin: 16px 0 0;
filter: drop-shadow(0 4px 10px var(--noir-22));
}
}
.up-bienvenue { margin: 0; }
.up-bienvenue h2 { margin: 0 0 6px; font-family: var(--font-title); font-size: 20px; }
.up-bienvenue-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.up-bienvenue-fermer { margin: 8px 0 0; font-size: 13px; }
.up-sous-titre { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; font-size: 15px; }
.up-sous-titre .ico { width: 18px; height: 18px; }
.up-question textarea { min-height: 72px; }
.joinus-appel { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.joinus-question { margin: 0 0 12px; }
.joinus-question > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.joinus-entre-nous h2 { display: flex; align-items: center; gap: 8px; }
.joinus-entre-nous h2 .ico { width: 20px; height: 20px; }
.joinus-ecrire { margin: 0 0 16px; }
.joinus-message { padding: 10px 0; border-top: 1px solid var(--line); }
.joinus-reponse { margin-left: 22px; padding-left: 12px; border-left: 2px solid var(--line); border-top: 0; }
.joinus-message-tete { margin: 0 0 4px; font-size: 14px; }
.joinus-message-texte { overflow-wrap: anywhere; line-height: 1.55; }
.joinus-message-gestes { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; font-size: 13px; }
.joinus-message-gestes form { margin: 0; }
.joinus-repondre { margin: 2px 0 10px 22px; font-size: 14px; }
.joinus-repondre > summary { cursor: pointer; color: var(--accent-ink); }
:root {
--largeur-colonne-jeux: 72px;
--largeur-colonne-tablette: 64px;
--largeur-menu-nav: 248px;
--hauteur-entete: 60px;
}
.app {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto;
}
.entete-site { grid-column: 1 / -1; grid-row: 1; }
.app > .scroll { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
.entete-site {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
min-height: var(--hauteur-entete);
padding: 8px var(--marge);
border-bottom: 1px solid var(--entete-trait);
background: var(--entete);
color: var(--sur-entete);
}
.entete-site .wordmark { flex: none; margin-right: auto; }
.entete-site :focus-visible { outline: 2px solid var(--sur-entete); outline-offset: 2px; }
.entete-tiroir,
.entete-bouton {
position: relative;
flex: none;
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--rayon-pilule);
color: var(--sur-entete);
text-decoration: none;
}
.entete-tiroir:hover,
.entete-bouton:hover { background: color-mix(in oklab, var(--sur-entete) 10%, transparent); }
.entete-tiroir .ico,
.entete-bouton .ico { width: 22px; height: 22px; }
.entete-bouton[aria-current='page'] { background: color-mix(in oklab, var(--sur-entete) 16%, transparent); }
.entete-bouton .pastille { top: 0; right: -2px; background: var(--nav-chiffre); color: var(--sur-nav-chiffre); }
.entete-cherche {
position: relative;
flex: 1 1 auto;
min-width: 0;
max-width: 560px;
margin: 0 auto;
}
.entete-cherche input {
width: 100%;
height: 38px;
padding: 0 14px 0 38px;
border: 1px solid color-mix(in oklab, var(--sur-entete) 14%, transparent);
border-radius: var(--rayon-pilule);
background: color-mix(in oklab, var(--sur-entete) 9%, transparent);
color: var(--sur-entete);
font: inherit;
font-size: 14px;
}
.entete-cherche input::placeholder { color: color-mix(in oklab, var(--sur-entete) 62%, transparent); }
.entete-cherche input:focus { outline: 2px solid var(--accent-loreside); outline-offset: 1px; }
.entete-cherche-ico {
position: absolute;
top: 50%;
left: 12px;
width: 17px;
height: 17px;
transform: translateY(-50%);
opacity: .7;
pointer-events: none;
}
.entete-soutenir {
position: relative;
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 14px;
border-radius: var(--rayon-pilule);
background: var(--accent-loreside);
color: var(--sur-accent-loreside);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
}
.entete-soutenir:hover { filter: brightness(1.1); }
.entete-soutenir .ico { width: 16px; height: 16px; }
.entete-theme,
.entete-moi-interrupteur { display: inline-flex; margin: 0; }
.interrupteur-theme {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 60px;
height: 32px;
padding: 0 8px;
border: 0;
border-radius: var(--rayon-pilule);
background: color-mix(in oklab, var(--sur-entete) 10%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sur-entete) 14%, transparent);
color: color-mix(in oklab, var(--sur-entete) 62%, transparent);
cursor: pointer;
}
.interrupteur-theme svg { display: block; width: 14px; height: 14px; }
.interrupteur-curseur {
position: absolute;
top: 4px;
left: 4px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--interrupteur-pastille);
box-shadow: 0 1px 3px var(--noir-25);
color: var(--accent-loreside);
transition: left .2s;
}
.interrupteur-curseur svg { grid-area: 1 / 1; width: 15px; height: 15px; }
.interrupteur-theme[aria-checked='false'] .interrupteur-curseur .dessin-lune,
.interrupteur-theme[aria-checked='true'] .interrupteur-curseur .dessin-soleil { display: none; }
.interrupteur-theme[aria-checked='true'] .interrupteur-curseur { left: 32px; }
.interrupteur-theme:hover { background: color-mix(in oklab, var(--sur-entete) 16%, transparent); }
.entete-moi-liste .interrupteur-theme {
background: var(--surface-2);
box-shadow: inset 0 0 0 1px var(--line-strong);
color: var(--muted);
}
.entete-connexion { color: var(--sur-entete); font-size: 14px; text-decoration: none; white-space: nowrap; }
.entete-inscription {
flex: none;
padding: 8px 14px;
border-radius: var(--rayon-pilule);
background: var(--accent-loreside);
color: var(--sur-accent-loreside);
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.entete-moi { position: relative; flex: none; }
.entete-photo {
display: grid;
place-items: center;
width: 38px;
height: 38px;
overflow: hidden;
border: 2px solid color-mix(in oklab, var(--sur-entete) 24%, transparent);
border-radius: 50%;
background: color-mix(in oklab, var(--sur-entete) 14%, transparent);
color: var(--sur-entete);
font-size: 13px;
font-weight: 600;
list-style: none;
cursor: pointer;
}
.entete-photo::-webkit-details-marker { display: none; }
.entete-photo::marker { content: ''; }
.entete-photo img { width: 100%; height: 100%; object-fit: cover; }
.entete-moi-liste {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 80;
width: min(280px, calc(100vw - 24px));
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: var(--ink);
box-shadow: 0 16px 40px var(--noir-28);
}
.entete-moi-nom { margin: 4px 10px 8px; font-family: var(--font-title); font-size: 16px; }
.entete-moi-liste a {
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 6px 10px;
border-radius: var(--rayon-s);
color: var(--ink);
font-size: 14.5px;
text-decoration: none;
}
.entete-moi-liste a:hover { background: var(--surface-2); }
.entete-moi-liste a[aria-current='page'] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.entete-moi-liste a .ico { width: 18px; height: 18px; color: var(--muted); }
.entete-moi-liste a[href='/deconnexion'] { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 var(--rayon-s) var(--rayon-s); }
.entete-moi-theme {
display: none;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 44px;
padding: 4px 10px;
font-size: 14.5px;
}
.tiroir-fermer,
.tiroir-voile { display: none; }
.colonne-jeux {
display: flex;
flex-direction: column;
align-items: stretch;
min-height: 0;
background: var(--nav-colonne);
color: var(--sur-colonne);
}
.colonne-haut,
.colonne-bas {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 0 8px;
}
.colonne-bas { margin: 0 12px; padding: 8px 0 12px; border-top: 2px solid var(--nav-colonne-trait); }
.colonne-defile {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
scrollbar-width: thin;
padding: 2px 0 8px;
}
.colonne-titre {
margin: 10px 0 6px;
color: var(--nav-colonne-titre);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .08em;
text-align: center;
text-transform: uppercase;
}
.colonne-famille {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.colonne-famille .jeu { position: relative; }
.colonne-famille .jeu.glisse { opacity: .4; }
.jeu-rond {
position: relative;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--nav-rond);
color: var(--sur-colonne);
text-decoration: none;
transition: border-radius .15s;
}
.jeu-rond img,
.jeu-rond .jeu-initiales {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.jeu-rond .jeu-initiales {
display: grid;
place-items: center;
color: var(--sur-photo);
font: 600 16px var(--font-title);
}
.jeu-rond .ico { width: 22px; height: 22px; }
.jeu-rond:focus-visible { outline: 2px solid var(--sur-colonne); outline-offset: 3px; }
.jeu-loreside { background: none; }
.jeu-loreside img { object-fit: contain; }
.jeu-libres .jeu-rond { box-shadow: 0 0 0 3px color-mix(in oklab, var(--sur-colonne) 25%, transparent); }
.jeu-defis .jeu-rond { width: 38px; height: 38px; margin: 4px 0; }
.jeu-admin { background: var(--nav-rond); box-shadow: inset 0 0 0 2px var(--nav-admin); color: var(--nav-admin); }
.jeu-creer { background: var(--accent-loreside); color: var(--sur-accent-loreside); }
.jeu-rond[aria-current]::before {
content: '';
position: absolute;
top: 50%;
left: -13px;
width: 4px;
height: 30px;
border-radius: 0 4px 4px 0;
background: var(--sur-colonne);
transform: translateY(-50%);
}
.jeu-chiffre {
position: absolute;
top: -4px;
right: -5px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border: 2px solid var(--nav-colonne);
border-radius: var(--rayon-pilule);
background: var(--nav-chiffre);
color: var(--sur-nav-chiffre);
font: 600 11px/16px var(--font-ui);
text-align: center;
}
.jeu-point {
position: absolute;
right: -1px;
bottom: -1px;
width: 13px;
height: 13px;
border: 2px solid var(--nav-colonne);
border-radius: 50%;
background: var(--nav-chiffre);
}
.jeu-sablier {
position: absolute;
right: -5px;
bottom: -5px;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 2px solid var(--nav-colonne);
border-radius: 50%;
background: var(--nav-colonne-titre);
color: var(--nav-colonne);
}
.jeu-rond .jeu-sablier .ico { width: 11px; height: 11px; }
.jeu-en-attente .jeu-rond img,
.jeu-en-attente .jeu-rond .jeu-initiales { opacity: .5; filter: grayscale(1); }
.colonne-bulle {
position: fixed;
z-index: 90;
max-width: 260px;
padding: 5px 9px;
border-radius: var(--rayon-s);
background: var(--bandeau);
color: var(--sur-bandeau);
font-size: 12.5px;
font-weight: 600;
box-shadow: 0 6px 16px var(--noir-28);
transform: translateY(-50%);
pointer-events: none;
}
.colonne-bulle[hidden] { display: none; }
.menu-nav {
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 10px 10px 96px;
border-right: 1px solid var(--line);
background: var(--surface);
font-size: 14.5px;
}
.menu-titre {
margin: 2px 0 6px;
padding: 6px 10px 10px;
border-bottom: 1px solid var(--line);
font: 600 16px/1.3 var(--font-title);
overflow-wrap: anywhere;
}
.menu-titre a { color: var(--ink); text-decoration: none; }
.menu-titre small { display: block; margin-top: 2px; color: var(--faint); font: 400 12.5px var(--font-ui); }
.menu-entree {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 40px;
padding: 7px 10px;
border: 0;
border-radius: 9px;
background: none;
color: var(--muted);
font: inherit;
font-weight: 500;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.menu-entree:hover { background: var(--surface-2); color: var(--ink); }
.menu-entree[aria-current='page'] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.menu-entree:focus-visible,
.menu-groupe-titre:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.menu-ico { flex: none; width: 18px; height: 18px; color: var(--accent-ink); }
.menu-nom { min-width: 0; overflow-wrap: anywhere; }
.menu-n {
flex: none;
margin-left: auto;
min-width: 20px;
padding: 0 6px;
border-radius: var(--rayon-pilule);
background: var(--nav-chiffre);
color: var(--sur-nav-chiffre);
font-size: 11px;
font-weight: 600;
line-height: 18px;
text-align: center;
}
.menu-n[hidden] { display: none; }
.menu-quitter { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.menu-groupe { margin-top: 8px; }
.menu-groupe-tete { margin: 0; }
.menu-groupe-titre {
display: flex;
align-items: center;
gap: 7px;
width: 100%;
min-height: 32px;
padding: 4px 10px;
border: 0;
border-radius: var(--rayon-s);
background: none;
color: var(--faint);
font: 600 11.5px var(--font-ui);
letter-spacing: .06em;
text-align: left;
text-transform: uppercase;
cursor: pointer;
}
.menu-groupe-titre:hover { background: var(--surface-2); color: var(--ink); }
.menu-fleche {
flex: none;
width: 7px;
height: 7px;
margin: 0 2px 3px 1px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .15s;
}
.menu-groupe.replie .menu-fleche { margin-bottom: 0; transform: rotate(-45deg); }
.menu-point { display: none; flex: none; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--nav-chiffre); }
.menu-groupe.replie .menu-point { display: block; }
.menu-groupe-corps[hidden] { display: none; }
.menu-rp .menu-groupe-titre,
.menu-rp .menu-ico { color: var(--nav-rp); }
.menu-rp .menu-groupe-corps { margin-left: 8px; border-left: 3px solid var(--nav-rp-trait); }
.menu-hrp .menu-groupe-titre,
.menu-hrp .menu-ico { color: var(--nav-hrp); }
.menu-hrp .menu-groupe-corps { margin-left: 8px; border-left: 3px solid var(--nav-hrp-trait); }
.onglets-liens {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 10px 0 16px;
border-bottom: 1px solid var(--line);
}
.onglets-liens a {
padding: 8px 12px;
color: var(--muted);
font-size: 14px;
text-decoration: none;
}
.onglets-liens a:hover { color: var(--ink); }
.onglets-liens a[aria-current='page'] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
.onglets-n { color: var(--faint); font-weight: 400; }
.a-vous-liste,
.admin-attend { margin: 14px 0 0; padding: 0; list-style: none; }
.a-vous-liste li,
.bloc-cote-a-vous li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.a-vous-liste li:last-child,
.bloc-cote-a-vous li:last-child { border-bottom: 0; }
.admin-phrase { margin: 6px 0 0; font-size: 17px; }
.admin-attend li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.admin-attend-calme { margin-top: 4px; }
.bloc-cote-plus {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--surface-2);
color: var(--muted);
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
}
.compte-exports { margin: 10px 0 0; padding-left: 18px; }
.compte-exports li { margin: 4px 0; }
.famille-liste { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.pf-demandes { margin: 0 0 14px; padding: 10px 12px; border-radius: var(--rayon); background: var(--accent-soft); }
.pf-demandes-titre { margin: 0 0 6px; color: var(--accent-ink); font-weight: 600; }
.pf-gerer-amis,
.pf-tous-succes,
.pf-identifications { margin-top: 12px; }
.pf-gerer-amis > summary,
.pf-tous-succes > summary,
.pf-identifications > summary { color: var(--accent-ink); cursor: pointer; font-weight: 600; }
.pied-site-tenh { margin: 10px 0 0; font-size: 13px; }
.pied-site-tenh a { color: inherit; }
@media (max-width: 599px) {
.entete-site { gap: 4px; padding: 6px 10px; }
.entete-cherche,
.entete-theme,
.entete-connexion,
.entete-inscription { display: none; }
.entete-soutenir { width: 40px; padding: 0; justify-content: center; background: none; color: var(--entete-coeur); }
.entete-soutenir-mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.entete-soutenir .ico { width: 21px; height: 21px; }
.entete-moi-theme { display: flex; }
.tiroir {
position: fixed;
z-index: 72;
top: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: var(--largeur-colonne-tablette) minmax(0, 1fr);
width: min(88vw, 360px);
padding-top: env(safe-area-inset-top, 0px);
background: var(--surface);
box-shadow: 0 0 40px var(--noir-35);
transform: translateX(-104%);
visibility: hidden;
transition: transform .22s ease, visibility 0s linear .22s;
}
.tiroir.ouvert,
.tiroir:target { transform: none; visibility: visible; transition: transform .22s ease; }
.tiroir .colonne-jeux { grid-column: 1; height: 100%; }
.tiroir .menu-nav { grid-column: 2; height: 100%; padding-top: 52px; border-right: 0; }
.tiroir-fermer {
position: absolute;
z-index: 1;
top: calc(env(safe-area-inset-top, 0px) + 6px);
right: 6px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--muted);
}
.tiroir-fermer .ico { width: 20px; height: 20px; }
.tiroir-voile {
position: fixed;
z-index: 71;
inset: 0;
display: block;
background: var(--noir-45);
opacity: 0;
visibility: hidden;
transition: opacity .22s, visibility 0s linear .22s;
}
.tiroir.ouvert + .tiroir-voile,
.tiroir:target + .tiroir-voile { opacity: 1; visibility: visible; transition: opacity .22s; }
.colonne-jeux .jeu-rond { width: 42px; height: 42px; }
.colonne-jeux .jeu-defis .jeu-rond { width: 34px; height: 34px; }
.jeu-rond[aria-current]::before { left: -11px; }
.menu-entree { min-height: 44px; }
.menu-groupe-titre { min-height: 40px; }
}
@media (max-width: 379px) {
.entete-site { gap: 2px; padding: 6px 8px; }
.entete-tiroir,
.entete-bouton,
.entete-soutenir { width: 36px; height: 36px; }
.entete-photo { width: 34px; height: 34px; }
}
@media (min-width: 600px) {
.entete-site { height: var(--hauteur-entete); }
.entete-theme { display: none; }
.entete-site:not(:has(.entete-moi)) .entete-theme { display: inline-flex; }
.entete-moi-theme { display: flex; }
.entete-loupe { display: none; }
.tiroir { display: contents; }
.colonne-jeux { grid-column: 1; grid-row: 2; border-right: 1px solid var(--nav-colonne-trait); }
}
@media (min-width: 600px) and (max-width: 999px) {
.app { grid-template-columns: var(--largeur-colonne-tablette) minmax(0, 1fr); }
.app > .scroll { grid-column: 2; }
.colonne-jeux .jeu-rond { width: 42px; height: 42px; }
.colonne-jeux .jeu-defis .jeu-rond { width: 34px; height: 34px; }
.jeu-rond[aria-current]::before { left: -11px; }
.colonne-jeux { position: relative; z-index: 73; }
.menu-nav {
position: fixed;
z-index: 72;
top: var(--hauteur-entete);
bottom: 0;
left: var(--largeur-colonne-tablette);
width: min(300px, calc(100vw - var(--largeur-colonne-tablette) - 24px));
box-shadow: 18px 0 40px var(--noir-22);
transform: translateX(-110%);
visibility: hidden;
transition: transform .2s ease, visibility 0s linear .2s;
}
.tiroir.ouvert .menu-nav,
#tiroir:target .menu-nav { transform: none; visibility: visible; transition: transform .2s ease; }
.tiroir-voile {
position: fixed;
z-index: 71;
top: var(--hauteur-entete);
right: 0;
bottom: 0;
left: var(--largeur-colonne-tablette);
display: block;
background: var(--noir-30);
opacity: 0;
visibility: hidden;
}
.tiroir.ouvert ~ .tiroir-voile,
#tiroir:target ~ .tiroir-voile { opacity: 1; visibility: visible; }
body:has(.colonne-jeux) #tel-dock { --td-gauche: calc(var(--largeur-colonne-tablette) + 16px); }
}
@media (min-width: 1000px) {
.app { grid-template-columns: var(--largeur-colonne-jeux) var(--largeur-menu-nav) minmax(0, 1fr); }
.app > .scroll { grid-column: 3; }
.entete-tiroir { display: none; }
.entete-site { padding: 8px 20px; }
.entete-site .wordmark { margin-right: 12px; }
.entete-theme,
.entete-site:not(:has(.entete-moi)) .entete-theme { display: inline-flex; }
.entete-moi-theme { display: none; }
.menu-nav { grid-column: 2; grid-row: 2; }
body:has(.colonne-jeux) #tel-dock { --td-gauche: calc(var(--largeur-colonne-jeux) + var(--largeur-menu-nav) + 16px); }
}
@media (prefers-reduced-motion: reduce) {
.tiroir,
.tiroir-voile,
.menu-nav,
.jeu-rond,
.interrupteur-curseur,
.menu-fleche { transition: none; }
}
.bienvenue-titre {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 4px 0 18px;
}
.bienvenue-titre img { width: 50px; height: 50px; flex: none; }
.bienvenue-titre h1 { margin: 0; font-size: 24px; line-height: 1.2; }
.bienvenue-carte {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--rayon-l);
overflow: hidden;
}
.bienvenue-onglets { display: grid; grid-template-columns: 1fr 1fr; }
.bienvenue-onglet {
display: block;
padding: 14px 8px;
text-align: center;
font-weight: 600;
font-size: 15px;
color: var(--muted);
text-decoration: none;
background: var(--surface-2);
border-top: 3px solid transparent;
border-bottom: 1px solid var(--line);
}
.bienvenue-onglet:hover { color: var(--ink); }
.bienvenue-onglet[aria-selected='true'] {
color: var(--ink);
background: var(--surface);
border-top-color: var(--accent);
border-bottom-color: transparent;
}
.bienvenue-onglet:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bienvenue-volet { padding: 20px 24px 24px; }
.bienvenue-volet > .sub { margin: 0; }
.bienvenue-autre { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 599px) {
.bienvenue-titre h1 { font-size: 21px; }
.bienvenue-titre img { width: 42px; height: 42px; }
.bienvenue-volet { padding: 18px 16px 20px; }
}
.mdp-champ { display: flex; align-items: stretch; }
.mdp-champ > .field { flex: 1 1 auto; min-width: 0; }
.mdp-champ:has(> .mdp-voir:not([hidden])) > .field { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mdp-voir {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
padding: 0 12px;
border: 1px solid var(--line-strong);
border-left: 0;
border-radius: 0 9px 9px 0;
background: var(--surface-2);
color: var(--muted);
font: inherit;
font-size: 13px;
white-space: nowrap;
cursor: pointer;
}
.mdp-voir:hover { color: var(--ink); }
.mdp-voir:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mdp-voir[aria-pressed='false'] .mdp-ico-masquer,
.mdp-voir[aria-pressed='true'] .mdp-ico-voir { display: none; }
.bienvenue-volet .lab-ligne { margin-top: 14px; }
.mdp-paire {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0 12px;
align-items: start;
}
.mdp-paire-col { min-width: 0; }
.mdp-paire .mdp-voir { padding: 0 9px; }
.mdp-pareil { margin: 6px 0 0; font-size: 12.5px; color: var(--warn); }
.mdp-pareil:empty { display: none; }
.choix-info { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.choix-info .choix-ligne { margin: 0; }
@media (max-width: 479px) {
.mdp-paire { grid-template-columns: minmax(0, 1fr); }
}
.bienvenue-volet > form:first-child > .lab-ligne:first-of-type { margin-top: 0; }
.lab-ligne {
position: relative;
display: flex;
align-items: center;
gap: 6px;
margin: 12px 0 4px;
min-height: 20px;
}
.lab-ligne > .lab { margin: 0; }
.choix-info { position: relative; }
.info-i {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 18px;
height: 18px;
padding: 0;
border: 1px solid var(--line-strong);
border-radius: 50%;
background: var(--surface-2);
color: var(--muted);
font: inherit;
font-family: Georgia, 'Times New Roman', serif;
font-size: 12px;
font-style: italic;
font-weight: 700;
line-height: 1;
cursor: pointer;
position: relative;
}
.info-i::after { content: ''; position: absolute; inset: -12px; }
.info-i:hover,
.info-i[aria-expanded='true'] { color: var(--accent-ink); border-color: var(--accent); }
.info-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info-bulle-flottante {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 30;
width: max-content;
max-width: min(320px, 100%);
margin: 0;
padding: 9px 12px;
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line-strong);
border-radius: var(--rayon);
box-shadow: var(--ombre-carte);
font-size: 12.5px;
line-height: 1.5;
}
.up-epingles {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 14px 0 0; min-width: 0;
}
.up-epingles .btn { min-height: 42px; }
.up-epingles .up-suivre { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.up-epingles .up-suivre form { display: inline; margin: 0; }
.up-epingles-note { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.up-epingles-retirer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; font-size: 13.5px; }
.up-epingles-retirer .mine { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.up-epingles-retirer .ico { width: 15px; height: 15px; }
@media (max-width: 599px) {
.up-epingles .btn { flex: 1 1 auto; justify-content: center; }
.up-epingles .up-suivre { flex: 1 1 100%; }
}
.up-chiffres { display: flex; flex-wrap: wrap; gap: 10px; }
.up-chiffre {
display: grid; gap: 1px; min-width: 0; padding: 8px 14px;
background: var(--surface-2); border-radius: var(--rayon);
color: var(--muted); font-size: 13px;
}
.up-chiffre b { color: var(--ink); font-family: var(--font-title); font-size: 20px; font-weight: 600; line-height: 1.2; }
.up-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.up-resume { margin: 12px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.up-reglement {
margin-top: 12px; padding: 8px 12px;
background: var(--surface-2); border-radius: var(--rayon);
}
.up-reglement > summary {
display: flex; align-items: center; gap: 6px;
min-height: 32px; font-weight: 600; cursor: pointer;
}
.up-reglement > summary .ico { width: 17px; height: 17px; }
.up-reglement[open] > summary { margin-bottom: 6px; }
.up-membres { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.up-membres li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; }
.up-membres li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.up-membres small { color: var(--muted); }
.up-membre-initiales {
flex: none; display: grid; place-items: center; width: 32px; height: 32px;
border-radius: 50%; color: var(--sur-photo); font-size: 11.5px; font-weight: 600;
}
.up-membres-tous { margin-top: 10px; }
.up-membres-tous > summary { color: var(--accent-ink); font-weight: 600; cursor: pointer; min-height: 32px; }
.up-membres-tous[open] > summary { margin-bottom: 8px; }
.membres-vitrine { margin-top: 16px; }
.up-visages { margin: 0; overflow-wrap: anywhere; }
.avis-visages {
margin: 10px 0 0; padding-left: 9px;
border-left: 3px solid var(--line-strong);
color: var(--muted); font-size: 13px;
}
.avis-visages a { color: var(--accent-ink); }
.up-registre-onglets { margin: 0 0 12px; }
.up-famille { margin: 0 0 6px; overflow-wrap: anywhere; }
.up-livre { display: grid; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.up-livre blockquote {
margin: 0; padding: 8px 12px; background: var(--surface-2);
border-radius: var(--rayon); font-family: var(--font-rp); overflow-wrap: anywhere;
}
.up-livre .mine { margin: 4px 0 0; }
.up-livre-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.choix-scene h2 { display: flex; align-items: center; gap: 8px; }
.choix-scene-liste { display: grid; gap: 8px; margin: 10px 0; padding: 0; list-style: none; }
.choix-scene-liste a {
display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon);
color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
.choix-scene-liste a:hover, .choix-scene-liste a:focus-visible { border-color: var(--accent); }
.choix-scene-liste small { color: var(--muted); }
.choix-scene-logo {
flex: none; display: grid; place-items: center; width: 38px; height: 38px;
border-radius: 11px; object-fit: cover; color: var(--sur-photo); font-weight: 600; font-size: 13px;
}
.jeu-en-discussion .jeu-rond img,
.jeu-en-discussion .jeu-rond .jeu-initiales { opacity: .5; filter: grayscale(1); }
.jeu-rond .jeu-bulle { background: var(--sur-colonne); }
.colonne-menu {
position: fixed; z-index: 95; display: grid; min-width: 200px; max-width: calc(100vw - 16px);
padding: 6px; background: var(--surface); color: var(--ink);
border: 1px solid var(--line-strong); border-radius: var(--rayon); box-shadow: var(--ombre-carte);
}
.colonne-menu a,
.colonne-menu button {
display: block; width: 100%; min-height: 40px; padding: 9px 12px;
border: 0; border-radius: var(--rayon-s); background: none;
color: var(--ink); font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.colonne-menu a:hover, .colonne-menu button:hover,
.colonne-menu a:focus-visible, .colonne-menu button:focus-visible { background: var(--surface-2); outline: none; }
.colonne-creer { position: relative; }
.colonne-creer > summary { list-style: none; cursor: pointer; }
.colonne-creer > summary::-webkit-details-marker { display: none; }
.colonne-creer[open] > summary { background: var(--accent-loreside); color: var(--sur-accent-loreside); border-radius: 14px; }
.colonne-creer-choix {
position: absolute; left: calc(100% + 12px); bottom: 0; z-index: 95;
display: grid; width: 220px; padding: 6px;
background: var(--surface); color: var(--ink);
border: 1px solid var(--line-strong); border-radius: var(--rayon); box-shadow: var(--ombre-carte);
}
.colonne-creer-titre { margin: 4px 10px 6px; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.colonne-creer-choix a {
display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px;
border-radius: var(--rayon-s); color: var(--ink); font-size: 14px; text-decoration: none;
}
.colonne-creer-choix a:hover, .colonne-creer-choix a:focus-visible { background: var(--surface-2); outline: none; }
.colonne-creer-choix .ico { width: 18px; height: 18px; }
@media (max-width: 599px) {
.colonne-creer-choix { left: 0; bottom: calc(100% + 10px); width: min(240px, calc(100vw - 32px)); }
}
.sortie { text-align: center; }
.sortie h1 { margin-top: 8px; }
.sortie-icone {
display: inline-grid; place-items: center; width: 52px; height: 52px;
border-radius: 50%; background: var(--surface-2); color: var(--accent-loreside);
}
.sortie-icone .ico { width: 26px; height: 26px; }
.sortie-adresse {
margin: 14px 0; padding: 12px 14px; text-align: left;
background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--rayon);
color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px;
overflow-wrap: anywhere; word-break: break-all; user-select: all;
}
.sortie-avertissement { color: var(--muted); font-size: 14px; }
.sortie-bloque { padding: 10px 12px; border-radius: var(--rayon); background: var(--warn-soft); color: var(--warn); }
.sortie-actes, .quitter-actes {
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px;
}
.quitter-actes { justify-content: flex-start; }
.sortie-actes .btn, .quitter-actes .btn { min-height: 44px; }
.sites-bloque { display: flex; align-items: flex-start; gap: 12px; }
.sites-bloque .item-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sites-bloque form { flex: none; }
.quitter-liste { display: grid; gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.quitter-liste li {
padding: 10px 12px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--rayon); color: var(--ink); line-height: 1.5;
}
.quitter-liste b { display: block; margin-bottom: 2px; }
.quitter-form { margin-top: 16px; }
.quitter-form .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; }
.quitter-form .btn span { overflow-wrap: anywhere; }
.quitter-refus a { font-weight: 600; }
@media (max-width: 599px) {
.sortie-actes .btn, .quitter-form .btn { width: 100%; justify-content: center; }
}
.jl-onglets { margin-top: 4px; }
.jl-onglets a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.jl-marque {
padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 500;
color: var(--muted); background: var(--surface-2); white-space: nowrap;
}
.jl-marque:empty { display: none; }
.jl-rp .jl-marque, .jl-marque.jl-rp { color: var(--nav-rp); background: var(--nav-rp-trait); }
.jl-hrp .jl-marque { color: var(--nav-hrp); background: var(--nav-hrp-trait); }
.jl-bandeau {
margin: 0 0 14px; padding: 8px 12px; border-radius: var(--rayon);
border-left: 4px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px;
}
.jl-bandeau.jl-rp { border-left-color: var(--nav-rp); background: var(--nav-rp-trait); }
.jl-bandeau.jl-hrp { border-left-color: var(--nav-hrp); background: var(--nav-hrp-trait); }
.jl-alertes { white-space: nowrap; }
.jl-suivis { margin: 16px 0 8px; padding: 0; border: 0; min-width: 0; }
.jl-suivi { padding: 10px 0; border-top: 1px solid var(--line); }
.jl-suivi-nom { margin: 0 0 6px; }
.jl-suivi-nom .mine { display: block; }
.jl-niveaux { display: flex; flex-wrap: wrap; gap: 6px; }
.jl-niveau { position: relative; display: inline-flex; }
.jl-niveau input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.jl-niveau span {
display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px;
border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px;
}
.jl-niveau input:checked + span { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.jl-niveau input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.jsp-liste { display: grid; gap: 12px; }
.jsp-carte {
padding: 14px 16px; background: var(--surface); border: 1px solid var(--line);
border-left: 4px solid var(--nav-rp); border-radius: var(--rayon); min-width: 0;
}
.jsp-tete { display: flex; align-items: center; gap: 10px; }
.jsp-visage { flex: none; width: 46px; height: 46px; object-fit: cover; }
.jsp-qui { min-width: 0; overflow-wrap: anywhere; }
.jsp-qui .mine { display: block; }
.jsp-qui b + .mine { display: inline; }
.jsp-titre { margin: 10px 0 4px; font-size: 18px; overflow-wrap: anywhere; }
.jsp-titre a { color: var(--ink); text-decoration: none; }
.jsp-titre a:hover { text-decoration: underline; }
.jsp-extrait, .jsp-message { margin: 6px 0; color: var(--ink); overflow-wrap: anywhere; }
.jsp-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.jsp-adulte { color: var(--warn); background: var(--warn-soft); }
.jsp-avertit { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.jsp-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.jsp-pied .btn { min-height: 44px; display: inline-flex; align-items: center; }
.jsp-joueurs { display: inline-flex; align-items: center; gap: 4px; }
.jsp-lancer { margin: 0; padding: 10px 12px; }
.jsp-lancer .jsp-formulaire { margin-top: 0; }
.jsp-ligne-icone { display: block; flex: none; width: 38px; height: 38px; }
.jsp-formulaire { margin-top: 12px; }
.jsp-formulaire .scene-avertir { margin-top: 14px; }
.jsp-page { margin-top: 6px; }
.jsp-candidature { align-items: flex-start; gap: 10px; }
.jsp-mot { margin: 6px 0; padding: 8px 10px; background: var(--surface-2); border-radius: var(--rayon); overflow-wrap: anywhere; }
.jsp-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jsp-gestes .btn { min-height: 44px; }
.jsp-ouverture { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 12px; }
.jsp-ouverture .btn { min-height: 44px; }
@media (max-width: 599px) {
.jl-onglets a { padding: 8px 8px; }
.jsp-carte { padding: 12px; }
.jsp-pied .btn, .jsp-gestes .btn, .jsp-ouverture .btn { width: 100%; justify-content: center; }
.jsp-gestes form { flex: 1 1 100%; }
}
.avis-visiteur {
margin: 12px 0 0;
padding: 10px 14px;
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: 10px;
background: var(--surface);
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
.avis-visiteur a { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.porte-compte:hover { border-color: var(--line); transform: none; }
.porte-compte:hover .porte-icone { transform: none; }
.porte.porte-compte em { color: var(--muted); }
.vies { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.vie {
display: flex; align-items: flex-start; gap: 8px; min-width: 0;
padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--rayon);
background: var(--surface);
}
.vie-pastille {
flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
background: var(--couleur-univers, var(--accent));
}
.vie-corps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; flex: 1 1 auto; }
.vie-nom { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
a.vie-nom { text-decoration: none; }
a.vie-nom:hover { text-decoration: underline; }
.vie-terminee { background: var(--surface-2); }
.vie-terminee .vie-nom { color: var(--muted); font-weight: 500; }
.vie-terminee .vie-pastille { background: var(--faint); }
.vie-etat { color: var(--muted); font-size: 13.5px; }
.vie-a-change { color: var(--warn); font-weight: 600; }
.vie-reprendre { min-height: 44px; display: inline-flex; align-items: center; }
.vies-carte { margin: 0; padding: 0 10px 8px; }
.vies-carte .vie { padding: 6px 8px; font-size: 14px; }
.vies-note, .vies-garde { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.vies-choix { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.vies-choix legend { padding: 0; }
.vies-choix-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin-top: 10px; }
.vies-choix-fiche {
display: grid; gap: 4px; justify-items: start; min-width: 0; padding: 10px;
border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface);
color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
}
a.vies-choix-fiche:hover { border-color: var(--line-strong); }
.vies-choix-fiche .fiche-portrait { width: 64px; }
.vies-choix-pris { background: var(--surface-2); color: var(--muted); }
.vies-reprendre-image { margin-top: 6px; }
.vie-ici { display: grid; gap: 10px; }
.vie-source { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.vie-a-change-bloc, .vie-reprise {
padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--warn);
border-radius: var(--rayon); background: var(--warn-soft); color: var(--ink);
}
.vie-reprise { border-left-color: var(--accent); background: var(--surface); }
.vie-a-change-bloc .vie-a-change { margin: 0 0 8px; }
.vie-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vie-actes .btn { min-height: 44px; display: inline-flex; align-items: center; }
.vie-reprise-titre { margin: 0 0 8px; }
.vie-reprise-liste { display: grid; gap: 8px; margin: 0 0 10px; }
.vie-reprise-liste dt { font-weight: 600; }
.vie-reprise-liste dd { margin: 2px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vie-reprise-valeur { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.vie-refus { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 260px; }
.vie-refus .field { flex: 1 1 180px; min-width: 0; margin: 0; }
.vies-file { margin: 16px 0 6px; font-size: 15px; }
.reprise { display: grid; gap: 8px; }
.reprise-tete, .reprise-ligne {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: 10px; align-items: start;
}
.reprise-tete { color: var(--muted); font-size: 13px; padding: 0 12px; }
.reprise-ligne {
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon);
background: var(--surface); cursor: pointer;
}
.reprise-ligne:has(input:checked) { border-color: var(--accent); }
.reprise-champ { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.reprise-champ input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.reprise-valeur { min-width: 0; color: var(--ink); overflow-wrap: anywhere; font-size: 14.5px; }
.reprise-ici { color: var(--muted); }
.reprise-cote { display: none; color: var(--muted); font-size: 12.5px; }
.reprise-vide { color: var(--faint); font-style: italic; }
.reprise-image { display: block; max-width: 100%; border-radius: var(--rayon-s); object-fit: cover; }
.reprise-image-portrait { width: 90px; aspect-ratio: 3 / 4; }
.reprise-image-couverture { width: 100%; }
.reprise-actes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.reprise-actes .btn { min-height: 44px; }
@media (max-width: 599px) {
.reprise-tete { display: none; }
.reprise-ligne { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.reprise-cote { display: block; }
.reprise-actes .btn, .vie-actes .btn, .vie-reprendre { width: 100%; justify-content: center; }
.vie-actes form { flex: 1 1 100%; }
.vie-reprise-liste dd { grid-template-columns: minmax(0, 1fr); }
}
.fp { display: grid; gap: 0; min-width: 0; }
.fp-grille { display: grid; gap: 16px; min-width: 0; }
.fp-gauche, .fp-droite { min-width: 0; }
.fp-carte {
display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 14px; align-items: end;
margin-top: -40px; padding: 0 4px;
}
.fp-portrait { position: relative; grid-row: span 2; align-self: start; }
.fp-portrait-image {
display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
border: 3px solid var(--surface); border-radius: var(--rayon-l);
background: var(--surface-2); box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 14%, transparent);
}
.fp-portrait-vide {
display: grid; place-items: center; color: var(--sur-photo);
font-family: var(--font-title); font-size: 30px; font-weight: 600;
}
.fp-portrait-modifier {
position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center;
width: 36px; height: 36px; border-radius: 50%;
background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink);
}
.fp-qui { min-width: 0; padding-top: 44px; }
.fp-nom {
margin: 0; font-family: var(--font-title); font-size: 22px; line-height: 1.15; letter-spacing: -.01em;
overflow-wrap: anywhere;
}
.fp-nom .etiq { font-family: var(--font-ui); font-size: 11.5px; vertical-align: middle; }
.fp-ligne { margin: 4px 0 0; color: var(--muted); font-size: 14px; font-style: italic; }
.fp-qui .pf-joueur { margin: 6px 0 0; }
.fp-actes {
grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;
}
.fp-actes > *, .fp-actes form { margin: 0; }
.fp-actes .btn { min-height: 44px; }
.fp-actes > .btn-main { flex: 1 1 auto; }
.fp-actes .vie-badge { margin-left: 2px; }
.fp-blocs { display: grid; gap: 10px; margin-top: 16px; }
.fp-blocs > .section + .section { margin-top: 0; }
.fp-bloc, .fp-blocs > .section {
margin: 0; padding: 4px 14px 8px;
border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface);
}
.fp-bloc-titre {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
min-height: 44px; cursor: pointer; list-style: none;
}
.fp-bloc-titre::-webkit-details-marker { display: none; }
.fp-bloc-titre::after {
content: ""; width: 9px; height: 9px; flex: none; margin-right: 4px;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg) translateY(-3px); transition: transform .15s;
}
.fp-bloc:not([open]) .fp-bloc-titre::after { transform: rotate(-45deg); }
.fp-bloc-titre h2, .fp-blocs > .section > h2 {
margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
}
.fp-blocs > .section > h2 { padding: 12px 0 6px; }
.fp-bloc-corps .row { align-items: baseline; padding: 8px 0; }
.fp-bloc-corps .row > span:first-child { color: var(--muted); font-size: 12.5px; flex: none; max-width: 45%; }
.fp-bloc-corps .row .muted { color: var(--ink); font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.fp-blocs .tpl-fiche { margin: 0; }
.fp-droite > .hint, .fp-droite > .vie-ici { margin: 0 0 14px; }
.fp-onglets {
position: sticky; top: 0; z-index: 2;
display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
margin: 0 calc(var(--marge) * -1) 16px; padding: 0 var(--marge);
border-bottom: 1px solid var(--line); background: var(--paper);
}
.fp-onglets::-webkit-scrollbar { display: none; }
.fp-volet { min-width: 0; scroll-margin-top: 56px; }
.fp-volet + .fp-volet { margin-top: 28px; }
.fp-volet-titre { margin: 0 0 12px; font-family: var(--font-title); font-size: 20px; }
.fp-js .fp-volet + .fp-volet { margin-top: 0; }
.fp-js .fp-volet-titre {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.fp-volet .section { margin-top: 0; }
.fp-volet .section + .section { margin-top: 24px; }
.perso-textes .fiche-texte-titre:first-of-type { margin-top: 4px; }
.fp-volet .prose { overflow-wrap: anywhere; }
@media (min-width: 768px) {
.fp-carte { grid-template-columns: 128px minmax(0, 1fr); margin-top: -56px; }
.fp-qui { padding-top: 60px; }
.fp-nom { font-size: 26px; }
.fp-actes > .btn-main { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
.fp-grille { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; }
.fp-gauche { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 12px; }
.fp-carte { display: block; margin-top: -90px; padding: 0; }
.fp-portrait { max-width: 220px; }
.fp-qui { padding-top: 12px; }
.fp-actes { margin-top: 12px; }
.fp-actes > .btn, .fp-actes form, .fp-actes form .btn { flex: 1 1 100%; width: 100%; }
.fp-onglets { margin: 0 0 18px; padding: 0; top: 0; }
.fp-droite { padding-top: 14px; }
}
.fiche-saisie > h1 { margin: 4px 0 10px; font-size: 24px; }
.fiche-saisie .fiches-depart { margin: 0 0 14px; }
.etapes { position: relative; display: grid; gap: 12px; min-width: 0; }
.etapes-tete { display: grid; gap: 6px; }
.etapes-ou { margin: 0; font-size: 14px; color: var(--muted); }
.etapes-ou b { color: var(--ink); }
.etapes-barre { height: 4px; border-radius: var(--rayon-pilule); background: var(--surface-2); overflow: hidden; }
.etapes-barre span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s; }
.etapes-etat { margin: 0; min-height: 1.2em; font-size: 12.5px; }
.etapes-liste ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.etapes-liste ol::-webkit-scrollbar { display: none; }
.etape-lien {
position: relative; display: inline-flex; align-items: center; gap: 8px;
min-height: 44px; padding: 4px 12px 4px 6px; border: 1px solid var(--line); border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.etape-pastille {
display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%;
background: var(--surface-2); color: var(--muted);
}
.etape-pastille .ico { width: 17px; height: 17px; }
.etape-lien[aria-current='step'] { border-color: var(--accent); color: var(--accent-ink); }
.etape-lien[aria-current='step'] .etape-pastille { background: var(--accent); color: var(--sur-accent); }
.etape-lien.etape-faite .etape-pastille { background: var(--accent-soft); color: var(--accent-ink); }
.etape-coche {
position: absolute; left: 28px; top: 4px; display: none; place-items: center;
width: 15px; height: 15px; border-radius: 50%; background: var(--accent); color: var(--sur-accent);
}
.etape-coche .ico { width: 10px; height: 10px; }
.etape-lien.etape-faite .etape-coche { display: grid; }
.etape-manque {
position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%;
background: var(--warn); box-shadow: 0 0 0 2px var(--surface);
}
.etapes-js .etapes-liste .etape-nom { display: none; }
.etapes-js .etape-lien { padding: 4px; }
.etapes-js .etape-lien[aria-current='step'] .etape-nom { display: inline; padding-right: 8px; }
.etape { min-width: 0; padding: 4px 0 0; scroll-margin-top: 16px; }
.etape + .etape { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.etapes-js .etape + .etape { margin-top: 0; padding-top: 4px; border-top: 0; }
.etape-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--font-title); font-size: 21px; }
.etape-titre:focus { outline: none; }
.etape-titre .ico { width: 20px; height: 20px; color: var(--accent-ink); }
.etape-note { margin: 0 0 12px; font-size: 13px; }
.etape .lab { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.etape .field { min-height: 44px; }
.etape textarea.field { min-height: 110px; }
.etape .champs { gap: 0 14px; }
.etape-plus { margin: 16px 0 0; border: 1px dashed var(--line-strong); border-radius: var(--rayon-l); background: var(--surface); }
.etape-plus > summary {
display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px;
cursor: pointer; font-weight: 600; list-style: none;
}
.etape-plus > summary::-webkit-details-marker { display: none; }
.etape-plus > summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); }
.etape-plus[open] > summary::before { content: "−"; }
.etape-plus-corps { padding: 0 14px 14px; }
.etape-actes {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
margin-top: 20px; padding: 10px 0;
}
.etape-actes .btn { min-height: 46px; }
.etape-brouillon { justify-self: center; border-style: dashed; }
.etape-suiv, .etape-envoyer { justify-self: end; }
.etape-envoyer[disabled] { opacity: .55; cursor: not-allowed; }
.etape-prec span:not(.ico) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
.etapes-js .etape-actes {
position: sticky; bottom: 0; z-index: 3;
margin: 20px calc(var(--marge) * -1) 0; padding: 10px var(--marge) calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent);
backdrop-filter: blur(6px);
}
.etape-brouillon { font-size: 12.5px; padding: 6px 10px; }
}
@media (min-width: 520px) { .etape-prec span:not(.ico) { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.recap { display: grid; gap: 10px; margin: 0 0 14px; }
.recap-etape { padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); }
.recap-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recap-tete h3 { margin: 0; font-size: 15px; }
.recap-modifier { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 13.5px; font-weight: 600; }
.recap-etape dl { display: grid; grid-template-columns: minmax(90px, 35%) minmax(0, 1fr); gap: 4px 12px; margin: 6px 0 0; font-size: 14px; }
.recap-etape dt { color: var(--muted); }
.recap-etape dd { margin: 0; overflow-wrap: anywhere; }
.recap-etape > .mine { margin: 4px 0 0; }
.recap-manque { margin: 0 0 12px; }
.recap-manque p { margin: 0 0 4px; }
.recap-manque ul { margin: 0; padding-left: 18px; }
.recap-manque a { color: inherit; font-weight: 600; }
.etapes-js .recap-sans-script { display: none; }
.etape-erreur { margin: 0 0 12px; }
.brouillon-repris { display: grid; gap: 4px; margin: 0 0 12px; }
.brouillon-repris p { margin: 0; }
.fiche-zone-sensible { margin-top: 28px; }
@media (min-width: 900px) {
.etapes { grid-template-columns: 220px minmax(0, 1fr); gap: 14px 28px; align-items: start; }
.etapes-tete { grid-column: 2; }
.etapes-liste { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 12px; }
.etapes-corps { grid-column: 2; min-width: 0; }
.etapes-liste ol { flex-direction: column; overflow: visible; }
.etape-lien, .etapes-js .etape-lien { width: 100%; padding: 4px 12px 4px 6px; border-radius: var(--rayon-l); }
.etapes-js .etapes-liste .etape-nom { display: inline; }
.etape-lien.etape-faite .etape-coche { left: 30px; }
}
.champ-requis {
display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: var(--rayon-pilule);
background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 700;
letter-spacing: .02em; vertical-align: 1px; line-height: 1.6;
}
.couple-ailleurs { margin: 4px 0 8px; }
.saisie-guidee { position: relative; }
.saisie-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.saisie-pastille {
display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 12px; min-height: 36px;
border-radius: var(--rayon-pilule); background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; font-weight: 600;
}
.saisie-retirer {
display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
background: none; color: inherit; font-size: 18px; cursor: pointer;
}
.saisie-retirer:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.saisie-propositions {
position: absolute; left: 0; right: 0; z-index: 5; margin: 4px 0 0; padding: 4px; list-style: none;
border: 1px solid var(--line-strong); border-radius: var(--rayon); background: var(--surface);
box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
}
.saisie-propositions [role='option'] { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--rayon-s); cursor: pointer; }
.saisie-propositions [role='option']:hover,
.saisie-propositions [role='option'][aria-selected='true'] { background: var(--accent-soft); color: var(--accent-ink); }
.choix-pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.choix-pastilles-longue { max-height: 300px; overflow-y: auto; padding: 2px; }
.choix-pastille {
min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; text-align: left;
}
.choix-pastille:hover { border-color: var(--accent); }
.choix-pastille[aria-checked='true'] { border-color: var(--accent); background: var(--accent); color: var(--sur-accent); font-weight: 600; }
.choix-filtre { margin: 4px 0 8px; }
.champ-coches[data-choix-propre] { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.champ-coches[data-choix-propre] .choix-ligne {
margin: 0; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule); background: var(--surface); cursor: pointer;
}
.champ-coches[data-choix-propre] .choix-ligne:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.champ-coches[data-choix-propre] .choix-ligne input { width: 18px; height: 18px; accent-color: var(--accent); }
.fiches-grille { align-items: stretch; }
.fiche-carte .vies-pastilles {
display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 12px 10px; list-style: none;
}
.vie-pastille-ligne { display: contents; }
.vie-puce {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 10px;
border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--ink);
font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.vie-puce:hover { background: color-mix(in oklab, var(--couleur-univers, var(--accent)) 14%, var(--surface)); }
.vie-point { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--couleur-univers, var(--accent)); }
.vie-terminee .vie-puce { color: var(--muted); }
.vie-badge {
display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
border-radius: var(--rayon-pilule); background: var(--warn); color: var(--surface); font-size: 11.5px; font-weight: 700;
}
.fiche-carte .fiche-carte-pied { margin-top: auto; }
.pied-site-dedans {
display: grid; gap: 10px; max-width: 1180px; margin: 0 auto; padding: 16px var(--marge) 14px;
grid-template-columns: minmax(0, 1fr);
}
.pied-site-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.pied-site .wordmark img { height: 24px; width: auto; }
.pied-site-liens { display: block; }
.pied-site-liens ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.pied-site-liens li:not(:last-child)::after { content: "·"; padding: 0 7px; color: color-mix(in srgb, var(--sur-bandeau) 45%, transparent); }
.pied-site-liens a { display: inline-block; padding: 6px 0; font-size: 13px; }
.pied-site-bas {
max-width: none; margin: 0; padding: 8px 0 0; border-top: 1px solid color-mix(in srgb, var(--sur-bandeau) 12%, transparent);
color: color-mix(in srgb, var(--sur-bandeau) 62%, transparent); font-size: 12.5px;
}
.pied-site-bas .reseaux { margin: 0; gap: 6px; }
.pied-site-bas .reseau { width: 34px; height: 34px; }
.pied-site-bas .pied-site-tenh, .pied-site-droits { margin: 0; font-size: 12.5px; }
body:has(.cb-bulle) .pied-site-bas { padding-bottom: 0; }
body:has(.cb-bulle) .pied-site-dedans { padding-bottom: calc(52px + 24px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) {
body:has(.cb-bulle) .pied-site-dedans { padding-bottom: 14px; padding-right: 96px; }
.pied-site-droits { margin-left: auto; }
}
.reperes-sans-lien { color: var(--ink); font-weight: 600; }
.cadrage-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.cadrage-gestes .btn { min-height: 40px; }
.cadrage-zoom input { min-height: 32px; }
.champ-image-recadrer { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) {
.etapes-barre span, .fp-bloc-titre::after { transition: none; }
}
.fiche-replie { margin-top: 16px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); }
.fiche-replie + .fiche-replie { margin-top: 10px; }
.fiche-replie > summary { display: flex; align-items: center; min-height: 52px; cursor: pointer; list-style: none; }
.fiche-replie > summary::-webkit-details-marker { display: none; }
.fiche-replie > summary h2 { margin: 0; font-size: 16px; }
.fiche-replie > summary::after { content: "+"; margin-left: auto; font-size: 20px; color: var(--muted); }
.fiche-replie[open] > summary::after { content: "−"; }
.fiche-replie[open] { padding-bottom: 14px; }
.carte-menu { position: relative; margin-left: auto; }
.carte-menu > summary { list-style: none; }
.carte-menu > summary::-webkit-details-marker { display: none; }
.carte-menu-bouton {
display: grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 10px;
border-radius: var(--rayon-pilule); color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.carte-menu-bouton:hover, .carte-menu[open] > .carte-menu-bouton { background: var(--surface-2); color: var(--ink); }
.carte-menu-liste {
position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 6; display: grid; min-width: 220px; padding: 6px;
border: 1px solid var(--line-strong); border-radius: var(--rayon); background: var(--surface);
box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 18%, transparent);
}
.fp-actes .carte-menu-liste { top: calc(100% + 6px); bottom: auto; }
.carte-menu-bas > .carte-menu-liste { top: calc(100% + 6px); bottom: auto; }
@media (min-width: 641px) {
.carte-menu[open] { position: relative; z-index: 60; }
.carte-menu[open] > .carte-menu-liste { z-index: 60; }
}
.carte-menu-liste form { margin: 0; }
.carte-menu-liste a, .carte-menu-liste button {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px;
border: 0; border-radius: var(--rayon-s); background: none; color: var(--ink);
font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.carte-menu-liste a:hover, .carte-menu-liste button:hover { background: var(--surface-2); }
.carte-menu-liste .ico { width: 17px; height: 17px; color: var(--muted); }
.carte-menu-danger, .carte-menu-danger .ico { color: var(--warn) !important; }
.fiche-carte { overflow: visible; }
.fiche-carte > .fiche-carte-lien { overflow: hidden; border-radius: 16px 16px 0 0; }
.fiche-carte-pied { gap: 6px; }
.fiche-carte-refus { margin: 0 12px 8px; }
.fp-playlist-geste { margin: 8px 0 0; }
.fiche-saisie-autres { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 12px; }
.fiche-saisie-autres a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
body:has(.cb-bulle) .etape-actes { padding-right: 64px; }
@media (max-width: 767px) {
body:has(.cb-bulle) .etapes-js .etape-actes { padding-right: calc(var(--marge) + 60px); }
}
.portrait-perso { width: 45px; height: 60px; border-radius: 10px; object-fit: cover; }
.portrait-perso.portrait-s { width: 33px; height: 44px; border-radius: 8px; }
.etape .profil-images { display: grid; gap: 14px; }
.etape .fiche-apercu-portrait .fiche-portrait,
.etape .fiche-apercu-portrait .profil-avatar-apercu { width: 132px; max-width: 132px; border-radius: var(--rayon-l); }
.etape .fiche-apercu-portrait .cadrage-cadre { max-width: 240px; }
.etape .profil-banniere-apercu { width: 100%; border-radius: var(--rayon); }
@media (min-width: 700px) {
.etape .profil-images { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}
@media (max-width: 767px) {
body:has(.etapes-js) .cb-bulle, body:has(.etapes-js) .td-bulle { display: none; }
body:has(.cb-bulle) .etapes-js .etape-actes { padding-right: var(--marge); }
}
.etapes > *, .etapes-corps, .etape, .fiche-saisie { min-width: 0; max-width: 100%; }
.etape-actes .ico { width: 18px; height: 18px; }
.carte-menu-note { margin: 4px 0 0; padding: 8px 12px; max-width: 260px; font-size: 12.5px; }
.saisie-retirer .ico { width: 14px; height: 14px; }
.fiche-carte .fiche-logo { aspect-ratio: 1; object-fit: cover; }
.fiche-carte .fiche-portrait-vide.fiche-logo { display: grid; place-items: center; }
.fiche-carte .fiche-portrait-vide.fiche-logo .ico { width: 34px; height: 34px; color: var(--muted); }
.fiche-carte-gere { display: block; margin-top: 2px; font-size: 12.5px; }
.fiche-gere { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.fiche-gere .ico { width: 18px; height: 18px; }
.champ-avec-etat { min-width: 0; }
.champ-avec-etat > .champ, .champ-avec-etat > .lab { margin-bottom: 0; }
.etat-champ { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; padding: 0; border: 0; }
.etat-choix { position: relative; display: inline-flex; }
.etat-choix input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.etat-choix span {
display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
border: 1px solid var(--line); border-radius: var(--rayon-pilule); background: var(--surface);
color: var(--muted); font-size: 13px; font-weight: 600;
}
.etat-choix input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.etat-choix input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.etat-choix input[value="fixe"]:checked + span { border-color: var(--warn); background: var(--warn-soft); }
.etats-aide { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; }
.etiq-etat {
display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--rayon-pilule);
background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 700; vertical-align: 1px;
}
.etiq-etat-modifiable { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.etiq-etat-fixe { border-color: var(--warn); background: var(--warn-soft); color: var(--ink); }
.etat-note { margin: 4px 0 10px; }
.champ-fixe { padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--rayon); background: var(--surface-2); }
.champ-fixe .lab { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.champ-fixe-valeur { margin: 0; color: var(--ink); }
.predefini-portrait { width: 56px; height: 75px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; }
.predefini-lignes { display: grid; gap: 6px; margin: 10px 0; }
.predefini-ligne { display: grid; gap: 2px; }
.predefini-ligne dt { color: var(--muted); font-size: 13px; }
.predefini-ligne dd { margin: 0; color: var(--ink); }
@media (min-width: 700px) {
.predefini-lignes { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
.predefini-texte-titre { margin-top: 12px; }
.predefini-libres { margin: 10px 0; color: var(--muted); font-size: 13.5px; }
.adoption-image { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 12px; }
.adoption-image .fiche-portrait { width: 96px; border-radius: var(--rayon); }
.adoption-image .profil-banniere-apercu { width: 100%; max-width: 420px; border-radius: var(--rayon); object-fit: cover; }
.choix-creation-liste { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.choix-creation-ligne {
display: flex; align-items: center; gap: 12px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface);
}
.choix-creation-image { width: 42px; height: 56px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; }
.choix-creation-image.fiche-portrait-vide { display: grid; place-items: center; overflow: hidden; background: var(--surface-2); color: var(--muted); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.choix-creation-nom { display: grid; flex: 1 1 auto; min-width: 0; }
.choix-creation-nom .mine { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.garder-image { align-items: center; }
.garder-image-vignette { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.garder-image-portrait { width: 36px; height: 48px; }
.garder-image-couverture { width: 60px; }
.avis-copie { margin: 12px 0; }
.avis-copie .mine { margin: 0 0 6px; }
.reprise-equipe { display: grid; gap: 8px; margin: 10px 0; }
.reprise-equipe dt { font-weight: 700; }
.reprise-equipe dd { margin: 0; overflow-wrap: anywhere; }
.pot-reserve > summary { list-style: none; cursor: pointer; }
.pot-reserve > summary::-webkit-details-marker { display: none; }
.pot-reserve > summary h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pot-secret { border-left: 3px solid var(--accent); }
.pot-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.secret-gazette { margin: 8px 0; }
.reglage-gazette { margin: 14px 0 0; padding: 0; border: 0; }
.reglement-gazette { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.reglement-gazette .ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.filtres-genre { flex-wrap: nowrap; margin: 4px 0 2px; overflow-x: auto; scrollbar-width: none; }
.filtres-genre::-webkit-scrollbar { display: none; }
.filtres-genre .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; font-size: 13.5px; white-space: nowrap; }
.chip-nombre { color: inherit; opacity: .7; font-size: 12px; }
.predefini-carte:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.predefini-page { margin-top: 8px; }
.pnj-carte .fiche-carte-lien { min-height: 0; }
@media (max-width: 420px) {
.fiches-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
.type-de-fiche { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; align-items: center; }
.type-de-fiche::-webkit-scrollbar { display: none; }
.type-de-fiche .pnj-nature-choix { white-space: nowrap; }
.type-de-fiche-titre { flex: 0 0 auto; margin-right: 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.type-de-fiche-choix { margin: 0 0 16px; padding: 0; border: 0; }
.type-de-fiche-sorte { margin-top: 8px; align-items: center; }
.type-de-fiche-aide { margin: 8px 0 0; }
[data-pour][hidden], [data-pas-pour][hidden] { display: none !important; }
.lieu-pilule input:disabled + span { opacity: .45; cursor: not-allowed; }
.alerte-ligne { border-radius: var(--rayon-s); }
.alerte-non-lue { background: var(--accent-soft); padding-left: 10px; padding-right: 10px; }
.alerte-point { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.panneau-alertes {
position: fixed;
top: calc(var(--hauteur-entete) + 6px);
right: 12px;
z-index: 96;
display: flex;
flex-direction: column;
width: min(380px, calc(100vw - 24px));
max-height: min(560px, calc(100dvh - var(--hauteur-entete) - 24px));
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: var(--ink);
box-shadow: var(--ombre-carte);
}
.panneau-alertes[hidden] { display: none; }
.panneau-alertes-tete {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 10px 8px 16px;
border-bottom: 1px solid var(--line);
}
.panneau-alertes-tete h2 { flex: 1; min-width: 0; margin: 0; font-family: var(--font-title); font-size: 18px; }
.panneau-alertes-tete h2:focus { outline: none; }
.panneau-alertes-tete form { margin: 0; flex: none; }
.panneau-alertes-tete form .btn { white-space: nowrap; max-width: none; overflow: visible; }
.panneau-alertes-tete form[hidden] { display: none; }
.panneau-alertes-fermer {
display: grid; place-items: center; flex: none; width: 40px; height: 40px;
border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.panneau-alertes-fermer:hover { background: var(--surface-2); color: var(--ink); }
.panneau-alertes-fermer .ico { width: 18px; height: 18px; }
.panneau-alertes-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px; }
.panneau-alertes-liste .item { padding: 10px 8px; }
.panneau-alertes-liste .item:first-child { border-top: 0; }
.panneau-alertes-liste .alerte-non-lue { padding-left: 10px; padding-right: 10px; }
.panneau-alertes-liste > .sub { margin: 14px 8px; }
.panneau-alertes-tout {
display: flex; align-items: center; justify-content: center; min-height: 44px;
border-top: 1px solid var(--line); color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.panneau-alertes-tout:hover { background: var(--surface-2); }
.panneau-alertes.panneau-alertes-plein {
inset: 0;
width: auto;
max-height: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.panneau-alertes-plein .panneau-alertes-tete { min-height: var(--hauteur-entete); padding-left: var(--marge); }
.panneau-alertes-plein .panneau-alertes-liste { padding: 4px var(--marge); }
html.alertes-ouvertes, html.alertes-ouvertes body { overflow: hidden; }
.tel-fil-rangee { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.tel-fil-rangee > .tel-fil { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.tel-fil-rangee > .tel-fil-menu { margin-right: 6px; }
.tel-fil-rangee .carte-menu-liste .ico { width: 16px; height: 16px; margin-right: 10px; color: var(--muted); }
.tel-fil-rangee .carte-menu-liste { z-index: 8; }
.tel-fil-haut b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-fil-epingle { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.tel-fil-epingle .ico { width: 13px; height: 13px; }
.tel-fil-photo { overflow: hidden; background: var(--surface-2); }
.tel-fil-photo img { width: 100%; height: 100%; object-fit: cover; }
.tel-fils-archives {
display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
color: var(--muted); font-size: 13px; text-decoration: none;
}
.tel-fils-archives .ico { width: 16px; height: 16px; }
.tel-fils-archives:hover { color: var(--ink); background: var(--surface-2); }
.tel-appbar-actions .carte-menu > summary { width: 36px; height: 36px; color: inherit; }
.tel-appbar-actions .carte-menu-liste { z-index: 8; }
.tel-appbar-actions .carte-menu-liste .ico { width: 16px; height: 16px; margin-right: 10px; color: var(--muted); }
.sms-evenement {
align-self: center;
max-width: 90%;
margin: 4px auto;
color: var(--muted);
font-size: 12px;
line-height: 1.4;
text-align: center;
overflow-wrap: anywhere;
}
.sms-evenement span { color: var(--faint); }
.tel-details { padding: 14px 12px 20px; }
.tel-details-tete { display: grid; justify-items: center; gap: 4px; margin-bottom: 12px; text-align: center; }
.tel-details-pastille {
display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
font-size: 22px;
}
.tel-details-nom { margin: 6px 0 0; font-family: var(--font-title); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.tel-details-qui { margin: 0; color: var(--muted); font-size: 12.5px; }
.tel-details-gestes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 8px; }
.tel-details-gestes form { margin: 0; }
.tel-details-geste {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
border: 1px solid var(--line-strong); border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
.tel-details-geste .ico { width: 15px; height: 15px; color: var(--muted); }
.tel-details-geste[aria-pressed='true'] { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); }
.tel-details-bloc { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.tel-details-bloc h3 { margin: 0 0 6px; font-size: 14px; }
.tel-details-bloc .tel-note { margin: 6px 0 0; }
.tel-details-ligne { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tel-details-ligne .field { flex: 1 1 auto; min-width: 0; }
.tel-details-ligne .tel-bouton { width: auto; flex: none; margin: 0; padding: 9px 14px; }
.tel-lien {
margin-top: 6px; padding: 6px 0; border: 0; background: none; color: var(--accent-ink);
font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer;
}
.tel-surnoms { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.tel-surnom { display: flex; align-items: flex-start; gap: 10px; }
.tel-surnom-visage {
display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
object-fit: cover; font-size: 12px;
}
.tel-surnom-form { display: grid; gap: 4px; flex: 1 1 auto; min-width: 0; margin: 0; }
.tel-surnom-nom { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.compte-onglets { margin: 6px 0 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.compte-onglets::-webkit-scrollbar { display: none; }
.compte-onglets a { flex: none; }
@media (max-width: 420px) { .compte-onglets a { padding: 8px 9px; } }
.compte-moi { display: flex; align-items: center; gap: 14px; margin: 10px 0 12px; }
.compte-moi .compte-moi-photo { width: 64px; height: 64px; flex: none; }
.compte-moi .compte-moi-photo .pub-initiales { font-size: 22px; }
.compte-moi-qui { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.compte-moi-qui b { font-size: 17px; overflow-wrap: anywhere; }
.univers-carte-place {
display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: var(--rayon-pilule);
background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 600;
}
.pf-apercu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; }
.pf-apercu .chips { margin: 0; }
.pf-apercu-dit { flex-basis: 100%; }
.theme-espace :is(.pf-carte, .pf-une, .pf-une-objet, .pub, .onglets-liens,
.carte-menu-liste, .ghost, .pf-composeur, .fiche-carte, .succes,
.pf-univers-lien, .pf-retouche-geste, .pf-retouche-form,
.scene, .card, .composer, .note-box) {
--ink: var(--th-encre);
--muted: var(--th-doux);
--faint: var(--th-doux);
--line: var(--th-trait);
--line-strong: var(--th-trait-fort);
--accent-ink: var(--th-accent-texte);
color: var(--ink);
}
.jeu-theme-volet { margin: 12px 0 4px; }
.theme-volet-note { margin: 0 0 10px; }
.carte-menu-liste :is(a, button) > .ico, .carte-menu-liste :is(a, button) > .ico { margin: 0; flex: none; }
.carte-menu-liste a, .carte-menu-liste button { gap: 10px; }
@media (max-width: 640px) {
.carte-menu-liste, .fp-actes .carte-menu-liste, .carte-menu-liste {
position: fixed; left: 12px; right: 12px; top: auto;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
z-index: 120; min-width: 0; max-height: 70dvh; overflow-y: auto;
border-radius: var(--rayon-l);
}
.carte-menu-note { max-width: none; }
}
.compte-onglets + .reglages-bloc, .compte-onglets + .compte-voir-comme { margin-top: 0; }
.compte-voir-comme { margin: 0 0 10px; }
.section.reglages-bloc + .section.reglages-bloc { margin-top: 14px; }
.reglages-bloc > h2 { margin: 0 0 6px; }
.reglages-titre { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.reglages-titre > h2, .reglages-titre > h3 { margin: 0; }
.titre-info { margin: 0 0 12px; }
.titre-info > h1 { margin: 0; }
.reglages {
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
padding: 0 12px;
min-width: 0;
}
.reglage {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 6px 0;
border-top: 1px solid var(--line);
font-size: 14px;
min-width: 0;
}
.reglages > .reglage:first-child,
.reglages > :not(.reglage):first-child + .reglage { border-top: 0; }
.reglage-nom { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.reglage-nom label { cursor: pointer; }
.reglage-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reglage-texte .mine { margin: 0; }
.reglage-valeur { flex: 0 1 auto; min-width: 0; text-align: right; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.reglage-valeur b { color: var(--ink); }
.reglage-note { display: block; font-size: 11.5px; color: var(--faint); }
.reglage > .field { flex: none; width: auto; min-width: 0; max-width: min(62%, 260px); margin: 0; }
.reglage > form { margin: 0; flex: none; }
.reglage .acte-enregistrer { margin: 0; justify-content: flex-end; }
.reglage .blocage-actes { flex: none; }
.reglage-suite { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 0 8px; }
.reglage-suite .acte-enregistrer { margin: 0; }
.reglages .info-bulle:not(.info-bulle-flottante) { margin: 0 0 8px; }
.compte-courriel { overflow-wrap: anywhere; }
.compte-ligne .compte-moi-photo { width: 40px; height: 40px; display: inline-grid; vertical-align: middle; }
.compte-ligne .compte-moi-photo .pub-initiales { font-size: 15px; }
.compte-crayon {
flex: none;
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
margin-right: -6px;
border-radius: 50%;
color: var(--muted);
text-decoration: none;
}
.compte-crayon:hover, .compte-crayon[aria-expanded='true'] { color: var(--ink); background: var(--surface-2); }
.compte-crayon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.compte-crayon .ico { width: 17px; height: 17px; }
.compte-ligne-dit { display: block; margin: -4px 0 8px; font-size: 13px; }
.compte-edition { padding: 0 0 12px; }
.compte-edition .lab-ligne:first-of-type { margin-top: 0; }
.compte-edition .field { max-width: 420px; }
.compte-edition .mdp-paire { max-width: 560px; }
.compte-edition .acte-enregistrer { margin-top: 10px; }
.interrupteur {
-webkit-appearance: none;
appearance: none;
flex: none;
position: relative;
width: 44px;
height: 26px;
margin: 0;
border-radius: var(--rayon-pilule);
background: var(--line-strong);
cursor: pointer;
transition: background .16s ease;
}
.interrupteur::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--interrupteur-pastille);
box-shadow: 0 1px 2px var(--noir-25);
transition: transform .16s ease;
}
.interrupteur:checked { background: var(--accent); }
.interrupteur:checked::before { transform: translateX(18px); }
.interrupteur:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.interrupteur:disabled { opacity: .55; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .interrupteur, .interrupteur::before { transition: none; } }
.acte-enregistrer.acte-auto { margin-top: 4px; min-height: 0; }
.acte-enregistrer.acte-auto:not(:has(.acte-dit)) { margin: 0; }
.pseudo-dispo { display: flex; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 12.5px; font-weight: 600; }
.pseudo-dispo:empty { display: none; }
.pseudo-dispo[data-etat='libre'] { color: var(--en-ligne-texte); }
.pseudo-dispo[data-etat='pris'], .pseudo-dispo[data-etat='court'] { color: var(--warn); }
.pseudo-dispo .ico { width: 15px; height: 15px; }
.naissance-fixe { margin: 6px 0 0; color: var(--warn); }
@media (max-width: 479px) {
.reglages { padding: 0 10px; }
.reglage > .field { font-size: 13.5px; }
}
:is(.page-colonne, .page-lecture, .page-etroit, .page-large) .section.reglages-bloc.reglages-bloc:not(.section .section) {
padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
}
:is(.page-colonne, .page-lecture, .page-etroit, .page-large) .section.reglages-bloc.reglages-bloc:not(.section .section) > h2:first-child,
.reglages-titre > h2 {
margin: 0 0 6px; padding: 0; border: 0; border-radius: 0; background: none;
font-family: var(--font-title); font-size: 16.5px; font-weight: 600;
}
.reglages-titre > h2 { margin: 0; }
:is(.page-colonne, .page-lecture, .page-etroit, .page-large) .section.reglages-bloc + .section.reglages-bloc { margin-top: 14px; }
:is(.page-colonne, .page-lecture, .page-etroit, .page-large) .reglage > .field { min-height: 38px; padding: 6px 10px; }
.jl-suivi-nom[data-info-ancre] { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.jl-suivi { padding: 8px 0; }
.theme-espace.univers-theme {
--paper: var(--th-fond-pages);
--ink: var(--th-encre);
--muted: var(--th-doux-pages);
--faint: var(--th-doux-pages);
--line: var(--th-trait-pages);
--line-strong: var(--th-trait-fort);
--accent-ink: var(--th-accent-pages);
background: var(--th-fond-pages);
color: var(--ink);
flex: 1 0 auto;
}
.scroll-corps:has(> .univers-theme) { display: flex; flex-direction: column; }
.jeu-partir { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jeu-partir > form { margin: 0; }
.potins-titre { display: flex; align-items: center; gap: 10px; }
.potins-voix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; }
.potins-titre .pnj-voix-photo.crest { width: 44px; height: 44px; margin: 0; font-size: 15px; flex: none; }
.difference { display: grid; gap: 10px; margin: 8px 0 12px; }
.difference-champ { display: grid; gap: 3px; min-width: 0; }
.difference dt { font-weight: 700; font-size: 13.5px; }
.difference dd { margin: 0; overflow-wrap: anywhere; line-height: 1.55; }
.difference del, .difference-legende del {
text-decoration: line-through; text-decoration-thickness: 1.5px;
color: var(--muted); background: color-mix(in srgb, var(--warn) 12%, transparent); border-radius: 3px; padding: 0 2px;
}
.difference ins, .difference-legende ins {
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 3px; padding: 0 2px;
}
.difference-legende { margin: 6px 0 0; font-size: 12.5px; }
.difference-marques { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.difference-marques span { display: inline-block; min-width: 9em; }
.difference-images { display: flex; flex-wrap: wrap; gap: 12px; }
.difference-image { margin: 0; display: grid; gap: 4px; }
.difference-image img, .difference-aucune {
width: 96px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--line);
}
.difference-aucune { display: grid; place-items: center; color: var(--muted); font-size: 12.5px; background: var(--surface-2); }
.carte-menu-titre { margin: 6px 12px 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.carte-menu-gris {
position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
color: var(--muted); font-size: 14px;
}
.carte-menu-gris > span[aria-disabled] { display: flex; align-items: center; gap: 10px; opacity: .6; }
.carte-menu-liste .carte-menu-gris .info-i {
display: inline-flex; width: 18px; height: 18px; min-height: 0; padding: 0;
border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-2); font-size: 12px;
}
.carte-menu-gris .info-bulle-flottante { left: 12px; right: 12px; max-width: none; width: auto; }
.carte-menu-liste > .info-bulle:not(.info-bulle-flottante) { margin: 0 12px 6px; }
.difference del + ins, .difference ins + del { margin-left: 4px; }
.reglages > form { margin: 0; min-width: 0; }
.reglages > form:first-child > .reglage:first-of-type { border-top: 0; }
.reglages > form > .acte-auto:has(.acte-dit) { padding: 0 0 8px; }
.reglage-nom .reglage-note { flex-basis: 100%; }
.reglage-texte > a { font-weight: 600; overflow-wrap: anywhere; }
.fil-niveaux .reglage > .field { max-width: min(46%, 180px); }
.reglage-pile .reac-rapides { margin: 0 0 8px; gap: 6px; }
.reglage-pile .reac-rapides .reac-rapide { width: 52px; font-size: 19px; }
#ordre > .reglage { flex-wrap: wrap; }
#ordre > .reglage > .reglage-nom { flex: 1 1 12em; }
#ordre > .reglage > .field { max-width: 100%; }
.reglage-pile .acte-enregistrer { margin: 0 0 4px; }
.reglage-pile .pub-lien { margin: 0 0 10px; }
.appareils-reglages { margin-top: 10px; }
.appareils-etat { margin: 0 0 8px; }
.appareils-etat:empty { display: none; }
#push-bouton { flex: none; }
#heure > .acte-enregistrer { margin: 0 0 10px; }
#heure > [data-fuseau-suggestion] { margin: 0 0 8px; }
.fil-niveaux .reglage-nom, #alertes .reglage-nom:has(> label), #lire-ecrire .reglage-nom:has(> label) { display: block; }
.fil-niveaux .reglage-nom .info-i, #alertes .reglage-nom .info-i, #lire-ecrire .reglage-nom .info-i { vertical-align: middle; margin-left: 2px; }
.export-donnees .reglages { margin: 0; }
.export-ligne label { cursor: pointer; }
.export-ligne .export-compteur { font-size: 12.5px; }
.export-case { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.export-tout .reglage-nom { font-weight: 600; }
.export-acte { margin: 12px 0 0; }
.export-acte .btn { width: 100%; justify-content: center; }
@media (min-width: 600px) { .export-acte .btn { width: auto; } }
.onglets-liens { align-items: stretch; gap: 2px 4px; }
.onglets-liens[hidden] { display: none; }
.onglets-liens a {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
border-bottom: 2px solid transparent; font-weight: 500; white-space: nowrap;
}
.onglets-liens a[aria-current='page'], .onglets-liens a[aria-selected='true'] {
color: var(--ink); font-weight: 600; box-shadow: none; border-bottom-color: var(--accent);
}
.onglets-liens a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.onglets-n {
padding: 0 6px; border-radius: var(--rayon-pilule); background: var(--surface-2);
color: var(--muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.onglets-liens a[aria-current='page'] .onglets-n, .onglets-liens a[aria-selected='true'] .onglets-n {
background: var(--accent-soft); color: var(--accent-ink);
}
@media (max-width: 420px) {
.onglets-liens a { padding: 0 9px; font-size: 13.5px; }
}
.fp-onglets > .onglets-liens { flex: 1 1 auto; flex-wrap: nowrap; margin: 0; border-bottom: 0; }
.pf-onglets > .onglets-liens { margin: 0; padding: 0 10px; background: var(--surface-2); }
.profil-pages-onglets { margin: 20px 0 16px; }
.salon-onglets { margin: 14px 0 0; }
.up-onglets-page { margin: 18px 0 0; }
.chip {
display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 12px;
font: inherit; font-size: 13px; line-height: 1.2; white-space: nowrap;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed='true']:hover, .barre-filtres-pose > .barre-filtres-choix:hover { color: var(--paper); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip .ico { width: 14px; height: 14px; }
.chip-nombre {
padding: 0 6px; border-radius: var(--rayon-pilule); background: var(--surface-2);
color: var(--muted); opacity: 1; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.chip[aria-pressed='true'] .chip-nombre { background: var(--paper); color: var(--ink); }
.chips { align-items: center; }
.chips-titre { flex: 0 0 auto; min-width: 108px; }
@media (max-width: 560px) {
.chips-titre { flex: 1 0 100%; min-width: 0; }
}
.annonces-filtres .chips { margin: 0 0 8px; }
.carte-menu-bouton .ico { width: 20px; height: 20px; }
.carte-menu-bouton.btn { min-width: 44px; padding: 0 12px; }
@media (min-width: 641px) {
.carte-menu-bas .carte-menu-liste { top: calc(100% + 6px); bottom: auto; }
}
.carte-menu-liste:has(.carte-menu-motif[open]) { min-width: 280px; }
.carte-menu-liste .carte-menu-motif-envoyer { justify-content: center; background: var(--warn); color: var(--paper); font-weight: 650; }
.carte-menu-motif > summary { list-style: none; gap: 10px; cursor: pointer; }
.carte-menu-motif > summary::-webkit-details-marker { display: none; }
.carte-menu-motif > summary .ico { width: 17px; height: 17px; color: var(--warn); }
.menu-reponse > .carte-menu-bouton { min-width: 32px; min-height: 32px; padding: 0 6px; }
.menu-reponse > .carte-menu-bouton .ico { width: 18px; height: 18px; }
.menu-reponse .carte-menu-liste { min-width: 170px; }
.pub-tete > .carte-menu, .scene-carte-tete > .carte-menu { flex: none; }
summary.btn { list-style: none; cursor: pointer; }
summary.btn::-webkit-details-marker { display: none; }
.fiche-carte-nom-seul .fiche-carte-corps { padding-bottom: 12px; }
.fiche-carte .fiche-portrait-vide.fiche-logo { font-size: 34px; }
:is(.groupe-membre, .choix-ligne, .rech-liste li, .ami, .item, .up-membres li) > .pub-avatar { flex: none; width: 34px; height: 34px; }
:is(.groupe-membre, .choix-ligne, .rech-liste li, .ami, .item, .up-membres li) > .pub-avatar .pub-initiales { font-size: 13px; }
.evta-feuille, .evta-photo, .evta-commandes, .evta-ajout-carte, .evta-fil-tuile, .evta-modifier-apercu { aspect-ratio: 3 / 4; }
.abo-onglets { margin: 4px 0 10px; }
.abo-ligne > .abo-photo { flex: none; }
.abo-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; font-size: 14px; }
.abo-couverture { width: 32px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.abo-couverture-vide { display: grid; place-items: center; color: var(--muted); }
.abo-couverture-vide .ico { width: 16px; height: 16px; }
.abo-portrait { width: 36px; height: 48px; border-radius: 8px; object-fit: cover; display: grid; place-items: center; color: var(--sur-accent); font-size: 13px; font-weight: 600; }
.abo-tout { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.tout-regler-titre { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.tout-regler-mot { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tout-regler .chips { margin: 0; }
.tout-regler .chip:disabled { opacity: .45; cursor: not-allowed; }
#tout-regler .acte-enregistrer { margin-top: 6px; }
.pf-absence { margin: 4px 0 0; }
.mess-absence { margin: 8px 14px 0; }
.absence-sorte { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.absence-sorte legend { padding: 0; margin-bottom: 4px; }
.up-anniversaires { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.up-anniversaires li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
background: var(--surface-2); font-size: 14.5px; }
.up-anniversaires .ico { flex: none; width: 18px; height: 18px; }
.up-anniversaires a { color: inherit; text-decoration: none; }
.up-anniversaires a:hover { text-decoration: underline; }
.scroll-corps:has(> .fic-theme) { display: flex; flex-direction: column; }
.theme-espace.fic-theme { flex: 1 0 auto; }
.fic-tete-couverture .fic-banniere {
width: 100%; height: 100%; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 0;
}
.fic-tete-livre-boite { margin-top: -64px; }
.fic-tete-livre { width: 104px; border: 4px solid var(--paper); border-radius: 5px 9px 9px 5px; }
.fic-tete-page .pf-qui .sub { margin-top: 4px; }
.fic-epingles .fic-ecrire-note { margin: 0; }
.fic-tete-page .carte-menu-liste { min-width: 250px; }
.fic-epingles form { display: inline; margin: 0; }
.up-blocs > .fic-illustrations { margin-top: 0; }
.up-blocs > .fic-alertes .etiquettes { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 0; }
.fic-alerte-phrase { margin: 8px 0 0; }
.fic-bref .up-chiffre b { text-transform: none; }
.fic-bref .vide { margin: 12px 0 0; }
.fic-chapitres-liste .item:last-child { border-bottom: 0; }
.fic-commentaires-page .fic-com:last-child { border-bottom: 0; padding-bottom: 0; }
.fic-personnages .fiches-grille { margin-top: 10px; }
@media (max-width: 720px) {
.fic-tete-livre-boite { margin-top: 0; }
.fic-tete-livre { width: 78px; }
}
.jeu-page .carte-menu-liste { min-width: 260px; }
.jeu-page .up-epingles form { display: inline; margin: 0; }
.jeu-page .up-corps > .section > .scene:first-child { margin-top: 0; }
.fp-portrait-logo .fp-portrait-image { aspect-ratio: 1; border-radius: 22px; }
.fp-portrait-logo .lieu-logo-vide {
display: grid; place-items: center; width: 100%; height: auto;
font: 600 34px/1 var(--font-title); color: var(--accent-ink);
background: color-mix(in oklab, var(--teinte, var(--accent)) 22%, var(--surface-2));
}
.fp .lieu-etiqs { margin: 8px 0 0; }
.fp-bloc .lieu-accord { margin: 6px 0 0; }
.histoire-carte-boite { position: relative; min-width: 0; }
.histoire-carte-boite > .histoire-carte { height: 100%; padding-right: 52px; }
.histoire-carte-boite > .histoire-carte-menu { position: absolute; top: 8px; right: 8px; }
.histoire-carte-menu .carte-menu-liste { min-width: 240px; }
.histoire-carte-alertes { display: flex; flex-wrap: wrap; gap: 4px; }
.fic-bibliotheque-grille > .fic-repli { min-width: 0; margin: 0; }
.visages-filtres .visages-pastilles { margin: 0; }
.visages-recherche { display: grid; gap: 10px; margin-top: 4px; }
.visages-recherche .visages-menus { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.count {
display: inline-block; flex: none; padding: 0 6px; border-radius: var(--rayon-pilule);
background: var(--surface-2); color: var(--muted);
font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; line-height: 1.6;
font-variant-numeric: tabular-nums; vertical-align: middle;
}
.count.count-vif { background: var(--accent); color: var(--sur-accent); }
.count.count-alerte { background: var(--warn); color: var(--surface); }
.fic-reprendre-ou { margin-left: 6px; font-weight: 500; opacity: .8; }
.fic-reprendre-ou::before { content: "· "; }
.fic-chapitres-liste .fic-chapitre-en-cours {
margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: var(--rayon);
background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.fic-chapitres-liste .fic-chapitre-lu .item-name { color: var(--muted); }
.fic-etiq-lu { display: inline-flex; align-items: center; gap: 4px; }
.fic-etiq-lu .ico { width: 13px; height: 13px; }
.prose[data-lecture] { position: relative; }
.fic-reprendre-marque { position: absolute; left: 0; width: 1px; height: 1px; scroll-margin-top: 96px; }
.fic-livre .livre-bloc { margin-top: 12px; }
.fic-livre .mots-attente { margin-top: 12px; }
.fic-livre-reglage { margin: 14px 0 0; }
.fic-tete-chapitre .fic-tete-livre-boite { margin-top: -44px; }
.fic-tete-chapitre .fic-tete-livre { width: 72px; }
.fic-tete-chapitre .fic-avec { margin: 4px 0 0; }
.fic-nav-chapitre { margin-top: 12px; }
.fic-nav-chapitre .fic-retour span { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
.fic-tete-chapitre .fic-tete-livre-boite { margin-top: 0; }
.fic-tete-chapitre .fic-tete-livre { width: 58px; }
.fic-nav-chapitre .fic-retour { flex: 1 1 100%; }
}
.td-persos { position: relative; height: 76px; margin: -6px -16px 0; overflow: hidden; }
.td-perso {
position: absolute;
top: 10px;
left: 50%;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: inherit;
cursor: pointer;
opacity: .62;
transform: translateX(calc(-50% + var(--place, 0) * 60px)) scale(.74);
transition: transform .35s cubic-bezier(.3, .8, .3, 1), opacity .35s;
}
.td-perso:hover,
.td-perso:focus-visible { opacity: .9; }
.td-perso-actif { opacity: 1; transform: translateX(-50%) scale(1); }
.td-perso:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.td-visage {
position: relative;
display: grid;
place-items: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--surface-2);
color: var(--sur-photo);
font-size: 15px;
font-weight: 600;
line-height: 1;
}
.td-visage img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.td-perso-actif .td-visage { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); }
.td-univ {
position: absolute;
left: -5px;
bottom: -3px;
display: grid;
place-items: center;
min-width: 20px;
height: 18px;
padding: 0 3px;
overflow: hidden;
border-radius: 6px;
background: var(--ink);
color: var(--sur-photo);
font-size: 9px;
font-weight: 700;
letter-spacing: .02em;
line-height: 18px;
box-shadow: 0 0 0 2px var(--paper);
}
.td-univ img { width: 20px; height: 18px; margin: 0 -3px; border-radius: 0; object-fit: cover; }
.td-perso-n {
position: absolute;
top: -4px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--rayon-pilule);
background: var(--warn);
color: var(--sur-photo);
font-size: 10.5px;
font-weight: 600;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px var(--paper);
}
@media (prefers-reduced-motion: reduce) {
.td-perso { transition: none; }
}
.td-qui { position: relative; margin: 6px 0 18px; text-align: center; }
.td-qui-nom { display: block; font-family: var(--font-title); font-size: 17px; font-weight: 600; line-height: 1.25; }
.td-qui-ligne { display: inline-flex; align-items: center; gap: 2px; color: var(--faint); font-size: 12px; }
.tel-ecran-fond .td-qui-nom,
.tel-ecran-fond .td-qui-ligne { color: var(--sur-photo); text-shadow: 0 1px 3px color-mix(in srgb, var(--bandeau) 65%, transparent); }
.tel-ecran-fond .td-perso-actif .td-visage { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bandeau) 25%, transparent), 0 0 0 5px var(--sur-photo); }
.tel-ecran-fond .td-univ,
.tel-ecran-fond .td-perso-n { box-shadow: none; }
.td-appbar .td-sortir { margin-left: auto; }
.tel-sortir {
position: relative;
flex: 0 0 auto;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--rayon-s);
background: none;
color: var(--muted);
font: inherit;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.tel-sortir::before { content: ''; position: absolute; inset: -6px; }
.tel-sortir:hover { background: var(--surface); color: var(--ink); }
html.td-dans-fenetre .tel-sortir { display: none; }
.td-bas .td-taille { grid-column: 1; }
.td-reduire {
position: relative;
display: grid;
grid-column: 3;
place-items: center;
width: 44px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--rayon-s);
background: none;
color: var(--muted);
cursor: pointer;
}
.td-reduire::before { content: ''; position: absolute; inset: -6px 0; }
.td-reduire:hover { background: var(--surface); color: var(--ink); }
.td-chevron {
width: 9px;
height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
}
.tel-verrou-qui { margin: 4px 0 0; font-size: 12.5px; opacity: .85; }
.tel-verrou-date:empty,
.tel-verrou-qui:empty { display: none; }
.tel-cadenas {
position: relative;
display: none;
place-items: center;
width: 24px;
height: 20px;
padding: 0;
border: 0;
border-radius: 6px;
background: none;
color: inherit;
cursor: pointer;
}
.tel-cadenas::before { content: ''; position: absolute; inset: -12px -10px; }
.tel-cadenas .ico { width: 13px; height: 13px; }
@media (max-width: 899px) {
.tel-cadenas { display: inline-grid; }
}
.tel-verrouille .tel-cadenas { color: var(--sur-photo); }
@media (min-width: 600px) and (max-width: 899px) {
.td-tel .tel-cadenas { display: none; }
}
.td-tel .tel-veille-bouton {
right: -5px;
width: 5px;
height: 46px;
border: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
border-left: 0;
border-radius: 0 3px 3px 0;
background: color-mix(in srgb, var(--accent) 60%, var(--surface-2));
transition: width .15s, right .15s, background .15s;
}
.td-tel .tel-veille-bouton:hover,
.td-tel .tel-veille-bouton:focus-visible { right: -7px; width: 7px; background: var(--accent); }
.td-tel .tel-veille-bouton:active { right: -4px; }
@media (prefers-reduced-motion: reduce) {
.td-tel .tel-veille-bouton { transition: none; }
}
.td-fen { width: 380px; }
.td-fen-tete { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.2; }
.td-fen-titre { flex: 0 0 auto; }
.td-marque {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 1px 6px 1px 1px;
border-radius: var(--rayon-pilule);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.td-visage-petit { width: 18px; height: 18px; font-size: 8px; }
.td-marque .td-univ { position: static; min-width: 0; height: 14px; padding: 0 3px; border-radius: 4px; font-size: 8px; line-height: 14px; box-shadow: none; }
.td-marque .td-univ img { width: 16px; height: 14px; }
.td-trait { display: block; width: 10px; height: 2px; margin: 0 auto; border-radius: 1px; background: currentColor; }
.td-fen-bouton { display: grid; place-items: center; }
.td-reduites {
right: 84px;
left: 16px;
flex-wrap: wrap-reverse;
justify-content: center;
max-width: none;
pointer-events: none;
transform: none;
}
.td-reduites > * { pointer-events: auto; }
.td-pastille-fen {
display: flex;
align-items: center;
gap: 2px;
max-width: 260px;
padding: 3px;
}
.td-pf-ouvrir {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 2px 4px;
border: 0;
background: none;
color: inherit;
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.td-pf-origine {
flex: 0 0 auto;
padding: 1px 7px;
border-radius: var(--rayon-pilule);
background: var(--surface-2);
color: var(--muted);
font-size: 10.5px;
font-weight: 600;
}
.td-pastille-fen[data-origine='telephone'] .td-pf-origine { background: var(--accent-soft); color: var(--accent-ink); }
.td-pf-titre { max-width: 130px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-reduites-serre .td-pf-titre { max-width: 80px; }
.td-pf-fermer {
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--faint);
cursor: pointer;
}
.td-pf-fermer::before { content: ''; position: absolute; inset: -6px; }
.td-pf-fermer:hover { background: var(--surface-2); color: var(--ink); }
.td-pf-fermer .ico { width: 11px; height: 11px; }
.cb-fil-reduire {
position: relative;
display: grid;
flex: 0 0 auto;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--rayon-s);
background: none;
color: var(--muted);
cursor: pointer;
}
.cb-fil-reduire::before { content: ''; position: absolute; inset: -6px -2px; }
.cb-fil-reduire:hover { background: var(--surface-2); color: var(--ink); }
@media (max-width: 899px) {
.td-reduites { right: 76px; left: 76px; }
body.td-fen-ouverte .td-reduites { display: none; }
}
@media (max-width: 599px) {
.td-tel { z-index: 2; }
#tel-dock .td-tel { height: auto; max-width: none; aspect-ratio: auto; }
.td-tel { bottom: env(safe-area-inset-bottom, 0px); }
#tel-dock:has(.td-appareil:not([hidden])) { z-index: 65; }
#tel-dock:has(.td-appareil:not([hidden])) .td-bulle { visibility: hidden; }
body:has(#tel-dock .td-appareil:not([hidden])) .td-reduites { display: none; }
.td-fen,
.td-fen.td-fen-grande {
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100svh !important;
max-width: none;
max-height: none;
border: 0;
border-radius: 0;
transform: none;
}
.td-fen-agrandir { display: none; }
.td-fen-barre { padding-top: max(7px, env(safe-area-inset-top, 0px)); }
}
.fiche-tel { display: grid; gap: 4px; margin: 8px 0 0; }
.fiche-tel-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; font-size: 13px; color: var(--muted); }
.fiche-tel-ligne label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.tel-potins { padding: 12px 14px 24px; }
.tel-potins .potins-titre { font-size: 20px; }
.barre-filtres { margin: 14px 0 12px; }
.barre-filtres-ligne { display: flex; align-items: center; gap: 8px; }
.barre-filtres-recherche { flex: 1 1 auto; min-width: 0; }
.barre-filtres-recherche form { margin: 0; }
.barre-filtres-recherche .field { margin: 0; }
.barre-filtres-groupe .chips { margin: 0 0 10px; }
.barre-filtres-titre { margin: 8px 0 6px; }
.barre-filtres-ouvrir, .barre-filtres-actifs, .barre-filtres-tete, .barre-filtres-pied { display: none; }
.barre-filtres-ouvrir { flex: none; gap: 6px; white-space: nowrap; }
.barre-filtres-ouvrir .ico { width: 17px; height: 17px; }
.barre-filtres-n { font-weight: 650; color: var(--accent-ink); }
.barre-filtres-actif { display: inline-flex; align-items: center; gap: 4px; padding-right: 7px; }
.barre-filtres-actif .ico { width: 13px; height: 13px; }
.barre-filtres-tete { align-items: center; justify-content: space-between; padding: 4px 4px 8px 8px; }
.barre-filtres-fermer { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rayon-pilule); color: var(--muted); }
.barre-filtres-fermer:hover { background: var(--surface-2); color: var(--ink); }
.barre-filtres-fermer .ico { width: 18px; height: 18px; }
.avis-visiteur-court { display: none; }
@media (max-width: 640px) {
.barre-filtres { margin: 10px 0 8px; }
.barre-filtres-ouvrir { display: inline-flex; align-items: center; min-height: 44px; }
.barre-filtres-actifs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.barre-filtres-feuille { display: none; }
.barre-filtres:not(.avec-script) .barre-filtres-feuille:is(:target, :has(:target)),
.barre-filtres-feuille.ouverte {
display: flex; flex-direction: column;
position: fixed; left: 12px; right: 12px; top: auto;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
z-index: 120; max-height: 70dvh; padding: 6px;
border: 1px solid var(--line-strong); border-radius: var(--rayon-l); background: var(--surface);
box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 18%, transparent);
}
.barre-filtres-tete { display: flex; flex: none; }
.barre-filtres-groupes { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px; }
.barre-filtres-pied {
display: flex; flex: none; gap: 8px; padding: 10px 4px 4px; border-top: 1px solid var(--line);
}
.barre-filtres-pied .btn { flex: 1 1 0; justify-content: center; }
.avis-visiteur {
margin: 8px 0 0; padding: 0; border: 0; background: none;
font-size: 12.5px; line-height: 1.4;
}
.avis-visiteur-long { display: none; }
.avis-visiteur-court { display: inline; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
.carte-menu[open] > .carte-menu-liste,
.barre-filtres-feuille.ouverte,
.barre-filtres:not(.avec-script) .barre-filtres-feuille:target { animation: feuille-monte .18s ease-out; }
}
@keyframes feuille-monte { from { opacity: 0; transform: translateY(16px); } }
.theme-espace .barre-filtres-feuille {
--ink: var(--th-encre);
--muted: var(--th-doux);
--faint: var(--th-doux);
--line: var(--th-trait);
--line-strong: var(--th-trait-fort);
--accent-ink: var(--th-accent-texte);
}
.barre-filtres-choix, .barre-filtres-loupe { display: none; }
.barre-filtres-repliee .barre-filtres-groupe::details-content { content-visibility: visible; }
@media (max-width: 640px) {
.barre-filtres-groupe::details-content { content-visibility: visible; }
}
@media (min-width: 641px) {
.barre-filtres:not(.barre-filtres-repliee) {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.barre-filtres:not(.barre-filtres-repliee) :is(.barre-filtres-feuille, .barre-filtres-groupes, .barre-filtres-pied) { display: contents; }
.barre-filtres:not(.barre-filtres-repliee) :is(.barre-filtres-voir, .barre-filtres-titre) { display: none; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-groupe { order: 1; position: relative; margin: 0; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-effacer { order: 2; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-ligne { order: 3; flex: 0 1 260px; min-width: 180px; margin-left: auto; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-ligne:not(:has(.barre-filtres-recherche)) { display: none; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-en-ligne { order: 4; margin-left: auto; }
.barre-filtres:not(.barre-filtres-repliee):has(.barre-filtres-recherche) .barre-filtres-en-ligne { margin-left: 0; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-apres { order: 5; flex: 1 0 100%; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-apres > :first-child { margin-top: 0; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-recherche { position: relative; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-recherche form { margin: 0; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-recherche .field { min-height: 36px; padding: 6px 11px 6px 32px; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-loupe {
display: block; position: absolute; left: 10px; top: 50%; width: 16px; height: 16px;
margin-top: -8px; color: var(--muted); pointer-events: none;
}
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-choix { display: inline-flex; gap: 4px; list-style: none; user-select: none; }
.barre-filtres-choix::-webkit-details-marker { display: none; }
.barre-filtres-choix-valeur { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }
.barre-filtres-pose > .barre-filtres-choix .barre-filtres-choix-valeur { color: inherit; }
.barre-filtres-choix .ico { width: 12px; height: 12px; margin-left: 2px; }
.barre-filtres-groupe[open]:not(.barre-filtres-pose) > .barre-filtres-choix { border-color: var(--ink); color: var(--ink); }
.barre-filtres-groupe[open] > .barre-filtres-choix .ico { transform: rotate(-90deg); }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste {
position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
min-width: 220px; max-width: min(420px, 90vw); max-height: 60vh; overflow-y: auto; padding: 6px;
border: 1px solid var(--line-strong); border-radius: var(--rayon); background: var(--surface);
box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 18%, transparent);
}
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste .chips {
flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px; margin: 0; overflow: visible;
}
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste .chips-titre { display: none; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste .chip {
justify-content: flex-start; width: 100%; min-height: 36px; padding: 0 12px;
border-color: transparent; border-radius: var(--rayon-s); color: var(--ink);
}
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste .chip:hover { background: var(--surface-2); }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste .chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste .chip-nombre { margin-left: auto; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste:has(form) { width: max-content; padding: 10px 12px; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste form { margin: 0; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-en-ligne form { margin: 0; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-en-ligne select.field { width: auto; min-height: 36px; margin: 0; padding-block: 6px; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-effacer {
min-height: 36px; padding: 0 6px; border: 0; background: none; box-shadow: none;
color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-effacer:hover { color: var(--ink); }
}
@media (max-width: 640px) {
.fic-portes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.fic-portes > p { margin: 0 !important; }
.fic-portes > p.mine { display: none; }
.fic-portes .btn { min-height: 40px; padding-left: 8px; padding-right: 8px; font-size: 14px; }
}
.jsp-page-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.jsp-page-tete h1 { margin-right: auto; }
.jsp-neuve { border-left: 3px solid var(--accent); padding-left: 10px; }
.jeu-rond .jeu-icone .ico { width: 22px; height: 22px; }
.fil-groupe-titre { margin: 14px 0 6px; color: var(--muted); font: 600 13px var(--font-ui); letter-spacing: .02em; }
.fil-niveaux > .fil-groupe-titre:first-of-type { margin-top: 4px; }
.retrait-pourquoi { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--ink); }
.retrait-groupe { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.retrait-groupe > legend { display: flex; align-items: center; gap: 8px; padding: 0; }
.retrait-reponse { align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.retrait-reponse > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.retrait-extrait { display: block; overflow-wrap: anywhere; }
.retrait-a-trancher .retrait-tours { margin-top: 6px; }
.retrait-tour { padding: 8px 0; border-top: 1px solid var(--line); }
.retrait-tour p { margin: 0 0 4px; }
.retrait-gestes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }
.retrait-gestes .geste-motive[open] { flex-basis: 100%; }
.retrait-gestes .geste-motive form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.idee-details fieldset { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.idee-precision { padding: 10px 0; border-top: 1px solid var(--line); }
.idee-capture { display: block; max-width: 100%; max-height: 360px; margin-top: 8px; border-radius: var(--rayon-s); border: 1px solid var(--line); }
.reglage-mes-themes { flex-wrap: wrap; }
.mes-themes-pastilles { flex: 1 1 280px; justify-content: flex-end; }
@media (max-width: 599px) {
.mes-themes-pastilles { justify-content: flex-start; flex-basis: 100%; }
}
.carte-menu-liste .menu-inactif { display: block; padding: 8px 12px; color: var(--muted); cursor: default; }
.image-retiree { display: block; font-style: italic; margin-top: 4px; }
@media (max-width: 640px) {
.accueil-fil > .carte-statuts { margin-bottom: 8px; }
.accueil-fil > .qdn { margin-bottom: 10px; }
}
.jeu-dernier-depart { margin-top: 14px; }
.jeu-dernier-depart .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jeu-dernier-depart form { margin: 0; }
.blog-tete { margin: 0 0 18px; }
.blog-cartes { margin-bottom: 8px; }
.blog-carte em { margin-top: auto; }
.blog-carte { align-content: start; grid-template-rows: auto auto 1fr auto; }
.fil-blog { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.fil-blog ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.fil-blog li + li::before { content: "\203A"; margin: 0 8px; color: var(--faint); }
.fil-blog a { color: var(--accent-ink); font-weight: 500; text-decoration: none; }
.fil-blog a:hover { text-decoration: underline; }
.fil-blog [aria-current="page"] { color: var(--muted); }
.moderation-compte { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface-2); }
.moderation-resume { margin: 0 0 8px; }
.moderation-identite { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.moderation-identite dt { color: var(--muted); }
.moderation-identite dd { margin: 0; overflow-wrap: anywhere; }
.moderation-etape { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: var(--rayon-s); background: var(--surface); }
.moderation-etape p { margin: 0; }
.moderation-etape p + p { margin-top: 4px; }
.moderation-etape-suspension, .moderation-etape-bannissement { border-left-color: var(--warn); }
.moderation-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: flex-start; }
.moderation-avertir .moderation-autre { display: none; }
.moderation-avertir:has(input[name="motif"][value="autre"]:checked) .moderation-autre { display: block; }
.moderation-avertir .btn, .moderation-trancher .btn { margin-top: 10px; }
.moderation-historique { list-style: none; margin: 0; padding: 0; }
.moderation-h { padding: 10px 0; border-bottom: 1px solid var(--line); }
.moderation-h:last-child { border-bottom: 0; }
.moderation-h-tete { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.moderation-h .meta, .moderation-h .mine { margin: 4px 0 0; }
.moderation-h.est-annule .moderation-h-tete b { text-decoration: line-through; color: var(--muted); }
.moderation-etat { font-weight: 600; }
.moderation-contenu { margin-top: 8px; padding: 10px 12px; border-radius: var(--rayon-s); background: var(--surface-2); font-size: 14px; overflow-wrap: anywhere; }
.moderation-paliers { margin: 8px 0 12px; padding-left: 20px; }
.moderation-reglages .field { max-width: 140px; }
.etiquettes-libres { margin-top: 4px; }
.etiquettes-propositions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.etiquettes-proposition { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; }
.etiquettes-proposition:hover, .etiquettes-proposition:focus-visible { border-color: var(--accent); color: var(--accent-ink); }
.annonce-plus { grid-column: 1 / -1; min-width: 0; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface-2); }
.annonce-plus > summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--accent-ink); min-height: 32px; display: flex; align-items: center; }
.annonce-plus[open] > summary { margin-bottom: 8px; }
.annonce-plus .medi-champ { margin: 0 0 10px; }
.annonce-fiches { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.annonce-fiches-liste { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.annonce-etiquettes-libres { margin: 8px 0 0; }
.annonce-etiquettes-libres .etiq { text-decoration: none; }
.annonce-inspire a { font-weight: 600; }
.blog-nouvelles { margin-top: 28px; }
.blog-nouvelles h2 { margin: 0 0 10px; font-size: 20px; }
.blog-nouvelle { display: grid; gap: 4px; margin: 0 0 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); color: var(--ink); text-decoration: none; }
.blog-nouvelle:hover, .blog-nouvelle:focus-visible { border-color: var(--accent); }
.blog-nouvelle b { font-size: 16px; }
.blog-nouvelle-debut { color: var(--muted); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.blog-nouvelle em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-weight: 600; font-size: 13.5px; color: var(--accent-ink); }
.nouvelle-seule { margin-top: 6px; }
.nouvelle-seule .nouvelle-titre { font-size: 24px; }
.image-section-mini { display: inline-block; flex: none; width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; }
.colonne-creer-choix .image-section-mini { width: 18px; height: 18px; }
.meteo[data-famille] { --meteo-teinte: var(--meteo-defaut); background: linear-gradient(135deg, color-mix(in srgb, var(--meteo-teinte) 18%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--meteo-teinte) 35%, var(--line)); }
.meteo[data-famille="ciel"]  { --meteo-teinte: var(--meteo-ciel); }
.meteo[data-etat="nuit_claire"] { --meteo-teinte: var(--meteo-nuit); }
.meteo[data-etat="arc_en_ciel"] { --meteo-teinte: var(--meteo-arc); }
.meteo[data-famille="pluie"] { --meteo-teinte: var(--meteo-pluie); }
.meteo[data-famille="froid"] { --meteo-teinte: var(--meteo-froid); }
.meteo[data-famille="vent"]  { --meteo-teinte: var(--meteo-vent); }
.meteo[data-famille="chaud"] { --meteo-teinte: var(--meteo-chaud); }
.meteo-tel[data-famille] { background: none; border: 0; }
.meteo-trace { margin: 4px 0 0; }
.renc-tete { display: flex; align-items: center; gap: 6px; text-align: left; flex-wrap: wrap; }
.renc-interrupteur { margin: 0 auto 0 0; }
.renc-interrupteur button {
display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 4px;
border: 0; background: none; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.renc-interrupteur-piste { position: relative; width: 36px; height: 22px; border-radius: 11px; background: var(--line-strong); transition: background .15s; }
.renc-interrupteur-piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px var(--renc-ombre); transition: transform .15s; }
.renc-interrupteur [aria-checked="true"] .renc-interrupteur-piste { background: var(--renc-flamme); }
.renc-interrupteur [aria-checked="true"] .renc-interrupteur-piste::after { transform: translateX(14px); }
.renc-lien-tete { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 8px; border-radius: var(--rayon-pilule); color: var(--accent-ink); font-size: 12.5px; text-decoration: none; }
.renc-lien-tete .ico { width: 16px; height: 16px; }
.renc-lien-tete:hover, .renc-lien-tete:focus-visible { background: var(--surface-2); }
.renc-compte { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--renc-flamme); color: var(--sur-photo); font-size: 11px; font-weight: 700; }
.renc-proposition { margin: 10px 12px 0; padding: 12px 14px; border-radius: var(--rayon); background: var(--accent-soft); font-size: 13px; }
.renc-proposition p { margin: 0; }
.renc-proposition-gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.renc-proposition-gestes form { margin: 0; }
.renc-proposition-gestes .tel-bouton { width: auto; margin: 0; padding: 8px 16px; }
.renc-bouton-doux { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--rayon-pilule); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.renc-carte { position: relative; touch-action: pan-y; transition: transform .18s ease, opacity .18s ease; }
.renc-carte.renc-glisse { transition: none; }
.renc-carte.renc-part-gauche { transform: translateX(-130%) rotate(-14deg) !important; opacity: 0; }
.renc-carte.renc-part-droite { transform: translateX(130%) rotate(14deg) !important; opacity: 0; }
.renc-visuel { position: relative; flex: 1; min-height: 110px; display: flex; border-radius: 18px; overflow: hidden; user-select: none; }
.renc-visuel > .renc-photos, .renc-visuel > .renc-photo { flex: 1; min-height: 0; width: 100%; height: auto; border-radius: 18px; }
.renc-visuel > .renc-photo { aspect-ratio: auto; object-fit: cover; }
.renc-js .renc-photos { overflow-x: hidden; }
.renc-initiales { display: grid; place-items: center; color: var(--sur-photo); font-family: var(--font-title); font-weight: 600; }
.renc-visuel > .renc-initiales { font-size: 40px; }
.renc-indice {
position: absolute; top: 18px; padding: 4px 12px; border: 3px solid currentColor; border-radius: 10px;
font-family: var(--font-title); font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
background: color-mix(in srgb, var(--surface) 70%, transparent); opacity: 0; transition: opacity .1s; pointer-events: none;
}
.renc-indice-passer { right: 16px; color: var(--renc-gris); transform: rotate(12deg); }
.renc-indice-aimer { left: 16px; color: var(--renc-flamme); transform: rotate(-12deg); }
.renc-vers-gauche .renc-indice-passer, .renc-part-gauche .renc-indice-passer,
.renc-vers-droite .renc-indice-aimer, .renc-part-droite .renc-indice-aimer { opacity: 1; }
.renc-menu-carte { position: absolute; top: 6px; right: 6px; margin: 0; }
.renc-menu-carte > .carte-menu-bouton { background: color-mix(in srgb, var(--surface) 82%, transparent); color: var(--ink); min-height: 36px; min-width: 40px; }
.renc-menu-carte .carte-menu-liste { top: calc(100% + 6px); bottom: auto; }
a.renc-carte-texte { display: block; color: inherit; text-decoration: none; border-radius: var(--rayon); }
a.renc-carte-texte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.renc-voir { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--accent-ink); }
.renc-pastilles { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.renc-pastilles li { padding: 3px 9px; border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--ink); font-size: 12px; line-height: 1.4; }
.renc-choix { align-items: center; gap: 18px; }
.renc-choix form { margin: 0; }
.renc-coeur {
width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--renc-or); background: var(--surface); color: var(--renc-or);
cursor: pointer; box-shadow: 0 3px 12px var(--renc-ombre-legere);
}
.renc-coeur .ico { width: 20px; height: 20px; }
.renc-coeur:disabled { opacity: .4; cursor: default; box-shadow: none; }
.renc-annuler { margin: 0; padding: 0 14px 10px; text-align: center; }
.renc-annuler button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--rayon-pilule); background: none; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.renc-annuler button:hover { background: var(--surface-2); color: var(--ink); }
.renc-annuler .ico { width: 15px; height: 15px; }
.renc-toast {
position: absolute; left: 12px; right: 12px; bottom: 28px; z-index: 3; display: flex; align-items: center; gap: 10px;
padding: 10px 12px 10px 14px; border-radius: var(--rayon); background: var(--ink); color: var(--paper);
font-size: 13px; box-shadow: 0 8px 24px var(--renc-ombre); transition: opacity .35s, transform .35s;
}
.renc-toast span { flex: 1; min-width: 0; }
.renc-toast form { margin: 0; }
.renc-toast button { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--rayon-pilule); background: none; color: var(--renc-peche); font: inherit; font-weight: 700; cursor: pointer; }
.renc-toast-part { opacity: 0; transform: translateY(8px); }
.renc-feuille-fond { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; background: var(--renc-voile); }
.renc-feuille-dehors { flex: 1; }
.renc-feuille { max-height: 78%; overflow-y: auto; padding: 8px 16px 20px; border-radius: 20px 20px 0 0; background: var(--paper); box-shadow: 0 -8px 24px var(--renc-ombre); }
.renc-feuille::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--line-strong); }
.renc-feuille-tete { display: flex; align-items: center; gap: 8px; }
.renc-feuille-tete h3 { flex: 1; margin: 0; font-size: 19px; }
.renc-feuille-fermer { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); }
.renc-feuille-fermer:hover { background: var(--surface-2); }
.renc-feuille-bio { margin: 8px 0 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.renc-feuille-galerie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.renc-feuille-galerie img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon); }
.renc-match-ecran {
position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 20px 18px; overflow-y: auto; text-align: center; color: var(--sur-photo);
background: linear-gradient(160deg, var(--renc-nuit) 0%, var(--renc-tuile) 60%, var(--renc-or) 100%);
}
.renc-match-titre { margin: 0; font-family: var(--font-title); font-size: 30px; font-weight: 700; }
.renc-match-duo { display: flex; justify-content: center; gap: 10px; width: 100%; }
.renc-match-portrait { width: min(42%, 150px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; border: 3px solid var(--sur-photo); box-shadow: 0 8px 22px var(--renc-ombre-forte); }
.renc-match-portrait.renc-initiales { font-size: 34px; }
.renc-match-duo > :first-child { transform: rotate(-4deg); }
.renc-match-duo > :last-child { transform: rotate(4deg); }
.renc-match-noms { margin: 4px 0 0; font-size: 15px; font-weight: 600; }
.renc-match-coeur { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 12px; border-radius: var(--rayon-pilule); background: var(--renc-verre); font-size: 13px; }
.renc-match-coeur .ico { width: 16px; height: 16px; }
.renc-match-sous { margin: 4px 0 0; font-size: 12.5px; opacity: .9; }
.renc-pastilles-communes { justify-content: center; margin: 0; }
.renc-pastilles-communes li { background: var(--renc-lait); color: var(--renc-nuit); }
.renc-match-gestes { display: grid; gap: 8px; width: min(100%, 260px); margin-top: 8px; }
.renc-match-gestes .tel-bouton { display: block; margin: 0; padding: 11px; background: var(--sur-photo); color: var(--renc-tuile); font-weight: 700; text-align: center; text-decoration: none; }
.renc-match-gestes .renc-bouton-doux { background: transparent; color: var(--sur-photo); border-color: var(--renc-filet); }
.renc-match { gap: 8px; }
.renc-match-lien { display: flex; flex: 1; min-width: 0; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.renc-match-av.renc-initiales { font-size: 15px; }
.renc-match-nouveau { background: var(--accent-soft); }
.renc-neuf { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: var(--rayon-pilule); background: var(--renc-flamme); color: var(--sur-photo); font-size: 10.5px; font-weight: 700; vertical-align: 2px; }
.renc-menu { margin-left: 0; }
.renc-profil { padding: 12px 14px 18px; }
.renc-profil-form { display: grid; gap: 2px; }
.renc-profil-form select, .renc-profil-form input[type="text"], .renc-profil-form input[type="number"], .renc-profil-form textarea {
width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 9px;
background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px;
}
.renc-profil-form textarea { line-height: 1.5; resize: vertical; }
.renc-enregistre { margin: 0 0 8px; padding: 8px 12px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; }
.renc-intentions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.renc-intentions legend { width: 100%; padding: 0; margin-bottom: 4px; }
.renc-intention { position: relative; }
.renc-intention input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.renc-intention span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--rayon-pilule); font-size: 13px; cursor: pointer; }
.renc-intention input:checked + span { background: var(--renc-flamme); border-color: var(--renc-flamme); color: var(--sur-photo); }
.renc-intention input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.renc-vignettes { list-style: none; padding: 0; }
.renc-vignette { position: relative; touch-action: none; cursor: grab; }
.renc-vignette.renc-tenue { opacity: .6; cursor: grabbing; }
.renc-vignette.est-couverture img { outline: 3px solid var(--renc-flamme); outline-offset: -3px; }
.renc-couverture-marque { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: var(--rayon-pilule); background: var(--renc-flamme); color: var(--sur-photo); font-size: 10.5px; font-weight: 700; }
.renc-vignette-gestes { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; }
.renc-vignette-gestes form { margin: 0; }
.renc-vignette-gestes button { min-height: 28px; padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 11.5px; cursor: pointer; }
.succes-carte { --succes-teinte: var(--teinte-jeux); }
.succes-carte.succes-lueur { --succes-teinte: var(--teinte-univers); }
.succes-carte.succes-etoile { --succes-teinte: var(--teinte-communaute); }
.succes-carte.succes-secret { --succes-teinte: var(--teinte-parties); }
.succes-entete h1 { margin-bottom: 4px; }
.succes-phrase { margin: 0 0 6px; font-family: var(--font-title); font-size: 19px; color: var(--ink); }
.succes-onglets { margin: 14px 0 6px; }
.succes-point { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--nav-chiffre); vertical-align: 2px; }
.succes-famille { margin-top: 8px; }
.succes-famille-titre { margin: 22px 0 4px; }
.succes-sous { margin: 16px 0 6px; }
.succes-intertitre { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.succes-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 8px; }
@media (min-width: 700px) { .succes-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .succes-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.succes-grille > div { min-width: 0; scroll-margin-top: 80px; }
.succes-carte {
display: flex; flex-direction: column; gap: 4px; height: 100%; min-width: 0;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
background: var(--surface); overflow-wrap: anywhere;
}
.succes-carte.succes-obtenu {
border-color: color-mix(in oklab, var(--succes-teinte) 45%, var(--line));
background: color-mix(in oklab, var(--succes-teinte) 7%, var(--surface));
}
.succes-carte.succes-verrouille { background: var(--surface-2); color: var(--muted); }
.succes-tete { display: flex; align-items: center; gap: 8px; margin: 0; }
.succes-niveau {
display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 6px;
border-radius: var(--rayon-pilule); font-size: 11.5px; font-weight: 600;
color: var(--succes-teinte); background: color-mix(in oklab, var(--succes-teinte) 14%, var(--surface));
}
.succes-niveau .ico { width: 13px; height: 13px; }
.succes-verrouille .succes-niveau { color: var(--faint); background: var(--surface); }
.succes-nouveau {
margin-left: auto; padding: 1px 8px; border-radius: var(--rayon-pilule);
background: var(--nav-chiffre); color: var(--sur-nav-chiffre); font-size: 11px; font-weight: 700;
}
.succes-nom { margin: 2px 0 0; font-family: var(--font-title); font-size: 17px; line-height: 1.25; color: var(--ink); }
.succes-verrouille .succes-nom { color: var(--muted); }
.succes-condition { margin: 0; font-size: 13.5px; color: var(--muted); }
.succes-date, .succes-progres, .succes-astuce { margin: 2px 0 0; font-size: 12.5px; color: var(--faint); }
.succes-jauge { margin-top: 6px; }
.succes-jauge .jauge-pleine { background: var(--succes-teinte); }
.succes-etoile { margin: auto 0 0; padding-top: 6px; }
.succes-etoile .btn { min-height: 36px; }
.succes-en-avant .succes-grille { margin-bottom: 4px; }
.succes-voir-tout { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.succes-pastille {
display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px;
border-radius: var(--rayon-pilule); background: var(--nav-chiffre); color: var(--sur-nav-chiffre);
font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.entete-moi-liste .succes-pastille { margin-left: auto; }
.succes-toasts {
position: fixed; z-index: 300; left: 16px; right: 16px;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
display: flex; flex-direction: column; align-items: stretch; gap: 8px;
pointer-events: none;
}
.succes-toasts:empty { display: none; }
@media (min-width: 600px) { .succes-toasts { left: auto; right: 24px; bottom: 24px; width: 360px; } }
.succes-toast {
--succes-teinte: var(--teinte-jeux);
pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
padding: 10px 10px 10px 12px; border: 1px solid color-mix(in oklab, var(--succes-teinte) 45%, var(--line));
border-radius: 12px; background: var(--surface); box-shadow: var(--ombre-carte);
transition: opacity .35s, transform .35s;
}
.succes-toast.succes-lueur { --succes-teinte: var(--teinte-univers); }
.succes-toast.succes-etoile { --succes-teinte: var(--teinte-communaute); }
.succes-toast.succes-secret { --succes-teinte: var(--teinte-parties); }
.succes-toast-part { opacity: 0; transform: translateY(8px); }
.succes-toast-marque { flex: none; display: inline-flex; padding: 6px; border-radius: 50%; color: var(--succes-teinte); background: color-mix(in oklab, var(--succes-teinte) 14%, var(--surface)); }
.succes-toast-marque .ico { width: 18px; height: 18px; }
.succes-toast-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: var(--ink); text-decoration: none; }
.succes-toast-titre { font-size: 11.5px; font-weight: 600; color: var(--succes-teinte); }
.succes-toast-nom { font-family: var(--font-title); font-size: 16px; line-height: 1.25; }
.succes-toast-condition { font-size: 12.5px; color: var(--muted); }
.succes-toast-fermer { flex: none; display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.succes-toast-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.succes-toast-fermer .ico { width: 14px; height: 14px; }
.succes-toast-plus { justify-content: center; font-size: 13px; font-weight: 600; color: var(--accent-ink); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .succes-toast { transition: none; } }
.succes-admin-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.succes-admin-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.succes-admin-liste .succes-admin-nom { flex: 1; min-width: 180px; }
.succes-admin-liste form { margin: 0; }
.succes-admin-eteint { color: var(--faint); }
.succes-en-avant .succes-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.succes-en-avant .succes-carte { padding: 10px 12px; }
.succes-en-avant .succes-nom { font-size: 15.5px; }
.reacs-repli { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.reacs-repli > summary { list-style: none; }
.reacs-repli > summary::-webkit-details-marker { display: none; }
.reacs-repli[open] > summary { display: none; }
.reac-repli { font-weight: 600; color: var(--muted); }
.reacs .reac { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.reacs-muettes .reac { cursor: pointer; }
@media (max-width: 640px) {
.dialogue.dialogue-feuille {
width: 100%;
max-width: none;
margin: auto 0 0;
border-radius: var(--rayon-l) var(--rayon-l) 0 0;
max-height: 75dvh;
}
.dialogue-feuille .dialogue-boite { max-height: 75dvh; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.reacs-qui { width: min(420px, calc(100vw - 24px)); }
.reacs-qui-emojis {
display: flex;
gap: 6px;
padding: 0 18px 10px;
overflow-x: auto;
border-bottom: 1px solid var(--line);
}
.reacs-qui-emojis .reac { flex: none; color: var(--muted); }
.reacs-qui-emojis .reac.actif {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--ink);
font-weight: 600;
}
.reacs-qui-noms { margin: 0; padding: 0 0 10px; list-style: none; }
.reacs-qui-noms li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
font-size: 14.5px;
color: var(--ink);
}
.reacs-qui-noms li:last-child { border-bottom: 0; }
.reacs-qui-emoji { font-size: 17px; }
.reacs-qui-plus { color: var(--muted); font-size: 13px; }
.cb-msg .mp-vus { margin: 4px 0 2px; }
.cb-msg-moi .mp-vus { justify-content: flex-end; }
.mess-systeme + .mp-vus { justify-content: center; }
.mp-vus .sms-vu { background: var(--surface-2); }
.mp-vus .sms-vu-init { color: var(--muted); }
.crest.mp-photo, .cb-crest.mp-photo, .cb-fil-crest.mp-photo {
padding: 0;
overflow: hidden;
border-radius: 50%;
background: var(--surface-2);
}
.mp-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.groupe-tete { display: flex; align-items: center; gap: 14px; }
.groupe-tete h1 { margin: 0; }
.groupe-tete .groupe-photo { width: 64px; height: 64px; font-size: 22px; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
.groupe-membre-actes { display: flex; flex-wrap: wrap; gap: 4px 12px; }
@media (max-width: 560px) {
.groupe-membre-actes { flex-basis: 100%; padding-left: 46px; }
}
.preparation-bande { max-width: var(--largeur-contenu); margin: 0 auto; padding: 12px var(--marge) 0; }
.preparation-bande .avis-preparation { margin: 0; }
.avis-preparation .ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--accent-ink); }
.avis-preparation b { color: var(--ink); }
.preparation-liste { display: grid; gap: 0; margin: 10px 0 0; padding: 0; list-style: none; }
.preparation-item {
display: flex; align-items: center; gap: 12px;
min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.preparation-item:last-child { border-bottom: 0; }
.preparation-coche {
display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
background: var(--surface-2); color: var(--muted);
}
.preparation-coche .ico { width: 16px; height: 16px; }
.preparation-fait .preparation-coche { background: var(--accent-soft); color: var(--accent-ink); }
.preparation-nom { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14.5px; color: var(--ink); }
.preparation-nom small { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.preparation-invites { margin: 6px 0 0; font-size: 14px; color: var(--ink); }
.vitrine-groupes { display: grid; gap: 30px; margin: 0 0 30px; }
.vitrine-groupe { margin: 0; gap: 12px; }
.vitrine-groupe-tete h2 { margin: 0 0 2px; }
.vitrine-groupe-tete .sub { margin: 0; }
@media (min-width: 600px) and (max-width: 719px) {
.vitrine-groupe .portes { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 720px) {
.vitrine-groupe .portes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.porte-signe {
display: grid; place-items: center; width: 72px; height: 72px; margin: 2px 0 6px;
border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
}
.porte-signe .ico { width: 34px; height: 34px; }
.porte-info:hover { border-color: var(--line); transform: none; }
.porte-info:hover .porte-icone { transform: none; }
.jl-marque.jl-hrp { color: var(--nav-hrp); background: var(--nav-hrp-trait); }
.annonces-hrp { font-family: var(--font-ui); vertical-align: middle; }
.annonces-sortes { margin: 10px 0 0; }
.barre-filtres-repliee { position: relative; }
.barre-filtres-repliee .barre-filtres-ouvrir { display: inline-flex; align-items: center; min-height: 40px; }
.barre-filtres-repliee .barre-filtres-actifs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
@media (min-width: 641px) {
.barre-filtres-repliee .barre-filtres-feuille { display: none; }
.barre-filtres-repliee:not(.avec-script) .barre-filtres-feuille:is(:target, :has(:target)),
.barre-filtres-repliee .barre-filtres-feuille.ouverte {
display: flex; flex-direction: column;
position: absolute; left: 0; top: calc(100% + 6px); z-index: 120;
width: min(440px, 100%); max-height: 70vh; padding: 6px;
border: 1px solid var(--line-strong); border-radius: var(--rayon-l); background: var(--surface);
box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 18%, transparent);
}
.barre-filtres-repliee .barre-filtres-tete { display: flex; flex: none; }
.barre-filtres-repliee .barre-filtres-groupes { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px; }
.barre-filtres-repliee .barre-filtres-pied {
display: flex; flex: none; gap: 8px; padding: 10px 4px 4px; border-top: 1px solid var(--line);
}
.barre-filtres-repliee .barre-filtres-pied .btn { flex: 1 1 0; justify-content: center; }
}
.jl-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.choix-scene-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 16px 0 0; }
@media (min-width: 1100px) { .choix-scene-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choix-scene-grille .choix-scene {
display: flex; flex-direction: column; margin: 0; padding: 16px;
border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface);
}
.choix-scene-grille .choix-scene h2 { margin: 0; font-size: 19px; }
.choix-scene-icone { flex: none; width: 40px; height: 40px; object-fit: contain; }
.choix-scene-quoi { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.choix-scene-grille .choix-scene-liste { margin: 12px 0 0; }
.choix-scene-grille .choix-scene-liste a { background: var(--paper); }
.choix-scene-pied { margin: auto 0 0; padding-top: 14px; }
.choix-scene-pied .btn { width: 100%; justify-content: center; }
.jsp-reponse { align-items: flex-start; }
.loresversaire { max-width: 620px; margin: 0 auto; }
.loresversaire h1 { margin-bottom: 14px; }
.loresversaire p { line-height: 1.6; margin: 0 0 12px; }
.loresversaire-retour { margin-top: 20px; }
.visuel-apercu-portrait { width: 150px; aspect-ratio: 3 / 4; }
.form-suivre-niveau select.field { width: auto; min-width: 0; margin: 0; padding-block: 6px; }
.fil-personnage { display: grid; gap: 12px; margin: 0 0 16px; }
.fil-personnage-quoi { margin: 0 0 4px; }
.fic-nouvelle-ecrire { margin: 0 0 16px; }
.fic-nouvelle-ecrire textarea { min-height: 84px; }
.fic-nouvelle-image { display: block; margin: 10px 0 0; max-width: 100%; border-radius: var(--rayon); }
.fic-actualite { display: grid; gap: 12px; }
.galerie-gestion-qui { display: block; margin: 2px 0 0; font-size: .85em; color: var(--muted); }
.media-envoyee-par { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#avertissements .scene-avertir + .scene-avertir { margin-top: 16px; }
.app.sans-navigation { grid-template-columns: minmax(0, 1fr); }
.app.sans-navigation > .scroll { grid-column: 1 / -1; }
@media (min-width: 600px) {
.vitrine-groupe .portes[data-cartes="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.vitrine-groupe .portes[data-cartes="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.vitrine-groupes-fin {
margin: -8px 0 0;
font-family: var(--font-title);
font-size: 19px;
font-style: italic;
color: var(--muted);
text-align: center;
}
.vitrine-faq > .vitrine-suite { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599px) {
.app.sans-navigation .entete-inscription { display: inline-flex; padding: 7px 12px; font-size: 13px; }
.app.sans-navigation .entete-site .wordmark { min-width: 0; }
}
.univers-visiteur { max-width: var(--largeur-contenu); margin: 0 auto; padding: 10px var(--marge) 0; }
.univers-visiteur .onglets-liens { margin: 0; }
.ech-av-page { border-radius: 22%; background: var(--accent); color: var(--sur-accent); }
.ech-profil-av.ech-av-page { border-radius: 22%; }
.ech-banniere-page { background: var(--accent-soft); }
.ech-marque {
display: inline-block;
margin-left: 5px;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid var(--line-strong);
font-size: 10.5px;
font-weight: 600;
line-height: 1.5;
color: var(--muted);
vertical-align: middle;
}
.ech-marque-officielle { border-color: var(--accent); color: var(--accent-ink); }
.ech-page-tete { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 9px; }
.ech-page-tete h2 { margin: 0; }
.ech-page .ech-soustitre a { color: var(--accent-ink); text-decoration: none; }
.ech-page form { margin-top: 0; }
.ech-onglets { margin: 0 12px 8px; }
.ech-chercher { display: flex; gap: 6px; margin: 0 12px 10px; }
.ech-chercher .field { flex: 1; min-width: 0; }
.ech-chercher button { border: 0; background: none; color: var(--muted); padding: 0 6px; cursor: pointer; }
.ech-pages { padding: 0 12px 12px; }
.ech-pages-creer { margin: 0 0 10px; text-align: center; }
.ech-titre { font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 600; }
.ech-page-ligne {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 0;
border-bottom: 1px solid var(--line);
color: inherit;
text-decoration: none;
}
.ech-page-ligne > span { flex: 1; min-width: 0; }
.ech-page-ligne b { display: block; font-size: 13.5px; }
.ech-page-ligne small { display: block; font-size: 11.5px; color: var(--faint); }
.ech-page-form .field { width: 100%; }
.ech-page-champ { margin-top: 10px; }
.ech-interrupteur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ech-interrupteur .info-bulle { flex-basis: 100%; }
.ech-page-retirer { margin: 6px 12px 0; }
.ech-moderateurs { padding: 0 12px 14px; }
.ech-page-ajouter { display: grid; gap: 6px; margin-top: 10px; }
.tpl-onglets { margin-bottom: 12px; }
.tpl-tete-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tpl-tete-ligne h2 { margin: 0; min-width: 0; }
.tpl-tete-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tpl-tete-gestes .tpl-tout { margin-top: 0; }
.tpl-suivre { margin: 0; }
.tpl-morceau { grid-template-columns: 34px minmax(0, 1fr) auto; }
.tpl-morceau-gestes { grid-column: 2 / -1; }
.tpl-morceau-fin { display: flex; align-items: center; gap: 2px; }
.tpl-coeur-form { margin: 0; }
.tpl-coeur {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--faint);
cursor: pointer;
}
.tpl-coeur .ico { width: 18px; height: 18px; }
.tpl-coeur:hover { background: var(--surface-2); color: var(--ink); }
.tpl-coeur[aria-pressed="true"] { color: var(--warn); }
.tpl-coeur:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tpl-nouveau {
display: inline-block;
padding: 1px 7px;
border-radius: var(--rayon-pilule);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 10.5px;
font-weight: 600;
white-space: nowrap;
}
.tpl-item .tpl-nouveau { margin-left: auto; }
.tpl-morceau-nouveau { background: var(--accent-soft); }
.tpl-fiche-avec-gestes { padding-left: 0; list-style: none; }
.tpl-fiche-avec-gestes li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tpl-fiche-avec-gestes li + li { border-top: 1px solid var(--line); }
.tpl-fiche-titre { min-width: 0; overflow-wrap: anywhere; }
.tpl-favoris .tpl-morceaux { margin-top: 12px; }
.reglement .regle-intro > p,
.reglement .regle-partie > p,
.reglement .regle > p { margin: 0 0 10px; line-height: 1.6; }
.reglement .regle-partie > :last-child,
.reglement .regle > :last-child { margin-bottom: 0; }
.reglement .regle + .regle { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.reglement .regle-titre { margin: 0 0 10px; font-size: 1.18em; font-weight: 700; line-height: 1.35; color: var(--accent-ink); scroll-margin-top: 80px; }
.reglement .regle { scroll-margin-top: 80px; }
.reglement .regle > p, .reglement .regle > .regle-liste { padding-left: 14px; border-left: 3px solid var(--accent-soft); }
.reglement .regle-liste { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.reglement .regle-liste > li + li { margin-top: 6px; }
.reglement .regle-etiquette {
display: inline-block;
margin-left: 4px;
padding: 1px 8px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 11px;
font-weight: 600;
letter-spacing: .03em;
line-height: 1.6;
vertical-align: middle;
white-space: nowrap;
}
.reglement .regle-liste .regle-etiquette { margin-left: 0; }
.reglement .ancre-ancienne { display: block; width: 0; height: 0; overflow: hidden; }
.conditions .regle-point { position: relative; }
.conditions .regle-point > p { margin: 0 0 10px; }
.conditions .regle-point .info-i { vertical-align: text-bottom; margin-left: 2px; }
.conditions .regle-liste { margin: 0 0 10px; padding-left: 1.2em; }
.conditions .regle-liste > li + li { margin-top: 6px; }
.conditions .regle-bulle p { margin: 0; }
.conditions .regle-bulle p + p { margin-top: 8px; }
.conditions .regle-bulle:not(.info-bulle-flottante) { margin: 8px 0 10px; }
.conditions .ancre-ancienne { display: block; width: 0; height: 0; overflow: hidden; }
.cgu-ce-qui-change p { margin: 0; line-height: 1.6; }
.dossier-meme-connexion b { display: block; margin-bottom: 4px; }
.dossier-categorie { margin: 12px 0 10px; padding: 0; border: 0; display: grid; gap: 6px; }
.consignes .section :is(p, li) { line-height: 1.6; }
.consignes .section p { margin: 0 0 10px; }
.consignes .section :is(ul, ol) { margin: 0 0 12px; padding-left: 1.3em; }
.consignes .section li + li { margin-top: 6px; }
.consignes .section h3 { margin: 16px 0 8px; font-size: 16px; }
.consignes-principe { margin: 14px 0; }
.consignes-tableau { overflow-x: auto; margin: 0 0 12px; }
.consignes-tableau table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.consignes-tableau :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.consignes-tableau thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
.charte-etat { margin: 14px 0; }
.charte-engagement { margin: 18px 0 8px; line-height: 1.6; }
.charte-formulaire { display: grid; gap: 12px; justify-items: start; margin: 14px 0 6px; }
.candidature-moderation > p { line-height: 1.6; margin: 0 0 10px; }
.candidature-moderation .hint, .candidature-moderation .danger { margin: 12px 0; }
.candidature-moderation .regle-point { position: relative; }
.candidature-moderation .regle-point > p { margin: 0 0 10px; }
.candidature-moderation .regle-point .info-i { vertical-align: text-bottom; margin-left: 2px; }
.candidature-moderation .regle-bulle p { margin: 0; }
.candidature-moderation .regle-bulle:not(.info-bulle-flottante) { margin: 8px 0 10px; }
.candidature-moderation .section p { line-height: 1.6; margin: 0 0 10px; }
.candidature-etat { margin: 14px 0; display: grid; gap: 10px; justify-items: start; }
.candidature-etat p { margin: 0; line-height: 1.6; }
.candidature-formulaire .lab { margin-top: 16px; }
.candidature-formulaire .lab .mine { font-weight: 400; }
.candidature-formulaire .lab + .mine { margin: 2px 0 6px; }
.candidature-envoi { margin-top: 18px; }
.candidature-reponses { margin: 10px 0; }
.candidature-reponses dt { font-weight: 600; margin-top: 10px; }
.candidature-reponses dd { margin: 4px 0 0; line-height: 1.6; color: var(--ink); }
.candidature-lue .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; }
.roles-activite .etiq { margin-left: 4px; }
.confidentialite .regle-point { position: relative; }
.confidentialite .regle-point > p { margin: 0 0 10px; }
.confidentialite .regle-point .info-i { vertical-align: text-bottom; margin-left: 2px; }
.confidentialite .regle-liste { margin: 0 0 10px; padding-left: 1.2em; }
.confidentialite .regle-liste > li + li { margin-top: 6px; }
.confidentialite .regle-bulle p { margin: 0; }
.confidentialite .regle-bulle p + p { margin-top: 8px; }
.confidentialite .regle-bulle:not(.info-bulle-flottante) { margin: 8px 0 10px; font-weight: 400; }
.confidentialite .ancre-ancienne { display: block; width: 0; height: 0; overflow: hidden; }
.confidentialite .section h3 { margin: 16px 0 8px; font-size: 16px; }
.tableau-lecture { margin: 0 0 12px; }
.tableau-lecture table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tableau-lecture :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.tableau-lecture thead th { color: var(--muted); font-weight: 600; font-size: 13px; }
.tableau-lecture tbody th { font-weight: 600; }
.tableau-lecture .regle-bulle, .tableau-lecture .regle-bulle b { font-weight: 400; }
.tableau-lecture .regle-bulle b { font-weight: 600; }
@media (max-width: 600px) {
.tableau-lecture thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tableau-lecture :is(table, tbody, tr, th, td) { display: block; width: auto; }
.tableau-lecture tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
.tableau-lecture :is(th, td) { padding: 2px 0; border-bottom: 0; }
.tableau-lecture td::before { content: attr(data-titre); display: block; color: var(--muted); font-size: 13px; }
}
.secu-verdict { display: flex; gap: 12px; align-items: center; border-radius: var(--rayon-l); padding: 14px; margin: 12px 0; }
.secu-verdict b { font-size: 16px; }
.secu-verdict-ok { background: color-mix(in oklab, var(--teinte-parties) 14%, var(--surface)); color: color-mix(in oklab, var(--teinte-parties) 80%, var(--ink)); }
.secu-verdict-alerte { background: var(--warn-soft); color: var(--warn); }
.secu-rond { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--surface); }
.secu-verdict-ok .secu-rond { background: color-mix(in oklab, var(--teinte-parties) 80%, var(--ink)); }
.secu-verdict-alerte .secu-rond { background: var(--warn); }
.secu-titre { font-size: 17px; margin: 18px 0 8px; }
.secu-totaux { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .secu-totaux { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.secu-totaux .stats-total b { font-size: 24px; }
.secu-totaux .stats-total span { font-size: 13px; color: var(--muted); }
.secu-chaud { border-color: var(--warn) !important; }
.secu-chaud b { color: var(--warn); }
.secu-liste { list-style: none; margin: 0 0 8px; padding: 0; }
.secu-liste > li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.secu-liste > li:first-child { border-top: 0; }
.secu-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.secu-texte p { margin: 2px 0 0; }
.secu-etiq { flex: none; margin-top: 2px; font-weight: 600; }
.secu-ok { background: color-mix(in oklab, var(--teinte-parties) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-parties) 78%, var(--ink)); }
.secu-veille { background: color-mix(in oklab, var(--teinte-communaute) 15%, var(--surface)); color: color-mix(in oklab, var(--teinte-communaute) 78%, var(--ink)); }
.secu-alerte { background: var(--warn-soft); color: var(--warn); }
.secu-gris { background: var(--surface-2); color: var(--muted); }
.secu-gestes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.secu-geste { display: inline; margin: 0; }
.secu-etats { display: flex; flex-wrap: wrap; gap: 4px; flex: none; max-width: 50%; justify-content: flex-end; }
.secu-etat { font: inherit; font-size: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: var(--rayon-pilule); padding: 3px 8px; cursor: pointer; }
span.secu-etat { cursor: default; }
.secu-etat.secu-pris { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.secu-grise { opacity: .6; }
.secu-vus { margin-top: 8px; }
.secu-vus > summary, .secu-bruit > summary { cursor: pointer; font-weight: 600; }
.secu-barres { height: 60px; margin: 10px 0 8px; }
.secu-interrupteur { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#reglages .lab-ligne { margin-top: 0; }
#reglages .lab-ligne h2 { margin: 0; }
.scene-histoire { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; font-size: 14px; }
.scene-histoire .btn { margin-left: auto; }
.scene-tete-actes { flex-wrap: wrap; align-items: center; }
.scene-tete-suivre { display: inline-flex; align-items: center; gap: 4px; }
.scene-tete-suivre .form-suivre { margin: 0; }
.scene-chrono, .scene-quand { margin-top: 12px; }
.scene-chrono > summary, .scene-quand > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.scene-chrono .fp-volet-titre { font-size: 16px; }
.scene-chrono-onglets .onglets-liens { overflow-x: auto; }
.scene-frise { list-style: none; margin: 10px 0; padding: 0; }
.scene-frise-filtres { margin: 8px 0 4px; }
.scene-frise-quoi { display: block; font-size: 12.5px; }
.scene-frise-ici > .chrono-corps { background: var(--accent-soft); border-radius: 10px; padding: 6px 10px; }
.scene-chrono-fantome > .chrono-corps { border: 1px dashed var(--line-strong); background: transparent; }
.scene-chrono-recit { display: block; margin-top: 4px; white-space: pre-line; }
.scene-chrono-ajout { margin-top: 8px; }
.scene-chrono-ajout > summary { list-style: none; display: inline-flex; }
.scene-chrono-ajout > summary::-webkit-details-marker { display: none; }
.scene-chrono-form { display: grid; gap: 2px; margin-top: 8px; }
.scene-chrono-form .btn { justify-self: start; }
.scene-chrono-reglages { margin-top: 10px; }
.scene-chrono-proposition { margin-top: 8px; display: grid; gap: 6px; }
.scene-chrono-actes { display: flex; flex-wrap: wrap; gap: 6px; }
.scene-chrono-actes form { margin: 0; }
.perso-albums + .perso-albums { margin-top: 22px; }
.perso-albums .pf-volet-titre { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.pf-album small .etiq { margin-left: 4px; }
.perso-album-marque { margin: 0 0 8px; max-width: 420px; }
.pf-media-boite figcaption { margin-top: 4px; font-size: 12.5px; }
.scene-tete-menu { display: inline-flex; }
.pf-media-retirer .carte-menu-bouton { background: var(--surface); border-radius: 50%; }
.td-appbar .td-nouveau-bouton {
position: relative;
margin-left: auto;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: var(--rayon-s);
background: none;
color: var(--muted);
cursor: pointer;
}
.td-appbar .td-nouveau-bouton:hover { background: var(--surface); color: var(--ink); }
.td-appbar .td-nouveau-bouton:not([hidden]) + .td-sortir { margin-left: 0; }
.tel-fil-haut .etiq { margin-left: 6px; flex: none; }
.td-nouveau { padding: 10px 12px; overflow-y: auto; }
.td-persos-precis { height: 92px; }
.td-perso-jeu {
position: absolute;
top: calc(100% + 4px);
left: 50%;
max-width: 72px;
overflow: hidden;
color: var(--muted);
font-size: 10.5px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
transform: translateX(-50%);
}
.tel-ecran-fond .td-perso-jeu { color: var(--sur-photo); }
.td-choix-titre { margin: 0 0 8px; font-weight: 600; font-size: 14px; }
.td-jeux { display: grid; gap: 8px; }
.td-jeu-carte {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 56px;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
color: var(--ink);
font: inherit;
text-align: left;
cursor: pointer;
}
.td-jeu-carte:hover,
.td-jeu-carte:focus-visible { border-color: var(--accent); }
.td-jeu-carte .td-jeu-logo { position: static; flex: none; width: 38px; min-width: 38px; height: 38px; border-radius: var(--rayon-s); font-size: 12px; line-height: 38px; box-shadow: none; }
.td-jeu-carte .td-jeu-logo img { width: 38px; height: 38px; margin: 0; }
.td-jeu-corps { flex: 1; min-width: 0; }
.td-jeu-corps b { display: block; overflow: hidden; font-size: 14px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.td-jeu-corps small { color: var(--muted); font-size: 12.5px; }
.td-jeu-corps .etiq { margin-left: 2px; }
.td-jeu-carte .td-jeu-n { position: static; flex: none; }
.td-titres { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.td-titres .tel-appbar-titre { flex: none; }
.td-jeu-lien {
display: inline-flex;
align-items: center;
gap: 2px;
max-width: 100%;
min-height: 24px;
padding: 0;
border: 0;
background: none;
color: var(--accent-ink);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.td-jeu-lien .td-jeu-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-jeu-lien .ico { flex: none; width: 14px; height: 14px; }
.tel-ecran-fond .td-qui-jeu { color: var(--sur-photo); }
.fiche-relier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.fiche-relier select { min-width: 0; max-width: 100%; }
.td-contact { display: flex; align-items: center; gap: 10px; padding: 7px 2px; min-height: 44px; cursor: pointer; }
.td-contact input { margin-left: auto; width: 20px; height: 20px; }
.td-nouveau-ecrire { margin-top: 12px; width: 100%; }
.sms-signaler { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--muted); border-radius: 50%; }
.sms-signaler:hover { color: var(--ink); background: var(--surface); }
.sms-signaler .ico { width: 14px; height: 14px; }
.fic-outils {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
margin: -4px 0 10px; padding: 0 0 8px; border-bottom: 1px dashed var(--line-strong);
}
.fic-outils-nom {
margin-right: auto; font-size: 12px; font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em;
}
.fic-bloc-masque > :not(.fic-outils) { opacity: .5; }
.fic-compo-note { margin: 0 0 12px; }
.fic-compo .reglage { margin-top: 14px; }
.fic-compo-morceau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
@media (min-width: 640px) { .fic-compo-morceau { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); } }
.fic-compo-lier { margin-top: 14px; }
.fic-compo-lier .up-compo-ligne { grid-template-columns: minmax(0, 1fr) auto; }
.fic-supprimer { margin-top: 8px; color: var(--warn); }
.up-catalogue-bloc .etiq { margin-left: 6px; vertical-align: 1px; }
.fic-citation { margin: 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent); }
.fic-citation p { margin: 0; font-family: var(--font-title); font-style: italic; font-size: 20px; line-height: 1.45; }
.fic-citation-source { margin: 6px 0 0 17px; font-size: 13px; color: var(--muted); }
.fic-morceaux { list-style: none; margin: 0; padding: 0; }
.fic-morceau { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.fic-morceau:first-child { border-top: 0; }
.fic-morceau-titre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fic-morceau-titre .mine { display: block; }
.fic-playlist .tpl-lecteur { margin-top: 10px; }
.fic-bloc > .fic-repli { margin-top: 0; }
.fic-revelation-corps { padding: 12px 14px 14px; }
.up-blocs > .fic-repli-blocs { grid-column: 1 / -1; margin-top: 0; }
.fic-repli-blocs > .up-blocs { padding: 12px; }
.guide-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide-page { max-width: 640px; margin: 0 auto; }
.guide-surtitre { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--accent-ink); font-weight: 600; font-size: 13.5px; }
.guide-surtitre .ico { width: 16px; height: 16px; }
.guide-chemins { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 14px 0; padding: 0; border: 0; min-width: 0; }
.guide-chemin {
position: relative; display: flex; gap: 12px; align-items: flex-start; min-width: 0;
padding: 12px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); cursor: pointer;
}
.guide-chemin input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.guide-chemin:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.guide-chemin:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.guide-chemin-pic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.guide-chemin-pic .ico { width: 22px; height: 22px; }
.guide-chemin-texte { min-width: 0; }
.guide-chemin-texte b { display: block; font-size: 15px; }
.guide-chemin-texte small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.guide-chemin-combien { display: inline-block; margin-top: 4px; color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.guide-choix-gestes, .guide-gestes, .guide-feuille-gestes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.guide-gestes .guide-geste, .guide-fin-chemins .guide-geste { display: inline; margin: 0; }
.guide-passer { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; }
.guide-progres { height: 6px; margin: 8px 0 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.guide-progres i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.guide-etapes { list-style: none; margin: 12px 0 0; padding: 0; }
.guide-etapes li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); }
.guide-etapes li:first-child { border-top: 0; }
.guide-rond {
flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
border: 2px solid var(--line-strong); color: var(--muted); font-weight: 700; font-size: 12px;
}
.guide-rond .ico { width: 14px; height: 14px; }
.guide-etapes li.fait .guide-rond { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.guide-etapes li.ici .guide-rond { border-color: var(--accent); color: var(--accent-ink); }
.guide-etape-texte { flex: 1; min-width: 0; }
.guide-etape-texte > span[data-info-ancre] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.guide-etape-texte small { display: block; color: var(--muted); font-size: 13px; }
.guide-adulte { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; }
.etiq.guide-etiq-fait { background: var(--accent-soft); color: var(--accent-ink); }
.guide-note { margin-top: 10px; }
.app > .barre-guide { grid-column: 1 / -1; grid-row: 3; }
.barre-guide {
flex: none; padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line-strong); background: var(--surface);
}
.barre-guide-fait { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.barre-guide-fait .ico { width: 15px; height: 15px; }
.barre-guide-haut { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; }
.barre-guide-haut b { flex: 1; min-width: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.barre-guide-compte { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.barre-guide-quoi { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; }
.barre-guide-aller { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.barre-guide-aller .btn { flex: 1 1 auto; justify-content: center; }
.barre-guide-aller .btn .ico { width: 15px; height: 15px; }
.guide-etapes li { flex-wrap: wrap; }
.guide-etape-geste { flex-basis: 100%; padding-left: 38px; }
.guide-etape-geste .guide-geste { display: inline; margin: 0; }
.pf-actes > .bulle-aide { flex-basis: 100%; margin-top: 6px; }
.pf-actes > .bulle-aide::before { left: 14px; }
@media (max-width: 560px) {
.pf-actes .bulle-aide .btn { width: auto; height: auto; min-height: 34px; padding: 6px 14px; border-radius: var(--rayon); font-size: 13.5px; gap: 6px; }
}
.barre-guide-gestes { display: flex; gap: 8px; }
.barre-guide-gestes .guide-geste { flex: 1; margin: 0; }
.barre-guide-gestes .btn { width: 100%; justify-content: center; }
.barre-guide-gestes .btn .ico { width: 15px; height: 15px; }
@media (min-width: 600px) {
.barre-guide { padding-left: 16px; padding-right: 16px; }
.barre-guide > * { max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 600px) and (max-width: 999px) { .app > .barre-guide { grid-column: 2; } }
@media (min-width: 1000px) { .app > .barre-guide { grid-column: 3; } }
@media (max-width: 599px) {
.app { grid-template-rows: auto auto minmax(0, 1fr); }
.app > .barre-guide { grid-row: 2; padding-bottom: 10px; border-top: 0; border-bottom: 1px solid var(--line-strong); }
.app > .scroll { grid-row: 3; }
}
.carte-guide { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--rayon-l); background: var(--surface); }
.carte-guide-tete { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.carte-guide-tete b { flex: 1; min-width: 0; font-family: var(--font-title); font-size: 15px; }
.carte-guide-tete > .ico { width: 18px; height: 18px; color: var(--accent-ink); }
.carte-guide > p { margin: 0 0 8px; }
.carte-guide .guide-geste { margin: 0; }
.guide-fin-chemins { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.guide-fin-chemins .btn .ico { width: 15px; height: 15px; }
.guide-feuille { padding: 16px; border: 1px solid var(--line); border-radius: 18px 18px var(--rayon-l) var(--rayon-l); background: var(--surface); box-shadow: 0 -6px 24px color-mix(in srgb, var(--ink) 12%, transparent); }
.guide-feuille h2 { margin: 0 0 8px; }
.guide-feuille .reglage { margin-top: 10px; }
.guide-reperes { margin: 12px 0 16px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--rayon-l); background: var(--surface); }
.guide-reperes-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.guide-reperes-titre .ico { width: 18px; height: 18px; color: var(--accent-ink); }
.guide-reperes > .mine { margin: 0 0 8px; }
.bulle-aide {
position: relative; margin: 14px 0 0; padding: 12px 14px; border-radius: var(--rayon-l);
background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 20%, transparent);
}
.bulle-aide::before { content: ""; position: absolute; top: -7px; left: 28px; width: 14px; height: 14px; background: var(--ink); transform: rotate(45deg); }
.bulle-aide.bulle-aide-dessous { margin: 0 0 14px; }
.bulle-aide.bulle-aide-dessous::before { top: auto; bottom: -7px; }
.bulle-aide p { margin: 0 0 10px; }
.bulle-aide-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.bulle-aide .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.bulle-aide .lien-bouton { margin: 0 auto 0 0; color: var(--paper); opacity: .8; }
.bulle-aide-cible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--rayon); }
.colonne-groupe { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 54px; margin: 6px auto 0; padding: 4px 0; border-radius: 27px; }
.colonne-groupe.ouverte { padding: 6px 0 8px; background: var(--nav-famille); }
.colonne-groupe > .colonne-famille[hidden] { display: none; }
.colonne-categorie { margin: 0; }
.jeu-categorie { padding: 0; border: 0; background: var(--nav-rond); font: inherit; cursor: pointer; }
.jeu-categorie .jeu-section { width: 100%; height: 100%; padding: 5px; object-fit: contain; border-radius: inherit; }
.jeu-categorie .jeu-chiffre[hidden],
.jeu-categorie .jeu-point[hidden] { display: none; }
.jeu-categorie .jeu-point { bottom: 4px; }
.colonne-menu-titre { margin: 2px 8px 6px; color: var(--muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; }
@media (min-width: 600px) {
.menu-au-telephone { display: none; }
}
@media (min-width: 1000px) {
.colonne-groupe { width: 58px; border-radius: 29px; }
}
.cb-fenetre { position: relative; }
.cb-fil-menu { flex: 0 0 auto; margin-left: auto; }
.cb-fil-menu ~ .cb-fil-fermer { margin-left: 0; }
.cb-fil-menu > .carte-menu-bouton { min-width: 32px; min-height: 32px; padding: 0 6px; font-size: 16px; }
.cb-fil-menu .carte-menu-liste { top: calc(100% + 6px); bottom: auto; right: 0; z-index: 9; min-width: 230px; font-weight: 400; }
.cb-msg { position: relative; }
.cb-msg-outils {
position: absolute; top: 50%; left: 100%; display: flex; gap: 2px; padding: 0 4px;
transform: translateY(-50%);
}
.cb-msg-moi .cb-msg-outils { left: auto; right: 100%; flex-direction: row-reverse; }
.cb-msg-outils button {
display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer;
}
.cb-msg-outils button:hover, .cb-msg-outils button:focus-visible { background: var(--surface-2); color: var(--ink); }
.cb-msg-outils .ico { width: 15px; height: 15px; }
@media (hover: hover) {
.cb-msg-outils { opacity: 0; transition: opacity .12s; }
.cb-msg:hover .cb-msg-outils, .cb-msg:focus-within .cb-msg-outils, .cb-msg-actif .cb-msg-outils { opacity: 1; }
}
@media (hover: none) {
.cb-msg-outils { display: none; }
.cb-msg { -webkit-touch-callout: none; }
}
.cb-msg-actif .cb-msg-texte { outline: 2px solid var(--accent); outline-offset: 1px; }
.cb-msg-heure { display: none; margin: 2px 10px 0; color: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cb-msg-moi .cb-msg-heure { text-align: right; }
@media (hover: hover) { .cb-msg:hover .cb-msg-heure { display: block; } }
.cb-heure-visible .cb-msg-heure { display: block; }
.cb-jour { align-self: center; margin: 6px 0 2px; color: var(--faint); font-size: 11px; font-weight: 600; text-align: center; }
.cb-jour + .cb-jour { display: none; }
.cb-msg-retire .cb-msg-texte { background: none; border: 1px dashed var(--line-strong); color: var(--faint); font-style: italic; }
.cb-msg-texte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.cb-msg:not(.cb-msg-moi) .cb-msg-texte a { color: var(--accent-ink); }
.cb-msg .reacs { margin: 3px 6px 0; gap: 4px; }
.cb-msg-moi .reacs { justify-content: flex-end; }
#chatbox .cb-msg .reacs-palette { display: none; }
#chatbox .cb-msg .reacs:not(:has(.reac[data-emoji])) { display: none; }
.cb-msg .reac { min-height: 22px; padding: 1px 7px; font-size: 12px; }
.cb-fenetre .cb-menu { position: absolute; right: auto; bottom: auto; z-index: 9; min-width: 210px; max-width: calc(100% - 16px); }
.cb-fenetre .cb-menu.cb-menu-feuille { left: 8px; right: 8px; top: auto; bottom: 8px; min-width: 0; max-width: none; }
.cb-menu-reacs { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 2px 6px; }
.cb-menu .cb-menu-reacs .reac {
justify-content: center; width: auto; min-width: 38px; min-height: 38px; padding: 0 6px;
border-color: transparent; background: none; color: var(--ink); font-size: 19px;
}
.cb-menu .cb-menu-reacs .reac:hover { background: var(--surface-2); }
.cb-menu .cb-menu-reacs .reac-mienne { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cb-menu .cb-menu-reacs .reac .ico { width: 16px; height: 16px; }
.cb-menu-reacs:not([hidden]) + .cb-menu-actes:not([hidden]) { margin-top: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.cb-menu-actes { display: grid; }
.cb-annonce { margin: 0; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 12.5px; }
.cb-msg-en-modification { width: 100%; max-width: 100%; }
.cb-modifier { display: grid; gap: 6px; margin: 0; }
.cb-modifier textarea {
display: block; width: 100%; min-height: 38px; max-height: calc(1.4em * 5 + 18px); padding: 8px 12px;
border: 1px solid var(--accent); border-radius: var(--rayon-l); background: var(--paper); color: var(--ink);
font: inherit; font-size: 14px; line-height: 1.4; resize: none; overflow-y: auto;
}
.cb-modifier-actes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cb-modifier-annuler { padding: 0; border: 0; background: none; color: var(--accent-ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.cb-modifier-erreur { margin: 0; color: var(--warn); font-size: 12px; }
.cb-fil-ecrire { align-items: flex-end; }
.cb-fil-ecrire textarea {
display: block; min-height: 36px; max-height: calc(1.4em * 5 + 18px);
border-radius: 18px; line-height: 1.4; resize: none; overflow-y: hidden;
}
.cb-fil-ecrire .cb-outils { display: none; }
.cb-fil-ecrire.cb-en-saisie .cb-joindre { display: none; }
.cb-fil-ecrire.cb-en-saisie .cb-outils {
display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--accent-ink);
}
.cb-fil-ecrire.cb-en-saisie .cb-outils:hover { background: var(--surface-2); }
.cb-nouvelle { display: flex; flex-direction: column; min-height: 0; }
.cb-nouvelle-titre { font-size: 13.5px; }
.cb-nouvelle-a {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px;
border-bottom: 1px solid var(--line);
}
.cb-nouvelle-a:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.cb-puces { display: contents; }
.cb-puce { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; font-size: 12.5px; }
.cb-puce-retirer {
display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.cb-puce-retirer:hover { background: var(--surface-2); color: var(--ink); }
.cb-puce-retirer .ico { width: 10px; height: 10px; }
.cb-nouvelle-chercher {
flex: 1 1 120px; min-width: 0; padding: 6px 2px; border: 0; background: none;
color: var(--ink); font: inherit; font-size: 13.5px; outline: none;
}
.cb-nouvelle-liste { flex: 1; min-height: 0; max-height: min(44vh, 340px); overflow-y: auto; padding: 2px 0 6px; }
.cb-nouvelle-section { margin: 10px 14px 4px; color: var(--faint); font-size: 11px; font-weight: 600; }
.cb-personne {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 14px;
border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.cb-personne:hover, .cb-personne:focus-visible { background: var(--surface-2); }
.cb-personne-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-personne-coche {
display: grid; place-items: center; flex: none; width: 20px; height: 20px;
border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--sur-accent);
}
.cb-personne-coche .ico { width: 11px; height: 11px; opacity: 0; }
.cb-personne-choisie .cb-personne-coche { border-color: var(--accent); background: var(--accent); }
.cb-personne-choisie .cb-personne-coche .ico { opacity: 1; }
.cb-nouvelle-erreur { margin: 0; padding: 6px 12px; border-top: 1px solid var(--line); color: var(--warn); font-size: 12.5px; }
.cb-nouvelle-pied { display: grid; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.cb-nouvelle-nom { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; }
.cb-nouvelle-nom .field { font-weight: 400; }
.cb-nouvelle-ok { width: 100%; }
.cb-fenetres { display: contents; }
@media (min-width: 600px) {
.cb-fenetres {
position: fixed;
right: 92px;
bottom: 16px;
z-index: 1;
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
gap: 10px;
pointer-events: none;
}
.cb-fenetres > .cb-fenetre { flex: none; width: 330px; pointer-events: auto; }
.cb-fenetres .cb-fil-retour { display: none; }
#chatbox > .cb-panneau { position: relative; z-index: 2; }
}
.cb-fenetre-signal { outline: 2px solid var(--accent); outline-offset: -2px; }
.tel-sms .sms { position: relative; max-width: min(78%, calc(100% - 64px)); }
.sms-moi > .sms-outils { left: auto; right: 100%; flex-direction: row-reverse; }
@media (hover: hover) {
.sms:hover > .sms-outils, .sms:focus-within > .sms-outils, .sms-actif > .sms-outils { opacity: 1; }
}
@media (hover: none) {
.tel-sms .sms { -webkit-touch-callout: none; }
}
.sms-actif > .sms-texte { outline: 2px solid var(--accent); outline-offset: 1px; }
.sms-menu { position: absolute; right: auto; bottom: auto; z-index: 30; min-width: 200px; max-width: calc(100% - 16px); text-align: left; }
.sms-menu.cb-menu-feuille { left: 8px; right: 8px; top: auto; bottom: 8px; min-width: 0; max-width: none; }
.sms-menu .cb-menu-reacs .reac { min-width: 34px; min-height: 34px; font-size: 18px; }
.sms .sms-cite { max-width: 100%; text-align: left; }
.sms-heure { display: none; margin: 2px 10px 0; color: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.sms-moi > .sms-heure { text-align: right; }
@media (hover: hover) { .sms:hover > .sms-heure { display: block; } }
.sms-heure-visible > .sms-heure { display: block; }
.tel-sms > .cb-jour { margin: 8px 0 0; }
.sms-texte a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.sms:not(.sms-moi) .sms-texte a { color: var(--accent-ink); }
.sms > .reacs { margin: 3px 6px 0; gap: 4px; }
.sms-moi > .reacs { justify-content: flex-end; }
.sms .reac { min-height: 22px; padding: 1px 7px; font-size: 12px; }
.sms-menu-pret .reacs-palette, .td-sms .reacs-palette { display: none; }
.sms-menu-pret .sms > .reacs:not(:has(.reac[data-emoji])) { display: none; }
.tel-sms .sms-en-modification { width: 100%; max-width: 100%; }
.tel-ecrire-ligne { align-items: flex-end; }
.tel-ecrire textarea {
flex: 1 1 auto; min-width: 0; min-height: 36px; max-height: calc(1.4em * 5 + 18px);
padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 18px;
background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.4;
resize: none; overflow-y: auto;
}
.tel-ecrire > .sms-reponse { flex: 1 0 100%; padding: 4px 2px; border-top: 0; background: none; }
.tel-ecrire > .sms-vocal { flex: 1 0 100%; }
.td-ecrire .td-joindre { width: 34px; height: 34px; }
.td-ecrire .comp-images { flex: 1 0 100%; }
.td-fil > .sms-ecrit { flex: 0 0 auto; margin: 0 12px 2px; }
.td-fil > .td-erreur, .td-fil > .td-annonce { flex: 0 0 auto; margin: 0; padding: 6px 12px; font-size: 12.5px; }
.tel-ecrire-ligne { container-type: inline-size; }
.sms-pieces { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.sms-pieces-plus { width: 34px; height: 34px; padding: 0; font: inherit; }
.sms-pieces-plus .ico { transition: transform .15s; }
.sms-pieces-ouvert > .sms-pieces-plus { border-color: var(--accent); color: var(--ink); }
.sms-pieces-ouvert > .sms-pieces-plus .ico { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .sms-pieces-plus .ico { transition: none; } }
.sms-pieces-menu { display: none; left: 0; right: auto; z-index: 30; min-width: 150px; }
.sms-pieces-ouvert > .sms-pieces-menu { display: grid; }
.sms-pieces-menu > label {
display: flex; align-items: center; justify-content: flex-start; gap: 10px;
width: 100%; height: auto; min-height: 44px; padding: 0 12px;
border: 0; border-radius: var(--rayon-s); background: none; color: var(--ink);
font-size: 14px; font-weight: 500; cursor: pointer;
}
.sms-pieces-menu > label:hover { background: var(--surface-2); }
.sms-pieces-menu > label .ico { width: 17px; height: 17px; color: var(--muted); }
.sms-piece-nom { display: none; }
.tel-ecrire-ligne .sms-pieces-menu .sms-piece-nom,
.tel-ecrire-ligne .sms-pieces-menu .comp-outil-nom { display: inline; }
.sms-pieces-enregistre > .sms-pieces-plus { display: none; }
.sms-pieces-enregistre > .sms-pieces-menu { display: contents; }
.sms-pieces-enregistre > .sms-pieces-menu > :not(.vocal-enregistre) { display: none; }
.sms-pieces-enregistre .sms-pieces-menu > .vocal-enregistre {
width: auto; min-height: 34px; padding: 0 10px; border: 1px solid var(--accent); border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--accent-ink);
}
.sms-pieces-enregistre .vocal-enregistre .ico { color: var(--accent-ink); animation: vocal-battement 1.2s ease-in-out infinite; }
.sms-pieces-enregistre .vocal-enregistre .sms-piece-nom,
.sms-pieces-enregistre .vocal-enregistre .comp-outil-nom { display: none; }
@media (prefers-reduced-motion: reduce) { .sms-pieces-enregistre .vocal-enregistre .ico { animation: none; } }
@container (min-width: 420px) {
.sms-pieces-plus { display: none; }
.sms-pieces-menu { display: contents; }
.sms-pieces-menu > label { width: auto; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--rayon-pilule); color: var(--muted); font-weight: 600; }
.sms-pieces-menu > label.td-joindre { width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; border-color: var(--line-strong); background: var(--surface); }
.tel-ecrire-ligne .sms-pieces-menu .sms-piece-nom { display: none; }
}
.ech-pub-tete { align-items: center; }
.ech-menu .carte-menu-bouton { min-width: 36px; min-height: 34px; padding: 0 6px; font-size: 16px; }
.ech-menu .carte-menu-liste { top: calc(100% + 4px); bottom: auto; min-width: 200px; z-index: 20; }
.ech-epinglee {
display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
font-size: 11px; font-weight: 600; color: var(--accent-ink);
}
.ech-epinglee .ico { width: 12px; height: 12px; }
.ech-modifier { margin: 10px 12px 0; display: grid; gap: 8px; }
.ech-modifier textarea { width: 100%; min-height: 72px; resize: vertical; font: inherit; font-size: 14px; }
.ech-modifier-pied { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }
.ech-jaime { display: inline-flex; align-items: center; gap: 4px; }
.ech-jaime .ico { width: 15px; height: 15px; }
.ech-reacs { padding: 6px 12px 0; }
.ech-reacs .reacs { margin: 0; }
.ech-reacs .reac { min-height: 26px; padding: 1px 8px; font-size: 12.5px; }
.ech-plus { margin: 12px; text-align: center; font-size: 13px; }
.ech-plus a:not(.tel-bouton) { color: var(--muted); }
.ech-com-quand { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ech-com-quand a { color: var(--muted); text-decoration: none; }
.ech-com-quand a:hover { color: var(--ink); text-decoration: underline; }
.ech-com-geste { display: inline; margin: 0; }
.ech-com-geste .ech-jaime { font-size: 11.5px; }
.ech-com-geste .ech-jaime .ico { width: 12px; height: 12px; }
.ech-com-repondre { font-weight: 600; }
.ech-reponses {
display: flex; flex-direction: column; gap: 9px;
margin: -3px 0 0 14px; padding-left: 10px; border-left: 2px solid var(--line);
}
.ech-com-reponse .ech-com-qui { font-size: 12.5px; }
.ech-com:target { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--rayon-s); }
.ech-repond-a {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
flex: 1 0 100%; margin: 0; padding: 2px 4px; font-size: 12px; color: var(--muted);
}
.ech-repond-a[hidden] { display: none; }
.ech-repond-a a { display: inline-flex; color: var(--muted); }
.ech-repond-a .ico { width: 12px; height: 12px; }
.ech-activite { list-style: none; margin: 0; padding: 0 0 10px; }
.ech-activite-ligne a {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
color: inherit; text-decoration: none; border-bottom: 1px solid var(--line);
}
.ech-activite-ligne a:hover { background: var(--surface-2); }
.ech-activite-neuve a { background: color-mix(in oklab, var(--accent) 7%, transparent); }
.ech-activite-texte { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; }
.ech-activite-texte small { display: block; font-size: 11px; color: var(--faint); }
.ech-activite-emoji { font-size: 15px; }
.ech-activite-nouveau { color: var(--accent-ink); font-weight: 600; }
.ech-annonce {
position: fixed; z-index: 320; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%); margin: 0; padding: 8px 14px; max-width: calc(100% - 32px);
border-radius: var(--rayon-pilule); background: var(--ink); color: var(--paper);
font-size: 13px; box-shadow: var(--ombre-carte);
}
.ech-annonce[hidden] { display: none; }
.invitation-ios {
position: fixed; z-index: 310; left: 16px; right: 16px;
bottom: calc(76px + env(safe-area-inset-bottom, 0px));
padding: 12px 12px 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px;
background: var(--surface); color: var(--ink); box-shadow: var(--ombre-carte);
font-size: 13.5px; line-height: 1.45; transition: opacity .3s, transform .3s;
}
@media (min-width: 600px) { .invitation-ios { left: auto; right: 24px; bottom: 24px; width: 360px; } }
.invitation-ios-part { opacity: 0; transform: translateY(10px); }
.invitation-ios-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.invitation-ios-tete h2 { flex: 1; margin: 0; font-family: var(--font-title); font-size: 16px; line-height: 1.25; }
.invitation-ios-icone { flex: none; width: 36px; height: 36px; border-radius: 9px; }
.invitation-ios-fermer { flex: none; display: inline-flex; padding: 6px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.invitation-ios-fermer .ico { width: 14px; height: 14px; }
.invitation-ios-etapes { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.invitation-ios-etapes .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--accent-ink); }
.invitation-ios p { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .invitation-ios { transition: none; } }
.succes-toast.alerte-toast { --succes-teinte: var(--accent); }
.alerte-toast-marque { padding: 0; background: none; }
.alerte-toast-marque img { display: block; width: 22px; height: 22px; border-radius: 6px; }
.alerte-toast-phrase { color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ech-couleur-blanc { color: var(--story-blanc); }
.ech-couleur-noir { color: var(--story-noir); }
.ech-couleur-rose { color: var(--story-rose); }
.ech-couleur-jaune { color: var(--story-jaune); }
.ech-couleur-bleu { color: var(--story-bleu); }
.ech-couleur-vert { color: var(--story-vert); }
.ech-style-bulle.ech-couleur-blanc { color: var(--story-noir); }
.ech-taille-petit { font-size: 13px; }
.ech-taille-moyen { font-size: 17px; }
.ech-taille-grand { font-size: 24px; }
.ech-taille-enorme { font-size: 32px; line-height: 1.2; }
.ech-creer-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.ech-creer-couleurs legend { width: 100%; }
.ech-creer-couleur { position: relative; display: inline-flex; cursor: pointer; }
.ech-creer-couleur input { position: absolute; opacity: 0; pointer-events: none; }
.ech-pastille-couleur {
display: block;
width: 30px;
height: 30px;
border: 2px solid var(--line-strong);
border-radius: 50%;
}
.ech-creer-couleur input:checked + .ech-pastille-couleur { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ech-creer-couleur input:focus-visible + .ech-pastille-couleur { outline: 2px solid var(--accent); outline-offset: 2px; }
.ech-fond-blanc { background: var(--story-blanc); }
.ech-fond-noir { background: var(--story-noir); }
.ech-fond-rose { background: var(--story-rose); }
.ech-fond-jaune { background: var(--story-jaune); }
.ech-fond-bleu { background: var(--story-bleu); }
.ech-fond-vert { background: var(--story-vert); }
.ech-diapo-reacs { margin: 6px 0 4px; }
.reacs-choix.reacs-rapides { position: static; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; border: 0; background: none; box-shadow: none; }
.ech-diapo-reacs .reacs { flex-wrap: wrap; }
.ech-diapo-repondre { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
.ech-diapo-repondre-champ {
flex: 1;
min-width: 0;
min-height: 44px;
padding: 9px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: var(--paper);
color: var(--ink);
font: inherit;
font-size: 16px;
}
.ech-diapo-repondre-envoyer {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: var(--accent);
color: var(--sur-accent);
cursor: pointer;
}
.ech-diapo-repondre-envoyer .ico { width: 18px; height: 18px; }
.ech-lecteur-js .ech-diapo-repondre-champ {
border-color: var(--renc-filet);
background: var(--renc-verre);
color: var(--sur-photo);
}
.ech-lecteur-js .ech-diapo-repondre-champ::placeholder { color: var(--renc-filet); }
.ech-lecteur-js .ech-diapo-reacs .reac { color: var(--sur-photo); }
.ech-situation { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.ech-situation .ico { width: 14px; height: 14px; }
.ech-comptes a { color: inherit; text-decoration: none; }
.ech-comptes a:hover, .ech-comptes a:focus-visible { text-decoration: underline; }
.ech-liste-gens { margin: 0; padding: 0 12px 12px; list-style: none; }
.ech-liste-gens li + li { border-top: 1px solid var(--line); }
.ech-liste-gens a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; color: inherit; text-decoration: none; }
.ech-liste-gens .ech-av { flex: none; width: 38px; height: 38px; }
.ech-liste-gens-corps { display: flex; flex-direction: column; min-width: 0; }
.ech-liste-gens-corps small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liv-objets { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 2px; }
.liv-objets legend { padding: 0; }
.liv-reste { font-variant-numeric: tabular-nums; }
.renc-revoir { display: flex; justify-content: center; margin: 4px 0 12px; }
.renc-revoir .tel-bouton { display: inline-flex; align-items: center; gap: 6px; }
.renc-revoir .ico { width: 16px; height: 16px; }
.alertes-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.visionneuse-gestes img { touch-action: none; cursor: zoom-in; user-select: none; -webkit-user-drag: none; will-change: transform; }
.visionneuse-zoomee img { cursor: grab; }
.visionneuse-zoomee img:active { cursor: grabbing; }
.emo-plus {
display: block;
width: calc(100% - 16px);
margin: 10px 8px 6px;
padding: 9px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 13px;
cursor: pointer;
}
.emo-plus:disabled { opacity: .6; cursor: progress; }
.tpl-mini {
position: fixed;
left: 12px;
bottom: 12px;
z-index: 330;
width: min(320px, calc(100vw - 32px));
padding: 8px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
color: var(--ink);
box-shadow: var(--ombre-carte);
}
.tpl-mini-titre { margin: 0 2px 6px; overflow: hidden; font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tpl-mini-titre:empty { display: none; }
.tpl-mini-cadre iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--rayon-s); }
.tpl-mini-gestes { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.tpl-mini-geste {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: none;
color: var(--ink);
cursor: pointer;
}
.tpl-mini-geste .ico { width: 18px; height: 18px; }
.tpl-mini-geste[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-ink); }
.tpl-mini-arreter {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: auto;
padding: 8px 12px;
border: 1px solid var(--line-strong);
border-radius: var(--rayon-pilule);
background: none;
color: var(--ink);
font: inherit;
font-size: 12.5px;
cursor: pointer;
}
.tpl-mini-arreter .ico { width: 12px; height: 12px; }
@media (max-width: 599px) {
.tpl-mini { left: 16px; right: 16px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.media-masquee-examen {
display: flex; align-items: center; justify-content: center; text-align: center;
max-width: 100%; min-height: 72px; padding: 12px;
border: 1px dashed var(--line); border-radius: 10px;
background: var(--surface-2); color: var(--faint);
font-size: 13px; font-style: italic;
}
.tri-carte { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tri-carte-tete { display: flex; align-items: center; gap: 6px; }
.tri-carte-titre { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 17px; }
.tri-carte-titre .ico { width: 20px; height: 20px; }
.tri-carte-periode { margin-top: 10px; }
.tri-carte-periode + .tri-carte-periode { padding-top: 10px; border-top: 1px solid var(--line); }
.tri-carte-quand { margin: 0; font-size: 14px; line-height: 1.5; }
.tri-carte-quand .etiq, .tri-carte-lignes .etiq { margin-left: 4px; white-space: nowrap; }
.tri-carte-hors { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.tri-carte-lignes { margin: 6px 0 0; padding: 0; list-style: none; }
.tri-carte-lignes li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 0; font-size: 14px; }
.tri-carte-nom { font-weight: 600; }
.tri-carte-compte { font-variant-numeric: tabular-nums; }
.tri-periode:has(input[name="tri_periode"][value="aucun"]:checked) .tri-si-glissant,
.tri-periode:has(input[name="tri_periode"][value="aucun"]:checked) .tri-si-mois,
.tri-periode:has(input[name="tri_periode"][value="mois"]:checked) .tri-si-glissant,
.tri-periode:has(input[name="tri_periode"][value="glissante"]:checked) .tri-si-mois,
.tri-periode:has(#tri_exempter_arrivants:not(:checked)) .tri-exemption-jour { display: none; }
.td-pastille-fil {
position: relative;
flex: none;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 50%;
background: var(--surface-2);
}
.td-pastille-fil.tel-fil-pastille { width: 42px; height: 42px; }
.td-pastille-fil > img { width: 100%; height: 100%; object-fit: cover; }
.td-pastille-fil > .td-visage-plein { width: 100%; height: 100%; font-size: 14px; }
.td-pastille-fil.td-mosaique { overflow: visible; background: none; }
.td-mosaique > .td-visage { position: absolute; width: 68%; height: 68%; font-size: 10px; box-shadow: 0 0 0 2px var(--paper); }
.td-mosaique > .td-mosaique-a { top: 0; left: 0; }
.td-mosaique > .td-mosaique-b { right: 0; bottom: 0; }
.td-contact-ligne .td-visage-plein { width: 42px; height: 42px; font-size: 14px; }
.td-liste .tel-fil { width: 100%; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
.td-liste .tel-fil.tel-fil-neuf { background: var(--accent-soft); }
.td-liste .tel-fil-haut b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-fil-signe { display: inline-grid; place-items: center; flex: none; color: var(--muted); }
.td-fil-signe .ico { width: 12px; height: 12px; }
.td-fil-quand { margin-left: auto; flex: none; padding-left: 6px; color: var(--faint); font-size: 11px; }
.td-fil-nonlus {
flex: none;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--rayon-pilule);
background: var(--accent);
color: var(--sur-accent);
font-size: 11px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
.td-boite-tete { position: sticky; top: 0; z-index: 2; padding: 8px 12px 6px; background: var(--paper); border-bottom: 1px solid var(--line); }
.td-onglets { display: flex; gap: 4px; margin-bottom: 6px; }
.td-onglet {
flex: 1;
min-height: 34px;
border: 0;
border-radius: var(--rayon-pilule);
background: none;
color: var(--muted);
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.td-onglet[aria-selected='true'] { background: var(--accent-soft); color: var(--accent-ink); }
.td-chercher {
width: 100%;
min-height: 36px;
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
background: var(--surface);
color: var(--ink);
font: inherit;
font-size: 14px;
}
.td-contact-ligne { width: 100%; align-items: center; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; }
.td-nouveau-a { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.td-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.td-puce { display: inline-flex; align-items: center; gap: 2px; padding-right: 2px; }
.td-puce-retirer { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.td-puce-retirer .ico { width: 11px; height: 11px; }
.td-nouveau-ligne,
.td-lisible,
.td-det-titre { position: relative; display: flex; align-items: center; gap: 8px; }
.td-nouveau-ligne .td-chercher { flex: 1; min-width: 0; }
button.td-contact { width: 100%; border: 0; border-radius: var(--rayon-s); background: none; color: var(--ink); font: inherit; text-align: left; }
button.td-contact:hover { background: var(--surface); }
.td-contact-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-contact .td-visage-petit { width: 32px; height: 32px; font-size: 11px; }
.td-contact-coche { flex: none; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; }
.td-contact-choisi .td-contact-coche { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--paper); }
.td-nouveau-pied { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.td-nouveau-nom { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.td-lisible-case { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 13.5px; cursor: pointer; }
.td-lisible-case input { width: 18px; height: 18px; }
.td-titre-visage { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.td-titre-pastille { width: 30px; height: 30px; }
.td-titre-pastille > .td-visage-plein { font-size: 11px; }
.td-titre-pastille.td-mosaique > .td-visage { font-size: 8px; }
.td-sous-titre { color: var(--muted); font-size: 11.5px; }
.td-info-fil {
flex: none;
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-left: auto;
padding: 0;
border: 1.5px solid currentColor;
border-radius: 50%;
background: none;
color: var(--accent-ink);
font-family: Georgia, 'Times New Roman', serif;
font-size: 15px;
font-style: italic;
font-weight: 700;
cursor: pointer;
}
.td-appbar .td-info-fil:not([hidden]) + .td-sortir { margin-left: 0; }
.td-details { height: 100%; overflow-y: auto; padding: 12px 12px 18px; }
.td-det-tete { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.td-det-pastille { width: 72px; height: 72px; }
.td-det-pastille > .td-visage-plein { font-size: 22px; }
.td-det-pastille.td-mosaique > .td-visage { font-size: 15px; }
.td-det-nom { font-size: 16px; overflow-wrap: anywhere; }
.td-det-qui { color: var(--muted); font-size: 12.5px; }
.td-det-gestes { display: flex; justify-content: center; gap: 14px; margin: 12px 0 4px; }
.td-det-geste { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 11.5px; cursor: pointer; }
.td-det-rond { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); }
.td-det-rond .ico { width: 18px; height: 18px; }
.td-det-geste[aria-pressed='true'] .td-det-rond { background: var(--accent-soft); color: var(--accent-ink); }
.td-det-bloc { margin-top: 14px; }
.td-det-titre { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.td-det-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 40px; }
.td-det-valeur { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.td-det-vide { color: var(--faint); font-style: italic; }
.td-det-crayon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.td-det-crayon:hover { background: var(--surface); color: var(--ink); }
.td-det-crayon .ico { width: 16px; height: 16px; }
.td-det-photo { position: relative; cursor: pointer; }
.td-det-photo.td-en-cours { opacity: .6; pointer-events: none; }
.td-det-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.td-det-form .field { flex: 1 1 140px; min-width: 0; }
.td-det-membres { margin: 0; padding: 0; list-style: none; }
.td-membre { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); }
.td-membre .td-visage-petit { width: 34px; height: 34px; font-size: 12px; }
.td-membre-noms { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.td-membre-noms b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.td-membre-noms small { color: var(--muted); font-size: 12px; }
.td-membre .td-det-form { padding: 6px 0; }
.td-det-ajouter,
.td-det-quitter {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 0 4px;
border: 0;
background: none;
color: var(--accent-ink);
font: inherit;
font-size: 14px;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.td-det-ajouter .ico,
.td-det-quitter .ico { width: 16px; height: 16px; }
.td-det-quitter { margin-top: 10px; color: var(--warn); }
.td-det-lisible { margin: 14px 0 0; color: var(--muted); font-size: 12.5px; }
.td-det-lisible a { margin-left: 4px; }
.td-det-bloc[data-info-ancre] { position: relative; }
.cb-reglages {
position: absolute;
inset: 0;
z-index: 6;
display: flex;
flex-direction: column;
background: var(--paper);
border-radius: inherit;
}
.cb-reglages-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px 16px; }
.cb-reglages .td-det-tete b { font-size: 15px; }
.cb-reglages .cb-crest-grand .pub-avatar,
.cb-reglages .cb-crest-grand { width: 64px; height: 64px; }
.cb-membre { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--line); }
.cb-membre-photo { flex: none; display: inline-flex; }
.cb-membre-photo .pub-avatar { width: 32px; height: 32px; }
.cb-membre-actes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 8px; font-size: 12.5px; }
.cb-membre-actes button { padding: 4px 2px; border: 0; background: none; color: var(--accent-ink); font: inherit; cursor: pointer; }
.cb-membre-actes .carte-menu-danger { color: var(--warn); }
.ajout-membres { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ajout-membres-a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--rayon); background: var(--surface); }
.ajout-membres-a input { flex: 1 1 120px; min-width: 0; min-height: 34px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.ajout-membres-suggestions { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.ajout-membres-suggestions[hidden] { display: none; }
.ajout-membres-suggestions button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ajout-membres-suggestions button:last-child { border-bottom: 0; }
.ajout-membres-suggestions button:hover,
.ajout-membres-suggestions button:focus-visible { background: var(--accent-soft); }
.ajout-membres-suggestions .pub-avatar { width: 28px; height: 28px; flex: none; }
.ajout-membres-vide { margin: 0; padding: 10px; color: var(--faint); font-size: 13px; }
.cb-crest-grand { display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 22px; font-weight: 600; }
.cb-crest-grand img { width: 100%; height: 100%; object-fit: cover; }
.cb-reglages-crayon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.cb-reglages-crayon:hover { background: var(--surface); color: var(--ink); }
.cb-reglages-crayon .ico { width: 15px; height: 15px; }
.cb-reglages-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding: 6px 0; }
.cb-reglages-form .field { flex: 1 1 140px; min-width: 0; }
.cb-membre .td-membre-noms .etiq { align-self: flex-start; margin-top: 2px; }
.cb-reglages-garde { color: var(--warn); text-decoration: none; }
.groupe-surnom { flex-wrap: wrap; }
.groupe-surnom .field { flex: 1 1 140px; min-width: 0; }
.ajout-membres-a .cb-puces { display: contents; }
.tel-nouveau-lien,
.tel-info-fil { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--accent-ink); text-decoration: none; }
.tel-nouveau-lien .ico { width: 18px; height: 18px; }
.tel-info-fil { width: 28px; height: 28px; border: 1.5px solid currentColor; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; font-style: italic; font-weight: 700; }
.tel-contacts { margin: 0 0 10px; padding: 0; border: 0; }
.tel-contacts .td-contact { border-bottom: 1px solid var(--line); }
.tel-contacts .tel-surnom-visage { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; font-size: 11px; }
.cp-barre {
position: sticky; top: 8px; z-index: 20;
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
margin: 0 0 14px; padding: 8px 12px;
border: 1px solid var(--accent); border-radius: var(--rayon-l);
background: var(--surface); color: var(--ink); box-shadow: var(--ombre-carte);
}
.cp-barre-titre { position: relative; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.cp-barre-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.cp-barre-gestes .btn .ico { width: 16px; height: 16px; }
.cp-barre-detail { color: var(--muted); font-size: 12.5px; }
.cp-barre-dit { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 13px; }
.cp-barre-dit:empty { display: none; }
.cp-fait { margin: 0 0 12px; }
.cp-dessin-ambiance { display: inline-flex; gap: 2px; vertical-align: middle; }
.cp-dessin-ambiance span { width: 6px; height: 14px; border-radius: 3px; border: 1px solid var(--line-strong); }
.cp-dessin-ambiance span:nth-child(1) { background: var(--accent); }
.cp-dessin-ambiance span:nth-child(2) { background: var(--surface-2); }
.cp-dessin-ambiance span:nth-child(3) { background: var(--ink); }
.cp-page .up-blocs { row-gap: 34px; }
.cp-bloc {
position: relative; min-width: 0;
border-radius: var(--th-rayon, var(--rayon-l));
outline: 2px dashed transparent; outline-offset: 5px;
transition: outline-color .15s ease;
}
.cp-bloc > .up-bloc { height: 100%; }
.cp-bloc.cp-actif, .cp-bloc:focus-within { outline-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
.cp-bloc:hover { outline-color: color-mix(in oklab, var(--accent) 70%, transparent); }
}
.cp-masque > .up-bloc { opacity: .5; }
.cp-glisse { opacity: .55; }
.cp-vide-dit { margin: 0; color: var(--muted); font-size: 14px; }
@media (min-width: 900px) {
.up-blocs > .cp-bloc, .up-blocs > .cp-fin { grid-column: 1 / -1; }
.up-blocs > .cp-bloc.cp-moitie { grid-column: auto; }
}
.cp-outils {
position: absolute; top: -18px; right: 8px; z-index: 6;
display: flex; align-items: center; gap: 4px; max-width: calc(100% - 16px);
padding: 3px; border: 1px solid var(--line-strong); border-radius: 12px;
background: var(--surface); color: var(--ink); box-shadow: var(--ombre-carte);
opacity: 0; visibility: hidden; transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.cp-bloc.cp-actif > .cp-outils, .cp-bloc:focus-within > .cp-outils {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
.cp-bloc:hover > .cp-outils { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.cp-outils-nom {
min-width: 0; padding: 0 6px; overflow: hidden; color: var(--muted);
font-size: 12px; white-space: nowrap; text-overflow: ellipsis;
}
.cp-outils-gestes { display: flex; flex: none; align-items: center; gap: 1px; }
.cp-outils-form { display: contents; }
.cp-geste {
display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
border: 0; border-radius: 9px; background: transparent; color: var(--ink);
cursor: pointer; text-decoration: none;
}
.cp-geste:hover { background: var(--surface-2); }
.cp-geste:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cp-geste:disabled { opacity: .3; cursor: default; }
.cp-geste:disabled:hover { background: transparent; }
.cp-geste[hidden] { display: none; }
.cp-geste .ico { width: 18px; height: 18px; }
.cp-geste-retirer { color: var(--warn); }
.cp-poignee { cursor: grab; }
.cp-poignee:active { cursor: grabbing; }
.cp-poignee-traits {
width: 12px; height: 18px;
background-image: radial-gradient(circle, currentColor 1.4px, transparent 1.6px);
background-size: 6px 6px;
}
.cp-dessin-largeur { display: flex; gap: 2px; width: 18px; height: 13px; }
.cp-dessin-largeur span { flex: 1; border: 2px solid currentColor; border-radius: 3px; }
.cp-dessin-largeur span + span { display: none; }
.cp-dessin-largeur.cp-dessin-moitie span + span { display: block; }
@media (max-width: 520px) {
.cp-outils { left: 6px; right: 6px; justify-content: flex-end; max-width: none; }
.cp-outils-nom { display: none; }
.cp-geste { width: 38px; height: 38px; }
}
.cp-plus {
position: absolute; left: 50%; bottom: -35px; z-index: 5;
display: grid; place-items: center; width: 36px; height: 36px; transform: translateX(-50%);
border: 2px solid var(--accent); border-radius: 50%;
background: var(--surface); color: var(--accent-ink); box-shadow: var(--ombre-carte);
opacity: .8; text-decoration: none;
}
.cp-plus:hover, .cp-plus:focus-visible { opacity: 1; background: var(--accent-soft); }
.cp-plus:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cp-plus .ico { width: 16px; height: 16px; }
.up-blocs > .cp-bloc:last-of-type > .cp-plus { display: none; }
.up-blocs > .cp-plus-tete { grid-column: 1 / -1; display: flex; justify-content: center; margin: -8px 0 -18px; }
.cp-plus.cp-plus-haut { position: static; transform: none; }
.cp-fin {
display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; margin: 0;
border: 2px dashed var(--line-strong); border-radius: var(--th-rayon, var(--rayon-l));
color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
a.cp-fin:hover, a.cp-fin:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.cp-fin .ico { width: 18px; height: 18px; }
.cp-fin-pleine { color: var(--muted); font-weight: 500; }
.cp-onglets-liens { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.cp-onglet { display: inline-flex; flex: none; align-items: center; }
.cp-onglet-ouvert { border-radius: var(--rayon) var(--rayon) 0 0; background: var(--accent-soft); }
.cp-onglets-liens a.cp-geste { width: 34px; height: 34px; min-height: 0; padding: 0; border-bottom: 0; color: var(--ink); }
.cp-onglet-gestes { display: inline-flex; align-items: center; padding-right: 4px; }
.cp-onglet-saisie > a, .cp-onglet-saisie > .cp-onglet-gestes { display: none; }
.cp-onglet-form { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
.cp-onglet-form[hidden] { display: none; }
.cp-onglet-form .field { width: 13em; min-height: 36px; padding: 4px 10px; }
.cp-panneau {
position: fixed; z-index: 60; top: 72px; right: 12px; bottom: 12px;
display: flex; flex-direction: column; width: min(360px, calc(100vw - 24px));
border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden;
background: var(--paper); color: var(--ink); box-shadow: 0 24px 70px -20px color-mix(in srgb, black 60%, transparent);
}
.cp-panneau[hidden] { display: none; }
.cp-panneau-tete {
display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none;
padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.cp-panneau-tete h2 { margin: 0; font-size: 17px; }
.cp-panneau-tete h2:focus { outline: none; }
.cp-panneau-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; }
.cp-panneau .theme-ambiances-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
.cp-panneau { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 58dvh; border-radius: 18px 18px 0 0; }
.cp-panneau .theme-ambiances-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cp-fenetre-page { padding: 16px; }
.cp-fenetre-page > .section { margin: 0 0 16px; }
.cp-fenetre-page > .section:last-child { margin-bottom: 0; }
.cp-fenetre-page h2:focus { outline: none; }
.cp-fenetre-refus { margin: 12px 16px 0; }
.cp-fenetre-corps[aria-busy='true'] { opacity: .6; }
.cp-titre-info { margin: 0 0 4px; }
.cp-titre-info h2 { margin: 0; }
.up-compo-envoi { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.up-compo-dit { margin-top: 14px; }
.up-compo-annonces > summary { cursor: pointer; }
.up-compo-annonces > summary h2 { display: inline; font-size: 17px; }
.cp-catalogue {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px;
margin: 10px 0 0; padding: 0; list-style: none;
}
@media (max-width: 420px) { .cp-catalogue { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cp-cat { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.cp-cat:hover, .cp-cat:focus-within { border-color: var(--accent); }
.cp-cat-lien { display: flex; flex-direction: column; gap: 7px; padding: 8px 8px 10px; color: var(--ink); text-decoration: none; }
.cp-cat-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--rayon); }
.cp-cat-lien b { padding-right: 24px; font-size: 13.5px; line-height: 1.3; }
.cp-cat > .info-i { position: absolute; right: 8px; bottom: 10px; }
.cp-vignette {
position: relative; display: grid; gap: 4px; align-content: center; aspect-ratio: 16 / 10; padding: 9px;
overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2);
}
.cp-vignette i { position: relative; display: block; min-width: 0; min-height: 0; border-radius: 3px; background: var(--line-strong); }
.cp-v-texte, .cp-v-reglement, .cp-v-fil, .cp-v-espaces, .cp-v-playlist, .cp-v-infos { align-content: start; }
.cp-v-texte { grid-template-rows: 10px repeat(3, 5px); }
.cp-v-texte i:first-child { width: 55%; background: var(--accent); }
.cp-v-texte i:last-child { width: 70%; }
.cp-v-infos { grid-template-rows: repeat(4, 6px); gap: 7px; }
.cp-v-infos i { background: linear-gradient(90deg, var(--muted) 0 30%, transparent 30% 55%, var(--line-strong) 55%); }
.cp-v-carte i { background: linear-gradient(160deg, var(--accent-soft), var(--surface)); border: 1px solid var(--line-strong); }
.cp-v-carte i::before { content: ''; position: absolute; top: 18%; right: 14%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.cp-v-carte i::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50%;
background: var(--line-strong); clip-path: polygon(0 100%, 28% 25%, 52% 72%, 74% 40%, 100% 100%);
}
.cp-v-album, .cp-v-qui, .cp-v-bref { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cp-v-album i { aspect-ratio: 3 / 4; border: 1px solid var(--line-strong); background: linear-gradient(180deg, var(--accent-soft) 0 72%, var(--line-strong) 72%); }
.cp-v-galerie, .cp-v-visages { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); align-content: stretch; }
.cp-v-galerie i { background: var(--accent-soft); border: 1px solid var(--line-strong); }
.cp-v-galerie i:nth-child(even) { background: var(--line-strong); }
.cp-v-fil, .cp-v-reglement { grid-template-rows: repeat(3, 7px); gap: 9px; }
.cp-v-reglement { grid-template-rows: repeat(4, 6px); gap: 7px; }
.cp-v-fil i { background: linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 13px, var(--line-strong) 13px); }
.cp-v-reglement i { background: linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 11px, var(--line-strong) 11px); }
.cp-v-annonces { grid-template-columns: 16px minmax(0, 1fr); align-items: start; align-content: stretch; }
.cp-v-annonces i:first-child { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.cp-v-annonces i:last-child { height: 100%; border: 1px solid var(--line-strong); background: var(--surface); }
.cp-v-liens { display: flex; flex-wrap: wrap; align-content: center; gap: 5px; }
.cp-v-liens i { width: 42%; height: 14px; border: 1.5px solid var(--accent); border-radius: 999px; background: transparent; }
.cp-v-qui i, .cp-v-membres i { aspect-ratio: 1; border-radius: 50%; }
.cp-v-qui i { border: 1.5px dashed var(--accent); background: var(--accent-soft); }
.cp-v-bref i { aspect-ratio: 1; border: 1px solid var(--line-strong); background: var(--surface); }
.cp-v-bref i::before { content: ''; position: absolute; top: 28%; left: 22%; right: 22%; height: 26%; border-radius: 2px; background: var(--accent); }
.cp-v-inscrire { grid-template-rows: 6px 6px 16px; gap: 7px; align-content: center; }
.cp-v-inscrire i:last-child { justify-self: start; width: 50%; border-radius: 999px; background: var(--accent); }
.cp-v-membres { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cp-v-membres i:nth-child(odd) { background: var(--accent-soft); border: 1px solid var(--line-strong); }
.cp-v-visages i { border-radius: 4px; }
.cp-v-visages i:nth-child(3n + 1) { background: var(--accent-soft); }
.cp-v-espaces { grid-template-rows: repeat(3, 11px); gap: 6px; }
.cp-v-espaces i { border: 1px solid var(--line-strong); background: var(--surface); }
.cp-v-registre { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 6px minmax(0, 1fr); gap: 6px; align-content: stretch; }
.cp-v-registre i:first-child { grid-column: 1 / -1; background: linear-gradient(90deg, var(--accent) 0 32%, var(--line-strong) 32%); }
.cp-v-registre i:not(:first-child) { border: 1px solid var(--line-strong); background: var(--accent-soft); }
.cp-v-livre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-content: stretch; }
.cp-v-livre i {
border: 1px solid var(--line-strong); border-radius: 0;
background: repeating-linear-gradient(180deg, var(--surface) 0 6px, var(--line-strong) 6px 7px);
}
.cp-v-livre i:first-child { border-radius: 6px 0 0 6px; }
.cp-v-livre i:last-child { border-radius: 0 6px 6px 0; }
.cp-v-citation { grid-template-rows: 22px 6px; gap: 8px; }
.cp-v-citation i:first-child { background: none; color: var(--accent); font-family: var(--font-title); font-size: 30px; font-style: normal; line-height: 1; }
.cp-v-citation i:first-child::before { content: '«'; }
.cp-v-citation i:last-child { width: 80%; }
.cp-v-image i { height: 100%; border-radius: 4px; background: linear-gradient(135deg, var(--accent-soft), var(--line-strong)); }
.cp-v-carte, .cp-v-image { align-content: stretch; }
.cp-v-playlist { grid-template-rows: repeat(3, 10px); gap: 8px; }
.cp-v-playlist i { background: linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px, var(--line-strong) 16px); }
.theme-ambiance-apercu.theme-vignette {
display: grid; height: auto; aspect-ratio: 16 / 10; padding: 6px; margin-bottom: 4px;
overflow: hidden; background: var(--tv-fond); text-align: left;
}
.tv-bloc {
display: grid; align-content: start; gap: 3px; padding: 5px 6px; border-radius: 5px;
background: var(--tv-blocs); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tv-encre) 12%, transparent);
}
.tv-titre { color: var(--tv-accent); font-family: var(--tv-police, var(--font-title)); font-size: 15px; font-weight: 600; line-height: 1; }
.tv-ligne { height: 4px; border-radius: 2px; background: var(--tv-encre); opacity: .3; }
.tv-court { width: 60%; }
.tv-bouton { width: 42%; height: 7px; margin-top: 2px; border-radius: 999px; background: var(--tv-accent); }
.theme-en-apercu .theme-boutons .btn-main { box-shadow: 0 0 0 3px var(--accent-soft); }
.theme-ambiances > .lab-ligne, .theme-couleurs > .lab-ligne, .theme-gabarits > .lab-ligne { margin-top: 0; padding: 0; }
.jac-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.jac-gestes .btn { flex: 1 1 100%; justify-content: center; }
@media (min-width: 600px) { .jac-gestes .btn { flex: 0 1 auto; } }
.jac-creer .field { width: 100%; }
.jac-creer .champs { margin-top: 12px; }
.jac-envoi { margin-top: 16px; }
.jac-fait, .jac-nouveau { margin: 10px 0; }
.jac-mon-annonce { margin-top: 18px; }
.jac-inviter-membres { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.jac-inviter-membres .btn { align-self: flex-start; }
.jac-suggestions { display: flex; flex-direction: column; gap: 6px; }
.jac-suggestions[hidden] { display: none; }
.jac-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.jac-puce { display: inline-flex; align-items: center; gap: 4px; }
.jac-puce-retirer { min-width: 28px; min-height: 28px; border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.jac-suggestions-liste { display: flex; flex-direction: column; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.jac-suggestions-liste[hidden] { display: none; }
.jac-suggestions-liste .mine { margin: 0; padding: 10px; }
.jac-suggestion { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.jac-suggestion:last-child { border-bottom: 0; }
.jac-suggestion:hover, .jac-suggestion:focus-visible { background: var(--accent-soft); }
.jac-suggestion .pub-avatar { width: 28px; height: 28px; flex: none; }
.jac-attente { margin-top: 14px; }
.jac-chercher .lab-ligne { display: flex; align-items: center; gap: 6px; }
.jac-chercher-form { margin-top: 10px; }
.jac-chercher-form form { margin-top: 10px; }
.jac-lien { margin: 14px 0 4px; }
.jac-lien-corps { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.jac-lien-corps .field { font-size: 13px; }
.jac-contexte { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.jac-contexte-lu { margin: 12px 0; padding: 12px 14px; border-radius: var(--rayon); background: var(--surface-2); }
.jac-contexte-lu p { margin: 0; }
.jac-postuler { margin-top: 12px; }
.jac-postuler > summary { list-style: none; display: inline-flex; }
.jac-postuler > summary::-webkit-details-marker { display: none; }
.jac-postuler form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.jac-postuler form .btn { align-self: flex-start; }
.jac-postuler-fait { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jac-candidatures { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.jac-candidatures-titre { margin: 0 0 8px; font-weight: 600; }
.jac-candidature { padding: 10px 0; border-bottom: 1px solid var(--line); }
.jac-candidature:last-of-type { border-bottom: 0; }
.jac-candidature-tete { display: flex; align-items: center; gap: 8px; }
.jac-candidature-nom { font-weight: 600; }
.jac-candidature-mot { display: block; margin: 6px 0 0; white-space: normal; }
.jac-candidature-actes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 8px; }
.jac-lancer { flex: 1 1 100%; }
.jac-lancer > summary { list-style: none; display: inline-flex; }
.jac-lancer > summary::-webkit-details-marker { display: none; }
.jac-lancer[open] form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.jac-candidatures-lien { margin: 10px 0 0; }
.jac-acceptees { margin: 8px 0 0; }
.jac-ressources-tete { display: flex; align-items: center; gap: 6px; }
.jac-ajouter { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.jac-ajout { flex: 1 1 100%; }
@media (min-width: 600px) { .jac-ajout { flex: 0 1 auto; } .jac-ajout[open] { flex: 1 1 100%; } }
.jac-ajout > summary { list-style: none; display: inline-flex; }
.jac-ajout > summary::-webkit-details-marker { display: none; }
.jac-ajout[open] form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.jac-ajout form .btn { align-self: flex-start; }
.pub-ressource .pub-bilan { display: none; }
.jac-ressource-image { display: block; margin-top: 8px; }
.jac-ressource-image img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--rayon); }
.jac-ressource-legende { margin: 6px 0 0; }
.jac-ressource-adresse { margin: 2px 0 0; overflow-wrap: anywhere; }
.pre-choix { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.pre-chercher[hidden] { display: none; }
.pre-liste { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.pre-item[hidden] { display: none; }
.pre-carte { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); cursor: pointer; }
.pre-radio:focus-visible + .pre-carte { outline: 2px solid var(--accent); outline-offset: 2px; }
.pre-radio:checked + .pre-carte { border-color: var(--accent); background: var(--accent-soft); }
.pre-carte-portrait, .pre-apercu-portrait { flex: none; width: 44px; height: 58px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.pre-apercu-initiales { display: grid; place-items: center; color: var(--muted); font-weight: 600; }
.pre-carte-corps, .pre-apercu-nom { display: flex; flex-direction: column; min-width: 0; }
.pre-carte-ligne, .pre-apercu-ligne { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.pre-item .pre-apercu { display: none; }
.pre-item .pre-radio:checked ~ .pre-apercu { display: block; }
.pre-apercu { margin: 4px 0 6px; padding: 10px 12px; border-radius: var(--rayon); background: var(--surface-2); }
.pre-apercu-tete { display: flex; align-items: center; gap: 10px; }
.pre-apercu-tete .pre-apercu-portrait { width: 64px; height: 84px; }
.pre-apercu-champ { margin: 8px 0 0; }
.pre-apercu-champ .lab { display: block; margin: 0; }
.annonce-predefini .pre-apercu { margin-top: 10px; }
.annonce-places-du-jeu { margin: 6px 0; }
.gal-albums { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .gal-albums { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px) { .gal-albums { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gal-album-carte { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink); text-decoration: none; }
.gal-album-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--rayon); }
.gal-album-couverture { display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--rayon); background: var(--surface-2); }
.gal-album-couverture img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.gal-album-carte:hover .gal-album-couverture img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .gal-album-couverture img { transition: none; } .gal-album-carte:hover .gal-album-couverture img { transform: none; } }
.gal-album-vide { display: grid; place-items: center; width: 100%; height: 100%; color: var(--surface); opacity: .85; }
.gal-album-vide .ico { width: 34px; height: 34px; }
.gal-album-nom { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.gal-album-compte { color: var(--muted); font-size: 13px; }
.gal-album { margin-top: 10px; }
.gal-retour { margin: 0 0 8px; font-size: 14px; }
.gal-retour a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--accent-ink); }
.gal-album-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gal-album-tete h3 { margin: 0; font-size: 18px; }
.gal-modifier { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin-left: auto; color: var(--muted); }
.gal-modifier:hover, .gal-modifier:focus-visible { color: var(--accent-ink); }
.gal-album-description { margin: 6px 0 10px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.gal-images li { position: relative; min-width: 0; }
.gal-qui { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.gal-retirer { position: absolute; top: 4px; right: 4px; margin: 0; }
.gal-retirer button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.gal-retirer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gal-miennes { margin-top: 12px; }
.gal-miennes > summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.gal-miennes-liste { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gal-miennes-liste li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding-right: 44px; }
.gal-miennes-liste img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--rayon-s); }
.gal-miennes-liste .gal-retirer { top: 50%; transform: translateY(-50%); }
.gal-ajouter { margin-top: 14px; }
.gal-ajouter > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.gal-ajouter > summary::-webkit-details-marker { display: none; }
.gal-ajouter form { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.gal-ajouter form .field { width: 100%; }
.gal-ajouter form .btn { align-self: flex-start; }
.gal-envoyee { margin-top: 12px; }
.gal-attente { position: absolute; left: 4px; top: 4px; }
.gal-miennes-liste .gal-attente { position: static; margin-left: 4px; }
.gal-gestion > h2 { margin-bottom: 4px; }
.gal-creer { margin: 12px 0 18px; }
.gal-creer > summary, .gal-modifier-album > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gal-creer > summary::-webkit-details-marker, .gal-modifier-album > summary::-webkit-details-marker { display: none; }
.gal-gestion-album { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.gal-gestion-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gal-gestion-tete h3 { margin: 0; font-size: 17px; }
.gal-gestion-tete .galerie-gestion-gestes { margin-left: auto; }
.gal-modifier-album > summary { min-width: 44px; min-height: 44px; justify-content: center; color: var(--muted); }
.gal-modifier-album[open] > summary { color: var(--accent-ink); }
.gal-modifier-album .visuel-retirer { margin-top: 8px; }
.gal-gestion-album .visuel-bloc { margin-top: 10px; }
.galerie-gestion-motif > summary { list-style: none; display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; cursor: pointer; }
.galerie-gestion-motif > summary::-webkit-details-marker { display: none; }
.galerie-gestion-motif form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.gal-reserves-nombres { display: grid; gap: 4px; margin: 6px 0 12px; }
.gal-reserves-nombres .field { max-width: 160px; }
.bottin-reste { margin-left: 6px; }
.gal-attentes { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface-2); }
.gal-attentes h4 { margin: 0 0 8px; }
.gal-attentes-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gal-attente-ligne { display: flex; align-items: flex-start; gap: 10px; }
.gal-attente-ligne .galerie-lien { flex: none; width: 96px; }
.gal-attente-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.gal-attente-gestes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 6px; }
.gal-attente-gestes details form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.gal-max { max-width: 160px; }
.gal-glissable { cursor: grab; }
.gal-glisse { opacity: .5; }
.tel-appbar .tel-appbar-tuile { flex: none; width: 26px; height: 26px; border-radius: 7px; box-shadow: none; }
.tel-appbar .tel-appbar-tuile img { width: 100%; height: 100%; border-radius: 7px; object-fit: cover; }
.tel-appli .tel-appbar-titre { font-weight: 700; letter-spacing: .04em; }
.tel-ecran.tel-appli-rencontres { background: var(--connect-nuit); color: var(--connect-texte); }
.tel-appli-rencontres .tel-appbar { background: var(--connect-nuit); border-bottom-color: var(--connect-filet); color: var(--connect-texte); }
.tel-appli-rencontres .tel-appbar-titre { color: var(--connect-rose); }
.tel-appli-rencontres .tel-retour, .tel-appli-rencontres .tel-sortir { color: var(--connect-rose); }
.tel-appli-rencontres .tel-barre { color: var(--connect-texte); }
.tel-ecran.tel-appli-annonces { background: var(--relay-nuit); color: var(--relay-texte); }
.tel-appli-annonces .tel-appbar { background: var(--relay-nuit); border-bottom-color: var(--relay-filet); color: var(--relay-texte); }
.tel-appli-annonces .tel-appbar-titre { color: var(--relay-vert); }
.tel-appli-annonces .tel-retour, .tel-appli-annonces .tel-sortir { color: var(--relay-vert); }
.tel-appli-annonces .tel-barre { color: var(--relay-texte); }
.tel-ecran.tel-appli-maire { background: var(--maire-nuit); color: var(--maire-texte); }
.tel-appli-maire .tel-appbar { background: var(--maire-nuit); border-bottom-color: var(--maire-filet); color: var(--maire-texte); }
.tel-appli-maire .tel-appbar-titre { color: var(--maire-or-vif); }
.tel-appli-maire .tel-retour, .tel-appli-maire .tel-sortir { color: var(--maire-or-vif); }
.tel-appli-maire .tel-barre { color: var(--maire-texte); }
.tel-icone-maire { background: linear-gradient(135deg, var(--maire-or-sombre), var(--maire-or-vif)); }
.tel-appli-rencontres .tel-lab, .tel-appli-rencontres .tel-precision { color: var(--connect-texte-2); }
.tel-appli-annonces .tel-lab, .tel-appli-annonces .tel-precision { color: var(--relay-texte-2); }
.tel-appli-maire .tel-lab, .tel-appli-maire .tel-precision { color: var(--maire-texte-2); }
.tel-appli-rencontres .tel-vide { color: var(--connect-texte-2); }
.tel-appli-annonces .tel-vide { color: var(--relay-texte-2); }
.tel-appli-maire .tel-vide { color: var(--maire-texte-2); }
.tel-appli-rencontres .tel-vide a { color: var(--connect-rose); }
.tel-appli-annonces .tel-vide a { color: var(--relay-vert); }
.tel-appli-maire .tel-vide a { color: var(--maire-or-vif); }
.tel-appli-rencontres select, .tel-appli-rencontres input[type="text"], .tel-appli-rencontres input[type="number"], .tel-appli-rencontres textarea {
background: var(--connect-carte); border-color: var(--connect-filet-fort); color: var(--connect-texte);
}
.tel-appli-annonces .tel-champ, .tel-appli-annonces input[type="search"] { background: var(--relay-fond-2); border-color: var(--relay-filet); color: var(--relay-texte); }
.tel-appli-maire .tel-champ, .tel-appli-maire input[type="text"] { background: var(--maire-carte); border-color: var(--maire-filet); color: var(--maire-texte); }
.tel-appli-rencontres .tel-bouton { background: linear-gradient(135deg, var(--connect-violet), var(--connect-rose)); color: var(--connect-blanc); font-weight: 700; }
.tel-appli-rencontres .tel-bouton-creux { background: none; border: 1px solid var(--connect-filet-fort); color: var(--connect-rose); }
.tel-appli-annonces .tel-bouton { background: var(--relay-vert); color: var(--relay-blanc); font-weight: 700; }
.tel-appli-maire .tel-bouton { background: var(--maire-or); color: var(--maire-nuit); font-weight: 700; }
.tel-appli-rencontres .tel-case, .tel-appli-annonces .tel-case, .tel-appli-maire .tel-case { color: inherit; }
.renc-app { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 100%; color: var(--connect-texte); }
.renc-onglets { display: flex; flex: none; border-bottom: 1px solid var(--connect-filet); background: var(--connect-nuit); }
.renc-onglet {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 6px;
border-bottom: 2px solid transparent; color: var(--connect-texte-3); font-size: 12px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.renc-onglet.est-choisi { color: var(--connect-rose); border-bottom-color: var(--connect-rose); }
.renc-onglet:hover, .renc-onglet:focus-visible { color: var(--connect-texte); }
.renc-app .renc-compte { background: var(--connect-rose); color: var(--connect-blanc); }
.renc-compte-doux { color: var(--connect-rose); font-weight: 600; letter-spacing: 0; }
.renc-app .renc-tete { flex: none; padding: 6px 12px; border-bottom: 1px solid var(--connect-filet); }
.renc-app .renc-interrupteur button { color: var(--connect-texte); }
.renc-app .renc-interrupteur-piste { background: var(--connect-carte-2); }
.renc-app .renc-interrupteur [aria-checked="true"] .renc-interrupteur-piste { background: var(--connect-rose); }
.renc-mot { flex: none; margin: 8px 12px 0; padding: 8px 12px; border-left: 2px solid var(--connect-rose); border-radius: 0 8px 8px 0; background: var(--connect-rose-doux); color: var(--connect-texte); font-size: 12.5px; }
.renc-app .renc-proposition { background: var(--connect-rose-doux); color: var(--connect-texte); }
.renc-app .renc-bouton-doux { background: none; border-color: var(--connect-filet-fort); color: var(--connect-texte); }
.renc-vide { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px 22px; text-align: center; color: var(--connect-texte-2); font-size: 13.5px; line-height: 1.6; }
.renc-vide p { margin: 0; }
.renc-vide form { margin: 0; width: min(100%, 240px); }
.renc-vide .tel-bouton { margin: 0; }
.renc-vide > a { color: var(--connect-rose); font-size: 13px; }
.renc-app .renc-carte { flex: 1 0 auto; min-height: 430px; padding: 0; display: flex; flex-direction: column; }
.renc-app .renc-carte .renc-visuel { flex: 1; min-height: 420px; border-radius: 0; background: var(--connect-carte); }
.renc-app .renc-visuel > .renc-photos, .renc-app .renc-visuel > .renc-photo { position: absolute; inset: 0; border-radius: 0; height: 100%; }
.renc-app .renc-carte .renc-photos { min-height: 0; }
.renc-app .renc-diapo img { height: 100%; }
.renc-app .renc-visuel > .renc-initiales { font-size: 56px; }
.renc-points { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 2; display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.renc-points li { flex: 1; height: 3px; border-radius: 2px; background: var(--connect-verre-filet); }
.renc-points li.est-vue { background: var(--connect-blanc); }
.renc-compteur { position: absolute; top: 20px; left: 12px; z-index: 2; padding: 2px 8px; border-radius: var(--rayon-pilule); background: var(--connect-degrade); color: var(--connect-texte-2); font-size: 11px; font-variant-numeric: tabular-nums; pointer-events: none; }
.renc-app .renc-menu-carte { top: 14px; right: 6px; z-index: 3; }
.renc-app .renc-menu-carte > .carte-menu-bouton { background: var(--connect-degrade); color: var(--connect-texte); }
.renc-app a.renc-carte-texte {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 90px 16px 92px;
background: linear-gradient(transparent 0%, var(--connect-degrade) 72%); color: var(--connect-blanc); border-radius: 0;
}
.renc-app .renc-carte-texte h3 { margin: 0; font-size: 22px; font-weight: 700; color: var(--connect-blanc); }
.renc-age { margin-left: 2px; font-size: 15px; font-weight: 500; color: var(--connect-texte); }
.renc-app .renc-soustitre { margin: 3px 0 0; color: var(--connect-texte); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.renc-ligne { margin: 3px 0 0; color: var(--connect-texte-2); font-size: 12px; }
.renc-app .renc-voir { color: var(--connect-texte-2); font-size: 11.5px; letter-spacing: .06em; }
.renc-emojis { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; padding: 0; list-style: none; }
.renc-emojis li { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--connect-verre); border: 1px solid var(--connect-verre-filet); font-size: 14px; line-height: 1; }
.renc-emojis li.renc-emoji-initiale { font-size: 12px; font-weight: 700; color: var(--connect-texte); }
.renc-emojis-petits li { width: 22px; height: 22px; font-size: 11px; }
.renc-app .renc-choix { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; align-items: center; gap: 14px; margin: 0; }
.renc-app .renc-choix form, .renc-app .renc-choix .renc-annuler { margin: 0; padding: 0; }
.renc-app .renc-passer, .renc-app .renc-aimer, .renc-app .renc-coeur, .renc-app .renc-revenir {
display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer;
box-shadow: 0 2px 12px var(--connect-ombre); font-size: 0;
}
.renc-app .renc-passer .ico, .renc-app .renc-aimer .ico, .renc-app .renc-coeur .ico, .renc-app .renc-revenir .ico { width: 22px; height: 22px; }
.renc-app .renc-passer { background: var(--connect-rouge-doux); border: 2px solid var(--connect-rouge); color: var(--connect-rouge); }
.renc-app .renc-aimer { background: var(--connect-rose-doux); border: 2px solid var(--connect-rose); color: var(--connect-rose); }
.renc-app .renc-coeur { width: 44px; height: 44px; background: var(--connect-rose-doux); border: 2px solid var(--connect-filet-fort); color: var(--connect-texte); }
.renc-app .renc-revenir { width: 44px; height: 44px; background: var(--connect-verre); border: 2px solid var(--connect-verre-filet); color: var(--connect-texte); }
.renc-app .renc-revenir:disabled, .renc-app .renc-coeur:disabled { opacity: .35; cursor: default; box-shadow: none; }
.renc-app .renc-passer:active, .renc-app .renc-aimer:active, .renc-app .renc-coeur:active, .renc-app .renc-revenir:active { transform: scale(.9); }
.renc-app .renc-indice { z-index: 2; top: 44px; background: var(--connect-degrade); }
.renc-app .renc-indice-passer { color: var(--connect-rouge); }
.renc-app .renc-indice-aimer { color: var(--connect-rose); }
.renc-app .renc-toast { background: var(--connect-carte-2); color: var(--connect-texte); bottom: 84px; }
.renc-app .renc-toast button { color: var(--connect-rose); }
.renc-app .renc-match-ecran { background: var(--connect-voile); color: var(--connect-texte); gap: 12px; }
.renc-app .renc-match-titre { position: relative; color: var(--connect-rose); font-size: 28px; letter-spacing: .2em; text-shadow: 0 0 30px var(--connect-filet-fort); }
.renc-app .renc-match-sous { position: relative; margin: -4px 0 0; color: var(--connect-texte-2); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: 1; }
.renc-app .renc-match-duo { position: relative; align-items: center; gap: 0; }
.renc-app .renc-match-duo figure { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; width: min(38%, 130px); }
.renc-app .renc-match-duo figcaption { color: var(--connect-texte-2); font-size: 12px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.renc-app .renc-match-duo > :first-child, .renc-app .renc-match-duo > :last-child { transform: none; }
.renc-app .renc-match-portrait { width: 100%; border-radius: 16px; border: 2px solid var(--connect-rose); box-shadow: 0 0 20px var(--connect-filet-fort); }
.renc-match-trait { flex: 0 0 28px; height: 2px; background: var(--connect-rose); box-shadow: 0 0 10px var(--connect-rose); }
.renc-app .renc-match-noms { color: var(--connect-texte); }
.renc-app .renc-match-coeur { position: relative; background: var(--connect-rose-doux); color: var(--connect-texte); }
.renc-app .renc-pastilles-communes li { display: inline-flex; align-items: center; gap: 5px; background: var(--connect-rose-doux); border: 1px solid var(--connect-filet-fort); color: var(--connect-texte); }
.renc-intention-emoji { font-size: 14px; line-height: 1; }
.renc-app .renc-match-gestes { position: relative; }
.renc-app .renc-match-gestes .tel-bouton { background: linear-gradient(135deg, var(--connect-violet), var(--connect-rose)); color: var(--connect-blanc); }
.renc-app .renc-match-gestes .renc-bouton-doux { color: var(--connect-texte); border-color: var(--connect-filet-fort); }
.renc-match-continuer { color: var(--connect-texte-2); font-size: 12.5px; text-align: center; text-decoration: underline; }
.renc-match-continuer:hover { color: var(--connect-texte); }
.renc-particules { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.renc-particules span {
position: absolute; bottom: -10px; left: 50%; width: 4px; height: 4px; border-radius: 50%;
background: var(--connect-rose); opacity: 0; animation: renc-particule 3.2s ease-in-out infinite;
}
.renc-particules span:nth-child(1)  { left: 6%;  animation-delay: 0s;    animation-duration: 3.1s; }
.renc-particules span:nth-child(2)  { left: 14%; animation-delay: .7s;   animation-duration: 2.6s; }
.renc-particules span:nth-child(3)  { left: 22%; animation-delay: 1.3s;  animation-duration: 3.6s; }
.renc-particules span:nth-child(4)  { left: 30%; animation-delay: .3s;   animation-duration: 2.9s; }
.renc-particules span:nth-child(5)  { left: 38%; animation-delay: 1.9s;  animation-duration: 3.3s; }
.renc-particules span:nth-child(6)  { left: 46%; animation-delay: .9s;   animation-duration: 2.4s; }
.renc-particules span:nth-child(7)  { left: 54%; animation-delay: 1.5s;  animation-duration: 3.8s; }
.renc-particules span:nth-child(8)  { left: 62%; animation-delay: .2s;   animation-duration: 3s; }
.renc-particules span:nth-child(9)  { left: 70%; animation-delay: 1.1s;  animation-duration: 2.7s; }
.renc-particules span:nth-child(10) { left: 78%; animation-delay: 2.1s;  animation-duration: 3.4s; }
.renc-particules span:nth-child(11) { left: 86%; animation-delay: .5s;   animation-duration: 2.8s; }
.renc-particules span:nth-child(12) { left: 93%; animation-delay: 1.7s;  animation-duration: 3.5s; }
.renc-particules span:nth-child(13) { left: 10%; animation-delay: 2.4s;  animation-duration: 3.2s; }
.renc-particules span:nth-child(14) { left: 82%; animation-delay: 2.7s;  animation-duration: 2.5s; }
@keyframes renc-particule {
0%   { transform: translateY(0) scale(.4); opacity: 0; }
20%  { opacity: 1; }
80%  { opacity: .5; }
100% { transform: translateY(-110vh) scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.renc-particules { display: none; }
}
.renc-app .renc-matchs { flex: 1 0 auto; }
.renc-matchs-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--connect-filet); color: var(--connect-texte-2); font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.renc-matchs-tete b { color: var(--connect-rose); letter-spacing: .04em; text-transform: none; }
.renc-app .renc-match { border-bottom-color: var(--connect-filet); }
.renc-app .renc-match-nouveau { background: var(--connect-rose-doux); border-left: 2px solid var(--connect-rose); }
.renc-app .renc-match-av { border-radius: 12px; }
.renc-app .renc-match-corps b { color: var(--connect-blanc); }
.renc-app .renc-match-corps small { color: var(--connect-texte-2); }
.renc-app .renc-neuf { background: var(--connect-rose); color: var(--connect-blanc); }
.renc-match-boutons { display: flex; flex-direction: column; align-items: stretch; gap: 5px; flex: none; }
.renc-app .renc-match-ecrire, .renc-match-profil {
display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: var(--rayon-pilule);
font-size: 12px; font-weight: 600; text-decoration: none;
}
.renc-app .renc-match-ecrire { background: var(--connect-rose); color: var(--connect-blanc); }
.renc-match-profil { border: 1px solid var(--connect-filet-fort); color: var(--connect-texte); }
.renc-app .renc-menu > .carte-menu-bouton { color: var(--connect-texte-2); }
.renc-app .renc-profil { flex: 1 0 auto; }
.renc-app .renc-enregistre { background: var(--connect-rose-doux); color: var(--connect-texte); }
.renc-apercu { margin: 0 0 14px; }
.renc-apercu .renc-visuel { position: relative; height: 300px; min-height: 0; border-radius: 16px; overflow: hidden; background: var(--connect-carte); border: 1px solid var(--connect-filet); }
.renc-apercu .renc-visuel > .renc-photo { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.renc-apercu .renc-carte-texte { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 14px 14px; background: linear-gradient(transparent 0%, var(--connect-degrade) 70%); }
.renc-apercu .renc-carte-texte h3 { margin: 0; font-size: 19px; color: var(--connect-blanc); }
.renc-apercu .renc-soustitre { color: var(--connect-texte); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.renc-apercu .tel-precision { text-align: center; }
.renc-visibilite { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid var(--connect-filet); border-radius: 12px; background: var(--connect-carte); }
.renc-visibilite .tel-lab { margin: 0 0 2px; }
.renc-visibilite-etat { margin: 0; font-size: 12.5px; color: var(--connect-texte); }
.renc-app .renc-intention span { display: inline-flex; align-items: center; gap: 6px; border-color: var(--connect-filet-fort); color: var(--connect-texte); }
.renc-app .renc-intention input:checked + span { background: var(--connect-rose); border-color: var(--connect-rose); color: var(--connect-blanc); }
.renc-app .renc-mes-photos { border-top-color: var(--connect-filet); }
.renc-app .renc-vignette.est-couverture img { outline-color: var(--connect-rose); }
.renc-app .renc-couverture-marque { background: var(--connect-rose); color: var(--connect-blanc); }
.renc-app .renc-vignette-gestes button { color: var(--connect-rose); }
.renc-case-vide { margin: 0; }
.renc-case-vide label {
display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border: 1.5px dashed var(--connect-filet-fort);
border-radius: var(--rayon); background: var(--connect-carte-2); color: var(--connect-texte-3); cursor: pointer;
}
.renc-case-vide label:hover, .renc-case-vide label:focus-visible { border-color: var(--connect-rose); color: var(--connect-rose); }
.renc-case-vide .ico { width: 22px; height: 22px; }
.renc-app .renc-ajout-photo .champ-image-bouton { border-color: var(--connect-filet-fort); color: var(--connect-texte-2); }
.renc-revoir-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--connect-filet); }
.renc-revoir-section .renc-revoir { justify-content: flex-start; margin: 6px 0 0; }
.renc-app .renc-feuille { background: var(--connect-carte); color: var(--connect-texte); }
.renc-app .renc-feuille-tete h3 { color: var(--connect-blanc); }
.renc-app .renc-feuille-fermer { color: var(--connect-texte-2); }
.renc-app .renc-feuille-bio { border-left: 2px solid var(--connect-filet-fort); padding-left: 10px; color: var(--connect-texte); }
.rel { display: flex; flex-direction: column; flex: 1 0 auto; color: var(--relay-texte); padding-bottom: 14px; }
.rel-onglets { display: flex; flex: none; border-bottom: 1px solid var(--relay-filet); background: var(--relay-nuit); }
.rel-onglet {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 4px;
border-bottom: 2px solid transparent; color: var(--relay-texte-3); font-size: 11.5px; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
}
.rel-onglet .ico { width: 19px; height: 19px; }
.rel-onglet.est-choisi { color: var(--relay-vert); border-bottom-color: var(--relay-vert); }
.rel-onglet:hover, .rel-onglet:focus-visible { color: var(--relay-texte); }
.rel-message { margin: 10px 12px 0; padding: 8px 12px; border: 1px solid var(--relay-filet-fort); border-radius: 8px; background: var(--relay-vert-doux); color: var(--relay-vert); font-size: 12.5px; }
.rel-info { margin: 0 0 6px; padding: 8px 10px; border-left: 3px solid var(--relay-vert); border-radius: 4px; background: var(--relay-vert-doux); font-size: 12.5px; line-height: 1.4; }
.rel-recherche { position: relative; display: flex; align-items: center; margin: 10px 12px 0; }
.rel-recherche .ico { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--relay-texte-3); pointer-events: none; }
.rel-recherche input { width: 100%; min-height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--relay-filet); border-radius: 20px; font: inherit; font-size: 13.5px; }
.rel-recherche input:focus { outline: none; border-color: var(--relay-vert); }
.rel-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0 12px 6px; }
.rel-filtres::-webkit-scrollbar { display: none; }
.rel-filtre {
flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--relay-filet);
border-radius: var(--rayon-pilule); background: var(--relay-carte); color: var(--relay-texte-2); font-size: 12px; font-weight: 700;
white-space: nowrap; text-decoration: none;
}
.rel-filtre.est-choisi { border-color: var(--relay-vert); background: var(--relay-vert-doux); color: var(--relay-vert); }
.rel-liste { display: flex; flex-direction: column; gap: 8px; margin: 8px 12px 0; padding: 0; list-style: none; }
.rel-ligne-lien {
position: relative; display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--relay-filet); border-radius: 10px;
background: linear-gradient(135deg, var(--relay-carte), var(--relay-carte-2)); color: inherit; text-decoration: none;
}
.rel-ligne-lien:hover, .rel-ligne-lien:focus-visible { border-color: var(--relay-filet-fort); }
.rel-ligne.est-close .rel-ligne-lien { opacity: .55; filter: grayscale(.4); }
.rel-vignette { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 8px; overflow: hidden; background: var(--relay-nuit); border: 1px solid var(--relay-filet); }
.rel-vignette img { width: 100%; height: 100%; object-fit: cover; }
.rel-vignette-emoji { font-size: 26px; opacity: .6; }
.rel-ligne-corps { flex: 1; min-width: 0; }
.rel-ligne-haut { display: flex; align-items: flex-start; gap: 6px; }
.rel-ligne-titre { flex: 1; min-width: 0; color: var(--relay-blanc); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-prix { flex: none; color: var(--relay-vert); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-ligne-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; color: var(--relay-texte-3); font-size: 11.5px; }
.rel-cat { padding: 1px 7px; border: 1px solid var(--relay-filet-fort); border-radius: 4px; background: var(--relay-vert-doux); color: var(--relay-vert); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rel-auteur, .rel-ou { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--relay-texte-2); }
.rel-auteur .ico, .rel-ou .ico { width: 12px; height: 12px; }
.rel-auteur-photo { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; font-size: 7px; color: var(--relay-blanc); }
.rel-auteur-lieu, .rel-or { color: var(--relay-or); font-style: italic; }
.rel-statut { position: absolute; top: 8px; right: 8px; padding: 1px 7px; border: 1px solid var(--relay-rouge); border-radius: 4px; background: var(--relay-rouge-doux); color: var(--relay-rouge); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rel-detail { margin: 12px 12px 0; padding: 12px; border: 1px solid var(--relay-filet); border-radius: 12px; background: var(--relay-carte); }
.rel-detail.est-close { opacity: .75; }
.rel-detail-cat { margin: 0 0 8px; color: var(--relay-vert); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rel-detail-image { display: block; margin: 0 0 10px; border-radius: 8px; overflow: hidden; }
.rel-detail-image img { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.rel-detail-titre { margin: 0; color: var(--relay-blanc); font-size: 19px; }
.rel-detail-prix { margin: 4px 0 0; color: var(--relay-vert); font-size: 16px; font-weight: 700; }
.rel-detail-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; color: var(--relay-texte-3); font-size: 12px; }
.rel-detail-meta span { display: inline-flex; align-items: center; gap: 4px; }
.rel-detail-meta .ico { width: 13px; height: 13px; }
.rel-detail-close { color: var(--relay-rouge); font-weight: 700; }
.rel-detail-auteur, .rel-detail-objet { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 10px; border-radius: 8px; background: var(--relay-fond-2); }
.rel-detail-auteur > span:last-child, .rel-detail-objet > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.rel-detail-auteur b, .rel-detail-objet b { color: var(--relay-blanc); font-size: 14px; }
.rel-detail-auteur b.rel-or { color: var(--relay-or); }
.rel-detail-auteur small, .rel-detail-objet small { color: var(--relay-texte-3); font-size: 11.5px; }
.rel-detail-photo { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: var(--relay-blanc); font-size: 12px; }
.rel-detail-photo-lieu { border-radius: 8px; background: var(--relay-nuit); color: var(--relay-texte-2); }
.rel-detail-photo-lieu .ico { width: 18px; height: 18px; }
.rel-detail-desc { margin: 12px 0 0; padding: 10px 12px; border-left: 3px solid var(--relay-vert); border-radius: 6px; background: var(--relay-fond-2); color: var(--relay-texte); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.rel-detail-gestes { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.rel-detail-gestes form { margin: 0; }
.rel-detail-gestes .tel-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0; padding: 9px 16px; }
.rel-detail-gestes .ico { width: 16px; height: 16px; }
.rel-bouton {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px;
border: 1px solid var(--relay-filet-fort); border-radius: var(--rayon-pilule); background: none; color: var(--relay-texte-2);
font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.rel-bouton:hover, .rel-bouton:focus-visible { color: var(--relay-vert); border-color: var(--relay-vert); }
.rel-crayon { width: 38px; padding: 0; }
.rel-volet { flex-basis: 100%; }
.rel-volet > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; width: auto; cursor: pointer; }
.rel-volet > summary::-webkit-details-marker { display: none; }
.rel-volet[open] { padding: 10px; border: 1px solid var(--relay-filet); border-radius: 10px; background: var(--relay-fond-2); }
.rel-volet-form { display: grid; margin-top: 4px; }
.rel-volet-form .tel-bouton { width: 100%; margin-top: 10px; }
.rel-form { display: grid; margin: 12px 12px 0; }
.rel-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.rel-categories legend { padding: 0; margin-bottom: 4px; }
.rel-categorie { position: relative; }
.rel-categorie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rel-categorie > span {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 6px 4px;
border: 2px solid var(--relay-filet); border-radius: 8px; background: var(--relay-carte); color: var(--relay-blanc);
font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; cursor: pointer;
}
.rel-categorie-emoji { font-size: 20px; letter-spacing: 0; }
.rel-categorie input:checked + span { border-color: var(--relay-vert); background: var(--relay-vert-doux); }
.rel-categorie input:focus-visible + span { outline: 2px solid var(--relay-vert); outline-offset: 2px; }
.rel-rangee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rel-lieu-texte { margin-top: 6px; }
.rel-form:has(.rel-cat-sans-objet input:checked) .rel-objet { display: none; }
.rel-image {
position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 8px;
border: 1.5px dashed var(--relay-filet-fort); border-radius: 8px; background: var(--relay-fond-2); color: var(--relay-texte-2);
font-size: 13px; cursor: pointer;
}
.rel-image:hover, .rel-image:focus-within { border-color: var(--relay-vert); color: var(--relay-vert); }
.rel-image .ico { width: 18px; height: 18px; }
.rel-image input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.rel-image-actuelle { margin: 0 0 6px; }
.rel-image-actuelle img { display: block; width: 96px; height: 96px; border-radius: 8px; object-fit: cover; }
.rel-form > .tel-bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; }
.rel-form > .tel-bouton .ico { width: 16px; height: 16px; }
.rel .pages a, .rel .pages span { color: var(--relay-texte-2); }
.mai { display: flex; flex-direction: column; flex: 1 0 auto; padding: 0 0 16px; color: var(--maire-texte); }
.mai-banniere { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--maire-filet); background: var(--maire-or-doux); text-align: center; }
.mai-banniere > span { display: flex; flex-direction: column; }
.mai-banniere b { color: var(--maire-or-vif); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.mai-banniere small { color: var(--maire-texte-2); font-size: 11px; letter-spacing: .08em; }
.mai-voix { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--maire-filet-fort); }
.mai-message { margin: 10px 12px 0; padding: 8px 12px; border: 1px solid var(--maire-filet-fort); border-radius: 8px; background: var(--maire-or-doux); color: var(--maire-or-vif); font-size: 12.5px; }
.mai-filtres { display: flex; gap: 6px; padding: 10px 12px 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--maire-filet); }
.mai-filtres::-webkit-scrollbar { display: none; }
.mai-filtre {
flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--maire-filet);
border-radius: 4px; color: var(--maire-texte-2); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
white-space: nowrap; text-decoration: none;
}
.mai-filtre.est-choisi { border-color: var(--maire-or); background: var(--maire-or-doux); color: var(--maire-or-vif); }
.mai-filtre-alerte.est-choisi { border-color: var(--maire-alerte); background: var(--maire-alerte-doux); color: var(--maire-alerte); }
.mai .tan-publier { margin: 10px 12px 0; }
.mai .tan-publier summary { color: var(--maire-or-vif); }
.mai-carte { margin: 10px 12px 0; border: 1px solid var(--maire-filet); border-radius: 10px; background: var(--maire-carte); overflow: hidden; }
.mai-carte > :not(.mai-carte-image) { margin-left: 12px; margin-right: 12px; }
.mai-carte > .mai-tete { margin-top: 10px; }
.mai-epinglee { border-color: var(--maire-filet-fort); box-shadow: 0 0 0 1px var(--maire-filet-fort) inset; }
.mai-alerte { border-color: var(--maire-alerte); }
.mai-carte-image { display: block; }
.mai-carte-image img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.mai-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; }
.mai-cat { padding: 1px 7px; border: 1px solid var(--maire-filet-fort); border-radius: 3px; color: var(--maire-or); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mai-cat-alerte { border-color: var(--maire-alerte); color: var(--maire-alerte); }
.mai-cat-officiel { border-color: var(--maire-officiel); color: var(--maire-officiel); }
.mai-nouveau { padding: 1px 7px; border-radius: 3px; background: var(--maire-or); color: var(--maire-nuit); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mai-epingle { display: inline-flex; align-items: center; gap: 3px; color: var(--maire-texte-2); font-size: 11px; }
.mai-epingle .ico { width: 12px; height: 12px; }
.mai-signe { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0 0 6px; font-size: 12.5px; }
.mai-signe b { color: var(--maire-or-vif); }
.mai-signe small { color: var(--maire-texte-3); font-size: 11px; }
.mai-carte-lien { display: block; color: inherit; text-decoration: none; }
.mai-titre { margin: 0 0 4px; color: var(--maire-texte); font-size: 16px; }
.mai-extrait { margin: 0; color: var(--maire-texte-2); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.mai-lire { display: inline-block; margin-top: 4px; color: var(--maire-or); font-size: 12px; }
.mai-gestes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 10px; padding-top: 8px; border-top: 1px solid var(--maire-filet); }
.mai-gestes form { margin: 0; }
.mai-geste {
display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px; border: 1px solid var(--maire-filet);
border-radius: 6px; background: none; color: var(--maire-texte-2); font: inherit; font-size: 12px; text-decoration: none; cursor: pointer;
}
.mai-geste .ico { width: 14px; height: 14px; }
.mai-geste:hover, .mai-geste:focus-visible { color: var(--maire-or-vif); border-color: var(--maire-filet-fort); }
.mai-geste.est-aime { border-color: var(--maire-or); background: var(--maire-or-doux); color: var(--maire-or-vif); }
.mai-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.mai-equipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 10px; font-size: 12px; }
.mai-equipe form { margin: 0; }
.mai-equipe button, .mai-equipe summary { padding: 0; border: 0; background: none; color: var(--maire-texte-2); font: inherit; font-size: 12px; cursor: pointer; }
.mai-modifier { flex-basis: 100%; }
.mai-modifier > summary { list-style: none; display: inline-grid; place-items: center; min-width: 36px; min-height: 36px; }
.mai-modifier > summary::-webkit-details-marker { display: none; }
.mai-modifier > summary .ico { width: 16px; height: 16px; }
.mai-modifier form { display: grid; margin-top: 4px; }
.mai-article { margin: 12px 12px 0; padding: 12px; border: 1px solid var(--maire-filet); border-radius: 10px; background: var(--maire-carte); }
.mai-article .mai-titre { font-size: 19px; }
.mai-image { display: block; margin: 6px 0 8px; border-radius: 8px; overflow: hidden; }
.mai-image img { display: block; width: 100%; }
.mai-texte { margin: 0; color: var(--maire-texte); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.mai-texte a.mention, .mai-com-texte a.mention { color: var(--maire-or-vif); font-weight: 700; text-decoration: none; }
.mai-commentaires { margin: 14px 12px 0; }
.mai-com-titre { margin: 0 0 8px; color: var(--maire-texte-2); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.mai-com { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--maire-filet); }
.mai-com-photo { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: var(--maire-texte); font-size: 10px; }
.mai-com-corps { flex: 1; min-width: 0; }
.mai-com-tete { margin: 0; font-size: 12.5px; }
.mai-com-tete b { color: var(--maire-or-vif); }
.mai-com-tete small { color: var(--maire-texte-3); font-size: 11px; }
.mai-com-texte { margin: 2px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.mai-com-supprimer { margin: 0; }
.mai-com-supprimer button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--maire-texte-3); cursor: pointer; }
.mai-com-supprimer button:hover { color: var(--maire-alerte); }
.mai-com-supprimer .ico { width: 15px; height: 15px; }
.mai-commenter { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.mai-commenter input { flex: 1; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--maire-filet); border-radius: 20px; font: inherit; font-size: 13px; }
.mai-commenter input:focus { outline: none; border-color: var(--maire-or); }
.mai-commenter button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--maire-or); color: var(--maire-nuit); cursor: pointer; }
.mai-commenter button .ico { width: 17px; height: 17px; }
.mai .tan-loreside { margin: 10px 12px 0; }
@font-face {
font-family: 'Rajdhani';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('polices/rajdhani-600.woff2') format('woff2');
}
@font-face {
font-family: 'Rajdhani';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('polices/rajdhani-700.woff2') format('woff2');
}
@font-face {
font-family: 'Exo 2';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/exo-2-400.woff2') format('woff2');
}
@font-face {
font-family: 'Exo 2';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('polices/exo-2-600.woff2') format('woff2');
}
@font-face {
font-family: 'Share Tech Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/share-tech-mono-400.woff2') format('woff2');
}
.tel-ecran.tel-appli-echo {
--paper: var(--hm-nuit);
--surface: var(--hm-surface);
--surface-2: var(--hm-surface-2);
--ink: var(--hm-texte);
--muted: var(--hm-texte-2);
--faint: var(--hm-texte-3);
--line: var(--hm-trait-doux);
--line-strong: var(--hm-trait);
--accent: var(--hm-accent);
--accent-ink: var(--hm-accent-fort);
--accent-soft: var(--hm-lueur);
--sur-accent: var(--hm-sur-accent);
--warn: var(--hm-rose);
--warn-soft: var(--hm-lueur);
--font-ui: var(--hm-police);
--font-title: var(--hm-police-titre);
background: var(--hm-nuit);
color: var(--hm-texte);
font-family: var(--hm-police);
color-scheme: dark;
}
.tel-appli-echo .tel-corps { background: var(--hm-nuit); }
.tel-appli-echo .tel-barre { color: var(--hm-texte); }
.tel-appli-echo .tel-appbar { background: var(--hm-voile); border-bottom: 1px solid var(--hm-trait); color: var(--hm-texte); }
.tel-appli-echo .tel-appbar-tuile { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; }
.tel-appli-echo .tel-appbar-tuile img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.tel-appli-echo .tel-appbar-titre {
color: var(--hm-accent);
font-family: var(--hm-police-titre);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.tel-appli-echo .tel-appbar-actions { display: flex; align-items: center; gap: 2px; }
.ech-barre-geste {
display: grid;
place-items: center;
width: 36px;
height: 44px;
color: var(--hm-texte-2);
text-decoration: none;
}
.ech-barre-geste:hover { color: var(--hm-accent); }
.ech-barre-geste .ico { width: 18px; height: 18px; }
.ech-barre-moi { display: grid; place-items: center; width: 40px; height: 44px; text-decoration: none; }
.ech-av.ech-av-moi { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 1px var(--hm-trait); }
.tel-appli-echo .tel-bouton {
background: var(--hm-accent);
border: 1px solid var(--hm-accent);
color: var(--hm-sur-accent);
font-family: var(--hm-police-titre);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.tel-appli-echo .tel-bouton:hover { background: var(--hm-accent-fort); }
.tel-appli-echo .tel-bouton[disabled] { opacity: .35; cursor: not-allowed; }
.tel-appli-echo .tel-bouton-creux { background: transparent; border-color: var(--hm-trait); color: var(--hm-texte-2); }
.tel-appli-echo .tel-bouton-creux:hover { background: var(--hm-lueur); color: var(--hm-texte); }
.tel-appli-echo .tel-bouton-danger { background: var(--hm-danger); border-color: var(--hm-danger); color: var(--hm-sur-photo); }
.tel-appli-echo .field,
.tel-appli-echo textarea,
.tel-appli-echo select,
.tel-appli-echo input[type="text"],
.tel-appli-echo input[type="search"] {
background: var(--hm-surface-2);
border-color: var(--hm-trait);
color: var(--hm-texte);
}
.tel-appli-echo .field::placeholder,
.tel-appli-echo textarea::placeholder,
.tel-appli-echo input::placeholder { color: var(--hm-texte-3); }
.tel-appli-echo .ech-quand,
.tel-appli-echo .ech-compte,
.tel-appli-echo .ech-comptes b,
.tel-appli-echo .onglets-n,
.tel-appli-echo .ech-compteur { font-family: var(--hm-police-chiffres); }
.tel-appli-echo .ech-titre,
.tel-appli-echo .ech-profil h2,
.tel-appli-echo .ech-qui b { font-family: var(--hm-police-titre); letter-spacing: .02em; }
.tel-appli-echo .ech-onglets { padding: 0 12px; border-bottom: 1px solid var(--hm-trait-doux); }
.tel-appli-echo .ech-onglets a { color: var(--hm-texte-2); font-family: var(--hm-police-titre); font-weight: 600; letter-spacing: .04em; }
.tel-appli-echo .ech-onglets a[aria-current="page"] { color: var(--hm-accent); border-bottom-color: var(--hm-accent); }
.ech-annonce.ech-annonce-page {
position: sticky;
top: 0;
left: auto;
bottom: auto;
z-index: 16;
transform: none;
max-width: none;
margin: 8px 12px 0;
padding: 8px 12px;
border: 1px solid var(--hm-accent);
border-radius: 8px;
background: var(--hm-surface-2);
color: var(--hm-accent);
font-family: var(--hm-police-titre);
font-weight: 700;
letter-spacing: .04em;
text-align: center;
box-shadow: 0 6px 18px var(--hm-ombre);
}
.ech-nav {
position: sticky;
bottom: 0;
z-index: 15;
display: flex;
margin-top: auto;
border-top: 1px solid var(--hm-trait);
background: var(--hm-voile);
}
.ech-nav-lien {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 48px;
color: var(--hm-texte-2);
font-family: var(--hm-police-titre);
font-size: 11px;
font-weight: 600;
letter-spacing: .04em;
text-decoration: none;
}
.ech-nav-lien:hover { color: var(--hm-texte); }
.ech-nav-lien[aria-current="page"] { color: var(--hm-accent); }
.ech-nav-ico.ico { width: 19px; height: 19px; }
.ech-nav-n {
position: absolute;
top: 4px;
left: calc(50% + 6px);
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--hm-danger);
color: var(--hm-sur-photo);
font-family: var(--hm-police-chiffres);
font-size: 10px;
line-height: 16px;
text-align: center;
}
.ech-nav-n[hidden] { display: none; }
.tel-appli-echo .ech-chercher { position: relative; }
.ech-suggestions {
position: absolute;
top: calc(100% + 4px);
left: 12px;
right: 12px;
z-index: 20;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--hm-trait);
border-radius: 8px;
background: var(--hm-surface-2);
box-shadow: 0 8px 24px var(--hm-ombre);
}
.ech-suggestions[hidden] { display: none; }
.ech-suggestions-choix { position: static; margin: 4px 0 0; }
.ech-suggestion {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 44px;
padding: 6px 10px;
border: 0;
background: none;
color: var(--hm-texte);
font: inherit;
font-size: 13px;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.ech-suggestion:hover,
.ech-suggestion:focus-visible { background: var(--hm-lueur); }
.ech-suggestion b { display: block; font-weight: 600; }
.ech-suggestion small { display: block; color: var(--hm-texte-3); font-size: 11px; }
.ech-av.ech-av-petit { width: 28px; height: 28px; font-size: 10.5px; }
.tel-appli-echo .ech-stories { gap: 10px; border-bottom-color: var(--hm-trait-doux); }
.tel-appli-echo .ech-story-pastille { position: relative; width: 72px; }
.tel-appli-echo .ech-story-rond {
position: relative;
z-index: 1;
width: 64px;
height: 64px;
font-size: 18px;
box-shadow: 0 0 0 3px var(--hm-nuit);
}
.tel-appli-echo .ech-story-pastille:not(.ech-story-moi)::before,
.tel-appli-echo .ech-story-moi .ech-story-lien:not(.ech-story-sans)::before {
content: '';
position: absolute;
top: -3px;
left: 50%;
width: 70px;
height: 70px;
margin-left: -35px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hm-accent), var(--hm-rose));
}
.tel-appli-echo .ech-story-vue:not(.ech-story-moi)::before,
.tel-appli-echo .ech-story-moi.ech-story-vue .ech-story-lien::before { background: var(--hm-trait); }
.tel-appli-echo .ech-story-vue .ech-story-rond { box-shadow: 0 0 0 3px var(--hm-nuit); }
.ech-story-lien {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
color: inherit;
text-decoration: none;
}
.ech-story-sans .ech-story-rond { opacity: .75; }
.ech-story-ajouter {
position: absolute;
z-index: 2;
top: 44px;
left: calc(50% + 12px);
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 2px solid var(--hm-nuit);
border-radius: 50%;
background: var(--hm-accent);
color: var(--hm-sur-accent);
}
.ech-story-ajouter .ico { width: 12px; height: 12px; }
.tel-appli-echo .ech-poser {
margin: 10px 12px 0;
padding: 10px;
border: 1px solid var(--hm-trait);
border-radius: 12px;
background: var(--hm-surface);
}
.ech-poser-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ech-poser-qui[hidden] { display: none; }
.ech-au-nom-de { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.ech-au-nom-de .choix-multiples-resume {
min-height: 34px;
padding: 4px 8px;
border: 1px solid var(--hm-trait);
border-radius: 8px;
background: var(--hm-surface-2);
color: var(--hm-texte);
font-size: 13px;
}
.tel-appli-echo .ech-poser textarea { background: var(--hm-surface-2); border-color: var(--hm-trait); color: var(--hm-texte); }
.ech-poser-apercu { position: relative; margin-top: 8px; border-radius: 10px; overflow: hidden; }
.ech-poser-apercu[hidden] { display: none; }
.ech-poser-apercu img { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.ech-poser-retirer {
position: absolute;
top: 6px;
right: 6px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--hm-trait);
border-radius: 50%;
background: var(--hm-voile);
color: var(--hm-texte);
cursor: pointer;
}
.ech-poser-retirer .ico { width: 14px; height: 14px; }
.tel-appli-echo .ech-pub {
margin: 10px 12px 0;
border: 1px solid var(--hm-trait-doux);
border-radius: 12px;
background: var(--hm-surface);
}
.tel-appli-echo .ech-pub-epinglee { border-color: var(--hm-trait); }
.ech-image-lien { display: block; margin-top: 10px; }
.ech-image-lien .ech-image { margin-top: 0; }
.ech-hashtag { color: var(--hm-accent); font-weight: 600; text-decoration: none; }
.ech-hashtag:hover { text-decoration: underline; }
.tel-appli-echo .ech-jaime-on { color: var(--hm-rose); }
.tel-appli-echo .ech-commenter-ouvert { color: var(--hm-accent); }
.ech-coms-sur-place { margin-top: 10px; border-top: 1px solid var(--hm-trait-doux); }
.ech-coms-sur-place .tel-ecrire { margin: 0 12px; }
.ech-coms-vide { margin: 0; color: var(--hm-texte-3); font-size: 12.5px; }
.ech-coms-tous { margin: 6px 12px 0; font-size: 12px; }
.ech-coms-tous a { color: var(--hm-texte-2); }
.tel-appli-echo .ech-fil { padding-bottom: 12px; }
.tel-appli-echo .ech-plus { margin: 12px; text-align: center; }
.tel-appli-echo .ech-com { display: flex; align-items: flex-start; gap: 8px; }
.ech-com-av { flex: 0 0 auto; text-decoration: none; }
.ech-com-corps { flex: 1; min-width: 0; }
.ech-com-bulle {
position: relative;
padding: 6px 34px 7px 10px;
border-radius: 12px;
background: var(--hm-surface-2);
}
.ech-com-menu { position: absolute; top: 0; right: 0; }
.ech-com-reacs { margin-top: 2px; }
.ech-couverture { position: relative; }
.ech-banniere-vide {
display: block;
background: linear-gradient(135deg, var(--hm-surface-2),
color-mix(in oklab, var(--hm-accent) 40%, var(--hm-nuit)),
color-mix(in oklab, var(--hm-rose) 30%, var(--hm-nuit)));
}
.ech-couverture-modifier {
position: absolute;
right: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
border: 1px solid var(--hm-trait);
border-radius: 999px;
background: var(--hm-voile);
color: var(--hm-texte);
font-size: 11.5px;
text-decoration: none;
}
.ech-couverture-modifier .ico { width: 13px; height: 13px; }
.tel-appli-echo .ech-profil-av {
width: 96px;
height: 96px;
margin-top: -48px;
font-size: 28px;
box-shadow: 0 0 0 3px var(--hm-nuit), 0 0 0 5px var(--hm-accent);
}
.ech-profil-nom { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; }
.ech-pseudo-marque.tel-icone { width: 20px; height: 20px; border-radius: 5px; }
.ech-pseudo-marque img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.ech-nom-fiche { margin: 2px 0 0; color: var(--hm-texte-2); font-size: 13px; }
.ech-infos {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin: 9px 14px 0;
padding: 0;
list-style: none;
color: var(--hm-texte-2);
font-size: 12.5px;
}
.ech-infos li { display: inline-flex; align-items: center; gap: 6px; }
.ech-infos .ico { width: 14px; height: 14px; color: var(--hm-accent); }
.ech-infos a { color: var(--hm-accent); }
.ech-bio-vide { margin: 9px 0 0; font-size: 12.5px; }
.ech-bio-vide a { display: inline-flex; align-items: center; gap: 4px; color: var(--hm-accent); }
.ech-bio-vide .ico { width: 13px; height: 13px; }
.ech-profil-gestes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ech-profil-gestes form { margin: 0; }
.ech-profil-gestes .tel-bouton { margin: 0; }
.ech-compteur { margin: 2px 0 6px; color: var(--hm-texte-3); font-size: 11px; text-align: right; }
.ech-categorie { display: inline-flex; align-items: center; gap: 4px; }
.ech-categorie .ico { width: 13px; height: 13px; }
.ech-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 8px 12px; }
.ech-grille-case { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--hm-surface); }
.ech-grille-case img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ech-grille-case:hover img { opacity: .85; }
.tel-appli-echo .ech-filtres { padding: 10px 12px 0; }
.ech-photo { margin: 8px 12px 0; font-size: 12.5px; color: var(--hm-texte-2); }
.ech-photo-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 6px; }
.ech-photo-qui .ico { width: 14px; height: 14px; color: var(--hm-accent); }
.ech-photo-marque { color: var(--hm-accent); }
.ech-photo-identifier summary,
.ech-photo-retirer summary { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; color: var(--hm-accent); cursor: pointer; }
.ech-photo-identifier summary .ico { width: 15px; height: 15px; }
.ech-photo-form { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ech-photo-retirer-ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ech-photo-cadre { position: relative; }
.ech-photo-en-cours { cursor: crosshair; }
.ech-photo-en-cours img { outline: 2px dashed var(--hm-accent); outline-offset: -2px; }
.ech-photo-etiquette {
position: absolute;
z-index: 2;
transform: translate(-50%, 4px);
padding: 2px 7px;
border-radius: 6px;
background: var(--hm-voile);
color: var(--hm-texte);
font-size: 11px;
white-space: nowrap;
pointer-events: none;
}
.ech-photo-point {
position: absolute;
z-index: 3;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--hm-sur-photo);
border-radius: 50%;
box-shadow: 0 0 0 2px var(--hm-accent);
pointer-events: none;
}
.ech-photo-point[hidden] { display: none; }
.ech-pastilles-choisies { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.ech-pastilles-choisies[hidden] { display: none; }
.ech-pastille-choisie {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 0 2px 0 10px;
border: 1px solid var(--hm-trait);
border-radius: 999px;
background: var(--hm-lueur);
color: var(--hm-texte);
font-size: 12.5px;
}
.ech-pastille-retirer {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: none;
color: var(--hm-texte-2);
cursor: pointer;
}
.ech-pastille-retirer .ico { width: 12px; height: 12px; }
.ech-creer-liste-cherchee .ech-creer-tag[hidden] { display: none; }
.ech-mod-chercher[hidden],
.ech-page-ajouter [data-ech-mod-liste][hidden] { display: none; }
.ech-pages-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 0; }
.ech-pages-tete .ech-onglets { padding: 0; border-bottom: 0; }
.ech-pages-tete .tel-bouton { width: auto; margin: 0; padding: 6px 12px; font-size: 12px; }
.ech-cartes-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; padding: 10px 12px; }
.ech-carte-page {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--hm-trait-doux);
border-radius: 12px;
background: var(--hm-surface);
color: var(--hm-texte);
text-decoration: none;
}
.ech-carte-page:hover { border-color: var(--hm-trait); }
.ech-carte-page-couv { display: block; width: 100%; object-fit: cover; }
.ech-carte-page-corps { display: flex; flex-direction: column; gap: 3px; padding: 0 12px 12px; }
.ech-carte-page-av.ech-av { width: 44px; height: 44px; margin-top: -22px; box-shadow: 0 0 0 2px var(--hm-surface); }
.ech-carte-page-corps b { font-family: var(--hm-police-titre); font-size: 15px; }
.ech-carte-page-corps small { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; color: var(--hm-texte-3); font-size: 11.5px; }
.ech-carte-page-corps small .ico { width: 12px; height: 12px; }
.ech-carte-page-bio {
display: -webkit-box;
overflow: hidden;
color: var(--hm-texte-2);
font-size: 12.5px;
line-height: 1.4;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ech-carte-page-role {
align-self: flex-start;
margin-top: 4px;
padding: 1px 8px;
border-radius: 999px;
background: var(--hm-lueur);
color: var(--hm-accent);
font-family: var(--hm-police-titre);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.ech-activite-av { position: relative; flex: 0 0 auto; }
.ech-activite-sorte {
position: absolute;
right: -4px;
bottom: -4px;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border: 2px solid var(--hm-nuit);
border-radius: 50%;
background: var(--hm-accent);
color: var(--hm-sur-accent);
}
.ech-activite-sorte .ico { width: 10px; height: 10px; }
.tel-appli-echo .ech-activite-neuve { background: var(--hm-lueur); }
.ech-lecteur-qui-texte { display: flex; flex-direction: column; min-width: 0; }
.ech-lecteur-qui-texte small { color: var(--hm-texte-2); font-size: 11px; }
.ech-lecteur-fermer { display: grid; place-items: center; width: 44px; height: 44px; color: var(--hm-texte); }
.ech-lecteur-fermer .ico { width: 18px; height: 18px; }
.ech-diapo-mot.ech-diapo-mot-image {
position: absolute;
left: 50%;
bottom: 12%;
z-index: 3;
max-width: 86%;
margin: 0;
padding: 6px 12px;
transform: translateX(-50%);
border-radius: 10px;
background: var(--hm-voile);
color: var(--hm-texte);
text-align: center;
}
.ech-diapo-musique { position: absolute; top: 56px; right: 10px; z-index: 4; }
.ech-diapo-son { max-width: 200px; }
.ech-diapo-son-bouton {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 36px;
padding: 0 12px;
border: 1px solid var(--hm-trait);
border-radius: 999px;
background: var(--hm-voile);
color: var(--hm-texte);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.ech-diapo-son-bouton[aria-pressed="true"] { border-color: var(--hm-accent); color: var(--hm-accent); }
.ech-diapo-son-bouton[hidden] { display: none; }
.ech-diapo-son-bouton .ico { width: 14px; height: 14px; }
.ech-diapo-place { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; }
.ech-emoji-vole {
position: absolute;
left: 50%;
bottom: 18%;
z-index: 6;
font-size: 42px;
pointer-events: none;
animation: ech-envol 1.3s ease-out forwards;
}
@keyframes ech-envol {
from { opacity: 1; transform: translate(-50%, 0) scale(.8); }
to { opacity: 0; transform: translate(-50%, -220%) scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
.ech-emoji-vole { display: none; }
}
.ech-signaler { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.ech-signaler-motifs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; }
.ech-signaler-motif { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; }
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/dancing-script-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/dancing-script-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Kalam';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/kalam-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Kalam';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/kalam-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Indie Flower';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/indie-flower-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Indie Flower';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('polices/indie-flower-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.liv-police-caveat  { font-family: 'Caveat', var(--font-rp); font-size: 1.2em; }
.liv-police-dancing { font-family: 'Dancing Script', var(--font-rp); font-size: 1.12em; }
.liv-police-kalam   { font-family: 'Kalam', var(--font-rp); }
.liv-police-indie   { font-family: 'Indie Flower', var(--font-rp); font-size: 1.05em; }
.tel-ecran.tel-appli-playlist { background: radial-gradient(ellipse 80% 40% at 50% 0%, var(--symph-lueur), transparent 70%), var(--symph-nuit); color: var(--symph-texte); }
.tel-appli-playlist .tel-appbar { background: var(--symph-nuit); border-bottom-color: var(--symph-filet); color: var(--symph-texte); }
.tel-appli-playlist .tel-appbar-titre { color: var(--symph-blanc); letter-spacing: .3em; }
.tel-appli-playlist .tel-retour, .tel-appli-playlist .tel-sortir { color: var(--symph-blanc); }
.tel-appli-playlist .tel-barre { color: var(--symph-texte); }
.tel-ecran.tel-appli-livraison { background: radial-gradient(ellipse 60% 40% at 50% 20%, var(--swift-doux), transparent 70%), var(--swift-nuit); color: var(--swift-texte); }
.tel-appli-livraison .tel-appbar { background: var(--swift-nuit); border-bottom-color: var(--swift-filet); color: var(--swift-texte); }
.tel-appli-livraison .tel-appbar-titre { color: var(--swift-orange); }
.tel-appli-livraison .tel-retour, .tel-appli-livraison .tel-sortir { color: var(--swift-orange); }
.tel-appli-livraison .tel-barre { color: var(--swift-texte); }
.tel-ecran.tel-appli-meteo { background: var(--aether-nuit); color: var(--aether-texte); }
.tel-appli-meteo .tel-appbar { background: var(--aether-nuit); border-bottom-color: var(--aether-filet); color: var(--aether-texte); }
.tel-appli-meteo .tel-appbar-titre { color: var(--aether-turquoise); letter-spacing: .2em; }
.tel-appli-meteo .tel-retour, .tel-appli-meteo .tel-sortir { color: var(--aether-turquoise); }
.tel-appli-meteo .tel-barre { color: var(--aether-texte); }
.tel-appli-playlist .tel-lab, .tel-appli-playlist .tel-precision, .tel-appli-playlist .tel-vide { color: var(--symph-texte-2); }
.tel-appli-livraison .tel-lab, .tel-appli-livraison .tel-precision, .tel-appli-livraison .tel-vide { color: var(--swift-texte-2); }
.tel-appli-meteo .tel-lab, .tel-appli-meteo .tel-precision, .tel-appli-meteo .tel-vide { color: var(--aether-texte-2); }
.tel-appli-playlist .tel-vide a { color: var(--symph-blanc); }
.tel-appli-livraison .tel-vide a { color: var(--swift-orange); }
.tel-appli-playlist .tel-champ { background: var(--symph-fond-2); border-color: var(--symph-filet); color: var(--symph-texte); }
.tel-appli-livraison .tel-champ { background: var(--swift-fond-2); border-color: var(--swift-filet); color: var(--swift-texte); }
.tel-appli-playlist .tel-champ:focus { outline: none; border-color: var(--symph-blanc); }
.tel-appli-livraison .tel-champ:focus { outline: none; border-color: var(--swift-orange); }
.tel-appli-playlist .tel-bouton { background: var(--symph-blanc); color: var(--symph-nuit); font-weight: 700; }
.tel-appli-playlist .tel-bouton-creux { background: none; border: 1px solid var(--symph-filet); color: var(--symph-texte); }
.tel-appli-livraison .tel-bouton { background: linear-gradient(135deg, var(--swift-cuivre-sombre), var(--swift-cuivre)); color: var(--swift-texte); font-weight: 700; }
.tel-appli-livraison .tel-bouton-creux { background: none; border: 1px solid var(--swift-filet); color: var(--swift-texte-2); }
.tel-appli-playlist .tel-case, .tel-appli-livraison .tel-case { color: inherit; }
.tel-appli-playlist .tel-avis { background: var(--symph-doux); color: var(--symph-texte); border-color: var(--symph-filet); }
.tel-appli-livraison .tel-avis { background: var(--swift-vert-doux); color: var(--swift-vert); border-color: var(--swift-filet); }
.tel-appli-playlist .tel-erreur { background: var(--symph-doux); color: var(--symph-rouge); }
.tel-appli-livraison .tel-erreur { background: var(--swift-rouge-doux); color: var(--swift-rouge); }
.sym { color: var(--symph-texte); }
.tel-appli-playlist .sym-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -10px -12px 12px; padding: 0 6px; border-bottom-color: var(--symph-filet); background: var(--symph-nuit); }
.tel-appli-playlist .sym-onglets::-webkit-scrollbar { display: none; }
.tel-appli-playlist .sym-onglets a { flex: none; min-height: 40px; padding: 0 10px; color: var(--symph-texte-2); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tel-appli-playlist .sym-onglets a:hover { color: var(--symph-texte); }
.tel-appli-playlist .sym-onglets a[aria-current='page'] { color: var(--symph-blanc); border-bottom-color: var(--symph-blanc); }
.tel-appli-playlist .tpl-section { color: var(--symph-texte-2); letter-spacing: .2em; font-size: 10.5px; }
.tel-appli-playlist .tpl-item { background: var(--symph-carte); border-color: var(--symph-filet-doux); }
.tel-appli-playlist .tpl-item:hover { background: var(--symph-carte-2); border-color: var(--symph-filet); }
.tpl-item-tuile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--symph-gris), var(--symph-blanc)); color: var(--symph-nuit); }
.tel-appli-playlist .tpl-item .tpl-item-tuile .ico { width: 20px; height: 20px; color: var(--symph-nuit); }
.tel-appli-playlist .tpl-item-corps b { color: var(--symph-blanc); }
.tel-appli-playlist .tpl-item-corps small { color: var(--symph-texte-2); }
.tel-appli-playlist .tpl-details summary { color: var(--symph-blanc); }
.tel-appli-playlist .tpl-titre { color: var(--symph-blanc); }
.tel-appli-playlist .tpl-de, .tel-appli-playlist .tpl-desc { color: var(--symph-texte-2); }
.tel-appli-playlist .tpl-gardee { background: var(--symph-carte-2); color: var(--symph-texte-2); }
.sym-crayon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; list-style: none; }
.sym-crayon::-webkit-details-marker { display: none; }
.sym-crayon .ico { width: 18px; height: 18px; }
.sym-tete { display: flex; align-items: flex-start; gap: 12px; }
.sym-tete-corps { flex: 1; min-width: 0; }
.sym-pochette { display: grid; place-items: center; flex: none; width: 96px; height: 54px; overflow: hidden; border-radius: 10px; background: var(--symph-carte-2); color: var(--symph-texte-2); }
.sym-pochette img { width: 100%; height: 100%; object-fit: cover; }
.sym-pochette .ico { width: 26px; height: 26px; }
.sym-reacs { margin: 10px 0 0; }
.sym-ajout { margin-top: 12px; padding: 8px 10px; border: 1px solid var(--symph-filet); border-radius: 12px; background: var(--symph-carte); }
.sym-ajout summary { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.sym-ajout summary .ico { width: 14px; height: 14px; }
.sym .tpl-morceau { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.sym .tpl-morceau .tpl-morceau-gestes { grid-column: 3 / -1; }
.tpl-rang { min-width: 16px; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.tpl-rang .ico { width: 12px; height: 12px; }
.sym .tpl-morceau .tpl-jouer:has(.tpl-vignette:not([hidden])) { position: relative; width: 64px; height: 36px; border-radius: 7px; overflow: hidden; }
.tpl-vignette { display: block; width: 64px; height: 36px; object-fit: cover; }
.tpl-jouer .tpl-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.tpl-jouer-signe { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.tpl-jouer:has(.tpl-vignette:not([hidden])) .tpl-jouer-signe { background: color-mix(in srgb, var(--symph-nuit) 40%, transparent); color: var(--symph-blanc); }
.tel-appli-playlist .tpl-morceau + .tpl-morceau { border-top-color: var(--symph-filet-doux); }
.tel-appli-playlist .tpl-jouer { background: var(--symph-carte-2); border-color: var(--symph-filet); color: var(--symph-blanc); }
.tel-appli-playlist .tpl-morceau-corps b { color: var(--symph-blanc); }
.tel-appli-playlist .tpl-morceau-corps small, .tel-appli-playlist .tpl-morceau-corps small a { color: var(--symph-texte-2); }
.tel-appli-playlist .tpl-rang { color: var(--symph-texte-2); }
.tel-appli-playlist .tpl-coeur { color: var(--symph-texte-2); }
.tel-appli-playlist .tpl-coeur[aria-pressed="true"] { color: var(--symph-rouge); }
.tel-appli-playlist .tpl-morceau-gestes button { color: var(--symph-texte-2); }
.tel-appli-playlist .tpl-morceau-gestes button:hover { background: var(--symph-carte-2); color: var(--symph-blanc); }
.tpl-morceau-joue { background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.tel-appli-playlist .tpl-morceau-joue { background: var(--symph-doux); box-shadow: inset 2px 0 var(--symph-blanc); }
.tel-appli-playlist .tpl-morceau-joue .tpl-morceau-corps b { color: var(--symph-blanc); }
.tel-appli-playlist .tpl-en-cours { background: var(--symph-blanc); color: var(--symph-nuit); border-color: var(--symph-blanc); }
.sym-grand { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 12px; border-radius: 12px; background: var(--symph-carte); }
.sym-joue { text-align: center; }
.sym-joue-titre { margin: 0; color: var(--symph-blanc); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.sym-joue-artiste { margin: 4px 0 0; color: var(--symph-texte-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.sym-joue-de { margin: 6px 0 0; font-size: 12px; }
.sym-joue-de a { color: var(--symph-texte-2); }
.sym-gestes { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.sym-geste { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--symph-filet); border-radius: 10px; background: none; color: var(--symph-texte); cursor: pointer; }
.sym-geste .ico { width: 18px; height: 18px; }
.sym-geste-fort { width: 48px; height: 48px; background: var(--symph-blanc); border-color: var(--symph-blanc); color: var(--symph-nuit); }
.sym-geste[aria-pressed="true"] { background: var(--symph-doux); border-color: var(--symph-blanc); color: var(--symph-blanc); }
.sym-arreter { flex-basis: 100%; max-width: 160px; margin: 4px auto 0; }
.sym-file { text-align: left; }
.sym-file-morceau { display: block; padding: 0; }
.sym-sauter { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: var(--rayon); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sym-sauter:hover, .sym-sauter:focus-visible { background: var(--symph-carte-2); }
.sym-sauter .tpl-vignette { border-radius: 6px; }
.sym-rien { text-align: center; }
.sym-reprendre { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 12px; }
.sym-reprendre small { color: var(--symph-texte-2); }
.tpl-moment { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon-l); background: var(--surface); }
.tpl-moment-tete { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tpl-moment-tete .ico { width: 14px; height: 14px; }
.tpl-moment-corps { display: flex; align-items: center; gap: 10px; }
.tpl-moment-corps .tpl-vignette { flex: none; border-radius: 6px; }
.tpl-moment-texte { display: grid; flex: 1; min-width: 0; }
.tpl-moment-texte b { font-size: 13.5px; overflow-wrap: anywhere; }
.tpl-moment-texte small { color: var(--faint); font-size: 11.5px; }
.tpl-moment .tpl-lecteur { margin: 10px 0 0; }
.tel-appli-playlist .tpl-moment { background: var(--symph-carte); border-color: var(--symph-filet); }
.tel-appli-playlist .tpl-moment-tete, .tel-appli-playlist .tpl-moment-texte small { color: var(--symph-texte-2); }
.tel-appli-playlist .tpl-moment-texte b { color: var(--symph-blanc); }
.ech-moment { margin: 10px 0 0; }
.tpl-mini-reprendre { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: var(--rayon-pilule); background: var(--accent); color: var(--sur-accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tpl-mini-reprendre[hidden] { display: none; }
.tpl-mini-reprendre .ico { width: 12px; height: 12px; }
.tpl-mini-pause .tpl-mini-geste { display: none; }
.tpl-mini-ancre { padding: 0; border: 0; border-radius: 12px; background: var(--symph-nuit); box-shadow: none; overflow: hidden; }
.tpl-mini-ancre .tpl-mini-titre, .tpl-mini-ancre .tpl-mini-gestes { display: none; }
.tpl-mini-ancre .tpl-mini-cadre, .tpl-mini-ancre .tpl-mini-cadre iframe { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 12px; }
.liv [hidden] { display: none !important; }
.tel-appli-livraison .liv { color: var(--swift-texte); }
.tel-appli-livraison .liv-onglets { flex-wrap: nowrap; margin: -10px -12px 12px; padding: 0; border-bottom-color: var(--swift-filet); background: var(--swift-nuit); }
.tel-appli-livraison .liv-onglets a { flex: 1; justify-content: center; min-height: 42px; padding: 0 4px; color: var(--swift-texte-3); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.tel-appli-livraison .liv-onglets a:hover { color: var(--swift-texte); }
.tel-appli-livraison .liv-onglets a[aria-current='page'] { color: var(--swift-orange); border-bottom-color: var(--swift-orange); }
.tel-appli-livraison .liv-onglets .onglets-n { background: var(--swift-rouge); color: var(--swift-texte); }
.tel-appli-livraison .liv-titre { color: var(--swift-texte-2); letter-spacing: .14em; }
.tel-appli-livraison .liv-carte { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--swift-carte), var(--swift-carte-2)); border: 1px solid var(--swift-filet); box-shadow: none; }
.tel-appli-livraison .liv-attente { border-style: dashed; }
.liv-carte-tete { display: flex; align-items: flex-start; gap: 10px; }
.liv-carte-corps { flex: 1; min-width: 0; }
.liv-carte-titre { margin: 0; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.tel-appli-livraison .liv-carte-titre { color: var(--swift-texte); }
.liv-sorte { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 9px; background: var(--swift-doux); border: 1px solid var(--swift-filet-doux); color: var(--swift-orange); }
.liv-sorte .ico { width: 20px; height: 20px; }
.liv-qui { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: 12.5px; }
.tel-appli-livraison .liv-qui { color: var(--swift-texte-2); }
.liv-qui small { margin-left: 4px; font-size: 11px; opacity: .8; }
.liv-photo { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; color: var(--swift-texte); font-size: 10px; font-weight: 700; }
.liv-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 11.5px; }
.liv-statut { display: inline-block; padding: 2px 7px; border-radius: 4px; border: 1px solid currentColor; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.liv-statut-route   { color: var(--swift-orange); background: var(--swift-doux); }
.liv-statut-arrive  { color: var(--swift-or); background: var(--swift-or-doux); }
.liv-statut-ouvert  { color: var(--swift-vert); background: var(--swift-vert-doux); }
.liv-statut-accepte { color: var(--swift-vert); background: var(--swift-vert-doux); }
.liv-statut-refuse  { color: var(--swift-rouge); background: var(--swift-rouge-doux); }
.liv-statut-annule  { color: var(--swift-gris); background: none; }
.tel-appli-livraison .liv-reste { color: var(--swift-orange); }
.tel-appli-livraison .liv-ferme { border-color: var(--swift-or); animation: liv-pulsation 2.5s ease-in-out infinite; }
.tel-appli-livraison .liv-ferme::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--swift-or), var(--swift-orange)); }
@keyframes liv-pulsation {
0%, 100% { box-shadow: 0 0 0 0 transparent; }
50% { box-shadow: 0 0 0 4px var(--swift-pulsation); }
}
.liv-paquet { display: grid; place-items: center; margin: 12px auto 4px; width: 72px; height: 72px; border-radius: 16px; background: var(--swift-doux); border: 1px dashed var(--swift-filet); color: var(--swift-or); }
.liv-paquet .ico { width: 34px; height: 34px; }
.liv-ouvrir { margin: 8px 0 0; }
.liv-ouvrir .tel-bouton { width: 100%; }
.liv-vient-d-ouvrir .liv-revele { animation: liv-revele .5s ease-out; transform-origin: 50% 20%; }
@keyframes liv-revele {
0% { opacity: 0; transform: scale(.6) rotate(-4deg); }
60% { opacity: 1; transform: scale(1.03); }
100% { opacity: 1; transform: none; }
}
.liv-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.liv-vignette { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border-radius: 8px; background: var(--swift-carte); border: 1px solid var(--swift-filet); text-align: center; }
.liv-vignette img, .liv-vignette-vide { width: 100%; aspect-ratio: 1 / 1; border-radius: 5px; object-fit: cover; }
.liv-vignette-vide { display: grid; place-items: center; background: var(--swift-nuit); color: var(--swift-texte-3); }
.liv-vignette-vide .ico { width: 22px; height: 22px; }
.liv-vignette b { color: var(--swift-texte); font-size: 11px; line-height: 1.2; overflow-wrap: anywhere; }
.liv-vignette small { color: var(--swift-texte-2); font-size: 10px; line-height: 1.3; overflow-wrap: anywhere; }
.tel-appli-livraison .liv-mot { padding: 8px 10px; border-left: 3px solid var(--swift-orange); border-radius: 4px; background: var(--swift-doux); color: var(--swift-texte); }
.tel-appli-livraison .liv-detail { color: var(--swift-texte-2); }
.liv-manuscrite { position: relative; padding: 16px 14px 14px 30px; border: 0; border-radius: 2px; background: linear-gradient(180deg, var(--swift-papier), var(--swift-papier-2)); color: var(--swift-encre); box-shadow: 0 2px 14px var(--swift-ombre); line-height: 1.5; white-space: normal; }
.liv-manuscrite::before { content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 1px; background: var(--swift-marge); }
.liv-lettre-date { margin: 0 0 10px; color: var(--swift-encre-2); font-size: .85em; font-style: italic; text-align: right; }
.liv-lettre-signe { margin: 12px 0 0; padding-top: 6px; border-top: 1px dashed var(--swift-marge); color: var(--swift-encre-2); text-align: right; }
.liv-formulaire { display: grid; }
.liv-sortes, .liv-polices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.liv-sortes legend, .liv-polices legend { grid-column: 1 / -1; padding: 0; }
.liv-polices { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 6px; }
.liv-sorte-carte, .liv-police-carte, .liv-objet-carte { position: relative; display: block; cursor: pointer; }
.liv-sorte-carte input, .liv-police-carte input, .liv-objet-carte input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.liv-sorte-corps { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; padding: 8px 4px; border: 2px solid var(--swift-filet); border-radius: 9px; background: var(--swift-carte); text-align: center; }
.liv-sorte-corps .ico { width: 24px; height: 24px; color: var(--swift-texte); }
.liv-sorte-corps b { color: var(--swift-texte); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.liv-sorte-corps small { color: var(--swift-texte-3); font-size: 10px; line-height: 1.2; }
.liv-sorte-carte input:checked + .liv-sorte-corps, .liv-police-carte input:checked + span, .liv-objet-carte input:checked + .liv-objet-carte-corps { border-color: var(--swift-orange); background: var(--swift-doux); }
.liv-sorte-carte input:focus-visible + .liv-sorte-corps, .liv-police-carte input:focus-visible + span, .liv-objet-carte input:focus-visible + .liv-objet-carte-corps { outline: 2px solid var(--swift-orange); outline-offset: 2px; }
.liv-sorte-carte input:disabled + .liv-sorte-corps { opacity: .4; cursor: not-allowed; }
.liv-police-carte span { display: block; padding: 6px 8px; border: 2px solid var(--swift-filet); border-radius: 8px; background: var(--swift-papier); color: var(--swift-encre); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liv-police-carte small { display: block; margin-top: 2px; color: var(--swift-texte-3); font-size: 10px; text-align: center; }
.liv-choix-objets { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; padding: 6px; border: 1px solid var(--swift-filet); border-radius: 8px; background: var(--swift-fond-2); }
.liv-objet-carte-corps { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; border: 2px solid var(--swift-filet); border-radius: 7px; background: var(--swift-carte); text-align: center; }
.liv-objet-carte-corps img, .liv-objet-carte-corps .liv-vignette-vide { width: 100%; aspect-ratio: 1 / 1; border-radius: 4px; object-fit: cover; }
.liv-objet-carte-corps b { color: var(--swift-texte); font-size: 10.5px; line-height: 1.15; overflow-wrap: anywhere; }
.liv-formulaire:has(input[name="type"][value="lettre"]:checked) [data-swift-objets],
.liv-formulaire:has(input[name="type"][value="lettre"]:checked) [data-swift-mot],
.liv-formulaire:has(input[name="type"][value="colis"]:checked) [data-swift-lettre],
.liv-formulaire:has(input[name="type"][value="cadeau"]:checked) [data-swift-lettre] { display: none; }
.liv-envoyer-bouton { margin-top: 14px; }
.liv-envoyer-bouton .ico { width: 16px; height: 16px; }
.liv-recherche { position: relative; display: grid; gap: 6px; }
.liv-choisi { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 8px; border: 1px solid var(--swift-orange); border-radius: 8px; background: var(--swift-doux); }
.liv-choisi b { color: var(--swift-orange); font-size: 13px; }
.liv-choisi:empty { display: none; }
.liv-resultats { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; max-height: 210px; overflow-y: auto; margin: 2px 0 0; padding: 0; list-style: none; border: 1px solid var(--swift-filet); border-radius: 8px; background: var(--swift-fond-2); box-shadow: 0 8px 24px var(--swift-ombre); }
.liv-resultats button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--swift-filet-doux); background: none; color: var(--swift-texte); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.liv-resultats button:hover, .liv-resultats button:focus-visible { background: var(--swift-doux); }
.liv-resultats-vide { padding: 10px; color: var(--swift-texte-3); font-size: 12px; text-align: center; }
.tel-appli-livraison .liv-passees summary, .tel-appli-livraison .liv-relire summary { color: var(--swift-orange); }
.tel-appli-livraison .liv-liste { color: var(--swift-texte-2); }
.tel-appli-livraison .liv-liste li { border-top-color: var(--swift-filet-doux); }
.liv-liste-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.liv-liste-tete .liv-sorte { width: 26px; height: 26px; border-radius: 6px; }
.liv-liste-tete .liv-sorte .ico { width: 14px; height: 14px; }
.liv-relire { margin: 4px 0 6px; }
.liv-relire summary { cursor: pointer; font-size: 12px; }
.tel-appli-livraison .liv-signaler { color: var(--swift-texte-3); }
.objet-avec-image { display: flex; align-items: flex-start; gap: 10px; }
.objet-image { flex: none; width: 56px; height: 56px; border-radius: var(--rayon-s); object-fit: cover; }
.tel-appli-meteo .tel-meteo { position: relative; flex: 1 0 auto; }
.aet { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 10px 12px 16px; color: var(--aether-texte); }
.aet-ciel { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--aether-nuit), var(--aether-carte)); }
.aet[data-famille="ciel"] .aet-ciel { background: radial-gradient(ellipse 80% 45% at 50% -5%, var(--aether-ciel-soleil), transparent 65%), linear-gradient(180deg, var(--aether-nuit), var(--aether-carte)); }
.aet[data-etat="nuit_claire"] .aet-ciel { background: radial-gradient(ellipse 60% 40% at 70% 0%, var(--aether-ciel-froid), transparent 60%), linear-gradient(180deg, var(--aether-nuit), var(--aether-carte)); }
.aet[data-famille="pluie"] .aet-ciel { background: radial-gradient(ellipse 100% 55% at 50% 0%, var(--aether-ciel-pluie), transparent 70%), linear-gradient(180deg, var(--aether-nuit), var(--aether-carte)); }
.aet[data-famille="froid"] .aet-ciel { background: radial-gradient(ellipse 90% 50% at 50% 0%, var(--aether-ciel-froid), transparent 70%), linear-gradient(180deg, var(--aether-nuit), var(--aether-carte-2)); }
.aet[data-famille="vent"] .aet-ciel { background: radial-gradient(ellipse 70% 45% at 50% 0%, var(--aether-ciel-vent), transparent 65%), linear-gradient(180deg, var(--aether-nuit), var(--aether-carte)); }
.aet[data-famille="chaud"] .aet-ciel { background: radial-gradient(ellipse 80% 50% at 50% -5%, var(--aether-ciel-chaud), transparent 65%), linear-gradient(180deg, var(--aether-nuit), var(--aether-carte)); }
.aet-ciel span { position: absolute; top: -12px; opacity: 0; }
.aet-ciel span:nth-child(1)  { left: 4%;  animation-delay: 0s; }
.aet-ciel span:nth-child(2)  { left: 10%; animation-delay: .8s; }
.aet-ciel span:nth-child(3)  { left: 16%; animation-delay: 1.6s; }
.aet-ciel span:nth-child(4)  { left: 22%; animation-delay: .4s; }
.aet-ciel span:nth-child(5)  { left: 28%; animation-delay: 2.2s; }
.aet-ciel span:nth-child(6)  { left: 34%; animation-delay: 1.1s; }
.aet-ciel span:nth-child(7)  { left: 40%; animation-delay: 2.9s; }
.aet-ciel span:nth-child(8)  { left: 46%; animation-delay: .2s; }
.aet-ciel span:nth-child(9)  { left: 52%; animation-delay: 1.9s; }
.aet-ciel span:nth-child(10) { left: 58%; animation-delay: 3.3s; }
.aet-ciel span:nth-child(11) { left: 64%; animation-delay: .6s; }
.aet-ciel span:nth-child(12) { left: 70%; animation-delay: 2.5s; }
.aet-ciel span:nth-child(13) { left: 76%; animation-delay: 1.4s; }
.aet-ciel span:nth-child(14) { left: 82%; animation-delay: 3s; }
.aet-ciel span:nth-child(15) { left: 88%; animation-delay: .9s; }
.aet-ciel span:nth-child(16) { left: 94%; animation-delay: 2s; }
.aet-ciel span:nth-child(17) { left: 13%; animation-delay: 3.6s; }
.aet-ciel span:nth-child(18) { left: 67%; animation-delay: 1.2s; }
.aet[data-particules="pluie"] .aet-ciel span { width: 1px; height: 14px; background: linear-gradient(180deg, transparent, var(--aether-goutte)); animation-name: aet-chute; animation-duration: 1.1s; animation-timing-function: linear; animation-iteration-count: infinite; }
.aet[data-particules="neige"] .aet-ciel span { width: 4px; height: 4px; border-radius: 50%; background: var(--aether-flocon); animation-name: aet-flocon; animation-duration: 6s; animation-timing-function: linear; animation-iteration-count: infinite; }
.aet[data-particules="brume"] .aet-ciel span { top: auto; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, var(--aether-brume), transparent 70%); animation-name: aet-scintille; animation-duration: 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.aet[data-particules="brume"] .aet-ciel span:nth-child(odd) { top: 30%; }
.aet[data-particules="brume"] .aet-ciel span:nth-child(even) { top: 62%; }
.aet[data-particules="soleil"] .aet-ciel span { width: 3px; height: 3px; border-radius: 50%; background: var(--aether-eclat); animation-name: aet-scintille; animation-duration: 3.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.aet[data-particules="soleil"] .aet-ciel span:nth-child(3n) { top: 12%; }
.aet[data-particules="soleil"] .aet-ciel span:nth-child(3n+1) { top: 26%; }
.aet[data-particules="soleil"] .aet-ciel span:nth-child(3n+2) { top: 44%; }
@keyframes aet-chute { 0% { opacity: .8; transform: translateY(0); } 100% { opacity: 0; transform: translateY(110vh) translateX(-12px); } }
@keyframes aet-flocon { 0% { opacity: .9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(105vh) translateX(18px); } }
@keyframes aet-scintille { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: .8; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
.aet-ciel span { display: none; }
.tel-appli-livraison .liv-ferme, .liv-vient-d-ouvrir .liv-revele { animation: none; }
}
.aet-alerte { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid currentColor; border-radius: 10px; font-size: 12.5px; line-height: 1.4; }
.aet-alerte .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.aet-alerte-jaune  { color: var(--aether-or); background: var(--aether-or-doux); }
.aet-alerte-orange { color: var(--aether-orange); background: var(--aether-orange-doux); }
.aet-alerte-rouge  { color: var(--aether-rouge); background: var(--aether-rouge-doux); }
.aet-alerte-equipe { color: var(--aether-turquoise); background: var(--aether-doux); }
.aet-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--aether-texte-2); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.aet-tete .ico { width: 13px; height: 13px; }
.aet-lu { margin-left: auto; font-weight: 500; letter-spacing: .06em; text-transform: none; }
.aet-carte { position: relative; padding: 14px 14px 12px; border: 1px solid var(--aether-filet); border-radius: 16px; background: color-mix(in srgb, var(--aether-carte) 88%, transparent); overflow: hidden; }
.aet-carte::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--aether-turquoise), transparent); opacity: .6; }
.aet-carte-haut { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.aet-carte-texte { min-width: 0; }
.aet-temp { display: flex; align-items: flex-start; gap: 2px; margin: 0; }
.aet-temp b { color: var(--aether-blanc); font-size: 52px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.aet-temp span { margin-top: 6px; color: var(--aether-texte-2); font-size: 14px; }
.aet-etat { margin: 4px 0 0; color: var(--aether-texte); font-size: 15px; font-weight: 600; }
.aet-minmax { margin: 2px 0 0; color: var(--aether-texte-2); font-size: 12px; letter-spacing: .06em; }
.aet-mot { margin: 8px 0 0; color: var(--aether-texte); font-size: 13px; font-style: italic; overflow-wrap: anywhere; }
.aet-vide { margin: 0; color: var(--aether-texte-2); font-size: 13px; text-align: center; }
.aet-mesures { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.aet-mesures li { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid var(--aether-filet-doux); border-radius: 10px; background: var(--aether-carte-2); }
.aet-mesures b { color: var(--aether-blanc); font-size: 14px; font-variant-numeric: tabular-nums; }
.aet-mesures small { color: var(--aether-texte-2); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.aet-picto { flex: none; width: 74px; height: 74px; color: var(--aether-texte); filter: drop-shadow(0 0 10px var(--aether-doux)); }
.aet-picto-petit { width: 26px; height: 26px; filter: none; }
.aet-p-soleil { color: var(--aether-or); }
.aet-p-lune { color: var(--aether-texte); }
.aet-p-nuage { color: var(--aether-texte); }
.aet-p-pluie { color: var(--aether-goutte); }
.aet-p-brume { color: var(--aether-texte-2); }
.aet-p-neige { color: var(--aether-flocon); }
.aet-p-grele { color: var(--aether-flocon); }
.aet-p-eclair { color: var(--aether-or); fill: currentColor; }
.aet-p-vent { color: var(--aether-turquoise); }
.aet-p-chaleur { color: var(--aether-orange); }
.aet-p-arc-1 { color: var(--aether-rouge); }
.aet-p-arc-2 { color: var(--aether-or); }
.aet-p-arc-3 { color: var(--aether-turquoise); }
.aet-heure { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin: 0; padding: 9px 12px; border: 1px solid var(--aether-filet-doux); border-radius: 10px; background: var(--aether-carte); }
.aet-heure span { color: var(--aether-texte-2); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.aet-heure b { color: var(--aether-turquoise); font-size: 16px; font-variant-numeric: tabular-nums; }
.aet-heure small { flex-basis: 100%; color: var(--aether-texte); font-size: 12px; }
.aet-section { margin: 6px 0 0; color: var(--aether-texte-2); font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.aet-jours { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.aet-jours li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--aether-filet-doux); border-radius: 10px; background: var(--aether-carte); }
.aet-jour { display: grid; width: 40px; flex: none; color: var(--aether-turquoise); font-size: 12px; font-weight: 700; text-transform: capitalize; }
.aet-jour small { color: var(--aether-texte-2); font-size: 10px; font-weight: 500; }
.aet-jour-etat { flex: 1; min-width: 0; color: var(--aether-texte); font-size: 12.5px; }
.aet-jour-temp { flex: none; color: var(--aether-blanc); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aet-jour-temp small { color: var(--aether-texte-2); font-weight: 500; }
.tel-appli-meteo .aet-source { margin: 2px 0 0; color: var(--aether-texte-2); text-align: center; }
.meteo-plus { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 12px; }
.tel-sms > .sms + .sms.sms-suite { margin-top: -6px; }
.tel-sms > .sms.sms-suite > .sms-qui { display: none; }
.tel-sms > .sms.sms-pas-fin > .sms-heure,
.tel-sms > .sms.sms-pas-fin:hover > .sms-heure { display: none; }
.sms-ve {
display: inline-grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 9px;
min-width: 190px; max-width: 100%; padding: 8px 12px; border-radius: 16px;
background: var(--surface-2); color: var(--ink); text-align: left;
}
.sms-moi .sms-ve { background: var(--accent); color: var(--sur-accent); }
.sms-ve-ecouter {
display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
}
.sms-moi .sms-ve-ecouter { background: var(--sur-accent); color: var(--accent); }
.sms-ve-ecouter .ico { width: 14px; height: 14px; }
.sms-ve-onde { display: flex; align-items: center; gap: 2px; height: 22px; min-width: 0; overflow: hidden; }
.sms-ve-onde i { display: block; flex: 0 0 3px; width: 3px; height: 8px; border-radius: 2px; background: currentColor; opacity: .45; }
.sms-ve-onde i:nth-child(4n+1) { height: 6px; }
.sms-ve-onde i:nth-child(4n+2) { height: 14px; }
.sms-ve-onde i:nth-child(4n+3) { height: 10px; }
.sms-ve-onde i:nth-child(5n) { height: 18px; }
.sms-ve-onde i:nth-child(7n) { height: 12px; }
.sms-ve-joue .sms-ve-onde i { animation: sms-ve-onde .9s ease-in-out infinite alternate; opacity: .9; }
.sms-ve-joue .sms-ve-onde i:nth-child(2n) { animation-delay: .15s; }
.sms-ve-joue .sms-ve-onde i:nth-child(3n) { animation-delay: .3s; }
@keyframes sms-ve-onde { from { transform: scaleY(.45); } to { transform: scaleY(1.15); } }
@media (prefers-reduced-motion: reduce) {
.sms-ve-joue .sms-ve-onde i { animation: none; opacity: .9; }
}
.sms-ve-duree { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .85; }
.sms-ve-texte {
grid-column: 1 / -1; margin: 2px 0 0; font-family: var(--font-rp); font-size: 14px; font-style: italic;
line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.sms-ve-cache {
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sms-ve-etiquette { display: block; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-style: normal; }
.sms-ve-etiquette .ico { width: 12px; height: 12px; }
.sms-ve-panneau {
display: grid; gap: 6px; margin: 0 0 8px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--rayon-s); background: var(--surface);
}
.sms-ve-panneau[hidden] { display: none; }
.sms-ve-panneau textarea { resize: vertical; min-height: 64px; }
.sms-ve-gestes { display: flex; gap: 10px; align-items: center; margin: 2px 0 0; }
.sms-pieces-menu > .sms-piece-ecrite {
display: flex; align-items: center; justify-content: flex-start; gap: 10px;
width: 100%; height: auto; min-height: 44px; padding: 0 12px;
border: 0; border-radius: var(--rayon-s); background: none; color: var(--ink);
font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.sms-pieces-menu > .sms-piece-ecrite:hover { background: var(--surface-2); }
.sms-pieces-menu > .sms-piece-ecrite .ico { width: 17px; height: 17px; color: var(--muted); }
@container (min-width: 420px) {
.sms-pieces-menu > .sms-piece-ecrite { width: auto; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--rayon-pilule); color: var(--muted); font-weight: 600; }
.sms-pieces-menu > .sms-piece-ecrite.td-joindre { width: 34px; height: 34px; min-height: 0; padding: 0; justify-content: center; border-color: var(--line-strong); background: var(--surface); }
}
.sms-ve-sans-script textarea, .sms-ve-sans-script select { width: 100%; }
.sms-replique > .sms-texte,
.sms-texte.sms-texte-replique {
border: 1px dashed var(--pulse-decrocher); background: var(--surface); color: var(--ink);
font-family: var(--font-rp); font-style: italic;
}
.sms-replique > .sms-texte::before, .sms-texte.sms-texte-replique::before { content: '\00AB\00A0'; }
.sms-replique > .sms-texte::after, .sms-texte.sms-texte-replique::after { content: '\00A0\00BB'; }
.sms-moi.sms-replique > .sms-texte { background: var(--accent-soft); color: var(--ink); }
.sms-evenement.sms-appel { display: inline-flex; align-items: center; gap: 6px; color: var(--pulse-decrocher); font-weight: 600; }
.sms-evenement.sms-appel-manque { color: var(--pulse-raccrocher); }
.sms-evenement.sms-appel .ico { width: 13px; height: 13px; }
.sms-evenement.sms-appel span { font-weight: 400; }
.sms-appel-barre {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 8px 12px;
border: 1px solid var(--pulse-decrocher); border-radius: var(--rayon-s); background: var(--surface); color: var(--ink);
font-size: 13.5px;
}
.sms-appel-barre[hidden] { display: none; }
.td-fil > .sms-appel-barre { margin: 8px 10px 0; }
.sms-appel-barre form { margin: 0; }
.sms-appel-ico { width: 16px; height: 16px; color: var(--pulse-decrocher); }
.sms-appel-sonne .sms-appel-ico { animation: sms-appel-sonne 1s ease-in-out infinite; }
@keyframes sms-appel-sonne { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .sms-appel-sonne .sms-appel-ico { animation: none; } }
.sms-appel-dit { flex: 1 1 140px; min-width: 0; }
.sms-appel-minuteur { font-variant-numeric: tabular-nums; font-weight: 700; }
.sms-appel-geste {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
border: 0; border-radius: var(--rayon-pilule); color: var(--sur-pulse-appel); font: inherit; font-weight: 600; cursor: pointer;
}
.sms-appel-geste .ico { width: 14px; height: 14px; }
.sms-appel-decrocher { background: var(--pulse-decrocher); }
.sms-appel-raccrocher { background: var(--pulse-raccrocher); }
.sms-appel-geste:disabled { opacity: .6; cursor: default; }
.tel-appeler { display: inline-flex; margin: 0; }
.tel-appeler[hidden] { display: none; }
.tel-appeler button, .td-appeler {
display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
border: 0; background: none; color: inherit; cursor: pointer;
}
.td-appeler[hidden] { display: none; }
.tel-appeler .ico, .td-appeler .ico { width: 18px; height: 18px; }
.td-appel { display: grid; align-content: center; justify-items: center; gap: 22px; min-height: 100%; padding: 28px 16px; text-align: center; }
.td-appel[hidden] { display: none; }
.td-appel-tete { display: grid; justify-items: center; gap: 6px; }
.td-appel-visage { width: 84px; height: 84px; font-size: 28px; }
.td-appel-mot { margin: 4px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.td-appel-nom { font-size: 19px; }
.td-appel-gestes { display: flex; gap: 34px; }
.td-appel-geste { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.td-appel-rond { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: var(--sur-pulse-appel); }
.td-appel-rond .ico { width: 22px; height: 22px; }
.td-appel-decrocher .td-appel-rond { background: var(--pulse-decrocher); }
.td-appel-refuser .td-appel-rond { background: var(--pulse-raccrocher); }
.td-bulle.td-sonne { animation: sms-appel-sonne 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .td-bulle.td-sonne { animation: none; outline: 3px solid var(--pulse-decrocher); } }
.td-det-form-surnoms { display: grid; gap: 4px; width: 100%; }
.td-det-lab { color: var(--muted); font-size: 12px; }
.td-contact-rangee { display: flex; align-items: center; gap: 4px; }
.td-contact-rangee > .tel-fil { flex: 1 1 auto; min-width: 0; }
.td-contact-rangee > .td-det-form { flex: 1 1 auto; padding: 6px 10px; }
.td-contact-ligne .tel-fil-corps small { display: block; }
.tel-surnom-form { display: grid; gap: 4px; }
.td-contact-nom small { color: var(--muted); font-size: 12px; }
.tel-appbar-visage-lien { display: inline-flex; flex: none; }
.tel-appbar-visage { width: 32px; height: 32px; font-size: 12px; }
.tel-appbar-titres { display: grid; min-width: 0; line-height: 1.15; }
.tel-appbar-titres > .tel-appbar-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-appbar-sous-titre { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.tel-details-etat { margin: 4px 0 8px; }
.tel-ajout-chercher { margin: 0 0 8px; }
.tel-ajout-chercher[hidden] { display: none; }
.tel-contacts .td-contact[hidden] { display: none; }
.tel-icone-blindspot { background: linear-gradient(135deg, var(--bs-nuit), var(--bs-rouge-sombre)); }
.tel-ecran.tel-appli-blindspot { background: radial-gradient(ellipse 60% 40% at 50% 15%, var(--bs-lueur), transparent 70%), var(--bs-nuit); color: var(--bs-texte); }
.tel-appli-blindspot .tel-appbar { background: var(--bs-nuit); border-bottom-color: var(--bs-filet); color: var(--bs-texte); }
.tel-appli-blindspot .tel-appbar-titre { color: var(--bs-rouge); letter-spacing: .18em; text-transform: uppercase; }
.tel-appli-blindspot .tel-retour, .tel-appli-blindspot .tel-sortir { color: var(--bs-rouge); }
.tel-appli-blindspot .tel-barre { color: var(--bs-texte); }
.tel-appli-blindspot .tel-appbar-actions { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bs-badge { overflow: hidden; max-width: 96px; padding: 2px 6px; border: 1px solid var(--bs-filet); color: var(--bs-texte-2); font-family: ui-monospace, monospace; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.bs-crayon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--bs-rouge); }
.tel-appli-blindspot .tel-lab, .tel-appli-blindspot .tel-precision, .tel-appli-blindspot .tel-vide { color: var(--bs-texte-2); }
.tel-appli-blindspot .tel-champ { background: var(--bs-carte); border-color: var(--bs-filet); color: var(--bs-texte); }
.tel-appli-blindspot .tel-champ:focus { outline: none; border-color: var(--bs-rouge); }
.tel-appli-blindspot .tel-bouton { background: linear-gradient(135deg, var(--bs-rouge-sombre), var(--bs-rouge)); color: var(--bs-texte); font-weight: 700; letter-spacing: .06em; }
.tel-appli-blindspot .tel-avis { background: var(--bs-doux); color: var(--bs-texte); border-color: var(--bs-filet); }
.tel-appli-blindspot .tel-erreur { background: var(--bs-doux); color: var(--bs-rouge); }
.bs { color: var(--bs-texte); }
.bs-onglets { flex-wrap: nowrap; margin: -10px -12px 12px; padding: 0; border-bottom-color: var(--bs-filet-doux); background: var(--bs-nuit); }
.bs-onglets a { flex: 1; justify-content: center; min-height: 42px; padding: 0 4px; color: var(--bs-texte-3); font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: .04em; white-space: nowrap; text-transform: uppercase; }
.bs-onglets a:hover { color: var(--bs-texte); }
.bs-onglets a[aria-current='page'] { color: var(--bs-rouge); box-shadow: inset 0 -2px var(--bs-rouge); }
.bs-ecrire { display: grid; gap: 6px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bs-filet-doux); }
.bs-sous { color: var(--bs-texte-3); font-family: ui-monospace, monospace; font-size: 11px; }
.bs-sous b, .bs-alias { color: var(--bs-rouge); font-family: ui-monospace, monospace; font-weight: 400; }
.bs-message, .bs-commentaire { padding: 10px 0; border-bottom: 1px solid var(--bs-filet-doux); }
.bs-commentaire { padding-left: 12px; border-left: 2px solid var(--bs-filet); }
.bs-de-moi .bs-alias::after { content: ' (toi)'; color: var(--bs-texte-3); }
.bs-tete { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 12px; }
.bs-tete small { margin-left: auto; color: var(--bs-texte-3); font-size: 10.5px; }
.bs-texte { color: var(--bs-texte); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.bs-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.bs-reactions form { margin: 0; }
.bs-reaction { display: inline-flex; align-items: center; gap: 3px; min-height: 30px; padding: 0 7px; border: 1px solid var(--bs-filet-doux); border-radius: 999px; background: none; color: var(--bs-texte-2); font-size: 13px; cursor: pointer; }
.bs-reaction.est-mienne { border-color: var(--bs-rouge); background: var(--bs-doux); color: var(--bs-texte); }
.bs-n { color: var(--bs-texte-3); font-size: 11px; }
.bs-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.bs-gestes form { margin: 0; }
.bs-geste { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0; border: 0; background: none; color: var(--bs-texte-2); font-size: 12px; text-decoration: none; cursor: pointer; }
.bs-geste:hover { color: var(--bs-rouge); }
.bs-geste-danger { color: var(--bs-texte-3); }
.bs-titre { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; color: var(--bs-rouge); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.bs-formulaire { display: grid; gap: 8px; }
.bs-formulaire fieldset { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.bs-coursier { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--bs-filet); border-left: 3px solid var(--bs-rouge); border-radius: 8px; background: var(--bs-doux); color: var(--bs-texte); text-decoration: none; }
.bs-coursier span { display: grid; gap: 2px; }
.bs-coursier small { color: var(--bs-texte-2); font-size: 11.5px; }
.bs-espace { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; color: var(--bs-rouge); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.bs-espace::after { content: ''; flex: 1; height: 1px; background: var(--bs-filet-doux); }
.bs-lieu { display: grid; gap: 2px; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--bs-filet-doux); border-left: 2px solid var(--bs-rouge); border-radius: 6px; background: var(--bs-carte); color: var(--bs-texte); text-decoration: none; }
.bs-lieu small { color: var(--bs-texte-2); font-size: 11.5px; }
.bs-etiquettes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bs-etiquette { padding: 1px 6px; border: 1px solid var(--bs-filet-doux); border-radius: 4px; color: var(--bs-texte-2); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }
.bs-etiquette-illegal { border-color: var(--bs-filet); background: var(--bs-doux); color: var(--bs-rouge); }
.bs-code { display: grid; gap: 10px; padding-top: 12px; text-align: center; }
.bs-code form { display: grid; gap: 8px; text-align: left; }
.bs-code-icone { margin: 0; font-size: 28px; }
.pub-bilan-fenetre .pub-gestes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-left: auto; }
.pub-gestes .mine { margin: 0; font-size: 13px; }
.pub-gestes form { margin: 0; }
.pub-gestes .btn { white-space: nowrap; }
.pub-gestes .idee-soutien { flex-direction: row; align-items: center; gap: 8px; text-align: left; }
.pub-gestes .idee-soutien-nb b { display: inline; font-size: 15px; }
.pub-gestes .idee-soutien .btn { width: auto; }
.idee-reponse-carte { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--surface-2); }
.idee-reponse-carte .idee-reponse-tete { margin: 0; font-size: 13.5px; }
.idee-reponse-carte .pub-texte { margin-top: 4px; font-size: 14px; }
.pub-liste-couverture { display: block; margin: 10px -16px 0; aspect-ratio: 16 / 7; overflow: hidden; background: var(--surface-2); }
.pub-liste-couverture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-extrait { color: var(--muted); }
.pub-geste-propre { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }
.pub-geste-propre > details, .pub-geste-propre > .ann-reponses { flex-basis: 100%; }
.pub-geste-propre .ann-outils { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-geste-propre .mine { margin: 0; }
.pub .evt-infos { margin-top: 8px; }
.pub .nouvelle-image, .pub .av-image { display: block; margin-top: 10px; }
.pub .nouvelle-modifier, .pub .pot-reprendre { margin-top: 10px; }
.pub-avatar-loreside { overflow: hidden; background: var(--surface-2); }
.pub-avatar-loreside img { border-radius: 50%; }
.etiq.scene-a-toi { font-weight: 700; }
.creer-en-haut { display: flex; justify-content: flex-end; margin: 12px 0 4px; }
.creer-en-haut .btn { gap: 6px; }
.dialogue-creer[open]:not(:modal) { position: relative; inset: auto; margin: 12px 0; width: 100%; max-height: none; box-shadow: var(--ombre-carte); }
.dialogue-creer[open]:not(:modal) .dialogue-boite { max-height: none; }
.dialogue-creer .composer { margin-top: 10px; }
.ville-pastilles { margin: 10px 0 4px; }
.ville-choisir { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ville-choisir .meta { display: block; }
.joinus-composeur { margin-top: 14px; }
.joinus-composeur .qdn-ligne-tete { display: flex; align-items: flex-start; gap: 10px; }
.joinus-composeur .comp-zone { flex: 1; min-width: 0; }
.joinus-composeur .qdn-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.joinus-fil { margin-top: 16px; }
.joinus-archives { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.joinus-archives > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
@media (max-width: 520px) {
.pub-bilan-fenetre .pub-gestes { margin-left: 0; }
.creer-en-haut { justify-content: stretch; }
.creer-en-haut .btn { width: 100%; justify-content: center; }
}
.hint.dossier-pourquoi { margin-bottom: 0; }
.hint.dossier-pourquoi > span { flex: 1; min-width: 0; }
.dossier-vide { margin-top: 10px; }
.statut-ouvert.statut-poser { display: block; }
.statut-ouvert.statut-poser[hidden] { display: none; }
.statut-poser-form .lab:first-of-type { margin-top: 0; }
.statut-poser-form .profil-statut-champ { font-size: 16px; }
.statut-poser-actes { display: flex; justify-content: flex-end; margin: 10px 0 0; }
.medi-avis { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.medi-avis-bouton { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.medi-avis-nb { min-width: 20px; padding: 1px 7px; border-radius: var(--rayon-pilule); background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; text-align: center; }
.medi-avis-pris { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.medi-avis-pris .medi-avis-nb { background: var(--surface); color: var(--accent-ink); }
.pf-aimees { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pf-aimee { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; color: var(--ink); text-decoration: none; }
.pf-aimee .ico { align-self: center; color: var(--accent); }
.pf-aimee span { font-weight: 600; }
.pf-aimee small { color: var(--muted); font-size: 12px; }
@media (max-width: 520px) {
.medi-avis-bouton { flex: 1 1 100%; justify-content: center; }
}
[data-filtres-multiple] .chip[aria-pressed='true'] .ico-valider { width: 14px; height: 14px; flex: none; }
@media (max-width: 640px) {
.barre-filtres-actifs {
flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.barre-filtres-actifs::-webkit-scrollbar { display: none; }
.barre-filtres-actifs .barre-filtres-actif { flex: none; white-space: nowrap; }
}
.barre-filtres-repliee .barre-filtres-actifs {
flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.barre-filtres-repliee .barre-filtres-actifs::-webkit-scrollbar { display: none; }
.barre-filtres-repliee .barre-filtres-actifs .barre-filtres-actif { flex: none; white-space: nowrap; }
.visages-origines-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 0 10px; }
.visages-origines-note .info-bulle { flex: 1 1 100%; margin: 0; }
.visage-origine-manque { margin: 0; font-size: 13px; }
@media (min-width: 641px) {
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste .visages-origines-note { padding: 4px 6px 0; }
.barre-filtres:not(.barre-filtres-repliee) .barre-filtres-liste:has(.visages-origines-pastilles) { max-height: 60vh; overflow-y: auto; }
}
.visage-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 12px; }
.visage-origines legend .lab-ligne { display: inline-flex; align-items: center; gap: 6px; }
.tel-app-n,
#tel-dock .td-perso-n,
.td-pastille {
min-width: 22px;
height: 22px;
padding: 0 6px;
border: 2px solid var(--tel-pastille-contour);
border-radius: var(--rayon-pilule);
background: var(--tel-pastille);
color: var(--tel-pastille-texte);
font-size: 11.5px;
font-weight: 700;
line-height: 18px;
text-align: center;
box-sizing: border-box;
box-shadow: 0 2px 6px var(--tel-pastille-lueur);
}
.td-pastille { border-color: var(--tel-pastille-contour-bulle); }
#tel-dock .td-perso-n { min-width: 20px; height: 20px; padding: 0 5px; font-size: 10.5px; line-height: 16px; }
.tel-app { --tel-icone-cote: 58px; }
.tel-app > .tel-app-n { top: -7px; right: max(-7px, calc(50% - var(--tel-icone-cote) / 2 - 7px)); z-index: 1; }
.td-tel .td-apps .tel-icone { width: min(var(--tel-icone-cote), 100%); }
.tel-app .tel-icone { transition: transform .1s, box-shadow .15s; }
.tel-app:hover .tel-icone { transform: translateY(-2px); }
.tel-app:active .tel-icone { transform: scale(.82); }
.tel-horloge { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.tel-barre .tel-heure { font-size: 22px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.tel-date { margin-top: 2px; font-size: 10px; font-weight: 500; opacity: .72; }
.tel-date:empty { display: none; }
.tel-verrouille .tel-horloge { visibility: hidden; }
.tel-appli-messages .tel-appbar-titre { color: var(--pulse-titre); }
.tel-appli-potins .tel-appbar-titre { color: var(--commerage-titre); }
.td-appbar-tuile { display: inline-grid; flex: none; }
.td-appbar-tuile[hidden] { display: none; }
.td-appbar .td-titre { color: var(--pulse-titre); font-weight: 700; }
.td-fil-nonlus { background: var(--pulse-vif); color: var(--sur-pulse-vif); box-shadow: 0 0 5px color-mix(in srgb, var(--pulse-vif) 40%, transparent); }
.tel-verrou-notif-corps b { opacity: 1; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tel-verrou-notif[data-app='messages'] b { color: var(--pulse-vif); }
.tel-verrou-notif[data-app='echo'] b { color: var(--hm-accent); }
.tel-verrou-notif[data-app='rencontres'] b { color: var(--connect-rose); }
.tel-verrou-notif[data-app='maire'] b { color: var(--maire-or-vif); }
.tel-verrou-notif[data-app='annonces'] b { color: var(--relay-vert); }
.tel-verrou-notif[data-app='livraison'] b { color: var(--swift-orange); }
.tel-verrou-notif[data-app='playlist'] b { color: var(--symph-blanc); }
.tel-verrou-notif[data-app='meteo'] b { color: var(--aether-turquoise); }
.tel-verrou-notif[data-app='potins'] b { color: var(--commerage-vif); }
.tel-verrou-notif[data-app='blindspot'] b { color: var(--bs-rouge); }
.tel-verrou-ouvrir { animation: tel-invite 1.8s ease-in-out infinite; }
@keyframes tel-invite {
0%, 100% { transform: translateY(0); opacity: .6; }
50% { transform: translateY(-4px); opacity: 1; }
}
.tel-ecran[style*='--tel-fond'] .tel-verrou::before {
content: '';
position: absolute;
inset: 0;
background: var(--tel-voile-verrou);
pointer-events: none;
}
.tel-verrou > * { position: relative; z-index: 1; }
.td-fen-tuile { flex: none; width: 24px; height: 24px; border-radius: 7px; box-shadow: none; }
.td-fen-tuile img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.td-fen[data-appli] .td-fen-titre { font-weight: 700; letter-spacing: .08em; }
.td-fen[data-appli] .td-fen-bouton { border-color: color-mix(in srgb, currentColor 30%, transparent); background: transparent; color: inherit; }
.td-fen[data-appli='messages'] .td-fen-titre { color: var(--pulse-titre); }
.td-fen[data-appli='potins'] .td-fen-titre { color: var(--commerage-titre); }
.td-fen[data-appli='echo'] .td-fen-barre { border-bottom-color: var(--hm-trait); background: var(--hm-nuit); color: var(--hm-texte); }
.td-fen[data-appli='echo'] .td-fen-titre { color: var(--hm-accent); }
.td-fen[data-appli='rencontres'] .td-fen-barre { border-bottom-color: var(--connect-filet); background: var(--connect-nuit); color: var(--connect-texte); }
.td-fen[data-appli='rencontres'] .td-fen-titre { color: var(--connect-rose); }
.td-fen[data-appli='annonces'] .td-fen-barre { border-bottom-color: var(--relay-filet); background: var(--relay-nuit); color: var(--relay-texte); }
.td-fen[data-appli='annonces'] .td-fen-titre { color: var(--relay-vert); }
.td-fen[data-appli='maire'] .td-fen-barre { border-bottom-color: var(--maire-filet); background: var(--maire-nuit); color: var(--maire-texte); }
.td-fen[data-appli='maire'] .td-fen-titre { color: var(--maire-or-vif); }
.td-fen[data-appli='playlist'] .td-fen-barre { border-bottom-color: var(--symph-filet); background: var(--symph-nuit); color: var(--symph-texte); }
.td-fen[data-appli='playlist'] .td-fen-titre { color: var(--symph-blanc); }
.td-fen[data-appli='livraison'] .td-fen-barre { border-bottom-color: var(--swift-filet); background: var(--swift-nuit); color: var(--swift-texte); }
.td-fen[data-appli='livraison'] .td-fen-titre { color: var(--swift-orange); }
.td-fen[data-appli='meteo'] .td-fen-barre { border-bottom-color: var(--aether-filet); background: var(--aether-nuit); color: var(--aether-texte); }
.td-fen[data-appli='meteo'] .td-fen-titre { color: var(--aether-turquoise); }
.td-fen[data-appli='blindspot'] .td-fen-barre { border-bottom-color: var(--bs-filet); background: var(--bs-nuit); color: var(--bs-texte); }
.td-fen[data-appli='blindspot'] .td-fen-titre { color: var(--bs-rouge); }
@media (min-width: 600px) {
#tel-dock.td-grand .td-apps .tel-app { --tel-icone-cote: 74px; }
#tel-dock.td-grand .td-apps .tel-icone { border-radius: 20px; }
#tel-dock.td-grand .td-apps { row-gap: 22px; column-gap: 12px; }
#tel-dock.td-grand .td-apps .tel-app-nom { font-size: min(13.5px, 6.2cqi); }
#tel-dock.td-grand .td-persos { block-size: 94px; }
#tel-dock.td-grand .td-persos .td-visage { inline-size: 68px; block-size: 68px; font-size: 18px; }
#tel-dock.td-grand .td-perso { transform: translateX(calc(-50% + var(--place, 0) * 76px)) scale(.74); }
#tel-dock.td-grand .td-perso-actif { transform: translateX(-50%) scale(1); }
#tel-dock.td-grand .td-qui-nom { font-size: 20px; }
#tel-dock.td-grand .tel-barre .tel-heure { font-size: 30px; }
#tel-dock.td-grand .tel-date { font-size: 12px; }
#tel-dock.td-grand .tel-signes { transform: scale(1.2); transform-origin: right center; }
#tel-dock.td-grand .tel-appbar .tel-appbar-tuile { inline-size: 30px; block-size: 30px; }
#tel-dock.td-grand .tel-verrou-heure { font-size: 80px; }
#tel-dock.td-grand .tel-verrou-date { font-size: 16px; }
#tel-dock.td-grand .tel-verrou-notif .tel-icone { inline-size: 42px; block-size: 42px; border-radius: 11px; }
#tel-dock.td-grand .tel-verrou-notif-corps { font-size: 15px; }
#tel-dock.td-grand .tel-verrou-notif-corps b { font-size: 13px; }
#tel-dock.td-grand .tel-verrou-ouvrir { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
.tel-app .tel-icone { transition: none; }
.tel-app:hover .tel-icone,
.tel-app:active .tel-icone { transform: none; }
.tel-verrou-ouvrir { animation: none; }
}
.mess-ecrire .mess-outils { display: none; }
.mess-ecrire.mess-en-saisie .comp-outil,
.mess-ecrire.mess-en-saisie .mess-joindre { display: none; }
.mess-ecrire.mess-en-saisie .mess-outils {
display: grid; place-items: center; flex: 0 0 auto; align-self: center; width: 36px; height: 36px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--accent-ink); cursor: pointer;
}
.mess-ecrire.mess-en-saisie .mess-outils:hover { background: var(--surface-2); }
.mess-ecrire.mess-en-saisie .mess-outils:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mess-ecrire .mess-outils .ico { width: 18px; height: 18px; }
@media (hover: none) {
#chatbox .cb-msg { -webkit-user-select: none; user-select: none; }
}
.page-titre {
display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
gap: 8px 16px; margin: 0 0 12px;
}
.page-titre-nom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.page-titre-sous { margin: 0; font-size: 15px; }
.page-titre-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.page-titre-actes > form { margin: 0; }
.page-titre-actes.mine { margin: 0; }
@media (min-width: 600px) {
.page-titre { grid-template-columns: minmax(0, 1fr) auto; }
.page-titre-nom { grid-column: 1; grid-row: 1; }
.page-titre-actes { grid-column: 2; grid-row: 1; justify-content: flex-end; }
.page-titre-sous { grid-column: 1 / -1; }
}
:where(.page) > h1,
:where(.page) > .titre-ligne > h1,
.lecture-texte > h1,
.page-titre-nom > h1,
.blog-tete > h1,
.plan-tete > h1,
.reperes-tete > h1,
.succes-entete > h1,
.fiche-saisie > h1,
.soutenir > h1,
.candidature-moderation > h1 {
margin: 0 0 4px; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
overflow-wrap: break-word;
}
.page-titre-nom > h1 { margin: 0; min-width: 0; }
@media (min-width: 900px) {
:where(.page) > h1,
:where(.page) > .titre-ligne > h1,
.lecture-texte > h1,
.page-titre-nom > h1,
.blog-tete > h1,
.plan-tete > h1,
.reperes-tete > h1,
.succes-entete > h1,
.fiche-saisie > h1,
.soutenir > h1,
.candidature-moderation > h1 { font-size: 34px; }
}
.fp-tete .fp-nom { font-size: 23px; line-height: 1.2; overflow-wrap: break-word; }
.fp-tete .fp-ligne { margin: 4px 0 0; }
.fp-actes-tete .vie-badge { margin-left: 2px; }
.fp-photo.pf-photo-vide { color: var(--sur-photo); }
.fp-actes-tete .carte-menu-liste { top: calc(100% + 6px); bottom: auto; }
.fp-photo-logo .lieu-logo-vide { display: grid; place-items: center; }
.fp-tete + .fp-grille { margin-top: 20px; }
.fp-gauche > .fp-blocs { margin-top: 0; }
@media (min-width: 768px) {
.fp-tete .fp-nom { font-size: 26px; }
}
@media (min-width: 1024px) {
.fp-droite { padding-top: 0; }
}
@media (max-width: 640px) {
.fp-actes-tete .carte-menu-liste { top: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.td-info-fil,
.tel-info-fil { border: 0; font: inherit; }
.td-info-fil .ico,
.tel-info-fil .ico { width: 20px; height: 20px; }
.tel-ecran.tel-ecran-fond[style*='--tel-fond'] {
background: var(--tel-voile-verrou), var(--tel-fond) center / cover no-repeat, var(--tel-nuit-bas);
}
.reprise-encart { margin-top: 14px; }
.reprise-encart h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.reprise-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.reprise-form { margin-top: 12px; }
.reprise-volontaires { list-style: none; margin: 8px 0 0; padding: 0; }
.reprise-volontaires > li { padding: 10px 0; border-top: 1px solid var(--line); }
.reprise-volontaires > li:first-child { border-top: 0; }
.reprise-volontaire-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.reprise-mot { margin: 6px 0 8px; color: var(--muted); overflow-wrap: anywhere; }
.tel-ecran.tel-appli-messages, .td-fen[data-appli='messages'] {
--ap-nuit: var(--ap-messages-nuit); --ap-fond-2: var(--ap-messages-fond-2);
--ap-carte: var(--ap-messages-carte); --ap-carte-2: var(--ap-messages-carte-2);
--ap-texte: var(--ap-messages-texte); --ap-texte-2: var(--ap-messages-texte-2); --ap-texte-3: var(--ap-messages-texte-3);
--ap-accent: var(--ap-messages-accent); --ap-accent-fort: var(--ap-messages-accent-fort); --ap-sur-accent: var(--ap-messages-sur-accent);
--ap-filet: var(--ap-messages-filet); --ap-filet-fort: var(--ap-messages-filet-fort);
--ap-filet-doux: var(--ap-messages-filet-doux); --ap-doux: var(--ap-messages-doux);
--ap-degrade-a: var(--ap-messages-degrade-a); --ap-degrade-b: var(--ap-messages-degrade-b); --ap-sur-degrade: var(--ap-messages-sur-degrade);
}
.tel-ecran.tel-appli-potins, .td-fen[data-appli='potins'] {
--ap-nuit: var(--ap-potins-nuit); --ap-fond-2: var(--ap-potins-fond-2);
--ap-carte: var(--ap-potins-carte); --ap-carte-2: var(--ap-potins-carte-2);
--ap-texte: var(--ap-potins-texte); --ap-texte-2: var(--ap-potins-texte-2); --ap-texte-3: var(--ap-potins-texte-3);
--ap-accent: var(--ap-potins-accent); --ap-accent-fort: var(--ap-potins-accent-fort); --ap-sur-accent: var(--ap-potins-sur-accent);
--ap-filet: var(--ap-potins-filet); --ap-filet-fort: var(--ap-potins-filet-fort);
--ap-filet-doux: var(--ap-potins-filet-doux); --ap-doux: var(--ap-potins-doux);
--ap-degrade-a: var(--ap-potins-degrade-a); --ap-degrade-b: var(--ap-potins-degrade-b); --ap-sur-degrade: var(--ap-potins-sur-degrade);
}
.tel-ecran.tel-appli-echo, .td-fen[data-appli='echo'] {
--ap-nuit: var(--hm-nuit); --ap-fond-2: var(--hm-surface); --ap-carte: var(--hm-surface); --ap-carte-2: var(--hm-surface-2);
--ap-texte: var(--hm-texte); --ap-texte-2: var(--hm-texte-2); --ap-texte-3: var(--hm-texte-3);
--ap-accent: var(--hm-accent); --ap-accent-fort: var(--hm-accent-fort); --ap-sur-accent: var(--ap-echo-sur-accent);
--ap-filet: var(--hm-trait); --ap-filet-fort: var(--hm-trait); --ap-filet-doux: var(--hm-trait-doux); --ap-doux: var(--hm-lueur);
--ap-degrade-a: var(--ap-echo-degrade-a); --ap-degrade-b: var(--ap-echo-degrade-b); --ap-sur-degrade: var(--ap-echo-sur-degrade);
}
.tel-ecran.tel-appli-rencontres, .td-fen[data-appli='rencontres'] {
--ap-nuit: var(--connect-nuit); --ap-fond-2: var(--connect-carte); --ap-carte: var(--connect-carte); --ap-carte-2: var(--connect-carte-2);
--ap-texte: var(--connect-texte); --ap-texte-2: var(--connect-texte-2); --ap-texte-3: var(--connect-texte-3);
--ap-accent: var(--connect-rose); --ap-accent-fort: var(--connect-rose); --ap-sur-accent: var(--ap-rencontres-sur-accent);
--ap-filet: var(--connect-filet); --ap-filet-fort: var(--connect-filet-fort); --ap-filet-doux: var(--connect-filet); --ap-doux: var(--connect-rose-doux);
--ap-degrade-a: var(--ap-rencontres-degrade-a); --ap-degrade-b: var(--ap-rencontres-degrade-b); --ap-sur-degrade: var(--ap-rencontres-sur-degrade);
}
.tel-ecran.tel-appli-annonces, .td-fen[data-appli='annonces'] {
--ap-nuit: var(--relay-nuit); --ap-fond-2: var(--relay-fond-2); --ap-carte: var(--relay-carte); --ap-carte-2: var(--relay-carte-2);
--ap-texte: var(--relay-texte); --ap-texte-2: var(--relay-texte-2); --ap-texte-3: var(--relay-texte-3);
--ap-accent: var(--relay-vert); --ap-accent-fort: var(--relay-vert); --ap-sur-accent: var(--ap-annonces-sur-accent);
--ap-filet: var(--relay-filet); --ap-filet-fort: var(--relay-filet-fort); --ap-filet-doux: var(--relay-filet); --ap-doux: var(--relay-vert-doux);
--ap-degrade-a: var(--ap-annonces-degrade-a); --ap-degrade-b: var(--ap-annonces-degrade-b); --ap-sur-degrade: var(--ap-annonces-sur-degrade);
}
.tel-ecran.tel-appli-maire, .td-fen[data-appli='maire'] {
--ap-nuit: var(--maire-nuit); --ap-fond-2: var(--maire-carte); --ap-carte: var(--maire-carte); --ap-carte-2: var(--maire-carte-2);
--ap-texte: var(--maire-texte); --ap-texte-2: var(--maire-texte-2); --ap-texte-3: var(--maire-texte-3);
--ap-accent: var(--maire-or-vif); --ap-accent-fort: var(--maire-or-vif); --ap-sur-accent: var(--ap-maire-sur-accent);
--ap-filet: var(--maire-filet); --ap-filet-fort: var(--maire-filet-fort); --ap-filet-doux: var(--maire-filet); --ap-doux: var(--maire-or-doux);
--ap-degrade-a: var(--ap-maire-degrade-a); --ap-degrade-b: var(--ap-maire-degrade-b); --ap-sur-degrade: var(--ap-maire-sur-degrade);
}
.tel-ecran.tel-appli-playlist, .td-fen[data-appli='playlist'] {
--ap-nuit: var(--symph-nuit); --ap-fond-2: var(--symph-fond-2); --ap-carte: var(--symph-carte); --ap-carte-2: var(--symph-carte-2);
--ap-texte: var(--symph-texte); --ap-texte-2: var(--symph-texte-2); --ap-texte-3: var(--symph-gris);
--ap-accent: var(--symph-blanc); --ap-accent-fort: var(--symph-blanc); --ap-sur-accent: var(--ap-playlist-sur-accent);
--ap-filet: var(--symph-filet); --ap-filet-fort: var(--symph-filet); --ap-filet-doux: var(--symph-filet-doux); --ap-doux: var(--symph-doux);
--ap-degrade-a: var(--ap-playlist-degrade-a); --ap-degrade-b: var(--ap-playlist-degrade-b); --ap-sur-degrade: var(--ap-playlist-sur-degrade);
}
.tel-ecran.tel-appli-livraison, .td-fen[data-appli='livraison'] {
--ap-nuit: var(--swift-nuit); --ap-fond-2: var(--swift-fond-2); --ap-carte: var(--swift-carte); --ap-carte-2: var(--swift-carte-2);
--ap-texte: var(--swift-texte); --ap-texte-2: var(--swift-texte-2); --ap-texte-3: var(--swift-texte-3);
--ap-accent: var(--swift-orange); --ap-accent-fort: var(--swift-or); --ap-sur-accent: var(--ap-livraison-sur-accent);
--ap-filet: var(--swift-filet); --ap-filet-fort: var(--swift-filet); --ap-filet-doux: var(--swift-filet-doux); --ap-doux: var(--swift-doux);
--ap-degrade-a: var(--ap-livraison-degrade-a); --ap-degrade-b: var(--ap-livraison-degrade-b); --ap-sur-degrade: var(--ap-livraison-sur-degrade);
}
.tel-ecran.tel-appli-meteo, .td-fen[data-appli='meteo'] {
--ap-nuit: var(--aether-nuit); --ap-fond-2: var(--aether-carte); --ap-carte: var(--aether-carte); --ap-carte-2: var(--aether-carte-2);
--ap-texte: var(--aether-texte); --ap-texte-2: var(--aether-texte-2); --ap-texte-3: var(--aether-texte-2);
--ap-accent: var(--aether-turquoise); --ap-accent-fort: var(--aether-turquoise); --ap-sur-accent: var(--ap-meteo-sur-accent);
--ap-filet: var(--aether-filet); --ap-filet-fort: var(--aether-filet); --ap-filet-doux: var(--aether-filet-doux); --ap-doux: var(--aether-doux);
--ap-degrade-a: var(--ap-meteo-degrade-a); --ap-degrade-b: var(--ap-meteo-degrade-b); --ap-sur-degrade: var(--ap-meteo-sur-degrade);
}
.tel-ecran.tel-appli-blindspot, .td-fen[data-appli='blindspot'] {
--ap-nuit: var(--bs-nuit); --ap-fond-2: var(--bs-carte); --ap-carte: var(--bs-carte); --ap-carte-2: var(--bs-carte-2);
--ap-texte: var(--bs-texte); --ap-texte-2: var(--bs-texte-2); --ap-texte-3: var(--bs-texte-3);
--ap-accent: var(--bs-rouge); --ap-accent-fort: var(--bs-rouge); --ap-sur-accent: var(--ap-blindspot-sur-accent);
--ap-filet: var(--bs-filet); --ap-filet-fort: var(--bs-filet); --ap-filet-doux: var(--bs-filet-doux); --ap-doux: var(--bs-doux);
--ap-degrade-a: var(--ap-blindspot-degrade-a); --ap-degrade-b: var(--ap-blindspot-degrade-b); --ap-sur-degrade: var(--ap-blindspot-sur-degrade);
}
.tel-ecran.tel-appli-couleur.tel-appli-messages { --pulse-vif: var(--ap-accent); --sur-pulse-vif: var(--ap-sur-accent); --pulse-titre: var(--ap-accent); }
.tel-ecran.tel-appli-couleur.tel-appli-potins { --commerage-vif: var(--ap-accent); --commerage-titre: var(--ap-accent); }
.tel-ecran.tel-appli-couleur.tel-appli-echo {
--hm-nuit: var(--ap-nuit); --hm-surface: var(--ap-carte); --hm-surface-2: var(--ap-carte-2);
--hm-trait: var(--ap-filet); --hm-trait-doux: var(--ap-filet-doux);
--hm-texte: var(--ap-texte); --hm-texte-2: var(--ap-texte-2); --hm-texte-3: var(--ap-texte-3);
--hm-accent: var(--ap-accent); --hm-accent-fort: var(--ap-accent-fort); --hm-lueur: var(--ap-doux);
--hm-sur-accent: var(--ap-sur-accent); --hm-voile: var(--ap-nuit);
}
.tel-ecran.tel-appli-couleur.tel-appli-rencontres {
--connect-nuit: var(--ap-nuit); --connect-carte: var(--ap-carte); --connect-carte-2: var(--ap-carte-2);
--connect-rose: var(--ap-accent); --connect-rose-sombre: var(--ap-accent-sombre); --connect-violet: var(--ap-accent-sombre);
--connect-texte: var(--ap-texte); --connect-texte-2: var(--ap-texte-2); --connect-texte-3: var(--ap-texte-3);
--connect-filet: var(--ap-filet); --connect-filet-fort: var(--ap-filet-fort); --connect-rose-doux: var(--ap-doux);
}
.tel-ecran.tel-appli-couleur.tel-appli-annonces {
--relay-nuit: var(--ap-nuit); --relay-fond-2: var(--ap-fond-2); --relay-carte: var(--ap-carte); --relay-carte-2: var(--ap-carte-2);
--relay-vert: var(--ap-accent); --relay-vert-doux: var(--ap-doux);
--relay-filet: var(--ap-filet); --relay-filet-fort: var(--ap-filet-fort);
--relay-texte: var(--ap-texte); --relay-texte-2: var(--ap-texte-2); --relay-texte-3: var(--ap-texte-3);
}
.tel-ecran.tel-appli-couleur.tel-appli-maire {
--maire-nuit: var(--ap-nuit); --maire-carte: var(--ap-carte); --maire-carte-2: var(--ap-carte-2);
--maire-or: var(--ap-accent); --maire-or-vif: var(--ap-accent); --maire-or-sombre: var(--ap-accent-sombre); --maire-or-doux: var(--ap-doux);
--maire-filet: var(--ap-filet); --maire-filet-fort: var(--ap-filet-fort);
--maire-texte: var(--ap-texte); --maire-texte-2: var(--ap-texte-2); --maire-texte-3: var(--ap-texte-3);
}
.tel-ecran.tel-appli-couleur.tel-appli-playlist {
--symph-nuit: var(--ap-nuit); --symph-fond-2: var(--ap-fond-2); --symph-carte: var(--ap-carte); --symph-carte-2: var(--ap-carte-2);
--symph-blanc: var(--ap-accent); --symph-gris: var(--ap-texte-3);
--symph-texte: var(--ap-texte); --symph-texte-2: var(--ap-texte-2);
--symph-filet: var(--ap-filet); --symph-filet-doux: var(--ap-filet-doux); --symph-doux: var(--ap-doux); --symph-lueur: var(--ap-doux);
}
.tel-ecran.tel-appli-couleur.tel-appli-livraison {
--swift-nuit: var(--ap-nuit); --swift-fond-2: var(--ap-fond-2); --swift-carte: var(--ap-carte); --swift-carte-2: var(--ap-carte-2);
--swift-orange: var(--ap-accent); --swift-cuivre: var(--ap-accent); --swift-cuivre-sombre: var(--ap-accent-sombre);
--swift-texte: var(--ap-texte); --swift-texte-2: var(--ap-texte-2); --swift-texte-3: var(--ap-texte-3);
--swift-filet: var(--ap-filet); --swift-filet-doux: var(--ap-filet-doux); --swift-doux: var(--ap-doux);
}
.tel-ecran.tel-appli-couleur.tel-appli-meteo {
--aether-nuit: var(--ap-nuit); --aether-carte: var(--ap-carte); --aether-carte-2: var(--ap-carte-2);
--aether-turquoise: var(--ap-accent); --aether-turquoise-sombre: var(--ap-accent-sombre);
--aether-texte: var(--ap-texte); --aether-texte-2: var(--ap-texte-2);
--aether-filet: var(--ap-filet); --aether-filet-doux: var(--ap-filet-doux); --aether-doux: var(--ap-doux);
}
.tel-ecran.tel-appli-couleur.tel-appli-blindspot {
--bs-nuit: var(--ap-nuit); --bs-carte: var(--ap-carte); --bs-carte-2: var(--ap-carte-2);
--bs-rouge: var(--ap-accent); --bs-rouge-sombre: var(--ap-accent-sombre);
--bs-texte: var(--ap-texte); --bs-texte-2: var(--ap-texte-2); --bs-texte-3: var(--ap-texte-3);
--bs-filet: var(--ap-filet); --bs-filet-doux: var(--ap-filet-doux); --bs-doux: var(--ap-doux); --bs-lueur: var(--ap-doux);
}
.tel-ecran.tel-appli {
--paper: var(--ap-nuit);
--surface: var(--ap-carte);
--surface-2: var(--ap-carte-2);
--ink: var(--ap-texte);
--muted: var(--ap-texte-2);
--faint: var(--ap-texte-3);
--line: var(--ap-filet-doux);
--line-strong: var(--ap-filet);
--accent: var(--ap-accent);
--accent-ink: var(--ap-accent);
--accent-soft: var(--ap-doux);
--sur-accent: var(--ap-sur-accent);
color-scheme: dark;
}
.tel-ecran.tel-appli-messages,
.tel-ecran.tel-appli-potins { background: var(--ap-nuit); color: var(--ap-texte); }
.tel-appli-messages .tel-corps,
.tel-appli-potins .tel-corps { background: var(--ap-nuit); }
.tel-ecran.tel-appli .tel-barre { color: var(--ap-texte); }
.tel-ecran.tel-appli .tel-appbar {
border-bottom-color: var(--ap-filet);
background: linear-gradient(135deg, var(--ap-degrade-a), var(--ap-degrade-b));
color: var(--ap-sur-degrade);
}
.tel-ecran.tel-appli .tel-appbar :is(.tel-appbar-titre, .tel-appbar-sous-titre, .tel-retour, .tel-sortir,
.ech-barre-geste, .bs-crayon, .bs-badge, .td-jeu-lien, .td-nouveau-bouton, .td-sortir, .td-info-fil, .td-appeler) {
color: var(--ap-sur-degrade);
}
.tel-ecran.tel-appli .tel-appbar .bs-badge { border-color: currentColor; }
.tel-ecran.tel-appli .tel-appbar :is(.carte-menu-liste) { color: var(--ap-texte); }
.tel-ecran.tel-appli .tel-bouton:not(.tel-bouton-creux) {
background: linear-gradient(135deg, var(--ap-degrade-a), var(--ap-degrade-b));
color: var(--ap-sur-degrade);
}
.tel-ecran.tel-appli .tel-bouton-creux { border-color: var(--ap-filet-fort); color: var(--ap-accent); }
.tel-ecran.tel-appli :is(.renc-compte, .renc-neuf, .renc-match-ecrire, .renc-couverture-marque, .renc-intention input:checked + span) {
color: var(--ap-sur-accent);
}
.tel-icone.tel-icone-couleur { background: linear-gradient(135deg, var(--tuile-a), var(--tuile-b)); }
.tel-icone.tel-icone-couleur::after { background-color: var(--tuile-encre); }
.td-fen[data-appli] .td-fen-barre {
border-bottom-color: var(--ap-filet, var(--line));
background: linear-gradient(135deg, var(--ap-degrade-a, var(--surface)), var(--ap-degrade-b, var(--surface)));
color: var(--ap-sur-degrade, var(--ink));
}
.td-fen[data-appli] .td-fen-titre { color: var(--ap-sur-degrade, var(--ink)); }
.app-reglage-couleur-tete { margin-top: 10px; }
.app-reglage-couleur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.app-reglage-couleur input[type='color'] {
width: 44px; height: 32px; padding: 2px;
border: 1px solid var(--line-strong); border-radius: var(--rayon-s); background: var(--surface);
}
.pf-photo:not(.lieu-logo-tete) { width: 152px; height: 152px; }
.pf-photo-boite { margin-top: -60px; }
.pf-photo-vide { font-size: 48px; }
@media (max-width: 720px) {
.pf-photo:not(.lieu-logo-tete) { width: 116px; height: 116px; }
.pf-photo-boite { margin-top: 0; }
.pf-photo-vide { font-size: 38px; }
}
.cb-fil-messages { scrollbar-gutter: stable; }
.cb-msg { position: relative; }
.cb-msg-heure {
display: block; position: absolute; top: 100%; left: 0; z-index: 2;
margin: 2px 10px 0; padding: 0 6px; border-radius: 999px;
background: var(--paper); visibility: hidden; pointer-events: none;
}
.cb-msg-moi .cb-msg-heure { left: auto; right: 0; }
@media (hover: hover) { .cb-msg:hover .cb-msg-heure { display: block; visibility: visible; } }
.cb-heure-visible .cb-msg-heure { display: block; visibility: visible; }
.up-bloc .livre,
.up-bloc .livre-couverture { --livre-h: clamp(340px, 54vh, 480px); }
.livre-repli { display: grid; gap: 14px; }
.livre-repli[hidden] { display: none; }
.livre-page-repli {
height: auto;
border: 1px solid var(--line);
border-radius: var(--rayon);
}
.livre:not(.livre-actif) .livre-page-repli .livre-liste {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.livre-fin[hidden] { display: none; }
.livre-page-fin .livre-page-corps { display: grid; place-items: center; }
.livre-fin { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; text-align: center; }
.livre-fin p {
margin: 0;
max-width: 24ch;
color: var(--livre-encre);
font-family: 'Caveat', var(--font-rp);
font-size: 24px;
line-height: 1.25;
}
.livre-fin .livre-fin-compte { color: var(--muted); font-family: var(--font-title); font-size: 13px; }
.livre-vide .btn,
.livre-fin .btn { margin-top: 6px; }
.livre-une-page { --livre-h: clamp(420px, 62vh, 560px); }
.livre-une-page .livre-ouvert { max-width: calc((min(100cqw, 880px) - 22px) / 2); }
.distribuer .section + .section { margin-top: 18px; }
.dist-pnjs,
.dist-personnages { display: grid; gap: 2px; margin: 6px 0 10px; padding: 0; border: 0; }
.dist-pnjs { padding-left: 26px; }
.dist-photo {
flex: none;
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
color: var(--paper);
font-size: 11px;
font-weight: 600;
}
.dist-swift { display: grid; gap: 2px; margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--rayon); }
.objet-donne-par { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.objet-donne-par b { color: var(--ink); font-weight: 600; }
.objet-donne-photo {
flex: none;
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
color: var(--paper);
font-size: 8px;
}
.tel-perso-reglage { position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tel-perso-reglage form { margin: 0; }
.contour-en-ligne { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--en-ligne); }
.tel-en-ligne {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ech-poser-note[data-info-ancre] { position: relative; }
.reprise-archives { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.reprise-archives > li { padding-top: 10px; border-top: 1px solid var(--line); }
.reprise-archives > li:first-child { padding-top: 0; border-top: 0; }
.entete-tiroir .pastille { top: 0; right: -2px; background: var(--nav-chiffre); color: var(--sur-nav-chiffre); }
@media (max-width: 599px) {
.tiroir {
grid-template-columns: var(--largeur-colonne-tablette) calc(min(88vw, 360px) - var(--largeur-colonne-tablette));
overflow: hidden;
transition: transform .22s ease, width .22s ease, visibility 0s linear .22s;
}
.tiroir.ouvert { transition: transform .22s ease, width .22s ease; }
.tiroir.colonne-seule { width: var(--largeur-colonne-tablette); }
.tiroir.colonne-seule .menu-nav,
.tiroir.colonne-seule .tiroir-fermer { visibility: hidden; }
.tiroir.colonne-seule + .tiroir-voile { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
.tiroir,
.tiroir.ouvert { transition: none; }
}
@media (max-width: 640px) {
.cb-fil-menu .carte-menu-liste {
position: absolute; left: auto; right: 0; top: calc(100% + 6px); bottom: auto;
max-height: min(70dvh, 360px);
}
}
.joueur-bloc {
gap: 0;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
transition: border-color .15s, box-shadow .15s;
}
.joueur-bloc:hover { border-color: var(--line-strong); box-shadow: 0 6px 20px color-mix(in srgb, black 8%, transparent); }
.joueur-bloc > .joueur-carte { border: 0; background: none; box-shadow: none; }
.joueur-bloc > .joueur-carte:hover { box-shadow: none; }
.joueur-bloc > .joueur-carte-ecrire { margin: -4px 0 0; padding: 0 16px 14px calc(16px + 56px + 14px); }
@media (prefers-reduced-motion: reduce) { .joueur-bloc { transition: none; } }
.pf-carte .livre,
.pf-carte .livre-couverture { --livre-h: clamp(340px, 54vh, 480px); }
.pf-carte .livre-bloc { margin-top: 4px; }
.dist-en-route-titre { margin: 14px 0 0; font-size: 15px; }
.dist-en-route { margin-bottom: 10px; }
.dist-en-route .item { align-items: center; gap: 10px; }
.dist-en-route .item form { flex: none; margin: 0; }
.tel-verrou-notif { align-items: flex-start; }
.tel-verrou-notif-corps { flex: 1; gap: 1px; }
.tel-verrou-notif-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.tel-verrou-heure-notif { flex: none; font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }
.tel-verrou-notif .tel-verrou-de { display: flex; align-items: center; gap: 6px; margin-top: 3px; min-width: 0; }
.tel-verrou-notif .tel-verrou-de b {
overflow: hidden;
color: var(--sur-photo);
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
opacity: 1;
}
.tel-verrou-de .tel-verrou-visage {
flex: none;
display: inline-grid;
place-items: center;
overflow: hidden;
inline-size: 20px;
block-size: 20px;
border-radius: 50%;
color: var(--sur-photo);
font-size: 9px;
font-weight: 700;
object-fit: cover;
}
.tel-verrou-de .tel-verrou-visage img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tel-verrou-extrait {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow-wrap: anywhere;
}
.tel-verrou-compte { font-size: 11px; opacity: .7; }
#tel-dock.td-grand .tel-verrou-notif .tel-verrou-de b { font-size: 14px; }
#tel-dock.td-grand .tel-verrou-de .tel-verrou-visage { inline-size: 24px; block-size: 24px; }
.tel-reglages-titre { margin: 0 0 8px; font-size: 14px; font-weight: 700; }
.tel-reglages { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.tel-reglage { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.tel-reglage + .tel-reglage, .info-bulle + .tel-reglage { border-top: 1px solid var(--line); }
.tel-reglage-nom { flex: 1; min-width: 0; font-size: 13.5px; }
.tel-reglage .interrupteur { flex: none; }
.tel-reglages .acte-auto { min-block-size: 0; }
.ech-vues { margin: 6px 0 4px; }
.ech-vues-bouton {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border: 1px solid currentColor;
border-radius: 999px;
font-weight: 600;
list-style: none;
cursor: pointer;
}
.ech-vues-bouton::-webkit-details-marker { display: none; }
.ech-lecteur-js .ech-vues-bouton {
border-color: color-mix(in srgb, var(--sur-photo) 35%, transparent);
background: color-mix(in srgb, var(--sur-photo) 12%, transparent);
color: var(--sur-photo);
}
.ech-vues-liste {
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
max-block-size: 40vh;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.ech-vues-qui { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.ech-vues-qui .ech-av { flex: none; inline-size: 32px; block-size: 32px; }
.ech-vues-nom { flex: 1; min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ech-vues-emoji { flex: none; font-size: 18px; line-height: 1; }
.ech-vues-quand { flex: none; font-size: 11px; opacity: .7; }
.ech-vues-vide { margin: 8px 0 0; opacity: .75; }
.ech-lecteur-js .ech-vues-qui, .ech-lecteur-js .ech-vues-vide { color: var(--sur-photo); }
.cb-msg .mp-vus .sms-vus-quand { white-space: nowrap; }
.cb-fenetre .cb-menu:not(.cb-menu-feuille) { max-height: calc(100% - 16px); overflow-y: auto; }
.succes-perso-image { width: 1.25em; height: 1.25em; border-radius: 4px; object-fit: cover; vertical-align: -.25em; }
.succes-niveau .succes-perso-image { margin-right: 4px; }
.succes-perso-marque { margin: 2px 0 0; font-size: 12px; font-weight: 600; color: var(--succes-teinte); }
.succes-perso-mot { margin: 6px 0 0; font-family: var(--font-rp); font-style: italic; font-size: 14px; color: var(--ink); }
.succes-perso-choix { margin: 10px 0 0; padding: 0; border: 0; min-width: 0; }
.succes-perso-niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
.succes-perso-niveau { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
.succes-perso-niveau-mots { display: flex; flex-direction: column; line-height: 1.25; }
.succes-perso-niveau-mots strong { color: var(--succes-teinte); }
.succes-perso-niveau:has(input:checked) { border-color: var(--succes-teinte); background: color-mix(in oklab, var(--succes-teinte) 8%, var(--surface)); box-shadow: 0 0 0 1px var(--succes-teinte); }
.succes-perso-niveau:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.succes-perso-n-eclat { --succes-teinte: var(--teinte-jeux); }
.succes-perso-n-lueur { --succes-teinte: var(--teinte-univers); }
.succes-perso-n-etoile { --succes-teinte: var(--teinte-communaute); }
.succes-perso-niveau input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.succes-perso-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 4px; }
.succes-perso-icone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.succes-perso-icone input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.succes-perso-icone .ico { width: 22px; height: 22px; }
.succes-perso-icone:has(input:checked) { border-color: var(--accent); color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, var(--surface)); }
.succes-perso-icone:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.succes-perso-garder { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; }
.succes-perso-creer { margin: 10px 0 14px; }
.succes-perso-creer > summary { list-style: none; display: inline-flex; }
.succes-perso-creer > summary::-webkit-details-marker { display: none; }
.succes-perso-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.succes-perso-ligne { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.succes-perso-tete { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.succes-perso-pastille { flex: none; display: inline-flex; padding: 7px; border-radius: 50%; color: var(--succes-teinte); background: color-mix(in oklab, var(--succes-teinte) 14%, var(--surface)); }
.succes-perso-gestes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-top: 10px; }
.succes-perso-modifier { flex: 1 1 100%; }
.succes-perso-modifier > summary { list-style: none; display: inline-flex; }
.succes-perso-modifier > summary::-webkit-details-marker { display: none; }
.succes-perso-modifier[open] > form { margin-top: 8px; }
.sms-appel-ignorer { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.td-appel-gestes { flex-wrap: wrap; justify-content: center; gap: 18px; }
.td-appel-ignorer .td-appel-rond { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.bs-entree { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; background: radial-gradient(ellipse 70% 45% at 50% 45%, var(--bs-lueur), transparent 70%), var(--bs-nuit); color: var(--bs-rouge); pointer-events: none; transition: opacity 220ms ease-out; }
.bs-entree::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bs-rouge-sombre); box-shadow: 0 0 12px var(--bs-rouge); animation: bs-entree-balayage 620ms linear both; }
.bs-entree::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, var(--bs-filet-doux) 0 1px, transparent 1px 3px); }
.bs-entree-nom { position: relative; z-index: 1; max-width: calc(100% - 24px); overflow: hidden; font-family: ui-monospace, monospace; font-size: 22px; font-weight: 700; letter-spacing: .28em; text-shadow: 2px 0 var(--bs-rouge-sombre), -2px 0 var(--bs-filet); white-space: nowrap; animation: bs-entree-tremble 620ms steps(6, end) both; }
.bs-entree-ligne { position: relative; z-index: 1; color: var(--bs-texte-3); font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; }
.bs-entree-fin { opacity: 0; }
@keyframes bs-entree-balayage { from { top: 0; } to { top: 100%; } }
@keyframes bs-entree-tremble { 0% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bs-entree { display: none; } }
.tel-app-nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 100%; overflow: hidden; overflow-wrap: break-word; }
.td-tel .td-apps .tel-app-nom { display: block; }
.tel-icone-maire { background: linear-gradient(135deg, var(--maire-or-sombre), var(--maire-tuile)); }
.rel-auteur-photo-lieu { border-radius: 4px; }
.rel-moderation { margin: 6px 0 0; color: var(--relay-texte-3); font-size: 11.5px; }
.apps-ordre { margin-top: 4px; }
.apps-ordre-liste { margin: 0; padding: 0; }
.apps-ordre-glissable [data-apps-poignee] { cursor: grab; touch-action: none; }
.apps-ordre-saisie { opacity: .5; background: var(--surface-2); }
.apps-ordre-saisie [data-apps-poignee] { cursor: grabbing; }
.apps-ordre-gestes { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 0; }
.apps-ordre-gestes[hidden] { display: none; }
.apps-ordre-gestes .lien-bouton { min-width: 44px; min-height: 40px; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.apps-ordre-gestes .lien-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.apps-ordre-pied { margin: 10px 0 0; }
.apps-ordre-annonce { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.apps-ordre-annonce:empty { display: none; }
.salon-chats { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 14px 0 4px; }
.salon-chat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; min-width: 0; flex: 1 1 240px; }
.salon-chat-bouton { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; }
.salon-chat-bouton span:last-child { overflow-wrap: anywhere; }
.salon-chat .mine { margin: 0; color: var(--muted); }
.salon-fil { margin-top: 18px; }
.salon-fil .pubs { margin-top: 12px; }
.salon-reglages { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); }
.salon-reglage { margin: 0; }
.salon-reglage + .salon-reglage { border-top: 1px solid var(--line); }
:root {
--titre-ligne-retour: 20px;
--titre-ecart-retour: 4px;
--largeur-titres: 1272px;
}
:where(.page) > h1,
.page-titre-nom > h1,
.lecture-texte > h1,
.blog-tete > h1,
.plan-tete > h1,
.reperes-tete > h1,
.succes-entete > h1,
.fiche-saisie > h1,
.soutenir > h1,
.candidature-moderation > h1 {
font-family: var(--font-title); font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
}
.page > h1,
.page > .page-titre,
.page > .titre-ligne,
.lecture-texte > h1,
.blog-tete > h1,
.plan-tete > h1,
.reperes-tete > h1,
.succes-entete > h1:first-child,
.fiche-saisie > h1,
.soutenir > h1:first-child,
.candidature-moderation > h1:first-child {
margin-top: calc(var(--titre-ligne-retour) + var(--titre-ecart-retour));
}
.page > :is(p.mine, .page-retour):has(> a:first-child):has(+ :is(h1, .page-titre, .titre-ligne, .succes-entete)),
.fiche-saisie > p.mine:has(> a:first-child):has(+ h1),
:is(.lecture-texte, .blog-tete, .plan-tete, .reperes-tete) > .fil-blog:has(+ h1) {
height: var(--titre-ligne-retour);
margin: 0 0 var(--titre-ecart-retour);
overflow: hidden;
font-size: 13px;
line-height: var(--titre-ligne-retour);
white-space: nowrap;
text-overflow: ellipsis;
}
:is(.lecture-texte, .blog-tete, .plan-tete, .reperes-tete) > .fil-blog:has(+ h1) ol { flex-wrap: nowrap; }
.page > :is(p.mine, .page-retour):has(> a:first-child) + :is(h1, .page-titre, .titre-ligne),
.page > :is(p.mine, .page-retour):has(> a:first-child) + .succes-entete > h1:first-child,
.fiche-saisie > p.mine:has(> a:first-child) + h1,
:is(.lecture-texte, .blog-tete, .plan-tete, .reperes-tete) > .fil-blog + h1 { margin-top: 0; }
@media (min-width: 900px) {
.scroll { scrollbar-gutter: stable; }
.scroll-corps { container-type: inline-size; container-name: zone-contenu; }
.page { --titre-page: 1080px; }
.page.page-etroit { --titre-page: 552px; }
.page.page-colonne { --titre-page: 912px; }
.page.page-lecture { --titre-page: 1032px; }
.page.page-large { --titre-page: 1272px; }
.page.page-fil { --titre-page: 1112px; }
.page > h1,
.page > .page-titre,
.page > .titre-ligne,
.lecture-texte > h1,
.blog-tete > h1,
.plan-tete > h1,
.reperes-tete > h1,
.succes-entete > h1:first-child,
.fiche-saisie > h1,
.soutenir > h1:first-child,
.candidature-moderation > h1:first-child,
.page > :is(p.mine, .page-retour):has(> a:first-child):has(+ :is(h1, .page-titre, .titre-ligne, .succes-entete)),
.fiche-saisie > p.mine:has(> a:first-child):has(+ h1),
:is(.lecture-texte, .blog-tete, .plan-tete, .reperes-tete) > .fil-blog:has(+ h1) {
margin-left: calc((min(var(--titre-page), 100cqw) - min(var(--largeur-titres), 100cqw)) / 2 - var(--titre-decalage, 0px));
}
}
@media (min-width: 1400px) {
.page:not(.page-etroit, .page-colonne, .page-lecture, .page-large, .page-fil) { --titre-page: 1180px; }
}
@media (min-width: 1440px) {
.page.page-fil { --titre-page: 100cqw; }
}
@media (min-width: 1200px) {
.lecture:not(.lecture-sans-sommaire):has(> .sommaire) > .lecture-texte { --titre-decalage: 268px; }
.lecture:not(.lecture-sans-sommaire):has(> .sommaire) > .sommaire {
margin-top: calc(var(--titre-ligne-retour) + var(--titre-ecart-retour) + 64px);
}
}
.ech-creer-fichier-ligne { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ech-creer-fichier-ligne > .ech-creer-fichier { flex: 1 1 auto; min-width: 0; }
.ech-reduire { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.ech-reduire[hidden] { display: none; }
.ech-reduire-barre { flex: 1 1 auto; min-width: 0; height: 8px; accent-color: var(--accent); }
.ech-jamendo-choix { margin: 12px 0; padding: 0; border: 0; min-width: 0; }
.ech-jamendo-choix[hidden], .ech-jamendo-choisi[hidden] { display: none; }
.ech-jamendo-chercher { display: flex; gap: 8px; align-items: center; }
.ech-jamendo-chercher > .field { flex: 1 1 auto; min-width: 0; }
.ech-jamendo-resultats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ech-jamendo-resultats:empty { display: none; }
.ech-jamendo-morceau {
display: flex;
align-items: center;
gap: 8px;
padding: 6px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
flex-wrap: wrap;
}
.ech-jamendo-pochette {
width: 44px;
height: 44px;
flex: 0 0 44px;
border-radius: var(--rayon-s);
object-fit: cover;
background: var(--surface-2);
}
.ech-jamendo-texte { display: flex; flex-direction: column; flex: 1 1 120px; min-width: 0; }
.ech-jamendo-texte > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ech-jamendo-artiste { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ech-jamendo-choisi { margin-top: 8px; }
.ech-jamendo-debut { width: 100%; accent-color: var(--accent); }
.ech-jamendo-gestes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ech-jamendo {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin: 0;
font-size: 13px;
}
.ech-jamendo-titre { min-width: 0; overflow-wrap: anywhere; }
.ech-jamendo-via { font-size: 11px; color: var(--muted); }
.ech-diapo-jamendo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(260px, 70%); }
.ech-diapo-jamendo .ech-jamendo {
justify-content: flex-end;
padding: 4px 10px;
border-radius: var(--rayon-pilule);
background: var(--hm-voile);
color: var(--hm-texte);
font-size: 12px;
}
.ech-diapo-jamendo .ech-jamendo-via { color: inherit; opacity: .8; }
.app-page-titre { display: flex; align-items: center; gap: 10px; }
.app-page-titre .app-page-tuile { width: 40px; height: 40px; flex: none; border-radius: var(--rayon-s); }
.app-page-perso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.app-page-perso .lab { margin: 0; }
.app-page-perso .field { width: auto; flex: 1 1 160px; margin: 0; }
.app-page-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.app-page-onglets a {
padding: 6px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon-pilule);
color: var(--ink);
text-decoration: none;
}
.app-page-onglets a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); }
.app-page-recherche { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.app-page-recherche .field { width: auto; flex: 1 1 160px; margin: 0; }
.app-page-gestes { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
.app-page-geste { display: inline; margin: 0; }
.app-page-geste .est-aime { color: var(--accent); }
.app-page-image img { max-width: 100%; border-radius: var(--rayon); }
.app-page-com { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.app-page-com > p { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.app-page-com-photo { width: 32px; height: 32px; flex: none; }
.app-page-commenter { margin-top: 10px; }
.app-page-musique h2 + .mine { margin-top: -4px; }
.app-page-musique .tpl-item + h2 { margin-top: 18px; }
.app-page-musique .tpl-lecteur { margin-top: 10px; }
.app-page-musique .tpl-morceau-fin { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.renc-page-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.renc-page-carte { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); overflow: hidden; }
.renc-page-photo { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.renc-page-initiales { display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--sur-accent); }
.renc-page-corps { padding: 10px 12px 12px; }
.renc-page-corps h3 { margin: 0 0 4px; }
.renc-page-intentions { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.renc-page-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.renc-page-galerie img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon-s); }
.renc-page-vignette { margin: 0; }
.renc-page-choix-intentions { border: 0; padding: 0; margin: 10px 0; }
.renc-page-connexion { border-color: var(--accent); background: var(--accent-soft); }
.mur-sous-com { margin-left: 28px; }
.mur-com-image { max-width: min(240px, 100%); margin-top: 6px; border-radius: var(--rayon-s); }
.mur-repondre { margin: 2px 0 6px 42px; }
.mur-repondre > summary { cursor: pointer; font-size: .9em; }
.mur-publier .btn { margin-top: 8px; }
.mur-profil h2 { margin: 0 0 6px; }
.bs-page-masque { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--line); color: var(--ink); }
.bs-page-reactions { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bs-page-lieux { list-style: none; margin: 0; padding: 0; }
.bs-page-lieux li { padding: 6px 0; border-top: 1px solid var(--line); }
.bs-page-lieux li:first-child { border-top: 0; }
.corr-fils { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--line); }
.corr-fils-ligne {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 4px; border-bottom: 1px solid var(--line);
color: var(--ink); text-decoration: none;
}
.corr-fils-ligne:hover { background: var(--surface-2); }
.corr-fils-haut { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.corr-fils-haut .mine { margin-left: auto; }
.corr-fils-neuf b { color: var(--accent); }
.corr-fils-extrait { color: var(--muted); overflow-wrap: anywhere; }
.corr-fil-titre { margin: 0 0 4px; font-family: var(--font-title); }
.corr-lettre {
margin: 14px 0 0; padding: 12px 14px;
border: 1px solid var(--line); border-radius: var(--rayon);
background: var(--paper);
}
.corr-lettre-mienne { border-color: var(--line-strong); background: var(--surface); }
.corr-lettre-tete { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.corr-lettre-texte { font-family: var(--font-rp); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.corr-evenement { text-align: center; margin: 12px 0 0; }
.corr-destinataires { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cb-tete-retour { display: none; }
@media (max-width: 599px) {
.cb-fil-reduire,
.cb-fil-menu .carte-menu-liste .cb-fil-plein { display: none; }
html.chatbox-plein-ecran,
html.chatbox-plein-ecran body,
html.chatbox-plein-ecran .scroll { overflow: hidden; overscroll-behavior: none; }
html.chatbox-plein-ecran #tel-dock,
html.chatbox-plein-ecran .td-reduites { visibility: hidden; }
#chatbox.cb-plein-ecran {
top: var(--cb-vv-decalage, 0px);
right: 0;
bottom: auto;
left: 0;
z-index: 76;
height: var(--cb-vv-haut, 100dvh);
gap: 0;
align-items: stretch;
padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
background: var(--surface);
}
#chatbox.cb-plein-ecran .cb-bulle,
#chatbox.cb-plein-ecran .cb-fil-fermer { display: none; }
#chatbox.cb-plein-ecran .cb-panneau,
#chatbox.cb-plein-ecran .cb-fenetre {
flex: 1 1 auto;
width: 100%;
height: auto;
min-height: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
#chatbox.cb-plein-ecran .cb-fil-retour { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; margin-left: -6px; }
#chatbox.cb-plein-ecran .cb-liste { flex: 1 1 auto; min-height: 0; max-height: none; overscroll-behavior: contain; }
#chatbox.cb-plein-ecran .cb-nouvelle { flex: 1 1 auto; }
#chatbox.cb-plein-ecran .cb-nouvelle-liste { max-height: none; overscroll-behavior: contain; }
#chatbox.cb-plein-ecran .cb-fil-messages { overscroll-behavior: contain; }
#chatbox.cb-plein-ecran .cb-fil-menu .carte-menu-liste {
max-height: calc(var(--cb-vv-haut, 100dvh) - 96px);
overflow-y: auto;
}
#chatbox.cb-plein-ecran .cb-menu.cb-menu-feuille { max-height: calc(100% - 16px); overflow-y: auto; }
}
@media (hover: none) and (pointer: coarse) {
.emo-bouton { display: none !important; }
}
.radios-pastilles { min-width: 0; margin: 0; padding: 0; border: 0; }
.radios-pastilles > legend { padding: 0; }
.radios-pastilles-rang { display: flex; flex-wrap: wrap; gap: 6px; }
.radio-pastille { position: relative; display: inline-flex; margin: 0; }
.radio-pastille > input {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
opacity: 0; cursor: pointer; appearance: none;
}
.radio-pastille > span {
display: inline-flex; align-items: center; min-height: 36px; padding: 5px 14px;
border: 1px solid var(--line-strong); border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--ink);
font-size: 13.5px; line-height: 1.25; text-align: left; overflow-wrap: anywhere;
transition: background-color .12s, border-color .12s, color .12s;
}
.radio-pastille:hover > input:not(:checked):not(:disabled) + span { border-color: var(--ink); }
.radio-pastille > input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); font-weight: 600; }
.radio-pastille > input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.radio-pastille > input:disabled { cursor: not-allowed; }
.radio-pastille > input:disabled + span { opacity: .45; }
.radios-pastilles-petites .radio-pastille > span { min-height: 32px; padding: 4px 11px; font-size: 12.5px; }
.pf-public.radios-pastilles, .champ > .radios-pastilles { margin-top: 2px; }
.reglage:has(> .radios-pastilles) { flex-wrap: wrap; row-gap: 6px; padding: 8px 0; }
.reglage > .radios-pastilles { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.reglage > .radios-pastilles .radios-pastilles-rang { justify-content: flex-end; }
.ej-outils .radios-pastilles { flex: 0 1 auto; }
@media (prefers-reduced-motion: reduce) {
.radio-pastille > span { transition: none; }
}
.statuts-piste > [hidden] { display: none; }
.statut-saisie {
flex: 0 0 min(300px, calc(100vw - 40px));
scroll-snap-align: start;
}
.statut-saisie-form { display: grid; gap: 8px; margin: 0; }
.statut-saisie-bulle {
position: relative;
padding: 10px 12px 8px;
border: 1.5px solid var(--accent);
border-radius: 16px;
background: var(--surface-2);
}
.statut-saisie-bulle::after {
content: ''; position: absolute; left: 18px; bottom: -8px;
width: 12px; height: 12px;
background: var(--surface-2);
border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
transform: rotate(45deg);
}
.statut-saisie-champ {
display: block; width: 100%; min-height: 2.7em; margin: 0; padding: 0;
border: 0; background: none; color: var(--ink); resize: none;
font: inherit; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere;
}
.statut-saisie-champ:focus { outline: none; }
.statut-saisie-champ::placeholder { color: var(--faint); }
.statut-saisie-compte { display: block; text-align: right; color: var(--faint); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.statut-saisie-moi { display: flex; align-items: center; gap: 7px; margin: 2px 0 0 6px; }
.statut-saisie-moi b { font-size: 13px; }
.statut-saisie-dit { position: relative; display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.statut-saisie .radios-pastilles > legend { margin-bottom: 4px; font-size: 12.5px; }
.statut-saisie-erreur { margin: 0; color: var(--warn); font-size: 13px; }
.statut-saisie-erreur[hidden] { display: none; }
.statut-saisie-actes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
.statut-saisie-effacer { margin-right: auto; }
.statut-saisie-effacer[hidden] { display: none; }
.acc-tel { display: none; }
@media (max-width: 599px) {
.accueil > .accueil-cote { display: none; }
.acc-tel { display: grid; gap: 8px; margin: 0 0 8px; }
.acc-tel-a-toi {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-l, 14px);
}
.acc-tel-a-toi > summary {
display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
list-style: none; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink);
}
.acc-tel-a-toi > summary::-webkit-details-marker { display: none; }
.acc-tel-a-toi > summary .ico { width: 18px; height: 18px; color: var(--accent-ink); }
.acc-tel-a-toi > summary > span:first-of-type { flex: 1; min-width: 0; }
.acc-tel-a-toi .liste-chevron {
flex: none; width: 8px; height: 8px; margin: 0 3px 3px 2px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg); transition: transform .15s;
}
.acc-tel-a-toi[open] .liste-chevron { margin: 3px 3px 0 2px; transform: rotate(-135deg); }
.acc-tel-a-toi > ul, .acc-tel-a-toi > .bloc-cote-lien { margin: 0 14px; }
.acc-tel-a-toi > .bloc-cote-lien { display: inline-block; margin-bottom: 10px; }
.acc-tel-a-toi > ul { padding-bottom: 6px; }
.acc-tel-en-ligne { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-l, 14px); }
.acc-tel-visages {
display: flex; gap: 12px; margin: 0; padding: 10px 14px 8px; list-style: none;
overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.acc-tel-visages::-webkit-scrollbar { display: none; }
.acc-tel-visages > li { flex: none; scroll-snap-align: start; }
.acc-tel-visages form { margin: 0; }
.acc-tel-visage {
display: grid; justify-items: center; gap: 4px; width: 52px; padding: 0;
border: 0; background: none; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer;
}
.acc-tel-visage .portrait {
display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
object-fit: cover; background: var(--accent); color: var(--sur-accent); font-size: 13px; font-weight: 600;
}
.acc-tel-plus .portrait { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
.acc-tel-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.acc-tel-visage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
.acc-tel-a-toi .liste-chevron { transition: none; }
}
.statut-anniv { flex: 0 0 auto; display: grid; place-items: center; min-width: 76px; border-color: var(--anniv-contour); }
.statut-anniv .statut-qui { flex-direction: column; gap: 4px; margin: 0; }
.statut-anniv-cadeau { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--anniv-contour); background: var(--surface); }
.statut-anniv-cadeau .ico { width: 20px; height: 20px; }
.statut-anniv.statut-actif { border-color: var(--anniv-contour); }
.statut-anniversaires { display: block; }
.statut-anniversaires[hidden] { display: none; }
.statut-anniversaires-titre { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.statut-anniversaires-titre .ico { width: 18px; height: 18px; }
.statut-anniversaires-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.statut-anniversaires-liste > li { display: flex; align-items: center; gap: 10px; }
.statut-anniversaires-liste form { margin: 0 0 0 auto; }
.statut-anniversaires-qui { display: grid; min-width: 0; flex: 1; }
.statut-anniversaires-qui a { font-weight: 600; color: var(--ink); text-decoration: none; }
@media (min-width: 600px) {
.statut-anniv, .statut-anniversaires { display: none; }
}
.tri-pastille {
display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 6px; border-radius: 10px;
font-size: 11px; font-weight: 700; line-height: 1; color: var(--sur-pastille-tri); background: var(--muted);
}
.tri-pastille .ico { width: 13px; height: 13px; }
.tri-pastille-retard { background: var(--tri-en-retard); }
.tri-pastille-presque { background: var(--tri-presque); }
.tri-pastille-ok { background: var(--en-ligne); }
.tri-pastille-nouveau { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-strong); }
.tri-pastilles { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 4px; }
.tri-pastille-ligne { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.tri-pastille-nom { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueurs-barre-en-ligne {
display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 7px 14px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--line); color: var(--en-ligne-texte); font-weight: 600; text-decoration: none;
}
.dossiers-historique-recherche { display: flex; gap: 8px; margin: 14px 0 10px; }
.dossiers-historique-recherche .field { flex: 1; min-width: 0; }
.dossiers-historique { display: grid; gap: 12px; margin: 14px 0; padding: 0; list-style: none; }
.dossier-traite-qui { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dossier-supprime { color: var(--muted); font-style: italic; }
.dossier-traite-reponses > summary { cursor: pointer; margin: 10px 0 4px; font-weight: 600; }
@media (max-width: 599px) {
.acc-tel-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.acc-tel-sep { color: var(--muted); }
.acc-tel-tri { margin: 0 14px; padding: 8px 0 10px; border-top: 1px solid var(--line); }
.acc-tel-a-toi > ul + .acc-tel-tri, .acc-tel-a-toi > .bloc-cote-lien + .acc-tel-tri { margin-top: 2px; }
.acc-tel-tri-titre { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; }
.acc-tel-tri-titre .ico { width: 16px; height: 16px; }
.acc-tel-retards { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acc-tel-retard { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.acc-tel-retard-visage { position: relative; flex: none; }
.acc-tel-retard-visage .portrait {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
object-fit: cover; background: var(--accent); color: var(--sur-accent); font-size: 13px; font-weight: 600;
}
.acc-tel-retard-visage .tri-pastille { position: absolute; right: -10px; bottom: -4px; box-shadow: 0 0 0 2px var(--surface); }
.acc-tel-retard-dit { min-width: 0; font-size: 13px; line-height: 1.35; }
.acc-tel-en-ligne { display: flex; align-items: center; gap: 4px; padding-left: 12px; }
.acc-tel-en-ligne-titre {
flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
color: var(--muted); text-decoration: none; white-space: nowrap;
}
.acc-tel-en-ligne-titre b { color: var(--ink); }
.acc-tel-en-ligne .acc-tel-visages { flex: 1; min-width: 0; gap: 8px; padding: 8px 12px 8px 8px; }
.acc-tel-en-ligne .acc-tel-visage { width: auto; }
.acc-tel-en-ligne .acc-tel-visage .portrait { width: 34px; height: 34px; font-size: 12px; }
}
.a-toi { max-width: 680px; }
.a-toi-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.a-toi-filtres::-webkit-scrollbar { display: none; }
.a-toi-filtres .chip { flex: none; }
.a-toi-cartes { display: grid; gap: 12px; }
.a-toi-tete { align-items: center; }
.a-toi-visage { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; font-size: 14px; }
.a-toi-ou { color: var(--faint); font-size: 12.5px; overflow-wrap: anywhere; }
.etiq.a-toi-attente {
flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn);
}
.a-toi-attente .ico { width: 13px; height: 13px; }
.a-toi-dernier { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.a-toi-dernier-visage { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; font-size: 10.5px; }
.a-toi-dernier-dit { min-width: 0; }
.a-toi-dernier-qui { margin: 0 0 2px; color: var(--faint); font-size: 12.5px; }
.a-toi-dernier-qui b { color: var(--ink); font-weight: 600; }
.a-toi-dernier-texte {
margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.a-toi-gestes { display: flex; gap: 8px; margin-top: 12px; }
.a-toi-gestes .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.a-toi-repondre { flex: 1; }
.a-toi-lire { flex: none; }
@media (max-width: 380px) {
.a-toi-tete { flex-wrap: wrap; }
.etiq.a-toi-attente { align-self: center; }
}
.rech-cartes { display: grid; gap: 10px; }
.rech-carte {
display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
color: var(--ink); text-decoration: none;
}
.rech-carte:hover, .rech-carte:focus-visible { border-color: var(--line-strong); }
.rech-carte-visuel { flex: none; display: grid; place-items: center; width: 52px; height: 52px; }
.rech-carte-visuel .rech-carte-image { display: block; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.rech-carte-visuel .rech-carte-face { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 15px; color: var(--sur-accent); }
.rech-carte-visuel .rech-carte-ecu { width: 44px; height: 44px; border-radius: 12px; font-size: 14px; }
.rech-carte-visuel .pub-avatar { width: 48px; height: 48px; }
.rech-carte-corps { display: grid; gap: 3px; min-width: 0; flex: 1; }
.rech-carte-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rech-carte-ligne { color: var(--faint); font-size: 12.5px; overflow-wrap: anywhere; }
.rech-carte-titre { font-weight: 650; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.rech-carte .rech-extrait {
display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rech-jeu .rech-cartes { margin-top: 4px; }
.alerte-visuel { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; }
.alerte-visuel .alerte-visage { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-size: 13px; color: var(--sur-accent); }
.alerte-visuel .alerte-ecu {
position: absolute; right: -4px; bottom: -4px; width: 16px !important; height: 16px !important; border-radius: 5px;
font-size: 7px !important; box-shadow: 0 0 0 2px var(--surface);
}
.alerte-vignette { flex: none; align-self: center; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.alertes-liste .alerte-riche .alerte-visuel,
.alertes-liste .alerte-riche .alerte-visuel .alerte-visage { width: 44px; height: 44px; }
.panneau-alertes-liste .alerte-vignette { display: none; }
.panneau-alertes-liste .alerte-visuel,
.panneau-alertes-liste .alerte-visuel .alerte-visage { width: 34px; height: 34px; }
.alerte-carte { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px; }
.alerte-carte > .pub-avatar, .alerte-carte > .alerte-carte-ecu { flex: none; }
.alerte-carte-ecu { width: 38px; height: 38px; border-radius: 10px; font-size: 13px; }
.alerte-carte-corps { flex: 1; min-width: 0; }
.alerte-carte-corps .ident-ligne { padding: 0; border: 0; }
.alerte-carte > .alerte-vignette { width: 48px; height: 48px; }
@media (max-width: 480px) {
.alerte-carte { align-items: flex-start; }
.alerte-carte-corps .ident-ligne-actes { width: 100%; }
.alerte-carte-corps .ident-ligne-actes form { flex: 1; }
.alerte-carte-corps .ident-ligne-actes .btn { width: 100%; min-height: 40px; }
.alerte-carte > .alerte-vignette { display: none; }
}
.fic-cartes { margin-top: 12px; gap: 14px; }
.fic-carte-gestes { display: flex; gap: 8px; margin-top: 12px; }
.fic-carte-gestes .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.fic-carte-gestes .fic-ecrire-suite { flex: 1; }
.pub-compte.fic-ecrire-suite { color: var(--accent); font-weight: 600; }
.lieu-scenes-fil, .salon-anciens-fils, .membres-cartes, .jac-cartes,
.brouillons-cartes, .annonces-tiennes { display: grid; gap: 12px; margin-top: 10px; }
.membre-carte-tete { display: flex; align-items: center; gap: 12px; min-width: 0; }
.membre-carte-photo { flex: none; width: 52px; height: 52px; }
.membre-carte-qui { min-width: 0; }
.membre-carte-nom { margin: 0; color: var(--ink); font-size: 15.5px; overflow-wrap: anywhere; }
.membre-carte-meta { margin: 2px 0 0; color: var(--faint); font-size: 12.5px; }
.membre-carte-persos {
list-style: none; margin: 10px 0 0; padding: 0;
display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.membre-carte-persos::-webkit-scrollbar { display: none; }
.membre-carte-perso {
display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px;
color: var(--muted); text-decoration: none; font-size: 12px; text-align: center;
}
.membre-carte-perso-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; font-size: 15px; }
.membre-carte-perso-nom {
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.membre-carte-perso:hover .membre-carte-perso-nom { color: var(--ink); }
.membre-carte-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.membre-carte-gestes form { margin: 0; }
.membre-carte-gestes .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
.membre-carte-signaler { margin-left: auto; color: var(--faint); font-size: 12.5px; }
.co-creation-liste { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.co-creation-membre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.co-creation-membre form { margin: 0; }
.co-creation-nom { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.co-creation-nommer { margin-top: 14px; }
.jac-cartes .pub-gestes, .brouillons-cartes .pub-gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.jac-cartes .pub-gestes form, .brouillons-cartes .pub-gestes form { margin: 0; }
.jac-cartes .pub-gestes .btn, .brouillons-cartes .pub-gestes .btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
}
.jac-carte-par { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.jac-carte-par .jac-carte-qui { flex: none; }
.brouillon-extrait {
color: var(--muted); overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.annonces-tiennes .ann-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.annonces-tiennes .ann-outils form { margin: 0; }
@media (max-width: 380px) {
.membre-carte-signaler { margin-left: 0; flex-basis: 100%; }
}
.joueur-carte .portrait { border-radius: 50%; }
@media (min-width: 600px) {
.joueurs-grille { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 1fr; gap: 14px; }
.joueur-bloc { display: flex; flex-direction: column; min-width: 0; }
.joueur-bloc > .joueur-carte {
flex: 1;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 0;
padding: 18px 14px 10px;
text-align: center;
}
.joueur-carte .portrait { width: 72px; height: 72px; font-size: 22px; }
.joueur-carte-corps { width: 100%; gap: 4px; justify-items: center; }
.joueur-carte-tete { flex-wrap: nowrap; justify-content: center; max-width: 100%; min-width: 0; }
.joueur-carte-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-carte-tete .etiq { flex: none; }
.joueur-carte-extrait { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-bloc > .joueur-carte-ecrire { display: flex; justify-content: center; margin: 0; padding: 0 14px 16px; }
}
@media (max-width: 599.98px) {
.joueurs-grille { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 16px 8px; }
.joueur-bloc,
.joueur-bloc:hover { border: 0; border-radius: 0; background: none; box-shadow: none; }
.joueur-bloc > .joueur-carte-ecrire { display: none; }
.joueur-bloc > .joueur-carte {
flex-direction: column;
align-items: center;
gap: 7px;
min-width: 0;
padding: 4px 0;
text-align: center;
}
.joueur-carte .portrait { width: 64px; height: 64px; font-size: 20px; }
.joueur-carte-corps { width: 100%; }
.joueur-carte-corps > :not(.joueur-carte-tete):not(.joueur-carte-etat),
.joueur-carte-tete > :not(.joueur-carte-nom) { display: none; }
.joueur-carte-tete { display: block; }
.joueur-carte-nom {
display: block;
overflow: hidden;
font-size: 13px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.inv-filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.inv-filtre {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 30px;
padding: 4px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--ink);
font-size: 13px;
text-decoration: none;
}
.inv-filtre small { color: var(--muted); font-size: 11px; }
.inv-filtre:hover { border-color: var(--line-strong); }
.inv-filtre.actif { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.inv-filtre.actif small { color: var(--accent-ink); }
.inv-pastilles { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.inv-pastille,
.inv-etat {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 1px 8px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface-2);
color: var(--muted);
font-size: 11.5px;
line-height: 1.6;
}
.inv-pastille .ico { width: 13px; height: 13px; }
.inv-etat { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink); }
.inv-etat-neuf { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.inv-etat-bon { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.inv-etat-use { background: var(--surface-2); }
.inv-etat-abime,
.inv-etat-endommage { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); background: var(--warn-soft); color: var(--warn); }
.inv-etat-casse { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.inv-pastille-systeme { border-color: var(--accent); color: var(--accent-ink); }
.inv-historique { margin-top: 8px; }
.inv-historique summary { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-ink); font-size: 13px; cursor: pointer; }
.inv-historique summary .ico { width: 14px; height: 14px; }
.inv-historique-liste { position: relative; margin: 8px 0 0; padding: 0 0 0 18px; list-style: none; }
.inv-historique-liste::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 5px; width: 1px; background: var(--line); }
.inv-ev { position: relative; display: grid; gap: 1px; margin: 0 0 9px; font-size: 13px; line-height: 1.45; }
.inv-ev::before {
content: "";
position: absolute;
top: 5px;
left: -17px;
width: 9px;
height: 9px;
border: 2px solid var(--line-strong);
border-radius: 50%;
background: var(--surface);
}
.inv-ev-cree::before,
.inv-ev-donne::before,
.inv-ev-distribue::before { border-color: var(--accent); }
.inv-ev small { font-size: 11.5px; }
.inv-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 480px) {
.inv-champs { grid-template-columns: 1fr; }
}
@supports selector(:has(*)) {
.inv-cat-autre { display: none; }
.inv-champ-cat:has(input[name="categorie"][value="__autre__"]:checked) .inv-cat-autre { display: block; }
}
.inv-offrir {
--swift-orange: var(--accent-ink);
--swift-doux: var(--accent-soft);
--swift-texte: var(--ink);
--swift-texte-3: var(--muted);
--swift-filet: var(--line);
--swift-filet-doux: var(--line);
--swift-fond-2: var(--surface);
--swift-ombre: color-mix(in srgb, var(--ink) 18%, transparent);
}
.inv-offrir .liv-recherche .tel-champ {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: var(--rayon-s);
background: var(--surface);
color: var(--ink);
font: inherit;
}
.carnet-entete { display: flex; align-items: center; gap: 8px; position: relative; }
.carnet-entete h1 { display: flex; align-items: center; gap: 8px; margin: 0; }
.carnet-entete + .info-bulle { margin-bottom: 14px; }
.carnet { display: grid; gap: 18px; margin-top: 18px; }
.carnet-page {
--carnet-papier: var(--swift-papier);
--carnet-ligne: var(--journal-ligne);
--carnet-marge: var(--journal-marge);
--carnet-encre: var(--swift-encre);
--carnet-tache: var(--journal-tache);
position: relative;
padding: 14px 16px 16px 40px;
border: 1px solid var(--line);
border-top: 1px solid var(--line);
border-radius: var(--rayon);
background:
linear-gradient(to right, transparent 28px, var(--carnet-marge) 28px 29px, transparent 29px),
linear-gradient(180deg, var(--swift-papier), var(--swift-papier-2));
box-shadow: 0 2px 8px var(--swift-ombre);
color: var(--carnet-encre);
overflow: hidden;
}
.carnet-page.journal-prive { border-left: 3px solid var(--line-strong); }
.carnet-page .meta,
.carnet-page .etiq,
.carnet-page .journal-outils,
.carnet-page details,
.carnet-page .signaler,
.carnet-signe { font-family: var(--font-ui); font-size: 13px; }
.carnet-page-titre { font-size: 1.15em; }
.carnet-signe { display: block; margin-top: 2px; color: var(--swift-encre-2); font-style: italic; }
.carnet-page[class*='liv-police-'] .carnet-texte { font-family: inherit; font-size: 1.25em; }
.carnet-page .meta, .carnet-page .mine { color: var(--swift-encre-2); }
.carnet-etiquettes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.carnet-papier { position: relative; }
.carnet-texte {
line-height: 1.7;
background: repeating-linear-gradient(to bottom, transparent 0 calc(1.7em - 1px), var(--carnet-ligne) calc(1.7em - 1px) 1.7em);
color: var(--carnet-encre);
}
.carnet-papier .pub-media img { border-radius: var(--rayon-s); }
.carnet-page-rature .carnet-papier::after {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(-3deg, transparent 0 9px, var(--carnet-encre) 9px 12px);
opacity: .78;
pointer-events: none;
transition: opacity .3s;
}
.carnet-page-rature .carnet-papier:hover::after { opacity: .3; }
.carnet-page-dechire { padding-bottom: 40px; }
.carnet-page-dechire .carnet-texte,
.carnet-page-dechire .pub-media { opacity: .14; filter: blur(1.5px); user-select: none; }
.carnet-page-dechire::after {
content: '';
position: absolute;
left: -2px;
right: -2px;
bottom: -2px;
height: 36px;
background: var(--paper);
clip-path: polygon(0 100%, 0 45%, 4% 75%, 9% 30%, 15% 70%, 21% 25%, 27% 72%, 33% 35%, 39% 70%, 45% 28%, 51% 72%,
57% 30%, 63% 75%, 69% 25%, 75% 70%, 81% 35%, 87% 75%, 93% 30%, 100% 60%, 100% 100%);
}
.carnet-dechire-etiq {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-7deg);
padding: 4px 14px;
border: 2px dashed var(--carnet-encre);
border-radius: 3px;
background: var(--carnet-papier);
color: var(--carnet-encre);
font-family: 'Caveat', var(--font-rp);
font-size: 26px;
white-space: nowrap;
}
.carnet-page-tache .carnet-papier::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80px 60px at 24% 34%, var(--carnet-tache) 0%, transparent 72%),
radial-gradient(ellipse 52px 40px at 72% 62%, var(--carnet-tache) 0%, transparent 76%),
radial-gradient(ellipse 34px 28px at 46% 82%, var(--carnet-tache) 0%, transparent 70%);
pointer-events: none;
}
.carnet-reglages { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.carnet-reglages > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.carnet-reglages-corps { display: grid; gap: 8px; margin-top: 10px; }
.carnet-polices .radio-pastille [class^="liv-police-"] { font-size: 1.15em; }
.carnet-actif { display: inline-flex; align-items: center; gap: 6px; }
.carnet-demande { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.carnet-demande:first-of-type { border-top: 0; }
.carnet-demande p { margin: 0; }
.carnet-demande .carnet-page { margin: 0; }
.carnet-ecrire { margin-bottom: 8px; }
.carnet-image-garde { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 13px; }
.carnet-image-garde img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--rayon-s); }
@media (max-width: 419px) {
.carnet-page { padding-left: 30px; }
.carnet-page { background:
linear-gradient(to right, transparent 20px, var(--carnet-marge) 20px 21px, transparent 21px),
var(--carnet-papier); }
}
@media (prefers-reduced-motion: reduce) {
.carnet-page-rature .carnet-papier::after { transition: none; }
}
.frise-tete { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.frise-photo { width: 22px; height: 22px; font-size: 9px; }
.frise-recit { display: block; margin-top: 4px; white-space: pre-line; }
.frise-image {
display: block;
width: 100%;
max-width: 420px;
aspect-ratio: 2 / 1;
object-fit: cover;
margin-top: 8px;
border-radius: var(--rayon-s);
}
.frise-outils { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 6px; }
.frise-outils form { margin: 0; }
.frise-modifier { flex: 1 1 100%; }
.frise-modifier[open] > summary { margin-bottom: 8px; }
.frise-lore-form { display: grid; gap: 6px; }
.chrono-naissance > .chrono-corps .chrono-titre { font-weight: 600; }
.frise-en-mots h2 { display: flex; align-items: center; gap: 6px; }
.equipe-retrait form { margin-top: 10px; }
.tel-gestion-liste { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.tel-gestion-membre { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.tel-gestion-membre form { margin: 0; }
.tel-gestion-membre .tel-lien { margin-top: 0; }
.tel-gestion-nom { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.tel-gestion-role, .td-membre-role { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.tel-lien-danger { color: var(--warn); }
.tel-details-bloc > .tel-lien { display: inline-flex; align-items: center; gap: 6px; }
.td-det-ligne-geste { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.td-det-ligne-geste .tel-lien { margin-top: 0; }
.admin-pieces-sms { display: grid; gap: 10px; margin-top: 12px; }
.esp-page { display: grid; gap: 16px; }
.esp-mur { min-width: 0; order: 1; }
.esp-droite { order: 2; min-width: 0; }
.esp-rp { margin-left: 8px; }
.esp-carte {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--rayon-l);
padding: 14px;
margin-bottom: 14px;
}
.esp-carte-titre {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--muted);
}
.esp-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.esp-ligne { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: inherit; text-decoration: none; min-width: 0; }
.esp-ligne-nom { display: flex; flex-direction: column; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.esp-ligne-nom small, .esp-ligne small { color: var(--muted); font-size: 12px; }
.esp-applis { display: flex; flex-wrap: wrap; gap: 6px; }
.esp-appli {
display: inline-flex; align-items: center; padding: 6px 10px;
border-radius: var(--rayon-s); background: var(--surface-2);
color: inherit; font-size: 13px; text-decoration: none;
}
.esp-visage {
width: 40px; height: 40px; flex: none; border-radius: 50%;
display: inline-grid; place-items: center; object-fit: cover;
font-size: 14px; font-weight: 700; color: var(--sur-accent);
}
.esp-visage-s { width: 30px; height: 30px; font-size: 11px; }
.esp-visage-l { width: 72px; height: 72px; font-size: 24px; }
.esp-moi {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 10px 12px; margin-bottom: 12px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-l);
}
.esp-moi-nom { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.esp-moi-nom small { color: var(--muted); font-size: 12px; }
.esp-changer { flex: 1 1 100%; }
.esp-moi .esp-changer { flex: 0 0 auto; margin-left: auto; }
.esp-moi .esp-changer[open] { flex: 1 1 100%; }
.esp-changer > summary { cursor: pointer; list-style: none; }
.esp-changer > summary::-webkit-details-marker { display: none; }
.esp-changer-lien { color: var(--accent); font-size: 13px; }
.esp-changer-corps { display: grid; gap: 12px; margin-top: 10px; }
.esp-changer-form { display: grid; gap: 6px; margin: 0; }
.esp-moi-grand { text-align: center; display: grid; justify-items: center; gap: 8px; }
.esp-moi-grand .esp-moi-nom { align-items: center; }
.esp-moi-grand .esp-changer { text-align: left; }
.esp-ecrire { margin-bottom: 12px; }
.esp-ecrire-tete { display: flex; gap: 10px; align-items: flex-start; }
.esp-ecrire-tete .comp-zone { flex: 1 1 auto; min-width: 0; }
.esp-sortes { margin-bottom: 10px; }
.esp-scene-options + .esp-ecrire-tete { margin-top: 10px; }
.esp-ecrire > :is(.comp-volets, .comp-barre) { margin-left: 40px; }
.esp-ecrire > .comp-volets { margin-top: 10px; }
.comp-barre > .sensible { display: contents; }
.comp-barre > .sensible > .sensible-ligne { margin-left: 6px; min-height: 38px; font-size: 13px; }
.comp-barre > .sensible > .sensible-liste { order: 1; flex: 1 0 100%; margin-top: 4px; }
.comp-barre:has(> .sensible) > .comp-barre-droite { order: 2; }
.comp-barre:has(> .sensible .interrupteur:checked) > .comp-barre-droite { margin-top: 10px; margin-left: auto; }
.comp-barre > .adultes-bascule { margin: 0 0 0 6px; }
.comp-barre > .adultes-bascule > .sensible-ligne { min-height: 38px; font-size: 13px; }
.esp-scene-options { display: grid; gap: 6px; margin-top: 10px; }
.esp-ecrire:has(.esp-sortes input[value="scene"]:not(:checked)) .esp-scene-options { display: none; }
.esp-modifier { margin: 10px 0 0; }
.esp-modifier > .esp-scene-options { margin-top: 0; }
.esp-modifier .comp-gardees { margin-bottom: 8px; }
.esp-modifier-actes { margin-top: 6px; }
.esp-prevenir { margin-top: 10px; }
.esp-prevenir > summary { cursor: pointer; }
.esp-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.esp-filtres::-webkit-scrollbar { display: none; }
.esp-filtres .chip { white-space: nowrap; }
.esp-etiq { color: var(--accent); background: var(--accent-soft); }
.esp-etiq-scene { color: var(--warn); background: var(--warn-soft); }
.esp-texte { overflow-wrap: anywhere; }
.esp-bilan { margin: 8px 0 0; font-size: 13px; }
.esp-geste { display: inline; margin: 0; }
.esp-geste button { cursor: pointer; font-family: inherit; }
.esp-geste .esp-rejoindre { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.pub-espace .pub-gestes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.esp-demandes {
margin-top: 10px; padding: 10px 12px;
border-radius: var(--rayon-s); background: var(--warn-soft); color: var(--ink);
}
.esp-demandes-titre { margin: 0 0 8px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.esp-demandes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.esp-demande { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.esp-demande-nom { font-weight: 600; font-size: 14px; }
.esp-joueur { font-weight: 400; color: var(--muted); font-size: .92em; }
.esp-joueur a { color: inherit; }
.pub-ou .esp-joueur a { text-decoration: none; }
.pub-ou .esp-joueur a:hover { text-decoration: underline; }
.pub-etiquettes .scene-avertit-un { display: inline-flex; align-items: center; gap: 4px; }
.pub-etiquettes .scene-avertit-un .ico { width: 13px; height: 13px; }
.esp-retiree { border: 1px dashed var(--line); opacity: .9; }
.esp-demande-mot { flex: 1 1 100%; font-size: 13px; }
.esp-demande-actes { display: inline-flex; gap: 6px; margin-left: auto; }
.esp-suite { text-align: center; margin: 14px 0; }
.esp-retour { margin: 0 0 10px; }
.esp-retour a { display: inline-flex; align-items: center; gap: 6px; }
.esp-seule { max-width: 680px; }
@media (min-width: 1440px) {
.esp-page { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.esp-page > .esp-mur { width: 100%; max-width: 760px; justify-self: center; }
.esp-mur, .esp-droite { order: 0; }
.esp-droite { position: sticky; top: 16px; }
.esp-moi-ligne { display: none; }
}
.fic-page .up-onglets-page { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.fic-page .up-onglets-page::-webkit-scrollbar { display: none; }
.fic-page .up-onglets-page a { white-space: nowrap; flex: none; }
.ident-personnage { --t: var(--fic-perso); }
.ident-lieu { --t: var(--fic-lieu); }
.prose .ident-personnage, .prose .ident-lieu {
background: none; padding: 0; white-space: normal; color: var(--t);
text-decoration: underline dotted; text-underline-offset: 3px;
}
.fic-pm-spoiler { position: relative; border-radius: var(--rayon); overflow: hidden; }
.fic-pm-spoiler-case { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fic-pm-flou { filter: blur(6px); user-select: none; pointer-events: none; }
.fic-pm-voile {
position: absolute; inset: 0; display: grid; place-items: center; gap: 4px; padding: 6px;
background: var(--fic-voile); color: var(--sur-fic-voile); font-size: 12.5px; text-align: center; cursor: pointer;
}
.fic-pm-spoiler-case:focus-visible + .fic-pm-voile { outline: 2px solid var(--accent); outline-offset: -2px; }
.fic-pm-spoiler-case:checked + .fic-pm-voile { display: none; }
.fic-pm-spoiler-case:checked ~ .fic-pm-flou { filter: none; user-select: auto; pointer-events: auto; }
.fic-pm-verrou { position: relative; min-height: 64px; border-radius: var(--rayon); overflow: hidden; background: var(--surface-2); }
.fic-pm-verrou-forme {
position: absolute; inset: 10px; border-radius: var(--rayon-s); filter: blur(4px);
background: linear-gradient(90deg, var(--line) 0 40%, transparent 40% 48%, var(--line) 48% 86%, transparent 86%);
}
.fic-pm-verrou .fic-pm-voile { cursor: default; display: flex; align-items: center; justify-content: center; }
.fic-pm-carte-fermee { min-height: 180px; }
.fic-pm-page-fermee { min-height: 120px; margin-bottom: 8px; }
.fic-pm-image-fermee { aspect-ratio: 1; min-height: 0; }
.fic-pm-mentionne { position: relative; }
.fic-pm-mention { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; }
.fic-pm-sorte { font-size: 10.5px; color: var(--fic-perso); background: color-mix(in srgb, var(--fic-perso) 14%, transparent); }
.fic-pm-sorte-fiction { color: var(--accent); background: var(--accent-soft); }
.fic-pm-lieux { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0 8px; }
.fic-pm-lieu-carte a {
display: grid; text-decoration: none; color: inherit; background: var(--surface);
border: 1px solid var(--line); border-radius: var(--rayon-l); overflow: hidden;
}
.fic-pm-lieu-image { display: block; width: 100%; aspect-ratio: 2; object-fit: cover; background: var(--surface-2); }
.fic-pm-lieu-vide { display: grid; place-items: center; color: var(--fic-lieu); }
.fic-pm-lieu-corps { display: grid; gap: 2px; padding: 10px 12px; }
.fic-pm-lieu-corps small { color: var(--muted); font-size: 12.5px; }
@media (min-width: 640px) { .fic-pm-lieux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fic-pm-tete { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.fic-pm-portrait { width: 72px; height: 96px; flex: none; border-radius: var(--rayon); object-fit: cover; }
.fic-pm-portrait-vide, .fic-pm-rond {
display: grid; place-items: center; font-weight: 700; font-size: 20px;
background: var(--couleur-univers, var(--accent)); color: var(--sur-accent);
}
.fic-pm-nom { font-family: var(--font-title); margin: 0; }
.fic-pm-presentation { margin: 8px 0 0; line-height: 1.6; }
.fic-pm-lieu-banniere { display: block; width: 100%; aspect-ratio: 2; object-fit: cover; border-radius: var(--rayon); margin-bottom: 10px; }
.fic-pm-fiche .up-bloc h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fic-pm-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fic-pm-lignes > li { display: flex; align-items: center; gap: 6px; }
.fic-pm-ligne-boite { flex: 1; min-width: 0; }
.fic-pm-ligne { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: inherit; text-decoration: none; font-size: 14px; min-width: 0; }
.fic-pm-ligne span { display: grid; min-width: 0; }
.fic-pm-ligne small { color: var(--muted); font-size: 12.5px; }
.fic-pm-ligne:hover b { text-decoration: underline; }
.fic-pm-mini { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
.fic-pm-mini-vide {
display: grid; place-items: center; font-size: 11px; font-weight: 700;
background: var(--couleur-univers, var(--accent)); color: var(--sur-accent);
}
.fic-pm-mini-lieu { border-radius: 6px; }
.fic-pm-mini-lieu.fic-pm-mini-vide { background: color-mix(in srgb, var(--fic-lieu) 20%, var(--surface)); color: var(--fic-lieu); }
.fic-pm-chrono { list-style: none; margin: 8px 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 4px; }
.fic-pm-moment { position: relative; padding: 4px 0 8px; font-size: 14px; }
.fic-pm-moment::before {
content: ""; position: absolute; left: -20px; top: 10px; width: 10px; height: 10px;
border-radius: 50%; background: var(--accent);
}
.fic-pm-quand { display: block; color: var(--muted); font-size: 12px; }
.fic-pm-moment p { margin: 4px 0 0; color: var(--muted); }
.fic-pm-album { margin: 14px 0; }
.fic-pm-album-titre { font-size: 15px; margin: 0 0 6px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.fic-pm-outils { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 10px; }
.fic-pm-geste { display: inline; margin: 0; }
.fic-pm-volet { margin-top: 12px; }
.fic-pm-volet > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.fic-pm-volet > summary::-webkit-details-marker { display: none; }
.fic-pm-volet-corps { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.fic-pm-outils .fic-pm-volet { flex: 1 1 100%; margin-top: 0; }
.fic-pm-retirer { margin-top: 6px; }
.fic-pm-retirer ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.fic-pm-retirer li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fic-pm-form-bas { margin: 12px 0 0; }
.fic-pm-couleur { height: 44px; padding: 4px; }
.fic-pm-note { margin-top: 14px; }
.fic-pm-copier { margin-top: 10px; gap: 6px; align-items: center; }
.fic-pm-copier .fic-pm-form-bas { margin: 0; }
.theme-polices { margin: 14px 0 0; }
.fic-pm-colonne { display: none; }
@media (min-width: 1100px) {
.page:has(.fic-lecture-avec-colonne) { max-width: min(1220px, 100%); }
.fic-lecture-avec-colonne { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.fic-pm-colonne { display: block; position: sticky; top: 16px; }
.fic-pm-colonne-volet > summary {
list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
color: var(--muted); font-size: 13px; margin-bottom: 8px;
}
.fic-pm-colonne-volet > summary::-webkit-details-marker { display: none; }
.fic-pm-colonne .up-bloc { padding: 12px; margin-bottom: 12px; }
.fic-pm-colonne .up-bloc h2 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
}
.td-qui-nom.td-qui-pseudo { font-size: 21px; letter-spacing: .01em; }
#tel-dock.td-grand .td-qui-nom.td-qui-pseudo { font-size: 24px; }
.fiche-pseudo-applis { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.fiche-pseudo-applis b { color: inherit; font-weight: 600; }
img[data-image-perdue] { visibility: hidden; }
.scene-carte-couverture:has(> img[data-image-perdue]) { display: none; }
.pf-statut-mien { margin: 6px 0 0; max-width: 420px; }
.pf-statut-mien > [hidden] { display: none; }
.pf-statut-ecrire, .pf-statut-pose {
display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
padding: 6px 12px; border-radius: 16px; font-size: 14px; text-decoration: none;
}
.pf-statut-ecrire { color: var(--muted); border: 1px dashed var(--line-strong); }
.pf-statut-ecrire:hover, .pf-statut-ecrire:focus-visible { color: var(--ink); border-color: var(--accent); }
.pf-statut-pose { color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); }
.pf-statut-pose-texte { overflow-wrap: anywhere; }
.pf-statut-crayon { flex: none; display: inline-flex; color: var(--faint); }
.pf-statut-pose:hover .pf-statut-crayon, .pf-statut-pose:focus-visible .pf-statut-crayon { color: var(--accent); }
.pf-statut-mien .statut-saisie { margin-top: 8px; }
.fp-tete .pf-photo.fp-photo {
width: 132px; height: auto; aspect-ratio: 3 / 4;
border-radius: var(--rayon-l); object-fit: cover;
}
.fp-tete .pf-photo-boite:has(.fp-photo) .pf-photo-modifier { right: -8px; bottom: -8px; }
@media (max-width: 720px) {
.fp-tete .pf-photo.fp-photo { width: 100px; }
}
img.face, img.portrait { object-position: 50% 0; }
.cadrage-debout:not(.cadrage-rond) { max-width: 240px; }
.visuel-bloc .cadrage-debout { max-width: 152px; }
.visuel-bloc:has(input[name="logo"]) .cadrage-debout { border-radius: 26px; }
.visuel-apercu-logo { width: 152px; height: 152px; border-radius: 26px; }
.comp-zone .ghost { padding-right: 12px; }
.comp-volets { display: grid; gap: 10px; }
.comp-volets:not(:has(> :not([hidden]))) { display: none; }
.comp-volets .sondage-composeur { margin-top: 0; }
.comp-barre {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
}
.comp-barre-outils, .comp-barre-droite { display: flex; align-items: center; gap: 2px; min-width: 0; }
.comp-barre-droite { gap: 8px; margin-left: auto; }
.comp-barre-bouton, .comp-barre .comp-outil, .comp-barre .emo-bouton {
display: inline-grid; place-items: center; width: 38px; height: 38px; min-height: 38px; margin: 0; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--muted); font: inherit; cursor: pointer; position: relative;
}
.comp-barre-bouton:hover, .comp-barre .comp-outil:hover, .comp-barre .emo-bouton:hover,
.comp-barre-bouton[aria-expanded='true'], .comp-clavier[open] > .comp-barre-bouton { background: var(--surface-2); color: var(--ink); }
.comp-barre-bouton:focus-visible, .comp-barre .comp-outil:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.comp-barre-bouton .ico, .comp-barre .comp-outil .ico, .comp-barre .emo-bouton .ico { width: 20px; height: 20px; }
.comp-barre .comp-outil-nom {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.comp-aa { font-family: var(--font-title); font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.comp-barre summary { list-style: none; }
.comp-barre summary::-webkit-details-marker { display: none; }
.comp-clavier, .comp-public { position: relative; }
.comp-clavier-liste { left: 0; right: auto; min-width: 240px; max-width: min(320px, calc(100vw - 32px)); }
.comp-clavier-liste .clavier-bloc { display: grid; gap: 6px; }
.comp-public-choix {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; max-width: 200px; padding: 0 10px;
border: 1px solid var(--line); border-radius: var(--rayon-pilule); color: var(--muted);
font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.comp-public-choix:hover, .comp-public[open] > .comp-public-choix { background: var(--surface-2); color: var(--ink); }
.comp-public-choix .ico { flex: none; width: 16px; height: 16px; }
.comp-public-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-public-liste { min-width: 230px; gap: 6px; padding: 10px 12px; }
.comp-public-liste p { margin: 0; }
.comp-barre .comp-compte { margin: 0; }
.comp-barre .btn-main { min-height: 38px; padding: 0 16px; }
.comp-barre .comp-js-seul { display: none; }
.comp-outille .comp-barre .comp-barre-bouton.comp-js-seul { display: inline-grid; }
.comp-outille .comp-barre .comp-clavier { display: block; }
.comp-outille .comp-barre .comp-barre-emojis { display: contents; }
.comp-outille .comp-volets .sondage-composeur > summary { display: none; }
.comp-outille .comp-volets .sondage-composeur:not([open]) { display: none; }
.qdn-p-publication .comp-barre { padding-left: 0; }
@media (max-width: 559px) {
.comp-public-nom, .comp-barre .comp-compte:not(.comp-compte-trop) { display: none; }
.comp-public-choix { padding: 0 8px; }
.qdn-p-publication .comp-pied { padding-left: 0; }
.qdn-p-publication .comp-corps > .comp-volets { grid-column: 1 / -1; }
}
@media (min-width: 560px) {
.qdn-p-publication .comp-barre { margin-left: 48px; }
}
.tirer {
position: fixed; left: 50%; top: var(--tirer-haut, 0px); z-index: 60;
display: grid; place-items: center; width: 40px; height: 40px; margin: -44px 0 0 -20px;
border-radius: 50%; background: var(--surface); color: var(--muted);
border: 1px solid var(--line); box-shadow: var(--ombre-carte);
transform: translateY(var(--tirer-y, 0px)); opacity: 0; pointer-events: none;
}
.tirer-visible { opacity: 1; }
.tirer-retour { transition: transform .22s ease, opacity .22s ease; }
.tirer .ico { width: 22px; height: 22px; transform: rotate(var(--tirer-tour, 0deg)); }
.tirer-pret { color: var(--accent); }
.tirer-charge .ico { animation: tirer-tourne .8s linear infinite; }
@keyframes tirer-tourne { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (pointer: coarse) {
html, body { overscroll-behavior-y: contain; }
}
@media (prefers-reduced-motion: reduce) {
.tirer-retour { transition: none; }
.tirer .ico { transform: none; }
.tirer-charge .ico { animation-duration: 2.4s; }
}
.sensible { margin-top: 10px; }
.sensible-ligne { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 14px; font-weight: 600; }
.sensible-ligne .ico { width: 18px; height: 18px; color: var(--muted); }
.sensible-etat { min-width: 28px; color: var(--muted); font-size: 13px; }
.sensible-oui, .sensible-ligne:has(.interrupteur:checked) .sensible-non { display: none; }
.sensible-ligne:has(.interrupteur:checked) .sensible-oui { display: inline; color: var(--ink); }
.sensible:has(> .sensible-ligne .interrupteur:not(:checked)) > .sensible-liste { display: none; }
.sensible-liste { margin-top: 6px; }
.esp-adulte { margin-top: 8px; }
.adultes-bascule { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; max-width: 100%; }
.adultes-ligne .sensible-mot { white-space: nowrap; }
.adultes-ligne:has(.interrupteur:disabled) { cursor: default; opacity: .6; }
.adultes-bascule > .adultes-note,
.adultes-bascule > .info-bulle:not(.info-bulle-flottante) { flex: 1 0 100%; margin: 0; }
.joinus-appel > .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
.joinus-fenetres { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.joinus-fenetre, .joinus-fenetre.joinus-visages, .joinus-fenetre.joinus-joueurs { display: block; flex: 1 1 0; min-width: 0; margin: 0; }
.joinus-fenetre[open] { flex-basis: 100%; }
.joinus-fenetre > summary { list-style: none; display: flex; width: 100%; justify-content: center; align-items: center; gap: 6px; cursor: pointer; }
.joinus-fenetre > summary::-webkit-details-marker { display: none; }
.joinus-fenetre > summary .ico { width: 17px; height: 17px; }
.joinus-fenetre-corps { padding: 12px 2px 4px; }
.joinus-fenetre-corps h2 { font-size: 18px; margin: 0 0 6px; }
.dialogue-volet .joinus-fenetre-corps { padding: 0 0 12px; }
.dialogue-volet .dialogue-fermer { font-size: 22px; line-height: 1; }
.joinus-visages-liste, .joinus-equipe-liste { list-style: none; padding: 0; margin: 6px 0 10px; display: grid; gap: 6px; }
.joinus-visages-liste li, .joinus-equipe-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.joinus-joueurs-titre { font-size: 15px; margin: 12px 0 4px; }
.pub-bilan + .pub-reponses { padding-top: 6px; }
.pub-reponse { gap: 6px; margin-top: 4px; }
.pub-fil > .pub-reponse:first-child { margin-top: 0; }
.pub-reponse .pub-avatar-s, .pub-repondre > .pub-avatar-s { width: 28px; height: 28px; }
.pub-reponse .pub-avatar-s .pub-initiales, .pub-repondre > .pub-avatar-s .pub-initiales { font-size: 11px; }
.pub-sous-reponse .pub-avatar-s { width: 24px; height: 24px; }
.pub-sous-reponse .pub-initiales { font-size: 10px; }
.pub-bulle { padding: 5px 10px 6px; border-radius: 4px 14px 14px 14px; }
.pub-reponse-nom { font-size: 13px; }
.pub-reponse-texte { margin-top: 1px; font-size: 14px; line-height: 1.4; }
.pub-sous-fil { margin: 2px 0 0; padding-left: 12px; border-left: 2px solid var(--line); }
.pub-plus { min-height: 28px; margin: 2px 0 2px 34px; font-size: 12.5px; }
.pub-repondre { gap: 6px; margin-top: 6px; }
.pub-repondre > .pub-avatar { margin-bottom: 4px; }
.pub-bulle-rangee { display: flex; align-items: center; gap: 2px; min-width: 0; }
.pub-bulle-pile { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.pub-bulle-pile > .pub-bulle { max-width: 100%; }
.pub-bulle-pile:has(> .pub-modifier) { flex: 1 1 auto; align-items: stretch; }
.pub-bulle-outils { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.pub-outil {
display: none; place-items: center; width: 26px; height: 26px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--faint); cursor: pointer;
}
.pub-js .pub-outil-reagir { display: grid; }
.pub-outil:hover, .pub-outil:focus-visible { background: var(--surface-2); color: var(--ink); }
.pub-outil .ico { width: 15px; height: 15px; }
.pub-bulle-outils .menu-reponse > .carte-menu-bouton {
width: 26px; height: 26px; min-width: 26px; min-height: 26px; padding: 0;
border-radius: 50%; color: var(--faint);
}
.pub-bulle-outils .menu-reponse > .carte-menu-bouton:hover { background: var(--surface-2); color: var(--ink); }
.pub-bulle-outils .menu-reponse > .carte-menu-bouton .ico { width: 15px; height: 15px; }
.pub-reponse-heure { margin-left: 2px; color: var(--faint); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
.pub-js .pub-bulle-outils { opacity: 0; transition: opacity .12s; }
.pub-js .pub-bulle-rangee:hover > .pub-bulle-outils,
.pub-js .pub-bulle-outils:focus-within,
.pub-js .pub-bulle-outils:has(details[open]),
.pub-js .pub-bulle-rangee:has(.reacs-palette[open]) > .pub-bulle-outils,
.pub-js .pub-bulle-touchee > .pub-bulle-outils { opacity: 1; }
}
@media (hover: none) {
.pub-js .pub-bulle-outils { visibility: hidden; }
.pub-js .pub-bulle-touchee > .pub-bulle-outils,
.pub-js .pub-bulle-outils:has(details[open]),
.pub-js .pub-bulle-rangee:has(.reacs-palette[open]) > .pub-bulle-outils { visibility: visible; }
.pub-outil, .pub-bulle-outils .menu-reponse > .carte-menu-bouton { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
}
.pub-bulle-touchee > .pub-bulle-pile > .pub-bulle { outline: 2px solid var(--accent); outline-offset: 1px; }
.pub-reponse-reacs .reacs { margin: 0; gap: 3px; }
.pub-reponse-reacs:has(.reac[data-emoji]) { position: relative; z-index: 1; align-self: flex-end; margin: -8px 6px 0 0; }
.pub-reponse-reacs .reac {
min-height: 20px; gap: 3px; padding: 1px 6px; font-size: 11.5px;
box-shadow: 0 0 0 2px var(--surface);
}
.pub-reponse-reacs .reacs-palette > summary { min-height: 22px; padding: 1px 6px; font-size: 12px; }
.pub-js .pub-reponse-reacs .reacs-palette > summary { display: none; }
.pub-reponse-actes { margin: 1px 0 0 10px; font-size: 11.5px; }
.pub-reponse-actes:not(:has(*)) { display: none; }
.pub-categorie { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; }
.pub-categorie .etiq { white-space: nowrap; }
.pub .etiquettes.pub-etiquettes:not(:has(*)) { display: none; }
@media (max-width: 520px) {
.pub-tete:has(> .pub-categorie) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 10px; }
.pub-tete:has(> .pub-categorie):not(:has(> .carte-menu)) { grid-template-columns: auto minmax(0, 1fr) auto; }
.pub-tete:has(> .pub-categorie) > * { grid-row: 1 / 3; align-self: center; }
.pub-tete:has(> .pub-categorie):has(> .pub-heure) > * { align-self: start; }
.pub-tete:has(> .pub-categorie) > .pub-heure { grid-column: 3; grid-row: 1; justify-self: end; }
.pub-tete:has(> .pub-categorie):has(> .pub-heure) > .pub-categorie { grid-row: 2; }
.pub-tete:has(> .pub-categorie) > :first-child { grid-column: 1; }
.pub-tete:has(> .pub-categorie) > .pub-qui { grid-column: 2; }
.pub-tete > .pub-categorie { grid-column: 3; grid-row: 2; align-self: end; }
.pub-tete:has(> .pub-categorie) > .carte-menu { grid-column: 4; }
}
.registre-question { margin-top: 6px; padding: 8px 10px; border-radius: var(--rayon); background: var(--surface-2); }
.registre-question p { margin: 0; }
.registre-question p + p { margin-top: 6px; }
.registre-ajouter .btn { margin-left: 4px; }
.arrivee-bienvenue {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 22px 16px 18px;
text-align: center;
border-radius: var(--rayon);
background: color-mix(in srgb, var(--teinte-arrivee, var(--accent)) 16%, var(--surface-2));
}
.arrivee-bienvenue .crest-arrivee {
width: 64px;
height: 64px;
border-radius: 50%;
font-size: 20px;
object-fit: cover;
box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--teinte-arrivee, var(--accent)) 60%, transparent);
}
.arrivee-bienvenue .pub-texte { margin: 0; font-size: 1.05rem; }
.traiter-rien { margin: 14px 0 0; }
.traiter-resume { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.traiter-resume-lien {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
border: 1px solid var(--line-strong); border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.traiter-resume-lien:hover { border-color: var(--accent); }
.traiter-resume-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.traiter-outils-liens { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.traiter-outils h2 { margin-bottom: 10px; }
.section > h2[data-info-ancre] { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.note-blocage[data-info-ancre],
.row[data-info-ancre],
fieldset[data-info-ancre],
.section > div[data-info-ancre]:not([class]) { position: relative; }
fieldset.naissance-lieu { margin: 0; padding: 0; border: 0; min-width: 0; }
fieldset.naissance-lieu > legend.lab { padding: 0; }
.naissance-lieu .naissance-cases { margin-top: 6px; }
.naissance-lieu .naissance-libre,
.naissance-lieu .naissance-imaginaire { display: none; }
.naissance-lieu:has([data-naissance-introuvable]:checked) .naissance-libre { display: block; }
.naissance-lieu:has([data-naissance-imaginaire]:checked) .naissance-imaginaire { display: block; }
.naissance-lieu:has([data-naissance-imaginaire]:checked) .naissance-ville,
.naissance-lieu:has([data-naissance-imaginaire]:checked) .naissance-libre,
.naissance-lieu:has([data-naissance-imaginaire]:checked) .naissance-cases:has([data-naissance-introuvable]) { display: none; }
.naissance-lieu:has([data-naissance-introuvable]:checked) .naissance-pays-choisi { display: none; }
.naissance-pays-choisi,
.naissance-rien { margin: 6px 0 0; }
.naissance-lieu .saisie-propositions { max-height: 320px; overflow-y: auto; }
.naissance-lieu .saisie-propositions [role='option'] { justify-content: space-between; gap: 12px; }
.naissance-option-pays { flex: none; font-size: 12.5px; color: var(--muted); }
.naissance-lieu .saisie-propositions [role='option'][aria-selected='true'] .naissance-option-pays { color: inherit; }
.ej-colonne { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px; }
.ej-titre .field { font-weight: 600; }
.tel-appbar .tel-appbar-tuile.tel-icone-img { background: none; box-shadow: none; }
.tel-appbar .tel-appbar-tuile.tel-icone-img::before { content: none; }
.tel-appbar .tel-appbar-tuile.tel-icone-img > img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.ech-poser-pied .ech-poser-outils { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.ech-fichier.ech-fichier-icone { flex: none; width: 38px; height: 38px; padding: 0; justify-content: center; border: 0; }
.ech-fichier.ech-fichier-icone::before { width: 20px; height: 20px; }
.ech-poser-emojis .emo-bouton { position: static; width: 38px; height: 38px; }
.ech-story-cadre {
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 9 / 16;
container-type: inline-size;
background-color: var(--story-noir);
background-size: cover;
background-position: center;
color: var(--story-blanc);
}
.ech-diapo-toile-cadree {
display: flex;
align-items: center;
justify-content: center;
container-type: size;
}
.ech-diapo-toile-cadree .ech-story-cadre { width: min(100cqw, calc(100cqh * 9 / 16)); }
.ech-diapo-toile-cadree .ech-diapo-mot-image { z-index: 3; }
.ech-calque {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
width: max-content;
max-width: 90%;
margin: 0;
transform: translate(-50%, -50%);
font-family: var(--font-ui);
font-weight: 700;
font-size: calc(var(--e, 7) * 3.6px);
font-size: calc(var(--e, 7) * 1cqw);
line-height: 1.25;
text-align: center;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.ech-calque-ombre { text-shadow: 0 .05em .15em var(--story-ombre), 0 0 .6em var(--story-ombre-douce); }
.ech-calque-fond { line-height: 1.5; }
.ech-calque-fond span {
padding: .12em .35em;
border-radius: .25em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
background: var(--story-blanc);
color: var(--story-noir);
}
.ech-calque-fond.ech-couleur-noir span { background: var(--story-noir); color: var(--story-blanc); }
.ech-calque-fond.ech-couleur-rose span { background: var(--story-rose); color: var(--story-blanc); }
.ech-calque-fond.ech-couleur-jaune span { background: var(--story-jaune); color: var(--story-noir); }
.ech-calque-fond.ech-couleur-bleu span { background: var(--story-bleu); color: var(--story-noir); }
.ech-calque-fond.ech-couleur-vert span { background: var(--story-vert); color: var(--story-noir); }
.ech-calque-bulle { padding: .35em .7em; border-radius: .8em; background: var(--story-blanc); }
.ech-calque-bulle.ech-couleur-blanc { color: var(--story-noir); }
.ech-calque.ech-calque-bandeau {
left: 50% !important;
width: 100%;
max-width: none;
padding: .4em .8em;
background: var(--story-voile);
}
.ech-calque.ech-calque-bandeau.ech-couleur-noir { background: var(--story-filet); }
.ech-creer-scene[hidden] { display: none; }
.ech-creer.ech-creer-js {
position: relative;
flex: 1 0 auto;
min-height: 100%;
padding: 0;
gap: 0;
background: var(--story-scene);
color: var(--story-blanc);
}
.ech-creer-scene {
position: relative;
flex: 1 1 auto;
min-height: 360px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
container-type: size;
}
.ech-creer-scene .ech-story-cadre { width: min(100cqw, calc(100cqh * 9 / 16)); touch-action: none; }
.ech-creer-scene .ech-diapo-media { pointer-events: none; }
.ech-creer-scene .ech-calque { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.ech-creer-scene .ech-calque.ech-calque-glisse { cursor: grabbing; }
.ech-creer-scene .ech-calque.ech-calque-edite { z-index: 4; cursor: text; user-select: text; -webkit-user-select: text; }
.ech-calque-edite span { outline: none; caret-color: currentColor; }
.ech-calque-edite span:empty { display: inline-block; min-width: 2px; min-height: 1.25em; }
.ech-cadre-voile { position: absolute; inset: 0; z-index: 3; background: var(--story-voile); }
.ech-cadre-voile[hidden] { display: none; }
.ech-creer-js .ech-creer-panneau { display: none; }
.ech-creer-js .ech-creer-panneau.ech-panneau-ouvert {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 7;
display: flex;
flex-direction: column;
gap: 8px;
max-height: 70%;
margin: 0;
padding: 14px 14px 16px;
overflow-y: auto;
border: 0;
border-radius: 18px 18px 0 0;
background: var(--hm-surface);
color: var(--hm-texte);
box-shadow: 0 -6px 24px var(--hm-ombre);
}
.ech-creer-js .ech-creer-fonds.ech-panneau-ouvert { display: grid; }
.ech-creer-js .ech-creer-panneau legend { float: left; width: 100%; margin-bottom: 4px; }
.ech-panneau-ok { align-self: flex-end; grid-column: 1 / -1; justify-self: end; margin-top: 4px; }
.ech-creer-outils {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 10px;
}
.ech-outil {
display: grid;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--story-voile);
color: var(--story-blanc);
cursor: pointer;
}
.ech-outil .ico { width: 20px; height: 20px; }
.ech-outil:focus-visible { outline: 2px solid var(--story-blanc); outline-offset: 2px; }
.ech-outil-aa { font-family: var(--font-ui); font-size: 17px; font-weight: 700; line-height: 1; }
.ech-outil-pastille {
width: 22px;
height: 22px;
border: 2px solid var(--story-blanc);
border-radius: 50%;
background-size: cover;
background-position: center;
}
.ech-outil-sans-media { display: none; }
.ech-creer-a-media .ech-outil-sans-media { display: grid; }
.ech-creer-a-media .ech-outil-fond { display: none; }
.ech-creer-js .ech-creer-partager {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 5;
margin: 0;
}
.ech-creer-en-edition .ech-creer-outils,
.ech-creer-en-edition .ech-creer-partager { display: none; }
.ech-creer-scene .ech-creer-alerte {
position: absolute;
top: 10px;
left: 10px;
right: 62px;
z-index: 6;
margin: 0;
}
.ech-creer-scene .ech-creer-alerte[hidden] { display: none; }
.ech-creer-scene .ech-reduire {
position: absolute;
left: 12px;
right: 12px;
bottom: 64px;
z-index: 6;
margin: 0;
padding: 8px 10px;
border-radius: var(--rayon);
background: var(--story-voile-fort);
}
.ech-creer-scene .ech-reduire[hidden] { display: none; }
.ech-creer-edition {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
pointer-events: none;
}
.ech-creer-edition[hidden] { display: none; }
.ech-creer-edition > * { pointer-events: auto; }
.ech-edition-haut,
.ech-edition-ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ech-edition-bas { display: flex; flex-direction: column; gap: 10px; }
.ech-edition-bouton {
min-height: 40px;
padding: 8px 16px;
border: 1px solid var(--story-filet);
border-radius: var(--rayon-pilule);
background: var(--story-voile);
color: var(--story-blanc);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.ech-edition-ok { border-color: var(--story-blanc); background: var(--story-blanc); color: var(--story-noir); }
.ech-edition-taille { width: 100%; accent-color: var(--story-blanc); }
.ech-edition-couleurs { display: flex; flex-wrap: wrap; gap: 8px; }
.ech-edition-couleur {
width: 30px;
height: 30px;
padding: 0;
border: 2px solid var(--story-blanc);
border-radius: 50%;
cursor: pointer;
}
.ech-edition-couleur[aria-pressed='true'] { box-shadow: 0 0 0 3px var(--story-voile-fort), 0 0 0 5px var(--story-blanc); }
fieldset.choix-multiples { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
fieldset.choix-multiples > legend.lab { padding: 0; position: relative; }
.choix-multiples-pli > summary { list-style: none; }
.choix-multiples-pli > summary::-webkit-details-marker { display: none; }
.choix-multiples-resume {
display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer;
color: var(--ink); user-select: none;
}
.choix-multiples-valeur { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choix-multiples-invite { color: var(--muted); }
.choix-multiples-resume .ico { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .15s ease; }
.choix-multiples-pli[open] > .choix-multiples-resume { border-color: var(--accent); }
.choix-multiples-pli[open] > .choix-multiples-resume .ico { transform: rotate(-90deg); }
.choix-multiples-resume:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choix-multiples-liste {
display: grid; gap: 0 14px; margin-top: 6px; padding: 6px 12px;
max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
border: 1px solid var(--line-strong); border-radius: var(--rayon); background: var(--surface);
}
.choix-multiples-liste > .choix-ligne { min-height: 40px; margin: 0; }
.choix-multiples-liste > .choix-ligne[hidden] { display: none; }
.choix-multiples-filtre { margin: 4px 0 6px; }
.choix-multiples-autre-champ { display: none; padding: 0 0 8px; }
.choix-multiples:has([data-choix-autre]:checked) .choix-multiples-autre-champ { display: block; }
@media (min-width: 641px) {
.choix-multiples-liste { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.choix-multiples-liste > .choix-multiples-filtre,
.choix-multiples-liste > .choix-multiples-autre,
.choix-multiples-liste > .choix-multiples-autre-champ { grid-column: 1 / -1; }
}
.comp-barre .sensible-liste .choix-multiples { margin-top: 4px; }
.choix-unique .choix-ligne:has(> input:checked) > [data-choix-libelle] { color: var(--accent-ink); font-weight: 600; }
.choix-unique-groupe { margin: 8px 0 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.choix-unique-groupe[hidden] { display: none; }
@media (min-width: 641px) {
.choix-multiples-liste > .choix-unique-groupe { grid-column: 1 / -1; }
}
.tel-ecran .choix-multiples-liste { grid-template-columns: minmax(0, 1fr); padding: 4px 10px; }
.tel-ecran fieldset.choix-multiples { margin-top: 0; }
.tel-ecran .choix-multiples-liste > .choix-ligne { min-height: 36px; font-size: 13.5px; }
.tel-ecran .choix-multiples-resume { min-height: 38px; }
.tel-ecran .radios-pastilles > legend.tel-lab { margin: 10px 0 4px; }
.tel-appli-rencontres .choix-multiples-resume { background: var(--connect-carte); border-color: var(--connect-filet-fort); color: var(--connect-texte); }
.liv-sortes .liv-sorte-icone { min-height: 0; padding: 10px 4px; justify-content: center; }
.liv-sortes .liv-sorte-icone .ico { width: 26px; height: 26px; }
.tel-appli-echo .tel-appbar { container-type: inline-size; gap: 6px; padding-inline: 10px; }
@container (max-width: 340px) {
.tel-appli-echo .tel-appbar-titre.ech-titre-appli { display: none; }
.tel-appli-echo .tel-appbar-titre.ech-titre-ecran {
overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere;
font-size: 13px; letter-spacing: .05em; line-height: 1.15;
}
.tel-appli-echo .tel-appbar:has(.ech-titre-ecran) .tel-appbar-tuile { display: none; }
.tel-appli-echo .tel-appbar-actions { gap: 0; margin-left: auto; }
.tel-appli-echo .ech-barre-geste { width: 30px; }
.tel-appli-echo .ech-barre-moi { width: 34px; }
.tel-appli-echo .ech-av.ech-av-moi { width: 26px; height: 26px; }
}
.ech-coms-sur-place .ech-ecrire-com { margin: 0; padding: 8px 10px; }
.ech-ecrire-com { gap: 4px; }
.ech-ecrire-com .tel-ecrire-ligne { gap: 4px; }
.ech-ecrire-com .tel-ecrire-image,
.ech-ecrire-com .emo-bouton,
.ech-ecrire-com .tel-ecrire-ligne > button[type="submit"] { flex: none; width: 32px; height: 32px; }
.ech-ecrire-com textarea { min-height: 34px; padding: 7px 12px; }
.tel-appli-echo .ech-ecrire-com { border-top-color: var(--hm-trait-doux); background: var(--hm-surface); }
.tel-appli-echo .ech-ecrire-com .tel-ecrire-image { color: var(--hm-texte-2); }
.tel-appli-echo .ech-ecrire-com .emo-bouton { border-color: var(--hm-trait); background: var(--hm-surface-2); color: var(--hm-texte-2); }
.tel-appli-echo .ech-repond-a,
.tel-appli-echo .ech-repond-a a { color: var(--hm-texte-2); }
.ech-sondage-bouton { position: relative; cursor: pointer; }
.ech-sondage-bouton input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ech-sondage-bouton:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tel-appli-echo .ech-sondage-bouton:has(input:checked) { color: var(--hm-accent); }
.ech-fichier.ech-fichier-icone:focus-within { outline: 2px solid var(--hm-accent); outline-offset: 1px; border-radius: 50%; }
.ech-sondage-volet { display: none; min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
.ech-poser:has([data-ech-sondage-ouvrir]:checked) .ech-sondage-volet { display: grid; gap: 6px; }
.ech-sondage-volet .field { width: 100%; min-width: 0; }
.ech-sondage-choix { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ech-sondage-choix > li[hidden] { display: none; }
.ech-sondage-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.ech-sondage-plus {
display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
border: 1px dashed var(--hm-trait); border-radius: 8px; background: none;
color: var(--hm-texte-2); font: inherit; font-size: 12.5px; cursor: pointer;
}
.ech-sondage-plus[hidden] { display: none; }
.ech-sondage-plus .ico { width: 14px; height: 14px; }
.ech-sondage-multiple { display: inline-flex; align-items: center; gap: 6px; color: var(--hm-texte-2); font-size: 12.5px; }
.tel-appli-echo .ech-sondage { margin: 10px 12px 0; padding: 10px; border-color: var(--hm-trait); background: var(--hm-surface-2); }
.tel-appli-echo .ech-sondage .sondage-question { color: var(--hm-texte); }
.tel-appli-echo .ech-sondage .sondage-question .ico { color: var(--hm-accent); }
.tel-appli-echo .ech-sondage .sondage-choix { border-color: var(--hm-trait); background: var(--hm-surface); color: var(--hm-texte); }
.tel-appli-echo .ech-sondage .sondage-choix:hover { border-color: var(--hm-accent); }
.tel-appli-echo .ech-sondage .sondage-jauge { background: var(--hm-lueur); }
.tel-appli-echo .ech-sondage .sondage-choisie .sondage-choix { border-color: var(--hm-accent); }
.tel-appli-echo .ech-sondage .sondage-marque .ico,
.tel-appli-echo .ech-sondage .sondage-choisie .sondage-part { color: var(--hm-accent); }
.tel-appli-echo .ech-sondage .sondage-part,
.tel-appli-echo .ech-sondage .sondage-bilan { color: var(--hm-texte-3); }
.ech-sondage .sondage-pied .tel-bouton { width: auto; margin: 0; padding: 6px 14px; font-size: 12px; }
.ech-sondage-reprendre {
padding: 0; border: 0; background: none; color: var(--hm-texte-2);
font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer;
}
.ech-sondage-clos { color: var(--hm-texte-3); font-size: 12px; }
.ech-pub-pied { flex-wrap: wrap; gap: 4px 14px; padding: 8px 12px 0; }
.ech-pub-pied .ech-jaime,
.ech-pub-pied .ech-commenter { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; font-size: 13px; }
.ech-pub-pied .ech-jaime .ico,
.ech-pub-pied .ech-commenter .ico { width: 18px; height: 18px; }
.ech-jaime-form { margin: 0; }
.ech-reagir { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.ech-reagir .reacs { margin: 0; gap: 4px; }
.ech-reagir .reac { min-height: 26px; padding: 1px 7px; font-size: 12.5px; }
.ech-reagir .reacs-palette { position: static; }
.ech-reagir .reacs-choix { left: -4px; bottom: calc(100% + 4px); }
.ech-reagir .reacs-choix .reac { min-width: 36px; font-size: 20px; }
.tel-appli-echo .ech-reagir .reacs-choix,
.tel-appli-echo .ech-com-reacs .reacs-choix { border-color: var(--hm-trait); background: var(--hm-surface-2); }
.tel-appli-echo .ech-reagir .reacs-choix .reac:hover,
.tel-appli-echo .ech-com-reacs .reacs-choix .reac:hover { background: var(--hm-lueur); }
.tel-appli-echo .ech-reagir .reacs > .reac,
.tel-appli-echo .ech-reagir .reacs-repli .reac { border-color: var(--hm-trait); background: var(--hm-surface-2); color: var(--hm-texte-2); }
.tel-appli-echo .ech-reagir .reacs > .reac-mienne { border-color: var(--hm-accent); color: var(--hm-texte); }
.ech-js .ech-reagir .reacs-palette > summary { display: none; }
.ech-reagir [data-ech-coeur] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ech-pub-pied .ech-repartager { margin-left: auto; padding: 0; }
.ech-pub-pied .ech-repartager > summary { display: grid; place-items: center; min-width: 32px; min-height: 32px; list-style: none; }
.ech-pub-pied .ech-repartager > summary::-webkit-details-marker { display: none; }
.ech-pub-pied .ech-repartager > summary .ico { width: 18px; height: 18px; }
.ech-pub-pied .ech-repartager[open] { flex-basis: 100%; margin-left: 0; }
.ech-pub-pied .ech-repartager[open] > summary { justify-items: end; }
.ech-pub-pied .ech-deja { margin-left: auto; }
.tel-appli-echo .ech-pub-pied .ech-deja { color: var(--hm-accent); }
.ech-onglets-pages a { padding: 8px 8px; font-size: 13px; }
.mai-filtres { flex-wrap: wrap; overflow-x: visible; }
.mai-filtre { min-height: 28px; padding: 0 9px; font-size: 10.5px; letter-spacing: .06em; }
.mai-gestes { flex-wrap: nowrap; align-items: center; gap: 4px; }
.mai-geste { gap: 4px; padding: 0 9px; }
.mai-geste .ico { width: 16px; height: 16px; }
.bs-ecrire { gap: 8px; }
.bs-champ {
display: block; width: 100%; min-width: 0; min-height: 38px; max-height: calc(1.4em * 5 + 18px); margin: 0;
padding: 8px 14px; border: 1px solid var(--bs-filet); border-radius: 19px;
background: var(--bs-carte); color: var(--bs-texte); font: inherit; font-size: 14px; line-height: 1.4;
resize: none; overflow-y: auto;
}
.bs-champ::placeholder { color: var(--bs-texte-3); }
.bs-champ:focus { outline: none; border-color: var(--bs-rouge); box-shadow: 0 0 0 3px var(--bs-doux); }
.bs-ecrire .bs-barre { flex-wrap: nowrap; margin: 0; padding: 0; border-top: 0; }
.bs-ecrire .comp-barre-bouton, .bs-ecrire .comp-barre .comp-outil, .bs-ecrire .comp-barre .emo-bouton,
.bs-ligne .emo-bouton {
width: 36px; height: 36px; min-height: 36px; border: 0; border-radius: 50%; background: none; color: var(--bs-texte-2);
}
.bs-ecrire .comp-barre-bouton:hover, .bs-ecrire .comp-barre .comp-outil:hover, .bs-ecrire .comp-barre .emo-bouton:hover,
.bs-ecrire .comp-barre-bouton[aria-expanded='true'], .bs-ligne .emo-bouton:hover {
background: var(--bs-doux); color: var(--bs-rouge);
}
.bs-ecrire .comp-barre-bouton:focus-visible, .bs-ecrire .comp-barre .comp-outil:focus-within { outline-color: var(--bs-rouge); }
.bs-envoyer {
display: inline-grid; flex: none; place-items: center; width: 38px; height: 38px; margin: 0 0 0 auto; padding: 0;
border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--bs-rouge-sombre), var(--bs-rouge));
color: var(--bs-texte); cursor: pointer;
}
.bs-envoyer:hover { box-shadow: 0 0 0 3px var(--bs-lueur); }
.bs-envoyer:focus-visible { outline: 2px solid var(--bs-rouge); outline-offset: 2px; }
.bs-envoyer .ico { width: 18px; height: 18px; }
.bs-ligne { display: flex; align-items: flex-end; gap: 4px; }
.bs-ligne .bs-champ { flex: 1 1 auto; width: auto; }
.bs-ligne .bs-envoyer { margin-left: 2px; }
.bs-emojis:empty { display: none; }
.bs-ecrire .comp-erreur { color: var(--bs-rouge); }
.bs-ecrire .sondage-composeur { padding: 10px 12px; border: 1px solid var(--bs-filet); border-radius: 12px; background: var(--bs-carte); }
.bs-ecrire .sondage-composeur > summary { color: var(--bs-rouge); }
.bs-ecrire .sondage-composeur .lab, .bs-ecrire .sondage-composeur .choix-ligne { color: var(--bs-texte-2); }
.bs-ecrire .sondage-composeur .field {
border-color: var(--bs-filet); background: var(--bs-nuit); color: var(--bs-texte);
}
.bs-ecrire .sondage-composeur .field::placeholder { color: var(--bs-texte-3); }
.bs-ecrire .sondage-composeur .field:focus { outline: none; border-color: var(--bs-rouge); }
.bs-image { display: block; margin-top: 8px; overflow: hidden; border: 1px solid var(--bs-filet-doux); border-radius: 10px; background: var(--bs-carte); }
.bs-image img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.bs-sondage { margin-top: 8px; }
.bs-sondage .sondage { padding: 10px 12px; border: 1px solid var(--bs-filet); border-radius: 12px; background: var(--bs-carte); color: var(--bs-texte); }
.bs-sondage .sondage-question { color: var(--bs-texte); }
.bs-sondage .sondage-question .ico { color: var(--bs-rouge); }
.bs-sondage .sondage-choix { border-color: var(--bs-filet-doux); background: var(--bs-nuit); color: var(--bs-texte); }
.bs-sondage .sondage-choix:hover, .bs-sondage .sondage-choisie .sondage-choix { border-color: var(--bs-rouge); }
.bs-sondage .sondage-jauge { background: var(--bs-doux); }
.bs-sondage .sondage-marque .ico, .bs-sondage .sondage-choisie .sondage-part { color: var(--bs-rouge); }
.bs-sondage .sondage-part, .bs-sondage .sondage-bilan { color: var(--bs-texte-3); }
.bs-sondage .sondage-choix input { accent-color: var(--bs-rouge); }
.bs-sondage .btn-main { border: 0; background: linear-gradient(135deg, var(--bs-rouge-sombre), var(--bs-rouge)); color: var(--bs-texte); }
.bs-sondage .pub-lien { color: var(--bs-rouge); }
.bs-sondage .sondage-erreur { color: var(--bs-rouge); }
.signalement-concerne { margin-top: 10px; }
.signalement-transmis { display: flex; gap: 6px; align-items: center; }
.signalement-transmis .ico { flex: none; }
.signalement-transmettre { margin-top: 8px; }
.signalement-transmettre > summary { display: inline-flex; gap: 6px; align-items: center; }
.fp-perso .fp-tete .fp-nom { font-size: 30px; line-height: 1.08; font-weight: 600; }
.fp-perso .fp-tete .fp-ligne { margin: 6px 0 0; color: var(--ink); font-family: var(--font-rp); font-size: 15.5px; }
.fp-perso .fp-tete .fp-ligne::before { content: '« '; color: var(--accent); font-style: normal; }
.fp-perso .fp-tete .fp-ligne::after { content: ' »'; color: var(--accent); font-style: normal; }
.fp-metier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.fp-metier .ico { width: 16px; height: 16px; color: var(--accent); }
.fp-metier a { color: var(--accent-ink); font-weight: 600; }
.fp-perso .fp-actes-tete .fp-personnaliser[aria-current='true'] { border-color: var(--accent); background: var(--accent-soft); }
@media (min-width: 721px) {
.fp-perso .fp-tete .fp-nom { font-size: 40px; }
}
.fp-bref { margin: 0 0 12px; }
.fp-bref > h2 { margin: 0 0 8px; }
.fp-bref-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fp-bref-tuile {
min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--rayon);
background: var(--surface-2);
}
.fp-bref-tuile small {
display: block; color: var(--muted); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
}
.fp-bref-tuile b { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.fp-bref-tuile b a { color: var(--accent-ink); }
.fp-perso :is(.fp-bref > h2, .fp-bloc-titre h2, .fp-volet .section > h2, .lieux-de-la-fiche > h2) {
font-family: var(--font-title); color: var(--accent-ink);
}
.fp-perso .fp-volet-titre { font-family: var(--font-title); }
.fp-perso #fp-biographie .prose > p:first-child::first-letter {
float: left; padding: 4px 8px 0 0; color: var(--accent);
font-family: var(--font-title); font-size: 3.4em; line-height: .85;
}
.fp-perso-theme.gabarit-arche :is(.pf-media, .pf-album-pile) { border-radius: 999px 999px 10px 10px; overflow: hidden; }
.fp-perso-theme.gabarit-polaroid .pf-media {
border: 6px solid var(--polaroid-cadre); border-bottom-width: 20px; border-radius: 3px;
background-color: var(--polaroid-fond);
}
.fp-perso-theme.gabarit-polaroid .pf-media-boite:nth-child(odd) .pf-media { transform: rotate(-1.2deg); }
.fp-perso-theme.gabarit-polaroid .pf-media-boite:nth-child(even) .pf-media { transform: rotate(1deg); }
.fp-personnaliser-panneau { margin: 0 0 16px; }
.fp-personnaliser-panneau .theme-volet { margin: 0; }
.fp-personnaliser-fin { margin: 8px 0 0; }
.theme-sous-le-nom { margin: 14px 0 0; }
.theme-couverture { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.theme-couverture .lab { margin: 0; }
.jl-page { display: grid; gap: 12px; min-width: 0; }
.jl-etroite { max-width: 640px; }
.jl-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.jl-barre .esp-filtres { flex: 1 1 auto; min-width: 0; margin: 0; }
.jl-lieux { display: grid; gap: 12px; }
.jl-lieu {
display: block; overflow: hidden; color: inherit; text-decoration: none;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-l);
}
.jl-lieu-image { position: relative; display: block; background: var(--accent-soft); }
.jl-lieu-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jl-lieu-initiale {
display: grid; place-items: center; width: 100%; height: 100%;
font-family: var(--font-title); font-size: 34px; color: var(--accent-ink);
}
.jl-lieu-sorte, .jl-lieu-adulte { position: absolute; top: 10px; background: var(--surface); }
.jl-lieu-sorte { left: 10px; }
.jl-lieu-adulte { right: 10px; }
.jl-lieu-corps { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
.jl-lieu-nom { font-family: var(--font-title); font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.jl-lieu-corps small { color: var(--muted); font-size: 12.5px; }
.jl-form { display: grid; gap: 6px; margin: 0; min-width: 0; }
.jl-form .field { width: 100%; }
.jl-form-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.jl-form-actes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jl-adulte { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.jl-lieu-tete { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-l); }
.jl-lieu-couv { background: var(--accent-soft) center / cover no-repeat; }
.jl-lieu-titre { display: flex; align-items: flex-end; gap: 12px; padding: 0 14px 12px; }
.jl-lieu-logo {
flex: none; display: grid; place-items: center; width: 64px; height: 64px; margin-top: -32px;
border: 3px solid var(--surface); border-radius: var(--rayon-l); background: var(--accent);
font-family: var(--font-title); font-size: 26px; color: var(--sur-accent);
}
.jl-lieu-nommer { flex: 1 1 auto; min-width: 0; padding-top: 10px; }
.jl-lieu-nommer h1 { margin: 0; overflow-wrap: anywhere; }
.jl-lieu-nommer .sub { margin: 2px 0 0; }
.jl-lieu-titre > .carte-menu { flex: none; }
.jl-proposition p { margin: 0 0 8px; }
.jl-deux { display: grid; gap: 14px; min-width: 0; }
.jl-principal, .jl-cote { min-width: 0; }
.jl-texte-rp { font-family: var(--font-rp); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.jl-gens .esp-ligne-nom small { display: block; }
.jl-partager > summary { list-style: none; cursor: pointer; }
.jl-partager > summary::-webkit-details-marker { display: none; }
.jl-partager[open] > summary { margin-bottom: 8px; }
.jl-partager { margin-top: 10px; }
.jl-jour { margin: 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jl-evts { display: grid; gap: 8px; }
.jl-evt {
display: flex; gap: 12px; align-items: center; padding: 10px; min-width: 0; color: inherit; text-decoration: none;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-l);
}
.esp-carte .jl-evt { background: var(--surface-2); }
.jl-date {
flex: none; display: grid; justify-items: center; width: 50px; padding: 6px 0;
border-radius: var(--rayon); background: var(--accent-soft); color: var(--accent-ink);
}
.jl-date b { font-family: var(--font-title); font-size: 20px; line-height: 1; }
.jl-date small { font-size: 11px; font-weight: 600; text-transform: uppercase; }
.jl-evt-corps { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.jl-evt-corps b { font-weight: 600; }
.jl-evt-corps small { color: var(--muted); font-size: 12.5px; }
.jl-evt-corps .jl-evt-vont { color: var(--accent); font-weight: 600; }
.jl-evt-titre { display: flex; align-items: flex-start; gap: 12px; }
.jl-evt-titre h1 { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.jl-fait { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; }
.jl-fait .ico { flex: none; color: var(--accent); }
.jl-repondre { margin: 0 0 6px; }
@media (min-width: 760px) {
.jl-lieux { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (min-width: 1100px) {
.jl-deux { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 20px; }
.jl-lieu-logo { width: 96px; height: 96px; margin-top: -48px; font-size: 34px; }
}
.reglages-onglets { margin-bottom: 14px; }
.reglages-message { margin: 0 0 12px; }
.reglages-libre { padding: 4px 12px 12px; }
.reglages-libre > .lab:first-child, .reglages-libre > .lab-ligne:first-child { margin-top: 8px; }
.reglages-libre .radios-pastilles { margin-top: 10px; }
.reglages + .reglages { margin-top: 10px; }
.reglage-colonne { display: block; padding: 8px 0; }
.reglage-colonne .radios-pastilles { margin: 0; }
.reglage-sous { padding-left: 14px; }
.reglage > .reglage-nombre { width: 90px; }
.reglage > .reglage-couleur { width: 56px; height: 36px; padding: 2px; }
.danger-carte .reglages-titre h2 { color: var(--warn); }
.module-carte {
margin-top: 10px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
padding: 0 12px;
min-width: 0;
}
.module-carte > .reglage { border-top: 0; }
.module-corps { padding: 2px 0 12px; border-top: 1px solid var(--line); }
.module-corps > .lab-ligne:first-child, .module-corps > .radios-pastilles:first-child { margin-top: 10px; }
.module-carte:not(.module-toujours):has(> .reglage .interrupteur:not(:checked)) > .module-corps { display: none; }
.module-carte .chat-reglage { border: 0; padding: 0; margin: 10px 0 0; }
.partie { margin-top: 14px; }
.partie:first-child { margin-top: 4px; }
.partie-tete { display: flex; align-items: center; gap: 6px; min-height: 40px; }
.partie-tete h3 { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.partie-edition { padding: 0 0 10px; }
.partie-champs { margin-top: 4px; }
.partie-vide { margin: 4px 0 0; }
.partie-a-part { padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: var(--rayon); }
.partie-a-part-texte { margin: 0; font-size: 13.5px; color: var(--muted); }
.partie-ajout, .partie-creer { margin-top: 8px; }
.partie-ajout > summary, .partie-creer > summary {
display: inline-flex; align-items: center; gap: 6px; min-height: 40px;
cursor: pointer; color: var(--accent); font-size: 14px;
}
.partie-ajout[open] > summary, .partie-creer[open] > summary { margin-bottom: 6px; }
.partie-ajout > :not(summary), .partie-creer > :not(summary) {
padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface);
}
.partie-creer { margin-top: 16px; }
.partie-borne { margin: 10px 0 0; }
.partie-retiree { opacity: .8; }
.champ-ligne-reglage .reglage-nom b { font-weight: 600; }
.champ-ligne-reglage.champ-retire .reglage-nom { color: var(--faint); text-decoration: line-through; }
.champ-edition { padding: 0 0 12px; }
.etiq-doux { opacity: .7; }
.reglage-dans-form { border-top: 0; }
.questions-liste { margin-top: 6px; }
.questions-vide { margin: 6px 0 0; }
.questions-ajout { margin-top: 10px; }
.fiches-deux { display: grid; gap: 14px; margin-top: 14px; min-width: 0; }
.fiches-deux > .section.reglages-bloc { margin-top: 0; min-width: 0; }
.reglages-deux { display: grid; gap: 14px; min-width: 0; }
.reglages-deux > * { min-width: 0; }
.reglages-deux .section.reglages-bloc { margin-top: 0; }
.reglages-deux > div > .section.reglages-bloc + .section.reglages-bloc { margin-top: 14px; }
@media (min-width: 900px) {
.fiches-deux { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.fiches-apercu { position: sticky; top: 16px; }
.reglages-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
.cb-crest.mp-photo > .pub-avatar,
.cb-fil-crest.mp-photo > .pub-avatar { width: 100%; height: 100%; border-radius: inherit; }
.cb-crest.mp-photo > .pub-avatar img,
.cb-fil-crest.mp-photo > .pub-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cb-crest.cb-rond,
.cb-fil-crest.cb-rond { border-radius: 50%; }
.esp-ecrire:has(> .esp-qui) > :is(.comp-volets, .comp-barre) { margin-left: 0; }
.esp-qui { margin-bottom: 10px; }
.esp-qui > summary { list-style: none; cursor: pointer; }
.esp-qui > summary::-webkit-details-marker { display: none; }
.esp-qui-resume {
display: inline-flex; align-items: center; gap: 8px;
min-height: 40px; padding: 4px 10px 4px 4px; max-width: 100%;
border-radius: 999px; background: var(--surface-2); color: var(--ink);
}
.esp-qui-resume:hover { background: var(--accent-soft); }
.esp-qui-resume .ico { width: 14px; height: 14px; flex: none; color: var(--muted); transition: transform .15s; }
.esp-qui[open] .esp-qui-resume .ico { transform: rotate(180deg); }
.esp-qui-visage { display: inline-flex; flex: none; }
.esp-qui-nom { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.esp-qui-nom b { font-size: 14px; overflow-wrap: anywhere; }
.esp-qui-nom small { color: var(--accent); font-size: 12px; }
.esp-qui-corps {
display: grid; gap: 10px; margin-top: 8px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface);
}
.esp-qui-liste { border: 0; margin: 0; padding: 0; min-width: 0; }
.esp-qui-ligne { gap: 10px; min-height: 40px; cursor: pointer; }
.esp-qui-amener { display: grid; gap: 6px; justify-items: start; }
.esp-qui-amener > .choix-unique { width: 100%; }
.esp-qui-actes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.esp-ecrire:has(.esp-sortes input[value="presentation"]:checked) .ghost.ghost-vide::before { content: attr(data-invite-presentation); }
.esp-ecrire:has(.esp-sortes input[value="lien"]:checked) .ghost.ghost-vide::before { content: attr(data-invite-lien); }
.esp-ecrire:has(.esp-sortes input[value="scene"]:checked) .ghost.ghost-vide::before { content: attr(data-invite-scene); }
.esp-nouveau-lieu { margin: 8px 0 0; min-width: 0; }
.esp-nouveau-lieu .jl-lieu { max-width: 520px; }
.esp-nouveau-lieu .jl-lieu:hover { border-color: var(--accent); }
.jl-lieu-extrait { margin-top: 4px; color: var(--ink); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.jl-gerants { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jl-gerant { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; min-height: 36px; }
.jl-gerant > span { min-width: 0; overflow-wrap: anywhere; }
.livre-journal .livre-entree-journal {
--carnet-encre: var(--livre-encre);
--carnet-ligne: var(--livre-trait);
--carnet-papier: var(--livre-papier);
--carnet-tache: var(--journal-tache);
position: relative;
min-width: 0;
}
.livre-entree-titre {
margin: 0 0 2px;
color: var(--livre-encre);
font-family: var(--font-title);
font-size: 17px;
font-weight: 600;
line-height: 1.25;
overflow-wrap: anywhere;
}
.livre-journal .livre-entree-tete,
.livre-journal .livre-outils,
.livre-journal .etiq,
.livre-journal .carnet-signe { font-family: var(--font-ui); }
.livre-journal .livre-entree-tete { font-size: 13px; }
.livre-journal .livre-date { margin-left: 0; }
.livre-journal .carnet-signe { display: inline; margin: 0; font-size: 12.5px; }
.livre-journal .livre-texte-riche {
margin-top: 4px;
font-family: var(--font-rp);
font-size: 16px;
line-height: 1.6;
}
.livre-journal [class*='liv-police-'] .livre-texte-riche { font-family: inherit; font-size: 1.15em; }
.livre-journal .livre-texte-riche .carnet-texte { font-family: inherit; font-size: inherit; }
.livre-journal .livre-texte-riche .pub-media { margin-top: 8px; }
.livre-journal .livre-texte-riche img { max-width: 100%; height: auto; }
.livre-journal .carnet-page-dechire::after { background: var(--livre-papier); }
.livre-journal .carnet-dechire-etiq { font-size: 22px; }
@media (max-width: 419px) {
.livre-journal .livre-texte-riche { font-size: 15px; }
.livre-journal .carnet-dechire-etiq { font-size: 19px; white-space: normal; text-align: center; }
}
.livre-journal .livre-etiq-brouillon {
background: var(--accent-soft);
color: var(--accent-ink);
font-weight: 600;
font-size: 12px;
}
.livre-journal .livre-entree-brouillon {
padding-left: 10px;
border-left: 3px solid var(--line-strong);
}
.theme-partie { border-top: 1px solid var(--line); }
.theme-partie:last-of-type { border-bottom: 1px solid var(--line); }
.theme-partie-titre {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
min-height: 46px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15px;
}
.theme-partie-titre::-webkit-details-marker { display: none; }
.theme-partie-titre::after {
content: ""; width: 8px; height: 8px; flex: none; margin-right: 6px;
border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.theme-partie:not([open]) > .theme-partie-titre::after { transform: rotate(-45deg); }
.theme-partie-corps { display: grid; gap: 14px; padding: 2px 0 16px; min-width: 0; }
.theme-partie-corps > fieldset, .theme-partie-corps > div { margin: 0; }
.theme-partie + .theme-boutons { margin-top: 16px; }
.theme-blocs { display: grid; gap: 12px; }
.theme-fond-image { display: grid; gap: 6px; margin-top: 10px; }
.theme-fond-image .btn { justify-self: start; }
.theme-fond-poids { color: var(--muted); font-size: 12.5px; }
.theme-fond:has(input[name='fond_texture'][value='image']:not(:checked)) .theme-fond-image { display: none; }
.theme-police-source-serif { font-family: 'Source Serif 4', Georgia, serif; }
.theme-police-georgia { font-family: Georgia, 'Times New Roman', serif; }
.theme-police-verdana { font-family: Verdana, Geneva, sans-serif; }
.theme-police-arial { font-family: Arial, Helvetica, sans-serif; }
.theme-espace.th-police-texte { font-family: var(--font-ui); }
.theme-espace.th-titres :is(h1, h2, h3, .fp-volet-titre, .fp-nom) { color: var(--th-titres); }
.theme-espace.th-fond-papier {
background-image:
radial-gradient(color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.5px),
radial-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1.6px);
background-size: 7px 7px, 11px 11px;
background-position: 0 0, 4px 6px;
}
.theme-espace.th-fond-lin {
background-image:
repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 1px, transparent 1px 4px),
repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 5px);
}
.theme-espace.th-fond-etoiles {
background-image:
radial-gradient(circle, color-mix(in srgb, var(--ink) 38%, transparent) 1px, transparent 1.6px),
radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 1.2px, transparent 2px),
radial-gradient(circle, color-mix(in srgb, var(--ink) 22%, transparent) .8px, transparent 1.3px);
background-size: 97px 89px, 173px 151px, 41px 53px;
background-position: 0 0, 60px 30px, 20px 12px;
}
.theme-espace.th-fond-image {
background-image:
linear-gradient(color-mix(in srgb, var(--paper) 60%, transparent), color-mix(in srgb, var(--paper) 60%, transparent)),
var(--th-fond-image, none);
background-size: auto, cover;
background-position: center, center top;
background-repeat: no-repeat;
}
.theme-espace:is(.th-opacite-legers, .th-opacite-transparents) {
--surface: color-mix(in srgb, var(--th-blocs) var(--th-voile, 100%), transparent);
}
.theme-espace:is(.th-opacite-legers, .th-opacite-transparents) .up-bloc { background: var(--surface); }
.theme-espace:is(.th-opacite-legers, .th-opacite-transparents)
:is(.carte-menu-liste, .menu-liste, dialog, .info-bulle, .pf-retouche-form, .theme-form, .cp-panneau,
.fenetre, .field, input, select, textarea, .barre-filtres-feuille) {
--surface: var(--th-blocs);
}
.theme-espace.th-fond-image:is(.th-opacite-legers, .th-opacite-transparents)
:is(.up-bloc, .fp-bloc, .fp-blocs > .section, .pub, .pf-carte) {
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.theme-espace.th-forme-droits { --th-rayon: 3px; --rayon-l: 4px; --rayon: 4px; --th-rayon-blocs: 4px; }
.theme-espace.th-forme-tres-arrondis { --th-rayon: 26px; --rayon-l: 24px; --rayon: 14px; --th-rayon-blocs: 26px; }
.theme-espace:is(.th-forme-droits, .th-forme-tres-arrondis) :is(.pub, .up-bloc, .fp-bloc, .fp-blocs > .section),
.theme-espace:is(.th-forme-droits, .th-forme-tres-arrondis) :is(.page-colonne, .page-lecture, .page-large) .section:not(.section .section) {
border-radius: var(--th-rayon-blocs);
}
.theme-espace:is(.th-forme-droits, .th-forme-tres-arrondis) :is(.page-colonne, .page-lecture, .page-large) .section:has(> h2:first-child):not(.section .section) > h2:first-child {
border-radius: var(--th-rayon-blocs) var(--th-rayon-blocs) 0 0;
}
.theme-espace.th-contour-aucun :is(.pub, .up-bloc, .fp-bloc, .fp-blocs > .section, .pf-carte),
.theme-espace.th-contour-aucun :is(.page-colonne, .page-lecture, .page-large) .section:not(.section .section) {
border-color: transparent;
}
.theme-espace.th-contour-orne :is(.pub, .up-bloc, .fp-bloc, .fp-blocs > .section, .pf-carte),
.theme-espace.th-contour-orne :is(.page-colonne, .page-lecture, .page-large) .section:not(.section .section) {
border: 3px double color-mix(in srgb, var(--th-titres) 70%, transparent);
outline: 1px solid color-mix(in srgb, var(--th-titres) 22%, transparent); outline-offset: -7px;
}
.theme-espace:is(.th-orn-trait, .th-orn-etoiles, .th-orn-arabesque)
:is(.up-bloc > h2, .fp-volet-titre, .pf-carte > h2, .fp-bref > h2)::after,
.theme-espace:is(.th-orn-trait, .th-orn-etoiles, .th-orn-arabesque)
:is(.page-colonne, .page-lecture, .page-large) .section:not(.section .section) > h2:first-child::after {
content: ""; display: block; width: 56px; height: 10px; margin-top: 6px;
background: var(--th-titres, var(--accent));
-webkit-mask: var(--th-orn-dessin) no-repeat left center / contain;
mask: var(--th-orn-dessin) no-repeat left center / contain;
}
.theme-espace.th-orn-trait {
--th-orn-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10'%3E%3Crect y='4' width='44' height='2' rx='1'/%3E%3C/svg%3E");
}
.theme-espace.th-orn-etoiles {
--th-orn-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10'%3E%3Cpath d='M8 0l1.4 3.4 3.6.3-2.8 2.3.9 3.5L8 7.6 4.9 9.5l.9-3.5L3 3.7l3.6-.3z'/%3E%3Cpath d='M28 0l1.4 3.4 3.6.3-2.8 2.3.9 3.5L28 7.6l-3.1 1.9.9-3.5L23 3.7l3.6-.3z'/%3E%3Cpath d='M48 0l1.4 3.4 3.6.3-2.8 2.3.9 3.5L48 7.6l-3.1 1.9.9-3.5L43 3.7l3.6-.3z'/%3E%3C/svg%3E");
}
.theme-espace.th-orn-arabesque {
--th-orn-dessin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 10'%3E%3Cpath d='M1 5c6 0 7-4 11-4s4 4 1 4-2-3 1-3M55 5c-6 0-7-4-11-4s-4 4-1 4 2-3-1-3M14 5h10M32 5h10' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='5' r='2'/%3E%3C/svg%3E");
}
@media (min-width: 1024px) {
.fp-grille { grid-template-columns: minmax(0, 1fr) 300px; }
.fp-grille > .fp-gauche { grid-column: 2; grid-row: 1; }
.fp-grille > .fp-droite { grid-column: 1; grid-row: 1; }
}
@media (min-width: 861px) {
.pf-fil-page:not(.pf-fil-seul) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.pf-fil-page:not(.pf-fil-seul) > .pf-une-cote { grid-column: 2; grid-row: 1; }
.pf-fil-page:not(.pf-fil-seul) > .pf-fil { grid-column: 1; grid-row: 1; }
}
:root { --couverture-ratio: 4; }
.pf-couverture, .up-couverture,
.profil-banniere-apercu, .visuel-apercu-bandeau, .scene-couverture-apercu,
.cover-image, .fic-banniere, .univers-carte-couv,
.scene-carte-couverture img, .scene-tete-couverture,
.reprise-image-couverture, .garder-image-couverture,
.jl-lieu-image, .jl-lieu-couv,
.ech-banniere, .ech-carte-page-couv,
.evt-image-apercu, .evt-carte-image img {
height: auto;
aspect-ratio: var(--couverture-ratio);
}
img:is(.profil-banniere-apercu, .scene-couverture-apercu, .visuel-apercu-bandeau, .reprise-image-couverture,
.garder-image-couverture, .ech-banniere, .ech-carte-page-couv),
:is(.cover-image, .fic-banniere, .univers-carte-couv, .scene-carte-couverture, .scene-tete-couverture, .jl-lieu-image) > img {
object-fit: cover;
object-position: 50% 50%;
}
.pf-couverture, .jl-lieu-couv { background-size: cover; background-position: center; }
.repli-plie > summary { overflow-wrap: anywhere; }
.repli-18 {
display: inline-block;
margin-right: 4px;
padding: 0 6px;
border-radius: var(--rayon-pilule);
background: var(--warn-soft);
color: var(--warn);
font-size: 11.5px;
font-weight: 700;
line-height: 1.6;
vertical-align: 1px;
}
.repli-plie > .carte,
.repli-plie > .univers-carte,
.repli-plie > article { margin-top: 0; }
.univers-carte-repli,
.rech-jeu-repli,
.jl-lieu-repli,
.jl-evt-repli { margin-top: 0; min-width: 0; }
.univers-carte-repli[open] > summary,
.rech-jeu-repli[open] > summary,
.jl-lieu-repli[open] > summary,
.jl-evt-repli[open] > summary { border-bottom: 1px solid var(--line); }
.jl-page-repli,
.fic-repli-texte { margin-top: 16px; }
.jl-page-repli > :not(summary),
.fic-repli-texte > :not(summary) { margin-left: 14px; margin-right: 14px; }
.annuaire-replies { margin-top: 16px; }
.rideau-adulte {
margin-top: 16px;
padding: 16px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.rideau-adulte-titre {
margin: 0;
font-family: var(--font-title);
font-size: 18px;
font-weight: 600;
color: var(--ink);
overflow-wrap: anywhere;
}
.rideau-adulte-titre .ico { width: 16px; height: 16px; vertical-align: -2px; background-color: var(--warn); }
.rideau-adulte-quoi { margin: 8px 0 0; color: var(--muted); line-height: 1.5; }
.rideau-adulte-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.nouvelles-erreur,
.nouvelles-vide,
.nouvelle-toutes { margin-top: 14px; }
.nouvelle-publier > .nouvelle-composeur,
.nouvelle-modifier > .nouvelle-composeur { margin-top: 12px; }
.nouvelle-composeur { display: grid; gap: 12px; min-width: 0; }
.nouvelle-composeur .comp-corps { min-width: 0; }
.nouvelle-composeur-titre {
font-family: var(--font-title);
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
.nouvelle-reglages { display: grid; border-top: 1px solid var(--line); }
.nouvelle-reglage { align-items: flex-start; }
.nouvelle-reglage label {
display: grid;
gap: 2px;
min-width: 0;
overflow-wrap: anywhere;
color: var(--ink);
}
.nouvelle-reglage .mine { color: var(--muted); }
.nouvelle-reglage .interrupteur { flex: none; margin-top: 2px; }
.nouvelle-ancienne-image { flex-wrap: wrap; }
.nouvelle-ancienne-image img {
flex: none;
width: 64px;
height: 64px;
object-fit: cover;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface);
}
.nouvelle-composeur .comp-barre { min-width: 0; }
div.tan-texte > :first-child { margin-top: 0; }
div.tan-texte > :last-child { margin-bottom: 0; }
div.tan-texte p { margin: 0 0 .6em; }
div.tan-texte h3 { margin: .8em 0 .3em; font-family: var(--font-title); font-size: 16px; font-weight: 600; line-height: 1.3; }
div.tan-texte blockquote { margin: .6em 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--muted); }
.jl-evt-onglets { margin-top: 12px; min-width: 0; }
.jl-evt-onglets > .onglets-liens { flex-wrap: wrap; }
.jl-evt-onglets a { overflow-wrap: anywhere; }
.jl-page > .hint { margin-top: 12px; }
.jl-page > .rule { margin: 20px 0 12px; }
.jl-evt-couverture { margin: 12px 0 0; }
.fiche-image-seule .danger { margin-top: 12px; }
.fiche-image-seule .pf-image-seule { margin-top: 16px; }
.fiche-image-retirer { margin-top: 14px; }
@media (min-width: 900px) {
.fenetre-corps :is(
.page > h1,
.page > .page-titre,
.page > .titre-ligne,
.lecture-texte > h1,
.blog-tete > h1,
.plan-tete > h1,
.reperes-tete > h1,
.succes-entete > h1:first-child,
.fiche-saisie > h1,
.soutenir > h1:first-child,
.candidature-moderation > h1:first-child,
.page > :is(p.mine, .page-retour):has(> a:first-child):has(+ :is(h1, .page-titre, .titre-ligne, .succes-entete)),
.fiche-saisie > p.mine:has(> a:first-child):has(+ h1),
:is(.lecture-texte, .blog-tete, .plan-tete, .reperes-tete) > .fil-blog:has(+ h1)
) {
margin-left: 0;
}
}
.theme-police-fraunces { font-family: 'Fraunces', Georgia, serif; }
.theme-police-instrument { font-family: 'Instrument Sans', system-ui, sans-serif; }
.theme-police-caveat { font-family: 'Caveat', cursive; }
.pastilles-polices .radio-pastille > span { font-size: 15px; }
.pastilles-polices .radio-pastille > span.theme-police-caveat { font-size: 18px; }
.badge-equipe {
display: inline-block;
margin-right: .25em;
line-height: 0;
vertical-align: -.15em;
white-space: nowrap;
}
.badge-equipe-bulle { display: block; width: 1em; height: 1em; }
.registre-saisie { display: block; position: relative; }
.registre-saisie .saisie-propositions { max-height: 320px; overflow-y: auto; }
.bottin-poser .registre-saisie { flex: 1; min-width: 160px; }
.bottin-poser .registre-saisie .field { width: 100%; }
.visage-prenom-nom + .mine { margin-top: 6px; }
.tuile-creation {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 260px;
padding: 16px 12px;
border: 2px dashed var(--line-strong);
border-radius: 16px;
background: transparent;
color: var(--muted);
text-align: center;
text-decoration: none;
transition: border-color .15s, color .15s, background-color .15s;
}
.fiches-grille-profil .tuile-creation { min-height: 220px; }
.tuile-creation:hover {
border-color: color-mix(in oklab, var(--teinte-parties) 55%, var(--line-strong));
background: color-mix(in oklab, var(--teinte-parties) 6%, transparent);
color: var(--ink);
}
.tuile-creation:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--ink); }
.tuile-creation-plus { font-family: var(--font-ui); font-size: 56px; font-weight: 300; line-height: 1; }
.tuile-creation-texte { font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
@media (max-width: 420px) {
.tuile-creation { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
.tuile-creation { transition: none; }
}
.panneau-perso-tete[hidden] { display: none; }
@media (min-width: 1024px) {
:root { --panneau-perso-l: clamp(340px, 28vw, 420px); }
.app > .panneau-perso {
position: fixed;
z-index: 74;
top: var(--hauteur-entete);
right: 0;
bottom: 0;
left: auto;
width: var(--panneau-perso-l);
max-height: none;
margin: 0;
border: 0;
border-left: 1px solid var(--line-strong);
border-radius: 0;
background: var(--paper);
color: var(--ink);
box-shadow: -18px 0 40px -28px color-mix(in srgb, black 55%, transparent);
}
.app > .panneau-perso[hidden] { display: none; }
.app > .pf-retouche-form.panneau-perso {
display: block;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 16px 0;
}
.app > .pf-retouche-form.panneau-perso > .panneau-perso-tete {
position: sticky;
top: 0;
z-index: 2;
margin: 0 -16px 14px;
}
.panneau-perso .theme-ambiances-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app > .panneau-perso .theme-boutons {
position: sticky;
bottom: 0;
z-index: 2;
margin: 14px -16px 0;
padding: 10px 16px;
border-top: 1px solid var(--line);
background: var(--paper);
}
.app > .cp-panneau.panneau-perso .cp-panneau-corps { padding-bottom: 0; }
.app:not(.sans-navigation):has(> .panneau-perso:not([hidden])) {
grid-template-columns: var(--largeur-colonne-jeux) 0 minmax(0, 1fr);
}
.app:has(> .panneau-perso:not([hidden])) .menu-nav { display: none; }
.app:has(> .panneau-perso:not([hidden])) > .scroll { margin-right: var(--panneau-perso-l); }
body:has(.app > .panneau-perso:not([hidden])) #chatbox { right: calc(var(--panneau-perso-l) + 28px); }
body:has(.app > .panneau-perso:not([hidden])) #tel-dock { right: calc(var(--panneau-perso-l) + 94px); }
}
.pf-retouche.panneau-perso-dehors[open] { flex: 0 1 auto; }
.pf-retouche.panneau-perso-dehors > summary .pf-retouche-geste { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.album-tete { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
.album-tete .pf-album-titre { flex: 1; min-width: 0; margin: 0; }
.album-tete .pf-album-titre .etiq { margin-left: 4px; font-family: var(--font-ui); font-size: 12px; vertical-align: middle; }
.album-tete-menu { flex: none; }
.album-geste { max-width: 460px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.album-geste-titre { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.album-geste-titre a { margin-left: auto; }
.album-geste .pf-retouche-form { display: grid; gap: 6px; }
.album-couverture-marque {
position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--ink); font-size: 11.5px; font-weight: 600; pointer-events: none;
}
.pf-media-retirer .carte-menu-liste { top: calc(100% + 6px); bottom: auto; }
.pf-media-retirer .carte-menu-liste button { height: auto; }
@media (max-width: 560px) {
.album-geste { max-width: none; }
}
.pf-album small .repli-18, .album-tete .repli-18 { margin-left: 4px; }
.album-repli { margin: 0 0 12px; }
.album-repli { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.album-repli p { margin: 0 0 6px; }
.album-repli-reglage { margin: 8px 0 0; }
.fil-voir { flex-wrap: wrap; }
.fil-voir > .reglage-nom { flex: 1 1 12em; }
.fil-voir-choix { flex: 0 1 auto; min-width: 0; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
.fil-voir-choix > .radios-pastilles { min-width: 0; }
.fil-prevenir { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.fil-prevenir label { cursor: pointer; }
.crayon {
display: inline-grid; place-items: center; flex: none;
width: 32px; height: 32px; margin-left: 6px; vertical-align: middle;
border-radius: 50%; color: var(--muted); background: transparent; text-decoration: none;
}
.crayon:hover, .crayon:focus-visible, .crayon[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
.crayon .ico { width: 15px; height: 15px; }
@media (pointer: coarse) {
.crayon { width: 44px; height: 44px; }
}
.crayon.pf-couverture-modifier {
width: 40px; height: 40px; min-height: 40px; padding: 0; gap: 0; margin: 0;
display: grid; place-items: center; border-radius: 50%; color: var(--ink);
}
.crayon.pf-photo-modifier { margin: 0; color: var(--ink); background: var(--surface-2); }
.crayon.pf-couverture-modifier .ico, .crayon.pf-photo-modifier .ico { width: 16px; height: 16px; }
.pf-volet-titre .crayon, .perso-textes h2 .crayon, .pf-qui h1 .crayon { font-size: 1rem; }
.fp-bloc-titre .crayon { margin-left: auto; }
.gal-modifier.crayon { min-width: 44px; min-height: 44px; margin-left: auto; }
.pf-crayon-ligne { display: flex; justify-content: flex-end; margin: 0 0 -8px; }
.crayon-partie { margin: 10px 0 0; }
.crayon-partie[hidden] { display: none; }
.crayon-partie .acte-enregistrer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-une-modifier .crayon { margin-left: 0; }
.comp-commun { min-width: 0; }
.comp-commun-colonne { flex: 1 1 auto; min-width: 0; display: grid; gap: 8px; }
.comp-commun .qdn-ligne-tete > .comp-commun-colonne:only-child { grid-column: 1 / -1; }
.comp-commun .qdn-ligne-tete:has(> .comp-commun-colonne:only-child) ~ .qdn-plus { padding-left: 0; }
.comp-commun-propre.qdn-plus { padding-left: 0; margin-top: 0; }
.comp-commun-propre { display: grid; gap: 8px; min-width: 0; }
.comp-commun-propre:empty { display: none; }
.comp-commun-propre .lab { margin-top: 0; }
.comp-commun-titre {
font-family: var(--font-title);
font-size: 16px;
font-weight: 600;
color: var(--ink);
}
.comp-ancienne-image { display: flex; align-items: center; gap: 10px; }
.comp-ancienne-image img {
width: 64px; height: 64px; object-fit: cover; flex: none;
border: 1px solid var(--line); border-radius: var(--rayon);
}
.comp-annuler { margin-right: 6px; color: var(--muted); }
.comp-annuler:hover, .comp-annuler:focus-visible { color: var(--ink); }
div.pub-texte > p, .pot-texte > p, .idee-texte > p, .mai-texte > p { margin: 0 0 8px; }
div.pub-texte > p:last-child, .pot-texte > p:last-child, .idee-texte > p:last-child, .mai-texte > p:last-child { margin-bottom: 0; }
.fic-nouvelle-composeur, .mai-publier.composeur-carte, .av-publier.composeur-carte { margin: 12px 0; padding: 10px 12px; }
.ann-poser .comp-commun { margin-top: 10px; }
.pot-composeur .hint { margin: 0; }
.fp-bloc:has(> .fp-bloc-corps > .crayon-partie:not([hidden])) .fp-bloc-lignes,
.section:has(> .crayon-partie:not([hidden])) > .fp-texte-corps { display: none; }
.fp-bloc-form { display: grid; gap: 10px; }
.fp-bloc-form > .danger { margin: 0; }
.fp-bloc-note { margin: 0; font-size: 13px; }
.fp-info-famille { display: grid; gap: 4px; }
.fp-famille { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.fp-famille li { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fp-famille a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; }
.fp-famille a:hover span, .fp-famille a:focus-visible span { text-decoration: underline; }
.fp-famille-photo { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; }
.fp-bloc-attente {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 8px 0 4px; padding: 8px 10px; border-radius: var(--rayon);
background: var(--accent-soft); color: var(--ink); font-size: 13px;
}
.fp-bloc-attente .ico { width: 16px; height: 16px; flex: none; }
.fp-bloc-attente > span { flex: 1 1 12em; min-width: 0; }
.fp-bloc-attente form { margin: 0; }
.fp-bloc-attente .lien-bouton { min-height: 44px; margin: 0; padding: 0 4px; }
.jl-membre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.jl-membre > .esp-ligne { flex: 1 1 14em; min-width: 0; }
.jl-membre > .jl-gestes { flex: 0 1 auto; margin: 0; align-items: center; }
.jl-groupe-mot { flex: 1 1 100%; margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); color: var(--ink); }
.jl-groupe-role { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.jl-groupe-role .field { width: 9em; min-width: 0; margin: 0; }
@media (max-width: 560px) {
.jl-membre > .jl-gestes { flex: 1 1 100%; }
.jl-groupe-role { flex: 1 1 auto; }
.jl-groupe-role .field { flex: 1 1 auto; width: auto; }
}
.bascule-adultes { margin: 12px 0 0; }
.bascule-adultes > .adultes-bascule { margin-top: 0; }
.bascule-adultes > .note-box { margin: 0 0 8px; }
.pot-image, .ann-image, .idee-image { display: block; margin-top: 10px; }
.tel-appli-echo .ech-composeur .ghost,
.tel-appli-echo .ech-composeur .comp-commun-titre {
background: var(--hm-surface-2);
border-color: var(--hm-trait);
color: var(--hm-texte);
}
.tel-appli-echo .ech-composeur .comp-barre { border-top-color: var(--hm-trait); }
.tel-appli-echo .ech-composeur .comp-barre-bouton,
.tel-appli-echo .ech-composeur .comp-barre .comp-outil { color: var(--hm-texte-2); }
.tel-appli-echo .ech-composeur .comp-barre-bouton:hover,
.tel-appli-echo .ech-composeur .comp-barre .comp-outil:hover,
.tel-appli-echo .ech-composeur .comp-barre-bouton[aria-expanded='true'] { color: var(--hm-accent); }
.tel-appli-echo .ech-modifier.comp-commun { margin: 8px 0; }
.rel-form.comp-commun .comp-corps { display: grid; gap: 4px; }
.rel-form.comp-commun .ghost { border: 1px solid var(--line-strong); border-radius: 9px; background: var(--paper); color: var(--ink); }
.rel-form.comp-commun .comp-barre { margin-top: 12px; }
.bs-ecrire.comp-commun .comp-corps { display: grid; gap: 8px; }
.bs-ecrire.comp-commun .bs-sous { margin: 0; }
.bs-ecrire.comp-commun .ghost {
min-height: 38px; max-height: calc(1.4em * 5 + 18px); overflow-y: auto;
padding: 8px 14px; border: 1px solid var(--bs-filet); border-radius: 19px;
background: var(--bs-carte); color: var(--bs-texte); font-size: 14px; line-height: 1.4;
}
.bs-ecrire.comp-commun .ghost:focus { outline: none; border-color: var(--bs-rouge); box-shadow: 0 0 0 3px var(--bs-doux); }
.bs-ecrire.comp-commun .comp-barre { flex-wrap: wrap; margin: 0; padding: 0; border-top: 0; }
.bs-ecrire.comp-commun .comp-barre-droite { margin-left: auto; }
.bs-ecrire.comp-commun .comp-barre-bouton,
.bs-ecrire.comp-commun .comp-barre .comp-outil { color: var(--bs-texte-2); }
.photo-en-grand { display: block; border-radius: inherit; cursor: zoom-in; }
.photo-en-grand:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pf-couverture, .jl-lieu-couv { position: relative; }
.photo-en-grand-voile { position: absolute; inset: 0; border-radius: inherit; cursor: zoom-in; }
.photo-en-grand-voile:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.peg { margin: 0 0 18px; }
.peg-titre { margin: 0 0 12px; }
.peg-cadre { margin: 0; text-align: center; }
.peg-lien { display: inline-block; max-width: 100%; cursor: zoom-in; }
.peg-image {
display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; margin: 0 auto;
border-radius: var(--rayon-l); background: var(--surface-2); object-fit: contain;
}
.peg-photo .peg-image { max-height: min(70vh, 640px); }
.peg-couverture .peg-lien { display: block; width: 100%; cursor: default; }
.peg-couverture .peg-image {
width: 100%; height: auto; max-height: none; aspect-ratio: auto; object-fit: contain; transform: none;
}
.peg-legende { margin: 8px 0 0; }
.peg-fleches { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 0; }
.peg-fleche { display: inline-flex; align-items: center; gap: 6px; }
.peg-fleche .ico { width: 14px; height: 14px; }
.peg-retirer { margin: 12px 0 0; text-align: right; }
.peg-retirer .btn { display: inline-flex; align-items: center; gap: 6px; }
.peg-retirer .ico { width: 14px; height: 14px; }
.peg-publication { margin-top: 16px; }
.peg-publication .pub-medias,
.peg-publication .pub-carrousel,
.peg-publication .fic-nouvelle-media { display: none; }
.visage-deux-champs { min-width: 0; margin: 0; padding: 0; border: 0; }
.visage-deux-champs > legend.lab:not(.visuellement-cache) { float: left; width: 100%; margin-top: 16px; padding: 0; }
.visage-deux-champs > legend.lab:not(.visuellement-cache) ~ * { clear: both; }
.visage-deux-champs .registre-saisie > .champs .champ .lab:first-child { margin-top: 6px; }
.visage-deux-champs > .champs .champ .lab:first-child { margin-top: 6px; }
.visage-deux-compact { flex: 1 1 320px; }
.visage-deux-compact .champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.visage-deux-compact .field { width: 100%; margin: 0; }
.bottin-poser .visage-deux-compact .registre-saisie { flex: none; min-width: 0; }
.bottin-demande { border-left-color: var(--line-strong); border-left-style: dashed; }
.bottin-mention { color: var(--muted); text-decoration: none; }
a.bottin-mention:hover { color: var(--accent); text-decoration: underline; }
.bottin-carte-corps .bottin-mention { align-self: flex-start; margin: 2px 0; }
.bottin-actes { flex-wrap: wrap; align-items: baseline; }
.bottin-refuser-demande { display: inline-flex; gap: 6px; align-items: baseline; }
.bottin-refuser-demande .field { width: auto; min-width: 0; max-width: 220px; margin: 0; padding: 4px 8px; font-size: 12px; }
.bottin-corriger { flex-basis: 100%; }
.bottin-corriger > summary { color: var(--faint); font-size: 12px; cursor: pointer; }
.bottin-corriger > summary:hover { color: var(--accent); }
.bottin-duree, .bottin-sans-fin { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.bottin-duree .field { flex: 0 0 auto; width: 80px; min-width: 0; }
.bottin-sans-fin { padding: 0; border: 0; }
.bottin-pour .radios-pastilles, .bottin-pour .choix-unique { flex-basis: 100%; }
.visage-deux-champs .visage-instagram { margin-top: 8px; }
.visage-deux-compact .visage-instagram { margin-top: 8px; }
.visage-deux-compact .visage-instagram .field { width: 100%; }
.visage-carte .portrait { aspect-ratio: 1 / 1; object-position: 50% 50%; }
.card .visage-vignette { display: block; margin: 0; position: relative; border-radius: 9px; }
.visage-vignette .portrait { display: block; }
@media (hover: hover) and (pointer: fine) {
.visage-vignette { cursor: zoom-in; }
.visage-vignette:hover,
.visage-vignette:focus-visible { z-index: 3; }
.visage-vignette:hover .portrait,
.visage-vignette:focus-visible .portrait {
transform: scale(1.9);
transform-origin: 50% 0;
box-shadow: var(--ombre-carte);
outline: 1px solid var(--line);
}
.visage-vignette:focus-visible { outline: none; }
.visage-vignette:focus-visible .portrait { outline: 2px solid var(--line-strong); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.visage-vignette .portrait { transition: transform .15s ease-out; }
}
.difference ins {
background: color-mix(in srgb, var(--accent) 26%, transparent);
font-weight: 600;
}
.difference-replie { margin: 0 0 6px; }
.difference-replie > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.difference-replie > del, .difference-replie > ins { display: block; margin-top: 4px; white-space: normal; }
.changement-demande + .changement-demande { margin-top: 4px; }
.up-fil-onglet { margin-top: 16px; }
.up-fil-onglet > h2 { margin: 0; }
.up-fil-onglet .pubs { margin-top: 14px; }
.fil-nouveaute {
display: flex; align-items: center; gap: 12px; min-width: 0;
padding: 12px 16px;
}
.fil-nouveaute-icone {
flex: none; display: grid; place-items: center; width: 34px; height: 34px;
border-radius: 50%; background: var(--paper); color: var(--accent-ink);
}
.fil-nouveaute-icone svg { width: 18px; height: 18px; }
.fil-nouveaute-texte { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
.fil-nouveaute-texte .etiq { margin-right: 6px; }
.fil-nouveaute-texte a { color: var(--ink); font-weight: 600; }
.fil-nouveaute-quand { flex: none; color: var(--muted); font-size: 13px; }
.membres-cartes.up-membres { display: grid; gap: 12px; margin: 0; }
.up-membres-tous .membres-cartes { margin-top: 4px; }
.membre-carte .membre-carte-nom { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 16px; }
.membre-carte-pseudo { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
a.membre-carte-pseudo { text-decoration: none; }
a.membre-carte-pseudo:hover, a.membre-carte-pseudo:focus-visible { text-decoration: underline; }
.membre-carte .membre-carte-meta { color: var(--muted); font-size: 13.5px; }
.membre-carte .pub-etiquettes { margin-top: 8px; }
.membre-carte-aucun { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.membre-carte .membre-carte-persos {
display: grid; gap: 6px; margin: 10px 0 0; padding: 0;
overflow: visible; list-style: none;
}
.membre-carte .membre-carte-perso {
display: flex; flex-direction: row; align-items: center; gap: 10px;
width: auto; min-height: 44px; padding: 4px 8px 4px 4px; border-radius: 12px;
color: var(--ink); font-size: 15px; text-align: left; text-decoration: none;
}
.membre-carte a.membre-carte-perso:hover,
.membre-carte a.membre-carte-perso:focus-visible { background: var(--paper); }
.membre-carte a.membre-carte-perso:hover,
.membre-carte a.membre-carte-perso:focus-visible { background: var(--accent-soft); }
.membre-carte a.membre-carte-perso:hover .membre-carte-perso-nom { text-decoration: underline; }
.membre-carte .membre-carte-perso-photo { flex: none; width: 36px; height: 36px; font-size: 13px; }
.membre-carte .membre-carte-perso-nom {
min-width: 0; color: var(--ink); font-weight: 600;
white-space: normal; overflow: visible; overflow-wrap: anywhere;
}
.visage-recadrage .champ-image-bouton { display: none; }
.visage-recadrage-apercu { width: min(240px, 100%); margin: 6px 0 10px; }
.visage-recadrage-apercu .portrait {
display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
object-fit: cover; border-radius: 9px;
}
.jeux-dernier { font-size: 12px; line-height: 1.4; }
.jeux-propositions { font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.jeux-etat-records { flex-direction: column; align-items: flex-start; gap: 2px; }
.jeux-record { color: var(--ink); font-weight: 600; }
.jeux-record-mien { color: var(--accent-ink); }
.jeux-record[hidden], .jeux-ton-record[hidden], .jeux-couronne[hidden] { display: none; }
.jeux-couronne .ico { width: 14px; height: 14px; vertical-align: -2px; }
.jeux-records { margin: 12px 0 0; }
.jeux-records p { margin: 0; }
.jeux-records .jeux-record { font-size: 15px; }
.jeux-records .jeux-couronne .ico { width: 16px; height: 16px; }
.jeux-ton-record { color: var(--muted); font-size: 13.5px; }
.jeu-partie-tete .jeu-dernier-coup { flex-basis: 100%; font-weight: 400; font-size: 12.5px; }
.jeu-partie-actes .jeu-zero { margin-left: auto; }
.visages-grille { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.visages-grille .visage-carte {
position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: default;
padding: 8px 8px 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface);
}
.visages-grille .visage-carte .portrait { width: 100%; height: auto; aspect-ratio: 1 / 1; font-size: 30px; }
.visages-grille .visage-carte > span:not(.portrait):not(.visage-vignette) {
margin-top: 8px; padding-right: 30px; color: var(--ink); font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere;
}
.visages-grille .visage-carte small { font-size: 12.5px; }
.visages-grille .visage-carte-menu { position: absolute; right: 2px; bottom: 6px; margin: 0; }
.visages-grille .visage-carte-menu .carte-menu-bouton { min-width: 36px; min-height: 36px; font-size: 18px; }
.visages-grille .visage-carte { text-align: left; }
.visages-grille .visage-carte small:last-of-type { padding-right: 30px; }
.membres-cartes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.membres-cartes > .membre-carte { margin: 0; }
.membre-carte .membre-carte-qui .pub-etiquettes { margin-top: 4px; }
.entete-tiroir-point {
position: absolute; right: 3px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%;
background: var(--nav-chiffre); box-shadow: 0 0 0 2px var(--surface);
}
.adoption-demande .adoption-tete {
display: flex; align-items: center; gap: 14px; margin: 14px 0 6px; padding: 12px;
border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface);
}
.adoption-tete-portrait { flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--rayon); object-fit: cover; }
.adoption-tete-texte { min-width: 0; }
.adoption-tete-texte .mine { margin: 2px 0 0; }
.adoption-tete-nom { margin: 6px 0 0; color: var(--ink); font-size: 16px; overflow-wrap: anywhere; }
.adoption-etapes { margin: 6px 0 0; padding-left: 22px; color: var(--muted); }
.adoption-etapes li { margin: 4px 0; }
.adoption-form { margin-top: 14px; }
.adoption-form textarea { width: 100%; }
.adoption-demande-carte {
margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface);
}
.adoption-demande-titre { margin: 0 0 8px; font-size: 15px; color: var(--ink); }
.adoption-demande-qui { display: flex; align-items: center; gap: 10px; }
.adoption-demande-face { flex: 0 0 auto; width: 34px; height: 34px; font-size: 12px; }
.adoption-mot {
margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--accent-soft);
color: var(--ink); background: var(--surface-2); border-radius: var(--rayon-s); white-space: pre-line;
}
.adoption-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.adoption-boutons form { margin: 0; }
.adoption-partie { margin: 0 0 6px; color: var(--ink); }
.adoption-copie { border-color: var(--accent-soft); }
.adoption-a-valider { display: block; padding: 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); margin: 10px 0; }
.adoption-a-valider-tete { display: flex; align-items: center; gap: 12px; }
.adoption-a-valider .mine { margin: 6px 0 0; }
.adoption-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.adoption-change-titre { margin: 10px 0 4px; }
.adoption-change { display: flex; flex-wrap: wrap; gap: 6px; }
.adoption-change-chip { background: var(--accent-soft); color: var(--accent-ink); }
.adoption-changements { border-color: var(--warn); }
.adoption-changements p { margin: 6px 0 0; }
.pub-journal-photo { display: block; width: 180px; max-width: 100%; margin-top: 10px; }
.pub-journal-photo img {
display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
border-radius: var(--rayon); background: var(--surface-2);
}
.fp-gauche .fp-bloc-form .champs { grid-template-columns: minmax(0, 1fr); }
.fp-gauche .fp-bloc-form .champ > .field { width: 100%; }
@media (min-width: 700px) {
.champs { grid-template-columns: repeat(auto-fit, minmax(max(240px, calc(50% - 9px)), 1fr)); }
}
select.field { text-overflow: ellipsis; }
.reglages:has(#faceclaim:not(:checked)) .reglage:has(#visages_jumeaux) { display: none; }
.visage-jumeau { margin: 6px 0 0; color: var(--muted); }
.fp-bio-outils { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.fp-bio-outils .crayon { font-size: 1rem; }
.fp-bio-champs { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.fp-bio-champs .fiche-texte-titre { color: var(--ink); }
.fp-perso #fp-biographie .fp-bio-champs .prose > p:first-child::first-letter {
float: none; padding: 0; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit;
}
.jeu-partie-tete > .jeu-partie-menu { flex: none; }
.jeu-partie-tete > .jeu-partie-menu .carte-menu-liste { font-weight: 400; }
.visage-sorte { margin: 0 0 8px; }
.visage-sorte-cases { margin: 6px 0 0; }
.visage-deux-champs:has(input[name="visage_sorte"]:checked) .visage-sorte-cases { display: none; }
.visage-deux-champs:has(input[name="visage_sorte"][value="reel"]:checked) .visage-sorte-reel,
.visage-deux-champs:has(input[name="visage_sorte"][value="personnage"]:checked) .visage-sorte-personnage,
.visage-deux-champs:has(input[name="visage_sorte"][value="illustration"]:checked) .visage-sorte-illustration,
.visage-deux-champs:has(input[name="visage_sorte"][value="ia"]:checked) .visage-sorte-ia { display: block; }
.visage-deux-champs:has(input[type="hidden"][name="visage_sorte"]) .visage-sorte-cases { display: block; }
.visage-sorte-ia:has(input[name="visage_ia"][value="moi"]:checked) .visage-ia-auteur { display: none; }
.visage-genre, .visage-ia-auteur { margin-top: 6px; }
.visage-sorte-cases .mine { margin: 4px 0 0; font-size: 12.5px; }
.visage-form:has(input[name="sorte"][value="reel"]:checked) .visage-registre-personnage { display: none; }
.visage-form:has(input[name="sorte"][value="personnage"]:checked) .visage-registre-reel,
.visage-form-personnage .visage-registre-reel { display: none; }
.visage-registre-personnage { margin: 8px 0; }
.visages-oeuvre { grid-column: 1 / -1; margin: 14px 0 2px; font-size: 1rem; color: var(--ink); }
.visages-oeuvre:first-child { margin-top: 0; }
.visage-carte-bas {
display: flex; align-items: center; gap: 6px; min-height: 28px; margin-top: 2px;
}
.visages-grille .visage-carte:has(.visage-carte-menu) .visage-carte-bas { padding-right: 34px; }
.visages-grille .visage-carte .visage-carte-bas small { padding-right: 0; }
.visage-instagram-lien {
display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 28px; height: 28px; border-radius: var(--rayon-pilule);
color: var(--muted); text-decoration: none; transition: color .15s;
}
.visage-carte-bas .visage-instagram-lien { margin-left: auto; }
.visage-instagram-lien:hover, .visage-instagram-lien:focus-visible { color: var(--accent); }
.visage-instagram-lien .reseau-logo { width: 16px; height: 16px; }
.crayon-bloc:has(> .crayon-partie:not([hidden])) > .crayon-lecture,
.pf-une-cote:has(> .crayon-partie:not([hidden])) > .pf-une { display: none; }
.pf-retouche-en-place { min-width: 0; flex: 1 1 100%; }
.crayon-bloc + .pf-retouche-dit { display: inline-block; margin-top: 6px; }
.pf-succes-tout .succes-famille:first-of-type .succes-famille-titre { margin-top: 6px; }
.fp-relations-vide { margin: 4px 0 12px; }
.fp-relations-vide .vide { margin: 0 0 8px; }
.predefini-relations { margin: 0 0 12px; }
:where(div, p, li, section, form, fieldset, legend, h1, h2, h3, h4)[data-info-ancre],
:where(.row > span[data-info-ancre]) { position: relative; }
:where(span, label, summary, td, th, dt, dd)[data-info-ancre] { position: relative; }
:where(span, label, summary, td, th, dt, dd)[data-info-ancre] > .info-bulle-flottante { max-width: min(320px, calc(100vw - 32px)); }
.pub-qui:has(> .badge-equipe) { grid-template-columns: auto minmax(0, 1fr); column-gap: 0; }
.pub-qui > .badge-equipe { align-self: center; }
.pub-qui:has(> .badge-equipe) > :not(.badge-equipe, .pub-nom) { grid-column: 1 / -1; }
.creer-pseudo { margin: 0; }
.creer-pseudo > .info-i { vertical-align: text-bottom; margin-left: 2px; }
.candidature-personnage-phrase { display: none; margin: 6px 0 0; }
.reglage-colonne:has(input[name="recrutement"][value="sur_candidature"]:checked) ~ .candidature-personnage:has(input[value="apres"]:checked) .candidature-personnage-phrase[data-pour="apres"],
.reglage-colonne:has(input[name="recrutement"][value="sur_candidature"]:checked) ~ .candidature-personnage:has(input[value="ensemble"]:checked) .candidature-personnage-phrase[data-pour="ensemble"],
form:has(input[name="recrutement"][value="sur_candidature"]:checked) .candidature-personnage:has(input[value="apres"]:checked) .candidature-personnage-phrase[data-pour="apres"],
form:has(input[name="recrutement"][value="sur_candidature"]:checked) .candidature-personnage:has(input[value="ensemble"]:checked) .candidature-personnage-phrase[data-pour="ensemble"],
form:has(input[name="recrutement"][value="ouvert"]:checked) .candidature-personnage-phrase[data-pour="ouvert"],
form:has(input[name="recrutement"][value="ferme"]:checked) .candidature-personnage-phrase[data-pour="ferme"] { display: block; }
form:has(input[name="recrutement"][value="ouvert"]:checked) .candidature-personnage .radios-pastilles,
form:has(input[name="recrutement"][value="ferme"]:checked) .candidature-personnage .radios-pastilles {
opacity: .5;
pointer-events: none;
}
.candidater-etapes { margin: 12px 0 0; padding-left: 20px; color: var(--muted); }
.candidater-etapes li { margin: 2px 0; }
.candidater-partie,
.candidature-partie {
margin: 18px 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--line);
}
.candidater-partie-titre,
.candidature-partie-titre {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 8px;
font-family: var(--font-title);
}
.candidature-partie-titre { font-size: 15px; }
.candidater-numero {
display: inline-grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: var(--rayon-pilule);
background: var(--accent-soft);
color: var(--accent-ink);
font-size: 12px;
font-family: inherit;
}
.candidater-origine-phrase { margin: 8px 0 0; }
.candidater-erreur-personnage { margin: 6px 0 0; }
.candidater-personnage select[aria-invalid="true"] { border-color: var(--warn); }
.candidature-avec { margin: 6px 0 0; }
.candidature-fiche {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 8px 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--rayon);
background: var(--surface-2);
}
.candidature-fiche-lien { margin-left: auto; }
.candidature-decisions {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 8px;
margin: 10px 0 0;
}
.candidature-geste > summary { list-style: none; cursor: pointer; }
.candidature-geste > summary::-webkit-details-marker { display: none; }
.candidature-geste > summary[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.candidature-geste[open] { flex-basis: 100%; }
.candidature-geste form { margin: 8px 0 0; }
.candidature-geste form .btn { margin-top: 8px; }
.fiche-retouches { margin: 4px 0 0; }
.membre-carte-attente { color: var(--accent-ink); }
.premier-personnage-mot { margin: 8px 0 0; font-style: italic; white-space: pre-line; }
.page > .jl-onglets + .esp-page { margin-top: 12px; }
@media (min-width: 900px) {
.page > .jl-onglets {
margin-left: calc((min(var(--titre-page), 100cqw) - min(var(--largeur-titres), 100cqw)) / 2 - var(--titre-decalage, 0px));
}
}
@media (min-width: 1440px) {
.esp-page:not(:has(> aside)) { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) {
.fic-portes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 4px; }
.fic-portes > .btn { width: auto; }
.fic-portes > p.mine { flex: 1 1 100%; margin: 2px 0 0; }
}
fieldset.choix-multiples.profil-liste { margin-top: 18px; }
fieldset.choix-multiples.profil-liste .choix-ligne .mine { font-size: 12.5px; }
fieldset.choix-multiples.fic-relations > .mine { margin: 6px 0 0; }
fieldset.choix-multiples:disabled .choix-multiples-resume { cursor: default; opacity: .7; }
.pf-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.pf-titre-ligne > h1 { min-width: 0; }
.etiq.fic-genre-titre { flex: none; }
.fic-pm-auteur .fic-ecrire { margin-top: 8px; width: 100%; }
@media (min-width: 1100px) {
.page:has(.fic-lecture-avec-colonne) { max-width: min(1056px, 100%); }
.fic-lecture-avec-colonne .fic-lecture-texte .prose { max-width: none; }
}
.fic-images-brouillon { margin: 10px 0 0; }
.fic-couv-titre { padding: 0; }
.fic-couv-titre > .fic-couv-nom { margin: 14% 9% 0 15%; font-size: max(8px, 11.4cqi); }
.fic-couv-titre > .fic-couv-auteur { margin: 0 9% 10% 15%; font-size: max(6.5px, 6.5cqi); }
.histoires-grille > .fic-repli { min-width: 0; margin: 0; }
.visionneuse-menu { position: absolute; top: 12px; right: 62px; margin: 0; cursor: default; }
.visionneuse-menu[hidden] { display: none; }
.visionneuse-menu > .carte-menu-bouton {
width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
border-radius: 50%; background: var(--blanc-14); color: var(--sur-visionneuse);
}
.visionneuse-menu > .carte-menu-bouton:hover,
.visionneuse-menu[open] > .carte-menu-bouton { background: var(--blanc-26); color: var(--sur-visionneuse); }
.visionneuse-menu .carte-menu-liste { cursor: default; }
.visionneuse > .veil { position: absolute; inset: 0; z-index: 5; cursor: default; }
button.ech-diapo-signaler-media {
padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline;
}
.chat-actes > .chat-menu { margin-left: 0; }
.chat-actes > .chat-menu > .carte-menu-bouton { min-width: 32px; min-height: 32px; padding: 0 6px; font-size: 16px; }
.pf-tete.fic-tete-page .fic-tete-livre-boite { margin-top: -84px; }
.pf-tete.fic-tete-page .fic-tete-livre { width: 132px; }
.fic-tete-page .pf-couverture-modifier,
.fic-tete-page .pf-photo-modifier { z-index: 1; }
.fic-actes-suivre { margin-left: auto; }
.fic-actes-suivre .form-suivre { margin: 0; }
@media (max-width: 720px) {
.pf-tete.fic-tete-page .fic-tete-livre-boite { margin-top: 0; }
.pf-tete.fic-tete-page .fic-tete-livre { width: 96px; }
}
.repli-tw-choisir { margin: 2px 0 0; }
#repli-tw:has(#repli-tw-case:not(:checked)) .repli-tw-choisir { display: none; }
img[src^="/assets/sections/"] { filter: drop-shadow(0 1px 1.5px var(--ombre-section-28)); }
img[src^="/assets/sections/"]:not(.image-section-mini) { filter: drop-shadow(0 2px 4px var(--ombre-section-22)); }
html[data-theme="sombre"] img[src^="/assets/sections/"] { filter: none; }
@media (prefers-color-scheme: dark) {
html:not([data-theme='clair']) img[src^="/assets/sections/"] { filter: none; }
}
.ecl-rose { display: inline-block; width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; }
.ecl-rose-m { width: 26px; height: 26px; }
.ecl-rose-l { width: 72px; height: 72px; }
.ecl-moi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; }
.ecl-moi b { color: var(--ink); }
.ecl-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: var(--rayon); }
.ecl-etat > p { flex: 1; min-width: 12em; margin: 0; }
.ecl-etat strong { display: block; font-size: 15.5px; }
.ecl-etat .mine { display: block; margin-top: 2px; }
.ecl-etat-a-toi { background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.ecl-etat-attends { background: var(--surface-2); border: 1px dashed var(--line-strong); }
.ecl-etat .jeu-jouer { margin: 0; }
.ecl-etat .jeu-jouer .btn { font-family: var(--font-title); font-size: 18px; white-space: nowrap; }
.ecl-sablier { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: 16px; }
.ecl-av { width: 36px; height: 36px; }
.ecl-av .pub-initiales { font-size: 14px; }
.ecl-av-s { width: 26px; height: 26px; }
.ecl-av-s .pub-initiales { font-size: 11px; }
.ecl-av-l { width: 46px; height: 46px; }
.ecl-av-l .pub-initiales { font-size: 17px; }
.ecl-dix-choix { margin-top: 12px; padding: 12px; border-radius: var(--rayon); background: var(--ecl-rose-soft); border: 1px solid color-mix(in oklab, var(--ecl-rose) 35%, transparent); }
.ecl-btn-rose { display: inline-flex; align-items: center; gap: 8px; background: var(--ecl-rose); border-color: var(--ecl-rose); color: var(--surface); }
.ecl-moment { margin: 16px 0; padding: 18px 12px 16px; text-align: center; border-radius: var(--rayon); background: var(--ecl-rose-soft); border: 1px solid color-mix(in oklab, var(--ecl-rose) 35%, transparent); }
.ecl-moment p { margin: 0; }
.ecl-duo { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 6px 0 8px; }
.ecl-fleche { font-size: 20px; color: var(--ecl-rose); }
.ecl-phrase { font-family: var(--font-title); font-size: 18px; }
.ecl-phrase b { font-weight: 600; color: var(--ecl-rose); }
.ecl-moment .mine { margin-top: 4px; }
.ecl-archive { margin: 16px 0 -6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.ecl-archive summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.ecl-archive summary::-webkit-details-marker { display: none; }
.ecl-archive summary::after { content: '▾'; margin-left: auto; color: var(--muted); }
.ecl-archive[open] summary::after { transform: rotate(180deg); }
.ecl-compteur h2 { display: flex; align-items: center; gap: 8px; }
.ecl-table { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 14px; }
.ecl-table th { padding: 0 6px 6px; text-align: right; vertical-align: bottom; font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--muted); }
.ecl-table td { padding: 7px 6px; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
.ecl-table th:first-child,
.ecl-table td:first-child { padding-left: 0; text-align: left; }
.ecl-table .ecl-trie { font-weight: 600; color: var(--ink); }
.ecl-qui { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.ecl-ma-ligne td { background: var(--accent-soft); }
.ecl-ma-ligne td:first-child { padding-left: 4px; border-radius: 8px 0 0 8px; }
.ecl-ma-ligne td:last-child { border-radius: 0 8px 8px 0; }
.ecl-pied { margin: 10px 0 0; font-size: 12.5px; }
@media (max-width: 720px) {
.ecl-table th { font-size: 11px; }
}
.vitrine-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin: 16px 0 4px; }
.vitrine-logo { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 8px 4px; border-radius: 12px; color: inherit; text-decoration: none; text-align: center; transition: background-color .15s; }
.vitrine-logo:hover { background: var(--surface); }
.vitrine-logo:hover .vitrine-logo-nom { color: var(--accent-ink); }
.vitrine-logo-ecusson { width: 96px; height: 96px; border-radius: 22px; font-size: 30px; overflow: hidden; object-fit: cover; box-shadow: 0 1px 2px var(--noir-12), 0 8px 18px -10px var(--noir-45); }
.vitrine-logo-nom { display: -webkit-box; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vitrine-couvs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; margin: 16px 0 4px; }
.vitrine-couv { position: relative; display: block; border-radius: 3px 7px 7px 3px; color: inherit; text-decoration: none; container-type: inline-size; transition: transform .15s; }
.vitrine-couv:hover { transform: translateY(-2px); }
.vitrine-couv-tw { position: absolute; top: 5cqi; right: 5cqi; z-index: 1; padding: 1px 5px; border-radius: 999px; background: var(--voile-couv-tw); color: var(--sur-visionneuse); font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: .05em; line-height: 1.5; backdrop-filter: blur(2px); }
@media (min-width: 900px) {
.vitrine-couvs { padding: 0 18px; gap: 18px 22px; }
}
@media (max-width: 720px) {
.vitrine-logo-ecusson { width: 72px; height: 72px; border-radius: 17px; font-size: 23px; }
.vitrine-logo-nom { font-size: 12.5px; }
.vitrine-couvs { gap: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .vitrine-couv { transition: none; } .vitrine-couv:hover { transform: none; } }
.reglement .regle-point > p { margin: 0 0 10px; line-height: 1.6; }
.reglement .regle > .regle-point > p { padding-left: 14px; border-left: 3px solid var(--accent-soft); }
.reglement .regle-point .info-i { vertical-align: text-bottom; margin-left: 2px; }
.reglement .regle-bulle p { margin: 0; }
.reglement .regle-bulle:not(.info-bulle-flottante) { margin: 8px 0 10px; }
.bulle-nsfw p { margin: 0; }
.bulle-nsfw p + p { margin-top: 8px; }
.fic-couv-sur-image > .fic-couv-texte {
position: absolute; inset: 0; z-index: 1;
display: flex; flex-direction: column; justify-content: space-between;
background: linear-gradient(180deg, var(--noir-62), var(--noir-0) 46%, var(--noir-0) 68%, var(--noir-60));
color: var(--blanc); text-shadow: 0 1px 3px var(--noir-45);
}
.fic-couv-sur-image .fic-couv-nom { margin: 14% 9% 0 15%; font-size: max(8px, 11.4cqi); }
.fic-couv-sur-image .fic-couv-auteur { margin: auto 9% 10% 15%; font-size: max(6.5px, 6.5cqi); }
.fic-couv .fic-couv-nom.theme-police-caveat { font-size: max(9px, 14cqi); font-weight: 700; }
.fic-couv-titre.fic-couv-place-milieu, .fic-couv-place-milieu > .fic-couv-texte { justify-content: center; }
.fic-couv-titre.fic-couv-place-bas, .fic-couv-place-bas > .fic-couv-texte { justify-content: flex-end; }
.fic-couv-place-milieu .fic-couv-nom, .fic-couv-place-bas .fic-couv-nom { margin: 0 9% 0 15%; }
.fic-couv-place-milieu .fic-couv-auteur { margin: 5% 9% 0 15%; }
.fic-couv-place-bas .fic-couv-auteur { margin: 5% 9% 10% 15%; }
.fic-couv-place-bas .fic-couv-nom:last-child { margin-bottom: 10%; }
.fic-couv-place-milieu > .fic-couv-texte {
background: linear-gradient(180deg, var(--noir-0) 18%, var(--noir-58) 38%, var(--noir-58) 62%, var(--noir-0) 82%);
}
.fic-couv-place-bas > .fic-couv-texte { background: linear-gradient(180deg, var(--noir-0) 40%, var(--noir-66)); }
.fic-couv-titre { color: var(--fic-couv-encre, var(--blanc)); }
.fic-couv-titre::before { background: color-mix(in srgb, currentColor 30%, transparent); }
.fic-atelier { display: grid; gap: 22px; margin-top: 16px; }
.fic-atelier-apercu { display: grid; gap: 14px; justify-items: center; align-self: start; padding: 18px; border-radius: var(--rayon-l, 14px); background: var(--surface-2); }
.fic-atelier-grand { width: 180px; }
.fic-atelier-petits { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: center; }
.fic-atelier-petit { display: grid; gap: 4px; justify-items: center; margin: 0; }
.fic-atelier-petit > .fic-couv { width: 100%; }
.fic-atelier-fil { width: 92px; }
.fic-atelier-profil { width: 62px; }
.fic-atelier-une { width: 44px; }
.fic-atelier-petit figcaption { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.fic-atelier-reglages { min-width: 0; }
.fic-atelier-reglages > .visuel-bloc { margin-top: 0; }
.fic-atelier-form { margin-top: 8px; }
.fic-atelier-ligne { padding: 12px 0; border-top: 1px solid var(--line); }
.fic-atelier-ligne > .mine { margin: 4px 0 0; }
.fic-atelier-inter { padding: 0; border-top: 0; font-size: 14.5px; font-weight: 600; }
.pseudo-teinte-choix .fic-atelier-teinte { background: var(--pseudo-brut); }
.pseudo-teinte-choix .fic-atelier-teinte-titre {
background: conic-gradient(var(--couv-teinte-6f6690) 0 17%, var(--couv-teinte-56727e) 0 33%, var(--couv-teinte-86695a) 0 50%, var(--couv-teinte-627d5e) 0 67%, var(--couv-teinte-86566b) 0 83%, var(--couv-teinte-8a7a52) 0);
}
.fic-atelier-libre { width: fit-content; margin-top: 12px; cursor: pointer; }
.fic-atelier-libre:has(> input[type='radio']:checked) input[type='color'] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.fic-atelier-libre:has(> input[type='radio']:focus-visible) input[type='color'] { outline: 2px solid var(--accent); outline-offset: 4px; }
.fic-atelier-gestes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
@media (min-width: 760px) {
.fic-atelier { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: start; }
.fic-atelier-apercu { position: sticky; top: 14px; }
}
.ecl-rose-fanee { filter: grayscale(1); opacity: .6; transform: rotate(18deg); }
.ecl-eclos { margin-top: 12px; padding: 16px 14px; text-align: center; border-radius: var(--rayon); background: var(--ecl-rose-soft); border: 1px solid color-mix(in oklab, var(--ecl-rose) 35%, transparent); }
.ecl-eclos .ecl-rose-l { display: block; margin: 0 auto 6px; }
.ecl-eclos .ecl-question { display: block; margin: 0 0 12px; font-family: var(--font-title); font-size: 19px; font-weight: 400; }
.ecl-deux-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ecl-deux-boutons form { margin: 0; }
.ecl-deux-boutons .btn { min-width: 110px; justify-content: center; text-align: center; font-weight: 600; }
.ecl-btn-rose { justify-content: center; text-align: center; }
.ecl-btn-non { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.ecl-btn-non:hover { background: var(--surface-2); }
.ecl-eclos .ecl-dix-choix { margin: 0 0 10px; padding: 0; background: none; border: 0; }
.ecl-eclos .ecl-dix-choix .field,
.ecl-eclos .ecl-dix-choix .jac-suggestions { text-align: left; }
.ecl-delai { margin: -4px 0 12px; font-size: 12.5px; }
.ecl-etat .jeu-jouer .btn .ecl-rose-m { vertical-align: middle; }
.ecl-moment-fane { background: var(--surface-2); border-color: var(--line-strong); }
.ecl-moment-fane .ecl-phrase { margin-top: 8px; color: var(--muted); }
.ecl-moment-fane .ecl-phrase b { color: var(--ink); }
.ecl-etat .jeu-jouer .btn { min-width: 56px; justify-content: center; }
.succes-carte.succes-serie { padding: 0; gap: 0; }
.serie-details { display: flex; flex-direction: column; flex: 1; }
.serie-resume { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; list-style: none; cursor: pointer; border-radius: 12px; }
.serie-resume::-webkit-details-marker { display: none; }
.serie-resume:focus-visible { outline: 2px solid var(--succes-teinte); outline-offset: 2px; }
.serie-compte { margin-left: auto; color: var(--faint); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.succes-nouveau + .serie-compte { margin-left: 0; }
.serie-prochain { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.serie-prochain b { font-weight: 600; color: var(--ink); }
.serie-ouvrir { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--succes-teinte); }
.succes-verrouille .serie-ouvrir { color: var(--muted); }
.serie-ouvrir::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.serie-details[open] .serie-ouvrir::after { transform: rotate(-135deg) translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .serie-ouvrir::after { transition: none; } }
.serie-paliers { margin: 0; padding: 4px 14px 12px; list-style: none; display: grid; gap: 0; border-top: 1px solid color-mix(in oklab, var(--succes-teinte) 25%, var(--line)); }
.serie-paliers li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.serie-paliers li:first-child { border-top: 0; }
.palier-point { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: var(--palier-teinte); background: color-mix(in oklab, var(--palier-teinte) 14%, var(--surface)); }
.palier-point .ico { width: 12px; height: 12px; }
.palier-eclat { --palier-teinte: var(--teinte-jeux); }
.palier-lueur { --palier-teinte: var(--teinte-univers); }
.palier-etoile { --palier-teinte: var(--teinte-communaute); }
.palier-cache, .palier-a-venir { --palier-teinte: var(--faint); }
.palier-cache .palier-point { font-size: 11px; font-weight: 700; }
.palier-nom { font-family: var(--font-title); font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--ink); }
.palier-cache .palier-nom, .palier-a-venir .palier-nom { color: var(--faint); }
.palier-cache .palier-nom { letter-spacing: .1em; }
.palier-niv { margin-left: 6px; font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--palier-teinte); }
.palier-dit { font-size: 12.5px; color: var(--faint); }
.palier-ici { color: var(--muted); font-weight: 600; }
.succes-serie > .succes-etoile { padding: 0 14px 12px; }
.succes-ancre { display: block; scroll-margin-top: 80px; }
.jeu-carte.jeu-carte-attente { border-color: var(--line-strong); background: var(--surface); }
@media (prefers-reduced-motion: no-preference) {
.jeu-carte.jeu-carte-attente { animation: jeu-carte-attendre .6s ease-in-out infinite alternate; }
@keyframes jeu-carte-attendre { to { background: var(--surface-2); } }
}
.haut-8, .page .haut-8 { margin-top: 8px; }
.haut-10, .page .haut-10 { margin-top: 10px; }
.haut-12, .page .haut-12 { margin-top: 12px; }
.haut-14, .page .haut-14 { margin-top: 14px; }
.haut-16, .page .haut-16 { margin-top: 16px; }
.haut-18, .page .haut-18 { margin-top: 18px; }
.haut-20, .page .haut-20 { margin-top: 20px; }
.haut-22, .page .haut-22 { margin-top: 22px; }
.medi-cartes { display: grid; gap: 10px; margin-top: 10px; }
.medi-cartes > .medi-carte { margin: 0; }
.medi-carte .meta { color: var(--muted); font-size: 13px; }
@media (min-width: 900px) {
.medi-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.page-titre-nom .app-page-tuile { width: 28px; height: 28px; flex: none; border-radius: var(--rayon-s); }
.app-page-perso { align-items: flex-end; }
.app-page-perso .choix-unique { flex: 1 1 200px; min-width: 0; margin: 0; }
.page-titre-nom .groupe-photo { width: 40px; height: 40px; font-size: 15px; border-radius: 50%; background: var(--surface-2); color: var(--ink); }
.groupe-membre-actes .carte-menu { margin-left: auto; }
@media (max-width: 600px) {
.ecl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ecl-table, .ecl-table tbody { display: block; width: auto; }
.ecl-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ecl-table td { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-top: 0; text-align: right; }
.ecl-table td:first-child { grid-column: 1 / -1; padding-left: 0; text-align: left; }
.ecl-table td::before { content: attr(data-titre); color: var(--muted); font-size: 12px; text-align: left; }
.ecl-table td:first-child::before { content: none; }
.ecl-ma-ligne { border-radius: 8px; }
.ecl-ma-ligne td:first-child, .ecl-ma-ligne td:last-child { border-radius: 0; }
}
.gestion-fiche-carte { margin-top: 10px; }
.gestion-fiche-carte .fiche-retouches { margin: 0; }
.bs-designer { flex: 1 1 170px; min-width: 0; margin: 0; }
.chat-ecrire-a-ligne .choix-unique { flex: 1 1 200px; min-width: 0; margin: 0; }
.reprise-attente { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reprise-attente > span { min-width: 0; }
.titre-sous-pseudo {
margin: 2px 0 0;
line-height: 1.3;
}
.titre-sous-pseudo .titre-succes,
.joueur-carte-titre .titre-succes,
.membre-carte-titre .titre-succes {
margin-left: 0;
}
.joueur-carte-titre {
display: block;
margin-top: 1px;
font-size: 12px;
color: var(--muted);
}
.joueur-carte-titre .titre-succes { font-size: 12px; }
.membre-carte-titre {
margin: 1px 0 0;
line-height: 1.3;
}
.membre-carte-titre .titre-succes { font-size: 12px; }
.carte-pied > .carte-menu { margin-left: auto; }
.tel-changer-choix { display: inline-block; width: min(260px, 100%); margin: 0; text-align: left; }
.tel-changer-choix > legend.tel-changer-lab { width: 100%; text-align: center; }
.reglage .reglage-choix { flex: 1 1 260px; min-width: 0; margin: 0; }
.clavier-liste { flex: 0 1 190px; min-width: 0; margin: 0 0 0 4px; }
.clavier-liste .clavier-resume { min-height: 34px; height: 34px; padding-top: 0; padding-bottom: 0; font-size: 13px; color: var(--muted); }
.clavier-liste .clavier-resume:hover { color: var(--ink); }
@media (max-width: 599px) {
.clavier-liste { flex: 1 1 auto; margin-left: 0; }
}
.inv-champ-cat .choix-unique { margin: 0; }
.haut-6, .page .haut-6 { margin-top: 6px; }
.lieu-roles .choix-ligne:has(> input:disabled) { display: none; }
.metier-ligne-role .choix-unique { margin: 0; min-width: 0; }
.metier-ligne-vie .metier-ligne-champs { grid-template-columns: minmax(0, 1fr); }
.metier-ligne-vie .radios-pastilles { margin: 0; }
.liste-relation .rel-champs .choix-unique { margin: 0; min-width: 0; }
.choix-multiples[data-saisie-guidee] > .saisie-guidee { margin-top: 0; }
.as-plume .as-lab { font-size: 12.5px; color: var(--muted); }
.as-plume .as-choix { flex: 0 1 280px; min-width: 0; margin: 0; }
.as-plume .as-choix .choix-multiples-resume { min-height: 32px; padding-block: 4px; font-size: 12.5px; border-radius: var(--rayon-pilule); }
.evt-dates .evt-mois { flex: 1 1 150px; min-width: 0; margin: 0; }
.up-compo-ligne > .choix-unique { flex: 1 1 200px; min-width: 0; margin: 0; }
.page-titre-nom .potins-titre-voix.crest { width: 36px; height: 36px; margin: 0; font-size: 13px; flex: none; }
.idee-titre-etiquettes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.page > .page-titre + .bienvenue { margin-top: 0; }
.page > .page-titre + .up-carte-fiche { margin-top: 0; }
@media (min-width: 900px) {
.page > .page-titre + .mess {
height: calc(100dvh - 200px - var(--titre-ligne-retour) - var(--titre-ecart-retour)
- 34px * 1.15 - 8px - 15px * 1.55 - 12px);
}
}
@media (max-width: 899px) {
.page:has(> .mess.mess-ouvert) > .page-titre { display: none; }
}
.haut-26, .page .haut-26 { margin-top: 26px; }
.rech-carte > .carte-menu { flex: none; align-self: flex-start; }
.rech-carte-gestes { flex: none; align-self: center; margin: 0; }
.bs-designer-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; }
.bs-ecrit-texte { white-space: pre-line; }
.item > .carte-menu { flex: none; align-self: center; }
.gestion-role-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gestion-role-form { display: flex; align-items: center; gap: 6px; }
.roles-membre .carte-menu-motif > summary { display: flex; }
.roles-membre .carte-menu-motif > form { margin: 4px; }
:not(.rech-cartes) > .pub.rech-carte + .pub.rech-carte { margin-top: 10px; }
.up-compo-retirer .carte-menu { display: inline-block; }
.admin-signalements { margin-top: 10px; }
.admin-signalement-gestes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pf-photo.initiales-accent,
.portrait.initiales-accent { background: var(--accent); }
.portrait.initiales-neutre { background: var(--surface-2); color: var(--faint); }
.pub-medias-seule.pub-medias-photo { width: 320px; max-width: 100%; margin-inline: auto; }
.pub-medias-seule.pub-medias-photo .pub-media img { aspect-ratio: 1; height: auto; object-fit: cover; cursor: zoom-in; }
.esp-droite .esp-moi-grand { display: none; }
@media (min-width: 1440px) {
.esp-droite .esp-moi-grand { display: grid; }
}
.esp-moi .esp-amener { flex: 1 1 100%; margin-left: 0; }
.esp-amener > .esp-changer-corps { margin-top: 0; }
.succes-grille > div:target > .succes-carte,
.succes-grille .succes-ancre:target ~ .succes-carte { outline: 2px solid var(--accent); outline-offset: 2px; }
.jeu-joueur { color: inherit; font-weight: inherit; text-decoration: none; }
.jeu-joueur:hover, .jeu-joueur:focus-visible { text-decoration: underline; }
.ecl-deux-col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 4px; }
.ecl-deux-col.ecl-une-col { grid-template-columns: minmax(0, 1fr); }
.ecl-colonne { min-width: 0; }
.ecl-colonne > * + * { margin-top: 16px; }
.ecl-partie { margin-top: 0; }
.ecl-partie .jeu-partie-tete > span:first-child { font-weight: 600; }
.ecl-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ecl-case { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; min-height: 118px; padding: 10px 4px 8px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--paper); text-align: center; }
.ecl-case-num { font-family: var(--font-title); font-size: 28px; line-height: 1; color: var(--ink); }
.ecl-case-qui { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.ecl-case-qui .badge-equipe { vertical-align: -3px; }
.ecl-case-quand { font-size: 11px; line-height: 1.25; color: var(--muted); }
.ecl-case-derniere { border-color: var(--accent); background: var(--accent-soft); }
.ecl-case-derniere .ecl-case-num { color: var(--accent-ink); }
.ecl-case-vide { justify-content: center; border-style: dashed; background: transparent; }
.ecl-case-vide .ecl-case-num { color: var(--line-strong); }
.ecl-case .ecl-rose-case { width: 34px; height: 34px; }
.ecl-case-vide .ecl-rose-case { opacity: .4; }
.ecl-case-dix .ecl-case-quand { margin-top: 2px; }
.ecl-case-offerte { justify-content: center; background: var(--ecl-rose-soft); border-color: color-mix(in oklab, var(--ecl-rose) 35%, transparent); }
.ecl-case-fanee { justify-content: center; background: var(--surface-2); border-color: var(--line-strong); }
.ecl-case-fanee .ecl-rose-case { opacity: .6; }
.ecl-partie .ecl-etat { margin: 12px 0 0; }
.ecl-partie .ecl-eclos { margin: 12px 0 0; }
.ecl-partie .ecl-moment { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; text-align: left; }
.ecl-partie .ecl-moment .ecl-duo { flex: none; margin: 0; }
.ecl-partie .ecl-moment .ecl-phrase { margin: 0; font-size: 16px; }
.ecl-partie .ecl-moment .mine { margin-top: 2px; }
.ecl-phrase b .jeu-joueur, .ecl-archive summary .jeu-joueur { color: inherit; }
.ecl-archive { margin: 16px 0 0; }
.ecl-archive .ecl-cases, .jeu-archive .ecl-cases { gap: 6px; margin-top: 10px; }
.ecl-archive .ecl-case, .jeu-archive .ecl-case { min-height: 0; padding: 6px 2px; }
.ecl-archive .ecl-case-num, .jeu-archive .ecl-case-num { font-size: 18px; }
.ecl-archive .ecl-case .ecl-rose-case, .jeu-archive .ecl-case .ecl-rose-case { width: 26px; height: 26px; }
.ecl-deux-col .ecl-compteur { margin: 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon); }
.ecl-compteur h2 { margin: 0 0 4px; font-size: 16px; }
.ecl-compteur .ecl-tri { margin-top: 6px; }
.ecl-compteur .ecl-table { margin-top: 10px; }
.ecl-compteur .ecl-table th { font-size: 11px; }
.ecl-pied a { color: var(--accent-ink); }
@media (min-width: 861px) {
.ecl-deux-col .ecl-compteur { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 860px) {
.ecl-deux-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.ecl-cases { gap: 5px; }
.ecl-case { min-height: 96px; padding: 8px 2px 6px; }
.ecl-case .ecl-av { width: 26px; height: 26px; }
.ecl-case .ecl-av .pub-initiales { font-size: 11px; }
.ecl-case-num { font-size: 22px; }
.ecl-case-quand { display: none; }
.ecl-case-dix .ecl-case-quand { display: block; }
.ecl-partie .ecl-etat { flex-wrap: wrap; }
}
@media (max-width: 359px) {
.ecl-cases { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
}
@media (min-width: 641px) {
.pf-gestes-menu > .carte-menu-liste { top: calc(100% + 6px); bottom: auto; }
}
@media (min-width: 721px) {
.pf-identite.pf-identite-profil { align-items: flex-start; }
.pf-identite-profil > .pf-qui { flex: 1 1 260px; padding-top: 14px; }
.pf-identite-profil > .pf-actes { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; padding-top: 14px; padding-bottom: 0; }
}
.visage-naissance .visage-naissance-date,
.visage-naissance .visage-naissance-annee { margin-top: 6px; }
.visage-naissance:has(input[name="naissance_forme"][value="date"]:checked) .visage-naissance-annee,
.visage-naissance:has(input[name="naissance_forme"][value="annee"]:checked) .visage-naissance-date,
.visage-naissance:has(input[name="naissance_forme"][value="inconnue"]:checked) .visage-naissance-date,
.visage-naissance:has(input[name="naissance_forme"][value="inconnue"]:checked) .visage-naissance-annee { display: none; }
.visage-form:has(input[name="sorte"][value="reel"]:checked) .visage-registre-age-approx { display: none; }
.visage-envoi p { margin: 0; }
.visage-envoi p + p { margin-top: 4px; }
.ecl-moment-texte { flex: 1; min-width: 12em; }
.ecl-moment-texte > p { margin: 0; }
.ecl-merci { margin: 8px 0 0; }
.ecl-btn-merci { display: inline-flex; align-items: center; gap: 6px; }
.ecl-btn-merci .ico-coeur { color: var(--ecl-rose); }
.ecl-btn-merci:disabled { opacity: .7; cursor: default; }
.ecl-archive .ecl-merci, .jeu-archive .ecl-merci { margin-top: 10px; }
.ecr-etapes { margin: 6px 0 18px; }
.ecr-etapes ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ecr-etape { flex: 1 1 0; min-width: 0; }
.ecr-etape > a,
.ecr-etape > button,
.ecr-etape > .ecr-etape-num:first-child { color: inherit; }
.ecr-etape > a,
.ecr-etape > button,
.ecr-etape:not(:has(> a, > button)) {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--rayon-pilule);
background: var(--surface); color: var(--muted); font: inherit; text-decoration: none; cursor: pointer;
}
.ecr-etape:not(:has(> a, > button)) { cursor: default; }
.ecr-etape > a:hover,
.ecr-etape > button:hover { border-color: var(--line-strong); color: var(--ink); }
.ecr-etape.on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.ecr-etape-num {
display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px;
border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: .85em;
}
.ecr-etape.on .ecr-etape-num { background: var(--accent); color: var(--accent-ink); }
.ecr-form { margin-top: 6px; }
.ecr-bloc { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ecr-bloc-titre { font-family: var(--font-title); font-size: 1.1rem; margin: 0 0 8px; }
.ecr-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ecr-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.ecr-pied > .btn:first-child:not(.btn-main) { margin-right: auto; }
.ecr-plus { display: flex; justify-content: flex-end; margin-top: 14px; }
.ecr-lecture { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ecr-partie > .crayon-partie { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface); }
.ecr-partie-form .ecr-pied { margin-top: 12px; }
.fic-alertes .crayon { float: right; }
@media (max-width: 560px) {
.ecr-etape > a, .ecr-etape > button, .ecr-etape:not(:has(> a, > button)) { padding: 6px 8px; gap: 6px; font-size: .9em; }
.ecr-pied { justify-content: stretch; }
.ecr-pied > .btn { flex: 1 1 100%; justify-content: center; }
.ecr-pied > .btn:first-child:not(.btn-main) { margin-right: 0; }
}
.fiche-carte-brouillon .fiche-brouillon-reprendre { margin-left: auto; }
.fiche-carte-brouillon .fiche-brouillon-reprendre + .carte-menu { margin-left: 0; }
.fiche-carte-brouillon .fiche-carte-gere { color: var(--muted); }
.visages-grille .visage-carte:has(.visage-carte-lien) { cursor: pointer; }
.visage-carte-lien {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
color: inherit; text-decoration: none;
}
.visage-carte-lien:hover, .visage-carte-lien:focus { color: inherit; text-decoration: none; }
.visage-carte-lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.visage-carte-lien:focus-visible { outline: none; }
.visage-carte:has(.visage-carte-lien:focus-visible) { outline: 2px solid var(--line-strong); outline-offset: 2px; }
.visage-carte-lien .visage-vignette { z-index: 2; }
.visages-grille .visage-carte-nom {
margin-top: 8px; padding-right: 30px; color: var(--ink); font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere;
}
.visage-carte small a,
.visage-carte .visage-instagram-lien { position: relative; z-index: 2; }
.visages-grille .visage-carte-menu { z-index: 2; }
.visages-grille .visage-carte-menu[open] { z-index: 60; }
@media (hover: hover) and (pointer: fine) {
.visage-carte-lien .visage-vignette:hover,
.visage-carte-lien:focus-visible .visage-vignette { z-index: 3; }
.visage-carte-lien:focus-visible .visage-vignette .portrait {
transform: scale(1.9);
transform-origin: 50% 0;
box-shadow: var(--ombre-carte);
outline: 2px solid var(--line-strong);
}
}
.visage-fiche { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; }
.visage-fiche-image {
display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%;
border: 1px solid var(--line); border-radius: var(--rayon); background: var(--surface-2);
}
span.visage-fiche-image { display: grid; place-items: center; font-size: 48px; }
.visage-fiche-infos { min-width: 0; }
.visage-fiche-instagram { margin: 0 0 12px; }
.visage-fiche-instagram a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.visage-fiche-instagram a:hover, .visage-fiche-instagram a:focus-visible { color: var(--accent); }
.visage-fiche-instagram .reseau-logo { width: 18px; height: 18px; }
.visage-fiche-reperes { display: grid; gap: 8px; margin: 0; }
.visage-fiche-reperes > div { display: grid; grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr); gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.visage-fiche-reperes > div:last-child { border-bottom: 0; padding-bottom: 0; }
.visage-fiche-reperes dt { margin: 0; color: var(--muted); font-size: 13px; }
.visage-fiche-reperes dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 640px) {
.visage-fiche { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
.bloc-cote-visages .badge-equipe { position: absolute; right: -3px; bottom: -3px; margin: 0; font-size: 16px; padding: 1px; border-radius: 50%; background: var(--surface); }
.idee-reponse-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.idee-reponse-haut .acte { font-size: 13px; }
.idee-repondre { margin: 18px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.idee-repondre > h2 { margin: 0 0 8px; }
.idee-repondre-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.idee-commentaires { margin-top: 28px; }
.idee-commentaires-titre { margin: 0 0 10px; }
.idee-commentaires .pubs { margin-top: 0; }
.idee-commentaires .pub { padding-top: 10px; }
.idee-commentaires .pub-bilan { display: none; }
.idee-commentaires .pub-bilan + .pub-reponses { margin-top: 0; padding-top: 0; border-top: 0; }
.pub-medias-seule.pub-medias-couverture .pub-media img { aspect-ratio: 4 / 1; height: auto; max-height: none; object-fit: cover; }
.ecl-deux-col .ecl-compteur .ecl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ecl-deux-col .ecl-compteur .ecl-table, .ecl-deux-col .ecl-compteur .ecl-table tbody { display: block; width: auto; }
.ecl-deux-col .ecl-compteur .ecl-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ecl-deux-col .ecl-compteur .ecl-table td { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-top: 0; text-align: right; }
.ecl-deux-col .ecl-compteur .ecl-table td:first-child { grid-column: 1 / -1; padding-left: 0; text-align: left; overflow-wrap: normal; word-break: normal; }
.ecl-deux-col .ecl-compteur .ecl-table td::before { content: attr(data-titre); color: var(--muted); font-size: 12px; text-align: left; }
.ecl-deux-col .ecl-compteur .ecl-table td:first-child::before { content: none; }
.ecl-liste { margin: 10px 0 0; padding: 0; list-style: none; }
.ecl-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 8px; border-top: 1px solid var(--line); }
.ecl-ligne:first-child { border-top: 0; }
.ecl-ligne.ecl-ma-ligne { border-radius: 10px; background: var(--surface-2); border-top-color: transparent; }
.ecl-ligne.ecl-ma-ligne + .ecl-ligne { border-top-color: transparent; }
.ecl-ligne-qui { display: flex; flex-direction: column; min-width: 0; }
.ecl-ligne-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ecl-ligne-autres { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecl-ligne-n { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.ecl-ligne-n b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ecl-ligne-n .mine { font-size: 11px; }
article.idee {
margin-top: 14px;
padding: 14px 16px 4px;
border: 1px solid var(--line);
border-radius: var(--rayon-l);
background: var(--surface);
box-shadow: var(--ombre-carte);
min-width: 0;
}
article.idee > :first-child { margin-top: 0; }
article.idee > .carte-pied { margin-inline: -16px; padding-inline: 16px; }
article.idee .idee-reponse { margin: 14px 0 4px; }
.idee-repondre-ouvrir { margin: 14px 0 0; }
.idee-repondre-ouvrir .btn { display: inline-flex; align-items: center; gap: 7px; }
.idee-repondre { margin: 0; padding-top: 0; border-top: 0; }
.td-pastille-fen[data-origine='chatbox'] {
position: relative;
overflow: visible;
border-color: var(--accent);
background: var(--accent);
color: var(--sur-accent);
}
.td-pastille-fen[data-origine='chatbox']:hover { border-color: var(--accent); filter: brightness(1.08); }
.td-pastille-fen[data-origine='chatbox'] .td-pf-titre { font-weight: 600; }
.td-pastille-fen[data-origine='chatbox'] .td-pf-fermer { color: inherit; }
.td-pastille-fen[data-origine='chatbox'] .td-pf-fermer:hover {
background: color-mix(in srgb, var(--sur-accent) 20%, transparent);
color: inherit;
}
.td-pf-n {
position: absolute;
top: -8px;
right: -6px;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: var(--rayon);
background: var(--warn);
color: var(--blanc);
font-size: 11.5px;
font-weight: 600;
line-height: 20px;
text-align: center;
}
@media (min-width: 900px) {
.fenetre:has(.peg-deux) { width: min(1240px, calc(100vw - 32px)); }
.peg-deux { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 0 20px; align-items: start; }
.peg-deux > :not(.peg-gauche, .peg-droite) { grid-column: 1 / -1; }
.peg-deux > .peg-gauche { grid-column: 1; }
.peg-deux > .peg-droite { grid-column: 2; margin-top: 0; }
.peg-deux .peg-cadre .peg-image { max-height: min(75vh, 720px); }
}
.pub-journal-visage {
display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px;
align-items: start; margin-top: 10px;
}
.pub-journal-visage .pub-journal-photo { width: 100%; margin-top: 0; }
.pub-journal-visage-infos { min-width: 0; font-size: 0.95em; }
.pub-journal-visage-infos .visage-fiche-reperes { gap: 6px; }
.pub-journal-visage-infos .visage-fiche-reperes > div { padding-bottom: 6px; }
@media (max-width: 640px) {
.pub-journal-visage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pub-journal-visage .pub-journal-photo { width: 180px; max-width: 100%; }
}
@media (max-width: 640px) {
.visages-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.visages-grille .visage-carte { padding: 5px 5px 8px; }
.visages-grille .visage-carte > span:not(.portrait):not(.visage-vignette),
.visages-grille .visage-carte-nom { margin-top: 5px; padding-right: 0; font-size: 12.5px; }
.visages-grille .visage-carte small,
.visages-grille .visage-carte small:last-of-type { font-size: 11px; padding-right: 26px; }
.visages-grille .visage-carte-menu { right: 0; bottom: 2px; }
.visages-grille .visage-carte-menu .carte-menu-bouton { min-width: 30px; min-height: 30px; font-size: 16px; }
.visages-grille .visage-carte:has(.visage-carte-menu) .visage-carte-bas { padding-right: 26px; }
}
.ecl-compteur .ecl-tri { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; }
.ecl-compteur .ecl-tri .chips-titre { grid-column: 1 / -1; margin: 0 0 6px; }
.ecl-compteur .ecl-tri .chip {
margin: 0; border-radius: 0; justify-content: center; text-align: center;
min-width: 0; padding-inline: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecl-compteur .ecl-tri .chip + .chip { margin-left: -1px; }
.ecl-compteur .ecl-tri .chips-titre + .chip { border-radius: 999px 0 0 999px; }
.ecl-compteur .ecl-tri .chip:last-child { border-radius: 0 999px 999px 0; }
.ecl-compteur .ecl-tri .chip[aria-pressed="true"] { position: relative; z-index: 1; }
.pub-journal .pub-tete:has(> .pub-journal-corps) { flex-wrap: wrap; align-items: center; }
.pub-journal .pub-journal-qui { display: flex; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.pub-journal .pub-tete:has(> .pub-journal-corps) > .pub-heure { margin-left: auto; margin-top: 0; }
.pub-journal-corps { order: 5; flex: 0 0 100%; min-width: 0; margin-top: 6px; }
.td-pf-ouvrir .td-pf-vignette { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; overflow: visible; }
.td-pf-ouvrir .td-pf-vignette > .pub-avatar,
.td-pf-ouvrir .td-pf-vignette img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }