/* MagicBanner 1.8.0 : Accueil, Projets, Planning, Tendances, Analyse. Mêmes couleurs que le site (règle COULEURS). */
body[data-page="projets"] #page-projets, body[data-page="planning"] #page-planning,
body[data-page="analyse"] #page-analyse, body[data-page="tendances"] #page-tendances,
body[data-page="questionnaire"] #page-questionnaire { display: block; }
.page-pleine { padding: 0; }

/* ---------- Commun ---------- */
.barre-planning { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.barre-planning h1 { margin: 0 12px 0 0; }
.barre-planning select, .formulaire-grille select, .formulaire-grille input, .fenetre select, .fenetre textarea, .fenetre input[type=date], .formulaire-tendance textarea, .formulaire-ligne input[type=text] {
  padding: 9px 11px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; color: var(--encre); font: 13px Arial, sans-serif; }
.barre-planning .bouton-discret { margin-top: 0; display: inline-block; }
.barre-planning .segmented button { padding: 8px 12px; border: 1px solid var(--trait); border-radius: 99px; background: #fff; color: var(--encre); font-weight: 800; cursor: pointer; }
.barre-planning .segmented button.active { background: var(--couleur-2); border-color: var(--couleur-2); color: #fff; }
.libelle-periode { font-size: 14px; }
.formulaire-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.fenetre textarea, .formulaire-tendance textarea { width: 100%; box-sizing: border-box; margin-top: 10px; resize: vertical; }
.fenetre > input[type=text] { margin-top: 10px; }

/* Réseaux sociaux : on montre le logo ; la coche dit lequel est choisi (règle CHOIX VISIBLE SANS CONTOUR). */
.reseaux-choix { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.reseau-choix { position: relative; width: 42px; height: 42px; padding: 4px; border: 0; border-radius: 10px; background: #f2f2ef; cursor: pointer; opacity: .55; }
.reseau-choix[aria-pressed="true"] { opacity: 1; }
.reseau-choix img { width: 100%; height: 100%; object-fit: contain; }
.reseau-choix[aria-pressed="true"]::after { content: '✓'; position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--couleur-2); color: #fff; font-size: 11px; font-weight: 900; }
.control-panel .reseau-choix { background: #25282c; }
.hashtags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.hashtag { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; border-radius: 99px; background: #efefeb; font-size: 12px; font-weight: 700; }

/* ---------- Accueil ---------- */
.accueil-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 22px; }
.accueil-colonnes .carte { padding: 20px 24px; }
.accueil-colonnes .titre-picto { margin-top: 0; }
.compteurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.compteur { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: #f2f2ef; text-align: center; }
.compteur b { font-size: 24px; color: var(--couleur-2); }
.compteur span { font-size: 11px; color: var(--gris); }
.liste-a-venir, .liste-actus, .liste-idees, .liste-tendances { display: grid; gap: 8px; }
.a-venir { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.a-venir img, .publication img { width: 18px; height: 18px; object-fit: contain; }
.actu { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.actu:hover b { text-decoration: underline; }
.actu small, .idee small, .tendance small { color: var(--gris); font-size: 11px; }
.idee, .tendance { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #f7f7f4; font-size: 13px; }
.idee p, .tendance p { margin: 0; color: var(--gris); }
.tendance.brouillon { opacity: .6; }

/* ---------- Projets ---------- */
.grille-projets { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.carte-projet { position: relative; display: grid; border: 1px solid var(--trait); border-radius: 14px; background: #fff; overflow: hidden; }
.carte-projet-image { height: 140px; padding: 0; border: 0; background: #2a2d31; cursor: pointer; }
.carte-projet-image img { width: 100%; height: 100%; object-fit: contain; }
.sans-vignette { font-size: 40px; font-weight: 900; color: #fff; }
.carte-projet-texte { display: grid; gap: 3px; padding: 10px 12px; }
.carte-projet-texte small { color: var(--gris); font-size: 11px; }
.carte-projet .retirer-couleur { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: #fffc; }
.todo { display: grid; gap: 6px; max-width: 640px; }
.tache { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--trait); font-size: 14px; }
.tache span { flex: 1; }
.tache.faite span { text-decoration: line-through; color: var(--gris); }

/* ---------- Planning ---------- */
.jours-semaine, .grille-planning { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.jours-semaine span { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--gris); padding: 0 6px 4px; }
.jour { min-height: 110px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; background: #fff; border: 1px solid var(--trait); }
.jour.hors-mois { opacity: .45; }
.jour.aujourdhui { border-color: var(--couleur-2); border-width: 2px; }
.numero-jour { align-self: flex-start; border: 0; background: transparent; font-weight: 900; color: var(--encre); cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.numero-jour:hover { background: #efefeb; }
.publication { display: flex; align-items: center; gap: 5px; width: 100%; padding: 5px 6px; border: 0; border-radius: 8px; background: #f2f2ef; color: var(--encre); font-size: 11px; text-align: left; cursor: pointer; }
.publication span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statut-idee { background: #eef0f6; } .statut-a-faire { background: #fff3dc; } .statut-pret { background: #e4f4ea; } .statut-publie { background: #e9e9e6; color: var(--gris); }

/* ---------- Tendances ---------- */
.formulaire-tendance { max-width: 820px; margin-bottom: 18px; }
.liste-tendances .tendance .formulaire-ligne { margin-top: 4px; }

/* ---------- Analyse ---------- */
.corps-analyse { height: calc(100vh - 150px); min-height: 520px; }
.panneau-analyse .dark-field textarea { width: 100%; box-sizing: border-box; border: 1px solid #ffffff15; border-radius: 8px; background: #111315; color: #fff; padding: 8px; font-size: 11px; }
.panneau-analyse .segmented { display: flex; gap: 6px; margin-bottom: 6px; }
.panneau-analyse .segmented button { flex: 1; }
.panneau-analyse input[type=date] { width: 100%; box-sizing: border-box; padding: 7px; border-radius: 8px; border: 1px solid #ffffff15; background: #111315; color: #fff; }
.panneau-analyse .formulaire-ligne select { flex: 1; background: #111315; color: #fff; border: 1px solid #ffffff20; border-radius: 8px; padding: 7px; }
.pages-liste { display: grid; gap: 4px; }
.ligne-page { display: flex; align-items: center; gap: 4px; cursor: grab; }
.ligne-page .chip-button { flex: 1; text-align: left; }
.ligne-page.active .chip-button { border-color: var(--couleur-2); background: #25282c; }
.scene-analyse { overflow: auto !important; display: block !important; }
.pages-analyse { display: grid; justify-items: center; gap: 24px; padding: 24px 0 60px; }
.cadre-page-analyse { position: relative; }
/* 1.10.0 : nouvelle présentation de l'Analyse (couverture pleine page, en-tête, cartes douces, plannings en tableau). */
.page-analyse { position: absolute; left: 0; top: 0; transform-origin: top left; box-sizing: border-box; display: flex; flex-direction: column; padding: 40px 52px 28px; background: #fff; color: #17191c; font-family: Arial, sans-serif; box-shadow: 0 10px 30px #0002; overflow: hidden; }
.page-analyse.choisie { box-shadow: 0 0 0 4px var(--a2), 0 10px 30px #0002; }
.modifiable { outline: none; border-radius: 6px; cursor: text; }
.modifiable:hover, .modifiable:focus { background: #0000000a; }
.modifiable.vide { color: #b9bcc0; }
/* Couverture */
.page-analyse.type-couverture { padding: 0; background: var(--a2); color: var(--sur-a2); }
.analyse-couverture { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 64px 80px 72px; }
.analyse-couverture-logo { max-width: 280px; max-height: 110px; object-fit: contain; object-position: left center; }
.analyse-couverture-titre { font-size: 88px; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--sur-a2); }
.analyse-couverture-trait { display: block; width: 120px; height: 8px; margin: 28px 0 22px; border-radius: 4px; background: var(--a1); }
.analyse-couverture-periode { margin: 0; font-size: 26px; font-weight: 700; opacity: .85; }
/* En-tête et pied des pages intérieures */
.analyse-entete { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 3px solid var(--a1); }
.analyse-logo { max-width: 160px; max-height: 46px; object-fit: contain; }
.analyse-logo-reseau { width: 40px; height: 40px; object-fit: contain; }
.analyse-titre { margin-left: auto; font-size: 30px; font-weight: 900; color: var(--a2); text-align: right; }
.analyse-pied { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; font-size: 12px; color: #8a8f96; }
.analyse-corps { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 18px 0 8px; }
.analyse-periode { margin: 0; font-size: 16px; font-weight: 700; color: #6b7076; }
.analyse-carte { display: grid; align-content: start; gap: 10px; padding: 18px 20px; border-radius: 16px; background: #f5f5f2; }
.analyse-sous-titre { font-size: 18px; font-weight: 900; color: var(--a2); }
.analyse-texte { font-size: 15px; line-height: 1.5; white-space: pre-wrap; }
/* Page réseau */
.analyse-reseau { flex-direction: row; gap: 24px; }
.analyse-colonne { flex: 0 0 300px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.analyse-colonne.large { flex: 1; min-width: 0; }
.analyse-abonnes .analyse-legende { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: #6b7076; }
.analyse-chiffres { display: flex; align-items: center; gap: 12px; }
.analyse-nombre { font-size: 52px; font-weight: 900; line-height: 1; color: var(--a2); }
.analyse-evolution { padding: 4px 10px; border-radius: 99px; background: #e4f4ea; color: #1d7a52; font-size: 16px; font-weight: 800; }
/* 1.10.2 : image à la une détourée : ni cadre ni fond, une ombre douce sous l'objet. */
.analyse-une { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; }
.analyse-une img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .18)); }
.panneau-analyse .sous-bloc { margin: 4px 0 8px; font-size: 10px; color: #aeb2b7; font-weight: 700; }
.panneau-analyse .sous-bloc + * { margin-top: 0; }
.panneau-analyse .background-actions + .sous-bloc { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ffffff12; }
.analyse-carte-image { min-height: 0; }
.analyse-une.vide, .analyse-images.vide { color: #8a8f96; font-size: 14px; font-weight: 700; cursor: pointer; }
.analyse-une.vide { border-radius: 16px; background: #f5f5f2; border: 2px dashed #d3d1c7; }
.analyse-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.analyse-images.vide { display: grid; grid-template-columns: 1fr; place-items: center; min-height: 160px; border: 2px dashed #d3d1c7; border-radius: 12px; text-align: center; }
.analyse-carte-image { aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #fff; }
.analyse-carte-image img { width: 100%; height: 100%; object-fit: cover; }
.analyse-carte-texte { flex: 1; min-height: 0; }
.analyse-libre .analyse-images { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Plannings en tableau (comme la page Planning de l'outil) */
.analyse-calendrier { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: auto; gap: 6px; }
.analyse-calendrier.semaine { grid-template-rows: auto 1fr; }
.analyse-calendrier.mois { grid-template-rows: auto; grid-auto-rows: minmax(0, 1fr); }
.analyse-cal-entete { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #8a8f96; padding: 0 4px 2px; }
.analyse-cal-jour { min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; background: #f5f5f2; overflow: hidden; }
.analyse-cal-jour.hors { opacity: .4; }
.analyse-cal-numero { font-size: 12px; font-weight: 900; color: #17191c; }
.analyse-cal-pub { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.analyse-cal-pub img { width: 13px; height: 13px; object-fit: contain; }
.analyse-cal-pub.postee { opacity: .55; }
.analyse-cal-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analyse-calendrier.semaine .analyse-cal-titre { white-space: normal; }
/* 1.10.3 (Sarah) : en semaine il y a de la place : jours, publications et icônes plus grands (le mois ne change pas). */
.analyse-calendrier.semaine { gap: 10px; }
.analyse-calendrier.semaine .analyse-cal-entete { font-size: 14px; padding-bottom: 4px; }
.analyse-calendrier.semaine .analyse-cal-jour { gap: 8px; padding: 12px; border-radius: 14px; }
.analyse-calendrier.semaine .analyse-cal-numero { font-size: 22px; margin-bottom: 4px; }
.analyse-calendrier.semaine .analyse-cal-pub { gap: 7px; padding: 9px 10px; border-radius: 10px; font-size: 15px; line-height: 1.25; }
.analyse-calendrier.semaine .analyse-cal-pub img { width: 20px; height: 20px; flex: none; }

/* PDF : on n'imprime que les pages de l'analyse, en A4 paysage, une par feuille. */
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.impression-analyse > *:not(.site-main), body.impression-analyse .site-main > *:not(#page-analyse), body.impression-analyse .panneau-analyse { display: none !important; }
  body.impression-analyse, body.impression-analyse .site-main, body.impression-analyse .corps-analyse, body.impression-analyse .scene-analyse { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; padding: 0 !important; }
  body.impression-analyse .pages-analyse { display: block; padding: 0; }
  body.impression-analyse .cadre-page-analyse { width: auto !important; height: auto !important; break-after: page; }
  body.impression-analyse .page-analyse { position: static; transform: none !important; box-shadow: none !important; }
  body.impression-analyse .modifiable.vide { visibility: hidden; }
}

/* ---------- 1.9.0 ---------- */
/* Toutes les marques : l'éditeur attend qu'une marque soit choisie. */
body[data-toutes="true"] #atelier { display: none !important; }
/* Analyse : le panneau prend toute la hauteur (la règle de l'atelier le limitait à la première ligne). */
.corps-analyse > .control-panel { grid-row: 1 / span 2 !important; align-self: stretch; }
/* Atelier : « Programmer » rejoint les boutons du projet (deux lignes de deux). */
.project-actions { grid-template-columns: 1fr 1fr !important; }
.project-actions .programmer { background: transparent; border: 1px dashed var(--couleur-1); color: #fff; }

/* Planning (1.9.1) : chaque publication a la couleur de sa marque ; « Publié » est pâlie. Récap par marque sur le côté. */
.publication.publiee { opacity: .5; }
.a-venir.publication { cursor: default; }
.logo-texte { padding: 6px 10px; border-radius: 8px; font-size: 12px; }
.planning-et-recap { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 16px; align-items: start; }
.recap-planning { padding: 16px 18px; }
.recap-planning .titre-picto { margin-top: 0; }
.recap-marque, .recap-marque-accueil { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--trait); }
.recap-marque img, .recap-marque-accueil img { max-width: 90px; max-height: 32px; object-fit: contain; padding: 4px 6px; border-radius: 8px; background: #26292d; }
.recap-nombre { margin-left: auto; font-size: 20px; color: var(--couleur-2); }
.recap-marque-accueil .compteurs { flex: 1; margin: 0; }
.recap-marque-accueil .compteur { padding: 6px; }
.recap-marque-accueil .compteur b { font-size: 16px; }

/* Fenêtre publication : marque par son logo, formats cochés, légende. */
.fenetre .reseau-choix img { max-width: 100%; }
.fenetre .reseaux-choix .reseau-choix { width: 60px; background: #26292d; }
.formats-choix { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0; }
.ligne-legende { display: grid; gap: 6px; }
.ligne-legende .bouton-discret { justify-self: start; }

/* To-do de l'accueil : un groupe par marque (son logo, puis ses tâches). */
.bloc-todo { margin-top: 22px; }
.bloc-todo .titre-picto { margin-top: 0; }
.groupe-todo { display: grid; gap: 8px; margin-bottom: 14px; }
.entete-todo img { max-width: 110px; max-height: 34px; object-fit: contain; padding: 4px 8px; border-radius: 8px; background: #26292d; }
.choix-toutes b { font-size: 10px; }
.zone-todo .reseaux-choix .reseau-choix { width: 60px; background: #26292d; }
.description-marque { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid var(--trait); border-radius: 10px; font: 13px Arial, sans-serif; resize: vertical; }
@media (max-width: 1000px) { .planning-et-recap { grid-template-columns: 1fr; } }

/* ---------- 1.9.2 (demandes de Sarah) ---------- */
/* Fonds des logos (marques, réseaux) : gris très clair, ou transparent dans la to-do ; une ombre légère garde
   lisibles les logos blancs. */
.fenetre .reseaux-choix .reseau-choix, .zone-todo .reseaux-choix .reseau-choix { background: #ececea; }
.fenetre .reseau-choix img, .entete-todo img { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 2px #000a); }
/* 1.9.4 (Sarah) : pas d'ombre derrière les logos de « Ajouter une tâche ». */
.zone-todo .reseau-choix img { filter: none; }
.entete-todo img { background: transparent; padding: 0; }
.ajout-tache { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--trait); }
/* Boutons du bas des fenêtres : tous alignés, même hauteur. « Enregistrer » d'une autre couleur que « Créer ». */
.formulaire-ligne.fin { align-items: center; }
.formulaire-ligne.fin button { display: inline-flex; align-items: center; margin: 0; min-height: 40px; padding: 0 16px; box-sizing: border-box; }
.bouton-clair { background: var(--couleur-1); color: #17191c; }
/* « Cette semaine » : compteurs aux couleurs de la marque. */
.compteur[style] b, .compteur[style] span { color: inherit; }
.compteur[style] span { opacity: .85; }

/* ---------- 1.9.3 : récap du jour, simple et satisfaisant ---------- */
.recap-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.recap-entete .titre-picto { margin: 0 0 2px; }
.recap-entete .vide { margin: 0; }
.recap-vue button { padding: 6px 12px; border: 1px solid var(--trait); border-radius: 99px; background: #fff; color: var(--encre); font-size: 12px; font-weight: 800; cursor: pointer; }
.recap-vue button.active { background: var(--encre); border-color: var(--encre); color: #fff; }
.recap-progression { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 6px; font-size: 14px; }
.recap-progression b { font-size: 22px; }
.barre-progression { display: flex; height: 12px; border-radius: 99px; background: #efefeb; overflow: hidden; }
.barre-postee { background: #1d9e75; transition: width .5s ease; }
.barre-programmee { background: #9fe1cb; transition: width .5s ease; }
.recap-etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; }
.recap-etape { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: #f4f4f1; text-align: center; }
.recap-etape b { font-size: 20px; }
.recap-etape span { font-size: 12px; color: var(--gris); }
.recap-etape.etape-publie b { color: #1d9e75; }
.recap-liste { display: grid; gap: 8px; }
.recap-ligne { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; }
.recap-ligne.postee { background: #f4f4f1; border-color: transparent; }
.recap-ligne.postee .titre-ligne { color: var(--gris); text-decoration: line-through; }
.logo-ligne { width: 64px; height: 26px; object-fit: contain; padding: 3px 6px; border-radius: 6px; box-sizing: border-box; }
.nom-marque { font-size: 12px; }
.icone-reseau { width: 18px; height: 18px; object-fit: contain; }
.titre-ligne { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--encre); font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.bouton-etape { padding: 6px 12px; border: 1px solid var(--couleur-2); border-radius: 8px; background: #fff; color: var(--encre); font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.coche-postee { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1d9e75; color: #fff; font-size: 13px; font-weight: 900; }

/* 1.9.5 : la case du jour s'ouvre au clic (nouvelle publication). */
.jour { cursor: pointer; }
.jour:hover { background: #fafaf7; }
.jour .publication { cursor: pointer; }
.etiquette-etape { font-size: 12px; font-weight: 800; color: var(--gris); white-space: nowrap; }
.bouton-voir { border-color: var(--trait); }
.bouton-poster { background: #1d9e75; border-color: #1d9e75; color: #fff; }
/* 1.9.6 (Sarah) : les boutons restent sur la ligne du titre ; le titre se raccourcit (…) s'il manque de place.
   Ils ne passent dessous que sur un très petit écran. */
.recap-ligne { flex-wrap: nowrap; min-width: 0; }
.recap-liste { grid-template-columns: minmax(0, 1fr); } /* la liste ne s'élargit pas : le titre se raccourcit */
.recap-ligne .titre-ligne { flex: 1 1 0; min-width: 40px; }
.actions-etape { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) { .recap-ligne { flex-wrap: wrap; row-gap: 6px; } }

/* 1.9.7 (Sarah) : le titre sur la couleur de la marque, le logo sur fond transparent. */
.recap-ligne .titre-ligne { padding: 6px 10px; border-radius: 8px; font-weight: 700; }
.recap-ligne .logo-ligne { background: transparent; padding: 0; }
.recap-ligne.postee .titre-ligne { opacity: .55; }
.recap-ligne .logo-ligne.logo-clair { background: #26292d; padding: 3px 6px; }

/* ---------- 1.9.9 : récap allégé (une barre fine, une liste simple, un rond à cocher) ---------- */
.recap-entete { align-items: baseline; }
.recap-titre { margin: 0; font-size: 15px; }
.recap-titre span { color: var(--gris); font-size: 13px; }
.recap-vue { font-size: 13px; color: var(--gris); white-space: nowrap; }
.recap-vue button { padding: 0; border: 0; background: transparent; color: var(--gris); font: inherit; cursor: pointer; }
.recap-vue button.actif { color: var(--encre); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.recap-barre { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.recap-barre .barre-progression { flex: 1; height: 6px; }
.recap-barre b { font-size: 13px; }
.recap-resume { margin: 0 0 8px; font-size: 12px; color: var(--gris); }
.recap-bravo { margin: 8px 0; font-size: 14px; font-weight: 800; color: #1d9e75; }
.liste-jour { display: grid; }
.ligne-jour { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--trait); }
.rond-poste { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid #b9bcc0; border-radius: 50%; background: transparent; color: #fff; font-size: 11px; font-weight: 900; cursor: pointer; transition: background .2s, border-color .2s; }
.rond-poste:hover { border-color: #1d9e75; }
.rond-poste.coche { background: #1d9e75; border-color: #1d9e75; }
.rond-poste.petit { width: 16px; height: 16px; font-size: 9px; }
.trait-marque { flex: 0 0 4px; height: 20px; border-radius: 2px; }
.petit-logo { flex: 0 0 auto; width: 64px; height: 22px; object-fit: contain; }
.petit-nom { flex: 0 0 auto; font-size: 12px; color: var(--gris); }
.ligne-jour .icone-reseau { width: 16px; height: 16px; }
.titre-jour { flex: 1 1 0; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--encre); font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.titre-jour small { color: var(--gris); font-size: 11px; }
.ligne-jour.postee .titre-jour { color: var(--gris); text-decoration: line-through; }
.lien-action { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--couleur-2); font-size: 13px; font-weight: 800; cursor: pointer; }
.lien-action:hover { text-decoration: underline; }
.replier-postees { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 2px; padding: 10px 0 0; border: 0; border-top: 1px solid var(--trait); background: transparent; color: var(--gris); font-size: 13px; cursor: pointer; text-align: left; }

/* 1.10.1 : le logo de la marque une seule fois, en tête de son groupe (fin trait de sa couleur dessous). */
.groupe-marque { display: flex; align-items: center; padding: 12px 0 6px; border-bottom: 2px solid; }
.groupe-marque + .ligne-jour { border-top: 0; }
.logo-groupe { width: auto; max-width: 110px; height: 28px; object-fit: contain; object-position: left center; }
/* 1.10.5 : to-do groupée comme le récap. « Toutes les marques » : trait gris. */
.groupe-todo { gap: 6px; }
.groupe-todo .groupe-marque { padding-top: 4px; border-bottom-color: var(--trait); }
.groupe-toutes { font-size: 13px; color: var(--encre); }

/* 1.11.0 : page « Nouveau client » (questionnaire), une carte par étape. */
#page-questionnaire { max-width: 980px; }
.q-haut { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.q-haut h1 { margin-bottom: 4px; }
.q-haut .formulaire-ligne { margin-top: 0; }
.q-haut select { padding: 9px 10px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; font-size: 13px; max-width: 260px; }
.q-haut .bouton-discret { margin-top: 0; }
.q-etape { display: grid; gap: 14px; margin-top: 16px; }
.q-tete { display: flex; align-items: flex-start; gap: 14px; }
.q-tete h2 { margin: 2px 0 2px; font-size: 18px; }
.q-tete p { margin: 0; }
.q-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--couleur-vive); color: #fff; font-size: 14px; font-weight: 900; }
.q-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.q-champ { display: grid; gap: 5px; min-width: 0; }
.q-champ span, .q-etiquette { font-size: 12px; font-weight: 800; color: var(--encre); }
.q-champ input, .q-champ textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; font: inherit; font-size: 14px; background: #fff; }
.q-champ textarea { resize: vertical; }
.q-champ input:focus, .q-champ textarea:focus { outline: 2px solid var(--couleur-vive); outline-offset: 1px; border-color: transparent; }
.q-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.q-puce { display: grid; gap: 2px; padding: 9px 14px; border: 1px solid var(--trait); border-radius: 12px; background: #fff; color: var(--encre); text-align: left; cursor: pointer; }
.q-puce small { color: var(--gris); font-size: 11px; }
.q-puce[aria-checked="true"] { border: 2px solid var(--couleur-vive); padding: 8px 13px; background: color-mix(in srgb, var(--couleur-vive) 8%, #fff); }
.q-cases { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.q-case { padding: 8px 12px; border: 1px solid var(--trait); border-radius: 10px; background: #fff; cursor: pointer; }
.q-case small { color: var(--gris); font-size: 11px; font-variant-numeric: tabular-nums; }
.q-bloc { display: grid; gap: 8px; }
.q-marque { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--trait); border-radius: 14px; background: #fafaf8; }
.q-marque-tete { display: flex; align-items: center; justify-content: space-between; }
.q-marque-tete b { font-size: 16px; }
.q-couleurs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.q-couleur { position: relative; width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px #0002; }
.q-couleur button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0003; color: var(--gris); font-size: 13px; line-height: 1; cursor: pointer; }
.q-couleur-ajout { display: flex; align-items: center; gap: 8px; }
.q-couleur-ajout input { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.q-couleur-ajout .bouton-discret { margin-top: 0; }
.q-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.q-logo { display: grid; gap: 8px; justify-items: start; }
.q-logo span { font-size: 12px; font-weight: 800; }
.q-logo img, .q-logo-vide { width: 160px; height: 70px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; border: 1px solid var(--trait); }
.q-logo-vide { display: grid; place-items: center; color: var(--gris); font-size: 12px; background: #fff; border-style: dashed; }
.q-logo .bouton-discret { margin-top: 0; }
.q-resume { display: grid; gap: 14px; }
.q-etat { padding: 14px 16px; border-radius: 12px; }
.q-etat.incomplet { background: #fdf3e1; }
.q-etat.complet { background: #e3f3ea; color: #1f6b44; }
.q-etat ul, .q-resume ul { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.q-fichiers li { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.q-erreur { margin: 0; padding: 12px 14px; border-radius: 10px; background: #fbe5e3; color: #9b2119; font-size: 13px; font-weight: 700; }
.q-code { max-height: 320px; overflow: auto; padding: 14px; border-radius: 10px; background: #17191c; color: #e9eaee; font-size: 12px; }
.q-resume details summary { cursor: pointer; font-size: 13px; font-weight: 700; }

/* 1.14.0 : questionnaire en 3 parties (onglets), Bibliothèque par marque, ateliers par format. */
.q-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.q-onglet { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--trait); border-radius: 14px; background: #fff; color: var(--encre); font: inherit; font-size: 14px; cursor: pointer; }
.q-onglet .q-num { width: 24px; height: 24px; font-size: 12px; background: #c9ccd1; }
.q-onglet.actif { border: 2px solid var(--couleur-vive); padding: 9px 15px; }
.q-onglet.actif .q-num { background: var(--couleur-vive); }
.q-compte { min-width: 22px; padding: 2px 7px; border-radius: 99px; background: #fdf3e1; color: #9a5b00; font-size: 11px; font-weight: 900; text-align: center; }
.q-onglet.complet .q-compte { background: #e3f3ea; color: #1f6b44; }
.q-suite { display: flex; justify-content: end; margin-top: 16px; }
.q-categorie { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--trait); }
.q-categorie-tete { display: flex; align-items: center; gap: 10px; }
.q-categorie-tete small { color: var(--gris); font-size: 12px; }
.q-categorie-tete .retirer-couleur { margin-left: auto; }
.q-vignettes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q-vignettes .bouton-discret { margin-top: 0; }
.q-vignette { width: 64px; height: 64px; padding: 0; border: 1px solid var(--trait); border-radius: 10px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; cursor: pointer; overflow: hidden; }
.q-vignette img { width: 100%; height: 100%; object-fit: contain; }
.q-vignette:hover { outline: 2px solid #c0392b; }
.q-atelier-nom { display: flex; align-items: center; gap: 10px; }
.q-atelier-nom img { width: 28px; height: 28px; object-fit: contain; }
.q-pictos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.q-pictos .bouton-discret { margin-top: 0; }
.q-picto { width: 48px; height: 48px; padding: 8px; border: 1px solid var(--trait); border-radius: 12px; background: #fff; cursor: pointer; }
.q-picto img { width: 100%; height: 100%; object-fit: contain; }
.q-picto[aria-pressed="true"] { border: 2px solid var(--couleur-vive); padding: 7px; }
.q-format { position: relative; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--trait); border-radius: 12px; background: #fff; }
.q-format-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-right: 30px; }
.q-format-tete b { font-size: 15px; }
.q-format-tete small { color: var(--gris); font-size: 12px; font-variant-numeric: tabular-nums; }
.q-format-tete .q-aide { color: #9a5b00; }
.q-retirer-format { position: absolute; top: 8px; right: 8px; }
.q-format .bouton-discret { justify-self: start; margin-top: 0; }
.q-grille-serree { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.q-ajout-format { justify-self: start; padding: 9px 12px; border: 1px dashed #b9bcc0; border-radius: 10px; background: transparent; color: var(--gris); font-size: 13px; font-weight: 700; cursor: pointer; }