/* Charte « La vallée des dinos » (CE1, oct. 2026) — la même que fractilo.fr/ce1 :
   ciel de la vallée, horizon vert de la planète CE1 (page d'accueil du site), pièces d'or,
   et le logo du site (anneau en quatre morceaux + étoile). Même principe que theme-ce2.css.
   Chargé APRÈS les styles de chaque appli CE1 (calcul, homonymes, atelier des mots,
   anglais, mots de dictée) : il ne touche que le bandeau du haut et quelques couleurs. */
:root{--ce1-ciel:#A8E6CF;--ce1-ciel2:#DDF7E8;--ce1-planete:#4CC27A;--ce1-planete2:#3AA866;--ce1-nuit:#1F1D5C;--ce1-nuit2:#2B2878;
  --ce1-or:#FFC83D;--ce1-logo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -40 80 80'%3E%3Ccircle r='30' fill='none' stroke='%23FFC83D' stroke-width='16' stroke-dasharray='39.8 148.7' transform='rotate(-83)'/%3E%3Ccircle r='30' fill='none' stroke='%23FF8A3D' stroke-width='16' stroke-dasharray='39.8 148.7' transform='rotate(7)'/%3E%3Ccircle r='30' fill='none' stroke='%232EC4C9' stroke-width='16' stroke-dasharray='39.8 148.7' transform='rotate(97)'/%3E%3Ccircle r='30' fill='none' stroke='%235B8CFF' stroke-width='16' stroke-dasharray='39.8 148.7' transform='rotate(187)'/%3E%3Cpath d='M0,-13 L3.23,-4.45 L12.36,-4.02 L5.23,1.7 L7.64,10.52 L0,5.5 L-7.64,10.52 L-5.23,1.7 L-12.36,-4.02 L-3.23,-4.45 Z' fill='%23FFC83D' stroke='%23FFC83D' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- le bandeau : ciel de la vallée + colline verte, logo devant le titre ---------- */
.cc-barre,.hm-barre,.gr-barre,.top{background:linear-gradient(180deg,var(--ce1-ciel) 0%,var(--ce1-ciel2) 100%) !important;
  box-shadow:none !important;color:var(--ce1-nuit)}
.cc-barre::after,.hm-barre::after,.gr-barre::after,.top::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:10px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0,var(--ce1-planete) 98%,transparent 100%) 0 0/120px 10px repeat-x}
.cc-barre-t,.hm-barre-t,.gr-barre-t{padding-left:42px;background:var(--ce1-logo) left center/34px 34px no-repeat}
.cc-barre-t b,.hm-barre-t b,.gr-barre-t b{color:var(--ce1-nuit)}
.cc-barre-t span,.hm-barre-t span,.gr-barre-t span{color:#2B4A63 !important}
.cc-retour,.hm-retour,.gr-retour{color:var(--ce1-nuit) !important;box-shadow:0 3px 0 rgba(31,29,92,.2) !important}
.cc-or,.hm-or,.gr-or{background:#FFF3C4;border-color:#E3A008}

/* les tuiles sombres (récompenses, jeu, mission faite) : le bleu nuit du site */
.cc-tuile,.hm-tuile,.gr-tuile{background:var(--ce1-nuit2) !important;box-shadow:0 5px 0 var(--ce1-nuit) !important}
.cc-mission.faite{background:var(--ce1-nuit2) !important;box-shadow:0 6px 0 var(--ce1-nuit) !important}

/* ---------- anglais (/ce1-en) : le logo devant « CE1 » ---------- */
.top .brand{display:inline-flex;align-items:center;gap:6px}
.top .brand::before{content:"";width:26px;height:26px;flex:none;background:var(--ce1-logo) center/contain no-repeat}
.top .brand b{color:var(--ce1-nuit)}

/* ---------- mots de dictée (/ce1-fr) : la barre n'est pas collée en haut,
   on lui met le logo devant le titre ---------- */
body.theme-ce1-fr{position:relative;background:#FFF8E6 !important}
html:has(body.theme-ce1-fr){background:#FFF8E6 !important}
body.theme-ce1-fr::before{content:"";position:absolute;left:0;right:0;top:0;height:84px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--ce1-ciel) 0%,var(--ce1-ciel2) 100%)}
body.theme-ce1-fr::after{content:"";position:absolute;left:0;right:0;top:83px;height:10px;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0,var(--ce1-planete) 98%,transparent 100%) 0 0/120px 10px repeat-x}
body.theme-ce1-fr #app{position:relative;z-index:1}
body.theme-ce1-fr .bar h1{display:flex;flex-direction:column;padding-left:44px;background:var(--ce1-logo) left center/36px 36px no-repeat;color:var(--ce1-nuit)}
body.theme-ce1-fr .bar h1 small{color:#2B4A63}

/* ---------- mots de dictée (/ce1-fr) : les couleurs de la vallée ----------
   L'appli est partagée avec /ce2-fr (même ce1.js, même styles.css) : tout est
   donc sous body.theme-ce1-fr, que seule la page /ce1-fr porte. */
body.theme-ce1-fr{
  --bg:#FFF8E6; --mat:#F3EBDA; --card:#FFFFFF; --card-hi:#FFFDF6;
  --ink:#1F1D5C; --ink-soft:#5C5440; --line:#E9DFC4; --line-soft:#F3EBDA;
  --accent:#2B8A3E; --accent-dk:#1F6B30; --bleu:#1C7ED6;
  --lift:0 5px 0 var(--line),0 10px 20px rgba(31,29,92,.07);
  --lift-sm:0 3px 0 var(--line),0 5px 10px rgba(31,29,92,.05)}
body.theme-ce1-fr .tabs button[aria-selected="true"]{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--accent-dk)}
body.theme-ce1-fr button:focus-visible,body.theme-ce1-fr a:focus-visible,body.theme-ce1-fr input:focus-visible{outline-color:#1F1D5C}
/* la salle de jeux : le violet du logo et le bleu nuit du site (la couveuse est en nuit plus foncé) */
body.theme-ce1-fr .arcade-carte:not(.couveuse-carte){background:linear-gradient(135deg,#6C5CE7,#3A3A9E);box-shadow:0 6px 0 #2B2878}
body.theme-ce1-fr .compteurs .or{color:#7A4E00}

@media (max-width:560px){body.theme-ce1-fr::before{height:112px}body.theme-ce1-fr::after{top:111px}}
@media (max-width:420px){
  .cc-barre-t,.hm-barre-t,.gr-barre-t{padding-left:0;background:none}
  body.theme-ce1-fr .bar h1{padding-left:0;background:none}
}