/* ═══════════════════════════════════════════════════════════════
   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; }
}