/* ================================================================
   PAGES.CSS — composants communs des pages intérieures
   (FAQ, inscription, profils, contact), dans la charte de l'Accueil :
   ardoise + jaune / teal / violet / orange / rouge / vert,
   titres Baloo 2, texte Nunito Sans. Complète style.css, ne le remplace pas.
   ================================================================ */

/* Pages sans bandeau des félicitations */
[hidden]{ display:none !important; }

body.no-banner{ padding-bottom:0; }
body.no-banner #coco{ --cc-banniere:0px; }

/* Bandeau "Mode démo" */
.demo-banner{
  background: var(--yellow); color: var(--chalk);
  text-align:center; font-size:.85rem; padding:7px 14px; border-bottom:3px solid #C99A00;
}

/* Lien actif dans le menu, bouton Connexion */
.nav-links a.active{ background: rgba(0,0,0,.18); }

/* ---------- Boutons ---------- */
.btn-cta, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Nunito Sans', sans-serif; font-weight:800; font-size:1.05rem;
  border-radius:24px; padding:12px 26px; cursor:pointer; text-decoration:none;
  transition: transform .15s ease, background-color .2s ease, color .2s ease;
}
.btn-cta{ background: var(--yellow); color: var(--chalk); border:none; box-shadow:0 3px 8px rgba(0,0,0,.25); }
.btn-cta:hover{ background: var(--teal); color:#fff; transform: translateY(-1px); }
.btn-cta[disabled]{ opacity:.6; cursor:wait; transform:none; }
.btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.55); }
.btn-ghost:hover{ border-color: var(--yellow); color: var(--yellow); }
.btn-link{ background:none; border:none; color: var(--yellow); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; padding:0; }
.btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

