/* ================================================================
   PROFILS.CSS — mise en page de l'espace famille (ex apercu-profils.html)
   Reprise de la maquette, recolorée dans la charte de l'Accueil :
   fond ardoise du site, parent violet, enfants aux couleurs du site,
   Anglais teal, Espagnol rouge, Techno orange.
   ================================================================ */
body.app-profils{
  --bg: transparent;
  --surface:#353535; --surface-2:#424242;
  --ink:#FAF7EF; --muted:#cfc9b8; --border:#5a5a5a;
  --accent:#D1071F; --accent-ink:#ffffff;
  --gold:#EFC900; --gold-bg:#3a3000;
  --teal:#43AFCF; --teal-bg:#0d3340;
  --parent-a:#B56CC6; --parent-b:#7E3A92;
  --child-a:#F79A45;  --child-b:#D9690B;   /* orange */
  --child2-a:#6CC870; --child2-b:#3A9A3E;  /* vert */
  --child3-a:#F5D63A; --child3-b:#CDA900;  /* jaune */
  --child4-a:#EF4B5E; --child4-b:#B3061B;  /* rouge */
  --child5-a:#6CC6E2; --child5-b:#2E93B4;  /* bleu */
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.55);
  --shadow-lg: 0 18px 44px -18px rgba(0,0,0,.65);
  color:var(--ink);
}
body.app-profils .stage{ margin:0 auto; }
  body.with-bar .stage{ padding-top:90px; }

  /* Bandeau figé : profil en cours (enfant, ou parent), visible même en
     scrollant, dès qu'on est entré dans un profil. Grille à 3 colonnes pour
     garder l'identité centrée, avec un bouton de navigation optionnel de
     chaque côté (gauche : retour aux profils ; droite : retour aux matières,
     seulement au-delà de l'écran des matières). */
  /* Bandeau unique, 1.5x plus haut que la version d'origine, format
     prénom → image de la matière en cours → bouton "Matières". */
  .profile-bar{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:grid; grid-template-columns:minmax(80px,auto) 1fr minmax(80px,auto);
    align-items:center; gap:10px;
    padding:9px 16px;
    background:linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2));
    color:var(--card-ink);
    box-shadow:var(--shadow);
  }
  .bar-id{ display:flex; align-items:center; gap:12px; justify-self:center; min-width:0; }
  /* Quand une matière est affichée, le drapeau/pictogramme doit rester
     ancré au centre du bandeau même si le nom du cours (texte à droite)
     rallonge le libellé. On bascule alors bar-id en grille à 3 colonnes
     (prénom | icône | libellé) : l'icône occupe une colonne "auto" tou-
     jours au milieu, les deux textes s'étendent chacun de leur côté sans
     jamais la déplacer. */
  .bar-id.with-subject{
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center; column-gap:12px; justify-self:stretch; width:100%;
  }
  .bar-id.with-subject .bar-name{ justify-self:end; }
  .bar-id.with-subject .bar-subject{ justify-self:center; }
  .bar-id.with-subject .bar-subject-label{ justify-self:start; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .bar-name{ font-family:'Baloo 2', 'Segoe UI', sans-serif; font-weight:700; font-size:1.3rem; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Icône + nom de la matière (et, le cas échéant, du cours) en cours,
     juste après le prénom — format demandé : prénom → icône matière + nom
     → bouton "Matières". Icône et texte sont des enfants directs de bar-id
     (pas de sous-groupe imbriqué) pour que tout reste centré sur la même
     ligne, sans décalage de niveau. */
  .bar-subject{ width:29px; height:29px; border-radius:8px; overflow:hidden; flex-shrink:0; box-shadow:0 0 0 1px rgba(255,255,255,.18) inset; }
  .bar-subject svg{ width:100%; height:100%; display:block; }
  .bar-subject-label{ font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:1.06rem; white-space:nowrap; line-height:1; }
  .bar-extra{ font-family:'Nunito Sans', sans-serif; font-weight:600; font-size:.98rem; line-height:1; opacity:.92; white-space:nowrap; }
  .bar-extra .sep{ opacity:.6; font-weight:600; margin:0 .45em 0 .5em; }

  .bar-nav{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:.92rem;
    color:var(--card-ink); background:rgba(255,255,255,.34);
    border:1.5px solid rgba(255,255,255,.4); border-radius:10px;
    padding:5.5px 14px; cursor:pointer; white-space:nowrap;
    box-shadow:0 1px 3px rgba(0,0,0,.15);
    transition:background .15s ease, transform .15s ease;
  }
  .bar-nav:hover{ background:rgba(255,255,255,.48); }
  .bar-nav:active{ transform:scale(.96); }
  .bar-nav:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
  .bar-nav-left{ justify-self:start; }
  .bar-nav-right{ justify-self:end; }
  .bar-nav-spacer{ visibility:hidden; }
  @media (max-width:480px){ .bar-nav-label{ display:none; } .bar-nav{ padding:8px; } .bar-extra, .bar-subject-label{ display:none; } }

  .screen h1{
    font-family:'Baloo 2', 'Segoe UI', sans-serif;
    font-size:clamp(1.9rem, 5vw, 2.5rem);
    font-weight:800; text-wrap:balance; margin:0 0 10px; text-align:center;
  }
  .screen .lede{ color:var(--muted); font-size:1rem; max-width:44ch; margin:0 auto 40px; text-align:center; }

  /* Bouton de déconnexion "fun" : un rail à glisser vers la droite, avec
     une banane en guise de poignée — on fait glisser la banane jusqu'au
     bout du rail pour se déconnecter (aperçu : revient à sa place après
     un court instant, comme les autres actions non câblées de la maquette).
     Le rail passe progressivement du vert au rouge au fil du glissement,
     piloté par la variable --p (0 = vert, 1 = rouge) posée en JS pendant
     le drag ; @property permet à cette variable de s'animer en douceur
     (recentrage, remise à zéro). */
  @property --p{ syntax:'<number>'; inherits:true; initial-value:0; }
  .logout-slider{
    --p:0;
    position:relative; flex-shrink:0; width:216px; height:52px; border-radius:999px;
    background:linear-gradient(160deg,
      color-mix(in srgb, #E63946 calc(var(--p) * 100%), #3FAE5C),
      color-mix(in srgb, #B32635 calc(var(--p) * 100%), #2E8A48));
    box-shadow:var(--shadow); overflow:hidden; touch-action:none;
    transition:--p .32s cubic-bezier(.25,.9,.35,1.15), box-shadow .18s ease;
  }
  .logout-slider.dragging{ transition:box-shadow .18s ease; }
  .logout-slider:hover{ box-shadow:var(--shadow-lg); }
  .logout-track-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding:0 44px; font-family:'Baloo 2', 'Segoe UI', sans-serif; font-weight:700;
    font-size:.86rem; color:#fff; opacity:.92; letter-spacing:.2px;
    pointer-events:none; text-align:center; text-wrap:balance; transition:opacity .15s ease;
  }
  .logout-handle{
    position:absolute; left:4px; top:3px; width:46px; height:46px; border-radius:50%;
    background:#FFFFFF; border:none; padding:0; cursor:grab;
    display:flex; align-items:center; justify-content:center;
    line-height:1; transform:rotate(-12deg);
    box-shadow:0 3px 7px rgba(0,0,0,.32), 0 0 0 3px #FFE08A;
    transition:box-shadow .15s ease, transform .15s ease;
  }
  .logout-handle img{ width:62%; height:auto; display:block; pointer-events:none; -webkit-user-drag:none; }
  .logout-handle:active, .logout-slider.dragging .logout-handle{ cursor:grabbing; transform:rotate(-12deg) scale(1.06); box-shadow:0 2px 4px rgba(0,0,0,.32), 0 0 0 3px #FFE08A; }
  .logout-slider.dragging{ transition:none; }
  .logout-slider:not(.dragging) .logout-handle{ transition:left .32s cubic-bezier(.25,.9,.35,1.15), box-shadow .15s ease, transform .15s ease; }
  .logout-slider.done .logout-track-label{ opacity:1; }
  .logout-handle:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
  @media (max-width:480px){
    .logout-slider{ width:180px; height:48px; }
    .logout-handle{ width:42px; height:42px; }
    .logout-track-label{ font-size:.8rem; padding:0 38px; }
  }

  /* ---------------- Grille de cases (profils, matières, missions) ---------------- */
  .boxes{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:22px;
    max-width:620px;
    margin:0 auto;
  }
  .boxes[data-count="1"]{ grid-template-columns:minmax(0,220px); justify-content:center; }
  .boxes[data-count="2"]{ grid-template-columns:repeat(2, minmax(0,220px)); justify-content:center; }
  .boxes.children-row{ margin-top:26px; }
  @media (max-width:560px){
    .boxes[data-count="3"], .boxes[data-count="4"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  }

  .box-card{
    appearance:none; background:none; border:none; padding:0; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    font-family:inherit; color:inherit;
  }
  .box-card .avatar{
    width:100%; aspect-ratio:1; border-radius:26px;
    background:linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2));
    border:3px solid var(--card-border, transparent);
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow);
    outline:3px solid transparent; outline-offset:4px;
    transform:scale(1); position:relative; overflow:hidden;
    transition:transform .22s cubic-bezier(.25,.7,.35,1), box-shadow .22s ease, outline-color .22s ease;
  }
  .box-card .avatar svg{ width:34%; height:34%; color:var(--card-ink); margin-bottom:16%; }
  .box-card .avatar-name{
    position:absolute; left:0; right:0; bottom:0;
    padding:20px 8px 9px;
    font-family:'Baloo 2', 'Segoe UI', sans-serif;
    font-weight:700; font-size:.86rem; color:#fff; text-align:center; text-wrap:balance; line-height:1.15;
    background:linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
  }

  /* Cases "matière" : le visuel remplit toute la case (drapeau, illustration),
     avec un léger reflet en diagonale pour un rendu plus vivant. */
  .box-card .avatar .avatar-media{ position:absolute; inset:0; }
  .box-card .avatar .avatar-media svg{ width:100%; height:100%; margin:0; display:block; color:var(--card-ink); }
  .box-card .avatar.flag::after, .box-card .avatar.illus::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(115deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 66%, rgba(255,255,255,.22) 100%);
    mix-blend-mode:overlay;
  }

  /* Classes "tint" : ne posent QUE les variables --card-* (réutilisables sur
     le panneau de bienvenue, le bandeau et les cartes profs, qui n'ont pas la
     mise en page flex des box-card). */
  .box-card.parent, .tint-parent{ --card-bg-1:var(--parent-a); --card-bg-2:var(--parent-b); --card-ink:#F3F6F5; --card-glow:var(--parent-a); }
  .box-card.child, .tint-child{ --card-bg-1:var(--child-a); --card-bg-2:var(--child-b); --card-ink:#3B2A12; --card-glow:var(--child-a); }
  .box-card.child[data-tint="child2"], .tint-child2{ --card-bg-1:var(--child2-a); --card-bg-2:var(--child2-b); --card-ink:#3B1428; --card-glow:var(--child2-a); }
  .box-card.child[data-tint="child3"], .tint-child3{ --card-bg-1:var(--child3-a); --card-bg-2:var(--child3-b); --card-ink:#0E2E2E; --card-glow:var(--child3-a); }
  .box-card.child[data-tint="child4"], .tint-child4{ --card-bg-1:var(--child4-a); --card-bg-2:var(--child4-b); --card-ink:#3D0E0E; --card-glow:var(--child4-a); }
  .box-card.child[data-tint="child5"], .tint-child5{ --card-bg-1:var(--child5-a); --card-bg-2:var(--child5-b); --card-ink:#221A4A; --card-glow:var(--child5-a); }
  .box-card.subject-anglais, .tint-anglais{ --card-bg-1:color-mix(in srgb, var(--teal) 88%, white 0%); --card-bg-2:color-mix(in srgb, var(--teal) 60%, black 12%); --card-ink:var(--teal-bg); --card-glow:var(--teal); }
  .box-card.subject-espagnol, .tint-espagnol{ --card-bg-1:color-mix(in srgb, var(--accent) 85%, white 6%); --card-bg-2:color-mix(in srgb, var(--accent) 60%, black 10%); --card-ink:#3A140A; --card-glow:var(--accent); }
  .box-card.subject-techno, .tint-techno{ --card-bg-1:#FFFFFF; --card-bg-2:#F6F2FB; --card-ink:#4A3580; --card-glow:#6B4FA0; --card-border:#6B4FA0; }

  .box-card:hover .avatar, .box-card:focus-visible .avatar{
    transform:scale(1.08);
    outline-color:var(--card-glow);
    box-shadow:var(--shadow-lg), 0 0 0 7px color-mix(in srgb, var(--card-glow) 22%, transparent);
  }
  .box-card:focus-visible{ outline:none; }
  .box-card:active .avatar{ transform:scale(1.03); }

  /* Case verrouillée — mission pas encore débloquée (séances manquantes,
     ou contenu bonus payant). Grisée, non cliquable. */
  .box-card.locked{ --card-bg-1:var(--surface-2); --card-bg-2:var(--border); --card-ink:var(--muted); --card-glow:var(--muted); cursor:default; }
  .box-card.locked .avatar{ filter:saturate(.5) brightness(.92); }
  .box-card.locked:hover .avatar, .box-card.locked:focus-visible .avatar{ transform:none; outline-color:transparent; box-shadow:var(--shadow); }
  .box-card.locked .avatar-name{ color:var(--muted); }

  .boxes.choosing .box-card:not(.selected) .avatar{ transform:scale(.94); filter:saturate(.55) brightness(.85); }
  .boxes.choosing .box-card.selected .avatar{
    transform:scale(1.14);
    outline-color:var(--card-glow);
    box-shadow:var(--shadow-lg), 0 0 0 9px color-mix(in srgb, var(--card-glow) 30%, transparent), 0 0 34px 4px color-mix(in srgb, var(--card-glow) 45%, transparent);
    animation:selectPulse .5s ease-out;
  }
  @keyframes selectPulse{
    0%{ box-shadow:var(--shadow), 0 0 0 0 color-mix(in srgb, var(--card-glow) 55%, transparent); }
    60%{ box-shadow:var(--shadow-lg), 0 0 0 14px color-mix(in srgb, var(--card-glow) 0%, transparent), 0 0 40px 10px color-mix(in srgb, var(--card-glow) 55%, transparent); }
    100%{ box-shadow:var(--shadow-lg), 0 0 0 9px color-mix(in srgb, var(--card-glow) 30%, transparent), 0 0 34px 4px color-mix(in srgb, var(--card-glow) 45%, transparent); }
  }

  .box-card .role{ font-size:.78rem; color:var(--muted); text-align:center; }

  .manage-row{ margin-top:46px; text-align:center; }
  .manage{
    font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:.85rem; color:var(--muted);
    background:var(--surface); border:1.5px solid var(--border); border-radius:11px; padding:10px 18px; cursor:pointer;
    transition:filter .15s ease, transform .15s ease;
  }
  .manage:hover{ filter:brightness(.97); }
  .manage:active{ transform:scale(.98); }
  .manage:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

  /* ---------------- Panneau (bienvenue / récap / mission) ---------------- */
  #panel{ display:none; }
  #panel.show{ display:block; background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); padding:34px 30px; animation:panelIn .38s cubic-bezier(.22,.8,.32,1) both; }
  @keyframes panelIn{ 0%{ opacity:0; transform:translateY(10px) scale(.985); } 100%{ opacity:1; transform:translateY(0) scale(1); } }

  .panel-head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
  .panel-head .avatar-sm{
    width:56px; height:56px; border-radius:16px;
    background:linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2));
    display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow);
  }
  .panel-head .avatar-sm svg{ width:44%; height:44%; color:var(--card-ink); }
  .panel-head h2{ font-family:'Baloo 2', 'Segoe UI', sans-serif; font-size:1.4rem; font-weight:800; margin:0 0 2px; text-wrap:balance; }
  .panel-head .sub{ color:var(--muted); font-size:.88rem; }

  .panel-body p{ margin:0 0 14px; color:var(--ink); }
  .panel-body ul{ margin:0 0 14px; padding-left:1.2em; color:var(--ink); }
  .panel-body li{ margin-bottom:4px; }
  .panel-body .tag{
    display:inline-block; font-family:'JetBrains Mono', monospace; font-size:.72rem; font-weight:600;
    background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:2px 7px; color:var(--muted);
  }

  /* Onglets du panneau parent (Inscriptions / Factures / Boutique / Infos utiles) */
  .panel-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .tab-btn{
    font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:.82rem; color:var(--muted);
    background:var(--surface-2); border:1.5px solid var(--border); border-radius:10px; padding:8px 14px; cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .tab-btn:hover{ color:var(--ink); }
  .tab-btn.active{ background:var(--card-glow, var(--accent)); border-color:transparent; color:var(--card-ink, #fff); }
  .tab-btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }

  .bill-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
  .bill-row:last-child{ border-bottom:none; }
  .bill-name{ font-weight:700; flex:0 0 auto; min-width:88px; }
  .bill-status{
    font-family:'JetBrains Mono', monospace; font-size:.74rem; color:var(--muted);
    background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:3px 8px;
  }
  .mini-cta{
    margin-left:auto; font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:.76rem; color:var(--muted);
    background:none; border:1.5px solid var(--border); border-radius:8px; padding:6px 10px; cursor:default; opacity:.75;
  }

  .prof-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
  .prof-card{
    display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px;
    background:linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2)); color:var(--card-ink); box-shadow:var(--shadow);
  }
  .prof-media{ width:42px; height:42px; border-radius:11px; overflow:hidden; flex-shrink:0; position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.15) inset; }
  .prof-media svg{ width:100%; height:100%; display:block; }
  .prof-info{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
  .prof-info strong{ font-family:'Baloo 2', sans-serif; font-size:.92rem; }
  .prof-info span{ font-size:.76rem; opacity:.85; }
  .prof-photo{
    width:48px; height:48px; border-radius:50%; flex-shrink:0; overflow:hidden;
    background:color-mix(in srgb, var(--card-ink) 12%, var(--card-bg-2));
    border:2px solid color-mix(in srgb, var(--card-ink) 30%, transparent);
    display:flex; align-items:center; justify-content:center;
  }
  .prof-photo img{ width:100%; height:100%; display:block; object-fit:cover; }
  .prof-photo svg{ width:60%; height:60%; display:block; color:var(--card-ink); opacity:.6; }
  .prof-card .mini-cta{ color:var(--card-ink); border-color:color-mix(in srgb, var(--card-ink) 35%, transparent); margin-left:0; }

  .cta-row{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px; }
  button.primary-cta{
    font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:.9rem;
    color:var(--card-ink, var(--accent-ink)); background:var(--card-glow, var(--accent));
    border:none; border-radius:11px; padding:11px 20px; cursor:pointer; box-shadow:var(--shadow);
    transition:filter .15s ease, transform .15s ease;
  }
  button.primary-cta:hover{ filter:brightness(1.05); }
  button.primary-cta:active{ transform:scale(.98); }

  button.switch{
    font-family:'Nunito Sans', sans-serif; font-weight:700; font-size:.85rem; color:var(--muted);
    background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:4px;
  }
  button.switch:hover{ color:var(--ink); }
  button.switch:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }

  footer.note{ margin-top:40px; color:var(--muted); font-size:.8rem; text-align:center; }

  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- adaptations à la charte du site ---------- */
body.app-profils .stage{ max-width:820px; padding:0 18px 70px; margin:-20px auto 0; }
body.app-profils.with-bar .stage{ padding-top:24px; }
.profile-bar{ position:sticky; top:0; }
.screen h1{ color:#fff; }
.box-card.child, .tint-child{ --card-ink:#3a1d00; }
.box-card.child[data-tint="child2"], .tint-child2{ --card-ink:#0f2e10; }
.box-card.child[data-tint="child3"], .tint-child3{ --card-ink:#3a3000; }
.box-card.child[data-tint="child4"], .tint-child4{ --card-ink:#ffffff; }
.box-card.child[data-tint="child5"], .tint-child5{ --card-ink:#06303f; }
.box-card.subject-techno, .tint-techno{ --card-bg-1:#F79A45; --card-bg-2:#D9690B; --card-ink:#3a1d00; --card-glow:#F27B13; --card-border:#F27B13; }

/* Ligne "Qui est-ce ?" + déconnexion (remplace l'ancien bandeau de marque) */
.who-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:30px; }
.who-head h1{ margin:0 !important; text-align:left !important; }
@media (max-width:640px){ .who-head{ justify-content:center; } .who-head h1{ text-align:center !important; } }

/* Écran de connexion */
#screen-login .ma-card{ max-width:460px; margin:0 auto; }

/* Encadrés enfants dans le profil famille */
#panel .kids-grid{ margin-top:6px; }
#panel .panel-body .kid-line{ border-top-color: rgba(255,255,255,.18); }

.manage-row a.manage{ text-decoration:none; display:inline-block; }
#panel a.mini-cta{ display:inline-block; text-decoration:none; }
/* lien « + Ajouter un enfant ou une matière » : même bouton que la charte (jaune) */
#panel a.primary-cta{ display:inline-block; text-decoration:none; background: var(--yellow); color: var(--chalk);
  font-family:'Nunito Sans', sans-serif; font-weight:800; border-radius:24px; padding:11px 22px; box-shadow:0 3px 8px rgba(0,0,0,.25); }
#panel a.primary-cta:hover{ background: var(--teal, #43AFCF); color:#fff; }
.manage-row a.manage{ background: var(--yellow); color: var(--chalk); font-weight:800; }

/* Infos utiles : photo ronde du prof + e-mail */
.prof-card .avatar-rond{ border-color:#fff; filter:brightness(.92) saturate(1.1); }
.prof-mail-link{ color: var(--card-ink, #fff); font-weight:700; text-decoration:underline; font-size:.88rem; word-break:break-all; text-decoration:none; }
.prof-mail-link:hover{ text-decoration:underline; }

/* Barre de profil : même largeur que l'encadré en dessous, collée sous le menu figé */
body.app-profils .profile-bar{
  position:sticky; top:calc(var(--nav-h, 68px) + var(--band-h, 72px)); left:auto; right:auto;
  width:min(784px, calc(100% - 36px)); margin:0 auto; border-radius:14px; z-index:130;
}
body.app-profils.with-bar .stage{ padding-top:16px; }

/* Code PIN du compte parent */
.pin-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:200; display:flex; align-items:center; justify-content:center; padding:16px; }
.pin-box{ background:#2f2f2f; border:2px solid rgba(255,255,255,.15); border-radius:18px; padding:24px 26px; text-align:center; color: var(--ink); width:100%; max-width:360px; }
.pin-box h2{ font-family:'Baloo 2', cursive; color: var(--yellow, #EFC900); font-size:1.5rem; margin-bottom:4px; }
.pin-digits{ display:flex; justify-content:center; gap:12px; margin:16px 0 6px; }
.pin-digits input{ width:52px; height:60px; text-align:center; font-size:1.8rem; font-weight:800; border-radius:12px; border:none; background:#fff; color:#3a3a3a; }
.pin-digits input:focus{ outline:3px solid var(--yellow, #EFC900); }
.pin-note{ font-size:.78rem; opacity:.7; margin-top:6px; }
.pin-box.shake{ animation:pin-shake .35s; }
@keyframes pin-shake{ 20%,60%{ transform:translateX(-8px); } 40%,80%{ transform:translateX(8px); } }
#headSub:empty{ display:none; }
/* 20/10 : bandeau violet 1,5 fois plus haut (même largeur que l'encadré) */
body.app-profils .profile-bar{ min-height:58px; padding-top:12px; padding-bottom:12px; }
body.app-profils .bar-name{ font-size:1.6rem; }
body.app-profils .bar-extra{ font-size:1.12rem; }

/* Mur des réussites : box de cours */
.box-card .avatar .box-emoji{ font-size:3.2rem; line-height:1; margin-bottom:18%; }
.box-card.reussie .avatar{ outline:3px solid #F4C542; outline-offset:3px; }
.box-card .box-ok{ position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:#3FAE5C; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.panel-head .box-emoji-sm{ font-size:1.9rem; }
/* lecteur de mission */
.c-trail{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.c-etape{ display:grid; grid-template-columns:46px 1fr; gap:14px; }
.c-node{ width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800;
  background:var(--surface-2, #313D33); border:1.5px solid var(--border, #3F4C40); }
.c-etape.active .c-node{ border-color:var(--yellow, #EFC900); box-shadow:0 0 0 5px rgba(239,201,0,.18); }
.c-etape.done .c-node{ background:#3FAE5C; border-color:#3FAE5C; color:#fff; }
.c-card{ background:rgba(255,255,255,.05); border:1px solid var(--border, #3F4C40); border-radius:16px; padding:14px 16px; }
.c-etape.locked .c-card{ opacity:.5; }
.c-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.c-head h3{ font-family:'Baloo 2', cursive; font-size:1.1rem; margin:0; }
.c-head span{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.c-etape.done .c-head span{ color:#8BE38F; opacity:1; }
.c-texte{ margin:10px 0; }
.c-lien{ display:inline-block; text-decoration:none; }
.c-video{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; margin:10px 0; background:#000; }
.c-video iframe, .c-video video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.c-vide{ opacity:.7; font-size:.9rem; margin:10px 0; }
.c-q{ margin:12px 0; } .c-q p{ font-weight:700; margin:0 0 6px; }
.c-q label{ display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:6px; border:1.5px solid var(--border, #3F4C40); border-radius:10px; cursor:pointer; }
.c-q label:hover{ border-color:var(--yellow, #EFC900); }
.c-q label.bon{ border-color:#3FAE5C; background:rgba(63,174,92,.15); }
.c-q label.faux{ border-color:#D1071F; background:rgba(209,7,31,.12); }
.c-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.c-fb{ font-weight:800; margin-top:8px; min-height:1.2em; } .c-fb.ok{ color:#8BE38F; } .c-fb.retry{ color:#FFB74D; }
.c-coffre{ text-align:center; padding:20px; border-radius:18px; border:1px solid var(--border, #3F4C40); }
.c-coffre.open{ border-color:#F4C542; background:linear-gradient(160deg, rgba(244,197,66,.18), transparent); }
.c-coffre-ic{ font-size:2.4rem; } .c-coffre h3{ font-family:'Baloo 2', cursive; margin:4px 0; }
.panel-head-simple{ margin-bottom:14px; }
/* cases profils : texte plus grand, icône au choix */
.box-card .avatar-name{ font-size:1.25rem !important; padding:26px 8px 12px !important; }
.box-card .avatar .box-emoji{ font-size:4.2rem; line-height:1; margin-bottom:22%; filter:drop-shadow(0 3px 4px rgba(0,0,0,.3)); }
.icone-box{ max-width:560px; max-height:88vh; overflow:auto; }
.ic-cat{ font-family:'Baloo 2', cursive; color:var(--yellow, #EFC900); font-size:1.05rem; margin:12px 0 6px; text-align:left; }
.ic-grille{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
.ic-choix{ font-size:2rem; line-height:1; padding:8px 0; border-radius:12px; border:2px solid transparent; background:rgba(255,255,255,.08); cursor:pointer; }
.ic-choix:hover{ border-color:var(--yellow, #EFC900); transform:scale(1.08); }
.ic-btn{ font-size:.8rem; margin-left:8px; }
.kid-ic{ font-size:1.4rem; }
/* 🎨 dans la case, à gauche du nom */
.box-card .avatar-name{ display:flex; align-items:center; justify-content:center; gap:8px; }
.ic-mini{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.9);
  font-size:.95rem; box-shadow:0 2px 5px rgba(0,0,0,.35); cursor:pointer; flex-shrink:0; transition:transform .15s; }
.ic-mini:hover, .ic-mini:focus-visible{ transform:scale(1.15); outline:2px solid #fff; }
.co-titre{ font-family:'Baloo 2', cursive; font-size:1.1rem; margin:14px 0 6px; } .co-titre small{ opacity:.7; font-size:.8rem; }
#f-coord .form-row{ display:flex; gap:12px; flex-wrap:wrap; } #f-coord .form-row .form-field{ flex:1; min-width:180px; }
#f-coord input, #f-coord select{ width:100%; padding:10px 12px; border-radius:10px; border:none; font:inherit; color:#3a3a3a; }
#f-coord input:disabled{ background:#d9d9d9; }
#f-coord .form-field{ margin-bottom:10px; } #f-coord label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:4px; }

/* ---------- haut du mur : « Accès au cours » (la grande) + ateliers exceptionnels ---------- */
.wall-top{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:18px; max-width:760px; margin:0 auto 26px; }
.acces-cours{ appearance:none; border:3px solid var(--card-border, transparent); cursor:pointer; font-family:inherit; width:250px; aspect-ratio:1; border-radius:28px;
  background:linear-gradient(160deg, var(--card-bg-1), var(--card-bg-2)); color:var(--card-ink); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px; transition:transform .2s; }
.acces-cours:hover{ transform:scale(1.05); }
.acces-cours .ac-em{ font-size:3.6rem; line-height:1; } .acces-cours .ac-t{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.45rem; }
.acces-cours .ac-h{ font-size:.85rem; font-weight:700; text-align:center; opacity:.9; }
.ev-box{ position:relative; width:180px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.ev-av{ position:relative; overflow:hidden; width:100%; aspect-ratio:1; border-radius:24px; background:linear-gradient(160deg, #F731AA, #b81d7c); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:10px; box-shadow:var(--shadow); text-align:center; }
.ev-em{ font-size:2.8rem; line-height:1; } .ev-nom{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1rem; line-height:1.1; } .ev-date{ font-size:.78rem; font-weight:700; opacity:.92; }
.ev-desc{ font-size:.85rem; opacity:.9; text-align:center; }
.ev-diag{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-32deg); font-family:'Baloo 2', sans-serif; font-weight:900; font-size:1.7rem;
  padding:2px 60px; letter-spacing:.06em; white-space:nowrap; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.ev-diag.rouge{ background:#E02013; color:#fff; } .ev-diag.vert{ background:#3BAA3B; color:#fff; }
.ev-box.et-annule .ev-av{ background:linear-gradient(160deg, #9a9a9a, #6d6d6d); }
.ev-box.et-annule .ev-em{ filter:grayscale(1); }
.ev-box.et-annule .ev-av > :not(.ev-diag){ opacity:.55; } .ev-box.et-annule .ev-diag{ filter:none; }
.ev-box.et-jyetais .ev-av{ opacity:.6; }
.ev-jy{ appearance:none; border:none; cursor:pointer; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.05rem; color:#3a2a00; background:#E8BF24;
  border-radius:999px; padding:8px 18px; box-shadow:0 4px 0 #b08c10, 0 6px 12px rgba(0,0,0,.35); animation:jyHop 1.6s ease-in-out infinite; margin-top:-30px; position:relative; z-index:2; }
.ev-jy:hover{ background:#ffd23a; }
@keyframes jyHop{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-5px) rotate(2deg); } }
.confetti{ position:absolute; top:40%; width:9px; height:14px; border-radius:2px; pointer-events:none; z-index:5; animation:confetti .9s ease-out forwards; }
@keyframes confetti{ to{ transform:translate(var(--dx), var(--dy)) rotate(var(--r)); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .ev-jy{ animation:none; } }
@media (max-width:560px){ .acces-cours{ width:200px; } .ev-box{ width:150px; } }
/* Infos utiles & Contact : qui contacter ? */
.qui-contacter{ margin-top:18px; padding:12px 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.25); }
.qui-contacter h3{ margin:0 0 6px; font-size:1.05rem; }
.qui-contacter ul{ margin:0; padding-left:18px; } .qui-contacter li{ margin:4px 0; font-size:.92rem; }
.qui-contacter a{ color:var(--yellow, #EFC900); }
/* code parent */
.pin-etape{ margin:12px 0 0; font-size:.85rem; font-weight:800; opacity:.85; }
.pin-box .pin-digits{ margin-top:6px; }
.pin-chg{ margin-top:18px; padding-top:12px; border-top:1px dashed rgba(255,255,255,.25); display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; }
.pin-chg span{ opacity:.75; font-size:.9rem; }