/* Ogrelo · tuiles (jetons communs) : cartes bien rondes, contour franc, ombre PLEINE dessous dans une teinte plus foncée de la carte
   (pas de flou) ; on appuie : la carte descend et l'ombre rétrécit. Mise en page et logique des écrans inchangées.
   Utilisé par : Langues (langues.css, tuiles pleines), cartes du jour (Devoirs), Contrôles, matières de Cours, menu d'Ogrelo. */
:root{--tuile-r:20px;--tuile-h:5px;--tuile-bord:2px}

/* cartes claires teintées : la couleur de la carte (--c) donne le contour et l'ombre */
.h-card,.cz-l,.ct-card,.j-choix,.ct-rev{
  --tc-c:var(--c,#8A8799);
  border:var(--tuile-bord) solid color-mix(in srgb,var(--tc-c) 38%,var(--line))!important;
  border-radius:var(--tuile-r)!important;
  box-shadow:0 var(--tuile-h) 0 color-mix(in srgb,var(--tc-c) 45%,var(--line))!important;
  transition:transform .08s ease,box-shadow .08s ease}
.cz-l,.j-choix{background:color-mix(in srgb,var(--tc-c) 6%,var(--card))!important;margin-bottom:var(--tuile-h)}
.cz-l b,.j-choix .tx b{font-family:var(--display);font-weight:800;font-size:1.04rem}
.cz-liste{gap:14px!important}
.cz-li{border-radius:13px!important;box-shadow:0 3px 0 color-mix(in srgb,var(--c,#8A8799) 40%,var(--line))}
/* appui : la carte descend */
.cz-l:active,.j-choix:active,.ct-rev:active,.h-card:has(.j-main:active),.h-card:has(.ct-h:active),button.h-card:active{
  transform:translateY(calc(var(--tuile-h) - 1px));box-shadow:0 1px 0 color-mix(in srgb,var(--tc-c) 45%,var(--line))!important}
.j-card.passe,.j-card.done{box-shadow:0 2px 0 color-mix(in srgb,var(--tc-c) 30%,var(--line))!important}

/* menu d'Ogrelo : pastilles pleines avec la même ombre dessous */
.om-r{box-shadow:0 5px 0 color-mix(in srgb,var(--c) 58%,#000),0 12px 22px rgba(0,0,0,.28)!important;transition:transform .08s ease,box-shadow .08s ease}
.om-i:active .om-r{transform:translateY(4px)!important;box-shadow:0 1px 0 color-mix(in srgb,var(--c) 58%,#000),0 6px 12px rgba(0,0,0,.25)!important}

/* Cours · l'examen de l'année (brevet, puis bac) : grosse tuile dorée pleine, plus visible que les matières ; J-xxx en pastille */
.cz-exam{--c:#F29A0E;position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:96px;margin:4px 0 22px!important;padding:16px 16px 16px 14px!important;
  border:0!important;border-radius:22px!important;color:#fff!important;text-align:left;cursor:pointer;
  background:linear-gradient(150deg,#FFC23A 0%,#F7A21B 45%,#EC820C 100%)!important;box-shadow:0 6px 0 #B85F00!important;transition:transform .08s ease,box-shadow .08s ease}
.cz-exam .i{width:58px!important;height:58px!important;border-radius:18px!important;background:rgba(255,255,255,.25)!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.cz-exam .i svg{width:38px;height:38px;filter:drop-shadow(0 2px 0 rgba(140,70,0,.35))}
.cz-exam .tx b{font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.1;text-shadow:0 2px 0 rgba(150,75,0,.35)}
.cz-exam .tx small{color:#fff!important;font-weight:800;font-size:.98rem;opacity:1;text-shadow:0 1px 0 rgba(150,75,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cz-j{position:absolute;top:12px;right:14px;background:#fff;color:#B35A00;font-family:var(--display);font-weight:800;font-size:1.02rem;border-radius:999px;padding:6px 12px;box-shadow:0 3px 0 #B85F00;white-space:nowrap}
.cz-exam:active{transform:translateY(5px);box-shadow:0 1px 0 #B85F00!important}

/* Cours · mes matières : toutes les tuiles ont exactement la même taille (nom sur une ligne, une ligne d'info au plus) */
.cz-liste{grid-template-columns:minmax(0,1fr)}
.cz-exam .tx{flex:1;min-width:0}
.cz-mat{min-width:0;height:76px;min-height:76px!important;padding:0 14px 0 12px!important}
.cz-mat .tx{justify-content:center}
.cz-mat .tx b,.cz-mat .tx small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
.cz-mat .tx b{font-size:1.08rem;line-height:1.25}
.cz-mat .tx small{line-height:1.3}
.cz-mat .cz-li{width:44px;height:44px}

@media (prefers-reduced-motion: reduce){.cz-exam,.h-card,.cz-l,.ct-card,.j-choix,.ct-rev,.om-r{transition:none}}

/* ======================================================================================================================
   Ogrelo · le style « Duolingo » partout (jetons communs + composants). Seulement l'apparence : mises en page et logique inchangées.
   Règle : carte bien ronde, contour franc, ombre PLEINE dessous (jamais floue) ; on appuie → ça descend et l'ombre rétrécit.
   Rouge réservé aux erreurs. Chargé après le style de la page (index.html) : il l'emporte à spécificité égale.
   ====================================================================================================================== */
:root{
  --duo-r:20px;--duo-r-s:14px;--duo-r-xl:24px;            /* rayons : cartes, petits éléments, grandes cartes */
  --duo-h:4px;--duo-h-btn:5px;--duo-bord:2px;               /* profondeur de l'ombre (cartes, boutons), épaisseur du contour */
  --duo-ombre:color-mix(in srgb,var(--line) 82%,#000);     /* ombre pleine d'une carte neutre : le contour, un cran plus foncé */
  --duo-press:translateY(3px);                              /* appui */
  --duo-anim:transform .08s ease,box-shadow .08s ease,background-color .15s ease;
  --duo-focus:color-mix(in srgb,var(--sky) 70%,#000);       /* ombre 3D d'un champ actif */
  --duo-poignee:color-mix(in srgb,var(--ink) 18%,transparent);
  /* couleurs d'identité des onglets (calmes, saturées, jamais rouges) */
  --tab-accueil:#2D7FE0;--tab-notes:#E8810C;--tab-grignon:#3E9A35;--tab-reviser:#8455D8;--tab-langues:#0E9A8C;--tab-moi:#C98A04;
  --tc-mix:#000;--tc-part:68%;                              /* texte coloré lisible (AA) : la couleur foncée en clair, éclaircie en sombre */
}
:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--shadow:0 var(--duo-h) 0 var(--duo-ombre)}   /* l'ombre commune devient pleine */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--duo-ombre:color-mix(in srgb,var(--line) 85%,#000);--tc-mix:#fff;--tc-part:62%;--duo-focus:color-mix(in srgb,var(--sky) 60%,#000)}}
:root[data-theme="dark"]{--duo-ombre:color-mix(in srgb,var(--line) 85%,#000);--tc-mix:#fff;--tc-part:62%;--duo-focus:color-mix(in srgb,var(--sky) 60%,#000)}

/* ---------- 1. en-tête d'onglet : bandeau reconnaissable, même composant partout ---------- */
[data-k="accueil"],[data-tab="accueil"]{--tc:var(--tab-accueil)}[data-k="notes"],[data-tab="notes"]{--tc:var(--tab-notes)}
[data-k="grignon"],[data-tab="grignon"]{--tc:var(--tab-grignon)}[data-k="reviser"],[data-tab="reviser"]{--tc:var(--tab-reviser)}
[data-k="langues"],[data-tab="langues"]{--tc:var(--tab-langues)}[data-k="moi"],[data-tab="moi"]{--tc:var(--tab-moi)}
.h-sheet{padding-top:18px!important}
.h-q.h-tete{--tc-t:color-mix(in srgb,var(--tc) var(--tc-part),var(--tc-mix));display:flex;align-items:center;gap:12px;min-height:64px;margin:0 0 18px!important;padding:8px 14px 8px 8px;
  background:color-mix(in srgb,var(--tc) 11%,var(--card));border:var(--duo-bord) solid color-mix(in srgb,var(--tc) 40%,var(--line));border-radius:var(--duo-r);
  box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--tc) 55%,var(--line));font-size:1.4rem!important;line-height:1.1;color:var(--ink)}
.h-tete-i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--tc);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.h-tete-i svg{width:26px;height:26px;margin-top:-2px}
.h-tete-i svg [fill^="var"]{fill:var(--tc)}
.h-tete-i .ogre{width:40px;height:40px;margin-top:0}
.h-tete-t{display:flex;flex-direction:column;min-width:0;font-weight:800}
.h-tete-t small{font-family:var(--body);font-size:.84rem;font-weight:700;color:var(--tc-t);line-height:1.25;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* barre du bas : l'onglet actif prend la couleur de son onglet */
.h-tab[data-tab]{--tc-t:color-mix(in srgb,var(--tc) var(--tc-part),var(--tc-mix))}
.h-tab[data-tab][aria-current="page"]{color:var(--tc-t)!important}
.h-tab[data-tab][aria-current="page"]::before{background:var(--tc)!important;height:4px!important;width:32px!important}
.h-tab[data-tab][aria-current="page"] svg{stroke-width:2.2}

/* ---------- 2. boutons : gros, ronds, en relief ---------- */
.btn{border-radius:18px;min-height:52px;letter-spacing:.01em;box-shadow:0 var(--duo-h-btn) 0 color-mix(in srgb,var(--ogre-d) 60%,#000);transition:var(--duo-anim)}
.btn:not(:disabled):active{transform:translateY(calc(var(--duo-h-btn) - 1px));box-shadow:0 1px 0 color-mix(in srgb,var(--ogre-d) 60%,#000)}
.btn.alt{border:var(--duo-bord) solid var(--line);box-shadow:0 var(--duo-h-btn) 0 var(--duo-ombre)}
.btn.alt:not(:disabled):active{box-shadow:0 1px 0 var(--duo-ombre)}
.btn:disabled{box-shadow:0 var(--duo-h) 0 var(--duo-ombre)}
.back,.cm-x,.pq-x,.sig-x,.abo-x,.h-arrows button,.g-x,.df-son,.g-cam{border:var(--duo-bord) solid var(--line)!important;background:var(--card)!important;box-shadow:0 3px 0 var(--duo-ombre)!important;transition:var(--duo-anim)}
.back:active,.cm-x:active,.pq-x:active,.sig-x:active,.abo-x:active,.h-arrows button:active,.g-x:active,.df-son:active,.g-cam:active{transform:var(--duo-press)!important;box-shadow:0 0 0 var(--duo-ombre)!important}
.h-arrows button{color:var(--sky)!important;border-radius:14px!important}
.h-arrows .j-auj{border-radius:999px!important;color:color-mix(in srgb,var(--sky) 72%,#000)!important}
:root[data-theme="dark"] .h-arrows .j-auj{color:color-mix(in srgb,var(--sky) 60%,#fff)!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .h-arrows .j-auj{color:color-mix(in srgb,var(--sky) 60%,#fff)!important}}

/* ---------- 3. semaine (Devoirs, Contrôles) : les jours deviennent des pastilles en relief ---------- */
.h-sheet{--tc-t:color-mix(in srgb,var(--tc,var(--ogre)) var(--tc-part),var(--tc-mix))}
.h-week{padding:2px 2px 6px}
.h-day .n{border-radius:15px!important;border:var(--duo-bord) solid var(--line)!important;background:var(--card);box-shadow:0 3px 0 var(--duo-ombre);transition:var(--duo-anim)}
.h-day:active .n{transform:var(--duo-press);box-shadow:0 0 0 var(--duo-ombre)}
.h-day.today .n{border-color:color-mix(in srgb,var(--tc,var(--ogre)) 60%,var(--line))!important;color:var(--tc-t)}
.h-day[aria-pressed="true"] .n{background:var(--tc,var(--navink))!important;border-color:var(--tc,var(--navink))!important;color:#fff!important;box-shadow:0 3px 0 color-mix(in srgb,var(--tc,var(--navink)) 60%,#000)}
.h-day[aria-pressed="true"]{color:var(--tc-t)!important}

/* ---------- 4. cartes neutres (encadrés, blocs, actions) : contour franc + ombre pleine ---------- */
.d-box,.dv-plus,.moi-kpi,.blk,.tile,.qcard,.result,.recap details,.cm-carte:not([style*="--c"]),.plat-c,.mem-tuile,.doc-rg,.dv-act,.gr-carte,.rg-page .moi-card{
  border-width:var(--duo-bord)!important;border-style:solid!important;border-radius:var(--duo-r)!important}
.d-box,.dv-plus,.tile,.qcard,.result,.recap details,.cm-carte:not([style*="--c"]),.plat-c,.doc-rg,.gr-carte{border-color:var(--line)!important;box-shadow:0 var(--duo-h) 0 var(--duo-ombre)!important}
.qcard,.result{border-radius:var(--duo-r-xl)!important}
.dv-act{box-shadow:0 var(--duo-h) 0 var(--duo-ombre);transition:var(--duo-anim)}
.dv-act:not(.gris):not(.busy):active,.plat-c:active,.doc-rg:active,.gr-carte:active,.tile:active,.mem-tuile:active{transform:var(--duo-press);box-shadow:0 1px 0 var(--duo-ombre)!important}
.dv-act .i,.moi-kpi .ki{box-shadow:inset 0 -3px 0 rgba(0,0,0,.08)}
.dv-plus>summary{color:var(--ink)!important}
/* encadrés de fiche : l'ombre prend la couleur de l'encadré */
.blk{box-shadow:0 var(--duo-h) 0 var(--duo-ombre)}
.retiens{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ogre) 50%,var(--line))}
.exemple{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--sky) 50%,var(--line))}
.piege{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--berry) 45%,var(--line))}
.astuce{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--sun) 60%,var(--line))}
/* cartes pleines de couleur (en-tête de devoir, de fiche, gros boutons) : le bas de la carte, plus foncé */
.d-head,.fhero{box-shadow:inset 0 -6px 0 rgba(0,0,0,.16)!important;padding-bottom:20px!important}
.bigbtn{box-shadow:0 var(--duo-h-btn) 0 rgba(0,0,0,.28)}
.playbtn{box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 60%,#000)}
/* « J'ai terminé » : une grosse case en relief */
.knowbtn{border:var(--duo-bord) solid color-mix(in srgb,var(--ogre) 55%,var(--line))!important;box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ogre) 45%,var(--line));transition:var(--duo-anim)}
.knowbtn:active{transform:var(--duo-press);box-shadow:0 1px 0 color-mix(in srgb,var(--ogre) 45%,var(--line))}
.knowbtn .box{border-width:var(--duo-bord)!important;border-radius:11px!important;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ogre) 22%,transparent)}
.knowbtn.on{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ogre-d) 55%,var(--line))}
/* jour vide : un cadre plein et doux plutôt que des pointillés */
.j-vide{border:var(--duo-bord) solid var(--line)!important;background:color-mix(in srgb,var(--tc,var(--ogre)) 4%,var(--card))!important;border-radius:var(--duo-r-xl)!important;box-shadow:0 var(--duo-h) 0 var(--duo-ombre)}
.j-titre{font-size:1.12rem!important;color:var(--ink)!important}
/* à compléter (Contrôles) : pastille en relief */
.j-pl{border:var(--duo-bord) solid color-mix(in srgb,var(--t-warn,#C77700) 35%,var(--line))!important;border-radius:var(--duo-r-s)!important;box-shadow:0 3px 0 color-mix(in srgb,var(--t-warn,#C77700) 35%,var(--line));transition:var(--duo-anim)}
.j-pl:active{transform:var(--duo-press);box-shadow:0 0 0 transparent}

/* onglet Ogrelo : les 3 cartes (parler, défier, groupe), ombre pleine de leur couleur */
.gt-c{border-width:var(--duo-bord)!important;border-radius:var(--duo-r)!important;box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--c) 50%,var(--line))!important;transition:var(--duo-anim)}
.gt-c:active{transform:var(--duo-press);box-shadow:0 1px 0 color-mix(in srgb,var(--c) 50%,var(--line))!important}
.gt-c .i{box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}

/* ---------- 5. pastilles (choix, réglages, suggestions du chat) ---------- */
.rg-seg button,.seg button,.g-chip,.r-roles .btn{border:var(--duo-bord) solid var(--line)!important;border-radius:999px!important;box-shadow:0 3px 0 var(--duo-ombre);transition:var(--duo-anim);min-height:40px}
.rg-seg button:not(:disabled):active,.seg button:active,.g-chip:active{transform:var(--duo-press);box-shadow:0 0 0 transparent}
.rg-seg button[aria-checked="true"],.seg button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--ogre) 70%,var(--line))!important;box-shadow:0 3px 0 color-mix(in srgb,var(--ogre-d) 70%,var(--line))}
.g-chip{border-color:color-mix(in srgb,var(--ogre) 55%,var(--line))!important;box-shadow:0 3px 0 color-mix(in srgb,var(--ogre) 40%,var(--line));font-weight:700;padding:8px 14px!important;background:var(--card)}
.h-tag,.badge{font-family:var(--display);letter-spacing:.03em}

.sig-puce{box-shadow:0 3px 0 var(--duo-ombre);transition:var(--duo-anim)}
.sig-puce:active{transform:var(--duo-press);box-shadow:0 0 0 transparent}
.sig-puce.on{box-shadow:0 3px 0 color-mix(in srgb,var(--ogre) 55%,var(--line))}

/* ---------- 6. barres de progression : épaisses, bouts ronds, reflet ---------- */
.prog,.cm-barre,.gr-bar,.lbar,.m-bar{border-radius:999px!important;background:color-mix(in srgb,var(--ink) 9%,var(--line))!important;overflow:hidden}
.prog{height:16px!important}.cm-barre{height:14px!important}.gr-bar{height:12px!important}.gr-bar.gros{height:16px!important}.m-bar{height:10px!important}
.prog i,.cm-barre i,.gr-bar i,.lbar i,.m-bar i{border-radius:999px!important;min-width:10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),inset 0 3px 0 rgba(255,255,255,.28)}
.m-bar i{box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}

/* ---------- 7. champs : contour épais, coins ronds, relief bleu quand on écrit ---------- */
.exo-in,.g-type input,.g-type textarea,.cm input[type="text"],.cm input:not([type]),.cm textarea,.cm select,.sig-feuille textarea,.sig-mot textarea,.abo-feuille input,.l-sheet input[type="text"],.l-sheet input[type="email"],.l-sheet input[type="password"],.l-sheet input:not([type]),.df-code-in input{
  border:var(--duo-bord) solid var(--line)!important;border-radius:var(--duo-r-s);background:var(--card);color:var(--ink);box-shadow:inset 0 2px 0 color-mix(in srgb,var(--ink) 5%,transparent);transition:border-color .15s ease,box-shadow .15s ease}
.exo-in:focus,.g-type input:focus,.g-type textarea:focus,.cm input:focus,.cm textarea:focus,.cm select:focus,.sig-feuille textarea:focus,.sig-mot textarea:focus,.abo-feuille input:focus,.l-sheet input:focus,.df-code-in input:focus{
  outline:none;border-color:var(--sky)!important;box-shadow:0 3px 0 var(--duo-focus)}
.g-type input{border-radius:999px!important;min-height:48px}
.g-type button:not(.g-cam){border-radius:16px!important;box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 60%,#000);transition:var(--duo-anim)}
.g-type button:not(.g-cam):active{transform:var(--duo-press);box-shadow:0 1px 0 color-mix(in srgb,var(--ogre-d) 60%,#000)}
.g-bar,.g-panel.g-texte .g-type{border-top-width:var(--duo-bord)!important}

/* ---------- 8. quiz : réponses en grosses tuiles en relief ---------- */
.opt{border-width:var(--duo-bord)!important;border-radius:var(--duo-r-s)!important;box-shadow:0 var(--duo-h) 0 var(--duo-ombre)!important;transition:var(--duo-anim);min-height:60px}
.opt:not(.dim):active{transform:var(--duo-press);box-shadow:0 1px 0 var(--duo-ombre)!important}
.opt .l{box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.opt.good{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ok) 60%,var(--line))!important}
.opt.bad{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ko) 55%,var(--line))!important}
.feedback{border-width:var(--duo-bord)!important;box-shadow:0 var(--duo-h) 0 color-mix(in srgb,currentColor 0%,var(--duo-ombre))}
.feedback.good{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ok) 55%,var(--line))}
.feedback.bad{box-shadow:0 var(--duo-h) 0 color-mix(in srgb,var(--ko) 50%,var(--line))}
.chip{border-width:var(--duo-bord)!important;box-shadow:0 3px 0 var(--duo-ombre)}

/* ---------- 9. feuilles du bas : coins ronds en haut, poignée, ombre ---------- */
@media (max-width:559px){.sig-feuille,.pq-feuille,.abo-feuille,.cp-feuille,.mc-feuille,.mem-sheet,.dm-in,.lu-feuille-in{border-radius:28px 28px 0 0!important;border-top:var(--duo-bord) solid var(--line)}}
.mem-sheet,.mc-feuille{position:relative}
.sig-feuille::before,.pq-feuille::before,.abo-feuille::before,.cp-feuille::before,.mc-feuille::before,.mem-sheet::before,.dm-in::before{
  content:"";position:absolute;top:9px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:999px;background:var(--duo-poignee);pointer-events:none}
@media (min-width:560px){.sig-feuille,.pq-feuille,.abo-feuille{border-radius:28px!important;border:var(--duo-bord) solid var(--line);box-shadow:0 6px 0 var(--duo-ombre),0 20px 40px rgba(0,0,0,.2)!important}
  .sig-feuille::before,.pq-feuille::before,.abo-feuille::before{display:none}}
.pq-bulle{border-radius:20px 20px 20px 6px!important;box-shadow:0 3px 0 var(--duo-ombre)}
.pq-minis img{border-radius:var(--duo-r-s)!important;box-shadow:0 3px 0 var(--duo-ombre)}

/* ---------- 10. petits messages (toasts) : pilules arrondies, ombre pleine ---------- */
.h-toast,.mem-toast{border-radius:999px!important;padding:12px 20px!important;font-family:var(--display);font-weight:800;box-shadow:0 4px 0 color-mix(in srgb,var(--ink) 55%,#000)!important}
.df-toast,.iv-toast{border-radius:999px!important;box-shadow:0 4px 0 color-mix(in srgb,var(--ogre-d) 55%,#000)!important}
.t-demo{box-shadow:inset 0 5px 0 rgba(255,255,255,.12),0 -6px 0 rgba(30,60,20,.18)!important}
.t-demo .t-co{box-shadow:0 3px 0 rgba(0,0,0,.2)}

/* ---------- 11. écrans plein écran (cartes, défi, groupes) et chargement ---------- */
.cm-top b{font-size:1.3rem!important;font-weight:800}
.moi-card{border-radius:var(--duo-r-xl)!important}
.moi-load{justify-content:center;font-family:var(--display);font-weight:700}
.h-empty{border:var(--duo-bord) solid var(--line);border-radius:var(--duo-r);background:var(--card);box-shadow:0 var(--duo-h) 0 var(--duo-ombre);margin:6px 0 14px}

@media (prefers-reduced-motion: reduce){
  .btn,.back,.cm-x,.pq-x,.h-arrows button,.g-x,.df-son,.g-cam,.h-day .n,.gt-c,.dv-act,.knowbtn,.j-pl,.rg-seg button,.seg button,.g-chip,.opt,.g-type button{transition:none}
  .btn:active,.back:active,.cm-x:active,.h-day:active .n,.dv-act:active,.knowbtn:active,.j-pl:active,.rg-seg button:active,.g-chip:active,.opt:active,.gt-c:active,.plat-c:active,.doc-rg:active,.gr-carte:active,.tile:active{transform:none!important}}
/* plus de contour bleu autour des boutons : rien au toucher / à la souris ; au clavier, un anneau vert discret (accessibilité) */
html{-webkit-tap-highlight-color:transparent}
button:focus,a:focus,[role=button]:focus,input:focus,select:focus,textarea:focus,label:focus,summary:focus{outline:none}
:focus:not(:focus-visible){outline:none!important}
:focus-visible{outline:2px solid rgba(62,154,53,.55)!important;outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none!important}