/* Espace client : pensé d'abord pour le téléphone (une colonne, action principale sous le pouce). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body.espace {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 1rem/1.5 var(--texte);
  padding-bottom: calc(148px + env(safe-area-inset-bottom));
}

body.espace.sans-navigation { padding-bottom: 32px; }

[hidden] { display: none !important; }   /* même pour les éléments qui ont un display (formulaires-boutons…) */
img { max-width: 100%; }
a { color: var(--lien); }

.insecable { white-space: nowrap; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 12px; top: 12px; z-index: 100; padding: 10px 14px; background: var(--boum); color: var(--encre); }

:focus-visible { outline: 3px solid var(--lien); outline-offset: 2px; }

/* En-tête : l'espace est celui du client, la marque Kboum reste discrète */
.tete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  background: var(--papier);
  border-bottom: 2px solid var(--encre);
}
.tete-produit { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; }
.tete-produit img { width: 26px; height: auto; display: block; }
.tete-nom { font-family: var(--titre); font-size: 1.1875rem; line-height: 1; white-space: nowrap; }
.tete-signature { display: none; font-size: .8125rem; color: var(--encre-2); white-space: nowrap; }
.tete-client {   /* l'espace est celui du client : son nom reste visible, à droite */
  min-width: 0; max-width: 50%;
  font-size: .875rem; font-weight: 600; color: var(--encre-2); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.page { max-width: 560px; margin: 0 auto; padding: 22px 16px 8px; }

h1, h2 { font-family: var(--titre); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: 1.75rem; line-height: 1.15; margin: 0 0 6px; }
h2 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 4px; }

.semaine-etat { margin: 0; color: var(--encre-2); }
.semaine-etat.fini { color: var(--encre); font-weight: 600; }

/* Les publications : des cases de BD, dans l'ordre de parution */
.fil { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 30px; }

.case {
  scroll-margin-top: 72px;   /* un lien direct (e-mail « Corriger ») ne cache pas l'en-tête sous la barre du haut */
  background: var(--papier);
  border: 2.5px solid var(--encre);
  box-shadow: var(--ombre);
}
.case[data-statut="validee"] { border-color: var(--valide); box-shadow: 5px 5px 0 var(--valide); }

.case-quand {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
  padding: 12px 14px;
  border-bottom: 2px solid currentColor;
}
.case[data-statut="validee"] .case-quand { color: var(--valide); }
.case-date { margin: 0; font-weight: 700; color: var(--encre); }
.case-ou { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--encre-2); }

.pastille {
  grid-column: 2; grid-row: 1; align-self: start;
  padding: 3px 10px;
  font-size: .8125rem; font-weight: 700; white-space: nowrap;
  color: var(--encre); background: var(--papier);
  border: 2px solid var(--encre); border-radius: 999px;
}
.case[data-statut="validee"] .pastille { color: #fff; background: var(--valide); border-color: var(--valide); }
.case[data-statut="a_corriger"] .pastille { border-style: dashed; }

.case-visuel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  background: var(--encre);
  scrollbar-width: none;
}
.case-visuel::-webkit-scrollbar { display: none; }

/* Carrousel : on glisse au doigt ; à la souris, les flèches (masquées en bout de course) */
.carrousel { position: relative; }
.carrousel-fleche {
  position: absolute; top: 50%; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-top: -22px; padding: 0;
  color: var(--encre); background: var(--papier);
  border: 2px solid var(--encre); border-radius: 50%;
  box-shadow: 2px 2px 0 var(--encre);
  cursor: pointer;
}
.carrousel-fleche.precedent { left: 10px; }
.carrousel-fleche.suivant { right: 10px; }
.carrousel-fleche svg { width: 22px; height: 22px; }
.carrousel-fleche:hover { background: var(--boum); }
.carrousel-fleche:active { transform: translate(2px, 2px); box-shadow: none; }
.carrousel-fleche:disabled { visibility: hidden; }
.case-visuel img { flex: 0 0 100%; width: 100%; height: auto; display: block; scroll-snap-align: start; }
/* place réservée avant le chargement : la page ne saute pas (et un lien direct tombe juste) */
.case[data-format="post_4x5"] .case-visuel img { aspect-ratio: 4 / 5; }
.case[data-format="carre_1x1"] .case-visuel img { aspect-ratio: 1; }
.case[data-format="story_9x16"] .case-visuel img { aspect-ratio: 9 / 16; }
.case-visuel.est-story { justify-content: center; padding: 18px 0; background: var(--fond); }
.case-visuel.est-story img { flex-basis: 58%; width: 58%; border: 2px solid var(--encre); border-radius: 16px; }

