/* Ashly's World : la feuille de style.
 *
 * Lecture du brief : un espace de travail prive pour une creatrice beaute et
 * lifestyle, langage doux et « girly » (rose poudre, papillons, beaucoup d'air),
 * en CSS natif, polices servies par le site.
 * Molettes : variance 5 (une appli doit rester previsible), mouvement 4 (des
 * transitions douces, des papillons seulement pour feter une publication),
 * densite 4.
 *
 * Regles tenues :
 *  - UNE couleur d'accent, le rose. Les etats restent vert, ambre, rouge, toujours
 *    doubles d'une icone et d'un mot. Les familles de format (court, long, image)
 *    ont une teinte douce, et le mot reste ecrit.
 *  - Theme : blanc et rose seulement, meme sur un appareil regle en sombre.
 *  - Rayons : panneaux 20 px, cartes 16 px, champs 12 px, boutons et pastilles en
 *    pilule. Rien d'autre.
 *  - Aucune couleur en dur hors de :root (et de l'impression).
 *  - La CSP interdit les styles en ligne : tout passe par ici.
 */

@font-face {
  font-family: "Outfit";
  src: url("polices/outfit-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  src: url("polices/outfit-variable-ext.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Shrikhand";
  src: url("polices/shrikhand.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --fond: #fffbfd;
  --surface: #fffeff;
  --surface-2: #fdeef4;
  --surface-3: #f5d9e5;
  --trait: #f0d3df;
  --trait-fort: #dfb0c4;
  --encre: #3a1b2b;
  --encre-2: #6a4458;
  --encre-3: #7d5568;
  --rose: #c2185b;
  --rose-fonce: #9e1249;
  --rose-doux: #fbd6e5;
  --rose-texte: #ad1652;
  --sur-rose: #fffafc;
  --lilas: #6b3fae;
  --lilas-fond: #efe5fb;
  --pervenche: #3557ad;
  --pervenche-fond: #e5ebfb;
  --peche: #9a4a1b;
  --peche-fond: #fde8da;
  --ok: #1b7446;
  --ok-fond: #e1f3e8;
  --attention: #8a5a00;
  --attention-fond: #fdefcf;
  --alerte: #b0251d;
  --alerte-fond: #fde3df;
  --ombre: 0 1px 2px rgb(122 30 72 / 0.06), 0 8px 24px -12px rgb(122 30 72 / 0.18);
  --ombre-forte: 0 2px 4px rgb(122 30 72 / 0.08), 0 18px 40px -18px rgb(122 30 72 / 0.32);
  --halo: radial-gradient(120% 140% at 0% 0%, #ffe6f1 0%, #fffbfd 58%, #f7eefc 100%);

  --sans: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --marque: "Shrikhand", "Outfit", ui-serif, Georgia, serif;
  --t-xs: 0.75rem;
  --t-sm: 0.84375rem;
  --t-md: 0.9375rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.375rem;
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --r-panneau: 20px;
  --r-carte: 16px;
  --r-champ: 12px;
  --r-pilule: 999px;
  --menu: 248px;
  --doux: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Un seul theme, blanc et rose, voulu par Pierre le 08/11 : le site ne suit PLUS le
   theme sombre de l'appareil. */

/* ------------------------------------------------------------------ socle */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0; }
a { color: var(--rose-texte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rose-fonce); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 500; margin-bottom: var(--e2); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; border-radius: 6px; }
.principal:focus, .seul:focus { outline: none; }

/* Tout en !important : un selecteur plus precis (« .segments legend { width: 100% } »)
   ecrasait la largeur, et une etiquette cachee de 1360 px elargissait la page. */
.visuel-cache {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
}
.evitement {
  position: absolute; left: var(--e4); top: -60px; z-index: 30;
  background: var(--rose); color: var(--sur-rose); padding: var(--e2) var(--e4);
  border-radius: var(--r-pilule); text-decoration: none; font-weight: 500;
}
.evitement:focus { top: var(--e3); }

.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.titre-ic { width: 1em; height: 1em; margin-right: var(--e2); color: var(--rose); }
h2 > .ic { color: var(--rose); margin-right: var(--e2); }
.js .sans-js { display: none; }

/* ------------------------------------------------------------------ cadre */

.cadre { display: grid; grid-template-columns: var(--menu) minmax(0, 1fr); min-height: 100dvh; }
/* Le fond du menu court sur toute la hauteur, meme quand la page est plus longue que l'ecran. */
.cadre { background: linear-gradient(to right, var(--surface) calc(var(--menu) - 1px), var(--trait) calc(var(--menu) - 1px), var(--trait) var(--menu), transparent var(--menu)); }
.bandeau {
  position: sticky; top: 0; align-self: start; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--e5);
  padding: var(--e5) var(--e4);
  background: var(--surface);
  border-right: 1px solid var(--trait);
}
.marque {
  display: flex; align-items: center; gap: var(--e2);
  text-decoration: none; color: var(--encre); padding: 0 var(--e2);
}
.marque .papillon { color: var(--rose); display: inline-flex; }
.marque .papillon .ic { width: 34px; height: 34px; }
.marque .mot { font-family: var(--marque); font-size: 1.32rem; line-height: 1; color: var(--rose-texte); }
.marque:hover .papillon .ic { animation: battement 0.9s var(--doux); }

.menu ul { display: flex; flex-direction: column; gap: 2px; }
.menu a, .lien-reglages {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 42px; padding: var(--e2) var(--e3);
  border-radius: var(--r-pilule);
  color: var(--encre-2); text-decoration: none; font-weight: 500;
  transition: background-color 0.2s var(--doux), color 0.2s var(--doux);
}
.menu a:hover, .lien-reglages:hover { background: var(--surface-2); color: var(--encre); }
.menu a[aria-current="page"], .lien-reglages[aria-current="page"] {
  background: var(--rose-doux); color: var(--rose-texte);
}
.menu a .ic, .lien-reglages .ic { width: 20px; height: 20px; }
.pied-menu { margin-top: auto; display: flex; flex-direction: column; gap: var(--e3); }
.choix-langue { display: flex; align-items: center; gap: var(--e2); padding: 0 var(--e3); color: var(--encre-2); }
.choix-langue select { flex: 1; min-width: 0; }

.principal {
  min-width: 0;
  padding: var(--e6) clamp(16px, 4vw, 48px) var(--e7);
  /* Toute la largeur de l'ecran (demande de Pierre, 08/11) ; les formulaires gardent
     leur propre largeur lisible (.formulaire, .panneau.etroit). */
  width: 100%;
  display: flex; flex-direction: column; gap: var(--e5);
}
.bandeau-demo {
  display: flex; gap: var(--e2); align-items: center; align-self: flex-start;
  background: var(--lilas-fond); color: var(--lilas);
  padding: var(--e1) var(--e3); border-radius: var(--r-pilule); font-size: var(--t-sm);
}

/* ------------------------------------------------------------------ messages */

.messages { display: flex; flex-direction: column; gap: var(--e2); }
.message {
  display: flex; gap: var(--e2); align-items: flex-start;
  padding: var(--e3) var(--e4); border-radius: var(--r-carte);
  font-weight: 500;
}
.message .ic { margin-top: 0.15em; }
.message.bon { background: var(--ok-fond); color: var(--ok); }
.message.refus { background: var(--alerte-fond); color: var(--alerte); }

/* ------------------------------------------------------------------ boutons */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 42px; padding: 0 var(--e5);
  border: 1px solid transparent; border-radius: var(--r-pilule);
  font: inherit; font-weight: 500; line-height: 1.1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--doux), transform 0.15s var(--doux), box-shadow 0.2s var(--doux);
}
.bouton:active { transform: scale(0.98); }
.bouton.petit { min-height: 34px; padding: 0 var(--e4); font-size: var(--t-sm); }
.bouton.large { width: 100%; }
.bouton.plein { background: var(--rose); color: var(--sur-rose); box-shadow: var(--ombre); }
.bouton.plein:hover { background: var(--rose-fonce); color: var(--sur-rose); }
.bouton.doux { background: var(--rose-doux); color: var(--rose-texte); }
.bouton.doux:hover { background: var(--surface-3); color: var(--rose-fonce); }
.bouton.discret { background: transparent; color: var(--encre-2); border-color: var(--trait-fort); }
.bouton.discret:hover { background: var(--surface-2); color: var(--encre); }
.bouton.danger { background: var(--alerte-fond); color: var(--alerte); }
.bouton.danger:hover { border-color: var(--alerte); }
.lien-bouton {
  display: inline-flex; align-items: center; gap: var(--e1);
  background: none; border: 0; padding: var(--e1) 0; min-height: 28px;
  font: inherit; font-size: var(--t-sm); color: var(--rose-texte);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.lien-bouton.danger { color: var(--alerte); }
.lien-fleche { display: inline-flex; align-items: center; gap: var(--e1); font-weight: 500; text-decoration: none; min-height: 28px; }
.lien-fleche:hover .ic { transform: translateX(3px); }
.lien-fleche .ic { transition: transform 0.2s var(--doux); }
.lien-externe { display: inline-flex; align-items: center; gap: var(--e1); min-height: 24px; }

/* ------------------------------------------------------------------ champs */

.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label, .etiquette { font-size: var(--t-sm); font-weight: 500; color: var(--encre-2); }
.requis { color: var(--rose-texte); }
input, select, textarea {
  font: inherit; color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait-fort); border-radius: var(--r-champ);
  padding: 9px var(--e3); min-height: 42px; width: 100%; min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--encre-3); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-doux);
}
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--rose); margin: 0; flex: none; }
input[type="file"] { padding: 7px; }
.aide { font-size: var(--t-sm); color: var(--encre-3); }
.champ.en-ligne { flex-direction: row; align-items: center; gap: var(--e2); }
.champ.en-ligne select { width: auto; }
.coche { display: inline-flex; align-items: center; gap: var(--e2); min-height: 40px; cursor: pointer; font-weight: 500; color: var(--encre); }
.coche-champ { justify-content: flex-end; }
.pile { display: flex; flex-direction: column; gap: var(--e4); }
.pile.serree { gap: var(--e2); }
.duo, .trio { display: grid; gap: var(--e4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rangee-champs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.rangee-champs .champ { flex: 1 1 140px; }
.rangee-champs .champ.large { flex: 3 1 240px; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.formulaire { display: flex; flex-direction: column; gap: var(--e5); max-width: 860px; }
.groupe-champs { display: flex; flex-direction: column; gap: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--trait); }
.etroit-champ { max-width: 220px; }

.segments { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.segments legend { width: 100%; font-size: var(--t-sm); color: var(--encre-2); }
.segment {
  display: inline-flex; align-items: center; gap: var(--e2);
  min-height: 36px; padding: 0 var(--e4);
  border: 1px solid var(--trait-fort); border-radius: var(--r-pilule);
  background: var(--surface); color: var(--encre-2); cursor: pointer;
  font-size: var(--t-sm); font-weight: 500; text-decoration: none;
}
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment:has(input:checked), .segment.choisi, .segment[aria-current] {
  background: var(--rose-doux); color: var(--rose-texte); border-color: transparent;
}
.segment:has(input:focus-visible) { outline: 3px solid var(--rose); outline-offset: 2px; }
.pastilles-choix { display: flex; flex-wrap: wrap; gap: var(--e2); }
.pastille-choix { display: inline-flex; cursor: pointer; }
.pastille-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pastille-choix span {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--e4);
  border-radius: var(--r-pilule); border: 1px solid var(--trait-fort);
  font-size: var(--t-sm); color: var(--encre-2); background: var(--surface);
}
.pastille-choix input:checked + span { background: var(--rose); color: var(--sur-rose); border-color: var(--rose); }
.pastille-choix input:focus-visible + span { outline: 3px solid var(--rose); outline-offset: 2px; }

/* ------------------------------------------------------------------ panneaux */

.panneau {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-panneau);
  padding: var(--e5);
  display: flex; flex-direction: column; gap: var(--e4);
  min-width: 0;
  box-shadow: var(--ombre);
}
.panneau > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.panneau.etroit { max-width: 520px; }
.duo-panneaux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }

