/* learnplay.ch — charte graphique partagée.
 *
 * Source : sources/CharteLearnPlay.png
 * Chargée par toutes les pages du site. Une couleur ou une règle de marque
 * se modifie ICI, une seule fois, jamais dans les pages.
 */

:root {
    /* Palette officielle (5 couleurs) */
    --lp-principal:     #3B2D9C;   /* bleu violet, couleur mère */
    --lp-play:          #FF5B6B;   /* corail, actions principales */
    --lp-accent:        #FFD046;   /* jaune, accents et récompenses */
    --lp-positif:       #39D1C1;   /* turquoise, réussite */
    --lp-apprentissage: #4DB3FF;   /* bleu clair, apprentissage */

    --lp-marine:        #1F2444;   /* texte */
    --lp-gris:          #636e72;   /* texte secondaire */
    --lp-fond:          #F6F8FC;   /* fond clair */

    /* Le trait tricolore, signature de la marque :
       sous le logo, en séparateur, ou en indicateur de progression. */
    --lp-trait: linear-gradient(90deg, var(--lp-apprentissage) 0%, var(--lp-accent) 50%, var(--lp-play) 100%);
}

/* ── Le trait tricolore ──
   Élément de marque disponible : séparateur ou indicateur de progression.
   Pas utilisé en en-tête, où il n'apportait rien. ── */
.lp-trait {
    height: 4px;
    border-radius: 4px;
    background: var(--lp-trait);
    width: 100%;
    max-width: 680px;
    margin: 0 auto 18px;
}

