/* ========================================================================== PAÏYA V2 — « Régalienne 2030 » Socle bleu royal (V1) + marque violet et or + un accent par monde. Règle d'or : un écran = un accent. L'or est réservé au royal et au vérifié. ========================================================================== */ :root{ /* Socle — invariable, jamais teinté par le monde */ --nuit-royale:#070F2A; --bleu-royal:#122A6B; --bleu-nuit:#111A3D; /* Marque */ --violet:#6146AF; --amethyste:#9B85E4; --or:#D9A441; --or-clair:#F0CE7E; /* Jour parchemin */ --creme:#FAF6EF; --sable:#EDE4D6; --encre:#141C33; --gris:#6E6A85; /* Accent du monde — surchargé par [data-monde] sur */ --monde:var(--violet); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --r-s:12px; --r:18px; --r-l:28px; --pas:8px; --large:1180px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--sans);line-height:1.6;color:var(--encre);background:var(--creme); -webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .paiya-large{max-width:var(--large);margin:0 auto;padding:0 24px} .paiya-petit{font-size:13.5px;color:var(--gris)} .paiya-surtitre{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--violet)} /* — Ambiance nuit régalienne ————————————————————————————— */ .nuit{background:linear-gradient(165deg,#08132F,#0B1A44 60%,#060C22);color:var(--creme);min-height:100vh} .nuit h1,.nuit h2,.nuit h3,.nuit h4{color:#fff} .nuit .paiya-petit{color:#A9A2C6} .nuit .paiya-surtitre{color:var(--or-clair)} /* — En-tête ————————————————————————————————————————— */ .paiya-tete{display:flex;align-items:center;gap:26px;padding:14px 24px;font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.08);color:#C8C2E0;flex-wrap:wrap} .paiya-tete img{height:26px;width:auto} .paiya-tete a.actif{color:var(--or-clair);font-weight:700} .paiya-tete .droite{margin-left:auto;display:flex;gap:12px;align-items:center} .jour .paiya-tete{border-color:rgba(20,28,51,.1);color:#4B4666} .jour .paiya-tete a.actif{color:var(--violet)} /* — Boutons ———————————————————————————————————————— */ .b{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-s);padding:12px 20px; font-weight:700;font-size:14.5px;border:0;cursor:pointer;font-family:var(--sans)} .b-or{background:linear-gradient(180deg,var(--or-clair),var(--or));color:#3A2A05} .b-monde{background:var(--monde);color:#fff} .b-fantome{background:transparent;border:1px solid rgba(255,255,255,.35);color:var(--creme)} .b-violet{background:var(--violet);color:#fff} /* — Sceau (vérifié) et pastille ——————————————————————————— */ .sceau{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:8px 16px 8px 10px; background:linear-gradient(135deg,rgba(217,164,65,.18),rgba(97,70,175,.14)); border:1px solid rgba(217,164,65,.55);color:var(--or-clair);font-weight:700;font-size:13.5px} .jour .sceau{color:#4A360A} .pastille{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600; padding:5px 12px;border-radius:999px;background:rgba(97,70,175,.14);color:var(--amethyste); border:1px solid rgba(97,70,175,.32)} .jour .pastille{background:rgba(97,70,175,.1);color:#4A3690;border-color:rgba(97,70,175,.25)} /* — Tuiles des mondes —————————————————————————————————— */ .mondes{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} .tuile{border-radius:var(--r);padding:16px 14px 14px;min-height:236px;display:flex;flex-direction:column; justify-content:space-between;color:#fff; background:linear-gradient(180deg,color-mix(in srgb,var(--monde) 34%,var(--nuit-royale)), color-mix(in srgb,var(--monde) 12%,var(--nuit-royale))); border:1px solid color-mix(in srgb,var(--monde) 45%,transparent);transition:transform .25s ease} .tuile:hover{transform:translateY(-3px)} .tuile h3{font-size:16px;margin-top:10px} .tuile .nom{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700;margin-top:3px} .tuile p{font-size:11.5px;color:rgba(255,255,255,.72);margin:5px 0 0} .tuile .entrer{margin-top:12px;font-size:12px;font-weight:700;text-align:center;padding:8px 0; border-radius:10px;background:color-mix(in srgb,var(--monde) 72%,#000);border:1px solid rgba(255,255,255,.22)} /* — Nom du monde : signification au survol, éclat qui s'atténue ————— */ .mnom{position:relative;display:inline-block;overflow:hidden;border-radius:6px;padding:1px 6px 1px 0;cursor:help} .mnom b{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800; color:color-mix(in srgb,var(--monde) 62%,var(--creme))} .mnom::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateX(-120%); background:linear-gradient(105deg,transparent 35%,color-mix(in srgb,var(--monde) 55%,#fff) 50%,transparent 65%)} .mnom:hover::after,.mnom:focus-visible::after{animation:paiya-eclat 1.15s cubic-bezier(.22,.7,.3,1) 1 forwards} @keyframes paiya-eclat{0%{opacity:0;transform:translateX(-120%)}18%{opacity:.85}100%{opacity:0;transform:translateX(120%)}} .msens{display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .45s cubic-bezier(.22,.7,.3,1),opacity .45s ease} .msens > i{overflow:hidden;font-size:12.5px;color:#B9B3D2;line-height:1.45} .mnom:hover + .msens,.mnom:focus-visible + .msens{grid-template-rows:1fr;opacity:1} @media(prefers-reduced-motion:reduce){ .mnom:hover::after,.mnom:focus-visible::after{animation:none} .msens{transition:none} } /* — Cartes de contenu ——————————————————————————————————— */ .rang{display:grid;grid-template-columns:repeat(5,1fr);gap:12px} .carte{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12); background:linear-gradient(180deg,color-mix(in srgb,var(--monde) 20%,#100E24),#0C0B1E)} .carte .vue{height:118px;background:linear-gradient(140deg,color-mix(in srgb,var(--monde) 55%,#000), color-mix(in srgb,var(--or) 28%,#000));background-size:cover;background-position:center} .carte .txt{padding:10px 12px} .carte .txt b{font-size:12.5px;color:#fff;display:block} .carte .txt span{font-size:11px;color:rgba(255,255,255,.55)} /* — Chiffres ————————————————————————————————————————— */ .chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px 24px; background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08)} .chiffre b{font-family:var(--serif);font-size:24px;color:var(--or-clair);display:block} .chiffre span{font-size:11.5px;color:rgba(255,255,255,.6);letter-spacing:.08em;text-transform:uppercase} /* — Chronique (Sceptres & Couronnes) ——————————————————————— */ .toile{min-height:250px;position:relative;border-radius:var(--r-l);overflow:hidden; background:radial-gradient(520px 300px at 78% 20%, color-mix(in srgb,var(--monde) 60%,transparent), transparent 70%), linear-gradient(140deg,color-mix(in srgb,var(--monde) 30%,var(--nuit-royale)),var(--nuit-royale) 75%)} .toile .citation{position:absolute;left:32px;bottom:26px;max-width:62%} .toile .citation p,.toile .citation h1{font-family:var(--serif);font-size:24px;line-height:1.3; color:#fff;margin:0;font-weight:inherit} .chapitres{display:grid;grid-template-columns:repeat(2,1fr)} .chapitre{display:flex;gap:16px;padding:20px 24px;border-top:1px solid rgba(255,255,255,.08)} .chapitre:nth-child(odd){border-right:1px solid rgba(255,255,255,.08)} .chapitre .num{font-family:var(--serif);font-size:26px;line-height:1;min-width:38px; color:color-mix(in srgb,var(--monde) 70%,var(--creme))} /* — Carte vivante (fiche pays) ——————————————————————————— */ .filtres{display:flex;gap:8px;flex-wrap:wrap;padding:14px 0} .filtre{font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#D6D1EA} .filtre.actif{background:color-mix(in srgb,var(--monde) 60%,transparent); border-color:color-mix(in srgb,var(--monde) 80%,transparent);color:#fff} .deux{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border-radius:var(--r-l);overflow:hidden; border:1px solid rgba(255,255,255,.12)} .plan{position:relative;min-height:420px; background:radial-gradient(600px 380px at 40% 40%, color-mix(in srgb,var(--monde) 26%,transparent), transparent 70%), linear-gradient(150deg,#0B1A44,var(--nuit-royale))} .plan .quadrillage{position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:44px 44px} .liste{padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,.03)} .ligne{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(120deg,color-mix(in srgb,var(--monde) 14%,transparent),transparent)} .ligne .vignette{width:52px;height:52px;border-radius:10px;flex:none;background-size:cover;background-position:center; background-image:linear-gradient(140deg,color-mix(in srgb,var(--monde) 60%,#000),color-mix(in srgb,var(--or) 26%,#000))} .ligne b{font-size:13.5px;color:#fff;display:block} .ligne span{font-size:11.5px;color:rgba(255,255,255,.6)} /* — Pied ——————————————————————————————————————————— */ .paiya-pied{background:var(--nuit-royale);color:#9F99BC;padding:32px 0;font-size:13px; border-top:1px solid rgba(255,255,255,.08)} @media(max-width:1000px){ .mondes{grid-template-columns:repeat(3,1fr)} .rang{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ .deux,.chapitres,.chiffres{grid-template-columns:1fr} .chapitre:nth-child(odd){border-right:0} .chiffres{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .mondes{grid-template-columns:repeat(2,1fr)} .rang{grid-template-columns:repeat(2,1fr)} .toile .citation{left:20px;right:20px;max-width:none} .toile .citation p,.toile .citation h1{font-size:19px} } /* ========================================================================== Vignette de monde — modèle repris tel quel de la maquette V2 bis. Photo + voile + médaillon du Papi + pastille d'état + terme + slogan + chiffres. ========================================================================== */ :root{ --terme-monde:#EFBF43; /* le terme des six mondes a la même couleur */ --r-m:22px; --ombre-m:0 20px 44px -14px rgba(0,0,0,.6); --ombre-l:0 44px 100px -32px rgba(0,0,0,.75); --ease-out:cubic-bezier(.16,1,.3,1); } .paiya-tres-large{max-width:1560px;margin:0 auto;padding:0 24px} /* largeur de vignette du modèle : 236 px, ratio 3/4.8 */ .mondes-portail{display:grid;grid-template-columns:repeat(6,236px);gap:16px;justify-content:center} .mc{position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:3/4.8;cursor:pointer; box-shadow:var(--ombre-m);transition:.6s var(--ease-out);display:block} .mc:hover{transform:translateY(-8px);box-shadow:var(--ombre-l)} .mc img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease-out)} .mc:hover img{transform:scale(1.09)} .mc .voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,8,24,.96) 4%,rgba(12,8,24,.62) 46%,rgba(12,8,24,.12) 78%)} .mc-txt{position:absolute;inset:auto 0 0 0;padding:16px 13px;color:#fff} .mc-txt h3{color:var(--terme-monde);font-size:17px;margin-bottom:6px} .mc-txt .geo{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700; opacity:.72;margin:-2px 0 7px} .mc-txt .griot-m{font-size:10px;margin-top:7px;opacity:.8;display:flex;align-items:center;gap:5px} .mc-txt .griot-m::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex:none} .mc img.mc-av{position:absolute;top:10px;right:10px;width:52px;height:52px;border-radius:50%;object-fit:cover; border:2px solid rgba(255,255,255,.85);box-shadow:0 6px 18px -6px rgba(12,8,24,.8); transition:.5s var(--ease-out)} .mc:hover img.mc-av{transform:scale(1.06)} .mc-txt .slog{font-size:11.5px;line-height:1.4;opacity:.85;font-style:italic;min-height:48px} .mc-txt .chiffres{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;line-height:1.55; margin-top:9px;padding-top:9px;min-height:30px;border-top:1px solid rgba(255,255,255,.22)} .mc .fil{position:absolute;top:10px;left:10px;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase; font-weight:700;padding:4px 8px;border-radius:100px;color:#0F0A1E} /* Bandeau d'un monde : la même photo sert de toile de fond. */ .toile-monde{position:relative;min-height:340px;border-radius:var(--r-l);overflow:hidden} .toile-monde img.fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .toile-monde .voile{position:absolute;inset:0; background:linear-gradient(to top,rgba(12,8,24,.95) 6%,rgba(12,8,24,.55) 48%,rgba(12,8,24,.15) 82%)} .toile-monde .dedans{position:absolute;inset:auto 0 0 0;padding:28px 30px;color:#fff} .toile-monde h1{font-size:clamp(28px,4vw,44px);color:var(--terme-monde)} .toile-monde .papi{position:absolute;top:18px;right:18px;display:flex;align-items:center;gap:10px; background:rgba(12,8,24,.55);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:6px 14px 6px 6px} .toile-monde .papi img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85)} .toile-monde .papi span{font-size:12px;color:#fff} @media(max-width:1560px){.mondes-portail{grid-template-columns:repeat(3,236px)}} @media(max-width:820px){.mondes-portail{grid-template-columns:repeat(2,minmax(160px,236px))}} /* ── Accueil : les deux questions d'entrée (modèle V2 bis) ── */ .entree{max-width:760px;margin:0 auto} .jauge{display:flex;gap:6px;margin-bottom:22px} .jauge i{height:3px;flex:1;background:rgba(255,255,255,.16);border-radius:2px} .jauge i.on{background:var(--or)} .sur{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--or-clair)} .etape h2{font-size:clamp(24px,3.4vw,34px);margin:10px 0 12px} .etape p{font-size:15px;color:#C8C2E0;max-width:64ch} .continents{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 14px} .choix{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;max-height:230px;overflow:auto} .choix label{display:inline-flex;align-items:center;gap:7px;font-size:13px;padding:7px 13px;border-radius:100px; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);cursor:pointer} .choix input{accent-color:var(--or)} .consent{display:flex;gap:10px;align-items:flex-start;margin-top:20px;font-size:13px;color:#C8C2E0;max-width:70ch} .etape-nav{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap} /* ========================================================================== Accueil — maquette « Page d'Accueil · 6 Mondes » : colonne de gauche, bandeau du Papi, recherche, six colonnes de monde sur une seule ligne. ========================================================================== */ /* Barre haute V2 : les cinq onglets validés */ .nav-v2{display:flex;align-items:center;gap:22px;height:70px;padding:0 24px; border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:30; background:color-mix(in srgb,var(--nuit-royale) 92%,transparent);backdrop-filter:blur(10px)} .nav-marque img{height:32px;width:auto} .onglets{display:flex;gap:4px} .onglet{padding:9px 16px;border-radius:100px;font-size:14.5px;font-weight:600;color:#C3BDDC;transition:.25s} .onglet:hover{background:rgba(255,255,255,.07);color:#fff} .onglet.actif{background:var(--violet);color:#fff} .nav-fin{margin-left:auto;display:flex;align-items:center;gap:10px} .monde-pick{position:relative} .monde-pick summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13.5px; padding:8px 14px;border-radius:100px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#D6D1EA} .monde-pick summary::-webkit-details-marker{display:none} .monde-pick i{width:9px;height:9px;border-radius:50%;display:inline-block} .mp-liste{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;border-radius:14px;padding:6px; background:#0C1738;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px -24px #000;z-index:40} .mp-liste a{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;font-size:13.5px;color:#D6D1EA} .mp-liste a:hover{background:rgba(255,255,255,.08);color:#fff} .griot-appel{display:flex;align-items:center;gap:9px;padding:5px 15px 5px 5px;border-radius:100px; background:rgba(217,164,65,.13);border:1px solid rgba(217,164,65,.34);color:var(--or-clair);font-size:13px;font-weight:600} .griot-appel img{width:34px;height:34px;border-radius:50%;object-fit:cover} .nav-fin .rond{width:36px;height:36px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#D6D1EA} /* Trois colonnes : gauche (Papi + musique), scène, droite (Cartes Poème) — comme la V1 */ .cadre{display:grid;grid-template-columns:250px minmax(0,1fr) 280px;gap:18px;padding:18px 24px 0;align-items:start} .scene{min-width:0} /* — Colonne de gauche — */ .colonne,.droite{position:sticky;top:88px;display:flex;flex-direction:column;gap:14px} /* Carte Papi Griot — colonne de gauche, comme en V1 */ .griot-carte{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px; background:linear-gradient(140deg,rgba(217,164,65,.16),rgba(97,70,175,.1)); border:1px solid rgba(217,164,65,.34)} .griot-text{flex:1} .griot-name{display:block;font-family:var(--serif);font-size:16px;color:#fff} .griot-role{display:block;font-size:11.5px;color:#B9B3D2} .griot-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.8)} /* Lecteur musique — juste sous le Papi, comme en V1 */ .paiya-player{border-radius:14px;padding:11px 12px 12px;border:1px solid #3a2a16; background:linear-gradient(150deg,#241a10,#15100a 55%,#0e0a06)} .pp-head{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:var(--or-clair)} .pp-head b{font-size:12px;letter-spacing:.06em;text-transform:uppercase} .pp-head .ic{width:15px;height:15px} .pp-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .pp-liste li{display:flex;gap:9px;align-items:center;padding:5px 4px;border-radius:8px} .pp-liste li:hover{background:rgba(255,255,255,.05)} .pp-play{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(231,201,119,.4); background:rgba(231,201,119,.12);color:var(--or-clair);display:grid;place-items:center;cursor:pointer} .pp-play .ic{width:12px;height:12px;fill:currentColor;stroke:none} .pp-play.joue{background:var(--or);color:#2A1E05;border-color:var(--or)} .pp-titre{min-width:0} .pp-titre b{display:block;font-size:12px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pp-titre i{display:block;font-size:10.5px;color:#B0A78F;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #pp-audio{display:none} .pp-tout{display:block;margin-top:9px;font-size:11px;color:var(--or-clair);text-align:center} /* Panneau Cartes Poème — colonne de droite, comme en V1 */ .panneau-or{border-radius:16px;padding:14px;border:1px solid rgba(217,164,65,.34); background:linear-gradient(160deg,rgba(217,164,65,.12),rgba(7,15,42,.6))} .panneau-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .panneau-tete h3{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--or-clair)} .panneau-tete a{font-size:11.5px;color:#B9B3D2} .poem-feat{margin:0;border-radius:12px;overflow:hidden} .poem-feat img{width:100%;display:block;border-radius:12px} .poem-feat figcaption{font-size:12px;color:#C8C2E0;margin-top:8px} .poem-feat figcaption span{display:block;font-size:11px;color:#8E88A8;margin-top:2px} .ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;flex:none} /* — Recherche — */ .recherche{padding:6px 0 4px} .recherche form{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:12px; background:var(--creme);border-radius:100px;padding:12px 20px;color:#4A4560} .recherche input{flex:1;border:0;background:transparent;font-family:var(--sans);font-size:14.5px; color:#2A2740;outline:none} .recherche .ic{color:#6E6A85} /* — Titre — */ .titre-mondes{text-align:center;margin:18px 0 16px;font-size:clamp(18px,2.2vw,27px); letter-spacing:.06em;text-transform:uppercase;color:var(--or-clair)} .titre-mondes span{position:relative;padding:0 46px} .titre-mondes span::before,.titre-mondes span::after{content:"";position:absolute;top:50%;width:34px;height:1px; background:linear-gradient(90deg,transparent,var(--or))} .titre-mondes span::before{left:0} .titre-mondes span::after{right:0;background:linear-gradient(270deg,transparent,var(--or))} /* — Les six colonnes, sur une seule ligne — */ .colonnes-mondes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:6px 0 20px} .cm{position:relative;border-radius:20px;overflow:hidden;display:flex;flex-direction:column; min-height:560px;color:#fff;border:1px solid color-mix(in srgb,var(--monde) 55%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--monde) 82%,#0A1130), color-mix(in srgb,var(--monde) 34%,#070F2A) 46%,#070F2A); box-shadow:0 24px 60px -28px rgba(0,0,0,.75);transition:.5s var(--ease-out)} .cm:hover{transform:translateY(-6px);box-shadow:0 40px 90px -34px rgba(0,0,0,.85)} /* l'emblème à gauche, le médaillon du Papi à droite, le texte dessous : rien ne se chevauche */ /* hauteur fixe : les photos de tous les mondes demarrent sur la meme ligne */ .cm-haut{padding:82px 14px 12px;text-align:center;min-height:200px; display:flex;flex-direction:column;justify-content:flex-start} .cm-embleme{position:absolute;top:14px;left:12px;width:38px;height:38px;object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))} .cm-haut h2{font-family:var(--sans);font-weight:700;font-size:16.5px;letter-spacing:.04em; text-transform:uppercase;line-height:1.2;color:#fff} /* le continent tient sur une ligne secondaire discrete : moitie de la taille, en italique */ .cm-haut h2 em{display:inline-block;font-size:.5em;font-style:italic;font-weight:600; letter-spacing:.1em;line-height:1.35;color:rgba(255,255,255,.9)} .cm-terme{margin-top:9px} .cm-terme .mnom b{color:var(--or-clair);font-size:12.5px} /* la signification n'est plus permanente : elle se deplie au survol (cadrage du 07/08) */ .cm-terme .msens > i{font-size:11.5px;color:rgba(255,255,255,.82);display:block;padding-top:3px} .cm-chiffres{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:rgba(255,255,255,.9);margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.25); line-height:1.45} .cm-photo{width:100%;flex:1;object-fit:cover;min-height:0} .cm-bas{position:absolute;inset:auto 0 0 0;padding:14px 14px 16px; background:linear-gradient(to top,rgba(7,15,42,.96) 30%,transparent)} /* médaillon du Papi : en haut à droite, son nom juste dessous */ .cm-papi{position:absolute;top:10px;right:10px;z-index:2;display:flex;flex-direction:column; align-items:center;gap:4px;width:64px;text-align:center} .cm-papi img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85); box-shadow:0 6px 18px -6px rgba(7,15,42,.9)} .cm-papi b{font-size:9.5px;color:#fff;line-height:1.2;text-shadow:0 1px 3px rgba(7,15,42,.9)} .cm-explorer{display:block;text-align:center;font-weight:700;font-size:13.5px;padding:9px 0;border-radius:10px; background:color-mix(in srgb,var(--monde) 78%,#000);border:1px solid rgba(255,255,255,.28);color:#fff} .cm-explorer:hover{background:var(--monde)} /* — Rail des promesses — */ .rail-promesses{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;padding:16px 24px 26px; border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase; font-weight:700;color:rgba(255,255,255,.62)} .rail-promesses span{display:inline-flex;align-items:center;gap:8px} .rail-promesses .ic{width:15px;height:15px;color:var(--or)} @media(max-width:1320px){.colonnes-mondes{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Les règles d'écran étroit sont regroupées en fin de feuille. */ @media(max-width:620px){.colonnes-mondes{grid-template-columns:repeat(2,minmax(0,1fr))}} /* — Questions d'entrée (après le choix d'un monde) — */ .entree{max-width:820px;margin:0 auto;padding:10px 26px 60px} .entree-tete{display:flex;gap:16px;align-items:center;margin-bottom:26px} .entree-tete img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(217,164,65,.7)} .entree-tete h1{font-size:clamp(22px,3vw,30px);margin-top:4px} .q{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09)} .q h2{font-size:clamp(20px,2.6vw,26px)} .q > p{font-size:14.5px;color:#C8C2E0;max-width:66ch;margin:8px 0 14px} .groupe{border:1px solid rgba(255,255,255,.12);border-radius:12px;margin-bottom:8px;background:rgba(255,255,255,.04)} .groupe summary{cursor:pointer;padding:10px 14px;font-size:13.5px;font-weight:600;color:#D6D1EA} .groupe[open] summary{border-bottom:1px solid rgba(255,255,255,.1)} .groupe .choix{padding:12px 14px} .bulle-accueil{display:flex;align-items:center;gap:12px;margin:14px 0 4px} .bulle-accueil img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.25)} .bulle-accueil > div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:8px 16px} .bulle-accueil b{display:block;font-size:14px;color:#fff} .bulle-accueil span{font-size:12.5px;color:#A9A2C6} /* — Bouton de connexion — */ .b-connexion{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:100px; background:linear-gradient(180deg,var(--or-clair),var(--or));color:#3A2A05;font-weight:700;font-size:13.5px} .b-connexion .ic{width:16px;height:16px} /* — Panneaux sobres (Le Fil, informations légales) — */ .panneau-sobre{border-radius:16px;padding:14px;border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.04)} .panneau-sobre .panneau-tete h3{color:#fff} .liste-legales{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px} .liste-legales a{display:block;padding:6px 8px;border-radius:8px;font-size:12.5px;color:#C3BDDC} .liste-legales a:hover{background:rgba(255,255,255,.06);color:#fff} .fil-post{padding:10px 0;border-top:1px solid rgba(255,255,255,.08)} .fil-post:first-of-type{border-top:0} .fil-tete{display:flex;align-items:center;gap:9px;margin-bottom:6px} .fil-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700; background:linear-gradient(140deg,var(--amethyste),var(--violet));color:#fff} .fil-tete b{display:block;font-size:12.5px;color:#fff} .fil-tete span{font-size:11px;color:#8E88A8} .fil-post p{font-size:12.5px;color:#C8C2E0;margin:0} .fil-post img{width:100%;max-height:150px;object-fit:cover;border-radius:10px;margin-top:8px} /* Une fois connecté dans un monde : le Fil prend la gauche, le centre se resserre. */ .cadre--monde{grid-template-columns:320px minmax(0,1fr) 280px} /* ========================================================================== J5 — Passeport : la preuve, pas l'audience. ========================================================================== */ .passeport{max-width:900px;margin:0 auto;padding:12px 0 60px} .avis{background:rgba(217,164,65,.14);border:1px solid rgba(217,164,65,.36);color:var(--or-clair); border-radius:12px;padding:11px 16px;font-size:13.5px} .pass-tete{display:flex;gap:22px;flex-wrap:wrap;align-items:center;justify-content:space-between; padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11)} .pass-identite{display:flex;gap:14px;align-items:center;min-width:260px} .pass-av{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:700; background:linear-gradient(140deg,var(--amethyste),var(--violet));color:#fff} .pass-tete h1{font-size:24px} .jauge-rang{height:5px;border-radius:3px;background:rgba(255,255,255,.14);margin-top:8px;max-width:260px;overflow:hidden} .jauge-rang i{display:block;height:100%;background:linear-gradient(90deg,var(--or),var(--or-clair))} .preuves{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap} .preuves b{display:block;font-family:var(--serif);font-size:24px;color:var(--or-clair)} .preuves span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#A9A2C6} .pass-onglets{display:flex;gap:6px;margin:22px 0 16px} .po{padding:9px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.14);background:transparent; color:#C3BDDC;font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer} .po.actif{background:var(--violet);border-color:var(--violet);color:#fff} .pv{display:none} .pv.actif{display:block} .pv h2{font-size:18px;margin-bottom:6px} .tampons{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px} .tampon{border-radius:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)} .tampon b{display:block;font-size:14px;color:#fff;margin:7px 0 3px} .tampon.verifie{border-color:rgba(217,164,65,.45);background:linear-gradient(150deg,rgba(217,164,65,.12),rgba(255,255,255,.03))} .tampon .mention{display:inline-flex;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700; padding:3px 9px;border-radius:100px;background:rgba(255,255,255,.09);color:#A9A2C6;border:1px solid rgba(255,255,255,.16)} .tampon .sceau{font-size:11px;padding:4px 11px 4px 8px} .carte-lien{display:inline-block;margin-top:8px;font-size:11.5px;color:var(--or-clair)} .fiche{display:grid;grid-template-columns:200px 1fr;gap:8px 18px;margin-top:14px;font-size:14px} .fiche dt{color:#A9A2C6;font-size:12.5px} .fiche dd{margin:0;color:#fff} .liens-sociaux{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin:12px 0 18px} .lien-social{border-radius:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)} .lien-social b{display:block;font-size:13.5px;color:#fff} .lien-social .sceau,.lien-social .mention{margin-top:8px;font-size:10.5px} .lien-retirer{margin-top:8px;background:none;border:0;color:#8E88A8;font-size:11.5px;cursor:pointer;padding:0} .form-lien{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .form-lien select,.form-lien input{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06);color:var(--creme);font-family:var(--sans);font-size:13.5px} .form-lien input{min-width:200px} /* La Carte de Voyage : format story */ .carte-voyage{position:relative;width:min(360px,100%);aspect-ratio:9/16;border-radius:22px;overflow:hidden; margin:20px 0 0;border:1px solid color-mix(in srgb,var(--monde) 50%,transparent); box-shadow:0 34px 80px -34px rgba(0,0,0,.85)} .cv-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cv-voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,15,42,.96) 22%,rgba(7,15,42,.45) 60%,rgba(7,15,42,.15))} .cv-dedans{position:absolute;inset:auto 0 0 0;padding:24px 22px;text-align:center;color:#fff} .cv-papi{width:66px;height:66px;border-radius:50%;object-fit:cover;margin:0 auto 10px; border:2px solid rgba(255,255,255,.85)} .cv-voix{font-family:var(--serif);font-size:17px;line-height:1.35;margin:0} .cv-papi-nom{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--or-clair);margin-top:8px} .cv-sceau{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:7px 15px;border-radius:100px; background:linear-gradient(135deg,rgba(217,164,65,.28),rgba(97,70,175,.2)); border:1px solid rgba(217,164,65,.6);color:var(--or-clair);font-size:12px;font-weight:700} .cv-pied{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.2); display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.8)} .form-connexion{display:flex;flex-direction:column;gap:14px;margin-top:20px} .form-connexion label span{display:block;font-size:12.5px;color:#A9A2C6;margin-bottom:5px} .form-connexion input[type=email],.form-connexion input[type=password]{width:100%;padding:12px 16px;border-radius:12px; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--creme); font-family:var(--sans);font-size:14.5px} .form-connexion .consent{font-size:13px} /* ── Carte de Voyage : planche de présentation (image rendue + choix du gabarit) ── */ .cv-planche{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:26px;align-items:start;margin-top:22px} .cv-cadre{margin:0;border-radius:22px;overflow:hidden;border:1px solid rgba(217,164,65,.35); box-shadow:0 24px 60px rgba(0,0,0,.45);background:#0B1233} .cv-cadre img{display:block;width:100%;height:auto} .cv-cote{display:flex;flex-direction:column;gap:10px} .cv-choix{display:flex;gap:8px;flex-wrap:wrap} .cv-preuves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 4px} .cv-preuves div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:14px;padding:10px 12px} .cv-preuves dt{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase; color:#C3BDDC;margin:0} .cv-preuves dd{font-family:var(--serif);font-size:26px;color:var(--or-clair);margin:2px 0 0} @media (max-width:900px){.cv-planche{grid-template-columns:1fr}} /* ── J6 — Communautés, groupes, Duo ─────────────────────────────────── */ .paiya-titre2{font-family:var(--serif);font-size:19px;color:var(--creme);margin:0 0 12px} .cmt-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px} .cmt{display:block;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);text-decoration:none;color:var(--creme)} .cmt:hover{border-color:rgba(217,164,65,.55)} .cmt-axe{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--or-clair)} .cmt b{display:block;font-family:var(--serif);font-size:17px;margin:4px 0 6px} .cmt-nb{font-size:13px;color:#C3BDDC} .cmt-rail{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px} .cmt-annuaire{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px} .cmt-profil{display:block;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);text-decoration:none;color:var(--creme)} .cmt-profil b{display:block;font-size:14.5px} .cmt-profil span{font-size:12.5px;color:#C3BDDC} .cmt-deux{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;margin-top:26px;align-items:start} .cmt-formulaire{display:flex;flex-direction:column;gap:8px;margin-top:14px} .cmt-formulaire label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#C3BDDC} .cmt-formulaire input,.cmt-formulaire select,.cmt-formulaire textarea{ background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px; padding:10px 12px;color:var(--creme);font-family:var(--sans);font-size:14.5px} .cmt-fil{margin-top:16px;display:flex;flex-direction:column;gap:12px} .cmt-fil article{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09); border-radius:14px;padding:12px 14px} .cmt-fil article b{font-size:14.5px} .cmt-fil article time{display:block;font-size:12px;color:#9C96B8;margin:2px 0 6px} .cmt-fil article p{margin:0;font-size:14.5px} .cmt-agenda{display:flex;flex-direction:column;gap:10px;margin-top:12px} .cmt-agenda div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09); border-left:3px solid var(--or);border-radius:12px;padding:10px 12px} .cmt-agenda div.passe{opacity:.55;border-left-color:rgba(255,255,255,.25)} .cmt-agenda b{display:block;font-size:14.5px} .cmt-agenda span{font-size:12.5px;color:#C3BDDC} .duo-question{margin-top:22px;padding:18px 20px;border-radius:18px; background:linear-gradient(150deg,rgba(97,70,175,.35),rgba(16,26,69,.55)); border:1px solid rgba(217,164,65,.45)} .duo-question p{font-family:var(--serif);font-size:21px;line-height:1.35;margin:8px 0} @media (max-width:900px){.cmt-deux{grid-template-columns:1fr}} /* ── Administration V2 — registre des fonctionnalités V1 ─────────────── */ /* Règle de lecture : les indicateurs d'une thématique tiennent sur UNE seule ligne, même nombreux. On comprend une thématique d'un coup d'œil ; au-delà de la largeur, la rangée défile latéralement au lieu de se replier. */ .adm-chiffres{display:flex;gap:10px;margin-top:16px;overflow-x:auto;padding-bottom:6px; scrollbar-width:thin} .adm-chiffres::-webkit-scrollbar{height:6px} .adm-chiffres::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px} .adm-chiffres>*{flex:1 1 0;min-width:104px;padding:10px 12px} /* Huit indicateurs doivent tenir dans la colonne centrale : le corps cède avant la ligne. */ .adm-chiffres .adm-chiffre b{font-size:23px} .adm-chiffres .adm-chiffre span{font-size:10.5px;letter-spacing:.04em;line-height:1.25} .adm-chiffres a.adm-chiffre::after{top:6px;right:7px;font-size:10px} .adm-chiffre{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:14px;padding:12px 14px} .adm-chiffre b{display:block;font-family:var(--serif);font-size:26px;color:#fff;line-height:1.1} .adm-chiffre span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#C3BDDC} .adm-chiffre.vert b{color:#7FD1A8} .adm-chiffre.ambre b{color:#EFBF43} .adm-chiffre.or b{color:var(--or-clair)} .adm-rail{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px} .adm-rail form{margin:0} .adm-message{margin-top:14px;padding:10px 14px;border-radius:12px;background:rgba(127,209,168,.14); border:1px solid rgba(127,209,168,.45);color:#DFF3E8;font-size:14px} .adm-table{display:flex;flex-direction:column;gap:12px;margin-top:12px} .adm-module{display:grid;grid-template-columns:1.5fr .7fr 1fr;gap:16px;align-items:start; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-left:3px solid rgba(255,255,255,.2); border-radius:14px;padding:13px 15px} .adm-module.adm-actif{border-left-color:#7FD1A8} .adm-module.adm-sourdine{border-left-color:#EFBF43} .adm-module.adm-retire{border-left-color:#C4553C;opacity:.75} .adm-nom b{font-family:var(--serif);font-size:16.5px;color:#fff} .adm-nom p{margin:4px 0 0} .adm-motif{font-size:13px;color:#C3BDDC;font-style:italic;margin-top:4px !important} .etq-adm{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.05em; border-radius:999px;padding:2px 9px} .etq-adm.actif{background:rgba(127,209,168,.2);color:#7FD1A8} .etq-adm.sourdine{background:rgba(239,191,67,.18);color:#EFBF43} .etq-adm.retire{background:rgba(196,85,60,.2);color:#E39A88} .adm-donnees b{display:block;font-family:var(--serif);font-size:20px;color:var(--or-clair)} .adm-donnees span{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#9C96B8} .adm-donnees details{margin-top:6px;font-size:12.5px;color:#C3BDDC} .adm-donnees summary{cursor:pointer} .adm-donnees ul{margin:6px 0 0;padding-left:16px} .adm-donnees code{font-size:12px} .adm-actions{display:flex;flex-direction:column;gap:7px;margin:0} .adm-actions select,.adm-actions input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15); border-radius:10px;padding:8px 10px;color:var(--creme);font-family:var(--sans);font-size:13.5px} @media (max-width:1000px){.adm-module{grid-template-columns:1fr}} /* ── Fiche de royauté : le détail, et non plus un sommaire ───────────── */ .roy-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:22px} .roy-chiffres div{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:14px;padding:11px 14px} .roy-chiffres span{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--or-clair)} .roy-chiffres b{display:block;font-size:14.5px;color:#fff;margin-top:3px;font-weight:600} .roy-section{margin-top:34px} .roy-section h2{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:21px;color:#fff;margin:0 0 14px} .roy-num{font-family:var(--serif);font-size:15px;color:var(--or);border:1px solid rgba(217,164,65,.5); border-radius:999px;min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center} .roy-texte{font-size:15.5px;line-height:1.7;color:#DCD7EC;max-width:78ch} .roy-entrees{display:flex;flex-direction:column;gap:14px} .roy-entree{display:grid;grid-template-columns:200px 1fr;gap:16px;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px;align-items:start} .roy-entree:only-child,.roy-entree:not(:has(img)){grid-template-columns:1fr} .roy-entree img{width:100%;height:140px;object-fit:cover;border-radius:12px;display:block} .roy-entree b{display:block;font-family:var(--serif);font-size:17px;color:#fff} .roy-entree p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:#DCD7EC} .roy-lieu{display:block;font-size:12.5px;color:var(--or-clair);margin-top:3px} .roy-fete{background:linear-gradient(150deg,rgba(217,164,65,.16),rgba(97,70,175,.18)); border:1px solid rgba(217,164,65,.45);border-radius:16px;padding:15px 17px} .roy-fete b{display:block;font-family:var(--serif);font-size:18px;color:#fff} .roy-fete p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:#DCD7EC} .roy-galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .roy-galerie img{width:100%;height:150px;object-fit:cover;border-radius:12px;display:block} .roy-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px} .roy-tags span{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px; font-size:13px;color:#C3BDDC} @media (max-width:720px){.roy-entree{grid-template-columns:1fr}.roy-entree img{height:180px}} /* Une royauté partagée entre plusieurs États d'aujourd'hui l'explique sous son récit. */ .roy-partage{margin:16px 0 0;padding:12px 15px;border-left:3px solid var(--or); background:rgba(217,164,65,.10);border-radius:0 12px 12px 0;font-size:14.5px; line-height:1.6;color:#E8E3F3;max-width:78ch} /* Vignette sans photographie : l'emblème du monde, en filigrane, dit « à documenter ». */ .carte .vue.vue-embleme{background-size:44% auto;background-repeat:no-repeat;background-position:center; opacity:.55} /* Console d'administration : deux écrans, et les deux boutons depuis le passeport. */ .adm-onglets{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 6px} .adm-onglets a{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);color:var(--creme);text-decoration:none;font-size:14px;font-weight:600} .adm-onglets a.on{background:linear-gradient(180deg,var(--or-clair),var(--or));color:#3A2A05;border-color:transparent} .adm-onglets a.discret{opacity:.65;font-weight:500} .po.po-admin{background:rgba(217,164,65,.16);border-color:rgba(217,164,65,.5);color:var(--or-clair); text-decoration:none;display:inline-flex;align-items:center} /* Un indicateur cliquable mène à la liste qu'il compte : il se voit. */ a.adm-chiffre{text-decoration:none;transition:border-color .15s,transform .15s} a.adm-chiffre:hover{border-color:rgba(217,164,65,.6);transform:translateY(-1px)} a.adm-chiffre::after{content:'↗';position:absolute;top:8px;right:10px;font-size:11px;color:var(--or);opacity:.65} .adm-chiffre{position:relative} /* Tableau d'administration : on y agit. */ .adm-tableau{margin-top:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10); border-radius:16px;overflow-x:auto} .adm-tableau table{width:100%;border-collapse:collapse;font-size:14px;min-width:900px} .adm-tableau th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase; color:#9C96B8;padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.12)} .adm-tableau td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:middle;color:#DCD7EC} .adm-tableau tbody tr:hover{background:rgba(255,255,255,.03)} .adm-tableau tr.archive{opacity:.55} .adm-tableau b{color:#fff} .adm-ligne-form{display:flex;gap:6px;align-items:center;margin:0;flex-wrap:wrap} /* Les champs texte d'une ligne de tableau suivaient le gabarit blanc du navigateur : sur fond nuit, ils se voyaient comme des trous. */ .adm-ligne-form select,.adm-ligne-form input[type=text],.adm-ligne-form input[type=number], .adm-ligne-form input[type=date],.adm-ligne-form input[type=url]{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:9px;padding:6px 8px;color:var(--creme);font-family:var(--sans);font-size:13px} .adm-ligne-form input:focus,.adm-ligne-form select:focus{outline:none;border-color:rgba(217,164,65,.65)} .adm-case{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#C3BDDC} .adm-case input{width:auto} .adm-icones{display:flex;gap:6px;align-items:center} .adm-icones form{margin:0} .b-icone{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:9px; width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer; color:var(--creme);font-size:14px;text-decoration:none;line-height:1} .b-icone:hover{border-color:rgba(217,164,65,.6)} .b-icone.danger:hover{border-color:rgba(196,85,60,.8);background:rgba(196,85,60,.18)} /* Pagination : précédent, où l'on en est, suivant. Rien d'autre. */ .paiya-pages{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px} .paiya-page{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--creme); text-decoration:none;font-size:13.5px;font-weight:600} .paiya-page:hover{border-color:rgba(217,164,65,.6)} .paiya-page.inactive{opacity:.38;cursor:default} .paiya-page-compte{font-size:13px;color:#9C96B8} /* Sous-onglets d'une section d'administration, et indicateur choisi. */ .adm-sous-onglets{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0 4px} .adm-sous-onglets a{padding:7px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.13); background:rgba(255,255,255,.04);color:#C3BDDC;text-decoration:none;font-size:13.5px;font-weight:600} .adm-sous-onglets a.on{background:rgba(217,164,65,.18);border-color:rgba(217,164,65,.55);color:var(--or-clair)} a.adm-chiffre.choisi{border-color:rgba(217,164,65,.7);background:rgba(217,164,65,.10)} /* Vignette de pays sans drapeau : l'emblème du monde, discret, plutôt qu'un vide. */ .vignette.vignette-embleme{background-size:62% auto;background-repeat:no-repeat;background-position:center;opacity:.5} /* ── Explorer : bandeau animé pour le membre connecté ─────────────────── */ .exp-hero{position:relative;border-radius:24px;overflow:hidden;padding:30px 32px; background:linear-gradient(140deg,rgba(27,37,85,.9),rgba(16,26,69,.95)); border:1px solid rgba(255,255,255,.10)} .exp-hero--anime{min-height:290px;display:flex;align-items:flex-end} .exp-fond{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0} .exp-hero--anime .exp-fond{animation:expFondu 24s linear infinite} @keyframes expFondu{ 0%{opacity:0} 3%{opacity:.85} 22%{opacity:.85} 25%{opacity:0} 100%{opacity:0} } .exp-voile{position:absolute;inset:0; background:linear-gradient(90deg,rgba(11,18,51,.88) 0%,rgba(11,18,51,.52) 55%,rgba(11,18,51,.20) 100%)} .exp-dedans{position:relative} /* Une liste de noms sous un carrousel ne dit pas quelle photographie porte quel nom. Chaque légende suit donc sa propre image, sur le même minutage que le fondu : elle paraît avec elle et s'efface avec elle. */ .exp-legendes{position:absolute;right:20px;bottom:14px;left:20px;height:1.5em;pointer-events:none} .exp-legende{position:absolute;right:0;bottom:0;opacity:0; font-size:12.5px;letter-spacing:.04em;color:#EFE7D8;text-shadow:0 1px 4px rgba(0,0,0,.75); animation:expLegende 24s linear infinite;pointer-events:auto} .exp-legende a{color:#EFE7D8;text-decoration:none;border-bottom:1px solid rgba(239,191,67,.55)} .exp-legende a:hover{color:var(--or-clair)} @keyframes expLegende{ 0%{opacity:0} 3%{opacity:1} 22%{opacity:1} 25%{opacity:0} 100%{opacity:0} } /* Le titre d'une fonctionnalité : même taille partout, portée par le composant plutôt que redite en style en ligne dans chaque vue. */ .exp-titre{font-size:clamp(22px,3vw,30px);margin-top:8px} .exp-quete{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap} .exp-quete input{flex:1;min-width:230px;padding:13px 18px;border-radius:999px; border:1px solid rgba(255,255,255,.20);background:rgba(11,18,51,.55);color:var(--creme); font-family:var(--sans);font-size:14.5px} /* Une animation de fond ne s'impose pas : elle se coupe si le poste le demande. */ @media (prefers-reduced-motion: reduce){ .exp-hero--anime .exp-fond{animation:none} .exp-hero--anime .exp-fond:first-of-type{opacity:.85} .exp-legende{animation:none} .exp-legende:first-of-type{opacity:1} } /* ── Bascule de monde : le geste principal de la barre haute ──────────── */ .bascule-monde > summary{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px; border-radius:999px;border:1px solid rgba(255,255,255,.20); background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04)); cursor:pointer;list-style:none} .bascule-monde > summary::-webkit-details-marker{display:none} .bascule-monde > summary:hover{border-color:var(--monde)} .bascule-monde > summary img{display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))} .bm-terme{font-family:var(--sans);font-weight:800;font-size:14.5px;letter-spacing:.05em;color:#fff} .bm-monde{font-family:var(--serif);font-style:italic;font-size:13px;color:#C3BDDC} .bm-bascule{width:17px;height:17px;color:var(--or-clair);stroke-width:2} .bascule-monde .mp-liste a{display:flex;align-items:center;gap:9px;padding:9px 12px} .bascule-monde .mp-liste a.actif{background:rgba(217,164,65,.14)} .bascule-monde .mp-liste b{font-size:13.5px;color:#fff;letter-spacing:.04em} .bascule-monde .mp-liste span{font-family:var(--serif);font-style:italic;font-size:12.5px;color:#C3BDDC;margin-left:auto} /* Le bandeau des royautés nomme ce qu'il montre. */ .exp-credit{margin-top:14px;font-size:13px;color:#C3BDDC} .exp-credit a{color:var(--or-clair);text-decoration:none;border-bottom:1px solid rgba(239,191,67,.4)} /* Inscription : ce que le passeport reprendra, dit avant de créer le compte. */ .insc-reprise{margin-top:16px;padding:14px 16px;border-radius:16px; background:linear-gradient(150deg,rgba(217,164,65,.12),rgba(97,70,175,.14)); border:1px solid rgba(217,164,65,.45)} .insc-reprise b{font-family:var(--serif);font-size:16px;color:#fff} .insc-reprise ul{margin:8px 0 0;padding-left:18px;color:#DCD7EC;font-size:14.5px} .insc-reprise li{margin:3px 0} /* Gabarit B : le terme du monde, redit en texte à côté du mot-symbole dessiné. */ .nav-marque{display:flex;align-items:center;gap:10px} .nav-terme{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--or-clair); letter-spacing:.02em;padding-left:10px;border-left:1px solid rgba(239,191,67,.35);line-height:1} @media (max-width:820px){.nav-terme{display:none}} /* ── J8 — Le Fil V2 ───────────────────────────────────────────────────── */ .fil-rail{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:20px} .fil-liste{display:flex;flex-direction:column;gap:14px;margin-top:18px} .fil-carte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-left:3px solid var(--or);border-radius:16px;padding:15px 17px} .fil-ancrage{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px; letter-spacing:.05em;text-transform:uppercase;color:var(--or-clair)} .fil-ancrage a{color:var(--or-clair);text-decoration:none;border-bottom:1px solid rgba(239,191,67,.4)} .fil-pays{color:#C3BDDC;text-transform:none;letter-spacing:0;font-size:12.5px} .fil-texte{margin:10px 0 0;font-size:15.5px;line-height:1.65;color:#E8E3F3} .fil-image{display:block;width:100%;max-height:340px;object-fit:cover;border-radius:12px;margin-top:12px} .fil-pied{display:flex;gap:10px;align-items:baseline;margin-top:10px;font-size:13px;color:#9C96B8} .fil-auteur{font-family:var(--serif);font-size:14.5px;color:#fff} /* Les six réactions — resserrées le 15 août 2026. Elles prenaient deux lignes entières et écrasaient le texte qu'elles accompagnaient : elles tiennent maintenant sur une seule ligne, un signe et son compte. Le libellé n'est pas perdu, il paraît au survol et au clavier. */ .fil-reactions{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:10px} .fil-reactions form{margin:0} .fil-reaction{position:relative;display:inline-flex;align-items:center;gap:5px; padding:4px 9px;border-radius:999px; border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#BDB6D6; font-family:var(--sans);font-size:12.5px;line-height:1;cursor:pointer} .fil-reaction .ic{width:16px;height:16px;stroke-width:1.5} .fil-reaction b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums} .fil-reaction:hover{border-color:rgba(217,164,65,.55);color:var(--or-clair)} .fil-reaction.mienne{background:rgba(217,164,65,.16);border-color:rgba(217,164,65,.6);color:var(--or-clair)} /* Le libellé au survol : une bulle, jamais le title du navigateur — deux infobulles superposées se gêneraient. */ .fil-reaction::after{content:attr(data-libelle);position:absolute;left:50%;bottom:calc(100% + 7px); transform:translateX(-50%) translateY(3px); background:#171327;color:#F2EEFF;border:1px solid rgba(255,255,255,.16); border-radius:8px;padding:4px 9px;font-size:12px;line-height:1.3;white-space:nowrap; opacity:0;pointer-events:none;z-index:6;transition:opacity .14s ease,transform .14s ease} .fil-reaction:hover::after,.fil-reaction:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)} .fil-reaction:focus-visible{outline:2px solid rgba(217,164,65,.7);outline-offset:2px} .fil-signalement{margin-left:auto} .fil-signalement summary{cursor:pointer;font-size:12.5px;color:#9C96B8} .fil-signalement form{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px} .fil-signalement select,.fil-signalement input{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:7px 10px;color:var(--creme); font-family:var(--sans);font-size:13px} .fil-signale{margin-left:auto;font-size:12.5px;color:var(--or-clair)} /* ───────────────────────────────────────────────────────────────────────── Le Fil V2 — les membres en tête, les illustrations, la conversation. La page s'ouvrait sur un mode d'emploi ; elle s'ouvre maintenant sur les membres qui l'écrivent. Le reste tient en trois idées : une publication montre l'objet dont elle parle, l'auteur a un visage, et on peut répondre. ───────────────────────────────────────────────────────────────────────── */ .paiya-invisible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .fil-membres-tete{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;margin-top:6px} /* Un rail qui défile : dix-huit membres ne tiennent pas sur une ligne, et les empiler en grille écraserait les publications sous les visages. */ .fil-membres{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 12px;margin-top:4px; scroll-snap-type:x proximity;scrollbar-width:thin; scrollbar-color:rgba(217,164,65,.5) transparent} .fil-membres::-webkit-scrollbar{height:6px} .fil-membres::-webkit-scrollbar-thumb{background:rgba(217,164,65,.45);border-radius:999px} .fil-membre{flex:0 0 auto;width:244px;display:flex;align-items:center;gap:11px;padding:10px 12px; border-radius:var(--r-s);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); scroll-snap-align:start;transition:border-color .18s ease,background .18s ease} .fil-membre:hover{border-color:rgba(217,164,65,.5);background:rgba(255,255,255,.075)} .fil-membre-photo{width:46px;height:46px;flex:0 0 46px;border-radius:50%;overflow:hidden; display:grid;place-items:center;font-weight:700;font-size:15px;color:#fff; background:linear-gradient(140deg,var(--amethyste),var(--violet)); border:1px solid rgba(255,255,255,.18)} .fil-membre-photo img{width:100%;height:100%;object-fit:cover;display:block} .fil-membre-texte{min-width:0;display:flex;flex-direction:column;gap:1px} /* Le nom tient sur deux lignes plutôt que d'être coupé : « Atelier Kente d'Awudomé » raccourci en « Atelier Kente d'A… » ne nomme plus personne. */ .fil-membre-texte b{font-family:var(--serif);font-size:13.5px;color:#fff;line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .fil-membre-role{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--or-clair)} .fil-membre-lieu{font-size:11.5px;color:#9C96B8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* L'illustration en vignette : à pleine largeur, l'image écrasait le texte de la publication et repoussait la conversation hors de l'écran. On la réduit, et l'agrandissement se fait à la demande dans la loupe. */ .fil-figure{margin:12px 0 0} .fil-figure figcaption{margin-top:6px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase; color:#8E88A8} .fil-figure figcaption span{color:var(--or-clair)} .fil-vignette{display:block;position:relative;padding:0;border:1px solid rgba(255,255,255,.12); border-radius:var(--r-s);overflow:hidden;cursor:zoom-in;background:none;width:240px;max-width:100%; transition:border-color .18s ease,transform .18s ease} .fil-vignette:hover{border-color:rgba(217,164,65,.6);transform:translateY(-1px)} .fil-vignette:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px} .fil-vignette img{display:block;width:100%;height:150px;object-fit:cover} .fil-vignette-loupe{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:50%; display:grid;place-items:center;font-size:13px;color:#fff;background:rgba(7,15,42,.72); border:1px solid rgba(255,255,255,.28)} /* Le rattachement ouvre la loupe : c'est un bouton, il doit ressembler au lien qu'il remplace. */ .fil-ancrage-lien{background:none;border:0;padding:0;font:inherit;cursor:pointer; color:var(--or-clair);border-bottom:1px solid rgba(239,191,67,.4); text-transform:inherit;letter-spacing:inherit} .fil-ancrage-lien:hover{border-bottom-color:var(--or-clair)} /* La loupe */ .fil-loupe{border:0;padding:0;background:transparent;max-width:min(980px,94vw);width:100%} .fil-loupe::backdrop{background:rgba(4,8,24,.82);backdrop-filter:blur(3px)} .fil-loupe-cadre{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr); gap:0;background:#101A3B;border:1px solid rgba(255,255,255,.14);border-radius:var(--r); overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.75)} .fil-loupe-image{display:block;width:100%;height:100%;max-height:74vh;object-fit:cover;background:#0A1330} .fil-loupe-texte{padding:22px 24px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;max-height:74vh} .fil-loupe-pays{margin:0;font-size:13.5px;color:#C3BDDC} .fil-loupe-details{margin:6px 0 0;display:flex;flex-direction:column;gap:7px} .fil-loupe-details>div{display:flex;gap:10px;align-items:baseline} .fil-loupe-details dt{flex:0 0 96px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8E88A8} .fil-loupe-details dd{margin:0;font-size:13.5px;color:#E8E3F3} .fil-loupe-presentation{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:#C8C2E0} .fil-loupe-origine{margin:2px 0 0;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#8E88A8} .fil-loupe-texte .b{align-self:flex-start;margin-top:6px} .fil-loupe-fermer{position:absolute;top:10px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%; border:1px solid rgba(255,255,255,.24);background:rgba(7,15,42,.7);color:#fff;font-size:19px; line-height:1;cursor:pointer} .fil-loupe-fermer:hover{border-color:var(--or-clair);color:var(--or-clair)} .fil-av{overflow:hidden} .fil-av img{width:100%;height:100%;object-fit:cover;display:block} .fil-av-auteur{width:34px;height:34px;flex:0 0 34px} .fil-pied{align-items:center} /* Le corps : vignette et texte côte à côte. */ .fil-corps{margin-top:10px} .fil-corps-illustre{display:flex;gap:16px;align-items:flex-start} .fil-corps-illustre .fil-figure{flex:0 0 240px;margin:2px 0 0} .fil-corps-illustre .fil-texte{margin:0;flex:1;min-width:0} /* La conversation — repliable, parce qu'une publication très commentée repoussait la suivante hors de l'écran. Elle s'ouvre par défaut : la conversation fait partie de la publication, on ne la cache pas d'office. */ .fil-conversation{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09)} .fil-conversation-titre{font-family:var(--sans);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:#8E88A8;margin:0 0 10px;font-weight:600; display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;user-select:none} .fil-conversation-titre::-webkit-details-marker{display:none} .fil-conversation-titre:hover{color:var(--or-clair)} .fil-conversation-bascule{width:20px;height:20px;flex:0 0 20px;border-radius:50%; border:1px solid rgba(255,255,255,.22);display:grid;place-items:center; font-size:14px;line-height:1;color:var(--or-clair);background:rgba(255,255,255,.05)} .fil-conversation-bascule::before{content:'+'} .fil-conversation[open] .fil-conversation-bascule::before{content:'−'} .fil-conversation-titre:hover .fil-conversation-bascule{border-color:var(--or-clair)} .fil-conversation-invite{margin:10px 0 0} .fil-conversation-invite a{color:var(--or-clair)} .fil-commentaire{display:flex;gap:10px;padding:9px 0} .fil-commentaire + .fil-commentaire{border-top:1px solid rgba(255,255,255,.06)} .fil-commentaire .fil-av{flex:0 0 30px} .fil-reponse{margin-left:40px} .fil-reponse .fil-av{width:26px;height:26px;flex:0 0 26px;font-size:11px} .fil-commentaire-corps{min-width:0;flex:1} .fil-commentaire-tete{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .fil-commentaire-tete b{font-family:var(--serif);font-size:14px;color:#fff} .fil-commentaire-role{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--or-clair)} .fil-commentaire-tete time{font-size:11.5px;color:#8E88A8} .fil-commentaire-corps p{margin:4px 0 0;font-size:14px;line-height:1.6;color:#D9D4EA} .fil-commentaire-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px} .fil-commentaire-actions form{margin:0} .fil-commentaire-action{background:none;border:0;padding:0;cursor:pointer;font:inherit; font-size:12px;color:#9C96B8;display:inline-flex;align-items:center;gap:5px} .fil-commentaire-action:hover{color:var(--or-clair)} .fil-commentaire-action b{color:#fff;font-size:11.5px} .fil-commentaire-action.mienne{color:var(--or-clair)} .fil-commentaire-repondre summary{cursor:pointer;font-size:12px;color:#9C96B8;list-style:none} .fil-commentaire-repondre summary:hover{color:var(--or-clair)} .fil-commentaire-repondre[open] summary{color:var(--or-clair)} .fil-commentaire-repondre form{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .fil-commentaire-forme{display:flex;gap:8px;margin-top:12px} .fil-commentaire-forme input[type=text], .fil-commentaire-repondre input[type=text]{flex:1;min-width:180px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 15px;color:#fff; font:inherit;font-size:13.5px} .fil-commentaire-forme input::placeholder, .fil-commentaire-repondre input::placeholder{color:#8E88A8} .fil-commentaire-forme input:focus, .fil-commentaire-repondre input:focus{outline:none;border-color:rgba(217,164,65,.6)} @media (max-width:860px){ /* Sous cette largeur, l'image et le texte de la loupe s'empilent. */ .fil-loupe-cadre{grid-template-columns:1fr} .fil-loupe-image{max-height:38vh} .fil-loupe-texte{max-height:44vh} } @media (max-width:640px){ .fil-membre{width:186px} .fil-reponse{margin-left:22px} .fil-commentaire-forme{flex-wrap:wrap} .fil-vignette{width:100%} /* Côte à côte, il ne resterait qu'une colonne de texte de trois mots. */ .fil-corps-illustre{display:block} .fil-corps-illustre .fil-texte{margin-top:12px} } /* ───────────────────────────────────────────────────────────────────────── J11 — Le Cercle. L'adhésion se présente comme ce qu'elle est : une contrepartie, pas une faveur. On montre d'abord ce qu'elle ouvre, ensuite ce qu'elle coûte, et le prix n'est jamais caché derrière un compte. ───────────────────────────────────────────────────────────────────────── */ .paiya-etroit{max-width:720px;margin:0 auto;padding:0 24px} .cercle-titre{font-size:clamp(24px,3.4vw,34px);margin:8px 0 0;color:#fff} .cercle-chapo{max-width:74ch;margin:12px 0 0;font-size:15.5px;line-height:1.7;color:#C8C2E0} .cercle-sous-titre{font-size:clamp(18px,2.2vw,22px);margin:0 0 14px;color:#fff} .cercle-portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:26px} .cercle-portes article{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:var(--r-s);padding:18px 20px} .cercle-portes h2{font-family:var(--serif);font-size:17px;margin:0 0 8px;color:var(--or-clair)} .cercle-portes p{margin:0;font-size:13.5px;line-height:1.6;color:#C3BDDC} .cercle-offres{margin-top:34px} .cercle-formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:14px} .cercle-formule{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); border-radius:var(--r);padding:24px} .cercle-formule-phare{border-color:rgba(217,164,65,.55);background:rgba(217,164,65,.08)} .cercle-etiquette{position:absolute;top:-11px;left:24px;padding:3px 11px;border-radius:999px; background:var(--or);color:#20180A;font-size:11px;font-weight:700;letter-spacing:.04em} .cercle-formule h3{font-family:var(--serif);font-size:19px;margin:0;color:#fff} .cercle-prix{margin:10px 0 4px;font-size:34px;font-weight:700;color:var(--or-clair);line-height:1} .cercle-prix span{display:block;font-size:13px;font-weight:400;color:#9C96B8;margin-top:6px} .cercle-choix{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px} .cercle-choix select{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); border-radius:999px;padding:9px 14px;color:#fff;font:inherit;font-size:13.5px} .cercle-indisponible{margin-top:14px;color:#E7B4B4} .cercle-avertissement{margin-top:20px;padding:14px 16px;border-radius:var(--r-s); background:rgba(217,164,65,.10);border:1px solid rgba(217,164,65,.32); font-size:13px;line-height:1.6;color:#EBDCB8;max-width:80ch} .cercle-avertissement b{color:var(--or-clair)} .cercle-etat{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap; margin-top:30px;padding:22px 24px;border-radius:var(--r); background:rgba(217,164,65,.10);border:1px solid rgba(217,164,65,.42)} .cercle-etat h2{font-family:var(--serif);font-size:22px;margin:6px 0 6px;color:#fff} .cercle-etat-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .cercle-etat-actions form{margin:0} .cercle-recap{margin-top:22px;display:flex;flex-direction:column;gap:10px;padding:20px 22px; border-radius:var(--r-s);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)} .cercle-recap>div{display:flex;justify-content:space-between;gap:16px;align-items:baseline} .cercle-recap span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8E88A8} .cercle-recap b{font-size:15px;color:#fff} .cercle-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:22px} .cercle-actions form{margin:0} .cercle-historique{margin-top:34px} .cercle-table{width:100%;border-collapse:collapse;font-size:13.5px} .cercle-table th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase; color:#8E88A8;padding:0 12px 9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-weight:600} .cercle-table td{padding:11px 12px 11px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#D9D4EA} .cercle-table a{color:var(--or-clair)} .cercle-pastille{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#C3BDDC} .cercle-pastille-ok{background:rgba(88,180,120,.16);border-color:rgba(88,180,120,.42);color:#9FE0B6} .cercle-pastille-ko{background:rgba(214,92,92,.16);border-color:rgba(214,92,92,.42);color:#F0B0B0} /* Les contenus réservés */ .cercle-contenus{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:24px} .cercle-contenu{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column} .cercle-contenu-image{display:block} .cercle-contenu-image img{display:block;width:100%;height:170px;object-fit:cover} .cercle-contenu-texte{padding:18px 20px;display:flex;flex-direction:column;gap:7px} .cercle-contenu-genre{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--or-clair)} .cercle-contenu h2{font-family:var(--serif);font-size:18px;margin:0;line-height:1.3} .cercle-contenu h2 a{color:#fff;text-decoration:none} .cercle-contenu h2 a:hover{color:var(--or-clair)} .cercle-contenu-chapo{margin:0;font-size:13.5px;line-height:1.6;color:#C3BDDC} .cercle-contenu time{font-size:11.5px;color:#8E88A8} .cercle-lecture{max-width:820px} .cercle-lecture-date{margin:10px 0 0;font-size:12px;color:#8E88A8} .cercle-lecture-image{display:block;width:100%;max-height:380px;object-fit:cover; border-radius:var(--r);margin-top:20px} .cercle-lecture-corps{margin-top:22px} .cercle-lecture-corps p{font-size:16px;line-height:1.8;color:#E0DBF0;margin:0 0 16px;max-width:72ch} @media (max-width:640px){ .cercle-etat{flex-direction:column;align-items:flex-start} } /* ── V2 (navigation) : le dépliant « Découvrir » de la barre haute ────────── Cinq entrées tiennent, sept non. « Pays », « Royautés » et « Acteurs » se replient donc sous une entrée unique — ce qui est cohérent avec le fait que la fiche pays centralise déjà la présentation. Même dessin que le sélecteur de monde : c'est le seul autre dépliant de la barre, ils doivent se ressembler. */ .onglet-menu{position:relative} .onglet-menu > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px} .onglet-menu > summary::-webkit-details-marker{display:none} .om-fleche{width:15px;height:15px;opacity:.7;transition:transform .2s;flex:0 0 auto} .onglet-menu[open] .om-fleche{transform:rotate(180deg)} .onglet-menu .mp-liste{left:0;right:auto;min-width:190px} .onglet-menu .mp-liste a{display:block;padding:9px 12px} .onglet-menu .mp-liste a.actif{background:rgba(97,70,175,.34);color:#fff} /* V3 lot 3a — le titre d'Ambassadeur. Il est octroyé par l'administrateur du pays, jamais auto-déclaré : il se pose donc en or, comme tout ce que PAÏYA reconnaît, mais sans le sceau — un acteur reste déclaré. */ .titre-ambassadeur{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px; font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--or-clair);background:rgba(217,164,65,.14);border:1px solid rgba(217,164,65,.4)} /* Un titre octroyé se distingue d'une action ordinaire : le bouton porte l'or quand le titre est posé, pour qu'un écran d'administration se lise d'un coup d'œil sans avoir à ouvrir chaque fiche. */ .b-icone-or{color:var(--or-clair);border-color:rgba(217,164,65,.45);background:rgba(217,164,65,.12)} /* V3 lot 3c — suivre et être ami, sur le passeport d'un autre membre. */ .pass-liens{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px} .pass-liens form{display:flex;gap:8px} .pass-reseau{margin:18px 0 0;padding:14px 16px;border-radius:var(--r-s); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)} .pass-demande{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px} .pass-demande b{margin-right:auto} /* V3 lot 3c — la messagerie. Une bulle dit qui parle par sa place, pas par une étiquette : la sienne à droite, celle de l'autre à gauche. */ .msg-liste{display:grid;gap:8px;margin-top:20px} .msg-fil{display:flex;flex-direction:column;gap:10px;margin-top:22px;padding:16px; border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)} .msg-bulle{max-width:75%;padding:11px 14px;border-radius:16px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)} .msg-bulle--moi{align-self:flex-end;background:rgba(97,70,175,.26);border-color:rgba(155,133,228,.36)} .msg-bulle p{margin:0;font-size:14.5px;line-height:1.6;color:var(--creme);white-space:pre-wrap} .msg-bulle span{display:block;margin-top:5px;font-size:11.5px} .msg-ecrire{margin-top:16px;display:flex;gap:10px;align-items:flex-end} .msg-ecrire textarea{flex:1;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.18); background:rgba(11,18,51,.55);color:var(--creme);font-family:var(--sans);font-size:14.5px;resize:vertical} /* V3 lot 3c — le bandeau des stories, en tête du Fil. Chacune porte ce à quoi elle est rattachée : c'est cette mention qui la distingue du contenu qui flotte, et c'est la condition à laquelle le module a été rallumé. */ .stories{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:thin} .story{position:relative;flex:0 0 132px;height:188px;border-radius:16px;overflow:hidden; background:linear-gradient(150deg,rgba(27,37,85,.9),rgba(16,26,69,.95));background-size:cover;background-position:center; border:1px solid rgba(255,255,255,.12);display:flex;align-items:flex-end} .story--neuve{display:grid;place-content:center;gap:6px;text-align:center; background:rgba(217,164,65,.10);border-color:rgba(217,164,65,.38);color:var(--or-clair)} .story-plus{font-size:26px;line-height:1} .story-voile{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(7,15,42,.88) 100%)} .story-dedans{position:relative;padding:10px 11px} .story-dedans b{display:block;font-size:12px;color:#fff} .story-dedans p{margin:3px 0 0;font-size:11.5px;line-height:1.4;color:#D6D1EA} .story-attache{display:inline-block;margin-top:5px;font-size:10.5px;color:var(--or-clair)} /* 13/08/2026 — la vignette s'ouvre. Le lien couvre toute la carte mais passe sous le contenu, pour que le rattachement et le signalement restent cliquables ; sans ce z-index, la story avalait ses propres liens. */ /* Le menu « Ajouter » du composeur — 13/08/2026. */ .cp-ajouter{position:relative} .cp-menu{position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;min-width:264px; background:var(--nuit-royale,#070F2A);border:1px solid rgba(255,255,255,.14);border-radius:16px; padding:8px;box-shadow:0 18px 46px -14px rgba(0,0,0,.7)} .cp-menu-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none; border:0;color:#EDE8FA;font:inherit;font-size:14.5px;padding:10px 12px;border-radius:12px;cursor:pointer} .cp-menu-item:hover,.cp-menu-item:focus-visible{background:rgba(255,255,255,.08)} .cp-menu-note{margin:6px 10px 4px;font-size:12px;line-height:1.5;color:#8C86A8} .cp-humeur{margin-top:12px} .cp-humeurs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .cp-humeur-choix input{position:absolute;opacity:0;pointer-events:none} .cp-humeur-choix span{display:inline-block;padding:7px 12px;border-radius:999px;font-size:13.5px; border:1px solid rgba(255,255,255,.16);color:#D6D1EA;cursor:pointer} .cp-humeur-choix input:checked + span{border-color:var(--or,#D9A441);color:var(--or-clair,#EFBF43)} .fil-humeur{color:var(--or-clair,#EFBF43);font-size:13.5px} .fil-video{position:relative;padding-top:56.25%;margin:12px 0;border-radius:16px;overflow:hidden;background:#0B1230} .fil-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .story-ouvrir{position:absolute;inset:0;z-index:1} .story-dedans{z-index:2} .story-duree{display:block;font-size:10.5px;color:var(--voile,#8F89A3);margin-top:2px} .story-page{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:start;margin-top:18px} .story-page-image{width:100%;border-radius:20px;display:block} .story-page-texte{min-width:0} @media(max-width:820px){.story-page{grid-template-columns:1fr}} .story-attache a{color:var(--or-clair)} /* V3 lot 3d — le geste de signalement, le même partout. Discret par défaut : il ne doit pas peser sur la lecture, mais il doit être là. */ .signaler{display:inline-block;position:relative} .signaler > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px; font-size:11.5px;color:var(--voile,#8F89A3)} .signaler > summary::-webkit-details-marker{display:none} .signaler > summary:hover{color:var(--or-clair)} .signaler > summary .ic{width:13px;height:13px} .signaler-boite{position:absolute;right:0;z-index:30;width:270px;margin-top:6px;padding:12px; border-radius:14px;background:#0C1738;border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px -24px #000;display:grid;gap:8px} .signaler-boite select,.signaler-boite textarea{width:100%;padding:8px 10px;border-radius:10px; border:1px solid rgba(255,255,255,.18);background:rgba(11,18,51,.55);color:var(--creme); font-family:var(--sans);font-size:13px} /* V3 lot 3d — le formulaire de la lettre, au pied de chaque page. */ .lettre{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;max-width:460px} .lettre input{flex:1;min-width:210px;padding:9px 14px;border-radius:999px; border:1px solid rgba(255,255,255,.18);background:rgba(11,18,51,.55);color:var(--creme); font-family:var(--sans);font-size:13.5px} /* V3 lot 3d — la cloche et son compte. Le nombre n'est pas une décoration : c'est la seule chose qui distingue « rien de neuf » de « on vous attend ». */ .rond-cloche{position:relative} .cloche-pastille{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px; border-radius:999px;background:var(--or);color:#20180A;font-size:10.5px;font-weight:800; font-style:normal;display:grid;place-items:center;border:2px solid var(--nuit-royale,#070F2A)} .notifs{display:grid;gap:8px;margin-top:20px} .notif{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border-radius:var(--r-s); background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)} .notif--neuve{border-color:rgba(217,164,65,.38);background:rgba(217,164,65,.07)} .notif b{font-size:14px;color:#fff;font-weight:600} .notif p{margin:4px 0 0;font-size:13px;color:#C3BDDC} .notif span{margin-left:auto;font-size:11.5px;white-space:nowrap} /* ── Menu personnel : tout ce qui appartient au membre tient sous son nom ── */ .menu-perso > summary{display:flex;align-items:center;gap:9px;padding:7px 13px 7px 7px; border-radius:999px;border:1px solid rgba(217,164,65,.55); background:linear-gradient(135deg,rgba(217,164,65,.20),rgba(217,164,65,.08)); cursor:pointer;list-style:none;color:var(--or-clair);font-weight:700;font-size:14px} .menu-perso > summary::-webkit-details-marker{display:none} .menu-perso > summary:hover{border-color:var(--or-clair)} .mperso-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center; background:rgba(217,164,65,.85);color:#1a1330;font-weight:800;font-size:14px} .mperso-nom{max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .menu-perso .mp-liste{min-width:230px} .menu-perso .mp-liste a{padding:10px 12px} .menu-perso .mp-liste .ic{width:17px;height:17px;color:var(--or-clair)} .mperso-sortie{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px; margin-top:4px;border:0;border-top:1px solid rgba(255,255,255,.10);border-radius:10px; background:transparent;color:#F0A7A7;font-family:var(--sans);font-size:13.5px;cursor:pointer} .mperso-sortie:hover{background:rgba(240,167,167,.10)} .mperso-sortie .ic{width:17px;height:17px} /* ── Mon profil ── */ .pf-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-top:20px} .pf-carte{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10); border-radius:18px;padding:20px 22px} .pf-apercu{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;margin-top:14px} .pf-avatar{width:92px;height:92px;border-radius:50%;object-fit:cover;border:2px solid rgba(217,164,65,.6)} .pf-avatar-lettre{display:grid;place-items:center;background:rgba(97,70,175,.35); color:#fff;font-size:34px;font-family:var(--serif)} .pf-nom{font-family:var(--serif);font-size:19px;color:#fff;margin-top:8px} .pf-form{display:flex;flex-direction:column;gap:13px;margin-top:14px} .pf-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#C3BDDC} .pf-form input,.pf-form textarea{padding:11px 14px;border-radius:12px; border:1px solid rgba(255,255,255,.18);background:rgba(11,18,51,.55);color:var(--creme); font-family:var(--sans);font-size:14.5px} .pf-form textarea{resize:vertical} .pf-form .b{align-self:flex-start;margin-top:4px} .pf-deux{display:grid;grid-template-columns:1fr 1fr;gap:13px} .pf-case{flex-direction:row!important;align-items:center;gap:9px!important} .pf-case input{width:16px;height:16px;padding:0} .pf-solde{font-family:var(--serif);font-size:34px;color:var(--or-clair);margin:14px 0 6px} .pf-solde span{font-size:15px;color:#C3BDDC;font-family:var(--sans)} .pf-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px} .pf-table th{text-align:left;padding:9px 12px;color:#C3BDDC;font-size:12px; letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.12)} .pf-table td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.07);color:var(--creme)} .avis-erreur{border-left:4px solid #E06C6C} @media(max-width:620px){.pf-deux{grid-template-columns:1fr}.mperso-nom{max-width:10ch}} /* ── Colonne de gauche : l'encadré du membre connecté ── */ .carte-membre{padding-bottom:14px} .cmb-tete{display:flex;align-items:center;gap:11px;text-decoration:none} .cmb-photo{width:52px;height:52px;border-radius:50%;object-fit:cover; border:2px solid rgba(217,164,65,.65);flex:0 0 auto} .cmb-photo-lettre{display:grid;place-items:center;background:rgba(97,70,175,.38); color:#fff;font-family:var(--serif);font-size:22px} .cmb-qui{min-width:0} .cmb-qui b{display:block;font-family:var(--serif);font-size:16px;color:#fff; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmb-qui span{display:block;font-size:12px;color:#B9B3D2; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cmb-rang{margin:12px 0 6px;font-size:12.5px;color:#C3BDDC} .cmb-rang b{color:var(--or-clair)} .carte-membre .jauge-rang{margin-bottom:12px} .cmb-liens{display:flex;flex-direction:column;gap:2px;padding-top:10px; border-top:1px solid rgba(255,255,255,.09)} .cmb-liens a{display:flex;align-items:center;gap:9px;padding:8px 6px;border-radius:9px; font-size:13px;color:#D6D1EA;text-decoration:none} .cmb-liens a:hover{background:rgba(255,255,255,.07);color:#fff} .cmb-liens .ic{width:16px;height:16px;color:var(--or-clair)} /* ── Colonne de gauche : les actualités du monde ── */ .actu{display:block;padding:10px 8px;border-radius:10px;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.06)} .actu:last-of-type{border-bottom:0} .actu:hover{background:rgba(255,255,255,.06)} .actu b{display:block;font-size:13px;line-height:1.42;color:#E9E4F5;font-weight:600} .actu-pied{display:block;margin-top:5px;font-size:11.5px;color:#9E97BC} /* ── Colonne de gauche : le Fil, désormais en bas ── */ .fil-ancre{display:inline-block;margin-top:7px;padding:3px 9px;border-radius:999px; background:rgba(97,70,175,.16);border:1px solid rgba(97,70,175,.34); font-size:11px;color:#C3BDDC} .fil-publier{margin-top:12px;width:100%;justify-content:center} /* ── Mon profil : le passeport fusionné dans la carte de gauche ── */ .pf-passeport{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)} .pf-rang{font-size:13px;color:#C3BDDC;margin:0 0 8px} .pf-rang b{color:var(--or-clair)} .pf-compteurs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px} .pf-compteurs span{display:flex;flex-direction:column;font-size:11.5px;color:#9E97BC; letter-spacing:.04em;text-transform:uppercase} .pf-compteurs b{font-family:var(--serif);font-size:24px;color:var(--or-clair);line-height:1.1} /* Dépôt de la photo, et repli pour une adresse déjà en ligne. */ .pf-form input[type=file]{padding:9px 12px;font-size:13px;color:#C3BDDC} .pf-form input[type=file]::file-selector-button{margin-right:10px;padding:7px 13px;border-radius:9px; border:1px solid rgba(217,164,65,.5);background:rgba(217,164,65,.16);color:var(--or-clair); font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer} .pf-aide{font-size:11.5px;color:#9E97BC} .pf-repli summary{font-size:12.5px;color:#9E97BC;cursor:pointer;padding:4px 0} .pf-repli input{width:100%;margin-top:8px;padding:11px 14px;border-radius:12px; border:1px solid rgba(255,255,255,.18);background:rgba(11,18,51,.55);color:var(--creme); font-family:var(--sans);font-size:14.5px} .pf-form select{padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18); background:rgba(11,18,51,.55);color:var(--creme);font-family:var(--sans);font-size:14.5px} .pf-form select option,.pf-form select optgroup{background:#101a3b;color:var(--creme)} /* ══════════════════════════════════════════════════════════════════════════ ÉCRANS ÉTROITS — en fin de feuille, pour passer après tout ce qu'elles corrigent. `.cadre--monde` était déclarée plus bas qu'elles et les écrasait : un membre connecté gardait trois colonnes sur un téléphone, et la page débordait vers la droite. ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:1200px){ .cadre,.cadre--monde{grid-template-columns:230px minmax(0,1fr)} .droite{display:none} } @media(max-width:900px){ .cadre,.cadre--monde{grid-template-columns:minmax(0,1fr);padding:14px 14px 0} .colonne,.droite{position:static} /* Le contenu demandé d'abord, les colonnes latérales ensuite. */ .scene{order:1} .colonne{order:2} .droite{order:3} .onglets{overflow:auto} .griot-appel span{display:none} /* Rien ne doit dépasser en largeur : une page qui glisse latéralement donne l'impression que le site est cassé. */ body{overflow-x:hidden} .paiya-large,.passeport,.scene{max-width:100%} img,figure,table{max-width:100%} /* La barre haute garde la marque et le membre ; les onglets descendent dans la barre basse. */ .nav-v2{padding:8px 12px;gap:8px} .nav-v2 .onglets{display:none} .nav-terme{display:none} .nav-marque img{width:96px;height:auto} .mperso-nom{max-width:9ch} /* De la place pour la barre basse. */ .cadre{padding-bottom:76px} footer,.pied{margin-bottom:64px} } /* ── Barre de navigation basse — mobile seulement ────────────────────────── */ .nav-bas{display:none} @media(max-width:900px){ .nav-bas{position:fixed;left:0;right:0;bottom:0;z-index:60; display:grid;grid-template-columns:repeat(5,1fr);gap:2px; padding:7px 6px calc(7px + env(safe-area-inset-bottom)); background:rgba(9,14,38,.97);border-top:1px solid rgba(255,255,255,.10); backdrop-filter:blur(10px)} .nav-bas a{display:flex;flex-direction:column;align-items:center;gap:3px; padding:5px 2px;border-radius:12px;text-decoration:none; color:#A9A2C6;font-size:10.5px;letter-spacing:.02em;text-align:center} .nav-bas a.actif{color:var(--or-clair);background:rgba(217,164,65,.12)} .nav-bas .ic{width:21px;height:21px} .nav-bas .nb-publier{color:#1a1330} .nav-bas .nb-publier .rond-or{display:grid;place-items:center;width:36px;height:36px; margin-top:-14px;border-radius:50%;background:var(--or-clair); box-shadow:0 4px 14px rgba(217,164,65,.45)} /* L'icône hérite sinon du gris des autres entrées et disparaît sur l'or. */ .nav-bas .nb-publier .rond-or .ic{width:19px;height:19px;color:#1a1330;stroke:#1a1330} .nav-bas .nb-publier span{color:var(--or-clair)} } /* ── V3 lot 3e — régie et mises en avant ─────────────────────────────── */ /* L'encart de régie s'annonce : l'étiquette « Annonce » n'est pas négociable, c'est elle qui empêche la confusion avec le contenu du site. */ .reclame{max-width:1180px;margin:22px auto 8px;padding:0 24px;position:relative} .reclame-etiquette{display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:#9C96B8;border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:2px 9px;margin-bottom:7px} .reclame-corps{display:flex;gap:14px;align-items:center;text-decoration:none; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:12px 14px} .reclame-corps:hover{border-color:rgba(217,164,65,.45)} .reclame-corps img{width:104px;height:70px;object-fit:cover;border-radius:11px;flex:none} .reclame-texte b{display:block;color:#fff;font-family:var(--serif);font-size:16px} .reclame-texte span{font-size:12.5px;color:#9C96B8} /* Les mises en avant : le classement calculé de l'accueil. L'épingle se voit — une main est passée, et le lecteur a le droit de le savoir. */ .mea{max-width:1180px;margin:26px auto 0;padding:0 24px} .mea-tete h2{font-family:var(--serif);font-size:clamp(19px,2.4vw,25px);color:#fff;margin:0} .mea-tete p{margin:6px 0 0;color:#9C96B8;font-size:13.5px;max-width:70ch} .mea-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:14px} .mea-carte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:16px; overflow:hidden;display:flex;flex-direction:column} .mea-carte.mea-epinglee{border-color:rgba(217,164,65,.5)} .mea-carte img{width:100%;height:132px;object-fit:cover} .mea-corps{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px} .mea-nature{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9C96B8} .mea-nature em{color:var(--or-clair);font-style:normal} .mea-corps b{font-family:var(--serif);font-size:16px;color:#fff;line-height:1.25} .mea-corps p{margin:0;font-size:13px;color:#C3BDDC;line-height:1.5} .mea-corps a{font-size:13px;color:var(--or-clair);text-decoration:none;font-weight:600} .mea-corps a:hover{text-decoration:underline} @media(max-width:620px){.mea-grille{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .reclame-corps img{width:76px;height:56px}} /* Formulaire de saisie d'un écran d'administration. Les champs nus héritaient du gabarit blanc du navigateur : sur un fond nuit, ils se voyaient comme des trous. Même traitement que `.adm-actions`, en grille cette fois. */ .adm-formulaire{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px} .adm-formulaire label{display:flex;flex-direction:column;gap:5px;font-size:12px;letter-spacing:.05em; text-transform:uppercase;color:#9C96B8;font-weight:600} .adm-formulaire input,.adm-formulaire select{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:9px 11px;color:var(--creme); font-family:var(--sans);font-size:13.5px;text-transform:none;letter-spacing:0} .adm-formulaire input:focus,.adm-formulaire select:focus{outline:none;border-color:rgba(217,164,65,.65)} .adm-formulaire .adm-formulaire-action{align-self:end} /* ── V4 — favoris et recherche globale ───────────────────────────────── */ /* L'étoile dit deux choses : ce qu'elle fera si on clique, et ce qui est déjà fait. Une icône seule ne dit ni l'un ni l'autre — le mot reste. */ .fav-forme{display:inline-block;margin:10px 0 0} .fav-bouton{display:inline-flex;align-items:center;gap:7px;cursor:pointer; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px; padding:7px 14px;color:var(--creme);font-family:var(--sans);font-size:13.5px;font-weight:600} .fav-bouton:hover{border-color:rgba(217,164,65,.6)} .fav-bouton.pose{background:rgba(217,164,65,.16);border-color:rgba(217,164,65,.6);color:var(--or-clair)} .fav-bouton span[aria-hidden]{font-size:15px;line-height:1} .fav-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:12px} .fav-carte{display:flex;justify-content:space-between;align-items:flex-start;gap:10px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:13px 15px} .fav-carte b{display:block;color:#fff;font-family:var(--serif);font-size:15.5px;line-height:1.3} .fav-carte span{font-size:12px;color:#9C96B8} .fav-carte a{font-size:13px;color:var(--or-clair);text-decoration:none;font-weight:600} .fav-carte form{margin:0} .fav-perdu{opacity:.6} .fav-barre{text-decoration:line-through} /* Recherche : un seul bandeau de saisie, puis un groupe par nature. Mélanger les natures dans une liste unique rendrait le classement incomparable. */ .rech-forme{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px} .rech-forme input[type=search]{flex:1;min-width:240px;padding:12px 18px;border-radius:999px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--creme); font-family:var(--sans);font-size:14.5px} .rech-forme select{padding:11px 14px;border-radius:999px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);color:var(--creme);font-family:var(--sans);font-size:13.5px} .rech-forme input:focus,.rech-forme select:focus{outline:none;border-color:rgba(217,164,65,.65)} .rech-groupe{margin-top:26px} .rech-groupe h2{font-family:var(--serif);font-size:19px;color:#fff;display:flex;align-items:baseline;gap:10px} .rech-groupe h2 span{font-size:12px;color:#9C96B8;font-family:var(--sans)} .rech-groupe h2 a{margin-left:auto;font-size:12.5px;color:var(--or-clair);text-decoration:none;font-family:var(--sans)} .rech-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px} .rech-carte{display:flex;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:14px;padding:12px 14px} .rech-carte img{width:64px;height:64px;object-fit:cover;border-radius:10px;flex:none} .rech-carte b{display:block;color:#fff;font-family:var(--serif);font-size:15.5px;line-height:1.3} .rech-situation{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#9C96B8;margin-top:2px} .rech-carte p{margin:6px 0 0;font-size:13px;color:#C3BDDC;line-height:1.5} .rech-carte a{display:inline-block;margin-top:6px;font-size:13px;color:var(--or-clair); text-decoration:none;font-weight:600} @media(max-width:620px){.rech-forme input[type=search]{min-width:100%}} /* V4 — deux ajustements vus à la capture, pas au test : le menu déroulant de « retrouver son accès » gardait le gabarit blanc du navigateur, et la date d'un favori se collait à son lien. */ .form-connexion select{width:100%;padding:11px 13px;border-radius:10px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--creme); font-family:var(--sans);font-size:14.5px} .form-connexion select:focus{outline:none;border-color:rgba(217,164,65,.65)} .fav-carte span{display:block;margin-top:3px} .fav-carte a{display:inline-block;margin-top:6px} /* ── V5 — le Papi guide ──────────────────────────────────────────────── */ /* Le portrait n'est pas décoratif : c'est ce qui distingue les six Papi, et ce qui dit au visiteur de quel monde on lui parle. */ .papi-tete{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .papi-tete img{width:88px;height:88px;border-radius:50%;object-fit:cover; border:2px solid rgba(217,164,65,.7);flex:none} .papi-tete h1{font-family:var(--serif);font-size:clamp(23px,3vw,31px);color:#fff;margin:4px 0 0} .papi-salut{margin:8px 0 0;color:#C3BDDC;font-size:15px;max-width:70ch;line-height:1.6} .papi-appuis{margin:16px 0 0;font-size:13px;color:#9C96B8;max-width:76ch} .papi-appuis b{color:var(--or-clair);font-weight:600} .papi-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px} .papi-carte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px} .papi-nature{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9C96B8} .papi-carte b{font-family:var(--serif);font-size:16px;color:#fff;line-height:1.3} .papi-carte p{margin:0;font-size:13px;color:#C3BDDC;line-height:1.5} /* La raison est la pièce maîtresse : elle se lit, elle ne se devine pas. */ .papi-raison{font-size:12.5px;color:var(--or-clair);font-style:italic} .papi-carte a{font-size:13px;color:var(--or-clair);text-decoration:none;font-weight:600} .papi-parole{margin-top:30px;max-width:820px} .papi-bulle{border-radius:16px;padding:12px 16px;margin-top:10px;max-width:86%} .papi-bulle p{margin:0;font-size:14.5px;line-height:1.6;white-space:pre-line} .papi-moi{background:rgba(97,70,175,.22);border:1px solid rgba(97,70,175,.45);margin-left:auto;color:#E7E2F6} .papi-lui{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#DCD7EC} .papi-voie{display:inline-block;margin-top:8px;font-size:10.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--or-clair);border:1px solid rgba(217,164,65,.45); border-radius:999px;padding:2px 9px} .papi-pistes{margin:10px 0 0;padding-left:18px;font-size:13.5px;color:#C3BDDC} .papi-pistes li{margin:4px 0} .papi-pistes a{color:var(--or-clair)} .papi-note{margin-top:12px;font-size:13px;color:#9C96B8} .papi-forme{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap} .papi-forme input{flex:1;min-width:240px;padding:12px 18px;border-radius:999px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--creme); font-family:var(--sans);font-size:14.5px} .papi-forme input:focus{outline:none;border-color:rgba(217,164,65,.65)} .papi-quota{margin-top:12px;font-size:13px;color:#9C96B8} .papi-quota a{color:var(--or-clair)} /* ── V6 — Miles et Présence Certifiée ────────────────────────────────── */ /* Le solde se lit d'un coup d'œil, mais il n'est pas triomphal : ce n'est pas un compte en banque, et rien ici ne doit y ressembler. */ .miles-solde{display:flex;align-items:baseline;gap:10px;margin-top:18px} .miles-solde b{font-family:var(--serif);font-size:clamp(38px,6vw,54px);color:var(--or-clair);line-height:1} .miles-solde span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9C96B8} .miles-avertissement{margin-top:10px;max-width:76ch;font-size:13.5px;color:#C3BDDC;line-height:1.6; border-left:3px solid rgba(217,164,65,.55);padding-left:14px} .miles-avertissement b{color:var(--or-clair)} .miles-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:12px} .miles-carte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px} .miles-carte.miles-ouvert{border-color:rgba(217,164,65,.5)} .miles-carte b{font-family:var(--serif);font-size:24px;color:var(--or-clair);line-height:1} .miles-carte span{font-size:13.5px;color:#DCD7EC;line-height:1.45} .miles-carte em{font-size:12px;color:#9C96B8;font-style:normal} .miles-carte form{margin:6px 0 0} .miles-gain{color:#7FD1A8;font-weight:700} .miles-depense{color:#E6A79A;font-weight:700} /* L'historique des Miles n'a que trois colonnes : le gabarit large des tableaux d'administration y coupait la colonne des Miles, c'est-à-dire la seule qui compte. Vu à la capture, pas au test. */ .miles-tableau table{min-width:0} .miles-tableau td:last-child,.miles-tableau th:last-child{text-align:right;white-space:nowrap} /* ── V7 — Programmes ─────────────────────────────────────────────────── */ /* Charte de la décision 20 : l'accent du monde où l'on se trouve, et le Lagon Profond sur le badge et la barre de progression **seulement**. ⚠️ Un cours n'est JAMAIS doré : l'or reste au royal et au vérifié. Poser de l'or sur un chapitre reviendrait à dire qu'un cours est un document d'archive, ce qu'il n'est pas. */ :root{--lagon:#12A5C9} .prog-pastille{display:inline-block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; font-weight:700;color:#fff;background:var(--lagon);border-radius:999px;padding:3px 11px} .prog-perimetre{display:block;font-size:12px;color:#9C96B8} .prog-detail{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--lagon)} .prog-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px} .prog-carte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:18px;overflow:hidden;display:flex;flex-direction:column} .prog-carte img{width:100%;height:150px;object-fit:cover} .prog-corps{padding:14px 16px;display:flex;flex-direction:column;gap:7px} .prog-corps b{font-family:var(--serif);font-size:17px;color:#fff;line-height:1.25} .prog-corps p{margin:0;font-size:13.5px;color:#C3BDDC;line-height:1.5} .prog-corps a{font-size:13.5px;color:var(--lagon);text-decoration:none;font-weight:700} .prog-tete{display:flex;gap:24px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-top:10px} .prog-tete h1{font-family:var(--serif);font-size:clamp(23px,3.4vw,33px);color:#fff;margin:8px 0 0} .prog-resume{margin:8px 0 0;color:#C3BDDC;font-size:15px;max-width:70ch;line-height:1.6} .prog-presentation{margin-top:20px;max-width:76ch;color:#DCD7EC;font-size:14.5px;line-height:1.75} .b-lagon{background:var(--lagon);border:1px solid var(--lagon);color:#fff} .b-lagon:hover{filter:brightness(1.12)} .prog-avancement{min-width:220px} .prog-avancement span{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#9C96B8} .prog-avancement b{font-family:var(--serif);font-size:19px;color:var(--lagon)} .prog-barre{height:9px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;margin:7px 0} .prog-barre i{display:block;height:100%;background:var(--lagon)} .prog-barre-fine{height:6px} .prog-unite{margin-top:24px} .prog-unite h2{font-family:var(--serif);font-size:19px;color:#fff} .prog-chapitres{margin:10px 0 0;padding-left:20px;color:#DCD7EC} .prog-chapitres li{margin:7px 0} .prog-chapitres li.acquis a{color:#7FD1A8} .prog-chapitres a{color:#DCD7EC;text-decoration:none;font-weight:600} .prog-chapitres a:hover{color:var(--lagon)} .prog-chapitres span{display:block;font-size:12px;color:#9C96B8} .prog-texte{margin-top:20px;font-size:15.5px;line-height:1.85;color:#DCD7EC} .prog-quiz{margin-top:30px;background:rgba(18,165,201,.08);border:1px solid rgba(18,165,201,.35); border-radius:18px;padding:20px 22px} .prog-quiz h2{font-family:var(--serif);font-size:19px;color:#fff;margin:0 0 10px} .prog-question{border:0;padding:0;margin:0 0 18px} .prog-question legend{font-size:14.5px;color:#fff;font-weight:600;margin-bottom:8px} .prog-question label{display:flex;gap:9px;align-items:center;margin:6px 0;font-size:14px;color:#DCD7EC} .prog-question input{width:auto;accent-color:var(--lagon)} .prog-corrections{margin:0 0 16px;padding-left:18px;font-size:13.5px} .prog-corrections li.juste{color:#7FD1A8} .prog-corrections li.faux{color:#E6A79A} .prog-corrections em{display:block;color:#9C96B8;font-style:normal;font-size:12.5px} .prog-liste{display:flex;flex-direction:column;gap:10px;margin-top:12px} .prog-entree{display:flex;justify-content:space-between;gap:14px;align-items:flex-start; background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:13px 16px} .prog-entree b{color:#fff;font-family:var(--serif);font-size:15.5px} .prog-entree p{margin:5px 0 0;font-size:13.5px;color:#C3BDDC;line-height:1.5} .prog-entree a{color:var(--lagon);text-decoration:none;font-weight:700;font-size:13.5px;white-space:nowrap} .prog-navigation{display:flex;justify-content:space-between;gap:14px;margin-top:30px;flex-wrap:wrap} .prog-navigation a{color:#C3BDDC;text-decoration:none;font-size:13.5px} .prog-navigation a.suite{margin-left:auto;color:var(--lagon);font-weight:700} /* Administration : l'arborescence du parcours, lisible en un écran. */ .prog-admin-cours{border-left:2px solid rgba(18,165,201,.5);padding-left:14px;margin:14px 0} .prog-admin-cours>b{color:#fff;font-family:var(--serif);font-size:16px} .prog-admin-unite{margin:10px 0 10px 12px} .prog-admin-unite>span{color:#C3BDDC;font-size:14px;font-weight:600} .prog-admin-chapitre{margin:8px 0 8px 14px;font-size:13.5px;color:#9C96B8} .prog-admin-chapitre em{font-style:normal;color:var(--lagon);font-size:12px;margin-left:6px} .adm-formulaire textarea{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15); border-radius:10px;padding:9px 11px;color:var(--creme);font-family:var(--sans);font-size:13.5px; text-transform:none;letter-spacing:0} /* ── V8 — mes données ────────────────────────────────────────────────── */ /* L'effacement se distingue du reste de la page : c'est le seul geste du site qui ne se défait pas, et il doit se voir comme tel — sans pour autant être caché, ce qui reviendrait à décourager un droit. */ .rgpd-effacer{margin-top:34px;background:rgba(196,85,60,.10);border:1px solid rgba(196,85,60,.45); border-radius:18px;padding:22px 24px} .rgpd-effacer h2{font-family:var(--serif);font-size:19px;color:#F3DAD4;margin:0 0 10px} .rgpd-effacer p{margin:0 0 10px;font-size:14px;color:#E8D5D0;line-height:1.65;max-width:74ch} .rgpd-effacer form{display:flex;flex-direction:column;gap:12px;max-width:420px;margin-top:16px} .rgpd-effacer label{display:flex;flex-direction:column;gap:5px;font-size:12px;letter-spacing:.05em; text-transform:uppercase;color:#D9BDB6;font-weight:600} .rgpd-effacer input{background:rgba(255,255,255,.07);border:1px solid rgba(196,85,60,.45); border-radius:10px;padding:10px 12px;color:var(--creme);font-family:var(--sans);font-size:14px; text-transform:none;letter-spacing:0} .rgpd-effacer input:focus{outline:none;border-color:rgba(196,85,60,.9)} .b-danger{background:rgba(196,85,60,.22);border:1px solid rgba(196,85,60,.7);color:#F3DAD4; align-self:flex-start} .b-danger:hover{background:rgba(196,85,60,.34)} /* ── Conservatoire V1 ────────────────────────────────────────────────── */ /* Le code gardé se lit, il ne s'édite pas : fond sombre, défilement propre, et aucune coloration — ce qui est conservé est du texte exact. */ .conserv-code{background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.10);border-radius:12px; padding:14px 16px;max-height:420px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;line-height:1.6;color:#C8D6E5;white-space:pre;margin:0} .conserv-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:10px} .conserv-images figure{margin:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-radius:12px;overflow:hidden} .conserv-images img{width:100%;height:100px;object-fit:cover;display:block} .conserv-images figcaption{padding:7px 10px;display:flex;justify-content:space-between;gap:8px; font-size:11.5px;color:#9C96B8} .conserv-images code{font-size:11px} /* ── Le composeur du Fil — 13 août 2026 ──────────────────────────────── */ /* L'écran d'avant posait une liste de quatre cents lieux avant la première lettre, et demandait une adresse web pour une photo. Ici : on écrit, et le reste attend d'être demandé. */ .composeur{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12); border-radius:20px;padding:16px 18px;margin-top:18px} .cp-tete{display:flex;gap:12px;align-items:flex-start} .cp-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none; border:1px solid rgba(255,255,255,.18)} .cp-initiale{display:grid;place-items:center;background:rgba(97,70,175,.35);color:#fff; font-family:var(--serif);font-size:19px} #cp-texte{flex:1;min-height:92px;max-height:340px;background:transparent;border:0;resize:none; color:var(--creme);font-family:var(--sans);font-size:17px;line-height:1.55;padding:9px 2px} #cp-texte:focus{outline:none} #cp-texte::placeholder{color:#8F89A3} .cp-apercu{position:relative;margin:12px 0 0;border-radius:16px;overflow:hidden; border:1px solid rgba(255,255,255,.14)} .cp-apercu img{width:100%;max-height:340px;object-fit:cover;display:block} .cp-retirer{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%; border:0;background:rgba(11,20,48,.78);color:#fff;cursor:pointer;font-size:14px} .cp-retirer:hover{background:rgba(179,38,30,.85)} .cp-lieu{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)} .cp-lieu-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .cp-lieu-tete>span{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#9C96B8} .cp-genres{display:flex;gap:7px;flex-wrap:wrap} .cp-genre input{position:absolute;opacity:0;pointer-events:none} .cp-genre span{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px; border:1px solid rgba(255,255,255,.16);color:#C3BDDC;cursor:pointer} .cp-genre input:checked+span{background:rgba(217,164,65,.18);border-color:rgba(217,164,65,.55); color:var(--or-clair);font-weight:600} #cp-lieu-libre{width:100%;margin-top:10px;padding:11px 14px;border-radius:12px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--creme); font-family:var(--sans);font-size:14.5px} #cp-lieu-libre:focus{outline:none;border-color:rgba(217,164,65,.6)} .cp-fiche{margin-top:10px} .cp-fiche summary{cursor:pointer;font-size:12.5px;color:#9C96B8} .cp-fiche select{width:100%;margin-top:8px;padding:9px 11px;border-radius:10px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--creme); font-family:var(--sans);font-size:13.5px} .cp-erreur{margin:12px 0 0;font-size:13.5px;color:#E6A79A} .cp-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px; padding-top:12px;border-top:1px solid rgba(255,255,255,.10)} .cp-gestes{display:flex;gap:8px} .cp-geste{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#C3BDDC; font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer} .cp-geste:hover{border-color:rgba(217,164,65,.55);color:var(--or-clair)} .cp-fin{display:flex;align-items:center;gap:12px;margin-left:auto} .cp-compteur{font-size:12.5px;color:#8F89A3;font-variant-numeric:tabular-nums} .cp-compteur.court{color:var(--or-clair);font-weight:700} @media(max-width:560px){.cp-fin{margin-left:0;width:100%;justify-content:space-between}} /* ── Le Fil, plus lisible — 13 août 2026 ─────────────────────────────── */ /* La colonne de gauche montrait des extraits coupés qu'on ne pouvait pas ouvrir. Toute la carte devient le lien : viser un mot souligné au doigt, sur un téléphone, ne marche pas. */ .fil-post-lien{display:block;text-decoration:none;color:inherit;border-radius:16px} .fil-post-lien:hover .fil-post{border-color:rgba(217,164,65,.5);background:rgba(255,255,255,.07)} .fil-post-lien:focus-visible{outline:2px solid var(--or);outline-offset:2px} .fil-post{transition:border-color .15s,background .15s} /* La publication visée par l'ancre se signale un instant : sans cela, on arrive au milieu d'une page et on ne sait pas ce qu'on est venu lire. */ .fil-carte:target,.fil-publication:target,article[id^="pub-"]:target{ animation:filVise 2.4s ease-out} @keyframes filVise{ 0%{box-shadow:0 0 0 3px rgba(217,164,65,.75)} 70%{box-shadow:0 0 0 3px rgba(217,164,65,.55)} 100%{box-shadow:0 0 0 3px rgba(217,164,65,0)} } @media (prefers-reduced-motion: reduce){ .fil-carte:target,.fil-publication:target,article[id^="pub-"]:target{ animation:none;box-shadow:0 0 0 3px rgba(217,164,65,.6)} } /* Les icônes du composeur viennent du sprite du site : les emoji ne s'affichent pas partout, et un carré vide vaut moins qu'un mot seul. */ .cp-geste .ic{width:15px;height:15px} /* ── Actualités : la fiche s'ouvre sur place — 13 août 2026 ──────────── */ /* Un clic envoyait le lecteur sur un site tiers, et il ne revenait pas. La fiche se déplie ici même : le chapeau de l'éditeur, sa source, sa date, et le lien vers son texte — qui reste le seul chemin vers l'article entier. */ .actu-fiche{border-bottom:1px solid rgba(255,255,255,.07)} .actu-fiche:last-of-type{border-bottom:0} .actu-fiche>summary{cursor:pointer;list-style:none} .actu-fiche>summary::-webkit-details-marker{display:none} .actu-fiche>summary::after{content:'+';float:right;margin-left:8px;color:var(--or); font-size:15px;line-height:1;opacity:.75} .actu-fiche[open]>summary::after{content:'–'} .actu-fiche[open]>summary b{color:var(--or-clair)} .actu-corps{padding:0 2px 14px;animation:actuOuvre .18s ease-out} @keyframes actuOuvre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){.actu-corps{animation:none}} .actu-resume{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:#DCD7EC} .actu-sans{color:#9C96B8;font-style:italic} /* La citation de la source n'est pas une mention légale reléguée en petit : c'est ce qui distingue une reprise honnête d'un pillage. */ .actu-citation{margin:9px 0 0;font-size:11.5px;line-height:1.55;color:#9C96B8; border-left:2px solid rgba(217,164,65,.45);padding-left:9px} .actu-citation b{color:var(--or-clair)} .actu-lire{display:inline-block;margin-top:11px;font-size:12.5px;font-weight:700; color:var(--or-clair);text-decoration:none} .actu-lire:hover{text-decoration:underline} /* ── La page d'entrée — 13 août 2026 ────────────────────────────────── Concept B : la promesse à gauche, une publication réelle à droite. La V1 ouvrait sur un carrousel de dix photos qui vendait des voyages ; PAÏYA n'en vend pas, et un visiteur doit voir ce qui se passe ici. */ .vitrine{padding:14px 0 46px} .vitrine-corps{max-width:1180px;margin:0 auto;padding:0 22px;display:grid; grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;min-height:0} .vitrine-surtitre{font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--or-clair,#EFBF43);margin:0} .vitrine-dire h1{font-family:var(--paiya-serif,Georgia,serif);font-size:clamp(30px,4.2vw,50px); line-height:1.12;margin:16px 0 0;color:#fff;font-weight:600} .vitrine-dire h1 em{color:var(--or-clair,#EFBF43);font-style:italic} .vitrine-sous{color:#BFB9D6;font-size:16px;line-height:1.65;max-width:52ch;margin:18px 0 0} .vitrine-portes{display:flex;align-items:center;gap:18px;margin-top:30px;flex-wrap:wrap} .vitrine-bouton{background:var(--or,#D9A441);color:#231B08;padding:13px 28px;border-radius:999px; font-weight:700;font-size:15px;text-decoration:none;display:inline-block; transition:transform .15s ease,box-shadow .15s ease} .vitrine-bouton:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(217,164,65,.7)} .vitrine-lien{color:#DCD7EC;font-size:14.5px;text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px} .vitrine-lien:hover{border-bottom-color:var(--or-clair,#EFBF43)} .vitrine-visiteur{margin:16px 0 0;color:#8C86A8;font-size:13.5px} .vitrine-visiteur a{color:#BFB9D6} .vitrine-chiffres{margin:26px 0 0;color:#9C96B8;font-size:13px;letter-spacing:.02em} .vitrine-mondes{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .vitrine-mondes a{width:58px;height:58px;border-radius:50%;background-size:cover; background-position:center;border:2px solid rgba(217,164,65,.5);position:relative; transition:transform .15s ease,border-color .15s ease} .vitrine-mondes a:hover{transform:scale(1.06);border-color:var(--or-clair,#EFBF43)} .vitrine-mondes a span{position:absolute;left:-9999px} .vitrine-montrer{display:flex;flex-direction:column;gap:13px} .vitrine-carte{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09); border-radius:18px;padding:15px} .vitrine-carte p{color:#DCD7EC;font-size:14px;line-height:1.6;margin:11px 0 0} .vitrine-carte-tete{display:flex;align-items:center;gap:10px} .vitrine-carte-tete b{color:#fff;font-size:13.5px;display:block} .vitrine-carte-tete i{color:#8C86A8;font-size:12px;font-style:normal;display:block;margin-top:1px} .vitrine-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,#6146AF,#D9A441);color:#fff;font-weight:700;font-size:14px} .vitrine-photo{height:190px;border-radius:13px;background-size:cover;background-position:center; margin-top:12px} .vitrine-reactions{display:flex;gap:8px;margin-top:13px;flex-wrap:wrap} .vitrine-reactions span{font-size:11.5px;color:#CFC8E6;border:1px solid rgba(255,255,255,.16); border-radius:999px;padding:5px 12px} .vitrine-actu-titre{color:#fff !important;font-weight:600;font-size:13.5px !important;margin-top:8px !important} .vitrine-actu-resume{font-size:13px !important;color:#BFB9D6 !important} .vitrine-actu-source{color:#8C86A8;font-size:11.5px;font-style:normal;display:block;margin-top:8px} .vitrine-legende{color:#6C6788;font-size:11.5px;text-align:right;margin:2px 4px 0} @media(max-width:900px){ .vitrine-corps{grid-template-columns:1fr;gap:34px;min-height:0} .vitrine-montrer{order:2} .vitrine-photo{height:160px} } /* ── Le décor de la découverte — 13 août 2026 ───────────────────────── Ni menu, ni colonnes : une page qui présente la plateforme ne propose qu'un chemin, celui qui mène dedans. */ .vitrine-decor{min-height:100vh;display:flex;flex-direction:column} .vitrine-tete{display:flex;align-items:center;justify-content:space-between; padding:20px clamp(18px,4vw,42px);gap:18px} .vitrine-marque img{display:block;height:34px;width:auto} .vitrine-tete-actions{display:flex;align-items:center;gap:18px} .vitrine-bouton.petit{padding:9px 20px;font-size:13.5px} .vitrine-scene{flex:1} .vitrine-pied{padding:26px clamp(18px,4vw,42px) 40px;color:#6C6788;font-size:12.5px} .vitrine-pied a{color:#8C86A8;text-decoration:none} .vitrine-pied a:hover{text-decoration:underline} .vitrine-corps-etroit{max-width:1120px;margin:0 auto;padding:0 22px} /* Le titre tient sur deux lignes, une par proposition. */ .vitrine-dire h1 span{display:block;white-space:nowrap} .vitrine-dire h1{font-size:clamp(23px,3.05vw,40px)} /* ── L'aperçu d'un monde ──────────────────────────────────────────── */ .apercu{padding:10px 0 60px} .apercu-titre{font-family:var(--paiya-serif,Georgia,serif);color:#fff;font-weight:600; font-size:clamp(28px,4vw,44px);line-height:1.14;margin:12px 0 0} .apercu-sous{color:#BFB9D6;font-size:15px;line-height:1.65;max-width:64ch;margin:14px 0 0} .apercu-compte{color:#CFC8E6;font-size:13.5px;margin:12px 0 0} .apercu-banniere{background-size:cover;background-position:center;border-radius:0 0 26px 26px; padding:56px 0 40px;margin-bottom:26px;position:relative;isolation:isolate} .apercu-banniere::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit; background:linear-gradient(180deg,rgba(11,13,38,.55) 0%,rgba(11,13,38,.88) 100%)} .apercu-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:16px; margin-top:28px} .apercu-monde{display:block;border-radius:18px;overflow:hidden;text-decoration:none; background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09); transition:transform .16s ease,border-color .16s ease} .apercu-monde:hover{transform:translateY(-2px);border-color:rgba(217,164,65,.5)} .apercu-image{display:block;height:132px;background-size:cover;background-position:center} .apercu-corps{display:block;padding:13px 15px 15px} .apercu-corps b{display:block;color:#fff;font-size:16px} .apercu-corps i{display:block;color:#8C86A8;font-size:12.5px;font-style:normal;margin-top:4px} .apercu-fiches{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:15px; margin-top:22px} .apercu-fiche{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09); border-radius:17px;padding:13px;display:block} .apercu-fiche-image{display:block;height:126px;border-radius:12px;background-size:cover; background-position:center;margin-bottom:11px} .apercu-genre{display:block;color:var(--or-clair,#EFBF43);font-size:11px;letter-spacing:.09em; text-transform:uppercase} .apercu-fiche b{display:block;color:#fff;font-size:15px;margin-top:5px;line-height:1.3} .apercu-fiche p{color:#BFB9D6;font-size:13px;line-height:1.55;margin:7px 0 0} .apercu-porte{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px} .apercu-porte span{color:#8C86A8;font-size:13.5px} .apercu-autres{margin-top:26px;color:#6C6788;font-size:13px} .apercu-autres a{color:#BFB9D6;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.18)} @media(max-width:620px){ .vitrine-dire h1 span{white-space:normal} .vitrine-tete-actions .vitrine-lien{display:none} } /* Galerie des fiches : légende et crédit d'image (18/08/2026). L'OGL et les licences Creative Commons exigent la mention de la source ; sans ce bloc, aucune image sous licence ne peut être publiée sur une fiche. */ .roy-galerie figure{margin:0} .roy-galerie figcaption{margin-top:6px;font-size:12px;line-height:1.4;color:var(--voile,#8F89A3)} .roy-galerie .roy-legende{display:block;color:var(--plume,#5C5675)} .roy-galerie .roy-credit{display:block;font-size:11px;opacity:.85} .roy-galerie .roy-credit a{color:inherit;text-decoration:underline} .roy-hero-credit{position:absolute;right:10px;bottom:8px;z-index:2;font-size:11px;color:#fff;opacity:.72} .roy-hero-credit a{color:inherit;text-decoration:underline}