.en-tete-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e4); }
.en-tete-page h1 { display: flex; align-items: center; }
.sous-titre { color: var(--encre-2); margin-top: var(--e2); display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.fil { font-size: var(--t-sm); margin-bottom: var(--e1); }
.fil a { color: var(--encre-3); }
.compteur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 var(--e2); margin-left: var(--e2);
  border-radius: var(--r-pilule); background: var(--surface-2); color: var(--encre-2);
  font-size: var(--t-xs); font-weight: 650;
}

/* ------------------------------------------------------------------ ecrans vides */

.vide { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e2); padding: var(--e5); border-radius: var(--r-carte); }
.vide-titre { font-weight: 650; }
.vide-texte { color: var(--encre-2); max-width: 60ch; }
.vide.attente { border: 1.5px dashed var(--trait-fort); }
.vide.bon { background: var(--ok-fond); color: var(--ok); }
.vide.bon .vide-texte { color: var(--ok); }
.vide.reponse { background: var(--surface-2); }
.vide .signe .ic { width: 28px; height: 28px; }
.colonne-vide { color: var(--encre-3); font-size: var(--t-sm); padding: var(--e3); border: 1.5px dashed var(--trait); border-radius: var(--r-carte); text-align: center; }

/* ------------------------------------------------------------------ marques */

