/* Charte « L'île au trésor » (CE2, oct. 2026) — la même que fractilo.fr/ce2 :
   ciel, vague, sable, pièces d'or, et le logo du site (anneau en quatre morceaux + étoile).
   Chargé APRÈS les styles de chaque appli CE2 (dictées d'art, homonymes, mots, tables,
   anglais) : il ne touche que le bandeau du haut et quelques couleurs, rien au contenu. */
:root{--ce2-ciel:#7FD6F5;--ce2-ciel2:#BDEEFF;--ce2-mer:#2BA8D8;--ce2-marine:#0B3954;--ce2-sable:#FFF8EA;
  --ce2-or:#FFC83D;--ce2-orange:#FF8A3D;--ce2-lagon:#2EC4C9;--ce2-azur:#5B8CFF;
  --ce2-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 + vague, logo devant le titre ---------- */
.hm-barre,.tb-barre,.top{background:linear-gradient(180deg,var(--ce2-ciel) 0%,var(--ce2-ciel2) 100%) !important;
  box-shadow:none !important;color:var(--ce2-marine)}
.hm-barre::after,.tb-barre::after,.top::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:12px;pointer-events:none;
  background:radial-gradient(circle at 12px 0,var(--ce2-ciel2) 11px,transparent 11.5px) 0 0/24px 12px repeat-x}
.hm-barre-t,.tb-barre-t{padding-left:42px;background:var(--ce2-logo) left center/34px 34px no-repeat}
.hm-barre-t b,.tb-barre-t b{color:var(--ce2-marine)}
.hm-retour,.tb-retour{box-shadow:0 3px 0 rgba(11,57,84,.25)}
.hm-or,.tb-or{background:#FFF3C4;border-color:#E3A008}

/* anglais : « 🏝️ CE2 » devient logo + CE2 */
.top .brand{display:inline-flex;align-items:center;gap:8px;font-size:0;color:var(--ce2-marine)}
.top .brand::before{content:"";width:32px;height:32px;background:var(--ce2-logo) center/contain no-repeat}
.top .brand b{font-size:20px;font-family:"Baloo 2",var(--f),sans-serif}
.top .brand{background:#fff;border-radius:14px;padding:5px 12px 5px 8px;box-shadow:0 2px 0 rgba(11,57,84,.12)}
.top .brand .fl{font-size:20px;font-weight:700}
.top .crumb a{color:#0B5C99}
.top .chip{background:rgba(255,255,255,.85)}

/* dictées d'art (appli commune avec le CE1) : un ciel derrière la barre du haut */
body.ce2-theme{position:relative;background:var(--ce2-sable) !important}
html:has(body.ce2-theme){background:var(--ce2-sable) !important}
body.ce2-theme::before{content:"";position:absolute;left:0;right:0;top:0;height:76px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--ce2-ciel) 0%,var(--ce2-ciel2) 100%)}
body.ce2-theme::after{content:"";position:absolute;left:0;right:0;top:75px;height:12px;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 12px 0,var(--ce2-ciel2) 11px,transparent 11.5px) 0 0/24px 12px repeat-x}
body.ce2-theme #app{position:relative;z-index:1}
body.ce2-theme .bar h1{display:flex;flex-direction:column;padding-left:44px;background:var(--ce2-logo) left center/36px 36px no-repeat;color:var(--ce2-marine)}
body.ce2-theme .bar h1 small{color:#14506F}

@media (max-width:560px){
  .hm-barre-t,.tb-barre-t{padding-left:0;background:none}
  body.ce2-theme .bar h1{padding-left:0;background:none}
}