/* ========================================================================== charte.css — la charte graphique de l'école (9 octobre 2026) D'après la maquette « Page d'accueil colorée de l'École L'Éveil aux Savoirs » transmise par Nourdine. Commune à toutes les pages publiques, chargée APRÈS le style propre à chaque page : ses couleurs remplacent donc les anciennes (les anciens noms de variables sont redéfinis plus bas), et ses composants (en-tête, boutons, cartes, pied de page) portent le préfixe ch- pour ne rien heurter. Couleurs relevées au pixel sur la maquette. L'orange, le turquoise et le rose y sont trop pâles pour du TEXTE sur fond blanc (contraste 1,8 à 3,2) : les variantes « -texte » sont assombries juste assez pour être lisibles (≥ 3:1 en grand, ≥ 4,5:1 en petit) ; les teintes vives restent aux décors. ========================================================================== */ :root{ --marine:#00354F; /* titres, nom de l'école */ --texte:#4A687A; /* corps de texte (5,9:1) */ --violet:#5C30C7; /* boutons, liens forts */ --violet-sombre:#4A24A8; --violet-vif:#7444C3; --violet-clair:#8A49C9; --lavande:#EEEDFD; --lavande-2:#E0DEF7; --rose:#F35895; --rose-texte:#D63D78; --orange:#FEB424; --orange-texte:#C97A00; --jaune:#FFC828; --jaune-pale:#FEE7A3; --turquoise:#00B2C2; --turquoise-titre:#0097A7; --turquoise-texte:#00718A; /* 4,9:1 sur turquoise pâle, 5,6:1 sur blanc */ --turquoise-pale:#E0F3F6; --fond:#FFFFFF; --fond-bleu:#F1F9FD; --bord-charte:#DCEAF1; /* Les noms d'avant, repris par les pages existantes : une seule source. */ --ivoire:var(--fond-bleu); --ivoire-2:#E9F4F9; --lagon:var(--turquoise-texte); --lagon-fonce:var(--marine); --lagon-clair:var(--turquoise-pale); --violet-fonce:var(--violet); --corail:var(--rose); --corail-fonce:var(--rose-texte); --soleil:var(--orange); --soleil-clair:#FFF1CF; --encre:var(--marine); --encre-2:var(--texte); --bord:var(--bord-charte); --radius:22px; --radius-sm:14px; --font-display:"Baloo 2", system-ui, sans-serif; --font-body:"Nunito Sans", system-ui, sans-serif; --font-main:"Kalam", "Baloo 2", cursive; --shadow:0 18px 40px -22px rgba(0,53,79,.30); --shadow-sm:0 8px 22px -14px rgba(0,53,79,.28); --ch-maxw:1180px; } /* L'en-tête collant (84 px) ne doit cacher ni le titre d'une ancre ni l'élément qui reçoit le focus au clavier, y compris en remontant (Maj+Tab). */ html{scroll-padding-top:100px} body{background:var(--fond);color:var(--texte);font-family:var(--font-body)} h1,h2,h3,h4{color:var(--marine)} a{color:var(--violet)} /* Focus clavier en violet (7:1 sur blanc) : le turquoise vif n'atteignait pas 3:1. Sur les fonds violets (pied de page), il passe en blanc. */ :focus-visible{outline:3px solid var(--violet);outline-offset:3px} .ch-pied :focus-visible{outline-color:#fff} .ch-wrap{width:100%;max-width:var(--ch-maxw);margin:0 auto;padding:0 22px} /* ---------- Boutons ---------- */ .ch-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display); font-weight:700;font-size:16.5px;line-height:1;padding:15px 26px;border-radius:999px;text-decoration:none; border:2px solid transparent;cursor:pointer;transition:transform .18s ease, background .18s ease, border-color .18s ease} .ch-btn svg{flex:0 0 auto} .ch-btn--violet{background:var(--violet);color:#fff;box-shadow:0 12px 24px -12px rgba(92,48,199,.7)} .ch-btn--violet:hover{background:var(--violet-sombre);transform:translateY(-2px);color:#fff} .ch-btn--contour{background:#fff;color:var(--violet);border-color:#B79CEB} .ch-btn--contour:hover{border-color:var(--violet);transform:translateY(-2px)} .ch-lien-fleche{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700; color:var(--violet);text-decoration:none;font-size:16px;padding-bottom:3px; background:linear-gradient(var(--violet),var(--violet)) 0 100%/60% 2px no-repeat;transition:background-size .2s ease} .ch-lien-fleche:hover{background-size:100% 2px} /* ---------- En-tête ---------- */ .ch-entete{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96); -webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px); box-shadow:0 6px 24px -18px rgba(0,53,79,.45)} .ch-entete-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px} .ch-marque{display:flex;align-items:center;gap:12px;text-decoration:none;position:relative} .ch-marque::before{content:"";position:absolute;left:-46px;top:-34px;width:76px;height:96px;border-radius:0 0 60% 40%; background:var(--jaune);opacity:.9;z-index:-1} .ch-marque img{width:56px;height:56px;flex:0 0 auto;object-fit:contain} /* logo 5:4, jamais écrasé */ .ch-marque span{display:flex;flex-direction:column;line-height:1.02} .ch-marque small{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--turquoise-texte)} .ch-marque b{font-family:var(--font-display);font-weight:700;font-size:23px;color:var(--marine);white-space:nowrap} .ch-nav{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0} .ch-nav a{position:relative;text-decoration:none;font-weight:700;font-size:15.5px;color:var(--marine);padding:8px 0} .ch-nav a:not(.ch-btn)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px; background:var(--violet);transform:scaleX(0);transition:transform .2s ease} .ch-nav a:not(.ch-btn):hover::after,.ch-nav a[aria-current="page"]::after{transform:scaleX(1)} .ch-nav a[aria-current="page"]{color:var(--violet)} /* Le bouton du menu garde son texte blanc : « .ch-nav a » (et sa variante aria-current) est plus spécifique que « .ch-btn--violet » et le rendait marine, ou violet sur violet sur la page de pré-inscription. */ .ch-nav a.ch-btn--violet,.ch-nav a.ch-btn--violet[aria-current="page"],.ch-nav a.ch-btn--violet:hover{color:#fff} .ch-nav .ch-btn{padding:12px 22px;font-size:15.5px} /* margin-left:auto : le