.format { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--e2); border-radius: var(--r-pilule); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; }
.format .puce { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.format.court { background: var(--lilas-fond); color: var(--lilas); }
.format.long { background: var(--pervenche-fond); color: var(--pervenche); }
.format.image { background: var(--peche-fond); color: var(--peche); }
.plateforme { display: inline-flex; align-items: center; gap: var(--e1); color: var(--encre-2); font-size: var(--t-sm); white-space: nowrap; }
.plateforme .ic { width: 18px; height: 18px; color: var(--encre); }
.etape { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--e3); border-radius: var(--r-pilule); background: var(--surface-2); color: var(--encre-2); font-size: var(--t-sm); font-weight: 500; }
.etape.e-pret, .etape.e-programme { background: var(--rose-doux); color: var(--rose-texte); }
.etape.e-publie { background: var(--ok-fond); color: var(--ok); }
.etape.e-abandonne { background: var(--surface-3); color: var(--encre-3); }
.theme { display: inline-flex; align-items: center; padding: 1px var(--e2); border-radius: var(--r-pilule); border: 1px solid var(--trait-fort); color: var(--encre-2); font-size: var(--t-xs); }
.statut { display: inline-flex; padding: 2px var(--e3); border-radius: var(--r-pilule); background: var(--surface-2); color: var(--encre-2); font-size: var(--t-xs); font-weight: 500; white-space: nowrap; }
.statut.s-signe, .statut.s-en_cours { background: var(--rose-doux); color: var(--rose-texte); }
.statut.s-livre, .statut.s-termine { background: var(--ok-fond); color: var(--ok); }
.statut.s-refuse { background: var(--surface-3); color: var(--encre-3); }
.quand { font-size: var(--t-xs); font-weight: 500; color: var(--encre-2); white-space: nowrap; }
.quand.proche { color: var(--attention); }
.quand.retard { color: var(--alerte); }
.quand.sans { color: var(--encre-3); }
.drapeau { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 500; color: var(--attention); }
.drapeau.retard { color: var(--alerte); }
.drapeau.partenaire { color: var(--rose-texte); }
.etat-publie { display: inline-flex; align-items: center; gap: var(--e1); color: var(--ok); font-size: var(--t-sm); font-weight: 500; }
.hausse { color: var(--ok); }
.baisse { color: var(--alerte); }
.stable { color: var(--encre-2); }

/* ------------------------------------------------------------------ accueil */

.ouverture {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e5); align-items: center;
  padding: var(--e6); border-radius: var(--r-panneau);
  background: var(--halo); border: 1px solid var(--trait);
  position: relative; overflow: hidden;
}
.ouverture::after {
  content: ""; position: absolute; right: -40px; bottom: -50px; width: 260px; height: 260px;
  background: url("motif.svg") no-repeat center / contain; opacity: 0.5; pointer-events: none;
}
.ouverture-texte { display: flex; flex-direction: column; gap: var(--e2); position: relative; z-index: 1; }
.salut { font-size: var(--t-3xl); letter-spacing: -0.02em; }
.date-du-jour { color: var(--encre-2); text-transform: capitalize; }
.affirmation { display: flex; align-items: baseline; gap: var(--e3); margin-top: var(--e3); flex-wrap: wrap; }
.affirmation .chiffre { font-size: 3.25rem; font-weight: 650; line-height: 1; color: var(--rose-texte); letter-spacing: -0.03em; }
.verdict { font-weight: 500; font-size: var(--t-lg); }
.note-semaine {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e4) var(--e5); border-radius: var(--r-panneau);
  background: var(--surface); box-shadow: var(--ombre-forte);
  color: var(--encre); text-decoration: none;
  transition: transform 0.25s var(--doux);
}
.note-semaine:hover { transform: translateY(-2px); color: var(--encre); }
.anneau-boite { position: relative; display: inline-grid; place-items: center; }
.anneau-boite .anneau { width: 96px; height: 96px; }
.anneau .piste { stroke: var(--surface-3); }
.anneau .plein { stroke: var(--rose); transition: stroke-dasharray 0.8s var(--doux); }
.anneau-texte { position: absolute; font-size: var(--t-2xl); font-weight: 650; }
.anneau-texte span { font-size: var(--t-md); color: var(--encre-2); font-weight: 500; }
.note-legende { display: flex; flex-direction: column; gap: var(--e1); }
.serie { display: inline-flex; align-items: center; gap: var(--e1); color: var(--attention); font-size: var(--t-sm); font-weight: 500; }
.serie.eteinte { color: var(--encre-3); }

.grille-accueil {
  display: grid; gap: var(--e5);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "faire faire faire faire faire faire faire capture capture capture capture capture"
    "semaine semaine semaine semaine semaine semaine semaine semaine semaine semaine semaine semaine"
    "etapes etapes etapes etapes audience audience audience audience partenaires partenaires partenaires partenaires";
}
.a-faire { grid-area: faire; }
.capture { grid-area: capture; background: var(--surface-2); border-color: transparent; box-shadow: none; }
.semaine { grid-area: semaine; }
.etapes { grid-area: etapes; }
.audience-mini { grid-area: audience; }
.partenaires-mini { grid-area: partenaires; }

