/* ============================================================ Martial Chételat — « L'équilibriste » Du fil du funambule au fil du pouls. Design : scène sombre (encre bleutée) / papier crème, or chaud + corail tibétain, Fraunces + Space Grotesk, fil continu SVG, icônes trait fin monochromes. ============================================================ */ :root{ --ink:#12161d; --ink-2:#1a2029; --ink-3:#232b37; --paper:#f4eee1; --paper-2:#eae0ca; --gold:#d2a24c; --gold-soft:#e7c98a; --gold-deep:#a97c2d; --coral:#c65240; --coral-soft:#e08a7b; --turq:#3e9c94; --txt-d:#ece7da; --txt-d-soft:#a8a294; --txt-l:#23272e; --txt-l-soft:#6d675a; --line-d:rgba(236,231,218,.14); --line-l:rgba(35,39,46,.14); --serif:"Fraunces",Georgia,serif; --sans:"Space Grotesk","Segoe UI",system-ui,sans-serif; --radius:18px; --radius-sm:12px; --shadow:0 22px 60px rgba(0,0,0,.42); --shadow-sm:0 10px 28px rgba(0,0,0,.28); --shadow-l:0 14px 40px rgba(46,36,16,.14); } /* ---------- Thèmes par page : une couleur par thématique ---------- La classe th-* sur redéfinit le trio d'accent (--gold = accent sur fond sombre, --gold-soft = clair, --gold-deep = accent sur papier). Tout le reste (héro, boutons, quiz, fil, accordéons) suit via var(). */ body.th-parcours{--gold:#8fb573;--gold-soft:#b8d4a0;--gold-deep:#4f7a3b} /* vert forêt — les racines, le bûcheron */ body.th-kunye{--gold:#d08a55;--gold-soft:#e6b48c;--gold-deep:#9c5a28} /* cuivre chaud — huiles, mains, chaleur */ body.th-tibet{--gold:#4bb39c;--gold-soft:#8ad2c1;--gold-deep:#20705e} /* turquoise — la pierre tibétaine, le Béryl */ body.th-souffle{--gold:#a58bd0;--gold-soft:#c6b2e3;--gold-deep:#6a4a9e} /* améthyste — corps vajra, le subtil */ body.th-bns{--gold:#7aa7c7;--gold-soft:#a8c8de;--gold-deep:#33638a} /* bleu acier — laboratoire, mesure */ body.th-integree{--gold:#c96a5a;--gold-soft:#e0988a;--gold-deep:#94402f} /* grenat — le cœur, le corail tibétain */ body.th-nutrition{--gold:#a9c25d;--gold-soft:#c8da8e;--gold-deep:#6c832c} /* vert olive — l'assiette, le vivant */ body.th-astro{--gold:#8c9ce8;--gold-soft:#b3bdf0;--gold-deep:#4a55b0} /* indigo — le ciel nocturne */ body.th-artemisia{--gold:#4cc3d9;--gold-soft:#8adcea;--gold-deep:#1f7f96} /* cyan — l'intelligence artificielle */ body.th-enseignement{--gold:#c084a8;--gold-soft:#d7adc6;--gold-deep:#8f4e74} /* prune — la transmission */ body.th-jeux{--gold:#e2694f;--gold-soft:#ee9a86;--gold-deep:#ab3f2b} /* corail vif — le cirque, le jeu */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans);font-size:16.5px;line-height:1.72; background:var(--ink);color:var(--txt-d); overflow-x:hidden;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--gold);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;letter-spacing:.2px} h1{font-size:clamp(2.4rem,5.6vw,4.2rem)} h2{font-size:clamp(1.7rem,3.4vw,2.5rem)} h3{font-size:1.28rem} h4{font-size:1.05rem} p{margin:.75em 0} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .center{text-align:center} .muted{color:var(--txt-d-soft)} .light .muted,.section.light .muted{color:var(--txt-l-soft)} .lead{font-size:1.13rem;line-height:1.75} .eyebrow{ font-size:.78rem;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:.85rem;display:block } .eico{width:1.06em;height:1.06em;vertical-align:-.16em;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} /* ---------- Révélation au défilement ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------- Boutons ---------- */ .btn{ display:inline-block;background:var(--gold);color:var(--ink); font-family:var(--sans);font-weight:600;font-size:.94rem;letter-spacing:.04em; padding:.78em 1.7em;border-radius:40px;border:1px solid var(--gold); cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s; } .btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 26px color-mix(in srgb,var(--gold) 35%,transparent);background:var(--gold-soft)} .btn.ghost{background:transparent;color:var(--gold);border-color:var(--gold)} .btn.ghost:hover{background:color-mix(in srgb,var(--gold) 10%,transparent);box-shadow:none} .btn.coral{background:var(--coral);border-color:var(--coral);color:#fff} .btn.coral:hover{background:#d4664f;box-shadow:0 10px 26px rgba(198,82,64,.35)} .section.light .btn.ghost{color:var(--gold-deep);border-color:var(--gold-deep)} .pill{ display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;font-weight:500; border:1px solid var(--line-d);border-radius:30px;padding:.35em 1em;margin:.18em .3em .18em 0; color:var(--txt-d-soft) } .section.light .pill{border-color:var(--line-l);color:var(--txt-l-soft)} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:60;background:rgba(18,22,29,.88); backdrop-filter:blur(12px);border-bottom:1px solid var(--line-d) } .nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:76px} .brand{display:flex;align-items:center;gap:.7rem;color:var(--txt-d)} .brand:hover{text-decoration:none} .brand .mark{width:40px;height:40px;flex:none} .brand .mark svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .brand .name{font-family:var(--serif);font-size:1.32rem;font-weight:600;letter-spacing:.02em;line-height:1.05} .brand .name small{display:block;font-family:var(--sans);font-weight:500;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:.25em} .nav-links{display:flex;gap:1.05rem;align-items:center} .nav-links > a,.nav-item > a{color:var(--txt-d-soft);font-weight:500;font-size:.92rem;white-space:nowrap;cursor:pointer} .nav-links > a:hover,.nav-item > a:hover{color:var(--gold);text-decoration:none} .nav-item{position:relative} .nav-item.has-sub > a::after{content:" ⌄";font-size:.85em;opacity:.55} .nav-sub{ position:absolute;top:calc(100% + 10px);left:0;min-width:250px;background:var(--ink-2); border:1px solid var(--line-d);border-radius:14px;box-shadow:var(--shadow-sm);padding:8px; display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:70 } .nav-sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .nav-item:hover .nav-sub,.nav-item:focus-within .nav-sub,.nav-item.open .nav-sub{opacity:1;visibility:visible;transform:none} .nav-sub a{display:block;padding:.55em .9em;border-radius:9px;color:var(--txt-d);font-size:.9rem;white-space:nowrap} .nav-sub a:hover{background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);text-decoration:none} .nav-sub .sub-title{font-family:var(--serif);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase; color:var(--txt-d-soft);padding:.4em .9em .1em;pointer-events:none} .nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--txt-d)} @media(max-width:1020px){ .nav-links{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--ink-2); padding:1rem 22px 1.5rem;border-bottom:1px solid var(--line-d);display:none;gap:.15rem; max-height:calc(100vh - 76px);overflow-y:auto} .nav-links.open{display:flex} .nav-toggle{display:block} .nav-item{position:static} .nav-item > a{font-weight:600;display:block;padding:.42rem 0;color:var(--txt-d)} .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none; background:transparent;padding:0 0 .55rem .95rem;min-width:0} .nav-sub .sub-title{display:none} } /* ---------- Sections ---------- */ .section{padding:88px 0;position:relative} .section.tight{padding:56px 0} .section.light{background:var(--paper);color:var(--txt-l)} .section.light a{color:var(--gold-deep)} .section.light .eyebrow{color:var(--coral)} .section.paper2{background:var(--paper-2)} .section.dark2{background:var(--ink-2)} hr.soft{border:none;border-top:1px solid var(--line-d);margin:2.6rem auto} .section.light hr.soft{border-color:var(--line-l)} /* Numéro d'acte (chapitres du récit) */ .acte{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem} .acte .n{ font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--gold); border:1px solid var(--gold);border-radius:50%;width:44px;height:44px;flex:none; display:flex;align-items:center;justify-content:center } .acte .t{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-d-soft)} .section.light .acte .t{color:var(--txt-l-soft)} /* ---------- Hero (scène + projecteur) ---------- */ .hero{ position:relative;overflow:hidden;padding:110px 0 90px; background: radial-gradient(900px 480px at 72% 8%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 62%), radial-gradient(700px 420px at 18% 90%,rgba(198,82,64,.10),transparent 60%), var(--ink); } .hero h1 em{font-style:italic;color:var(--gold)} .hero .lead{max-width:54ch;margin-top:1.2rem;color:var(--txt-d-soft)} .hero-cta{display:flex;gap:.85rem;flex-wrap:wrap;margin-top:2rem} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} @media(max-width:900px){.hero-grid{grid-template-columns:1fr}} .portrait-arch{ position:relative;max-width:400px;margin:0 auto; border-radius:200px 200px var(--radius) var(--radius);overflow:hidden; border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:var(--shadow) } .portrait-arch img{width:100%;height:100%;object-fit:cover} .portrait-arch::after{ content:"";position:absolute;inset:10px;border:1px solid rgba(236,231,218,.35); border-radius:190px 190px calc(var(--radius) - 8px) calc(var(--radius) - 8px);pointer-events:none } /* Fil du funambule (SVG pleine largeur) */ .fil-svg{display:block;width:100%;height:70px;margin:-20px 0 -26px} .fil-svg path{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:.75} .fil-svg .marcheur{fill:none;stroke:var(--txt-d);stroke-width:1.4} .fil-svg .clown{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible} /* ---------- Ligne de vie (timeline) ---------- */ .vie{position:relative;margin-top:2.4rem} .vie::before{ content:"";position:absolute;left:26px;top:6px;bottom:6px;width:2px; background:linear-gradient(var(--coral),var(--gold) 42%,var(--turq));opacity:.75 } .vie-item{position:relative;padding:0 0 2.1rem 76px} .vie-item:last-child{padding-bottom:.2rem} .vie-item .dot{ position:absolute;left:13px;top:4px;width:28px;height:28px;border-radius:50%; background:var(--ink-2);border:1.6px solid var(--gold);display:flex;align-items:center;justify-content:center } .vie-item .dot .eico{width:.95em;height:.95em;color:var(--gold)} .vie-item .quand{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600} .vie-item h3{margin:.25rem 0 .3rem} .vie-item p{color:var(--txt-d-soft);max-width:62ch;margin:.2em 0} .section.light .vie-item .dot{background:var(--paper)} .section.light .vie-item p{color:var(--txt-l-soft)} /* ---------- Cartes disciplines ---------- */ .disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:24px} .disc-card{ position:relative;display:flex;flex-direction:column;background:var(--paper);color:var(--txt-l); border-radius:var(--radius);padding:28px 26px 24px;overflow:hidden; border:1px solid rgba(46,36,16,.12);box-shadow:var(--shadow-l); transition:transform .2s,box-shadow .2s } .disc-card:hover{transform:translateY(-5px);box-shadow:0 22px 52px rgba(46,36,16,.22);text-decoration:none} .disc-card .ic{ width:52px;height:52px;border-radius:14px;border:1px solid var(--gold-deep); display:flex;align-items:center;justify-content:center;margin-bottom:1rem } .disc-card .ic svg{width:26px;height:26px;fill:none;stroke:var(--gold-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .disc-card h3{color:var(--txt-l);font-size:1.2rem} .disc-card p{color:var(--txt-l-soft);font-size:.94rem;flex:1} .disc-card .go{color:var(--coral);font-weight:600;font-size:.9rem} .disc-card .stamp{ position:absolute;top:18px;right:20px;font-family:var(--serif);font-style:italic; font-size:2.2rem;color:rgba(46,36,16,.14);line-height:1 } /* variante avec photo (9e porte) */ .disc-card.photo{padding:0} .disc-card.photo .ph{display:block;width:100%;aspect-ratio:16/8;object-fit:cover} .disc-card.photo .body{display:flex;flex-direction:column;flex:1;padding:20px 26px 24px} .disc-card.photo .stamp{color:rgba(255,252,245,.8);text-shadow:0 1px 10px rgba(20,25,35,.45);z-index:1} /* ---------- ArtemisIA : l'outil transversal (pas une porte) ---------- */ .disc-tool{ position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:22px; margin-top:34px;padding:26px 28px;background:var(--paper);color:var(--txt-l); border:1px dashed var(--gold-deep);border-radius:var(--radius);box-shadow:var(--shadow-l); transition:transform .2s,box-shadow .2s } .disc-tool:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(46,36,16,.22);text-decoration:none} .disc-tool .tag{ position:absolute;top:-11px;left:26px;background:var(--paper);padding:0 10px; font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);font-weight:600 } .disc-tool .ic{ width:52px;height:52px;border-radius:14px;border:1px solid var(--gold-deep); display:flex;align-items:center;justify-content:center;flex:0 0 52px } .disc-tool .ic svg{width:26px;height:26px;fill:none;stroke:var(--gold-deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .disc-tool .txt{flex:1;min-width:260px} .disc-tool .txt h3{color:var(--txt-l);font-size:1.15rem;margin-bottom:.3rem} .disc-tool .txt p{color:var(--txt-l-soft);font-size:.94rem;margin:0} .disc-tool .go{color:var(--coral);font-weight:600;font-size:.9rem;white-space:nowrap} /* ---------- Figures / planches dessinées ---------- */ .figure{margin:1.8rem 0} .figure img{ width:100%;border-radius:var(--radius-sm);border:1px solid var(--line-d); box-shadow:var(--shadow-sm);background:#fff } .section.light .figure img{border-color:rgba(46,36,16,.18);box-shadow:var(--shadow-l)} .figure figcaption{ font-size:.84rem;color:var(--txt-d-soft);margin-top:.65rem; padding-left:.9rem;border-left:2px solid var(--gold) } .section.light .figure figcaption{color:var(--txt-l-soft)} .plate-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start} @media(max-width:820px){.plate-duo{grid-template-columns:1fr}} /* ---------- Grilles génériques ---------- */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}} .panel{ background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--radius); padding:26px 26px 22px;box-shadow:var(--shadow-sm) } .section.light .panel{background:#fff;border-color:rgba(46,36,16,.12);box-shadow:var(--shadow-l);color:var(--txt-l)} .quote{ font-family:var(--serif);font-style:italic;font-size:1.28rem;line-height:1.6;color:var(--gold-soft); border-left:2px solid var(--gold);padding:.3em 0 .3em 1.1em;margin:1.6rem 0 } .section.light .quote{color:var(--gold-deep)} /* Liste à puces fines */ ul.fine{list-style:none;margin:.8em 0} ul.fine li{position:relative;padding-left:1.5em;margin:.5em 0} ul.fine li::before{ content:"";position:absolute;left:.1em;top:.66em;width:.75em;height:1.5px;background:var(--gold) } /* ---------- Accordéons -> fenêtres flottantes (repris du site Nadiejda) ---------- */ .acc{border:1px solid var(--line-d);border-radius:var(--radius-sm);background:var(--ink-2);margin:.6rem 0;overflow:hidden} .section.light .acc{background:#fff;border-color:rgba(46,36,16,.14)} .acc > summary{ cursor:pointer;list-style:none;display:flex;align-items:center;gap:.7rem; padding:.95em 1.15em;font-weight:600;font-size:.98rem } .acc > summary::-webkit-details-marker{display:none} .acc-ic{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid var(--gold); display:flex;align-items:center;justify-content:center} .acc-ic svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .acc-body{padding:0 1.2em 1.1em;color:var(--txt-d-soft)} .section.light .acc-body{color:var(--txt-l-soft)} html.js-float .acc > .acc-body{display:none} .astro-fold{margin:1.4rem 0 0} .astro-fold > summary{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;list-style:none; font-family:var(--serif);font-size:1rem;color:var(--gold);border:1px solid var(--gold); border-radius:30px;padding:.55em 1.15em;transition:.18s} .astro-fold > summary::-webkit-details-marker{display:none} .astro-fold > summary:hover{background:color-mix(in srgb,var(--gold) 12%,transparent)} .astro-fold > summary .chev{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .25s} .astro-fold[open] > summary .chev{transform:rotate(90deg)} .astro-fold[open] > summary{margin-bottom:1.6rem} .astro-fold-body{animation:astroIn .4s ease} @keyframes astroIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .section.light .astro-fold > summary{color:var(--gold-deep);border-color:var(--gold-deep)} .float-backdrop{ position:fixed;inset:0;z-index:1000;background:rgba(10,12,16,.72);backdrop-filter:blur(4px); display:flex;align-items:center;justify-content:center;padding:22px; opacity:0;transition:opacity .22s } .float-backdrop.in{opacity:1} .float-win{ background:var(--paper);color:var(--txt-l);max-width:720px;width:100%;max-height:84vh; border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column; transform:translateY(14px);transition:transform .22s } .float-backdrop.in .float-win{transform:none} .float-head{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:1.05em 1.3em;border-bottom:1px solid rgba(46,36,16,.14)} .float-head h3{font-size:1.15rem;color:var(--txt-l)} .float-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--txt-l-soft)} .float-body{padding:1.05em 1.3em 1.3em;overflow-y:auto;color:#3d3a31} .float-body img{border-radius:10px} body.float-lock{overflow:hidden} /* ---------- Formulaires ---------- */ .form label{display:block;font-size:.85rem;font-weight:600;margin:.9em 0 .3em;letter-spacing:.03em} .form input,.form select,.form textarea{ width:100%;padding:.7em .9em;border-radius:10px;border:1px solid var(--line-d); background:var(--ink-2);color:var(--txt-d);font-family:inherit;font-size:.95rem } .section.light .form input,.section.light .form select,.section.light .form textarea{ background:#fff;border-color:rgba(46,36,16,.2);color:var(--txt-l)} .form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent} .form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:560px){.form .row{grid-template-columns:1fr}} .form button[type=submit]{margin-top:1.3rem} .form-status{min-height:1.4em;font-size:.9rem;margin-top:.7rem} .form-status.ok{color:#79c99a} .form-status.err{color:var(--coral-soft)} .form-note{font-size:.8rem;color:var(--txt-d-soft);margin-top:.5rem} .section.light .form-note{color:var(--txt-l-soft)} .news-row{display:flex;gap:12px;max-width:520px;margin:1.2rem auto 0} .news-row input{flex:1} @media(max-width:560px){.news-row{flex-direction:column}} /* ---------- Chat orienteur ---------- */ .chat-fab{ position:fixed;right:22px;bottom:22px;z-index:900;background:var(--coral);color:#fff; border:none;border-radius:40px;padding:.9em 1.5em;font-family:var(--sans);font-weight:600; font-size:.92rem;cursor:pointer;box-shadow:0 14px 34px rgba(198,82,64,.45) } .chat-fab:hover{background:#d4664f} .chat-panel{ position:fixed;right:22px;bottom:84px;z-index:901;width:390px;max-width:calc(100vw - 34px); background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--radius); box-shadow:var(--shadow);display:none;flex-direction:column;overflow:hidden;max-height:min(560px,72vh) } .chat-panel.open{display:flex} .chat-head{padding:.95em 1.2em;border-bottom:1px solid var(--line-d)} .chat-head b{font-family:var(--serif);font-size:1.05rem} .chat-head small{display:block;color:var(--txt-d-soft);font-size:.78rem;margin-top:.15em} .chat-log{flex:1;overflow-y:auto;padding:1em 1.2em;display:flex;flex-direction:column;gap:.6rem;min-height:120px} .chat-log .msg{border-radius:12px;padding:.6em .9em;font-size:.92rem;line-height:1.55;max-width:88%;white-space:pre-wrap} .chat-log .msg.u{align-self:flex-end;background:var(--gold);color:var(--ink)} .chat-log .msg.a{align-self:flex-start;background:var(--ink-3);color:var(--txt-d)} .chat-quota{font-size:.75rem;color:var(--txt-d-soft);padding:0 1.2em .4em} .chat-input{display:flex;gap:8px;padding:.8em 1.05em 1.05em} .chat-input textarea{ flex:1;resize:none;height:52px;border-radius:10px;border:1px solid var(--line-d); background:var(--ink);color:var(--txt-d);padding:.6em .8em;font-family:inherit;font-size:.92rem } .chat-input button{ background:var(--gold);border:none;color:var(--ink);border-radius:10px;width:48px; cursor:pointer;display:flex;align-items:center;justify-content:center } /* ---------- Vidéo ---------- */ .video-frame{ width:100%;border-radius:var(--radius);box-shadow:var(--shadow);background:#000;display:block } /* ---------- Footer ---------- */ .site-footer{background:#0d1015;border-top:1px solid var(--line-d);padding:64px 0 34px;color:var(--txt-d-soft)} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:34px} @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr}} .site-footer h4{color:var(--txt-d);font-size:.98rem;margin-bottom:.7rem} .site-footer a{color:var(--txt-d-soft)} .site-footer a:hover{color:var(--gold)} .site-footer p{font-size:.9rem;margin:.3em 0} .fine{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap; border-top:1px solid var(--line-d);margin-top:2.6rem;padding-top:1.4rem;font-size:.78rem} /* ---------- Divers ---------- */ ::selection{background:var(--gold);color:var(--ink)} /* ---------- Parcours initiatique ---------- */ .etape-next{ display:flex;align-items:center;gap:1.3rem;background:var(--ink-2);border:1px solid var(--gold); border-radius:var(--radius);padding:24px 28px;margin-top:3rem;transition:transform .18s,box-shadow .18s } .etape-next:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);text-decoration:none} .section.light .etape-next{background:#fff;border-color:var(--gold-deep)} .etape-next .n{ font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--gold); border:1px solid var(--gold);border-radius:50%;width:56px;height:56px;flex:none; display:flex;align-items:center;justify-content:center } .etape-next .lbl{font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--txt-d-soft)} .section.light .etape-next .lbl{color:var(--txt-l-soft)} .etape-next h3{color:var(--gold);margin-top:.15rem} .etape-next .fleche{margin-left:auto;font-size:1.6rem;color:var(--gold)} .chemin-bar{ position:fixed;left:0;bottom:0;width:100%;z-index:800;pointer-events:none; font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold); text-align:left;padding:.35em 1.1em .45em;background:linear-gradient(transparent,rgba(13,16,21,.9)); } .chemin-bar .track{display:inline-block;vertical-align:middle;width:120px;height:3px;border-radius:2px; background:color-mix(in srgb,var(--gold) 25%,transparent);margin-left:.7em} .chemin-bar .track i{display:block;height:100%;border-radius:2px;background:var(--gold)} /* ---------- Question-réponse initiatique (quiz inline) ---------- */ .devine{ border:1px dashed var(--gold);border-radius:var(--radius);padding:24px 26px;margin:2rem 0; background:color-mix(in srgb,var(--gold) 5%,transparent) } .devine .q{font-family:var(--serif);font-size:1.18rem;font-weight:600;margin-bottom:1rem} .devine .q::before{content:"?";display:inline-flex;align-items:center;justify-content:center; width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);color:var(--gold); font-family:var(--serif);font-style:italic;margin-right:.6em;font-size:1rem} .devine .choix{display:flex;flex-wrap:wrap;gap:.6rem} .devine .choix button{ background:transparent;border:1px solid var(--line-d);border-radius:30px;color:inherit; font-family:inherit;font-size:.92rem;padding:.55em 1.2em;cursor:pointer;transition:border-color .15s,background .15s } .section.light .devine .choix button{border-color:rgba(46,36,16,.25)} .devine .choix button:hover{border-color:var(--gold)} .devine .choix button.bonne{background:rgba(62,156,148,.18);border-color:var(--turq)} .devine .choix button.mauvaise{background:rgba(198,82,64,.14);border-color:var(--coral);opacity:.7} .devine .rep{display:none;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-d);color:var(--txt-d-soft)} .section.light .devine .rep{color:var(--txt-l-soft);border-color:rgba(46,36,16,.15)} .devine.done .rep{display:block}