/* ── Titres en Fredoka, textes en Nunito ── */
h1, h2, h3, .lp-titre {
    font-family: 'Fredoka', 'Nunito', sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Le logo en vedette : il flotte doucement, sans distraire. */
.lp-logo {
    display: block;
    height: 128px;          /* le logo garde ses proportions naturelles */
    width: auto;
    max-width: 100%;
    margin: 0 auto 6px;
    animation: lpFlotte 3.2s ease-in-out infinite;
}
@keyframes lpFlotte {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
/* Respecte le réglage système « animations réduites ». */
@media (prefers-reduced-motion: reduce) {
    .lp-logo { animation: none; }
}



/* ── La carte au trésor ───────────────────────────────────────────────
   Le bateau avance vers les paliers au fil des parties, toutes
   applications confondues. Partagée pour que le joueur retrouve le même
   repère partout : « où j'en suis » ne doit pas dépendre du jeu ouvert. */
.lp-carte {
    background: linear-gradient(160deg, #1a3a5c 0%, #1e6fa8 60%, #26a0d0 100%);
    border-radius: 22px; padding: 16px 16px 14px; width: 100%;
    position: relative; overflow: hidden;
    box-shadow: 0 8px 30px rgba(15, 60, 100, .32);
}
.lp-carte::before {
    content: ''; position: absolute; bottom: -24px; left: -20px; right: -20px;
    height: 52px; background: rgba(255,255,255,.06); border-radius: 50%;
    animation: lpVague 4s ease-in-out infinite;
}
@keyframes lpVague { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

.lp-carte-titre { text-align:center; font-size:.68rem; font-weight:800; letter-spacing:1.4px;
                  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:14px; }
.lp-carte-piste { position:relative; height:76px; margin:0 4px; }
.lp-carte-route { position:absolute; top:28px; left:2%; right:2%; height:6px;
                  background:rgba(255,255,255,.18); border-radius:3px; }
.lp-carte-fill  { position:absolute; top:28px; left:2%; height:6px; width:0;
                  background:linear-gradient(90deg,#FFD700,#FF9F43); border-radius:3px;
                  box-shadow:0 0 12px rgba(255,215,0,.55);
                  transition:width 1.3s cubic-bezier(.34,1.1,.64,1); }
.lp-carte-bateau { position:absolute; top:0; font-size:1.5rem; transform:translateX(-50%);
                   transition:left 1.3s cubic-bezier(.34,1.1,.64,1);
                   filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); z-index:5; }
.lp-escale { position:absolute; top:16px; transform:translateX(-50%); z-index:3;
             display:flex; flex-direction:column; align-items:center; gap:3px; }
.lp-escale-ico { font-size:1.4rem; line-height:1; filter:grayscale(1); opacity:.3; transition:all .6s; }
.lp-escale-ico.atteint { filter:none; opacity:1; animation:lpEscale .55s ease; }
@keyframes lpEscale { 0%{transform:scale(0) rotate(-15deg)} 65%{transform:scale(1.3) rotate(6deg)} 100%{transform:scale(1)} }
.lp-escale-lbl { font-size:.5rem; font-weight:800; white-space:nowrap; text-align:center;
                 color:rgba(255,255,255,.4); line-height:1.3; }
.lp-escale-lbl.atteint { color:#FFD700; }
.lp-carte-objectif { margin-top:10px; text-align:center; font-size:.82rem; font-weight:800;
                     color:rgba(255,255,255,.78); background:rgba(255,255,255,.1);
                     border-radius:20px; padding:7px 14px; }
.lp-carte-objectif b { color:#FFD700; }
.lp-carte-revoir { display:block; margin:8px auto 0; background:rgba(255,255,255,.14); border:none;
                   color:rgba(255,255,255,.85); border-radius:20px; padding:6px 16px; cursor:pointer;
                   font-family:'Nunito',sans-serif; font-weight:800; font-size:.78rem; }
.lp-carte-revoir:hover { background:rgba(255,255,255,.24); color:#fff; }


/* ── L'arrivée sur l'île au trésor ────────────────────────────────────
   Jouée au dernier palier, et rejouable depuis la carte. Reprise telle
   quelle des Livrets, où elle vivait seule : elle appartient au parcours,
   pas à une application. */
#ta-modal{position:fixed;inset:0;z-index:9990;overflow:hidden;
    background:linear-gradient(180deg,#0d47a1 0%,#1976d2 22%,#42a5f5 48%,#29b6f6 56%,#0288d1 62%,#f5deb3 62%,#c8a035 100%);}
#ta-modal .ta-skip{position:absolute;top:14px;right:14px;z-index:10;background:rgba(0,0,0,.28);color:#fff;border:none;border-radius:18px;padding:6px 14px;font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;cursor:pointer;}
.ta-wave-l{position:absolute;left:0;right:0;background:rgba(255,255,255,.2);border-radius:50% 50% 0 0;}
.ta-wave-l.w1{height:20px;bottom:40%;animation:taWave 2.2s ease-in-out infinite;}
.ta-wave-l.w2{height:13px;bottom:38.5%;opacity:.55;animation:taWave 2.8s ease-in-out infinite reverse;}
@keyframes taWave{0%,100%{transform:translateY(0) scaleX(1)} 50%{transform:translateY(-6px) scaleX(1.02)}}
#ta-palm{position:absolute;right:6%;bottom:38%;font-size:5rem;z-index:2;animation:taPalmSway 2.5s ease-in-out infinite;transform-origin:bottom center;}
@keyframes taPalmSway{0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)}}
#ta-boat{position:absolute;bottom:41%;left:-20%;font-size:4rem;z-index:3;transition:left 2s cubic-bezier(.3,0,.2,1);}
#ta-char{position:absolute;bottom:38%;left:-20%;font-size:3rem;z-index:4;transition:left 1.2s ease;}
#ta-map{position:absolute;left:26%;bottom:54%;font-size:2.2rem;z-index:5;opacity:0;transform:scale(.5);transition:all .35s ease;}
#ta-map.visible{opacity:1;transform:scale(1);}
#ta-xmark{position:absolute;left:27%;bottom:38.5%;font-size:2.2rem;z-index:3;opacity:0;transform:scale(0) rotate(-20deg);transition:all .5s cubic-bezier(.34,1.5,.64,1);}
#ta-xmark.visible{opacity:1;transform:scale(1) rotate(0);}
#ta-shovel{position:absolute;left:21%;bottom:40%;font-size:3rem;z-index:5;opacity:0;transform-origin:bottom center;}
#ta-shovel.digging{opacity:1;animation:taDig .45s ease-in-out infinite;}
@keyframes taDig{0%,100%{transform:rotate(-30deg) translateY(0)} 50%{transform:rotate(25deg) translateY(-16px)}}
#ta-chest{position:absolute;left:24%;bottom:-10%;font-size:4rem;z-index:6;transition:bottom .9s cubic-bezier(.34,1.2,.64,1);}
#ta-chest.risen{bottom:38.5%;}
#ta-dolphin{position:absolute;left:22%;bottom:38%;font-size:3.5rem;z-index:7;opacity:0;transform:scale(0) translateY(0);transition:all .7s cubic-bezier(.34,1.5,.64,1);}
#ta-dolphin.out{opacity:1;transform:scale(1.2) translateY(-50px);}
.ta-sp{position:absolute;z-index:7;font-size:2rem;opacity:0;transition:opacity .4s;}
.ta-sp.pop{opacity:1;animation:taSpark 1.3s ease-in-out infinite;}
@keyframes taSpark{0%,100%{transform:scale(1) rotate(0)} 50%{transform:scale(1.5) rotate(25deg)}}
#ta-title{position:absolute;top:8%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.32);backdrop-filter:blur(3px);color:#fff;font-weight:900;font-size:1.3rem;border-radius:22px;padding:9px 20px;white-space:nowrap;max-width:90%;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;transition:opacity .35s;z-index:8;}
#ta-title.visible{opacity:1;}