/* /cm1/accueil.css — accueil fractilo.fr/cm1, thème « le royaume des châteaux ».
   Même gabarit que /ce2/accueil.css (île au trésor) : tout est préfixé « il- »
   (les icônes de /commun/icones.js reconnaissent les tuiles « il-xx »).
   Couleurs du monde : pierre #CFC8DD, pourpre royal #6B3FA0, prairie #5DBB63,
   bannière #E5484D — plus l'or #FFC83D du site. */
@font-face{font-family:Quicksand;src:url("/lecture/polices/quicksand-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Quicksand;src:url("/lecture/polices/quicksand-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Baloo 2";src:url("/ce1-fr/polices/baloo-2-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

html,body{background:#FBF6EC !important;margin:0}
body{min-height:100vh}
body,.il,.il-fond{font-family:Quicksand,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:600;color:#2A2440}
.il{--marine:#2E2463;--encre:#2A2440;--doux:#665E7E;--carte:#fff;
  min-height:100vh;display:flex;flex-direction:column}

/* ---------- le ciel, la mer et l'île ---------- */
.il-ciel{position:relative;overflow:hidden;color:var(--marine);
  background:radial-gradient(60% 70% at 88% 8%,#FFF3B0 0%,transparent 55%),linear-gradient(180deg,#9FCBFF 0%,#D9ECFF 72%,#E6F2FF 100%);
  padding:28px 20px 84px}
.il-soleil{position:absolute;top:18px;right:7%;width:70px;height:70px;border-radius:50%;background:#FFD23F;
  box-shadow:0 0 0 12px rgba(255,210,63,.25),0 0 40px rgba(255,190,40,.7)}
.il-nuage{position:absolute;height:22px;border-radius:22px;background:#fff;opacity:.9;animation:il-nuage 40s linear infinite}
.il-nuage::before{content:"";position:absolute;left:18%;top:-12px;width:40%;height:28px;border-radius:50%;background:#fff}
@keyframes il-nuage{from{transform:translateX(-30vw)}to{transform:translateX(120vw)}}
.il-mer{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,#6CC56F 0%,#3E9B4F 100%)}
.il-vague{position:absolute;left:-40px;right:-40px;height:16px;animation:il-vague 6s linear infinite}
.il-vague.v1{top:-14px;animation:none;background:radial-gradient(circle at 60px 30px,#6CC56F 29px,transparent 30px) 0 0/120px 16px repeat-x}
.il-vague.v2{top:24px;animation:none;opacity:.55;
  background:radial-gradient(circle at 8px 8px,#FFE066 3px,transparent 3.5px) 0 0/46px 20px repeat-x,radial-gradient(circle at 30px 14px,#fff 3px,transparent 3.5px) 0 0/58px 22px repeat-x}
@keyframes il-vague{to{transform:translateX(40px)}}
/* la marque du site (logo fractilo), comme sur la page d'accueil */
.il-marque{position:relative;z-index:1;max-width:980px;margin:-8px auto 12px;display:flex}
.il-marque a{display:inline-flex;align-items:center;gap:8px;color:var(--marine);text-decoration:none;font-family:"Baloo 2",Quicksand,sans-serif;font-weight:700;font-size:24px;line-height:1;
  background:rgba(255,255,255,.85);border-radius:999px;padding:5px 14px 5px 6px}
.il-marque svg{width:32px;height:32px}
.il-tete{position:relative;max-width:980px;margin:0 auto;display:flex;align-items:center;gap:18px}
.il-ile{width:172px;flex:none;filter:drop-shadow(0 6px 10px rgba(46,36,99,.25))}
.il-ile .il-drapeau{transform-box:fill-box;transform-origin:0 50%;animation:il-drapeau 2.4s ease-in-out infinite}
.il-ile .il-dragon{transform-box:fill-box;transform-origin:50% 100%;animation:il-dragon 5s ease-in-out infinite}
.il-ile .il-eclat{animation:il-eclat 1.6s ease-in-out infinite}
@keyframes il-drapeau{50%{transform:skewY(6deg) scaleX(.9)}}
@keyframes il-dragon{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-5px)}}
@keyframes il-eclat{50%{opacity:.2}}
.il-titre{font-family:"Baloo 2",Quicksand,sans-serif;font-weight:700;font-size:clamp(44px,10vw,70px);line-height:1;margin:0;letter-spacing:.5px;color:var(--marine)}
.il-titre small{display:block;font-family:Quicksand,sans-serif;font-size:15px;letter-spacing:3px;text-transform:uppercase;color:#6B3FA0;margin-bottom:6px}
.il-sous{margin:10px 0 0;font-size:clamp(17px,3.6vw,21px);color:#3E347A}
.il-retour{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:10px 16px;margin-bottom:12px;
  background:rgba(255,255,255,.85);color:var(--marine);font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 3px 0 rgba(46,36,99,.2);text-decoration:none}

.il-corps{position:relative;max-width:980px;width:100%;box-sizing:border-box;margin:-40px auto 0;padding:0 16px 20px;flex:1}

/* ---------- l'invitation au compte ---------- */
.il-compte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--carte);border-radius:22px;padding:16px 18px;
  box-shadow:0 6px 0 #E3DCEC,0 16px 30px rgba(46,36,99,.14);border:3px solid #FFC93C;margin-bottom:22px}
.il-compte.ok{border-color:#3BB273}
.il-compte .il-ic{font-size:40px;line-height:1}
.il-compte .il-txt{flex:1;min-width:220px}
.il-compte b{display:block;font-size:19px;font-weight:700}
.il-compte span.il-det{display:block;color:var(--doux);font-size:15px;margin-top:2px}
.il-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.il-bouton{border:0;border-radius:16px;padding:14px 20px;font:inherit;font-weight:700;font-size:17px;cursor:pointer;
  background:#6B3FA0;color:#fff;box-shadow:0 4px 0 #4A2A73}
.il-bouton:active{transform:translateY(3px);box-shadow:0 1px 0 #4A2A73}
.il-bouton.jaune{background:#FFC93C;color:#3A2A00;box-shadow:0 4px 0 #C9951A}
.il-bouton.clair{background:#EFEAF6;color:var(--encre);box-shadow:0 4px 0 #D8CFE6}
.il-lien{border:0;background:none;color:var(--doux);text-decoration:underline;font:inherit;font-size:15px;cursor:pointer;padding:10px 6px}
.il-pastille{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 16px;margin-bottom:18px;
  background:#fff;color:var(--encre);font:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 3px 0 #E3DCEC}

/* ---------- les îles (matières) ---------- */
.il-iles{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.il-iles.quatre{grid-template-columns:repeat(2,1fr)}
.il-iles.six .il-nom{font-size:26px}
.il-carte{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:var(--encre);
  background:var(--carte);border-radius:26px;padding:22px 16px 20px;box-shadow:0 6px 0 var(--ombre),0 14px 26px rgba(46,36,99,.12);
  border:0;border-top:10px solid var(--c);font:inherit;cursor:pointer;transition:transform .12s;box-sizing:border-box;width:100%}
a.il-carte:hover,button.il-carte:hover{transform:translateY(-3px)}
a.il-carte:active,button.il-carte:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ombre)}
.il-rond{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:48px;
  background:radial-gradient(circle at 35% 30%,#fff 0%,var(--clair) 45%,var(--c) 100%);box-shadow:inset -8px -8px 0 rgba(0,0,0,.08)}
.il-nom{display:block;font-family:"Baloo 2",Quicksand,sans-serif;font-size:30px;line-height:1.1;margin:12px 0 4px}
.il-quoi{color:var(--doux);font-size:15px}
.il-fr{--c:#C8323C;--clair:#FFC2C2;--ombre:#F2D0D0}
.il-ma{--c:#2F9E44;--clair:#B8EBC3;--ombre:#CBE8D2}
.il-en{--c:#3D5BD6;--clair:#B9C8FF;--ombre:#C9D3F5}
.il-cj{--c:#E07B12;--clair:#FFD7A8;--ombre:#F3DCC2}
.il-ho{--c:#1C9AA8;--clair:#B5EEF2;--ombre:#C8E6EA}
.il-acc{--c:#8A4FD0;--clair:#DCC6FA;--ombre:#E2D6F2}
.il-gra{--c:#C2410C;--clair:#FFD2B8;--ombre:#F3D6C6}
.il-mo{--c:#2B8A3E;--clair:#C3EBC8;--ombre:#D3E8D6}
.il-lec{--c:#B7791F;--clair:#FFE8A3;--ombre:#F3E2B8}
.il-fra{--c:#6B3FA0;--clair:#DCCBF5;--ombre:#E0D6EE}
.il-nb{--c:#1C7ED6;--clair:#BFDDFB;--ombre:#CFE0F2}
.il-cal{--c:#E07B12;--clair:#FFD7A8;--ombre:#F3DCC2}
.il-op{--c:#C2410C;--clair:#FFD2B8;--ombre:#F3D6C6}
.il-pb{--c:#1C9AA8;--clair:#B5EEF2;--ombre:#C8E6EA}
.il-mes{--c:#2B8A3E;--clair:#C3EBC8;--ombre:#D3E8D6}
.il-voc{--c:#3D5BD6;--clair:#B9C8FF;--ombre:#C9D3F5}
.il-ecou{--c:#C8323C;--clair:#FFC2C2;--ombre:#F2D0D0}
.il-phr{--c:#B7791F;--clair:#FFE8A3;--ombre:#F3E2B8}
.il-en-hello{--c:#3D5BD6;--clair:#B9C8FF;--ombre:#C9D3F5}
.il-en-famille{--c:#E07B12;--clair:#FFD7A8;--ombre:#F3DCC2}
.il-en-corps{--c:#1C9AA8;--clair:#B5EEF2;--ombre:#C8E6EA}
.il-en-food{--c:#C8323C;--clair:#FFC2C2;--ombre:#F2D0D0}
.il-en-sport{--c:#2F9E44;--clair:#B8EBC3;--ombre:#CBE8D2}
.il-en-temps{--c:#1C7ED6;--clair:#BFDDFB;--ombre:#CFE0F2}
.il-en-ecole{--c:#8A4FD0;--clair:#DCC6FA;--ombre:#E2D6F2}
/* une île pas encore découverte : grisée, pas cliquable */
.il-carte.brume{--c:#B9B9B9;--clair:#E6E6E6;--ombre:#DEDEDE;cursor:default;color:#7A7A7A}
.il-carte.brume .il-rond{filter:grayscale(1);opacity:.6}
.il-carte.brume .il-quoi{color:#8A8A8A}
.il-bientot{position:absolute;top:12px;right:12px;background:#EFEFEF;color:#666;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700}

/* ---------- pied + notice parents ---------- */
.il-pied{text-align:center;padding:26px 16px 30px;color:var(--doux);font-size:14px}
.il-frere{display:inline-block;text-decoration:none;margin-top:12px}
.il-parents{border:2px solid #D8CFE6;background:#fff;border-radius:999px;padding:12px 20px;font:inherit;font-weight:700;font-size:16px;color:var(--encre);cursor:pointer}
.il-fond{--doux:#6B5E45;position:fixed;inset:0;background:rgba(46,36,99,.55);display:grid;place-items:center;z-index:80;padding:16px}
.il-notice{position:relative;background:#fff;border-radius:24px;max-width:600px;width:100%;max-height:88vh;overflow:auto;box-sizing:border-box;
  padding:24px 22px 20px;font-size:16px;line-height:1.5;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.il-notice h2{font-family:"Baloo 2",Quicksand,sans-serif;font-size:26px;margin:0 40px 4px 0}
.il-notice .il-chapeau{color:var(--doux);margin:0 0 14px}
.il-notice ul{list-style:none;padding:0;margin:0}
.il-notice li{display:flex;gap:12px;padding:10px 0;border-top:1px solid #ECE6F2}
.il-notice li>span{font-size:24px;line-height:1.2;flex:none}
.il-notice li b{display:block}
.il-notice a{color:#6B3FA0}
.il-notice .il-sign{margin:14px 0 4px;color:var(--doux)}
.il-notice .il-btns{margin-top:14px}
.il-fermer{position:absolute;top:12px;right:12px;border:0;background:#EFEAF6;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer}

@media (max-width:760px){
  .il-iles,.il-iles.quatre{grid-template-columns:1fr}
  .il-carte{flex-direction:row;text-align:left;gap:16px;padding:16px}
  .il-rond{width:72px;height:72px;font-size:38px;flex:none}
  .il-nom{margin:0 0 2px;font-size:26px}
  .il-ile{width:104px}
  .il-titre small{font-size:13px;letter-spacing:1.5px}
  .il-titre{font-size:clamp(32px,9vw,44px);overflow-wrap:anywhere}
  .il-bientot{top:auto;bottom:10px;right:10px}   /* sur téléphone, le badge ne recouvre plus le titre */
  .il-carte.brume{padding-bottom:30px}
  .il-soleil{width:46px;height:46px}
  .il-ciel{padding:22px 16px 96px}
}
@media (prefers-reduced-motion:reduce){.il-nuage,.il-vague,.il-drapeau,.il-dragon,.il-eclat{animation:none !important}}

/* la pièce d'or dessinée (l'emoji 🪙 est argenté sur Apple) — voir /commun/piece-or.js */
.piece-or{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.14em;margin:0 .04em;flex:none;position:relative;
  background:radial-gradient(circle at 32% 28%,#FFFBD1 0 10%,#FFE066 24%,#FFC400 52%,#E09E00 78%,#B57A00 100%);
  box-shadow:inset 0 0 0 .07em #A86F00,inset 0 0 0 .15em #FFD84A,0 .05em .1em rgba(120,80,0,.35)}
.piece-or::after{content:"";position:absolute;inset:.27em;border-radius:50%;border:.06em solid rgba(150,95,0,.55)}

/* liens vers les autres classes (CE1 · CE2 · 6e Ariane) */
.il-freres{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0}
.il-freres .il-frere{margin-top:0}