/* /cm2/accueil.css — accueil fractilo.fr/cm2, « Le tour du monde en montgolfière ».
   Copie du gabarit CE2 (/ce2/accueil.css) ; tout est préfixé « il- ».
   Couleurs du monde : ciel d'altitude #5FA8FF → horizon doré #FFE3C4, mer de nuages,
   montgolfière orange/or/lagon (charte du site), texte nuit #1F1D5C. */
@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:#F3F7FF !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:#1F1D5C}
.il{--marine:#1F1D5C;--encre:#1F1D5C;--doux:#4F5578;--carte:#fff;
  min-height:100vh;display:flex;flex-direction:column}

/* ---------- le ciel, la mer de nuages et la montgolfière ---------- */
.il-ciel{position:relative;overflow:hidden;color:var(--marine);
  background:radial-gradient(55% 60% at 90% 10%,#FFF3C8 0%,transparent 55%),linear-gradient(180deg,#5FA8FF 0%,#9CCBFF 55%,#FFE3C4 100%);
  padding:28px 20px 90px}
.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-nuages{position:absolute;left:-40px;right:-40px;bottom:-2px;height:74px;animation:il-derive 30s linear infinite;
  background:radial-gradient(circle at 30px 46px,#fff 30px,transparent 31px) 0 0/90px 74px repeat-x,
             radial-gradient(circle at 75px 56px,#F3F7FF 26px,transparent 27px) 0 0/90px 74px repeat-x,
             linear-gradient(#F3F7FF,#F3F7FF) 0 60px/100% 14px no-repeat}
@keyframes il-derive{to{transform:translateX(90px)}}
/* 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-ballon{width:150px;flex:none;filter:drop-shadow(0 8px 10px rgba(31,29,92,.22));animation:il-flotte 5s ease-in-out infinite}
.il-ballon .il-flamme{transform-origin:80px 118px;animation:il-flamme .9s ease-in-out infinite}
@keyframes il-flotte{50%{transform:translateY(-8px)}}
@keyframes il-flamme{50%{transform:scale(.7);opacity:.7}}
.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:2.5px;text-transform:uppercase;color:#23307A;margin-bottom:6px}
.il-sous{margin:10px 0 0;font-size:clamp(17px,3.6vw,21px);color:#23307A}
.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(31,29,92,.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 #D6E0F5,0 16px 30px rgba(31,29,92,.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:#3B5BDB;color:#fff;box-shadow:0 4px 0 #23307A}
.il-bouton:active{transform:translateY(3px);box-shadow:0 1px 0 #23307A}
.il-bouton.jaune{background:#FFC93C;color:#3A2A00;box-shadow:0 4px 0 #C9951A}
.il-bouton.clair{background:#E8EEFB;color:var(--encre);box-shadow:0 4px 0 #C9D4EE}
.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 #D6E0F5}

/* ---------- 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{grid-template-columns:repeat(3,1fr)}
.il-iles.huit{grid-template-columns:repeat(4,1fr);gap:14px}
.il-iles.huit .il-nom{font-size:24px}
.il-iles.huit .il-rond{width:80px;height:80px}
@media (max-width:1000px) and (min-width:761px){.il-iles.huit{grid-template-columns:repeat(3,1fr)}}
.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(31,29,92,.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:#E8590C;--clair:#FFD2B0;--ombre:#F5DCCB}
.il-ma{--c:#3B5BDB;--clair:#C5D3FF;--ombre:#D3DCF5}
.il-en{--c:#0CA678;--clair:#B2F2DB;--ombre:#CBEBDF}
/* l'anglais : les villes du tour du monde */
.il-lon{--c:#E03131;--clair:#FFC9C9;--ombre:#F2D0D0}
.il-dub{--c:#2B8A3E;--clair:#B2F2BB;--ombre:#CBE8D2}
.il-edi{--c:#5F3DC4;--clair:#D0BFFF;--ombre:#E0D6F2}
.il-ny{--c:#1098AD;--clair:#B5EEF2;--ombre:#C8E6EA}
.il-syd{--c:#E8590C;--clair:#FFD8A8;--ombre:#F3DCC2}
.il-cap{--c:#C2255C;--clair:#FCC2D7;--ombre:#F2D0DC}
.il-tor{--c:#D6336C;--clair:#FFDEEB;--ombre:#F2D6E0}
.il-ret{--c:#F59F00;--clair:#FFEC99;--ombre:#F3E2B8}
.il-ho{--c:#D6336C;--clair:#FFC9DB;--ombre:#F3D3DE}
.il-cj{--c:#E07B12;--clair:#FFD7A8;--ombre:#F3DCC2}
.il-acc{--c:#7048E8;--clair:#D9CCFF;--ombre:#DDD5F2}
.il-gram{--c:#1C7ED6;--clair:#BFDDFB;--ombre:#CFE0F2}
.il-orth{--c:#2B8A3E;--clair:#C3EBC8;--ombre:#D3E8D6}
.il-dic{--c:#8A4FD0;--clair:#DCC6FA;--ombre:#E2D6F2}
.il-dec{--c:#1098AD;--clair:#B5EEF2;--ombre:#C8E6EA}
.il-fra{--c:#C2410C;--clair:#FFD2B8;--ombre:#F3D6C6}
.il-gn{--c:#5C7CFA;--clair:#C9D6FF;--ombre:#D5DCF5}
.il-cal{--c:#E8A400;--clair:#FFE8A3;--ombre:#F3E2B8}
.il-ope{--c:#AE3EC9;--clair:#F0C6FA;--ombre:#EAD3F0}
.il-pro{--c:#0CA678;--clair:#B2F2DB;--ombre:#CBEBDF}
.il-pb{--c:#F03E3E;--clair:#FFC9C9;--ombre:#F3D3D3}
.il-mes{--c:#5F3DC4;--clair:#D0BFFF;--ombre:#DCD3F2}
/* 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 #C9D4EE;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(31,29,92,.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 #E3E9F7}
.il-notice li>span{font-size:24px;line-height:1.2;flex:none}
.il-notice li b{display:block}
.il-notice a{color:#3B5BDB}
.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:#E8EEFB;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer}

@media (max-width:760px){
  .il-iles,.il-iles.quatre,.il-iles.six,.il-iles.huit{grid-template-columns:1fr;gap:12px}
  .il-carte{flex-direction:row;text-align:left;gap:16px;padding:16px}
  .il-rond,.il-iles.huit .il-rond{width:64px;height:64px;font-size:34px;flex:none}
  .il-nom,.il-iles.huit .il-nom{margin:0 0 2px;font-size:24px}
  .il-ballon{width:92px}
  .il-titre small{font-size:12px;letter-spacing:1.5px}
  .il-soleil{width:46px;height:46px}
  .il-ciel{padding:22px 16px 96px}
}
@media (prefers-reduced-motion:reduce){.il-nuage,.il-mer-nuages,.il-ballon,.il-flamme{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}