/* ═══════════════════════════════════════════════════════════════════════════ /site/gabarit.css : l'en-tête et le pied de page communs de myoptibot.com Le HTML est écrit dans chaque page par scripts/opti-gabarit.mjs, entre les marqueurs et . Ce fichier en est le seul style. Il ne dépend d'AUCUNE variable des pages : les pages modules (OptiBot, Opti Gemba, Opti Academy) ont leur propre feuille, avec d'autres noms de variables, et un en-tête qui en dépendrait changerait d'aspect d'une page à l'autre. Tout est donc préfixé (.oh pour l'en-tête, .of pour le pied). Le menu mobile s'ouvre SANS JavaScript (case à cocher + label) : les liens sont de vrais liens, présents dans le HTML, vus par les robots et l'audit. ═══════════════════════════════════════════════════════════════════════════ */ html{scroll-padding-top:76px} /* L'état connecté, repris ici pour les pages qui n'ont pas l'extrait de */ [data-opti-session="connecte"] [data-opti-si-visiteur], [data-opti-session="visiteur"] [data-opti-si-connecte], html:not([data-opti-session]) [data-opti-si-connecte]{display:none!important} .oh,.of{ --oh-ink:#3D1576;--oh-deep:#130322;--oh-txt:#1a0e25;--oh-txt2:#5a4878;--oh-muted:#8a7ca0; --oh-border:rgba(208,200,224,.6);--oh-hover:rgba(61,21,118,.07); --oh-grad:linear-gradient(135deg,#2C1442,#3D1576); --oh-sans:'Segoe UI',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --oh-display:'Fraunces','Cormorant Garamond',Georgia,serif; font-family:var(--oh-sans);line-height:1.4;text-align:left } .oh *,.of *{box-sizing:border-box} .oh a,.of a{text-decoration:none} .oh ul,.of ul{list-style:none;margin:0;padding:0} .oh li,.of li{margin:0;padding:0;display:block;font-size:inherit;color:inherit} /* Le lien posé dans le texte (maillage). Les pages guides définissent déjà .ilink : `a:where(.ilink)` pèse comme un simple `a`, donc leur règle gagne, mais bat le `a{color:inherit}` des pages qui n'en ont pas, puisque cette feuille se charge après. Sans elle, un lien de maillage y est invisible. */ a:where(.ilink){color:#3D1576;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(61,21,118,.3)} a:where(.ilink):hover{border-bottom-color:#3D1576} /* ── En-tête ─────────────────────────────────────────────────────────────── */ .oh{position:sticky;top:0;z-index:100;background:rgba(246,241,250,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--oh-border)} .oh-inner{max-width:1200px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:22px} .oh-brand{display:flex;align-items:center;gap:9px;flex-shrink:0;font-family:var(--oh-display);font-weight:600;font-size:21px;color:var(--oh-deep)} .oh-brand img{width:32px;height:32px;border-radius:8px;display:block} .oh-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0} .oh-dd{position:relative} .oh-top{font:inherit;font-size:14.5px;font-weight:500;color:var(--oh-txt2);background:none;border:0;margin:0;padding:8px 12px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .oh-top:hover,.oh-dd:hover>.oh-top,.oh-dd:focus-within>.oh-top{color:var(--oh-ink);background:var(--oh-hover)} .oh-top[aria-current],.oh-dd.oh-actif>.oh-top{color:var(--oh-ink);font-weight:650} .oh-top svg{width:12px;height:12px;transition:transform .2s} .oh-dd:hover>.oh-top svg,.oh-dd:focus-within>.oh-top svg{transform:rotate(180deg)} /* Le panneau : un pont invisible (::before) couvre l'espace entre le bouton et le panneau, pour que le survol ne se perde pas en descendant la souris. */ .oh-panel{position:absolute;top:calc(100% + 8px);left:0;display:none;background:#fff;border:1px solid var(--oh-border);border-radius:16px;box-shadow:0 20px 50px rgba(19,3,34,.16);padding:12px} .oh-panel::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} .oh-dd:hover>.oh-panel,.oh-dd:focus-within>.oh-panel{display:block} .oh-produits{width:560px;display:none} .oh-dd:hover>.oh-produits,.oh-dd:focus-within>.oh-produits{display:grid;grid-template-columns:1fr 1fr;gap:2px} .oh-produits a{display:block;padding:10px 12px;border-radius:10px} .oh-produits a:hover,.oh-produits a[aria-current]{background:var(--oh-hover)} /* Les quatre modules : la couleur de la sphère de leur logo, relevée au pixel le 2026-09-19 (image/logo/). OptiBot bleu-violet, Opti Gemba ocre, Opti Academy or, Excel vert. Discret au repos, le dégradé s'affirme au survol. Le dégradé SEUL : ni sphère, ni liseré à gauche (retirés le 2026-09-19). */ .oh-mod-optibot{--m:106,53,198;--m-fonce:#4A1695} .oh-mod-gemba{--m:162,59,36;--m-fonce:#8A2E19} .oh-mod-academy{--m:210,145,64;--m-fonce:#9F6622} .oh-mod-excel{--m:31,114,68;--m-fonce:#1F7244} .oh-produits a.oh-mod{background:linear-gradient(90deg,rgba(var(--m),.08),rgba(var(--m),0) 75%);transition:background .25s} .oh-produits a.oh-mod:hover,.oh-produits a.oh-mod[aria-current]{background:linear-gradient(90deg,rgba(var(--m),.22),rgba(var(--m),.05))} .oh-mod .oh-t{transition:color .25s} .oh-mod:hover .oh-t,.oh-mod[aria-current] .oh-t{color:var(--m-fonce)} .oh-sep{grid-column:1/-1;height:1px;background:var(--oh-border);margin:8px 6px} .oh-t{display:block;font-size:14.5px;font-weight:600;color:var(--oh-txt)} .oh-d{display:block;font-size:12.5px;color:var(--oh-muted);margin-top:2px} .oh-guides{width:540px} .oh-dd:hover>.oh-guides,.oh-dd:focus-within>.oh-guides{display:grid;grid-template-columns:1fr 1.25fr;gap:4px 18px} .oh-groupe{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oh-muted);padding:6px 10px 4px} .oh-guides a{display:block;font-size:14px;color:var(--oh-txt);padding:6px 10px;border-radius:8px} .oh-guides a:hover,.oh-guides a[aria-current]{background:var(--oh-hover);color:var(--oh-ink)} .oh-guides a[aria-current]{font-weight:600} .oh-pied{grid-column:1/-1;border-top:1px solid var(--oh-border);margin-top:6px;padding-top:6px} .oh-pied a{color:var(--oh-ink);font-weight:600} .oh-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0} .oh-lang{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.04em;padding:6px 10px;border-radius:999px;border:1px solid var(--oh-border);color:var(--oh-txt2)} .oh-lang:hover{color:var(--oh-txt);background:rgba(255,255,255,.8)} .oh-cta{display:inline-flex;align-items:center;gap:8px;background:var(--oh-grad);color:#fff!important;font-weight:600;font-size:14px;padding:10px 18px;border-radius:12px;white-space:nowrap} .oh-cta:hover{filter:brightness(1.12)} .oh-cta .opti-ini{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);font-size:12px;font-weight:700;line-height:1} .oh-cta .opti-ini:empty{display:none} /* Le bouton de menu mobile. La case reste focalisable au clavier : elle est masquée visuellement, pas retirée de la page. */ .oh-case{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .oh-burger{display:none;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--oh-txt);padding:8px 10px;border-radius:10px;border:1px solid var(--oh-border);background:#fff;cursor:pointer;user-select:none} .oh-burger svg{width:18px;height:18px} .oh-case:focus-visible~.oh-actions .oh-burger{outline:2px solid var(--oh-ink);outline-offset:2px} .oh-top:focus-visible,.oh a:focus-visible{outline:2px solid var(--oh-ink);outline-offset:2px} .oh-titre{display:none;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oh-muted);padding:8px 8px 2px} @media (max-width:940px){ .oh-burger{display:inline-flex} .oh-nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--oh-border);box-shadow:0 20px 40px rgba(19,3,34,.12);max-height:calc(100vh - 64px);overflow-y:auto;padding:8px 16px 20px} .oh-case:checked~.oh-nav{display:flex} .oh-case:checked~.oh-actions .oh-ouvrir{display:none} .oh-case:not(:checked)~.oh-actions .oh-fermer{display:none} .oh-dd{border-bottom:1px solid var(--oh-border);padding:6px 0} .oh-dd>.oh-top{display:none} .oh-panel,.oh-produits,.oh-guides, .oh-dd:hover>.oh-panel,.oh-dd:focus-within>.oh-panel, .oh-dd:hover>.oh-produits,.oh-dd:focus-within>.oh-produits, .oh-dd:hover>.oh-guides,.oh-dd:focus-within>.oh-guides{position:static;display:grid;grid-template-columns:1fr 1fr;gap:0 10px;width:auto;border:0;box-shadow:none;padding:4px 0;border-radius:0;background:none} .oh-panel::before{display:none} .oh-titre{display:block;grid-column:1/-1} .oh-d{display:none} .oh-produits a,.oh-guides a{padding:9px 8px} .oh-t{font-size:15px;font-weight:500} .oh-guides a{font-size:15px} .oh-nav>.oh-top{order:-1;padding:14px 8px;font-size:15.5px;font-weight:600;color:var(--oh-txt);border-bottom:1px solid var(--oh-border);border-radius:0} } @media (max-width:560px){ .oh-inner{padding:0 14px;gap:10px} .oh-actions{gap:6px} .oh-cta{padding:9px 12px;font-size:13.5px} .oh-burger>span:last-child{display:none} .oh-burger{padding:8px} .oh-panel,.oh-produits,.oh-guides, .oh-dd:hover>.oh-produits,.oh-dd:focus-within>.oh-produits, .oh-dd:hover>.oh-guides,.oh-dd:focus-within>.oh-guides{grid-template-columns:1fr} .oh-guides a,.oh-produits a{padding:8px} } @media (max-width:400px){ .oh-brand{font-size:19px;gap:7px} .oh-brand img{width:28px;height:28px} .oh-lang{padding:5px 8px} .oh-cta{padding:8px 10px;font-size:13px} } /* ── Pied de page ────────────────────────────────────────────────────────── */ .of{background:#130322;color:rgba(255,255,255,.72);padding:56px 0 28px;margin-top:0} .of-inner{max-width:1200px;margin:0 auto;padding:0 20px} .of-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr 1fr;gap:32px} .of-marque{display:flex;align-items:center;gap:9px;font-family:var(--oh-display);font-weight:600;font-size:21px;color:#fff} .of-marque img{width:30px;height:30px;border-radius:8px} .of-accroche{font-size:14px;line-height:1.6;margin:12px 0 18px;max-width:30ch} .of-cta{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#130322!important;font-weight:600;font-size:14px;padding:9px 16px;border-radius:10px} .of-cta .opti-ini{display:none} .of-h{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;margin:4px 0 12px} .of ul li{margin-bottom:8px} .of a{color:rgba(255,255,255,.72);font-size:14px} .of a:hover,.of a[aria-current]{color:#fff} .of-base{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;font-size:13px} .of-base nav{display:flex;flex-wrap:wrap;gap:8px 18px} .of-base a{font-size:13px} @media (max-width:980px){.of-grid{grid-template-columns:1fr 1fr 1fr}.of-intro{grid-column:1/-1}} @media (max-width:600px){.of-grid{grid-template-columns:1fr 1fr;gap:26px 18px}}