.taches { display: flex; flex-direction: column; gap: var(--e1); }
.tache { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e2) var(--e3); border-radius: var(--r-champ); }
.tache:hover { background: var(--surface-2); }
.tache a { color: var(--encre); text-decoration: none; font-weight: 500; flex: 1; min-height: 24px; }
.tache a:hover { text-decoration: underline; }
.tache-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--encre-2); flex: none; }
.tache.u0 .tache-ic { background: var(--alerte-fond); color: var(--alerte); }
.tache.u1 .tache-ic { background: var(--attention-fond); color: var(--attention); }
.tache.u2 .tache-ic { background: var(--rose-doux); color: var(--rose-texte); }

.jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e3); }
.jour { padding: var(--e3); border-radius: var(--r-carte); background: var(--surface-2); min-height: 120px; display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.jour.aujourdhui { background: var(--rose-doux); }
.jour.libre { background: transparent; border: 1.5px dashed var(--trait); }
.jour-nom { display: flex; gap: var(--e1); align-items: baseline; color: var(--encre-2); font-size: var(--t-sm); }
.jour-nom strong { font-size: var(--t-xl); color: var(--encre); }
.jour ul { display: flex; flex-direction: column; gap: var(--e1); }
.jour li a { display: flex; align-items: flex-start; gap: 6px; text-decoration: none; color: var(--encre); font-size: var(--t-sm); min-height: 24px; line-height: 1.3; }
.jour li a .plateforme { margin-top: 1px; }
.jour .titre-court { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.jour li.publiee a { color: var(--ok); }
.titre-court { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.libre-texte { color: var(--encre-3); font-size: var(--t-sm); }

.compteurs-etapes { display: flex; flex-wrap: wrap; gap: var(--e2); }
.compteurs-etapes a { display: inline-flex; align-items: baseline; gap: 6px; padding: var(--e2) var(--e3); border-radius: var(--r-pilule); background: var(--surface-2); color: var(--encre); text-decoration: none; font-size: var(--t-sm); min-height: 36px; align-items: center; }
.compteurs-etapes .n { font-weight: 650; font-size: var(--t-md); }
.compteurs-etapes .zero a { background: transparent; color: var(--encre-3); border: 1px dashed var(--trait); }
.compteurs-etapes .e-pret a, .compteurs-etapes .e-programme a { background: var(--rose-doux); color: var(--rose-texte); }

.comptes-mini { display: flex; flex-direction: column; gap: var(--e1); }
.comptes-mini a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--e2); align-items: center; padding: var(--e2); border-radius: var(--r-champ); color: var(--encre); text-decoration: none; min-height: 36px; }
.comptes-mini a:hover { background: var(--surface-2); }
.comptes-mini .pseudo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comptes-mini .valeur { font-weight: 650; }
.comptes-mini .variation { font-size: var(--t-xs); font-weight: 500; }
.gros-chiffre { display: flex; align-items: baseline; gap: var(--e2); color: var(--encre-2); flex-wrap: wrap; }
.gros-chiffre .chiffre { font-size: var(--t-3xl); font-weight: 650; color: var(--encre); line-height: 1; letter-spacing: -0.02em; }
.montants { display: flex; flex-wrap: wrap; gap: var(--e2); }
.montants li { padding: var(--e1) var(--e3); border-radius: var(--r-pilule); background: var(--surface-2); font-weight: 500; }
.montants.grands li { font-size: var(--t-lg); }

.note-detail .periode { font-weight: 400; color: var(--encre-3); font-size: var(--t-sm); margin-left: var(--e2); }
.controles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e3); }
.controle { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e3); row-gap: 2px; padding: var(--e3) var(--e4); border-radius: var(--r-carte); background: var(--surface-2); }
.controle .etat { grid-row: span 2; display: inline-grid; place-items: center; }
.controle .etat .ic { width: 22px; height: 22px; }
.controle .nom { font-weight: 650; }
.controle .detail { font-size: var(--t-sm); color: var(--encre-2); }
.controle.reussi { background: var(--ok-fond); }
.controle.reussi .etat { color: var(--ok); }
.controle.rate { background: var(--attention-fond); }
.controle.rate .etat { color: var(--attention); }
.controle.non-evalue { background: transparent; border: 1.5px dashed var(--trait); }
.controle.non-evalue .etat { color: var(--encre-3); }

/* ------------------------------------------------------------------ contenus */

.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4); }
.filtres .lien-fleche { margin-left: auto; }
.tableau-etapes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr);
  gap: var(--e4); overflow-x: auto; padding-bottom: var(--e3);
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
}
.colonne { display: flex; flex-direction: column; gap: var(--e3); scroll-snap-align: start; min-width: 0; padding: var(--e3); border-radius: var(--r-panneau); background: var(--surface-2); }
.colonne > header { display: flex; align-items: center; justify-content: space-between; padding: var(--e1) var(--e2); }
.colonne > header h2 { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-md); }
.colonne > header h2 .ic { color: var(--rose); }
.colonne.e-pret, .colonne.e-programme { background: var(--rose-doux); }
.carte-contenu {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e3) var(--e4); border-radius: var(--r-carte);
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre);
  border-left: 4px solid var(--trait-fort);
  transition: transform 0.2s var(--doux), box-shadow 0.2s var(--doux);
}
.carte-contenu:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.carte-contenu.familles-court { border-left-color: var(--lilas); }
.carte-contenu.familles-long, .carte-contenu[class*="familles-long"] { border-left-color: var(--pervenche); }
.carte-contenu.familles-image { border-left-color: var(--peche); }
.carte-contenu .titre a { color: var(--encre); text-decoration: none; }
.carte-contenu .titre a::after { content: ""; position: absolute; inset: 0; }
.carte-contenu { position: relative; }
.carte-contenu .titre a:focus-visible { outline: none; }
.carte-contenu:has(.titre a:focus-visible) { outline: 3px solid var(--rose); outline-offset: 2px; }
.sorties-mini { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); align-items: center; }
.sorties-mini li { display: inline-flex; align-items: center; gap: var(--e1); }
.sorties-mini li.publiee .plateforme .ic { color: var(--ok); }
.meta { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); align-items: center; font-size: var(--t-xs); color: var(--encre-3); }
.ajouter-ici { display: flex; align-items: center; justify-content: center; gap: var(--e1); min-height: 36px; border-radius: var(--r-carte); color: var(--encre-2); text-decoration: none; font-size: var(--t-sm); border: 1.5px dashed var(--trait-fort); }
.ajouter-ici:hover { background: var(--surface); color: var(--rose-texte); }

