/* Studio Lakré — couleurs et modes clair / sombre Un seul endroit pour toutes les couleurs. Chargé après la feuille de la page. data-mode="light|dark" et data-accent="0..3" sont posés sur par theme.js. Paires : 0 Grenat ↔ Vermillon · 1 Framboise ↔ Rose vif · 2 Vert sapin ↔ Jade · 3 Ocre ↔ Jaune Safran */ :root{ --paper:#ffffff;--ink:#222522;--muted:#555b58; --line:rgba(34,37,34,.17);--surface:rgba(255,255,255,.94);--shadow:rgba(34,37,34,.08); --texture-veil:rgba(255,255,255,.62); --accent:#721d36;--accent-rgb:114,29,54;--on-accent:#ffffff; --red:var(--accent);--lakre-color:var(--accent); color-scheme:light; } @media (prefers-color-scheme:dark){ :root:not([data-mode]){ --paper:#0a0a0a;--ink:#f2efe8;--muted:#a9a8a1; --line:rgba(242,239,232,.16);--surface:#151615;--shadow:rgba(0,0,0,.6); --texture-veil:rgba(10,10,10,.96); --accent:#ef513b;--accent-rgb:239,81,59;--on-accent:#0a0a0a;color-scheme:dark; } } :root[data-mode="dark"]{ --paper:#0a0a0a;--ink:#f2efe8;--muted:#a9a8a1; --line:rgba(242,239,232,.16);--surface:#151615;--shadow:rgba(0,0,0,.6); --texture-veil:rgba(10,10,10,.96);color-scheme:dark; } /* Palette fond blanc */ [data-mode="light"][data-accent="0"]{--accent:#721d36;--accent-rgb:114,29,54;--on-accent:#ffffff} [data-mode="light"][data-accent="1"]{--accent:#c83c64;--accent-rgb:200,60,100;--on-accent:#ffffff} [data-mode="light"][data-accent="2"]{--accent:#176a55;--accent-rgb:23,106,85;--on-accent:#ffffff} [data-mode="light"][data-accent="3"]{--accent:#8c6400;--accent-rgb:140,100,0;--on-accent:#ffffff} /* Palette fond noir */ [data-mode="dark"][data-accent="0"]{--accent:#ef513b;--accent-rgb:239,81,59;--on-accent:#0a0a0a} [data-mode="dark"][data-accent="1"]{--accent:#ff5c8d;--accent-rgb:255,92,141;--on-accent:#0a0a0a} [data-mode="dark"][data-accent="2"]{--accent:#2fc99a;--accent-rgb:47,201,154;--on-accent:#0a0a0a} [data-mode="dark"][data-accent="3"]{--accent:#e4bb17;--accent-rgb:228,187,23;--on-accent:#0a0a0a} /* Fond, texture et transitions */ body{background-color:var(--paper);background-image:linear-gradient(var(--texture-veil),var(--texture-veil)),url('paper-texture.jpg')} ::selection{background:var(--accent);color:var(--on-accent)} /* Logo et K : dessinés en SVG, prennent la couleur active */ .brand,.hero-mark{mix-blend-mode:normal} .brand svg{color:var(--accent);display:block} .hero-mark [style*="fill"]{transition:none} /* Boutons */ .button:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* Blocs en couleur active : texte adapté (blanc ou noir selon la couleur) */ .meaning,.contact,.method-card:nth-child(2){color:var(--on-accent)} .meaning>.wrap>.eyebrow,.meaning-live-name p,.meaning-live-translation p, .meaning-live-manifest>p:nth-child(2),.meaning-live-finish, .method-card-trait .method-number,.method-card-trait p:not(.method-number):not(.method-lead), .contact .eyebrow,.contact p:not(.eyebrow),.contact .phone,.contact a{color:var(--on-accent)} .meaning::after{border-color:currentColor;opacity:.35} .meaning-live-verbs span{background:var(--paper);color:var(--ink)} .meaning-live-verbs span+span::before{color:currentColor;opacity:.5} .meaning-live mark,.dictionary-card-simple mark{background:linear-gradient(transparent 58%,rgba(var(--accent-rgb),.28) 58%)} .meaning .meaning-live mark{background:linear-gradient(transparent 58%,color-mix(in srgb,currentColor 22%,transparent) 58%)} mark,.example-result mark{background:linear-gradient(transparent 58%,rgba(var(--accent-rgb),.35) 58%)} /* Cartes méthode */ .method-card{background:var(--surface);box-shadow:.5rem .55rem 0 var(--shadow)} .method-card:nth-child(2){background:var(--accent)} .method-card:nth-child(3){background:var(--ink);color:var(--paper)} .method-card-trace p:not(.method-number){color:var(--paper);opacity:.9} .method-card-trace{box-shadow:.65rem .65rem 0 rgba(var(--accent-rgb),.3)} .studio p:not(.eyebrow){color:var(--paper);opacity:.9} .approach{border-top-color:var(--line)} .dictionary-card,.dictionary-card-simple{box-shadow:.8rem .8rem 0 var(--ink)} .word-tags span{background:var(--paper)} /* Sélecteur discret : mode + 4 pastilles */ .theme-kit{display:flex;align-items:center;gap:.9rem;padding:.35rem .45rem .35rem .35rem;border:1px solid var(--line);border-radius:999px;background:var(--paper)} .theme-kit button{appearance:none;border:0;margin:0;padding:0;background:none;color:var(--ink);cursor:pointer;display:grid;place-items:center} .mode-btn{width:30px;height:30px;border-radius:50%} .mode-btn:hover{background:var(--line)} .mode-btn svg{width:17px;height:17px} .mode-btn .i-moon{display:none} [data-mode="dark"] .mode-btn .i-sun{display:none} [data-mode="dark"] .mode-btn .i-moon{display:block} .dots{display:flex;gap:.45rem} .theme-kit .dot{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--paper),0 0 0 0 var(--c);transition:box-shadow .2s,transform .2s} .dot:hover{transform:scale(1.15)} .dot[aria-checked="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--c)} .theme-kit :focus-visible{outline:2px solid var(--ink);outline-offset:3px} body>.theme-kit{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;box-shadow:0 6px 24px rgba(0,0,0,.18)} @media(max-width:760px){ .theme-kit{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;box-shadow:0 6px 24px rgba(0,0,0,.18)} } /* Animation de changement : cercle depuis le clic */ ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} @media(prefers-reduced-motion:reduce){.dot:hover{transform:none}} /* ===== Pages intérieures (Studio, Contact, Expertises) ===== */ :root{--pink:var(--accent);--band:#222522;--accent-on-band:color-mix(in srgb,var(--accent) 45%,#ffffff);--tint:color-mix(in srgb,var(--accent) 9%,var(--paper));--neutral-tint:color-mix(in srgb,var(--ink) 5%,var(--paper))} :root[data-mode="dark"]{--band:#1a1b1a;--accent-on-band:var(--accent)} @media (prefers-color-scheme:dark){:root:not([data-mode]){--band:#1a1b1a;--accent-on-band:var(--accent)}} .skip{background:var(--paper);color:var(--ink)} .site-header{border-bottom-color:var(--line)} /* Bandes sombres : restent sombres dans les deux modes */ .journey,.talents,.stage-tools,.mix,#outils .service-invitation{background:var(--band)} .journey em,.journey .eyebrow,.step-label,.journey article:nth-child(2) h3, .talents .eyebrow,.talents em, .stage-tools .stage-copy .eyebrow,.flow-label,.mix .eyebrow,.combo span, #outils .service-invitation .eyebrow{color:var(--accent-on-band)} .stage-tools .text-cta:hover,#outils .service-invitation .text-cta:hover{color:var(--accent-on-band)} .flow-step.done{border-color:var(--accent-on-band);background:rgba(var(--accent-rgb),.18)} .flow-step.done .flow-state{color:var(--accent-on-band)} .demo-button,.page-contact .button{color:#222522} .page-contact .button:hover{background:var(--tint);color:var(--ink)} /* Blocs en couleur active */ .page-studio .contact,.page-contact .contact,.page-besoins .contact{color:var(--on-accent)} .page-besoins .contact .eyebrow,.page-besoins .contact>p:not(.eyebrow),.page-besoins .phone{color:var(--on-accent)} .email{border-bottom-color:color-mix(in srgb,currentColor 60%,transparent)} .contact a:focus-visible{outline-color:currentColor} .identity-board{color:var(--on-accent)} .identity-board[data-tone=paper]{background:#ffffff;color:#222522} .identity-board[data-tone=ink]{background:#222522;color:#ffffff} /* Fonds teintés et fonds clairs */ .web-media,.crop-view,.stage-identity,.variant-bar,.service-invitation{background:var(--tint)} #image .service-invitation{background:var(--neutral-tint)} .needs-first .need{border-left-color:rgba(var(--accent-rgb),.3)} .device-switch button,.crop-controls button{border-color:var(--line);color:var(--ink)} .device-switch button[aria-pressed=true],.crop-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .story-number span{color:var(--muted)} .service-nav{background:color-mix(in srgb,var(--paper) 85%,transparent)} .service-nav .wrap{background:var(--paper)} body::before{background:transparent} .contact-link:hover{background:var(--ink);color:var(--paper)} /* Trait de craie de la page Studio : recoloré par la couleur active */ .exact-trait-image{mix-blend-mode:normal} .chalk-tint{flood-color:var(--accent)} .brand svg{width:100%;height:auto;display:block} /* ===== Menu collant : se réduit au défilement, le logo laisse place à « Studio Lakré » ===== */ html{scroll-padding-top:calc(var(--header-h,80px) + 16px)} .header,.site-header{position:sticky;top:0;z-index:40;background:var(--paper); transition:min-height .3s ease,padding .3s ease,background-color .3s ease} .header::before,.site-header::before{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:inherit;z-index:-1;pointer-events:none} .brand{position:relative} .brand-mini{display:none;white-space:nowrap;color:var(--accent);font-weight:800;font-size:1rem;letter-spacing:.06em;line-height:1} .brand-mini small{font-size:.62rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;margin-right:.45rem;vertical-align:.25em} .is-scrolled .header,.is-scrolled .site-header{min-height:0;padding-block:.7rem;background:var(--paper)} .is-scrolled .header::before,.is-scrolled .site-header::before{box-shadow:0 1px 0 var(--line)} .is-scrolled .brand{width:auto} .is-scrolled .brand svg{display:none} .is-scrolled .brand-mini{display:inline-block;animation:mini-in .35s ease both} @keyframes mini-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @media(max-width:760px){.is-scrolled .header,.is-scrolled .site-header{padding-block:.55rem}} @media(prefers-reduced-motion:reduce){.header,.site-header{transition:none}.is-scrolled .brand-mini{animation:none}} /* Expertises : la barre des 4 activités s'accroche sous le menu */ .service-nav{top:var(--header-h,0px);z-index:35} /* ===== Menu : panneau Expertises (ordinateur), ☰ (mobile), liens du pied de page ===== */ .main-nav{align-items:center} .nav-exp{position:relative} .nav-exp-link{display:inline-flex;align-items:center;gap:.35rem;padding-block:.5rem;border-bottom:1px solid transparent;color:inherit;text-decoration:none} .nav-exp-link:hover,.nav-exp-link.is-current{border-bottom-color:currentColor} .nav-exp-link .caret{font-size:.7em;transition:transform .2s} .nav-exp.is-open .caret{transform:rotate(180deg)} .exp-panel{display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);width:min(600px,92vw);background:var(--paper);border:1px solid var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.12);padding:10px;z-index:60;text-transform:none;letter-spacing:0} .exp-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px} .nav-exp.is-open .exp-panel{display:block} .exp-panel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px} .exp-panel li a{display:grid;gap:3px;padding:14px 16px;text-decoration:none;color:var(--ink);border:0!important} .exp-panel li a strong{font-size:1rem;font-weight:800;letter-spacing:-.01em} .exp-panel li a span{font-size:.84rem;font-weight:500;color:var(--muted);line-height:1.4} .exp-panel li a:hover,.exp-panel li a:focus-visible,.exp-panel li a[aria-current]{background:rgba(var(--accent-rgb),.08)} .exp-panel li a[aria-current] strong,.exp-panel li a:hover strong{color:var(--accent)} .exp-panel .exp-all{display:block;margin-top:6px;padding:12px 16px;border-top:1px solid var(--line)!important;font-size:.88rem;font-weight:700;color:var(--ink);text-decoration:none} .exp-panel .exp-all:hover{color:var(--accent)} .menu-btn{display:none} footer.wrap,footer.footer{flex-wrap:wrap} .footer-exp{flex-basis:100%;order:20;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:baseline;font-size:.85rem;border-top:1px solid var(--line);padding-top:14px;margin-top:4px} .footer-exp span{font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:var(--muted)} .footer-exp a{color:inherit} @media (max-width:760px){ .has-menu .main-nav{display:none!important} .has-menu .menu-btn{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;background:none;border:1px solid var(--ink);color:var(--ink);font:inherit;font-weight:700;font-size:.9rem;padding:.55rem .8rem;cursor:pointer} .menu-btn i{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor;transition:.2s} .menu-open .menu-btn i{box-shadow:none;transform:rotate(45deg)} .menu-open .menu-btn i::after{content:"";display:block;width:16px;height:2px;background:currentColor;transform:rotate(-90deg)} .has-menu .header,.has-menu .site-header{flex-wrap:nowrap!important;align-items:center!important;flex-direction:row!important} .menu-open .main-nav{display:flex!important;flex-direction:column;align-items:stretch;gap:0;position:fixed;left:0;right:0;top:var(--header-h,72px);bottom:0;background:var(--paper);padding:8px 20px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;z-index:70;border-top:1px solid var(--line);margin:0} .menu-open .main-nav>a,.menu-open .nav-exp-link{font-size:1.35rem;font-weight:800;padding:16px 0;border:0!important;border-bottom:1px solid var(--line)!important;margin:0;width:100%;justify-content:space-between} .menu-open .nav-exp-link .caret{display:none} .menu-open .nav-exp .exp-panel{display:block;position:static;transform:none;width:auto;border:0;box-shadow:none;padding:4px 0 12px;background:transparent} .menu-open .exp-panel ul{grid-template-columns:1fr} .menu-open .exp-panel li a{padding:10px 0 10px 14px;border-left:2px solid var(--line)!important} .menu-open .main-nav .nav-contact{display:block;text-align:left;border:0!important;border-bottom:1px solid var(--line)!important;background:none!important} .menu-open body{overflow:hidden} .footer-exp{flex-direction:column;gap:.5rem} } /* Menu unifié sur toutes les pages */ .main-nav{display:flex;align-items:center;gap:2rem;font-size:.9rem;font-weight:600} .main-nav>a:not(.nav-contact),.main-nav .nav-exp-link{padding-block:.5rem;border-bottom:2px solid transparent;text-decoration:none!important;color:inherit} .main-nav>a:not(.nav-contact):hover{border-bottom-color:currentColor} .main-nav>a[aria-current="page"]:not(.nav-contact),.main-nav .nav-exp-link.is-current{border-bottom-color:var(--accent);color:var(--accent)} .main-nav .nav-contact{border:1px solid var(--ink);padding:.7rem 1rem;display:inline-flex;gap:1rem;align-items:center;text-decoration:none!important;margin:0;color:inherit} .main-nav .nav-contact:hover{background:var(--ink);color:var(--paper)} .exp-panel a{text-decoration:none!important} @media (max-width:1000px) and (min-width:761px){.main-nav{gap:1.2rem}} @media (max-width:760px){.menu-open .header,.menu-open .site-header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}} /* Mode sombre : le bloc « C'est ensemble que ça prend forme » se détache (fond teinté par la couleur active) */ :root[data-mode="dark"] .mix{background:color-mix(in srgb,var(--accent) 13%,#161716);border-block:1px solid color-mix(in srgb,var(--accent) 40%,transparent)} :root[data-mode="dark"] .mix .scenario-result{border-top-color:color-mix(in srgb,var(--accent) 35%,transparent)} :root[data-mode="dark"] .scenario-buttons button[aria-pressed=true]{color:var(--on-accent)} @media (prefers-color-scheme:dark){:root:not([data-mode]) .mix{background:color-mix(in srgb,var(--accent) 13%,#161716)}} /* Empêche la page de glisser sur le côté sur mobile (la bande du menu déborde volontairement) */ html,body{overflow-x:clip}