/* /ce1/accueil.css — accueil fractilo.fr/ce1, thème « la vallée des dinos ».
   Copie de /ce2/accueil.css (île au trésor), recolorée : ciel du matin, jungle, volcan.
   Même gabarit que /commun/accueil-6e.css (fusée) ; tout est préfixé « il- ». */
@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:#FFF8E6 !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{--nuit:#1F1D5C;--nuit-2:#2B2878;--nuit-3:#3A3A9E;--or:#FFC83D;--marine:#1F1D5C;--encre:#1F1D5C;--doux:#4B4A7A;--carte:#fff;
  min-height:100vh;display:flex;flex-direction:column}

/* ---------- le ciel, la mer et l'île ---------- */
/* le ciel de la vallée (jour), l'horizon vert de la planète CE1 et le logo du site :
   même traitement que /ce2 (son monde à elle + le logo), avec la planète de la page d'accueil */
.il-ciel{position:relative;overflow:hidden;color:var(--nuit);
  background:radial-gradient(60% 70% at 88% 8%,#FFF3B0 0%,transparent 55%),linear-gradient(180deg,#A8E6CF 0%,#DDF7E8 72%,#DDF7E8 100%);
  padding:18px 20px 96px}
.il-etoiles{display:none}
/* l'horizon : on « atterrit » sur la planète verte du CE1 */
.il-mer{position:absolute;left:-15%;right:-15%;bottom:-150px;height:200px;border-radius:50%;
  background:radial-gradient(60% 120% at 50% 0%,#5FD38D 0%,#4CC27A 40%,#3AA866 100%);box-shadow:0 -5px 0 rgba(255,255,255,.6)}
.il-marque{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--nuit);
  background:#fff;border-radius:999px;padding:6px 14px 6px 8px;box-shadow:0 3px 0 rgba(31,29,92,.12);margin:0 0 10px}
.il-marque svg{width:30px;height:30px;flex:none}
.il-marque span{font-family:"Baloo 2",Quicksand,sans-serif;font-weight:700;font-size:22px;line-height:1}
.il-haut{position:relative;max-width:980px;margin:0 auto}
.il-tete{position:relative;max-width:980px;margin:0 auto;display:flex;align-items:center;gap:18px}
.il-ile{width:150px;flex:none;filter:drop-shadow(0 8px 14px rgba(31,29,92,.25))}
.il-ile .il-fumee{animation:il-fumee 5s ease-in-out infinite}
.il-ile .il-dino{transform-origin:138px 64px;animation:il-dino 5s ease-in-out infinite}
@keyframes il-fumee{50%{transform:translateY(-4px);opacity:.5}}
@keyframes il-dino{40%,60%{transform:rotate(-6deg)}}
.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(--nuit)}
.il-titre small{display:block;font-family:Quicksand,sans-serif;font-size:15px;letter-spacing:3px;text-transform:uppercase;color:#1F7A45;margin-bottom:6px}
.il-sous{margin:10px 0 0;font-size:clamp(17px,3.6vw,21px);color:#2B4A63}
.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(--nuit);font:inherit;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 3px 0 rgba(31,29,92,.15);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 #DFE2F6,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:#3A3A9E;color:#fff;box-shadow:0 4px 0 #1F1D5C}
.il-bouton:active{transform:translateY(3px);box-shadow:0 1px 0 #1F1D5C}
.il-bouton.jaune{background:#FFC93C;color:#3A2A00;box-shadow:0 4px 0 #C9951A}
.il-bouton.clair{background:#ECEEFB;color:var(--encre);box-shadow:0 4px 0 #DFE2F6}
.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 #DFE2F6}

/* ---------- 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-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:#2B8A3E;--clair:#C3EBC8;--ombre:#D3E8D6}
.il-en{--c:#3D5BD6;--clair:#B9C8FF;--ombre:#C9D3F5}
.il-ma{--c:#E8590C;--clair:#FFD2B8;--ombre:#F3D6C6}
.il-dic{--c:#8A4FD0;--clair:#DCC6FA;--ombre:#E2D6F2}
.il-cj{--c:#E07B12;--clair:#FFD7A8;--ombre:#F3DCC2}
.il-ho{--c:#C2410C;--clair:#FFE3A3;--ombre:#F3E2B8}
.il-mo{--c:#2EA8AE;--clair:#B5EEF2;--ombre:#C8E6EA}
.il-fra{--c:#C2255C;--clair:#FFC9DE;--ombre:#F3D3DF}
.il-tab{--c:#1C7ED6;--clair:#BFDFFF;--ombre:#CBDDF0}
.il-cal{--c:#5F3DC4;--clair:#D0BFFF;--ombre:#DCD3F2}
.il-calc{--c:#0C8599;--clair:#B2F2F7;--ombre:#C5E6EA}
.il-pb{--c:#B35C00;--clair:#FFE0B2;--ombre:#F2DCC4}
/* 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 #DFE2F6;background:#fff;border-radius:999px;padding:12px 20px;font:inherit;font-weight:700;font-size:16px;color:var(--encre);cursor:pointer}
.il-fond{--doux:#4B4A7A;position:fixed;inset:0;background:rgba(31,29,92,.6);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 #ECEEFB}
.il-notice li>span{font-size:24px;line-height:1.2;flex:none}
.il-notice li b{display:block}
.il-notice a{color:#3A3A9E}
.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:#ECEEFB;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:96px}
  .il-ciel{padding:22px 16px 96px}
}
@media (prefers-reduced-motion:reduce){.il-fumee,.il-dino{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}

/* ---------- le dino-parc (collection de dinos commune aux applis CE1) ---------- */
.il-parc{display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;background:linear-gradient(135deg,#3A3A9E,#2B2878);
  border-radius:22px;padding:12px 18px;margin:0 0 22px;box-shadow:0 6px 0 #1F1D5C,0 14px 26px rgba(31,29,92,.18)}
.il-parc .dn-img{width:84px;margin:0;flex:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.il-parc-oeuf{font-size:54px;line-height:1;flex:none}
.il-parc-txt{flex:1;min-width:0}
.il-parc-txt b{display:block;font-family:"Baloo 2",Quicksand,sans-serif;font-size:22px;line-height:1.15}
.il-parc-txt span{display:block;color:#DCE6FF;font-size:15px}
.il-parc-fl{font-size:28px;color:#FFC83D}
.il-parc-zone{background:#fff;border-radius:24px;padding:16px;box-shadow:0 6px 0 #DFE2F6}
.il-parc-ou{color:#4B4A7A;text-align:center;margin:16px 4px}