.case-compteur { margin: 8px 14px 0; font-size: .8125rem; font-weight: 600; color: var(--encre-2); text-align: right; }

.case-texte { padding: 12px 14px 0; }
.legende { margin: 0; overflow-wrap: anywhere; }
.legende.repliee { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lire {
  padding: 6px 0; min-height: 36px;
  font: inherit; font-weight: 600; color: var(--lien);
  background: none; border: 0; cursor: pointer;
}
.hashtags { margin: 6px 0 0; font-size: .875rem; color: var(--lien); overflow-wrap: anywhere; }

.case-changement {   /* nouvelle version : ce qui a changé, tant qu'elle attend l'accord */
  margin: 12px 14px 0; padding: 10px 12px;
  font-size: .9375rem;
  background: var(--fond); border-left: 5px solid var(--valide);
}
.case[data-nouvelle][data-statut="a_valider"] .pastille { background: var(--boum); }
.case-reponse {   /* l'agent n'a pas pu corriger : sa réponse, pour préciser la demande ou valider tel quel */
  margin: 12px 14px 0; padding: 10px 12px;
  font-size: .9375rem;
  background: var(--fond); border-left: 5px solid var(--encre);
}
.case-retour {
  margin: 12px 14px 0; padding: 10px 12px;
  font-size: .9375rem;
  background: var(--fond); border-left: 5px solid var(--boum);
}

.case-actions, .case-correction .rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.case-actions.une { grid-template-columns: 1fr; }
.case-actions form { display: contents; }   /* chaque action est un vrai formulaire : le bouton occupe sa case */
.case-actions .bouton, .case-correction .rangee .bouton { width: 100%; }
.bouton[aria-busy="true"] { opacity: .6; cursor: progress; }
.case-correction { padding: 14px 14px 0; }
.case-correction .rangee { padding: 12px 0 14px; }

label { display: block; font-weight: 600; margin-bottom: 6px; }
textarea, input[type="text"], input[type="email"], input[type="password"] {
  width: 100%; min-height: 48px; padding: 10px 12px;
  font: inherit; color: var(--encre);
  background: var(--papier);
  border: 2px solid var(--encre-2); border-radius: 10px;
}
textarea { resize: vertical; }
textarea:focus, input:focus { border-color: var(--encre); }

/* Messages (après une action sans JavaScript, ou une erreur) */
.messages:empty { display: none; }
.messages { margin: 0 0 18px; }
.message {
  margin: 0 0 8px; padding: 10px 14px;
  font-weight: 600;
  background: var(--papier); border: 2px solid var(--encre); border-left-width: 8px; border-radius: 4px;
}
.message-success { border-left-color: var(--valide); }
.message-error { border-color: var(--erreur); color: var(--erreur); }
.message-info { border-left-color: var(--boum); }

/* L'admin regarde l'espace d'un client */
.bandeau-admin {
  margin: 0; padding: 8px 16px;
  font-size: .875rem; font-weight: 600; text-align: center;
  color: var(--encre); background: var(--boum);
}
.bandeau-admin a { color: var(--encre); }

/* Pages simples : connexion, réglages, onglets à venir */
.page-simple { max-width: 32rem; }
.page-simple p { max-width: 60ch; }
.connexion { margin: 8vh auto 0; }
.connexion .intro { margin: 0 0 24px; color: var(--encre-2); }
.formulaire label { margin-top: 16px; }
.formulaire .bouton { margin-top: 24px; }
.aide { margin-top: 20px; font-size: .875rem; color: var(--encre-2); }
.fiche { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 20px 0; }
.fiche dt { font-weight: 700; }
.fiche dd { margin: 0; overflow-wrap: anywhere; }
.semaine-retour { margin: 0 0 8px; font-weight: 600; }
.a-relire {   /* vue admin : semaine générée, pas encore envoyée au client */
  margin: 0 0 18px; padding: 12px 14px;
  background: var(--papier); border: 2px dashed var(--encre);
}
.a-relire p { margin: 0 0 10px; font-weight: 600; }
.autres-semaines { margin-top: 40px; }
.autres-semaines ul { margin: 8px 0 0; padding-left: 20px; }
.autres-semaines li { margin: 6px 0; }

/* Boutons : l'action principale est jaune et « s'enfonce » comme une case qu'on presse */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 16px;
  text-decoration: none; text-align: center;
  font: 600 1rem/1.2 var(--texte);
  color: var(--encre); background: var(--papier);
  border: 2px solid var(--encre); border-radius: 12px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.bouton-boum { background: var(--boum); box-shadow: 3px 3px 0 var(--encre); }
.bouton-boum:hover { background: var(--boum-2); }
.bouton-boum:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--encre); }
.bouton-discret { min-height: 40px; border-color: transparent; background: none; color: var(--lien); }
.bouton-large { width: 100%; font-size: 1.0625rem; }