.liste-archives { display: flex; flex-direction: column; gap: var(--e2); }
.ligne-archive { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e4); align-items: center; padding: var(--e3) var(--e4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); }
.ligne-archive .titre { font-weight: 500; color: var(--encre); text-decoration: none; }
.liste-simple { display: flex; flex-direction: column; gap: var(--e2); }
.liste-simple li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }

/* Cibles tactiles : 24 px au moins (WCAG 2.5.8). La regle va dans les SELECTEURS des
   listes, pas dans une classe qu'on oublierait sur la liste suivante. */
.carte-contenu .titre a, .colis-carte .titre, .carte-partenariat h3 a, .ligne-archive .titre,
.jours-liste li li > a, .liste-simple a, .fil a, .livrable-pied a, .a-relever .titre a,
.tableau-donnees td a, .carte-compte h2 a, .details dd a, .meta a, .aide a, .echeances-liste a {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* fiche */
.fiche-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e5); align-items: start; }
.fiche-principale, .fiche-cote { display: flex; flex-direction: column; gap: var(--e5); min-width: 0; }
.fiche-en-tete h1 { font-size: var(--t-2xl); max-width: 30ch; }
.avancement { color: var(--encre-3); font-size: var(--t-sm); }
.accroche-bloc { background: var(--halo); }
.accroche { font-size: var(--t-xl); font-weight: 500; line-height: 1.35; }
.sorties { display: flex; flex-direction: column; gap: var(--e3); }
.sortie { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border-radius: var(--r-carte); background: var(--surface-2); }
.sortie.publiee { background: var(--ok-fond); }
.sortie-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.sortie-tete .plateforme { font-weight: 650; color: var(--encre); font-size: var(--t-md); }
.prevue { display: inline-flex; align-items: center; gap: var(--e1); color: var(--encre-2); font-size: var(--t-sm); }
.prevue.retard { color: var(--alerte); font-weight: 500; }
.replie summary { cursor: pointer; font-weight: 500; color: var(--rose-texte); font-size: var(--t-sm); display: inline-flex; align-items: center; gap: var(--e1); min-height: 32px; list-style: none; }
.replie summary::-webkit-details-marker { display: none; }
.replie summary::after { content: "+"; margin-left: var(--e1); }
.replie[open] summary::after { content: "-"; }
/* Le bouton d'ajout porte deja son icone « plus » : pas de second signe. */
.ajout-sortie > summary::after, .ajout-sortie[open] > summary::after { content: none; }
.replie[open] > form, .replie[open] > dl, .replie[open] > p { margin-top: var(--e3); }
.ajout-sortie { padding-top: var(--e2); }
.grille-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--e3); align-items: end; }
.stats-ligne { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--e3); }
.stats-ligne dt { font-size: var(--t-xs); color: var(--encre-2); }
.stats-ligne dd { font-weight: 650; font-size: var(--t-lg); }
.discret-form { display: inline; }
.details dl { display: flex; flex-direction: column; gap: var(--e3); }
.details dl > div { display: flex; flex-direction: column; gap: 2px; }
.details dt { font-size: var(--t-xs); color: var(--encre-3); font-weight: 500; }
.details h3 { margin-top: var(--e2); font-size: var(--t-sm); color: var(--encre-2); }
.texte-libre { white-space: pre-wrap; overflow-wrap: anywhere; }
.zone-sensible { background: transparent; box-shadow: none; border-style: dashed; }
.zone-sensible-ligne { display: flex; justify-content: flex-end; max-width: 860px; }
.miniature-active img { border-radius: var(--r-carte); width: 100%; max-width: 560px; aspect-ratio: 16 / 9; object-fit: cover; }
.anciennes { display: flex; flex-wrap: wrap; gap: var(--e3); }
.anciennes li { display: flex; flex-direction: column; gap: var(--e1); }
.anciennes img { width: 160px; height: 90px; object-fit: cover; border-radius: var(--r-champ); }

/* formulaire de creation */
.cases-plateformes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.case-plateforme { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border-radius: var(--r-carte); border: 1px solid var(--trait-fort); background: var(--surface); }
.case-plateforme:has(input:checked) { border-color: var(--rose); background: var(--rose-doux); }
.case-plateforme .coche span { display: inline-flex; align-items: center; gap: var(--e2); }

/* ------------------------------------------------------------------ calendrier */