/* CTA inscription dans "Rejoins l'aventure" (Accueil) */
.adventure-cta{ margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- Carte ardoise (même style que le formulaire de contact) ---------- */
.ma-card{
  background: rgba(0,0,0,.28);
  border: 2px solid rgba(255,255,255,.15);
  border-radius:18px;
  padding: 26px 26px 22px;
  text-align:left;
  color: var(--cream);
  margin-bottom:22px;
}
.ma-card h2{ font-family:'Baloo 2', cursive; color: var(--yellow); font-size:1.45rem; margin-bottom:4px; text-align:left; }
.ma-card .hint{ color: var(--cream); opacity:.8; font-size:.9rem; margin-bottom:16px; }
.ma-narrow{ max-width:680px; margin: -30px auto 60px; }

/* Champs supplémentaires (style.css ne couvre que texte/email/tel/textarea) */
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input[type="search"],
.form-field input[type="date"],
.form-field input[type="time"],
.form-field select{
  width:100%; padding:11px 14px; border-radius:10px; border:none; background:#fff;
  font-family:'Nunito Sans', sans-serif; font-size:.95rem; color: var(--chalk);
}
.form-field input[readonly]{ background:#e9e6dc; }
.form-field select:focus, .form-field input:focus{ outline:3px solid var(--yellow); }
.req::after{ content:" *"; color: var(--yellow); }
.row3{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:10px; }

/* Choix en cartes blanches (radio / case à cocher) */
.choice{
  display:flex; gap:10px; align-items:flex-start; background:#fff; color: var(--chalk);
  border-radius:14px; padding:11px 14px; margin-top:8px; cursor:pointer; border:3px solid transparent;
  font-size:.92rem; line-height:1.35;
}
.choice:has(input:checked){ border-color: var(--teal); background:#eaf7fb; }
.choice input{ margin-top:3px; flex-shrink:0; accent-color: var(--teal); width:17px; height:17px; }
.choice .t{ font-weight:800; display:block; }
.choice .d{ font-size:.82rem; opacity:.75; display:block; margin-top:2px; }

/* Sélecteur de matière : 3 grosses tuiles */
.matiere-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.matiere-tile{
  border:3px solid rgba(255,255,255,.25); border-radius:14px; padding:14px 8px; text-align:center;
  font-family:'Baloo 2', cursive; font-weight:700; font-size:1.15rem; color:#fff; cursor:pointer; background: rgba(255,255,255,.06);
}
.matiere-tile[data-m="anglais"]{ border-color: var(--teal); }
.matiere-tile[data-m="espagnol"]{ border-color: var(--red); }
.matiere-tile[data-m="techno"]{ border-color: var(--orange); }
.matiere-tile.active[data-m="anglais"]{ background: var(--teal); }
.matiere-tile.active[data-m="espagnol"]{ background: var(--red); }
.matiere-tile.active[data-m="techno"]{ background: var(--orange); }

/* Encadré d'info */
.note-box{
  display:flex; gap:10px; align-items:flex-start; border:2px dashed rgba(255,255,255,.35); border-radius:12px;
  padding:11px 14px; margin-top:14px; font-size:.88rem; line-height:1.45; color: var(--cream);
}

/* Prix */
.pricebox{ background: var(--yellow); color: var(--chalk); border-radius:14px; padding:14px 16px; margin-top:14px; }
.pricebox .line{ display:flex; justify-content:space-between; font-size:.95rem; padding:2px 0; }
.pricebox .line.total{ font-family:'Baloo 2', cursive; font-weight:800; font-size:1.2rem; border-top:2px solid rgba(0,0,0,.2); margin-top:6px; padding-top:6px; }
.pricebox .small{ font-size:.8rem; opacity:.8; margin-top:4px; }

/* Engagements */
.engagement .choice{ font-weight:400; }

/* Messages */
.msg{ display:none; border-radius:12px; padding:11px 14px; font-size:.9rem; margin-top:14px; line-height:1.45; }
.msg.show{ display:block; }
.msg.err{ background: rgba(209,7,31,.18); border:2px solid var(--red); color:#fff; }
.msg.ok{ background: rgba(76,175,80,.2); border:2px solid var(--green); color:#fff; }

/* Signature */
.sig-tabs{ display:flex; gap:8px; margin-top:6px; }
.sig-tab{ flex:1; padding:9px; border-radius:10px; border:2px solid rgba(255,255,255,.3); background:transparent; color:#fff; font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; }
.sig-tab.active{ background: var(--teal); border-color: var(--teal); }
.sig-canvas{ width:100%; height:150px; background:#fff; border-radius:12px; margin-top:10px; touch-action:none; display:block; cursor:crosshair; }
.sig-upload{ display:flex; flex-direction:column; align-items:center; gap:8px; background:#fff; color: var(--chalk); border-radius:12px; padding:18px; margin-top:10px; cursor:pointer; font-weight:700; font-size:.88rem; }
.sig-upload img{ max-width:240px; max-height:100px; display:none; }

/* ---------- Statuts (Essai / En attente / Inscrit) ---------- */
.statut{ display:inline-block; font-weight:800; font-size:.78rem; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.statut.st-essai{ background: var(--purple); color:#fff; }
.statut.st-attente{ background: var(--orange); color:#fff; }
.statut.st-inscrit{ background: var(--green); color:#fff; }

/* ---------- Encadré par enfant (profil famille / inscription) ---------- */
.kids-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
/* même ordre de couleurs que les cases enfants de la page profils */
.kid-box{
  position:relative; background: rgba(255,255,255,.08); border:3px solid var(--orange); border-radius:16px; padding:16px 16px 10px;
}
.kid-box:nth-child(5n+2){ border-color: var(--green); }
.kid-box:nth-child(5n+3){ border-color: var(--yellow); }
.kid-box:nth-child(5n+4){ border-color: var(--red); }
.kid-box:nth-child(5n+5){ border-color: var(--teal); }
.kid-box h3{ font-family:'Baloo 2', cursive; font-size:1.35rem; color:#fff; margin-bottom:2px; }
.kid-box .kid-meta{ font-size:.8rem; opacity:.75; margin-bottom:10px; }
.kid-line{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed rgba(255,255,255,.25); }
.kid-line .mat{ font-weight:800; }
.kid-line .mat small{ display:block; font-weight:400; opacity:.75; font-size:.78rem; }
.kid-empty{ text-align:center; padding:26px 16px; border:2px dashed rgba(255,255,255,.3); border-radius:14px; opacity:.85; }

/* ---------- FAQ ---------- */
.faq-tools{ max-width:820px; margin:-20px auto 18px; }
.faq-search{ width:100%; padding:13px 18px; border-radius:999px; border:none; font:inherit; font-size:1rem; color: var(--chalk); }
.faq-search:focus{ outline:3px solid var(--yellow); }
.faq-filters{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:12px; }
.faq-filter{ border:2px solid rgba(255,255,255,.4); background:transparent; color:#fff; border-radius:999px; padding:7px 16px; font:inherit; font-weight:700; font-size:.88rem; cursor:pointer; }
.faq-filter.active{ background: var(--yellow); color: var(--chalk); border-color: var(--yellow); }
.faq-list{ max-width:820px; margin:0 auto 60px; text-align:left; }
.faq-theme{ margin-top:26px; }
.faq-theme h2{ font-family:'Baloo 2', cursive; color: var(--yellow); font-size:1.4rem; margin-bottom:10px; text-align:left; }
.faq-item{ background: rgba(0,0,0,.28); border:2px solid rgba(255,255,255,.12); border-radius:14px; margin-bottom:10px; overflow:hidden; }
.faq-item summary{ cursor:pointer; list-style:none; padding:14px 46px 14px 18px; font-weight:800; color:#fff; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:1.4rem; color: var(--yellow); }
.faq-item[open] summary::after{ content:"–"; }
.faq-item[open]{ border-color: var(--teal); }
.faq-answer{ padding:0 18px 16px; color: var(--cream); line-height:1.55; }
.faq-answer a{ color: var(--yellow); }
.faq-answer ul{ margin:6px 0 0 20px; }
.faq-tag{ display:inline-block; font-size:.7rem; font-weight:800; padding:2px 9px; border-radius:999px; margin-left:8px; vertical-align:middle; }
.faq-tag.anglais{ background: var(--teal); } .faq-tag.espagnol{ background: var(--red); } .faq-tag.technologie{ background: var(--orange); } .faq-tag.ateliers{ background: var(--purple); }
.faq-empty{ text-align:center; padding:30px; opacity:.85; }
.faq-cta{ text-align:center; margin-top:30px; }

@media (max-width:600px){
  .form-row{ flex-direction:column; gap:0; }
  .matiere-tiles{ grid-template-columns:1fr; }
  .ma-card{ padding:20px 16px; }
  .page-header-text h1{ font-size:1.9rem; }
}

/* ---------- PAGES ATELIERS (sommaire + matières) ---------- */
.atelier{ max-width:980px; margin:-20px auto 60px; text-align:left; }
.atelier .ma-card{ border-color: color-mix(in srgb, var(--mat, #fff) 55%, transparent); }
.atelier .ma-card h2{ color: var(--yellow); }
.atelier-desc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:center; }
.atelier-photo{ border-radius:16px; overflow:hidden; aspect-ratio:4/3; background: rgba(255,255,255,.06); border:3px solid var(--mat, var(--teal)); }
.atelier-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-vide{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--cream); opacity:.75; font-weight:700; font-size:.9rem; }
.photo-vide span{ font-size:3rem; }
.atelier-texte .accroche{ font-family:'Baloo 2', cursive; font-size:1.35rem; color:#fff; line-height:1.25; margin-bottom:10px; }
.atelier-texte p{ line-height:1.55; margin-bottom:10px; }
.atelier-points{ list-style:none; margin-top:6px; }
.atelier-points li{ padding:5px 0 5px 28px; position:relative; line-height:1.4; }
.atelier-points li::before{ content:"🍌"; position:absolute; left:0; top:4px; }

.niveaux-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(175px,1fr)); gap:14px; margin-top:10px; }
.niveau-carte{ background:#fff; color: var(--chalk); border-radius:14px; padding:14px 16px; border-top:6px solid var(--mat, var(--teal)); }
.niveau-carte h3{ font-family:'Baloo 2', cursive; font-size:1.25rem; margin-bottom:2px; }
.niveau-age{ font-size:.82rem; opacity:.75; margin-bottom:8px; }
.niveau-carte .prix{ font-size:.92rem; }
.niveau-carte .prix b{ font-size:1.15rem; }
.niveau-carte .prix small{ opacity:.7; }
.niveau-carte .kit{ margin-top:4px; font-weight:700; color:#b35a00; }

.edt-table{ min-width:0; }
.prof-bloc{ display:flex; gap:20px; align-items:center; margin-top:8px; }
.prof-bloc h3{ font-family:'Baloo 2', cursive; font-size:1.5rem; color:#fff; }
.prof-bloc p{ margin:4px 0 8px; line-height:1.5; }
.prof-mail{ color: var(--yellow); font-weight:700; word-break:break-all; }
.atelier-cta{ margin-top:6px; }

/* Photo ronde (aussi utilisée par gestion.css) */
.avatar-rond{ position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden;
  color:#fff; font-family:'Baloo 2', cursive; font-weight:800; flex-shrink:0; border:3px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.35); }
.avatar-rond img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Sommaire */
.ateliers-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
.atelier-card{ display:flex; flex-direction:column; background: rgba(0,0,0,.28); border:3px solid var(--mat); border-radius:18px; overflow:hidden; color: var(--cream); text-decoration:none; transition: transform .15s ease; }
.atelier-card:hover{ transform: translateY(-3px); }
.atelier-card .atelier-photo{ border:none; border-radius:0; }
.atelier-card-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.atelier-card h2{ font-family:'Baloo 2', cursive; color:#fff; font-size:1.5rem; text-align:left; margin:0; }
.atelier-card p{ line-height:1.45; }
.atelier-meta{ font-size:.85rem; opacity:.8; }
.atelier-card .btn-cta{ align-self:flex-start; margin-top:auto; }

@media (max-width:700px){
  .atelier-desc{ grid-template-columns:1fr; }
  .prof-bloc{ flex-direction:column; text-align:center; }
}

/* Emploi du temps en colonnes (pages matières) */
.edt-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; }
.edt-col h3{ font-family:'Baloo 2', cursive; color:#fff; font-size:1.3rem; text-align:center; margin-bottom:8px; }
.edt-case{ background: var(--mat, var(--teal)); color:#fff; text-align:center; padding:8px 6px; margin-bottom:8px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.edt-case b{ display:block; font-size:.95rem; }
.edt-case span{ display:block; font-size:.9rem; }
.edt-case small{ display:block; font-size:.72rem; opacity:.9; margin-top:2px; }
/* couleurs des niveaux, comme sur les visuels EDT */
.edt-case[data-niv="Kids"]{ background:#8DB21F; }
.edt-case[data-niv="Monkeys"]{ background:#E2B52A; }
.edt-case[data-niv="Teddies"]{ background:#8E2DB5; }
.edt-case[data-niv="Teens"], .edt-case[data-niv="Teens Brevet"], .edt-case[data-niv="1re année"], .edt-case[data-niv="2e année"]{ background:#DD2118; }
.edt-case.edt-atelier{ background:#F23EB1; }
.prof-nom{ font-weight:700; opacity:.85; margin-top:2px; }

.edt-prof + .edt-prof{ margin-top:22px; padding-top:18px; border-top:2px dashed rgba(255,255,255,.2); }
.edt-prof-titre{ display:flex; align-items:center; gap:10px; font-family:'Baloo 2', cursive; color:#fff; font-size:1.3rem; margin-bottom:10px; }

/* Pied de page toujours en bas, même sur une page courte */
body{ min-height:100vh; display:flex; flex-direction:column; }
body > .site-footer{ margin-top:auto; }

/* Règles du mot de passe (inscription) */
.pass-rules{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; margin:-6px 0 14px; font-size:.82rem; }
.pass-rules li{ opacity:.75; }
.pass-rules li::before{ content:"○ "; }
.pass-rules li.ok{ opacity:1; color:#8BE38F; font-weight:700; }
.pass-rules li.ok::before{ content:"✓ "; }

/* Banane « glisser pour se déconnecter » à la place du bouton Connexion */
.nav-login-wrap.connected{ display:flex; align-items:center; }
.nav-logout{ position:relative; width:136px; height:40px; border-radius:999px; overflow:hidden; touch-action:none;
  box-shadow:0 2px 6px rgba(0,0,0,.35); background:#4CAF50; }
.nav-logout-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-end; padding-right:16px;
  color:#fff; font-weight:800; font-size:.8rem; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.nav-logout-handle{ position:absolute; left:3px; top:3px; width:34px; height:34px; border-radius:50%; background:#fff; border:none; padding:0;
  cursor:grab; display:flex; align-items:center; justify-content:center; transform:rotate(-12deg); box-shadow:0 0 0 2px #FFE08A; }
.nav-logout-handle img{ width:62%; pointer-events:none; -webkit-user-drag:none; }
.nav-logout:not(.dragging) .nav-logout-handle{ transition:left .3s cubic-bezier(.25,.9,.35,1.15); }
.nav-logout-handle:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* Zone Connexion / banane à droite du menu : toujours au moins 190 px de large.
   Sur un écran étroit, le menu bleu se réduit un peu (reste centré) au lieu de rogner le bouton. */
:root{ --menu-w: min(var(--content-w), calc(100vw - 400px)); }
.nav-inner{ max-width:var(--menu-w); }
.nav-login-wrap{ width:max(195px, calc((100% - var(--content-w)) / 2)); }
/* la balançoire reste accrochée sous ACCUEIL, même quand le menu se réduit */
.mascot-swing{ left: calc((100% - var(--menu-w)) / 2 + (var(--menu-w) / 6 - 110px) / 2); }

/* Bandeau des félicitations : figé en bas, visible sur toutes les pages, au-dessus de tout.
   Le corps de page réserve sa hauteur, donc le pied de page s'arrête juste au-dessus. */
.celebration-bar{ position:fixed; left:0; right:0; bottom:0; z-index:150; }
body{ padding-bottom:46px; }
@media (max-width:700px){ body{ padding-bottom:40px; } }

/* ================= MENU FIGÉ + INSCRIPTION / CONNEXION ================= */
.navbar{ position:sticky; top:0; z-index:140; }
:root{ --menu-w: min(var(--content-w), calc(100vw - 440px)); --nav-h:49px; }
.nav-login-wrap, .nav-signup-wrap{ width:max(215px, calc((100% - var(--content-w)) / 2)); }
.nav-signup-wrap{ position:absolute; top:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; }
.nav-signup{ background:#fff; color: var(--chalk); }
.nav-signup:hover{ background: var(--teal); color:#fff; }
/* banane : un peu plus large, libellé centré dans la partie libre du rail */
.nav-logout{ width:160px; }
.nav-logout-label{ justify-content:center; padding:0 0 0 40px; font-size:.8rem; }
.nav-logout.done .nav-logout-label{ padding:0 40px 0 0; }

/* Enfants : un encadré par ligne, les uns sous les autres */
.kids-grid{ grid-template-columns:1fr; }

/* ================= BOUTONS SOUS LE MENU (20/10/2026) =================
   Le menu reprend toute sa largeur ; Inscription est centré sous BOUTIQUE (5e case),
   Connexion / banane sous FAQ (6e case), 10 px sous le menu. Tout reste figé avec le menu. */
:root{ --menu-w: min(var(--content-w), calc(100vw - 32px)); --nav-btn-gap:10px; --nav-btn-h:40px; }
.nav-login-wrap, .nav-signup-wrap{
  position:absolute; top:calc(100% + var(--nav-btn-gap)); bottom:auto; width:auto; height:var(--nav-btn-h);
  display:flex; align-items:center; justify-content:center; transform:translateX(-50%); z-index:141;
}
.nav-signup-wrap{ left:calc((100% - var(--menu-w)) / 2 + var(--menu-w) * 4.5 / 6); }
.nav-login-wrap{ left:calc((100% - var(--menu-w)) / 2 + var(--menu-w) * 5.5 / 6); right:auto; }
.nav-login{ box-shadow:0 3px 8px rgba(0,0,0,.35); }

/* Inscription : petit reflet qui passe, comme sur un bouclier */
.nav-signup{ position:relative; overflow:hidden; }
.nav-signup::after{
  content:""; position:absolute; top:-50%; left:-60%; width:40%; height:200%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.0) 20%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 80%, transparent 100%);
  transform:rotate(18deg); animation:reflet 3.5s ease-in-out infinite; pointer-events:none;
}
.nav-signup{ background: var(--purple); color:#fff; }
.nav-signup:hover{ background: var(--teal); color:#fff; }
@keyframes reflet{ 0%,70%{ left:-60%; } 100%{ left:130%; } }
@media (prefers-reduced-motion:reduce){ .nav-signup::after{ animation:none; display:none; } }

/* Banane : texte plus gros, « Quitter » à droite, « À bientôt ! » à gauche */
.nav-logout{ width:180px; height:var(--nav-btn-h); }
.nav-logout-handle{ top:3px; }
.nav-logout-label, .nav-logout-bye{ position:absolute; top:0; bottom:0; display:flex; align-items:center; color:#fff; font-weight:800;
  font-size:.95rem; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.35); transition:opacity .1s; }
.nav-logout-label{ right:16px; left:auto; padding:0; inset:auto; top:0; bottom:0; right:16px; justify-content:flex-end; }
.nav-logout-bye{ left:14px; opacity:0; }
.nav-logout.done .nav-logout-label, .nav-logout.done .nav-logout-label{ padding:0; }

/* la barre de profil (espace famille) se cale sous les boutons */
body.app-profils .profile-bar{ top:calc(var(--nav-h, 49px) + var(--nav-btn-gap) + var(--nav-btn-h) + 6px); }
.nav-login-wrap, .nav-signup-wrap{ align-items:flex-start; }  /* bord haut des boutons à 10 px pile du menu */

/* ================= MENU « CRAYONS DE COULEUR » (proposition 3, 20/10/2026) =================
   Six blocs séparés aux couleurs de la charte, légèrement penchés, avec relief et ombre.
   La page active se redresse, se soulève et prend un liseré blanc. Boutons 20 px sous le menu. */
:root{ --nav-btn-gap:20px; --nav-btn-h:33px; --nav-h:56px; }
.nav-inner{ background:transparent; padding-top:8px; }
.nav-links{ gap:10px; }
.nav-links > li > a{ padding:12px 0 14px; border-radius:12px 12px 18px 18px; color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.25), 0 9px 14px rgba(0,0,0,.35); text-shadow:0 2px 0 rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease; }
.nav-links > li:nth-child(1) > a{ background:var(--teal);   transform:rotate(-1deg); }
.nav-links > li:nth-child(2) > a{ background:var(--orange); transform:rotate(1deg); }
.nav-links > li:nth-child(3) > a{ background:var(--purple); transform:rotate(-.6deg); }
.nav-links > li:nth-child(4) > a{ background:var(--green);  transform:rotate(.8deg); }
.nav-links > li:nth-child(5) > a{ background:var(--red);    transform:rotate(-1deg); }
.nav-links > li:nth-child(6) > a{ background:#2e93b4;       transform:rotate(.6deg); }
.nav-links > li > a:hover{ color:#fff; transform:translateY(-3px) rotate(0); filter:brightness(1.08); }
.nav-links > li > a.active{ color:#fff; transform:translateY(-4px) rotate(0);
  box-shadow:0 0 0 3px #fff, 0 9px 0 rgba(0,0,0,.25), 0 14px 18px rgba(0,0,0,.4); }
/* sous-menu ATELIERS : même orange que son crayon */
.has-sub .sub-menu{ background:var(--orange); top:calc(100% + 6px); border-radius:12px; box-shadow:0 8px 14px rgba(0,0,0,.35); overflow:hidden; }
.has-sub .sub-menu::before{ content:""; position:absolute; top:-8px; left:0; right:0; height:8px; } /* pont pour garder le survol */
.sub-menu a{ background:transparent !important; box-shadow:none !important; transform:none !important; }
.sub-menu a:hover{ background:rgba(0,0,0,.15) !important; color:#fff; }
/* balançoire : accrochée sous le premier crayon */
.mascot-swing{ top:-6px; }
/* boutons penchés comme des crayons */
.nav-login{ box-shadow:0 4px 0 rgba(0,0,0,.25), 0 6px 10px rgba(0,0,0,.35); display:inline-block; }
.nav-signup{ transform:rotate(-1.5deg); }
.nav-login-wrap > .nav-login{ transform:rotate(1.5deg); }
.nav-signup:hover{ transform:rotate(0) scale(1.03); }
.nav-login-wrap > .nav-login:hover{ transform:rotate(0) scale(1.03); }

/* Banane « Quitter » : même taille que Connexion / Inscription, même effet de libellés */
.nav-logout{ width:138px; height:var(--nav-btn-h); transform:rotate(1.5deg);
  box-shadow:0 4px 0 rgba(0,0,0,.25), 0 6px 10px rgba(0,0,0,.35); }
.nav-logout-handle{ top:3px; left:3px; width:27px; height:27px; }
.nav-logout-label, .nav-logout-bye{ font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; }
.nav-logout-label{ right:14px; }
.nav-logout-bye{ left:12px; }

/* ================= MENU CRAYONS — RÉGLAGES DU 20/10 (2) =================
   Menu 10 px plus bas, texte plus gros en Playpen Sans, boutons Inscription / Connexion /
   Espace famille / banane exactement de la taille d'un crayon (mais gardent leur forme en pilule). */
:root{
  --crayon-gap:10px;
  --crayon-w:calc((var(--menu-w) - 5 * var(--crayon-gap)) / 6);
  --crayon-h:50px;
  --nav-h:68px;            /* 18 px de marge haute + 50 px de crayon */
  --nav-btn-h:var(--crayon-h);
}
.nav-inner{ padding-top:18px; }
.nav-links{ gap:var(--crayon-gap); }
.nav-links > li > a{ height:var(--crayon-h); padding:0 6px; display:flex; align-items:center; justify-content:center;
  font-family:'Playpen Sans','Baloo 2',cursive; font-weight:700; font-size:1.12rem; letter-spacing:.03em; }
.mascot-swing{ top:8px; }

/* Sous-menu ATELIERS : il touche le crayon (bordure transparente) pour qu'on ne perde pas le survol */
.has-sub .sub-menu{ top:100%; overflow:visible; border-top:8px solid transparent; background-clip:padding-box; padding:6px 0; }
.has-sub .sub-menu::before{ display:none; }
.has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu{ display:block; }
.sub-menu a{ font-family:'Playpen Sans','Baloo 2',cursive; font-size:1rem; padding:9px 12px; }

/* Boutons sous le menu : même largeur, hauteur et texte qu'un crayon, forme pilule */
.nav-login{ display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:var(--crayon-w); height:var(--crayon-h); padding:0 10px; border-radius:999px;
  font-family:'Playpen Sans','Baloo 2',cursive; font-weight:700; font-size:1.05rem; letter-spacing:.03em; }
/* centre de la case n (0 à 5) = bord du menu + n crayons + n écarts + un demi-crayon */
.nav-signup-wrap{ left:calc((100% - var(--menu-w)) / 2 + 4.5 * var(--crayon-w) + 4 * var(--crayon-gap)); }
.nav-login-wrap{ left:calc((100% - var(--menu-w)) / 2 + 5.5 * var(--crayon-w) + 5 * var(--crayon-gap)); }
.nav-espace-wrap{ position:absolute; top:calc(100% + var(--nav-btn-gap)); height:var(--nav-btn-h); transform:translateX(-50%); z-index:141;
  display:flex; left:calc((100% - var(--menu-w)) / 2 + 4.5 * var(--crayon-w) + 4 * var(--crayon-gap)); }
/* connecté : Espace famille prend la place d'Inscription (sous BOUTIQUE) sur toutes les pages */
body.connecte .nav-signup-wrap{ display:none; }
.nav-espace{ background:#fff; color:var(--chalk); transform:rotate(-1deg); }
.nav-espace:hover{ background:var(--teal); color:#fff; transform:rotate(0) scale(1.03); }
/* dans l'espace famille : inutile sur l'écran de connexion et sur la grille des profils */
body[data-ecran="login"] .nav-espace-wrap, body[data-ecran="profiles"] .nav-espace-wrap{ display:none; }

/* Banane à la taille d'un crayon */
.nav-logout{ width:var(--crayon-w); height:var(--crayon-h); }
.nav-logout-handle{ top:4px; left:4px; width:42px; height:42px; }
.nav-logout-label, .nav-logout-bye{ font-family:'Playpen Sans','Baloo 2',cursive; font-size:1.05rem; font-weight:700; }
.nav-logout-label{ right:18px; }
.nav-logout-bye{ left:16px; }
/* tailles de texte qui suivent la largeur des crayons (écrans plus étroits) */
.nav-links > li > a{ font-size:min(1.12rem, calc(var(--crayon-w) / 9.5)); }
.nav-login, .nav-logout-label, .nav-logout-bye{ font-size:min(1.05rem, calc(var(--crayon-w) / 10.5)); white-space:nowrap; }
.nav-espace{ font-size:min(.95rem, calc(var(--crayon-w) / 14)); letter-spacing:0; padding:0 8px; }

/* Espace famille : violet comme Inscription (dont il prend la place une fois connecté) */
.nav-espace{ background:var(--purple); color:#fff; }
.nav-espace:hover{ background:var(--teal); color:#fff; }

/* Le menu figé reprend le fond ardoise (même image, fixe) : le contenu qui défile
   passe dessous au lieu de se voir entre les crayons. */
.navbar{ background-color:var(--chalk);
  background-image:linear-gradient(rgba(20,20,20,.2), rgba(20,20,20,.2)), url('../images/fond-ardoise.jpg');
  background-size:cover; background-position:center; background-attachment:fixed; background-repeat:no-repeat; padding-bottom:10px; }
.nav-signup-wrap, .nav-login-wrap, .nav-espace-wrap{ top:calc(var(--nav-h) + var(--nav-btn-gap)); }
.mascot-swing{ top:-2px; }

/* ================= 20/10 (3) ================= */
/* Balançoire : le menu s'arrête au ras des crayons, les cordes partent juste dessous ACCUEIL */
.navbar{ padding-bottom:0; }
.mascot-swing{ top:-4px; }
/* Boutons sous le menu réduits d'environ 20 % (à tester) */
:root{ --nav-btn-w:calc(var(--crayon-w) * .8); --nav-btn-h:40px; }
.nav-login{ width:var(--nav-btn-w); height:var(--nav-btn-h); }
.nav-login, .nav-logout-label, .nav-logout-bye{ font-size:min(.84rem, calc(var(--crayon-w) / 13)); }
.nav-espace{ font-size:min(.76rem, calc(var(--crayon-w) / 17.5)); }
.nav-logout{ width:var(--nav-btn-w); height:var(--nav-btn-h); }
.nav-logout-handle{ top:3px; left:3px; width:34px; height:34px; }
.nav-logout-label{ right:14px; }
.nav-logout-bye{ left:12px; }

/* ================= 20/10 (4) — BANDE OPAQUE SOUS LE MENU, SUR TOUTES LES PAGES =================
   Le menu figé descend jusque sous les boutons : en défilant, le logo et les titres passent
   DESSOUS (les boutons ne passent plus devant). Le fond ardoise (même image, fixe) est posé en
   3 morceaux : la bande des crayons, puis sous elle à gauche et à droite de la balançoire,
   en laissant une « fenêtre » pour que ses cordes partent bien de sous ACCUEIL. */
:root{ --band-h:calc(var(--nav-btn-gap) + var(--nav-btn-h) + 12px);
  --sw-l:calc((100% - var(--menu-w)) / 2 + (var(--menu-w) / 6 - 110px) / 2); }
.navbar, body.app-profils .navbar{ background:none; padding-bottom:var(--band-h); }
.navbar::before, .nav-band span{ content:""; position:absolute; z-index:-1; pointer-events:none;
  background-color:var(--chalk); background-image:linear-gradient(rgba(20,20,20,.2), rgba(20,20,20,.2)), url('../images/fond-ardoise.jpg');
  background-size:cover; background-position:center; background-attachment:fixed; background-repeat:no-repeat; }
.navbar::before{ left:0; right:0; top:0; height:var(--nav-h); }
.nav-band{ position:absolute; left:0; right:0; top:var(--nav-h); bottom:0; z-index:-1; pointer-events:none; }
.nav-band .nb-l{ left:0; top:0; bottom:0; width:var(--sw-l); }
.nav-band .nb-r{ left:calc(var(--sw-l) + 110px); right:0; top:0; bottom:0; }
/* la balançoire (dans l'en-tête, sous la bande) remonte jusque sous ACCUEIL */
.mascot-swing, body.app-profils .mascot-swing{ top:calc(-1 * var(--band-h) - 4px); }
.site-header{ padding-top:40px; }
body.app-profils .profile-bar{ top:calc(var(--nav-h) + var(--band-h)); }

/* ← Espace famille : texte plus gros, flèche dans une pastille */
.nav-espace{ width:auto; min-width:var(--nav-btn-w); gap:8px; padding:0 14px 0 6px;
  font-size:min(.86rem, calc(var(--crayon-w) / 15)); letter-spacing:.01em; }
.nav-espace .fl{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12); transition:transform .2s ease; }
.nav-espace .fl svg{ width:16px; height:16px; }
.nav-espace:hover .fl{ transform:translateX(-3px); }

/* Boutons sous le menu : 85 % de la taille d'un crayon (−15 %) */
:root{ --nav-btn-w:calc(var(--crayon-w) * .85); --nav-btn-h:43px; }
.nav-login, .nav-logout-label, .nav-logout-bye{ font-size:min(.9rem, calc(var(--crayon-w) / 12.2)); }
.nav-espace{ font-size:min(.92rem, calc(var(--crayon-w) / 14)); }
.nav-logout-handle{ width:37px; height:37px; }
.nav-espace .fl{ width:30px; height:30px; }

/* page défilée : la bande sous le menu est pleine (la balançoire passe dessous) */
body.defile .nav-band .nb-l{ width:100%; }
/* sous-menu ATELIERS : pas de puces */
.has-sub .sub-menu, .has-sub .sub-menu li{ list-style:none; margin-left:0; }
.has-sub .sub-menu li::marker{ content:none; }

/* ================= ESPACE FAMILLE (app.monkeys-academy.com) : SANS MENU =================
   Une simple bande en haut avec, à droite, « ← Espace famille » (hors grille des profils)
   et la banane Quitter (déconnexion puis retour sur la vitrine). */
body.app-page{ --nav-h:0px; --nav-btn-gap:14px; --app-bar-h:calc(var(--nav-btn-h) + 28px); }
body.app-page .nav-inner, body.app-page .nav-band, body.app-page .nav-signup-wrap, body.app-page .mascot-swing{ display:none; }
body.app-page .navbar{ padding-bottom:0; height:var(--app-bar-h); }
body.app-page .navbar::before{ height:100%; }
body.app-page.app-profils .profile-bar{ top:var(--app-bar-h); }
/* survol : le bouton garde sa couleur (il grossit juste un peu) */
.nav-espace:hover{ background:var(--purple); color:#fff; transform:rotate(0) scale(1.04); }
.nav-retour{ background:var(--yellow); color:var(--chalk); width:auto; padding:0 18px; }
.nav-retour:hover{ background:var(--yellow); color:var(--chalk); }
/* Espace famille : boutons à leur taille d'origine (celle d'un crayon) */
body.app-page{ --nav-btn-w:var(--crayon-w); --nav-btn-h:50px; }
body.app-page .nav-login, body.app-page .nav-logout-label, body.app-page .nav-logout-bye{ font-size:min(1.05rem, calc(var(--crayon-w) / 10.5)); }
body.app-page .nav-espace{ font-size:min(1rem, calc(var(--crayon-w) / 13)); }
body.app-page .nav-logout-handle{ top:4px; left:4px; width:42px; height:42px; }
body.app-page .nav-espace .fl{ width:34px; height:34px; }
body.app-page .nav-espace .fl svg{ width:18px; height:18px; }
body.app-page .nav-espace-wrap{ margin-left:-14px; }
/* code gestion à 6 chiffres (même fenêtre que le PIN 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(--cream); width:100%; max-width:420px; }
.pin-box h2{ font-family:'Baloo 2', cursive; color:var(--yellow); 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.pin6{ gap:8px; }
.pin-digits.pin6 input{ width:46px; height:56px; }
.pin-digits input:focus{ outline:3px solid var(--yellow); }
.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); } }
.nav-espace .fl-emoji{ font-size:1rem; }

/* Singe-feuille (copie de assets/Singe-feuille.png) dans un cercle beige à double liseré vert,
   en haut à gauche de l'encadré (espace parent, espace prof) */
.avatar-singe{ flex:0 0 auto; width:64px; height:64px; border-radius:50%; background:#F6EBD3; display:inline-flex; align-items:center; justify-content:center;
  border:3px solid #4CAF50; box-shadow:0 0 0 3px #F6EBD3, 0 0 0 6px #2E7D32, 0 4px 10px rgba(0,0,0,.35); overflow:hidden; margin:6px; }
.avatar-singe img{ width:84%; height:84%; object-fit:contain; }
.g-top-id{ display:flex; align-items:center; gap:16px; }
/* Accueil, « Rejoins l'aventure » : Singe-feuille redimensionné */
.adventure-leaf-mascot{ width:150px; height:auto; object-fit:contain; }

/* Espace parent : les 2 boutons alignés sur le bord droit de l'encadré (784 px) */
body.app-page.app-profils{ --panel-w:min(784px, calc(100% - 36px)); }
body.app-page.app-profils .nav-login-wrap{ left:auto; right:calc((100% - var(--panel-w)) / 2); transform:none; justify-content:flex-end; }
body.app-page.app-profils .nav-espace-wrap{ left:auto; right:calc((100% - var(--panel-w)) / 2 + var(--nav-btn-w) + 14px); transform:none; margin-left:0; }
/* champs sans type (fenêtres ajout élève, éditeur de box) : même style que les autres */
.form-field input:not([type]){ width:100%; padding:11px 14px; border-radius:10px; border:none; background:#fff; font-family:'Nunito Sans', sans-serif; font-size:.95rem; color:var(--chalk); }

/* ================= ESPACE PARENT / PROF / GESTION : EN-TÊTE (FIRE 20/10) =================
   Le nom de la page est sur la ligne des boutons (à gauche) ; en grand titre : le singe dans
   son cercle et le bonjour avec le prénom. */
.app-titre{ display:none; }
body.app-page .app-titre{ display:flex; align-items:center; position:absolute; top:0; height:var(--app-bar-h); z-index:141;
  left:calc((100% - var(--menu-w)) / 2); font-family:'Playpen Sans','Baloo 2',cursive; font-weight:700; font-size:1.35rem; color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.4); white-space:nowrap; }
body.app-page.app-profils .app-titre{ left:calc((100% - var(--panel-w)) / 2); }
.hello-head{ gap:26px; padding:18px 10px 26px; min-height:0; }
.hello-head .page-header-text{ margin:0; text-align:left; max-width:760px; }
.hello-head .page-header-text h1{ margin-bottom:4px; font-size:2.6rem; line-height:1.1; }
.hello-head .page-header-text h1 .at{ color:var(--yellow); }
.hello-head .page-header-text p{ font-size:1rem; }
.hello-head .hello-langue{ display:block; font-size:.9rem; opacity:.75; font-style:italic; margin-top:2px; }
.hello-head .hello-demo{ display:block; font-size:.78rem; opacity:.6; margin-top:6px; }
.hello-singe{ width:120px; height:120px; margin:8px; overflow:visible; position:relative; }
.hello-singe img{ width:86%; height:86%; border-radius:50%; }
/* version « prof » (pages prof et gestion) : une toque de diplômé, en attendant l'illustration du singe prof */
.hello-singe.prof::after{ content:'🎓'; position:absolute; top:-30px; left:50%; transform:translateX(-50%) rotate(-10deg);
  font-size:3rem; line-height:1; filter:drop-shadow(0 3px 4px rgba(0,0,0,.45)); }
@media (max-width:700px){ .hello-singe{ width:84px; height:84px; } .hello-head .page-header-text h1{ font-size:1.8rem; } body.app-page .app-titre{ display:none; } }
/* plus de « Wesh … ! » dans la page (il est en titre) */
.g-top-id, #gestion-hello{ display:none; }
/* onglets + choix « Page de … » sur la même ligne */
.g-tabs-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.g-tabs-row .g-tabs{ margin-bottom:0; }
.voir-prof{ padding:9px 14px; border-radius:999px; border:none; font:inherit; font-weight:700; color:var(--chalk); margin-left:auto; }
/* espace parent : singe dans la ligne des boutons, titre centré dessous */
.bar-singe{ width:62px; height:62px; margin:0; border-width:3px; box-shadow:0 0 0 3px #F6EBD3, 0 0 0 5px #2E7D32, 0 3px 8px rgba(0,0,0,.35); }
.bar-singe img{ width:84%; height:84%; }
body.app-profils .hello-singe{ display:none; }
body.app-profils .hello-head .page-header-text{ text-align:center; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hello-head .hello-langue{ font-style:italic; }
.hello-head .hello-gap{ display:block; height:.9em; }

/* ================= FIRE 2 (20/10) : en-têtes ================= */
/* un seul singe : le grand cercle à côté du titre (×2), plus de petit cercle en haut */
body.app-profils .hello-singe{ display:inline-flex; }
.hello-singe{ width:240px; height:240px; }
.hello-singe.prof::after{ top:-58px; font-size:5.6rem; }
body.app-profils .hello-head .page-header-text{ text-align:left; }
@media (max-width:700px){ .hello-singe{ width:110px; height:110px; } .hello-singe.prof::after{ top:-28px; font-size:2.6rem; } }
/* pages prof / gestion : titre en jaune, plus gros, aligné à gauche avec l'encadré ; Quitter aligné à droite */
body.app-page:not(.app-profils){ --panel-w:min(1100px, calc(100% - 40px)); }
body.app-page:not(.app-profils) .app-titre{ left:calc((100% - var(--panel-w)) / 2); color:var(--yellow); font-size:2.6rem; }
body.app-page:not(.app-profils) .nav-login-wrap{ left:auto; right:calc((100% - var(--panel-w)) / 2); transform:none; justify-content:flex-end; }
body.app-page:not(.app-profils) .nav-espace-wrap{ left:auto; right:calc((100% - var(--panel-w)) / 2 + var(--nav-btn-w) + 14px); transform:none; margin-left:0; }


/* ===== FIRE 21h ===== */
/* Formulaire de contact : « NOM » en majuscules, en jaune */
.nom-jaune{ color:var(--yellow); font-weight:800; }
/* Bouton du menu : « Cours d'essai » ↔ « Inscription » — le reflet passe toutes les 2 s
   et le libellé change derrière lui (au milieu de son passage) */
.nav-signup{ display:inline-grid !important; place-items:center; }
.nav-signup .sg-a, .nav-signup .sg-b{ grid-area:1 / 1; white-space:nowrap; }
.nav-signup .sg-a{ animation:sgA 4s linear infinite; }
.nav-signup .sg-b{ animation:sgB 4s linear infinite; }
.nav-signup::after{ animation:reflet2 2s ease-in-out infinite; z-index:1; }
@keyframes reflet2{ 0%,55%{ left:-60%; } 100%{ left:130%; } }
@keyframes sgA{ 0%,38%{ opacity:1; } 41%,88%{ opacity:0; } 91%,100%{ opacity:1; } }
@keyframes sgB{ 0%,38%{ opacity:0; } 41%,88%{ opacity:1; } 91%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .nav-signup .sg-a, .nav-signup .sg-b{ animation:none; opacity:1; grid-area:auto; }
  .nav-signup{ display:inline-flex !important; gap:.3em; }
  .nav-signup .sg-a::after{ content:" /"; }
}

/* FIRE 21i : pages prof et gestion — plus de singe ; bonjour + infos sous « Espace prof » / « Gestion de l'école »,
   alignés à gauche avec le titre et les encadrés */
body.pg-prof .hello-singe, body.pg-gestion .hello-singe{ display:none; }
body.pg-prof .hello-head, body.pg-gestion .hello-head{ justify-content:flex-start; width:var(--panel-w); margin:0 auto; padding:2px 0 14px; }
body.pg-prof .hello-head{ padding-bottom:4px; }   /* pense-bête remonté de 10 px (tout ce qui suit remonte aussi) */
body.pg-prof .hello-head .page-header-text, body.pg-gestion .hello-head .page-header-text{ max-width:none; margin:0; }
/* page Inscription : le singe dans son cercle (comme l'écran de connexion), mots-clés en jaune */
.hello-head p .at{ color:var(--yellow); font-weight:800; }

/* ===== FIRE 22a ===== */
/* drapeaux dessinés qui flottent */
.drapeau{ display:inline-block; width:1.35em; height:.9em; vertical-align:-.08em; margin:0 .1em; perspective:60px; }
.drapeau svg{ width:100%; height:100%; display:block; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,.4);
  transform-origin:left center; animation:drapeauFlotte 2.4s ease-in-out infinite; }
@keyframes drapeauFlotte{ 0%,100%{ transform:rotateY(0) skewY(0); } 30%{ transform:rotateY(-14deg) skewY(-3deg); } 65%{ transform:rotateY(8deg) skewY(2.5deg); } }
@media (prefers-reduced-motion:reduce){ .drapeau svg{ animation:none; } }
/* photos rondes des cours (fond transparent) */
.atelier-photo:has(img){ border:none; background:transparent; }
.atelier-photo img{ object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.atelier-photo.grande:has(img){ aspect-ratio:1; }
.atelier-card .atelier-photo:has(img){ padding:10px 0 0; }
/* 👁 afficher / masquer le mot de passe */
.pw-wrap{ position:relative; display:block; }
.pw-wrap input{ width:100%; padding-right:44px !important; }
.pw-oeil{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:none; cursor:pointer; font-size:1.1rem; opacity:.45; padding:4px 6px; line-height:1; }
.pw-oeil:hover, .pw-oeil.on{ opacity:1; }