/* Questions de la semaine : des bulles, comme dans le logo */
.questions { margin-top: 40px; }
.questions > p { margin: 0 0 4px; color: var(--encre-2); }
.bulle {
  position: relative;
  margin: 16px 0 26px; padding: 14px;
  background: var(--papier);
  border: 2.5px solid var(--encre); border-radius: 18px;
}
.bulle::before, .bulle::after { content: ""; position: absolute; border-style: solid; border-color: transparent; }
.bulle::before { left: 26px; bottom: -17px; border-width: 17px 17px 0 0; border-top-color: var(--encre); }
.bulle::after { left: 29.5px; bottom: -10.5px; border-width: 11px 11px 0 0; border-top-color: var(--papier); }
.bulle p { margin: 0 0 10px; font-weight: 600; }
.bulle .rangee { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.bulle .merci { margin: 0; font-weight: 400; color: var(--encre-2); }

/* Bas d'écran : action principale + onglets, sous le pouce */
.barre-action {
  position: fixed; left: 0; right: 0; z-index: 15;
  bottom: calc(62px + env(safe-area-inset-bottom));
  padding: 10px 16px;
  background: var(--fond);
  border-top: 1px solid var(--trait);
}
.barre-action > * { display: block; max-width: 528px; margin: 0 auto; }
.barre-action[hidden] { display: none; }

.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--papier);
  border-top: 2px solid var(--encre);
}
.onglets a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: 6px 2px;
  font-size: .6875rem; font-weight: 600; text-decoration: none; text-align: center; white-space: nowrap;
  color: var(--encre-2);
}
.onglets a[aria-current="page"] { color: var(--encre); box-shadow: inset 0 4px 0 var(--boum); }
.onglets svg { width: 24px; height: 24px; }

/* Le seul moment bruyant : la semaine validée */
.boum { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none; }
.boum[hidden] { display: none; }
.boum-eclat {
  position: relative; display: grid; place-items: center;
  width: min(88vw, 440px); aspect-ratio: 260 / 196;
  transform: rotate(-8deg);
  animation: boum .7s cubic-bezier(.2, 1.6, .4, 1) both;
}
.boum-eclat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
                  filter: drop-shadow(7px 7px 0 var(--encre)); }
.boum-eclat polygon { fill: var(--boum); stroke: var(--encre); stroke-width: 5; stroke-linejoin: round; }
.boum-eclat span { position: relative; font-family: var(--cri); font-size: clamp(3.5rem, 17vw, 6.5rem);
                   line-height: 1; letter-spacing: .02em; color: var(--encre); }
@keyframes boum {
  from { opacity: 0; transform: rotate(-8deg) scale(.3); }
  to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .boum-eclat { animation: none; }
  .bouton { transition: none; }
  .bouton-boum:active { transform: none; }
}

/* Programme de la semaine : seulement sur grand écran (sur téléphone, la liste des cases suffit) */
.programme { display: none; }
.programme h2 { font-size: 1.0625rem; margin: 0 0 10px; }
.programme ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.programme li {
  position: relative; padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--trait);
}
.programme li::before {   /* état de la publication : même code que les pastilles */
  content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 12px;
  border: 2px solid var(--encre); border-radius: 3px; background: var(--papier);
}
.programme li[data-statut="validee"]::before { background: var(--valide); border-color: var(--valide); }
.programme li[data-statut="a_corriger"]::before { border-style: dashed; }
.programme a { font-weight: 700; color: var(--encre); text-decoration: none; }
.programme a:hover { text-decoration: underline; }
.programme-detail { display: block; font-size: .875rem; color: var(--encre-2); }