.navigation-mois { display: flex; gap: var(--e2); flex-wrap: wrap; }
.grille-mois { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-panneau); padding: var(--e3); box-shadow: var(--ombre); }
.ligne-jours, .ligne-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--e1); }
.nom-jour { text-align: center; font-size: var(--t-xs); font-weight: 650; color: var(--encre-2); padding: var(--e2) 0; text-transform: capitalize; }
.ligne-semaine + .ligne-semaine, .ligne-jours + .ligne-semaine { margin-top: var(--e1); }
.case { min-height: 104px; padding: var(--e2); border-radius: var(--r-champ); background: var(--surface-2); display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.case.hors-mois { background: transparent; }
.case.hors-mois .numero { color: var(--encre-3); }
.case.aujourdhui { background: var(--rose-doux); box-shadow: inset 0 0 0 2px var(--rose); }
.case .numero { font-size: var(--t-sm); font-weight: 650; }
.evenement { display: flex; align-items: center; gap: var(--e1); padding: 2px 6px; border-radius: var(--r-pilule); font-size: var(--t-xs); text-decoration: none; color: var(--encre); min-height: 24px; min-width: 0; }
.evenement .ic { width: 14px; height: 14px; }
.evenement.court { background: var(--lilas-fond); }
.evenement.long { background: var(--pervenche-fond); }
.evenement.image { background: var(--peche-fond); }
/* Publie : fond vert et non transparence, une couleur pâlie tombe sous 4.5:1. */
.evenement.publiee { background: var(--ok-fond); color: var(--ok); }
.evenement.retard { box-shadow: inset 0 0 0 1.5px var(--alerte); }
.jours-liste { display: flex; flex-direction: column; gap: var(--e4); }
.jour-titre { font-weight: 650; text-transform: capitalize; margin-bottom: var(--e2); }
.jours-liste ul { display: flex; flex-direction: column; gap: var(--e2); }
.jours-liste li li { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; padding: var(--e2) var(--e3); background: var(--surface-2); border-radius: var(--r-champ); }
.jours-liste .heure { font-size: var(--t-sm); color: var(--encre-2); }
.liste-mois { display: none; }

/* ------------------------------------------------------------------ idees */

.capture.large { background: var(--halo); border: 1px solid var(--trait); }
.formulaire-idee { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e4); align-items: end; }
.formulaire-idee .texte-idee { grid-column: 1 / -1; }
.formulaire-idee .segments { grid-column: 1 / 2; }
.formulaire-idee .bouton { justify-self: end; }
.onglets { display: flex; gap: var(--e2); flex-wrap: wrap; border-bottom: 1px solid var(--trait); }
.onglets a { display: inline-flex; align-items: center; padding: var(--e2) var(--e3); min-height: 40px; text-decoration: none; color: var(--encre-2); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets a[aria-current] { color: var(--rose-texte); border-bottom-color: var(--rose); }
.filtre-types { display: flex; gap: var(--e2); flex-wrap: wrap; }
.filtre-types a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--e3); border-radius: var(--r-pilule); text-decoration: none; color: var(--encre-2); font-size: var(--t-sm); border: 1px solid var(--trait); }
.filtre-types a[aria-current] { background: var(--rose-doux); color: var(--rose-texte); border-color: transparent; }
.idees { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e4); }
.idee { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); box-shadow: var(--ombre); position: relative; }
.idee-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--rose-doux); color: var(--rose-texte); }
.idee.type-son .idee-ic { background: var(--lilas-fond); color: var(--lilas); }
.idee.type-tendance .idee-ic { background: var(--peche-fond); color: var(--peche); }
.idee.type-inspiration .idee-ic { background: var(--pervenche-fond); color: var(--pervenche); }
.idee-texte { font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.idee-actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: auto; align-items: center; }

/* ------------------------------------------------------------------ partenariats */

.bandeau-chiffres { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--e5); }
.echeances-liste { display: flex; flex-direction: column; gap: var(--e2); }
.echeances-liste li { display: flex; justify-content: space-between; gap: var(--e3); align-items: center; padding: var(--e2) var(--e3); border-radius: var(--r-champ); background: var(--surface-2); }
.echeances-liste a { color: var(--encre); text-decoration: none; display: flex; gap: var(--e2); flex-wrap: wrap; min-height: 24px; }
.groupe-partenariats { display: flex; flex-direction: column; gap: var(--e3); }
.groupe-partenariats > h2 { display: flex; align-items: center; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--e4); }
.carte-partenariat { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4) var(--e5); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-carte); box-shadow: var(--ombre); position: relative; transition: transform 0.2s var(--doux); }
.carte-partenariat:hover { transform: translateY(-2px); }
.carte-partenariat header { display: flex; justify-content: space-between; gap: var(--e3); align-items: flex-start; }
.carte-partenariat h3 { font-size: var(--t-lg); }
.carte-partenariat h3 a { color: var(--encre); text-decoration: none; }
.carte-partenariat h3 a::after { content: ""; position: absolute; inset: 0; }
.carte-partenariat:has(h3 a:focus-visible) { outline: 3px solid var(--rose); outline-offset: 2px; }
.carte-partenariat h3 a:focus-visible { outline: none; }
.faits { display: flex; flex-direction: column; gap: var(--e1); }
.faits > div { display: flex; justify-content: space-between; gap: var(--e3); font-size: var(--t-sm); }
.faits dt { color: var(--encre-3); }
.faits dd { font-weight: 500; text-align: right; }
.paye { display: inline-flex; align-items: center; gap: 2px; color: var(--ok); }
.livrables { display: flex; flex-direction: column; gap: var(--e3); }
.livrable { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border-radius: var(--r-carte); background: var(--surface-2); }
.livrable.st-publie { background: var(--ok-fond); }
.livrable.retard { box-shadow: inset 4px 0 0 var(--alerte); }
.livrable-tete { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.echeance { display: inline-flex; align-items: center; gap: var(--e1); font-size: var(--t-sm); color: var(--encre-2); }
.livrable-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e3); align-items: center; font-size: var(--t-sm); }

/* ------------------------------------------------------------------ colis */

.etageres { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--e4); align-items: start; }
.etagere { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border-radius: var(--r-panneau); background: var(--surface-2); }
.etagere > h2 { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-md); }
.etagere > h2 .ic { color: var(--rose); }
.colis-liste { display: flex; flex-direction: column; gap: var(--e2); }
.colis-carte { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3) var(--e4); background: var(--surface); border-radius: var(--r-carte); border: 1px solid var(--trait); }
.colis-carte.oublie { box-shadow: inset 4px 0 0 var(--alerte); }
.colis-carte .titre { color: var(--encre); text-decoration: none; font-weight: 500; }
.marque-produit { color: var(--rose-texte); font-weight: 650; }
.avis { display: inline-flex; color: var(--rose); }
.avis .ic { width: 14px; height: 14px; }
.avancer { align-self: flex-start; }

/* ------------------------------------------------------------------ audience */

