/* ============================================================================= MATHÉSCIENCES — nav.css Navigation du site (écran uniquement). S'ajoute à programme.css, ne le modifie jamais. Toutes les classes sont préfixées nv- : aucune collision possible. Signature : le rail « règle graduée » — les 12 séances posées sur un même axe navy, la bascule entre les 2 séquences marquée, la séance courante en pastille or. Règle absolue : à l'impression, toute la navigation disparaît (voir @media print en fin de fichier). Le rendu papier de programme.css n'est pas touché. ============================================================================= */ :root{ --nv-bar-h:58px; /* hauteur de la barre supérieure */ --nv-anc-h:0px; /* hauteur de la sous-nav d'ancres (0 si absente) */ --nv-rail-w:250px; /* largeur du rail latéral */ --nv-acc:#efcf53; /* accent par défaut : or */ --nv-acc-deep:#b8932f; --nv-shadow:0 10px 34px rgba(8,17,30,.30); --nv-ease:cubic-bezier(.2,.8,.3,1); } /* L'accent suit le parcours. BLEU = or franc, OR = or profond (teinte bronze). */ .p-bleu{--nv-acc:#efcf53;--nv-acc-deep:#b8932f} .p-or {--nv-acc:#e0ad38;--nv-acc-deep:#8c6d21} /* Décalages de page. Le générateur pose ces classes sur . La barre et le rail sont en position:fixed → ils ignorent ces paddings. */ body.nv-body-anc{--nv-anc-h:44px} /* déclaré avant l'usage ci-dessous */ body.nv-body{padding-top:calc(var(--nv-bar-h) + var(--nv-anc-h))} body.nv-rail-on{padding-left:var(--nv-rail-w)} /* Cible des ancres : dégager les barres fixes. */ .pg[id]{scroll-margin-top:calc(var(--nv-bar-h) + var(--nv-anc-h) + 14px)} /* ------------------------------------------------------- barre supérieure */ .nv-bar{ position:fixed;inset:0 0 auto 0;height:var(--nv-bar-h);z-index:200; display:flex;align-items:center;gap:14px;padding:0 16px; background:var(--navy);color:var(--cream); border-bottom:1px solid rgba(239,207,83,.22); font-family:"Inter",system-ui,sans-serif;font-size:13px; } .nv-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit; flex:0 0 auto;padding:4px;border-radius:8px} .nv-brand-dot{width:34px;height:34px;border-radius:50%;background:var(--navy-soft); border:1.5px solid var(--gold);display:grid;place-items:center;overflow:hidden;flex:0 0 auto} .nv-brand-dot img{width:78%;height:78%;object-fit:contain} .nv-brand-txt{display:flex;flex-direction:column;line-height:1.05} .nv-brand-txt span{font-family:"Anton",sans-serif;font-size:15px;letter-spacing:.05em; text-transform:uppercase;color:var(--white)} .nv-brand-txt b{font-weight:500;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--gold);margin-top:2px} /* menu principal */ .nv-menu{flex:1 1 auto;min-width:0} .nv-lvl1{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0} .nv-item{position:relative} .nv-top{ display:flex;align-items:center;gap:7px; font:inherit;font-weight:600;letter-spacing:.01em; background:none;border:0;cursor:pointer;color:var(--cream);text-decoration:none; padding:9px 12px;border-radius:8px;white-space:nowrap; border-bottom:2px solid transparent; } .nv-top:hover{background:rgba(255,255,255,.07);color:var(--white)} .nv-top[aria-expanded="true"]{background:var(--navy-soft);color:var(--white)} .nv-top[aria-current="page"]{color:var(--white);border-bottom-color:var(--gold)} .nv-caret{width:9px;height:9px;opacity:.7;transition:transform .18s ease} .nv-top[aria-expanded="true"] .nv-caret{transform:rotate(180deg);opacity:1} /* bouton imprimer + burger */ .nv-print{ flex:0 0 auto;font:inherit;font-size:12px;font-weight:700;cursor:pointer; background:var(--gold);color:var(--navy);border:0;border-radius:20px;padding:8px 16px; } .nv-print:hover{background:var(--white)} .nv-burger{display:none;flex:0 0 auto;width:40px;height:36px;border:0;border-radius:8px; background:rgba(255,255,255,.08);color:var(--cream);cursor:pointer;padding:0} .nv-burger span{display:block;width:18px;height:2px;margin:3.5px auto;background:currentColor; transition:transform .2s var(--nv-ease),opacity .15s} .nv-bar.nv-open .nv-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .nv-bar.nv-open .nv-burger span:nth-child(2){opacity:0} .nv-bar.nv-open .nv-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* focus visible partout, en or */ .nv-bar :focus-visible,.nv-rail :focus-visible,.nv-anc :focus-visible, .nv-pn :focus-visible,.nv-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px; border-radius:6px} /* ------------------------------------------------ panneau (menu déroulant) */ .nv-panel{ position:absolute;top:calc(100% + 6px);left:0;z-index:210; width:min(680px,calc(100vw - 32px)); background:var(--navy-soft);color:var(--cream); border:1px solid rgba(239,207,83,.28);border-radius:12px;box-shadow:var(--nv-shadow); overflow:hidden; } .nv-panel[hidden]{display:none} .nv-panel-in{display:grid;grid-template-columns:1fr 1fr;gap:0} .nv-seq{padding:14px 14px 12px} .nv-seq + .nv-seq{border-left:1px solid rgba(255,255,255,.10)} .nv-seq-h{margin:0 0 8px;padding:0 6px;font-family:"Anton",sans-serif;font-weight:400; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--nv-acc)} .nv-seq-h span{display:block;font-family:"Inter",sans-serif;font-weight:500;font-size:10px; letter-spacing:.04em;text-transform:none;color:rgba(251,243,208,.55);margin-top:2px} .nv-seq-l{list-style:none;margin:0;padding:0} /* item de séance dans le panneau : numéro + titre + notion */ .nv-sc{display:grid;grid-template-columns:26px 1fr;gap:9px;align-items:start; padding:7px 6px;border-radius:8px;text-decoration:none;color:inherit} .nv-sc:hover{background:rgba(255,255,255,.08)} .nv-sc-n{font-family:"Anton",sans-serif;font-size:16px;line-height:1.1;color:var(--nv-acc); text-align:right;opacity:.85} .nv-sc:hover .nv-sc-n{opacity:1} .nv-sc-b{min-width:0} .nv-sc-t{display:block;font-size:12.5px;font-weight:600;line-height:1.25;color:var(--white)} .nv-sc-s{display:block;font-size:10.5px;line-height:1.3;color:rgba(251,243,208,.58); margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nv-sc[aria-current="page"]{background:rgba(239,207,83,.14)} /* pied de panneau : le document complet imprimable */ .nv-panel-foot{display:flex;align-items:center;gap:9px;padding:11px 16px; background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.10); text-decoration:none;color:var(--cream);font-size:12px;font-weight:600} .nv-panel-foot:hover{background:rgba(239,207,83,.16);color:var(--white)} .nv-panel-foot svg{width:14px;height:14px;color:var(--nv-acc);flex:0 0 auto} .nv-panel-foot span{margin-left:auto;font-weight:500;font-size:10.5px; color:rgba(251,243,208,.55);letter-spacing:.04em} /* ---------------------------------------------------------- rail latéral */ .nv-rail{ /* Le rail commence sous la barre ET sous la sous-nav d'ancres quand elle existe. */ position:fixed;left:0;top:calc(var(--nv-bar-h) + var(--nv-anc-h));bottom:0; width:var(--nv-rail-w);z-index:150; background:var(--navy);color:var(--cream);border-right:1px solid rgba(239,207,83,.18); display:flex;flex-direction:column; } .nv-rail-body{overflow-y:auto;padding:16px 14px 26px;flex:1 1 auto} .nv-rail-kick{margin:0 0 3px;font-size:9.5px;font-weight:700;letter-spacing:.17em; text-transform:uppercase;color:var(--nv-acc)} .nv-rail-tt{margin:0 0 16px;font-family:"Anton",sans-serif;font-size:19px;line-height:1.05; text-transform:uppercase;color:var(--white)} /* l'axe gradué : une seule ligne verticale traverse les deux séquences */ .nv-axis{position:relative;padding-left:4px} .nv-axis::before{content:"";position:absolute;left:15px;top:6px;bottom:6px;width:1px; background:linear-gradient(180deg,transparent,rgba(239,207,83,.42) 8%,rgba(239,207,83,.42) 92%,transparent)} .nv-axis-h{margin:14px 0 6px 34px;font-size:9px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:rgba(251,243,208,.45)} .nv-axis-h:first-child{margin-top:0} .nv-axis-l{list-style:none;margin:0;padding:0} .nv-ax a{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px; align-items:center;padding:5px 8px 5px 0;text-decoration:none;color:rgba(251,243,208,.78); border-radius:8px} .nv-ax a:hover{color:var(--white);background:rgba(255,255,255,.06)} .nv-ax-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center; background:var(--navy);border:1px solid rgba(239,207,83,.45); font-family:"Anton",sans-serif;font-size:11px;color:var(--nv-acc); z-index:1;transition:transform .16s var(--nv-ease)} .nv-ax a:hover .nv-ax-n{transform:scale(1.1)} .nv-ax-t{font-size:11.5px;line-height:1.28;overflow:hidden;display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical} /* séance courante : pastille pleine + titre appuyé */ .nv-ax a[aria-current="page"]{color:var(--white);background:rgba(239,207,83,.10)} .nv-ax a[aria-current="page"] .nv-ax-n{background:var(--nv-acc);border-color:var(--nv-acc); color:var(--navy);transform:scale(1.16);box-shadow:0 0 0 4px rgba(239,207,83,.14)} .nv-ax a[aria-current="page"] .nv-ax-t{font-weight:700} .nv-rail-foot{border-top:1px solid rgba(255,255,255,.10);padding:10px 14px;flex:0 0 auto} .nv-rail-foot a{display:block;font-size:11px;font-weight:600;color:rgba(251,243,208,.75); text-decoration:none;padding:4px 0} .nv-rail-foot a:hover{color:var(--gold)} .nv-rail-tab{display:none} /* -------------------------------------------------- sous-nav d'ancres A4 */ .nv-anc{ position:fixed;left:0;right:0;top:var(--nv-bar-h);height:var(--nv-anc-h);z-index:190; display:flex;align-items:center;gap:6px;padding:0 16px 0 calc(var(--nv-rail-w) + 16px); background:var(--cream);border-bottom:1px solid var(--hair); font-family:"Inter",sans-serif;font-size:12px; } .nv-anc-t{font-weight:700;color:var(--navy);margin-right:14px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .nv-anc-t b{font-family:"Anton",sans-serif;font-weight:400;color:var(--nv-acc-deep); margin-right:6px} .nv-anc a{text-decoration:none;color:var(--ink);font-weight:600;padding:5px 11px; border-radius:16px;white-space:nowrap} .nv-anc a:hover{background:rgba(184,147,47,.14)} .nv-anc a[aria-current="true"]{background:var(--navy);color:var(--cream)} .nv-anc .nv-print{margin-left:auto} /* ------------------------------------------------------ barre précédent/suivant */ .nv-pn{max-width:210mm;margin:0 auto 40px;padding:0 4px; display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch} .nv-pn-a{display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:64px; padding:12px 16px;background:var(--white);border:1px solid var(--hair);border-radius:10px; text-decoration:none;color:var(--ink)} .nv-pn-a:hover{border-color:var(--nv-acc-deep);background:var(--soft)} .nv-pn-next{text-align:right;align-items:flex-end} .nv-pn-k{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--nv-acc-deep)} .nv-pn-t{font-size:12.5px;font-weight:600;line-height:1.25;color:var(--navy)} .nv-pn-off{visibility:hidden} .nv-pn-up{display:grid;place-items:center;padding:0 20px;background:var(--navy); color:var(--cream);border-radius:10px;text-decoration:none;font-size:11.5px;font-weight:700; letter-spacing:.05em;text-align:center} .nv-pn-up:hover{background:var(--navy-soft);color:var(--gold)} /* --------------------------------------------------- hub : carte de séance */ .nv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .nv-card{position:relative;display:block;overflow:hidden;padding:14px 15px 15px; background:var(--white);border:1px solid var(--hair);border-radius:12px; text-decoration:none;color:var(--ink); transition:transform .16s var(--nv-ease),box-shadow .16s,border-color .16s} .nv-card:hover{transform:translateY(-2px);border-color:var(--nv-acc-deep); box-shadow:0 8px 22px rgba(15,31,52,.14)} .nv-card-pic{position:absolute;right:-10px;bottom:-12px;width:88px;height:88px; color:var(--nv-acc);opacity:.16;pointer-events:none} .nv-card-pic svg{width:100%;height:100%} .nv-card-n{display:block;font-family:"Anton",sans-serif;font-size:26px;line-height:1; color:var(--nv-acc-deep)} .nv-card-t{display:block;position:relative;margin-top:6px;font-size:13.5px;font-weight:700; line-height:1.25;color:var(--navy)} .nv-card-s{display:block;position:relative;margin-top:5px;font-size:10.5px;line-height:1.35; color:var(--muted)} .nv-card-them{position:absolute;top:14px;right:14px;font-size:9px;font-weight:700; letter-spacing:.1em;color:var(--nv-acc-deep);background:var(--cream); border-radius:10px;padding:2px 7px} /* ------------------------------------------------------------- responsive */ @media screen and (max-width:900px){ :root{--nv-bar-h:52px;--nv-rail-w:0px} .nv-burger{display:block} .nv-print{display:none} /* le bouton reste dans la sous-nav */ .nv-menu{position:fixed;left:0;right:0;top:var(--nv-bar-h);z-index:205; max-height:calc(100vh - var(--nv-bar-h));overflow-y:auto; background:var(--navy);border-bottom:1px solid rgba(239,207,83,.25); padding:8px 12px 18px;display:none} .nv-bar.nv-open .nv-menu{display:block} .nv-lvl1{flex-direction:column;align-items:stretch;gap:0} .nv-top{width:100%;justify-content:space-between;padding:13px 8px; border-bottom:1px solid rgba(255,255,255,.08);border-radius:0} .nv-panel{position:static;width:auto;border:0;border-radius:0;box-shadow:none; background:rgba(0,0,0,.22)} .nv-panel-in{grid-template-columns:1fr} .nv-seq + .nv-seq{border-left:0;border-top:1px solid rgba(255,255,255,.10)} .nv-sc-s{white-space:normal} /* rail replié en tiroir */ .nv-rail{top:auto;bottom:0;left:0;right:0;width:100%;height:auto;max-height:72vh; border-right:0;border-top:1px solid rgba(239,207,83,.25);box-shadow:var(--nv-shadow)} .nv-rail-tab{display:block;width:100%;font:inherit;font-size:12px;font-weight:700; padding:11px 14px;text-align:left;background:var(--navy-soft);color:var(--cream); border:0;cursor:pointer} .nv-rail-tab::after{content:"▾";float:right;color:var(--nv-acc)} .nv-rail-tab[aria-expanded="true"]::after{content:"▴"} .nv-rail-body{display:none} .nv-rail.nv-open .nv-rail-body{display:block;max-height:56vh} .nv-anc{padding-left:12px;padding-right:12px;overflow-x:auto} .nv-anc .nv-print{display:block} .nv-pn{grid-template-columns:1fr;margin-bottom:96px} .nv-pn-off{display:none} .nv-pn-next{text-align:left;align-items:flex-start} } /* ------------------------------------------------- lien d'évitement clavier Invisible à la souris, il apparaît au premier Tab et saute les ~28 arrêts de tabulation de la navigation pour poser le focus sur le contenu. */ .nv-skip{position:absolute;left:12px;top:8px;z-index:400; transform:translateY(-160%);transition:transform .12s ease; background:var(--gold);color:var(--navy);font-weight:700;font-size:13px; padding:9px 14px;border-radius:8px;text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.35)} .nv-skip:focus{transform:translateY(0)} #contenu:focus{outline:none} /* Doublon d'impression dans le menu replié : masqué tant que la barre a la place d'afficher son propre bouton. */ .nv-item-print{display:none} @media screen and (max-width:900px){ .nv-item-print{display:block} .nv-item-print .nv-top{width:100%;text-align:left;font:inherit;font-weight:700; color:var(--gold);cursor:pointer} } @media (prefers-reduced-motion:reduce){ .nv-card,.nv-ax-n,.nv-caret,.nv-burger span{transition:none} .nv-card:hover{transform:none} } /* ================================================================= IMPRESSION Toute la navigation disparaît. Les décalages de page sont annulés pour que le rendu A4 de programme.css soit strictement identique à l'existant. */ @media print{ .nv-bar,.nv-rail,.nv-anc,.nv-pn,.nv-menu,.nv-panel,.nv-print,.nv-burger, .nv-grid,.nv-noprint,.nv-skip{display:none!important} body.nv-body,body.nv-body-anc,body.nv-rail-on{padding:0!important} }