/* Tablette et ordinateur : onglets dans l'en-tête, publications en grille, action dans le résumé */
@media (min-width: 760px) {
  body.espace { padding-bottom: 56px; }
  .tete { display: grid; grid-template-columns: max-content 1fr minmax(0, max-content); column-gap: 16px; padding: 0 32px; }
  .onglets { justify-self: center; }
  .tete-client { max-width: 220px; justify-self: end; }
  .onglets { position: static; display: flex; gap: 2px; padding: 0; background: none; border: 0; }
  .onglets a { flex-direction: row; gap: 8px; min-height: 64px; padding: 0 14px; font-size: .9375rem; }
  .onglets a:hover { color: var(--encre); background: var(--fond); }
  .onglets a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--boum); }
  .onglets svg { display: none; width: 20px; height: 20px; }

  .page { max-width: 1400px; padding: 40px 32px 0; }
  .fil { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 40px 32px; align-items: start; }
  .barre-action { position: static; margin-top: 20px; padding: 0; background: none; border: 0; }
  .barre-action > * { max-width: 340px; margin: 0; }
  .bulles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 32px; }
  .questions > h2, .questions > p { max-width: 60ch; }
}

/* Ordinateur : le résumé et « Tout valider » restent à gauche pendant qu'on parcourt la semaine */
@media (min-width: 1100px) {
  .onglets svg { display: block; }
  .tete-signature { display: inline; }
  .mise-en-page {
    display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px;
    grid-template-areas: "tete fil" ". questions" ". autres";
  }
  .semaine-tete { grid-area: tete; align-self: start; position: sticky; top: 104px; }
  .fil { grid-area: fil; margin-top: 0; }
  .questions { grid-area: questions; }
  .autres-semaines { grid-area: autres; }
  .semaine-tete h1 { font-size: 2.125rem; }
  .barre-action > * { max-width: none; }
  .programme { display: block; margin-top: 32px; }
}

/* Connexion : le lien par e-mail d'abord, le mot de passe en second */
.avec-mot-de-passe { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--trait); }
.avec-mot-de-passe summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--lien); cursor: pointer; }

/* Plusieurs entreprises : laquelle ? */
.liste-entreprises { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
.liste-entreprises .bouton { flex-direction: column; align-items: flex-start; text-align: left; }
.liste-entreprises .bouton.actuelle { box-shadow: 3px 3px 0 var(--encre); }
.liste-entreprises .nom { font-family: var(--titre); font-weight: 400; font-size: 1.125rem; }
.liste-entreprises .detail { font-weight: 400; font-size: .875rem; color: var(--encre-2); }
.tete-client.changer::after { content: " ▾"; }

/* Page d'un lien reçu par e-mail ou Telegram : ce qui va se passer, puis le bouton */
.page-lien { margin: 4vh auto 0; }
.lien-entreprise { margin: 0 0 4px; font-weight: 700; color: var(--encre-2); }
.page-lien form { display: grid; gap: 12px; margin-top: 20px; }
.lien-liste { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--trait); }
.lien-liste li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.lien-liste img { flex: 0 0 64px; width: 64px; height: auto; border: 2px solid var(--encre); }
.lien-apercu { display: block; width: 100%; max-width: 420px; border: 2.5px solid var(--encre); box-shadow: var(--ombre); margin: 12px 0; }
.lien-apercu.est-story { max-width: 240px; border-radius: 16px; }

/* Réglages : des sections calmes, une action par ligne */
.reglage { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--trait); scroll-margin-top: 80px; }
.reglage h3 { margin: 0 0 2px; font-size: 1rem; }
.reglage p { margin: 0 0 10px; }
.canal { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--trait); }
.canal p { margin: 0; color: var(--encre-2); }
.canal-reutiliser { margin: 6px 0 0; }
.canaux { padding-left: 20px; }
.choix { display: grid; gap: 10px; margin-top: 12px; }
.option { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px; font-weight: 400;
          background: var(--papier); border: 2px solid var(--trait); border-radius: 12px; cursor: pointer; }
.option:has(input:checked) { border-color: var(--encre); }
.option input { flex: 0 0 auto; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--encre); }
.tacite { display: grid; gap: 8px; margin: 0 0 4px 34px; }
.tacite label { margin: 0; }
select { min-height: 48px; padding: 8px 12px; font: inherit; color: var(--encre); background: var(--papier);
         border: 2px solid var(--encre-2); border-radius: 10px; }
.choix > .bouton { justify-self: start; }
.personnes { list-style: none; margin: 12px 0; padding: 0; border-top: 1px solid var(--trait); }
.personnes li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0;
                border-bottom: 1px solid var(--trait); overflow-wrap: anywhere; }