.segments.liens { gap: var(--e2); }
.grille-comptes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--e4); }
.carte-compte { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e5); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--r-panneau); box-shadow: var(--ombre); min-width: 0; }
.carte-compte header { display: flex; flex-direction: column; gap: var(--e1); }
.carte-compte h2 a { color: var(--encre); text-decoration: none; }
.cartouche { display: inline-flex; align-self: flex-start; align-items: center; gap: var(--e1); padding: var(--e1) var(--e3); border-radius: var(--r-pilule); font-weight: 650; font-size: var(--t-sm); }
.cartouche.hausse { background: var(--ok-fond); }
.cartouche.baisse { background: var(--alerte-fond); }
.cartouche.stable { background: var(--surface-2); }
.courbe { width: 100%; height: auto; max-height: 90px; overflow: visible; }
.grande-courbe .courbe { max-height: 220px; }
.courbe .trait { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.courbe .aire { opacity: 0.16; }
.courbe .point { stroke: var(--surface); stroke-width: 2; }
.courbe.bonne .trait { stroke: var(--ok); }
.courbe.bonne .aire, .courbe.bonne .point { fill: var(--ok); }
.courbe.mauvaise .trait { stroke: var(--alerte); }
.courbe.mauvaise .aire, .courbe.mauvaise .point { fill: var(--alerte); }
.courbe.neutre .trait { stroke: var(--encre-2); }
.courbe.neutre .aire, .courbe.neutre .point { fill: var(--encre-2); }
.barre rect { fill: var(--rose); }
.objectif { display: flex; flex-direction: column; gap: var(--e1); font-size: var(--t-sm); color: var(--encre-2); }
.objectif .barre { width: 100%; }
.fraicheur { font-size: var(--t-xs); color: var(--encre-3); }
.fraicheur.perime { color: var(--attention); font-weight: 500; }
.releve-liste { display: flex; flex-direction: column; gap: var(--e3); }
.releve-liste li { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(140px, 220px) minmax(0, 1fr); gap: var(--e3); align-items: center; }
.releve-liste label { display: flex; align-items: center; gap: var(--e2); font-weight: 500; color: var(--encre); }
.defilant { overflow-x: auto; border-radius: var(--r-champ); }
.tableau-donnees { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tableau-donnees th { text-align: left; font-weight: 650; color: var(--encre-2); padding: var(--e2) var(--e3); border-bottom: 1px solid var(--trait-fort); white-space: nowrap; }
.tableau-donnees td { padding: var(--e2) var(--e3); vertical-align: middle; }
.tableau-donnees tbody tr:nth-child(even) td { background: var(--surface-2); }
.tableau-donnees .n { text-align: right; white-space: nowrap; }
.tableau-donnees td a { color: var(--encre); font-weight: 500; }

/* ------------------------------------------------------------------ performances */

.a-relever { display: flex; flex-direction: column; gap: var(--e4); }
.a-relever > li { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e4); border-radius: var(--r-carte); background: var(--surface-2); }
.a-relever .titre { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.a-relever .titre a { font-weight: 650; color: var(--encre); }
.barres { display: flex; flex-direction: column; gap: var(--e3); }
.barres li { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(0, 2fr) auto auto; gap: var(--e3); align-items: center; }
.barres .barre { width: 100%; }
.barres .valeur { font-weight: 650; }
.barres .n { font-size: var(--t-xs); color: var(--encre-3); white-space: nowrap; }

/* ------------------------------------------------------------------ reglages */

.sommaire { display: flex; flex-wrap: wrap; gap: var(--e2); }
.sommaire a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--e3); border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--trait); color: var(--encre-2); text-decoration: none; font-size: var(--t-sm); }
.sommaire a:hover { color: var(--rose-texte); border-color: var(--rose); }
.comptes-reglages { display: flex; flex-direction: column; gap: var(--e3); }
.comptes-reglages li { padding: var(--e3); border-radius: var(--r-carte); background: var(--surface-2); }
.comptes-reglages li.archive, .personnes li.archive { background: transparent; border: 1.5px dashed var(--trait-fort); }
.pastilles-reglages { display: flex; flex-wrap: wrap; gap: var(--e2); }
.pastilles-reglages li { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e1) var(--e2) var(--e1) var(--e3); border-radius: var(--r-pilule); background: var(--surface-2); }
.pastilles-reglages li.masque span { color: var(--encre-3); text-decoration: line-through; }
.grille-cadence { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--e3); align-items: end; }
.grille-cadence .aide, .grille-cadence .bouton { grid-column: 1 / -1; justify-self: start; }
.etat-attente { display: inline-flex; align-items: center; gap: var(--e2); color: var(--encre-2); font-weight: 500; }
.etat-canaux { display: flex; flex-wrap: wrap; gap: var(--e3); }
.etat-canaux li { display: inline-flex; align-items: center; gap: var(--e2); padding: var(--e2) var(--e4); border-radius: var(--r-pilule); background: var(--surface-2); font-weight: 500; }
.etat-canaux .etat { font-weight: 400; font-size: var(--t-sm); color: var(--encre-3); }
.etat-canaux li.branche { background: var(--ok-fond); color: var(--ok); }
.etat-canaux li.branche .etat { color: var(--ok); }
.journal-envois .bon { color: var(--ok); }
.journal-envois .mauvais { color: var(--alerte); }
.personnes { display: flex; flex-direction: column; gap: var(--e2); }
.personnes li { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; padding: var(--e3); border-radius: var(--r-carte); background: var(--surface-2); }
.personnes .nom { font-weight: 650; }
.personnes .role { font-size: var(--t-sm); color: var(--rose-texte); }
.en-ligne { display: inline-flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.secret code { display: inline-block; font-size: var(--t-xl); padding: var(--e3) var(--e4); border-radius: var(--r-champ); background: var(--rose-doux); color: var(--rose-texte); user-select: all; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ point */

.texte-point { white-space: pre-wrap; font-family: var(--sans); margin: 0; padding: var(--e4); background: var(--surface-2); border-radius: var(--r-carte); font-size: var(--t-sm); overflow-wrap: anywhere; }
.bulle { align-self: flex-start; padding: var(--e3) var(--e4); border-radius: 18px 18px 18px 4px; background: var(--ok-fond); color: var(--encre); max-width: 40ch; }

/* ------------------------------------------------------------------ connexion, erreur */

.seul { min-height: 100dvh; display: flex; flex-direction: column; }
.porte { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100dvh; }
.porte-visuel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--e3);
  padding: var(--e7);
  background: var(--halo);
  border-right: 1px solid var(--trait);
}
.porte-visuel::before {
  content: ""; position: absolute; inset: 0;
  background: url("motif.svg") repeat center / 220px; opacity: 0.35;
}
.grand-papillon { position: relative; color: var(--rose); display: inline-flex; }
.grand-papillon .ic { width: 140px; height: 140px; animation: flotte 6s ease-in-out infinite; }
.porte-visuel .mot { position: relative; font-family: var(--marque); font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.05; color: var(--rose-texte); padding-bottom: 6px; }
.porte-formulaire { display: flex; flex-direction: column; justify-content: center; gap: var(--e4); padding: var(--e7) clamp(16px, 6vw, 96px); max-width: 560px; width: 100%; }
.porte-formulaire h1 { font-size: var(--t-3xl); }
.choix-langue.en-ligne { padding: 0; flex-wrap: wrap; margin-top: var(--e4); }
.pastille-langue { min-height: 34px; padding: 0 var(--e3); border-radius: var(--r-pilule); border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre-2); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.pastille-langue[aria-pressed="true"] { background: var(--rose-doux); color: var(--rose-texte); border-color: transparent; font-weight: 650; }
.erreur-page { margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e3); padding: var(--e7) var(--e4); max-width: 520px; }
.erreur-page .code { font-family: var(--marque); font-size: 3rem; color: var(--rose-texte); line-height: 1; }

