/* ═══════════════════════════════════════════════════════════════
   Widgets — présentation commune (Portail, « Mes widgets »)

   Tout vient des variables du thème : un widget suit donc la couleur, le
   thème et le style choisis par chaque personne. Le contenu d'un widget
   s'adapte à sa taille grâce aux unités de conteneur (cqw / cqh / cqmin).
   ═══════════════════════════════════════════════════════════════ */

/* Teintes proposées pour les tuiles, widgets et pages. « violet » suit la
   couleur d'accent de la personne : c'est la couleur du site. */
.teinte-violet { --t1: var(--accent);  --t2: var(--accent-2); }
.teinte-bleu   { --t1: #2563EB;        --t2: #38BDF8; }
.teinte-vert   { --t1: #059669;        --t2: #34D399; }
.teinte-orange { --t1: #D97706;        --t2: #FBBF24; }
.teinte-rouge  { --t1: #DC2626;        --t2: #FB7185; }
.teinte-gris   { --t1: #4B5563;        --t2: #9CA3AF; }
.pastille-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--radius-sm); font-size: 1.125rem; color: #fff;
  background: linear-gradient(135deg, var(--t1, var(--accent)), var(--t2, var(--accent-2)));
}
.pastille-ico .emoji { font-size: 1rem; line-height: 1; }

/* ── Le cadre d'un widget ─────────────────────────────────────── */
.wg {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  padding: 12px 14px 13px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-backdrop-filter: var(--verre); backdrop-filter: var(--verre);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.wg:hover { border-color: rgb(var(--accent-rgb) / .35); }
.wg-tete { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 8px; flex-shrink: 0; }
.wg-ico {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px; font-size: .8125rem; color: #fff;
  background: linear-gradient(135deg, var(--t1, var(--accent)), var(--t2, var(--accent-2)));
}
.wg-ico .emoji { font-size: .75rem; line-height: 1; }
.wg-titre {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-dim);
}
.wg-corps { flex: 1; min-height: 0; overflow: hidden; container-type: size; }
.wg-corps > * { max-height: 100%; }
.wg-lien-tete { font-size: .6875rem; color: var(--accent-light); white-space: nowrap; }

/* Contenus courants */
.wg-vide { display: flex; align-items: center; gap: 7px; font-size: .78125rem; color: var(--ink-dim); padding: 4px 0; }
.wg-vide .ti { font-size: 1rem; opacity: .7; }
.wg-liste { display: flex; flex-direction: column; overflow-y: auto; max-height: 100%; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.wg-item {
  display: flex; align-items: baseline; gap: 9px; padding: 5px 0; min-width: 0;
  font-size: .78125rem; color: var(--ink); text-decoration: none;
}
.wg-item + .wg-item { border-top: 1px solid var(--line-soft); }
a.wg-item:hover { color: var(--accent-light); text-decoration: none; }
.wg-item-h { flex-shrink: 0; min-width: 2.2em; font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-dim); }
.wg-item-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-item-s { display: block; font-size: .6875rem; color: var(--ink-dim); }
.wg-point { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--blue)); transform: translateY(-1px); }
.wg-pied { display: block; margin-top: 8px; font-size: .71875rem; color: var(--accent-light); }

.wg-nombre-ligne { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wg-nombre {
  font-family: var(--font-corps); font-weight: 800; line-height: 1; color: var(--accent-light);
  font-size: clamp(1.5rem, 30cqmin, 3.6rem); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.wg-nombre small { font-size: .45em; font-weight: 700; opacity: .8; margin-left: 2px; }
.wg-legende { font-size: .75rem; line-height: 1.35; color: var(--ink-muted); }
.wg-barre { display: flex; height: 7px; border-radius: 999px; overflow: hidden; background: var(--line); margin-top: 10px; }
.wg-barre > span { display: block; height: 100%; }
.wg-puces { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: .71875rem; color: var(--ink-muted); }
.wg-puces b { color: var(--c); font-weight: 700; }
.wg-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.wg-grille-2 .wg-nombre { font-size: clamp(1.1rem, 17cqmin, 1.7rem); color: var(--c, var(--accent-light)); }
.wg-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.wg-badge { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-size: 1rem; }

/* Horloge */
.wg-centre { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; }
.wg-heure {
  font-family: var(--font-mono); font-weight: 800; line-height: 1; color: var(--white); letter-spacing: -.02em;
  font-size: clamp(1.6rem, 38cqmin, 4.2rem); font-variant-numeric: tabular-nums;
}
.wg-heure.fin { font-weight: 200; letter-spacing: .06em; }
.wg-heure.degrade { background: linear-gradient(135deg, var(--accent-light), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(1.8rem, 50cqmin, 5rem); }
.wg-date { margin-top: 6px; font-size: .75rem; color: var(--ink-muted); text-transform: capitalize; }
.wg-analogique { display: flex; align-items: center; gap: 12px; height: 100%; }
.wg-analogique svg { height: min(100%, 100cqw); aspect-ratio: 1; flex-shrink: 0; }
.wg-fuseau { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; font-size: .8125rem; }
.wg-fuseau + .wg-fuseau { border-top: 1px solid var(--line-soft); }
.wg-fuseau span { color: var(--ink-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-fuseau b { color: var(--white); font-family: var(--font-mono); }

/* Météo */
.wg-meteo { display: flex; align-items: center; gap: 14px; height: 100%; }
.wg-meteo-ico { font-size: clamp(2rem, 36cqmin, 3.4rem); line-height: 1; color: var(--amber); }
.wg-temp { font-family: var(--font-corps); font-weight: 800; line-height: 1; color: var(--white); font-size: clamp(1.4rem, 26cqmin, 2.6rem); }
.wg-meteo-det { margin-top: 4px; font-size: .75rem; line-height: 1.5; color: var(--ink-muted); }
.wg-jours { display: flex; gap: 6px; margin-top: 8px; }
.wg-jour { flex: 1; min-width: 0; padding: 7px 4px; text-align: center; background: var(--paper-mid); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.wg-jour small { display: block; font-size: .625rem; text-transform: uppercase; color: var(--ink-dim); }
.wg-jour .ti { display: block; margin: 2px auto; font-size: 1.1875rem; color: var(--amber); }
.wg-jour b { font-size: .75rem; color: var(--ink); }
.wg-jour span { font-size: .6875rem; color: var(--ink-dim); margin-left: 3px; }
.wg-detail-meteo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; font-size: .71875rem; color: var(--ink-muted); }
.wg-detail-meteo .ti { margin-right: 4px; color: var(--ink-dim); }

/* Post-it (le papier garde le même aspect dans les deux thèmes) */
.wg.papier { border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); color: #1f2937; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wg.papier.jaune  { background: linear-gradient(160deg, #FDE68A, #FCD34D); }
.wg.papier.rose   { background: linear-gradient(160deg, #FBCFE8, #F9A8D4); }
.wg.papier.bleu   { background: linear-gradient(160deg, #BFDBFE, #93C5FD); }
.wg.papier.vert   { background: linear-gradient(160deg, #BBF7D0, #86EFAC); }
.wg.papier.violet { background: linear-gradient(160deg, #DDD6FE, #C4B5FD); }
.wg.papier .wg-titre { color: rgb(31 41 55 / .6); }
.wg.papier .wg-ico { background: rgb(31 41 55 / .14); color: #1f2937; }
.wg-note { width: 100%; height: 100%; padding: 0; background: transparent; border: none; outline: none; resize: none; font: inherit; font-size: .84375rem; line-height: 1.55; color: #1f2937; }
.wg-note::placeholder { color: rgb(31 41 55 / .45); }
.wg-note.lignes { background-image: repeating-linear-gradient(transparent, transparent 21px, rgb(0 0 0 / .13) 22px); line-height: 22px; }
.wg-memo { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; white-space: pre-wrap; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: #1f2937; cursor: text; overflow: auto; }
.wg-cases { max-height: 100%; overflow-y: auto; }
.wg-case { display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; font-size: .8125rem; cursor: pointer; }
.wg-case input { margin-top: 3px; flex-shrink: 0; }
.wg-case.faite span { text-decoration: line-through; opacity: .55; }
.wg-ajout { width: 100%; padding: 4px 0; margin-top: 2px; background: transparent; border: none; outline: none; font: inherit; font-size: .8125rem; color: inherit; }
.wg-ajout::placeholder { color: inherit; opacity: .5; }

/* Widgets créés */
.wp-texte { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; color: var(--ink); font-size: .875rem; max-height: 100%; overflow-y: auto; }
.wp-texte.t-s { font-size: .75rem; } .wp-texte.t-l { font-size: 1.125rem; line-height: 1.4; font-weight: 600; color: var(--white); }
.wp-texte.a-centre { text-align: center; }
.wp-puces { margin: 0; padding: 0; list-style: none; overflow-y: auto; max-height: 100%; counter-reset: n; }
.wp-puces li { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; font-size: .8125rem; color: var(--ink); overflow-wrap: anywhere; }
.wp-puces.puces li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--t1, var(--accent)); }
.wp-puces.numeros li { counter-increment: n; }
.wp-puces.numeros li::before { content: counter(n); flex-shrink: 0; min-width: 1.4em; font-weight: 700; color: var(--accent-light); font-variant-numeric: tabular-nums; }
.wp-puces.cases li { cursor: pointer; }
.wp-puces.cases li.faite span { text-decoration: line-through; color: var(--ink-dim); }
.wp-liens.liste { display: flex; flex-direction: column; overflow-y: auto; max-height: 100%; }
.wp-lien { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 4px; font-size: .8125rem; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.wp-lien:hover { background: rgb(var(--accent-rgb) / .09); color: var(--accent-light); text-decoration: none; }
.wp-lien .ti, .wp-lien .emoji { flex-shrink: 0; color: var(--t1, var(--accent-light)); }
.wp-lien span.t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-lien .ti-external-link { font-size: .8125rem; opacity: .5; color: var(--ink-dim); }
.wp-liens.boutons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; overflow-y: auto; max-height: 100%; }
.wp-liens.boutons .wp-lien { flex-direction: column; justify-content: center; gap: 6px; padding: 11px 6px; text-align: center; background: var(--paper-mid); border: 1px solid var(--line); border-radius: var(--radius); }
.wp-liens.boutons .wp-lien .ti { font-size: 1.375rem; }
.wp-liens.boutons .wp-lien span.t { white-space: normal; font-size: .75rem; font-weight: 600; }
.wp-image { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px; }
.wp-image img { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.wp-image.remplir img { object-fit: cover; }
.wp-image figcaption { font-size: .71875rem; color: var(--ink-muted); text-align: center; flex-shrink: 0; }
.wp-image { margin: 0; }
.wp-web { width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); background: #fff; }
.wp-aide { font-size: .71875rem; color: var(--ink-dim); margin-top: 4px; }

/* ── Cartes du sélecteur et de la page « Mes widgets » ─────────── */
.catalogue { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cat-carte {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform var(--ease), border-color var(--ease), background var(--ease);
}
.cat-carte:hover { transform: translateY(-2px); border-color: var(--accent); }
.cat-carte[disabled] { opacity: .5; cursor: default; transform: none; border-color: var(--line); }
.cat-carte .nom { display: block; font-size: .84375rem; font-weight: 600; color: var(--ink); }
.cat-carte .desc { display: block; margin-top: 1px; font-size: .71875rem; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cat-carte .corps { flex: 1; min-width: 0; }
.cat-groupe { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.cat-groupe::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cat-groupe:first-child { margin-top: 4px; }

/* Choix d'une présentation, d'une couleur, d'une icône */
.choix-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
.choix { padding: 9px 7px; font: inherit; font-size: .75rem; text-align: center; color: var(--ink-muted); cursor: pointer; background: var(--paper-mid); border: 1.5px solid var(--line); border-radius: var(--radius-sm); transition: border-color var(--ease), color var(--ease); }
.choix:hover { color: var(--ink); border-color: var(--accent-light); }
.choix.actif { color: var(--ink); border-color: var(--accent); background: rgb(var(--accent-rgb) / .12); }
.choix .ti { display: block; margin: 0 auto 4px; font-size: 1.25rem; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { width: 32px; height: 32px; padding: 0; cursor: pointer; border-radius: 9px; border: 2px solid transparent; background: linear-gradient(135deg, var(--t1), var(--t2)); transition: transform var(--ease); }
.pastille:hover { transform: scale(1.08); }
.pastille.actif { border-color: var(--white); box-shadow: 0 0 0 2px var(--accent); }
.pastille.papier-jaune { --t1: #FDE68A; --t2: #FCD34D; } .pastille.papier-rose { --t1: #FBCFE8; --t2: #F9A8D4; }
.pastille.papier-bleu { --t1: #BFDBFE; --t2: #93C5FD; } .pastille.papier-vert { --t1: #BBF7D0; --t2: #86EFAC; } .pastille.papier-violet { --t1: #DDD6FE; --t2: #C4B5FD; }
.icones-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; max-height: 150px; overflow-y: auto; padding: 2px; }
.icone-choix { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; cursor: pointer; color: var(--ink-muted); background: var(--paper-mid); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.icone-choix:hover { color: var(--ink); border-color: var(--accent-light); }
.icone-choix.actif { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* Éditeur de widget : formulaire à gauche, aperçu à droite */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.studio-apercu { position: sticky; top: 0; }
.studio-apercu .wg { position: relative; width: 100%; }
.studio-apercu .titre-apercu { margin: 0 0 8px; font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-dim); }
.liste-editable { display: flex; flex-direction: column; gap: 6px; }
.ligne-editable { display: flex; gap: 6px; align-items: center; }
.ligne-editable .input { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .studio { grid-template-columns: 1fr; }
  .studio-apercu { position: static; order: -1; }
  .catalogue { grid-template-columns: 1fr; }
}

/* ───── Widgets programmés avec des blocs (Scratch WorkHub) ───── */
.sc { position: relative; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.sc-contenu { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; overflow-wrap: anywhere; }
.sc.centre .sc-contenu { align-items: center; text-align: center; }
.sc.cliquable { cursor: pointer; }
.sc-titre { font-size: .95rem; font-weight: 700; color: var(--ink); }
.sc-texte { color: var(--ink); line-height: 1.45; white-space: pre-wrap; }
.sc-texte.t-s { font-size: .75rem; } .sc-texte.t-m { font-size: .875rem; } .sc-texte.t-l { font-size: 1.15rem; font-weight: 600; } .sc-texte.t-xl { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.c-accent { color: var(--t1, var(--accent-light)) !important; } .c-vert { color: var(--green) !important; } .c-rouge { color: var(--red) !important; } .c-orange { color: var(--amber) !important; }
.c-bleu { color: #3B82F6 !important; } .c-violet { color: #8B5CF6 !important; } .c-gris { color: var(--ink-dim) !important; }
.sc-nombre { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sc-nombre .n { font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-nombre .l { font-size: .78rem; color: var(--ink-muted); }
.sc-ligne { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; background: var(--paper-dim); }
.sc-ligne > .ti { color: var(--t1, var(--accent-light)); font-size: 1rem; }
.sc-ligne .t { display: flex; flex-direction: column; min-width: 0; font-size: .82rem; color: var(--ink); }
.sc-ligne .t small { font-size: .7rem; color: var(--ink-dim); }
.sc-liste { margin: 0; padding-left: 1.2em; font-size: .82rem; color: var(--ink); display: flex; flex-direction: column; gap: 3px; }
.sc-liste.etiquettes { list-style: none; padding: 0; flex-direction: row; flex-wrap: wrap; gap: 5px; }
.sc-liste.etiquettes li { padding: 2px 9px; border-radius: 999px; background: rgb(var(--accent-rgb) / .14); color: var(--accent-light); font-size: .74rem; }
.sc-liste li.vide { color: var(--ink-dim); list-style: none; }
.sc-progression { display: flex; align-items: center; gap: 8px; width: 100%; }
.sc-progression .piste { flex: 1; height: 10px; border-radius: 6px; background: var(--paper-dim); overflow: hidden; }
.sc-progression .remplie { height: 100%; border-radius: 6px; background: var(--t1, var(--accent)); transition: width .4s ease; }
.sc-progression.c-vert .remplie { background: var(--green); } .sc-progression.c-rouge .remplie { background: var(--red); } .sc-progression.c-orange .remplie { background: var(--amber); }
.sc-progression.c-bleu .remplie { background: #3B82F6; } .sc-progression.c-violet .remplie { background: #8B5CF6; } .sc-progression.c-gris .remplie { background: var(--ink-dim); }
.sc-progression .p { font-size: .72rem; color: var(--ink-muted); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.sc-progression[class*="c-"] { color: inherit !important; }
.sc-icone { line-height: 1; } .sc-icone.t-s { font-size: 1rem; } .sc-icone.t-m { font-size: 1.6rem; } .sc-icone.t-l { font-size: 2.6rem; } .sc-icone.t-xl { font-size: 4rem; }
.sc-icone.c-normal { color: var(--t1, var(--accent-light)); }
.sc-image { margin: 0; } .sc-image img { display: block; max-width: 100%; max-height: 160px; border-radius: 8px; }
.sc-image.vide { font-size: .75rem; color: var(--ink-dim); }
.sc-bouton { align-self: flex-start; padding: 7px 14px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; color: #fff; background: var(--t1, var(--accent)); transition: transform .1s; }
.sc.centre .sc-bouton { align-self: center; }
.sc-bouton:active { transform: scale(.95); }
.sc-bouton.c-discret { background: var(--paper-dim); color: var(--ink) !important; border-color: var(--line); }
.sc-bouton.c-vert { background: var(--green); color: #fff !important; } .sc-bouton.c-rouge { background: var(--red); color: #fff !important; } .sc-bouton.c-accent { color: #fff !important; }
.sc-lien { font-size: .82rem; color: var(--accent-light); font-weight: 600; }
.sc-graphique { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding-top: 4px; }
.sc-graphique .col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.sc-graphique .barre { width: 100%; max-width: 34px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--t2, var(--accent-light)), var(--t1, var(--accent))); transition: height .4s ease; }
.sc-graphique .v { font-size: .66rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.sc-graphique .nom { font-size: .64rem; color: var(--ink-dim); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-separateur { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
.sc-bulles { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; pointer-events: none; }
.sc-bulle { max-width: 92%; padding: 7px 12px; border-radius: 14px; background: #fff; color: #1f1b2e; font-size: .8rem; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); animation: sc-pop .18s ease both; }
@keyframes sc-pop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.sc-erreur { font-size: .7rem; color: var(--red); padding-top: 4px; }
.sc-confettis { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sc-confettis span { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; animation: sc-tombe 2.2s ease-in forwards; }
@keyframes sc-tombe { to { top: 110%; transform: rotate(540deg) translateX(20px); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .sc-confettis span { animation-duration: .01s; } .sc-bulle { animation: none; } }

/* ───── Éditeur de blocs (plein écran) ───── */
.sce { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); }
.sce-tete { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--paper-mid); flex-wrap: wrap; }
.sce-nom { flex: 1 1 200px; max-width: 360px; font-weight: 700; }
.sce-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.sce-drapeau, .sce-stop { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); cursor: pointer; display: grid; place-items: center; font-size: 1.15rem; }
.sce-drapeau { color: #2DBE60; } .sce-stop { color: #E5484D; }
.sce-drapeau:hover, .sce-stop:hover { border-color: var(--accent); }
.sce-corps { flex: 1; min-height: 0; display: flex; }
.sce-blockly { flex: 1; min-width: 0; position: relative; }
.sce-charge { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-dim); font-weight: 600; }
.sce-apercu { width: 360px; flex: none; overflow-y: auto; padding: 14px; border-left: 1px solid var(--line); background: var(--paper-mid); display: flex; flex-direction: column; gap: 10px; }
.sce-apercu-titre { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-dim); }
.sce-scene { flex: none; display: flex; justify-content: center; padding: 14px; border-radius: 14px; background: repeating-conic-gradient(rgb(127 127 127 / .06) 0 25%, transparent 0 50%) 0 0 / 22px 22px; overflow: auto; }
.sce-scene .wg { position: relative; max-width: 100%; flex: none; }
.sce-etat { margin: 0; font-size: .74rem; color: var(--ink-dim); }
.sce-astuce { font-size: .78rem; line-height: 1.55; color: var(--ink-muted); padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
/* Blockly : polices et menus aux couleurs du site */
.sce .blocklyToolboxDiv { border-right: 1px solid var(--line); padding-top: 6px; }
.sce .blocklyTreeLabel, .sce .blocklyToolboxCategoryLabel { font-family: Inter, system-ui, sans-serif; font-weight: 600; color: var(--ink); font-size: .8rem; }
.sce .blocklyTreeRow, .sce .blocklyToolboxCategory { padding: 5px 8px; margin: 1px 4px; border-radius: 8px; height: auto; }
.blocklyWidgetDiv .blocklyMenu, .blocklyDropDownDiv { font-family: Inter, system-ui, sans-serif; z-index: 1000 !important; }
.blocklyWidgetDiv, .blocklyDropDownDiv, .blocklyTooltipDiv { z-index: 1000 !important; }
.sce-vues, .sce-plus, .sce-saut, .sce-court { display: none; }
.sce-menu { display: flex; flex-direction: column; gap: 6px; }
.sce-menu .btn { justify-content: flex-start; width: 100%; }
/* Tablette en portrait : blocs en haut, aperçu en dessous */
@media (max-width: 860px) {
  .sce-corps { flex-direction: column; }
  .sce-blockly { flex: 1 1 60%; min-height: 0; }
  .sce-apercu { width: auto; border-left: 0; border-top: 1px solid var(--line); flex: 1 1 40%; min-height: 0; }
  .sce-txt { display: none; }
}
/* Téléphone (portrait ou paysage) : « Blocs » ou « Aperçu », chacun en plein écran */
@media (max-width: 699px), (max-height: 560px) {
  .sce-tete { gap: 6px; padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); flex-wrap: nowrap; }
  .sce-tete > .btn { padding: 0 9px; min-height: 36px; }
  .sce-nom { flex: 1 1 0; min-width: 0; max-width: none; height: 36px; font-size: .9rem; }
  .sce-actions { display: contents; }
  .sce-secondaire { display: none !important; }
  .sce-vues { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); gap: 2px; flex: none; }
  .sce-vues button { border: 0; background: none; color: var(--ink-muted); font: inherit; font-size: .8rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; }
  .sce-vues button.actif { background: var(--accent); color: #fff; }
  .sce-drapeau, .sce-stop, .sce-plus { width: 36px; height: 36px; flex: none; }
  .sce-plus { display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font-size: 1.1rem; }
  .sce-enreg { flex: none; min-height: 36px; }
  .sce-long { display: none; } .sce-court { display: inline; }
  .sce-corps { flex-direction: column; }
  .sce-blockly, .sce-apercu { flex: 1 1 auto; min-height: 0; width: auto; border: 0; }
  .sce-corps[data-vue="blocs"] .sce-apercu { display: none; }
  .sce-corps[data-vue="apercu"] .sce-blockly { display: none; }
  .sce-apercu { padding: 12px; }
  .sce-scene { padding: 10px; }
  .sce .blocklyToolboxCategoryLabel, .sce .blocklyTreeLabel { font-size: .72rem; }
  .sce .blocklyTreeRow, .sce .blocklyToolboxCategory { padding: 3px 5px; margin: 1px 2px; }
}
/* Téléphone en portrait : deux rangées (nom + enregistrer, puis vues + drapeau) */
@media (max-width: 699px) {
  .sce-tete { flex-wrap: wrap; }
  .sce-saut { display: block; flex-basis: 100%; height: 0; order: 3; }
  .sce-tete > [data-a="fermer"] { order: 0; } .sce-nom { order: 1; } .sce-enreg { order: 2; }
  .sce-vues { order: 4; margin-right: auto; } .sce-drapeau { order: 5; } .sce-stop { order: 6; } .sce-plus { order: 7; }
}