.ajouter-personne .bouton { justify-self: start; }

@media (min-width: 760px) {
  .canal { grid-template-columns: 1fr auto; align-items: center; }
  .page-lien form { grid-template-columns: 1fr 1fr; }
}

/* Mon entreprise, questionnaire, dépôts, médias : pages de lecture, un peu plus larges */
.page-large { max-width: 44rem; }
.intro { color: var(--encre-2); }
.jauge { height: 14px; margin: 18px 0 6px; background: var(--papier); border: 2px solid var(--encre); border-radius: 999px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--boum); border-right: 2px solid var(--encre); }
.jauge-texte { margin: 0 0 14px; }
.en-cours { margin-top: 32px; }
.en-cours ul { margin: 8px 0 0; padding-left: 20px; }
.en-cours li { margin: 6px 0; overflow-wrap: anywhere; }
.en-cours .question { display: block; font-size: .875rem; color: var(--encre-2); }
.savoir-titre { margin-top: 36px; }
.savoir { margin-top: 18px; }
.savoir h3 { margin: 0; font-size: 1.0625rem; }
.savoir > .aide { margin: 2px 0 8px; }
.faits { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.fait { padding: 12px 0; border-bottom: 1px solid var(--trait); scroll-margin-top: 80px; }
.fait-texte { margin: 0; overflow-wrap: anywhere; }
.fait-etat { margin: 4px 0 0; font-size: .875rem; color: var(--encre-2); }
.fait[data-statut="valide"] .fait-etat { color: var(--valide); font-weight: 600; }
.fait[data-statut="a_valider"] { padding-left: 12px; border-left: 4px solid var(--boum); }
.fait-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; }
.corriger-fait { flex: 1 1 100%; }
.corriger-fait > summary { list-style: none; width: max-content; }
.corriger-fait > summary::-webkit-details-marker { display: none; }
.corriger-fait[open] > summary { margin-bottom: 10px; }
.corriger-fait form { display: grid; gap: 8px; }
.corriger-fait form .bouton { justify-self: start; }
.fait-actions > form { flex: 0 0 auto; }
.lien-medias { margin-top: 32px; font-weight: 600; }