/* ------------------------------------------------------------------ fete */

.papillon-vol { position: fixed; z-index: 40; pointer-events: none; color: var(--rose); width: 28px; height: 28px; animation: envol 1.8s var(--doux) forwards; }
.papillon-vol .ic { width: 100%; height: 100%; animation: battement 0.35s ease-in-out infinite; }

@keyframes battement { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.55); } }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes envol {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 40px), -220px) scale(1.1) rotate(var(--rot, 12deg)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .papillon-vol { display: none !important; }
}

/* ------------------------------------------------------------------ largeurs */

@media (max-width: 1180px) {
  .grille-accueil {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "faire faire" "capture semaine" "etapes audience" "partenaires partenaires";
  }
  .jours { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .fiche-grille { grid-template-columns: minmax(0, 1fr); }
  .semaine .jours { grid-template-columns: minmax(0, 1fr); }
  .semaine .jour { min-height: 0; flex-direction: row; align-items: flex-start; }
  .semaine .jour-nom { min-width: 64px; }
  .semaine .jour ul { flex: 1; min-width: 0; }
}

@media (max-width: 1023px) {
  .cadre { grid-template-columns: minmax(0, 1fr); background: none; }
  .bandeau {
    position: sticky; top: 0; z-index: 20; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3);
    padding: var(--e3) var(--e4); border-right: 0; border-bottom: 1px solid var(--trait);
  }
  .marque .mot { font-size: 1.12rem; }
  .marque .papillon .ic { width: 28px; height: 28px; }
  .pied-menu { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: var(--e2); }
  /* Le mot disparait a l'oeil mais RESTE pour les lecteurs d'ecran : en display:none,
     le bouton n'avait plus de nom du tout (axe button-name, link-name). */
  .pied-menu .lien-reglages span, .pied-menu form .bouton span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .pied-menu .lien-reglages { padding: var(--e2); min-height: 40px; }
  .pied-menu .bouton.petit { padding: 0 var(--e3); min-height: 40px; }
  .choix-langue { padding: 0; }
  .choix-langue select { width: auto; min-height: 40px; padding: 6px var(--e2); }
  .choix-langue > .ic { display: none; }
  .menu { order: 3; flex: 1 0 100%; min-width: 0; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(-1 * var(--e4)); padding: 0 var(--e4); scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu ul { flex-direction: row; gap: var(--e1); width: max-content; }
  .menu a { min-height: 40px; padding: var(--e2) var(--e3); scroll-snap-align: start; white-space: nowrap; }
  .principal { padding: var(--e5) var(--e4) var(--e7); }
}

@media (max-width: 899px) {
  .grille-mois { display: none; }
  .liste-mois { display: flex; }
  .porte { grid-template-columns: minmax(0, 1fr); }
  .porte-visuel { min-height: 0; padding: var(--e5) var(--e4); flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--trait); }
  .grand-papillon .ic { width: 56px; height: 56px; }
  .porte-visuel .mot { font-size: 2rem; }
  .porte-formulaire { padding: var(--e6) var(--e4); }
  .bandeau-chiffres, .duo-panneaux { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 719px) {
  h1 { font-size: var(--t-xl); }
  .salut { font-size: var(--t-2xl); }
  .ouverture { grid-template-columns: minmax(0, 1fr); padding: var(--e5); }
  .note-semaine { justify-self: stretch; }
  .affirmation .chiffre { font-size: 2.6rem; }
  .grille-accueil { grid-template-columns: minmax(0, 1fr); grid-template-areas: "faire" "capture" "semaine" "etapes" "audience" "partenaires"; }
  .duo, .trio, .cases-plateformes { grid-template-columns: minmax(0, 1fr); }
  .panneau { padding: var(--e4); border-radius: var(--r-carte); }
  .formulaire-idee { grid-template-columns: minmax(0, 1fr); }
  .formulaire-idee .segments { grid-column: auto; }
  .formulaire-idee .bouton { justify-self: stretch; }
  .tableau-etapes { grid-auto-columns: minmax(80vw, 1fr); scroll-snap-type: x mandatory; }
  .releve-liste li { grid-template-columns: minmax(0, 1fr); gap: var(--e1); }
  .barres li { grid-template-columns: minmax(0, 1fr) auto; }
  .barres .barre { grid-column: 1 / -1; grid-row: 2; }
  .ligne-archive { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
  .filtres .lien-fleche { margin-left: 0; }
  .en-tete-page > .bouton, .en-tete-page > .actions { width: 100%; }
  .en-tete-page > .bouton { justify-content: center; }
  .pied-menu .choix-langue select { max-width: 112px; }
}

@media print {
  .bandeau, .actions, form, .evitement { display: none !important; }
  body { background: #fff; color: #000; }
  .panneau { box-shadow: none; border-color: #ccc; }
}