.bloc-questions { margin: 28px 0 0; padding: 0; border: 0; }
.bloc-questions legend { padding: 0; font-family: var(--titre); font-size: 1.25rem; }
.bloc-questions .aide { margin: 2px 0 6px; }
.facultatif { font-family: var(--texte); font-size: .875rem; color: var(--encre-2); }
.a-confirmer { padding: 12px 0; border-bottom: 1px solid var(--trait); }
.a-confirmer p { margin: 0 0 8px; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.choix-ligne .option { padding: 8px 12px; }
.questionnaire .barre-action .bouton { width: 100%; }

input[type="file"] { width: 100%; min-height: 48px; padding: 10px; font: inherit; background: var(--papier);
                     border: 2px dashed var(--encre-2); border-radius: 10px; }
.depot .option.accord { margin-top: 18px; }
.depot .bouton { margin-top: 18px; }
.mes-demandes { margin-top: 36px; }
.mes-demandes ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; }
.demande { padding: 12px 14px; background: var(--papier); border: 2px solid var(--encre); border-radius: 12px; }
.demande[data-statut="annulee"], .demande[data-statut="refusee"] { border-style: dashed; }
.demande[data-statut="publiee"] { border-color: var(--valide); }
.demande-tete { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.demande .pastille { grid-column: auto; grid-row: auto; }
.demande[data-statut="publiee"] .pastille { color: #fff; background: var(--valide); border-color: var(--valide); }
.demande-date { font-size: .875rem; color: var(--encre-2); }
.demande-consigne { margin: 8px 0; overflow-wrap: anywhere; }
.demande-motif { margin: 8px 0; padding: 8px 10px; background: var(--fond); border-left: 5px solid var(--encre); }
.demande-fichiers { display: flex; flex-wrap: wrap; gap: 6px; }
.demande-fichiers img { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--encre); }
.doc { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 10px; font-weight: 600;
       border: 2px solid var(--encre); border-radius: 8px; text-decoration: none; color: var(--encre); background: var(--fond); }

.galerie { margin-top: 32px; }
.galerie ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.media { scroll-margin-top: 80px; }
.media img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--encre); background: var(--papier); }
.media-nom { margin: 6px 0 0; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.media-etat { margin: 2px 0 0; font-size: .8125rem; color: var(--encre-2); }
.media-actions { display: flex; flex-wrap: wrap; gap: 0 6px; }
.media-actions .bouton { min-height: 40px; padding: 6px 4px; font-size: .875rem; }

@media (min-width: 760px) {
  .galerie ul { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .questionnaire .barre-action > * { max-width: 340px; }
}

/* Story à stickers : le client la publie lui-même, à partir du kit envoyé une heure avant */
.case-kit { margin: 0; padding: 10px 14px; font-size: .875rem; background: var(--fond); border-bottom: 2px solid var(--trait); }

/* Ma charte : réglages à gauche, aperçu à droite (au-dessus sur téléphone) */
.charte-grille { display: grid; gap: 20px; }
.charte-apercu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.charte-apercu img { width: 100%; height: auto; border: 2.5px solid var(--encre); box-shadow: var(--ombre); background: var(--papier); }
.charte-apercu img[aria-busy="true"] { opacity: .55; }
.charte-apercu .aide { grid-column: 1 / -1; margin: 0; }
.choix-logos { display: grid; gap: 8px; }
.option-logo img { width: 56px; height: 56px; object-fit: contain; background: var(--papier); border: 1px solid var(--trait); }
.pastilles-couleur { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.pastille-couleur { width: 40px; height: 40px; padding: 0; border: 2px solid var(--encre); border-radius: 50%; cursor: pointer;
                    box-shadow: 2px 2px 0 var(--encre); }
.pastille-couleur.fixe { display: inline-block; width: 22px; height: 22px; vertical-align: middle; margin-right: 4px;
                         box-shadow: none; cursor: default; }
.couleurs { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 8px; }
.couleur { display: grid; grid-template-columns: 48px 7.5em 1fr 40px; gap: 8px; align-items: center; }
.couleur input[type="text"] { min-height: 44px; }
.couleur-roue { width: 48px; height: 44px; padding: 0; border: 2px solid var(--encre-2); border-radius: 10px; background: none; cursor: pointer; }
.couleur [data-effacer] { min-height: 44px; padding: 0; font-size: 1.25rem; }
.couleur.vide .couleur-roue { opacity: .35; }
.avance { margin-top: 12px; }
.avance summary { min-height: 40px; display: flex; align-items: center; font-weight: 600; color: var(--lien); cursor: pointer; }
.echantillon { margin: 6px 0 4px; padding: 8px 12px; font-size: 1.5rem; line-height: 1.2; background: var(--papier);
               border: 1px dashed var(--trait); border-radius: 8px; overflow-wrap: anywhere; }
.charte-form .barre-action .bouton { width: 100%; }
.proposition { margin: 18px 0 8px; padding: 14px; background: var(--papier); border: 2.5px solid var(--encre); box-shadow: var(--ombre); }
.proposition h2 { margin-top: 0; }
.proposition-apercus { display: flex; gap: 10px; margin: 10px 0; }
.proposition-apercus img { width: calc(50% - 5px); height: auto; border: 2px solid var(--encre); }
.proposition .rangee { display: flex; flex-wrap: wrap; gap: 10px; }
.exemples { list-style: none; margin: 14px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.exemples li { display: grid; gap: 4px; }
.exemples img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--encre); }
.exemple-avis { font-size: .8125rem; font-weight: 700; color: var(--valide); }
.exemple-avis.pas { color: var(--erreur); }
.exemple-commentaire { font-size: .8125rem; color: var(--encre-2); overflow-wrap: anywhere; }
.resume-charte { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; margin: 12px 0; }
.resume-charte img { width: 120px; height: auto; border: 2px solid var(--encre); }
.resume-charte p { margin: 0 0 6px; }

@media (min-width: 760px) {
  .exemples { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (min-width: 1000px) {
  .charte.page-large { max-width: 70rem; }
  .charte-grille { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .charte-apercu { order: 2; position: sticky; top: 90px; grid-template-columns: 1fr; }
  .charte-form { order: 1; }
}

/* Le client publie lui-même : ses outils sous chaque publication (images d'origine, légende à copier, « C'est publié ») */
.case-soi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.case-soi form { margin: 0; }
.case-copie { flex-basis: 100%; }
.case-copie textarea { width: 100%; margin-top: 6px; font: inherit; }
.case-kit.soi { margin: 12px 0 0; }