/* Plateforme d'édition — pages de la plateforme : connexion, console agence, espace d'un site, aperçu partagé,
   messages. Thèmes de la famille des outils VSC (valeurs de Virus Client Studio, src/app/globals.css) :
   - « Verre » (défaut) : clair, panneaux en verre dépoli sur un fond aurore fixe, action principale à l'encre sombre ;
   - « Nuit » (option) : mêmes jetons redéfinis sous [data-theme="nuit"], action principale en dégradé corail.
   Aucune couleur codée en dur hors des jetons ; fond posé sur body ; repli sans flou et en transparence réduite ; à
   l'impression, jetons en clair. */

:root {
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Outfit Variable", "Inter Variable", ui-sans-serif, sans-serif;
  --encre: #1c1626;
  --encre-doux: #463f52;
  --attenue: #625b6e;
  --ligne: rgb(28 22 38 / 0.09);
  --ligne-forte: rgb(28 22 38 / 0.18);
  --fond: #f5f2f7;
  --surface: #ffffff;
  --verre: rgb(255 255 255 / 0.58);
  --verre-fort: rgb(255 255 255 / 0.84);
  --verre-bord: rgb(255 255 255 / 0.86);
  --ombre-verre: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 22px 50px -30px rgb(60 30 80 / 0.34), 0 2px 6px -2px rgb(60 30 80 / 0.06);
  --flou-verre: blur(22px) saturate(165%);
  --action-fond: #1c1626;
  --action-texte: #ffffff;
  --actif-fond: #ffffff;
  --actif-texte: #1c1626;
  --actif-ombre: 0 6px 16px -8px rgb(60 30 80 / 0.45);
  --choisi-fond: rgb(238 80 104 / 0.1);
  --choisi-bord: rgb(196 47 76 / 0.45);
  --choisi-texte: #a3263f;
  --anneau-focus: #a3263f;
  --champ: rgb(255 255 255 / 0.74);
  --bord-champ: #8b8496;
  --action-survol: #352b47;
  --succes: #0f7a4d;
  --succes-fond: #e8f6ef;
  --attention: #8a5100;
  --attention-fond: #fff5e0;
  --danger: #b42318;
  --danger-fond: #fdecea;
  --info: #1f5f8b;
  --info-fond: #e8f1f8;
  --aurore:
    radial-gradient(44rem 34rem at 4% -8%, rgb(255 146 124 / 0.42), transparent 70%),
    radial-gradient(40rem 34rem at 100% -4%, rgb(178 160 255 / 0.46), transparent 70%),
    radial-gradient(48rem 34rem at 82% 108%, rgb(255 193 154 / 0.46), transparent 70%),
    radial-gradient(36rem 30rem at 14% 104%, rgb(150 210 255 / 0.36), transparent 70%);
}

[data-theme="nuit"] {
  --encre: #f3f1f9;
  --encre-doux: #c4c0d5;
  --attenue: #9a96b0;
  --ligne: rgb(255 255 255 / 0.09);
  --ligne-forte: rgb(255 255 255 / 0.18);
  --fond: #070a14;
  --surface: #121729;
  --verre: rgb(255 255 255 / 0.05);
  --verre-fort: rgb(18 23 41 / 0.9);
  --verre-bord: rgb(255 255 255 / 0.1);
  --ombre-verre: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 30px 60px -34px rgb(0 0 0 / 0.85);
  --flou-verre: blur(18px) saturate(140%);
  --action-fond: linear-gradient(110deg, #ff5f78, #ff9a5c);
  --action-texte: #14070b;
  --actif-fond: rgb(255 255 255 / 0.12);
  --actif-texte: #ffffff;
  --actif-ombre: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  --choisi-fond: rgb(255 111 125 / 0.14);
  --choisi-bord: rgb(255 138 122 / 0.5);
  --choisi-texte: #ffb3a8;
  --anneau-focus: #ffb3a8;
  --champ: rgb(255 255 255 / 0.05);
  --bord-champ: #6c6782;
  --action-survol: linear-gradient(110deg, #ff7389, #ffab72);
  --succes: #45d69a;
  --succes-fond: rgb(69 214 154 / 0.12);
  --attention: #ffc24d;
  --attention-fond: rgb(255 194 77 / 0.12);
  --danger: #ff7b72;
  --danger-fond: rgb(255 123 114 / 0.13);
  --info: #7cb8ff;
  --info-fond: rgb(124 184 255 / 0.12);
  --aurore:
    radial-gradient(46rem 34rem at 12% -10%, rgb(255 95 120 / 0.3), transparent 70%),
    radial-gradient(42rem 34rem at 100% 6%, rgb(124 92 255 / 0.26), transparent 70%),
    radial-gradient(52rem 36rem at 70% 112%, rgb(255 154 92 / 0.14), transparent 70%);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* un composant en flex ou en grille reste caché quand il le doit */
html { color-scheme: light; }
[data-theme="nuit"] { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.5 var(--font-sans);
  overflow-x: hidden;
}

.fond-aurore {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--aurore);
}

.verre {
  background: var(--verre);
  -webkit-backdrop-filter: var(--flou-verre);
  backdrop-filter: var(--flou-verre);
  border: 1px solid var(--verre-bord);
  box-shadow: var(--ombre-verre);
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--anneau-focus); outline-offset: 2px; }

/* Barre de l'aperçu partagé */
.barre {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 12px 16px 0;
  padding: 10px 14px;
  border-radius: 18px;
}
.barre .titre { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
.barre .titre strong { font: 600 16px/1.3 var(--font-display); }
.barre .titre span { color: var(--attenue); font-size: 13px; }
.pages, .versions { display: flex; flex-wrap: wrap; gap: 6px; }
.page, .version {
  padding: 6px 12px;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  color: var(--encre-doux);
  text-decoration: none;
  font-size: 13.5px;
}
.page:hover, .version:hover { border-color: var(--choisi-bord); }
.page.choisie { background: var(--choisi-fond); border-color: var(--choisi-bord); color: var(--choisi-texte); font-weight: 600; }
.version.choisie { background: var(--actif-fond); color: var(--actif-texte); box-shadow: var(--actif-ombre); border-color: transparent; font-weight: 600; }

.bascule-theme {
  width: 38px;
  height: 38px;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: var(--verre-fort);
  color: var(--encre);
  font-size: 17px;
  cursor: pointer;
}
.bascule-theme .soleil { display: none; }
[data-theme="nuit"] .bascule-theme .soleil { display: inline; }
[data-theme="nuit"] .bascule-theme .lune { display: none; }
body > .bascule-theme, #app > .bascule-theme { position: fixed; top: 16px; right: 16px; }

.cadre-apercu { padding: 12px 16px 16px; }
.cadre-apercu iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 120px);
  min-height: 420px;
  border: 1px solid var(--ligne-forte);
  border-radius: 14px;
  background: var(--surface);
}

.message { max-width: 560px; margin: 18vh auto 0; padding: 28px; border-radius: 20px; }
.message h1 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-display); }
.message p { margin: 0; color: var(--encre-doux); }

/* Console : barre du haut, navigation, cartes, tableaux, formulaires, boutons, badges, messages */
.entete-app {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 12px 16px 0;
  padding: 10px 14px;
  border-radius: 18px;
}
.marque { display: flex; flex-direction: column; margin-right: auto; }
.marque strong { font: 600 16px/1.2 var(--font-display); }
.marque span { color: var(--attenue); font-size: 12.5px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav button {
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--encre-doux);
  font: 500 14px/1.2 var(--font-sans);
  cursor: pointer;
}
.nav button[aria-current="page"] { background: var(--actif-fond); color: var(--actif-texte); box-shadow: var(--actif-ombre); font-weight: 600; }
.personne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--attenue); font-size: 13px; }
.bandeau-agence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 12px 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--attention);
  border-radius: 14px;
  background: var(--attention-fond);
  color: var(--attention);
  font-weight: 500;
}
.contenu { max-width: 1180px; margin: 0 auto; padding: 18px 16px 48px; }
.contenu h1 { margin: 6px 0 14px; font: 600 24px/1.25 var(--font-display); }
.contenu h2 { margin: 0 0 10px; font: 600 17px/1.3 var(--font-display); }
.sous-titre { margin: -8px 0 16px; color: var(--attenue); }
.carte { padding: 16px 18px; border-radius: 18px; margin-bottom: 14px; }
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grille .carte { margin: 0; }
.chiffres { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 16px; }
.chiffre { padding: 12px 14px; border-radius: 14px; }
.chiffre strong { display: block; font: 600 22px/1.2 var(--font-display); }
.chiffre span { color: var(--attenue); font-size: 13px; }
.lignes { display: grid; gap: 4px; margin: 10px 0 0; font-size: 14px; }
.lignes div { display: flex; justify-content: space-between; gap: 10px; }
.lignes dt { color: var(--attenue); }
.lignes dd { margin: 0; font-weight: 500; text-align: right; }
.jauge { height: 8px; margin-top: 8px; border-radius: 999px; background: var(--ligne); overflow: hidden; }
.jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--action-fond); }
.muet { color: var(--attenue); }
.tableau-defile { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
th { color: var(--attenue); font-weight: 500; font-size: 12.5px; }
.formulaire { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: end; }
.formulaire .large { grid-column: 1 / -1; }
.champ { display: grid; gap: 5px; font-size: 13.5px; color: var(--encre-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bord-champ);
  border-radius: 10px;
  background: var(--champ);
  color: var(--encre);
  font: 400 14.5px/1.4 var(--font-sans);
}
.champ textarea { min-height: 96px; resize: vertical; }
td select, .actions select {
  padding: 5px 8px;
  border: 1px solid var(--bord-champ);
  border-radius: 8px;
  background: var(--champ);
  color: var(--encre);
  font: 400 13.5px/1.3 var(--font-sans);
}
.case { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--action-fond);
  color: var(--action-texte);
  font: 600 14px/1.2 var(--font-sans);
  cursor: pointer;
}
.bouton:hover { background: var(--action-survol); }
.bouton[disabled] { opacity: 0.55; cursor: not-allowed; }
.bouton.secondaire { background: var(--verre-fort); color: var(--encre); border-color: var(--ligne-forte); }
.bouton.secondaire:hover { border-color: var(--choisi-bord); }
.bouton.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.bouton.danger:hover { background: var(--danger-fond); }
.bouton.petit { padding: 5px 11px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--ligne-forte); font-size: 12px; font-weight: 600; color: var(--encre-doux); }
.badge.succes { color: var(--succes); background: var(--succes-fond); border-color: transparent; }
.badge.attention { color: var(--attention); background: var(--attention-fond); border-color: transparent; }
.badge.danger { color: var(--danger); background: var(--danger-fond); border-color: transparent; }
.badge.info { color: var(--info); background: var(--info-fond); border-color: transparent; }
.controles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.controles li { display: flex; gap: 8px; font-size: 14px; }
.controles .ok { color: var(--succes); }
.controles .ko { color: var(--danger); }
.fil { display: grid; gap: 8px; margin: 10px 0; }
.fil p { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--verre-fort); border: 1px solid var(--ligne); white-space: pre-wrap; }
.fil p b { display: block; font-size: 12px; color: var(--attenue); font-weight: 600; }
.notice-texte { max-height: 260px; overflow: auto; padding: 12px; border-radius: 12px; border: 1px solid var(--ligne-forte); white-space: pre-wrap; background: var(--verre-fort); }
.connexion { max-width: 440px; margin: 14vh auto 0; padding: 28px; border-radius: 22px; }
.connexion h1 { margin: 0 0 6px; font: 600 24px/1.25 var(--font-display); }
.connexion p { color: var(--encre-doux); }
.connexion form { display: grid; gap: 12px; margin-top: 14px; }
.messages { position: fixed; right: 16px; bottom: 16px; z-index: 10; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.message-flottant { padding: 11px 15px; border-radius: 14px; background: var(--action-fond); color: var(--action-texte); box-shadow: var(--ombre-verre); font-size: 14px; }
.message-flottant.erreur { background: var(--danger-fond); color: var(--danger); border: 1px solid var(--danger); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Espace d'un site : panneau (demandes, discussion, publication) et aperçu côte à côte, sur toute la hauteur */
#app.mode-espace { display: flex; flex-direction: column; height: 100vh; }
.bandeau-pause {
  margin: 12px 16px 0;
  padding: 10px 14px;
  border: 1px solid var(--attention);
  border-radius: 14px;
  background: var(--attention-fond);
  color: var(--attention);
  font-weight: 500;
}
.espace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  gap: 14px;
  padding: 12px 16px 16px;
}
.panneau { display: flex; flex-direction: column; min-height: 0; border-radius: 18px; overflow: hidden; }
.panneau .vue { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.panneau :is(input:not([type="checkbox"]):not([type="file"]), select, textarea) {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bord-champ);
  border-radius: 10px;
  background: var(--champ);
  color: var(--encre);
  font: 400 14.5px/1.4 var(--font-sans);
}
.panneau textarea { resize: vertical; }
.panneau .champ textarea { min-height: 0; }
.panneau h2 { margin: 0; font: 600 17px/1.3 var(--font-display); }
.panneau h3 { margin: 0 0 8px; font: 600 14.5px/1.3 var(--font-display); }
.vue-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.vue-tete h2 { flex: 1; min-width: 0; }
.retour {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--ligne-forte);
  border-radius: 999px;
  background: var(--verre-fort);
  color: var(--encre);
  font: 600 18px/1 var(--font-sans);
  cursor: pointer;
}
.salut { margin-bottom: 4px !important; }
.pile { display: grid; gap: 10px; }
.petit { font-size: 12.5px; }
.avis { margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ligne-forte); font-size: 13.5px; }
.avis.attention { color: var(--attention); background: var(--attention-fond); border-color: var(--attention); }
.avis.danger { color: var(--danger); background: var(--danger-fond); border-color: var(--danger); }
.carte-legere { padding: 12px; border-radius: 12px; border: 1px dashed var(--ligne-forte); color: var(--attenue); }
.invariants { margin: 0; padding: 10px 18px; border-top: 1px solid var(--ligne); color: var(--attenue); font-size: 12.5px; }
.bandeau-attente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--choisi-bord);
  background: var(--choisi-fond);
  color: var(--choisi-texte);
  font-size: 13.5px;
  font-weight: 500;
}
.bandeau-attente span { flex: 1; }
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.tuile, .libre {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--ligne-forte);
  border-radius: 14px;
  background: var(--verre-fort);
  color: var(--encre);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tuile:hover, .libre:hover { border-color: var(--choisi-bord); }
.tuile[disabled], .libre[disabled] { opacity: 0.5; cursor: not-allowed; }
.tuile .icone { font-size: 17px; line-height: 1.2; }
.tuile strong { font-size: 14px; font-weight: 600; }
.tuile span:last-child { color: var(--attenue); font-size: 12.5px; }
.libre { width: 100%; margin-top: 8px; border-style: dashed; color: var(--encre-doux); font-size: 14px; }
.intro { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.intro p { margin: 0; padding: 9px 12px; border-radius: 14px; background: var(--verre-fort); border: 1px solid var(--ligne); font-size: 14px; }
.avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  background: var(--action-fond);
  color: var(--action-texte);
  font: 700 11px/1 var(--font-sans);
}
.etape-resolue { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--succes); font-size: 13.5px; font-weight: 500; }
.joindre { position: relative; }
.joindre:focus-within { outline: 2px solid var(--anneau-focus); outline-offset: 2px; }
.grille-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.grille-images figure { margin: 0; }
.grille-images button {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 2px solid var(--ligne-forte);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}
.grille-images button:hover { border-color: var(--choisi-bord); }
.grille-images img { display: block; width: 100%; height: 100%; object-fit: cover; }
.grille-images figcaption { margin-top: 3px; color: var(--attenue); font-size: 11.5px; overflow-wrap: anywhere; }
.secours summary { cursor: pointer; color: var(--encre-doux); font-size: 13.5px; }
.secours[open] summary { margin-bottom: 8px; }
.compteur { margin-top: -6px; color: var(--attenue); font-size: 12px; }
.compteur.trop { color: var(--danger); font-weight: 600; }

/* Discussion avec l'assistant */
.bulles { display: grid; gap: 8px; }
.bulle { max-width: 92%; padding: 9px 12px; border-radius: 14px; font-size: 14px; overflow-wrap: anywhere; }
.bulle p { margin: 0 0 6px; }
.bulle p:last-child { margin: 0; }
.bulle ul, .bulle ol { margin: 0 0 6px; padding-left: 20px; }
.bulle code { padding: 1px 4px; border-radius: 5px; background: var(--ligne); font-size: 12.5px; }
.bulle.client { justify-self: end; background: var(--action-fond); color: var(--action-texte); white-space: pre-wrap; }
.bulle.assistant, .bulle.agence { justify-self: start; background: var(--verre-fort); border: 1px solid var(--ligne); }
.bulle.journal { justify-self: stretch; max-width: none; padding: 2px 0 2px 10px; border-left: 2px solid var(--ligne-forte); border-radius: 0; color: var(--attenue); font-size: 12.5px; }
.bulle.erreur { justify-self: stretch; max-width: none; background: var(--danger-fond); color: var(--danger); border: 1px solid var(--danger); }
.attendre { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--attenue); font-size: 13px; }
.points { display: inline-flex; gap: 3px; }
.points i { width: 6px; height: 6px; border-radius: 999px; background: var(--attenue); animation: points 1.2s infinite ease-in-out; }
.points i:nth-child(2) { animation-delay: 0.15s; }
.points i:nth-child(3) { animation-delay: 0.3s; }
@keyframes points { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .points i { animation: none; opacity: 0.6; } }
.bloc { margin: 12px 0; padding: 12px; border: 1px solid var(--ligne-forte); border-radius: 14px; background: var(--verre-fort); }
.bloc > * + * { margin-top: 8px; }
.liste-attente { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.liste-attente li { font-size: 13.5px; }
.rang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rang .nom { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rang input { flex: 1; min-width: 0; width: auto !important; }
.retouches li { display: grid; gap: 2px; }
.diff {
  margin-top: 6px;
  padding: 8px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--ligne);
  border-radius: 10px;
  background: var(--champ);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
}
.diff > span { display: block; }
.diff .p { color: var(--succes); background: var(--succes-fond); }
.diff .m { color: var(--danger); background: var(--danger-fond); }
.diff .n { color: var(--attenue); font-style: italic; }
.diff .c { color: var(--encre-doux); }
.diff img { display: block; max-width: 100%; margin-top: 6px; border-radius: 8px; }
.avert { padding: 10px 12px; border: 1px solid var(--attention); border-radius: 12px; background: var(--attention-fond); color: var(--attention); font-size: 13.5px; }
.avert ul { margin: 6px 0; padding-left: 18px; }
.partage:empty { display: none; }
.etat-ligne { display: flex; align-items: center; gap: 8px; margin: 10px 0; color: var(--attenue); font-size: 13px; }
.pastille-etat { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--ligne-forte); }
.pastille-etat.ok { background: var(--succes); }
.pastille-etat.cours { background: var(--attention); }
.pastille-etat.err { background: var(--danger); }
.etapes { margin: 0 0 10px; padding-left: 20px; font-size: 14px; }

/* Mes changements, outils SEO, aide */
.filtres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.filtres select { padding: 6px 8px !important; font-size: 13px !important; }
.mois { margin: 14px 0 6px !important; color: var(--attenue); font: 600 12.5px/1.3 var(--font-sans) !important; text-transform: capitalize; }
.demande { margin-bottom: 6px; border: 1px solid var(--ligne-forte); border-radius: 12px; background: var(--verre-fort); }
.demande summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 9px 12px; cursor: pointer; list-style: none; }
.demande summary::-webkit-details-marker { display: none; }
.demande summary .texte { font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.demande summary .meta { grid-column: 1 / -1; color: var(--attenue); font-size: 12px; }
.demande-corps { display: grid; gap: 10px; padding: 0 12px 12px; }
.seo-avis { margin: 0 0 10px; padding: 10px 12px 10px 28px; border-radius: 12px; background: var(--attention-fond); color: var(--attention); font-size: 13px; }
.seo-avis.ok { background: var(--succes-fond); color: var(--succes); }
.seo-cible { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.seo-titres, .seo-images { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.seo-titres button, .seo-images button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--encre);
  font: 400 13px/1.35 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.seo-titres button:hover, .seo-images button:hover { border-color: var(--ligne-forte); }
.seo-titres button[aria-pressed="true"], .seo-images button[aria-pressed="true"] { border-color: var(--choisi-bord); background: var(--choisi-fond); }
.niveau-2 { padding-left: 14px; }
.niveau-3 { padding-left: 28px; }
.niveau-4 { padding-left: 42px; }
.niveau-5, .niveau-6 { padding-left: 56px; }
.seo-titres .n { flex: none; padding: 1px 6px; border-radius: 6px; background: var(--ligne); font: 700 11px/1.4 var(--font-sans); }
.seo-titres .n1 { background: var(--choisi-fond); color: var(--choisi-texte); }
.seo-titres .cache { color: var(--attenue); font-style: italic; }
.seo-titres .zone { margin-left: auto; color: var(--attenue); font-size: 11.5px; }
.seo-images img { width: 44px; height: 34px; flex: none; object-fit: cover; border-radius: 6px; background: var(--surface); }
.seo-images .sans { color: var(--danger); font-weight: 600; }
.aide h3 { margin-top: 16px; }
.aide p, .aide ul { margin: 0 0 8px; font-size: 14px; }
.aide ul { padding-left: 20px; }

/* Aperçu */
.apercu { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 10px; border-radius: 18px; }
.apercu-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 10px; }
.apercu-barre select { width: auto; max-width: 200px; padding: 5px 8px; border: 1px solid var(--bord-champ); border-radius: 999px; background: var(--champ); color: var(--encre); font: 400 13px/1.3 var(--font-sans); }
.segments { display: inline-flex; padding: 3px; border: 1px solid var(--ligne-forte); border-radius: 999px; background: var(--verre-fort); }
.segments button { padding: 5px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--encre-doux); font: 500 13px/1.2 var(--font-sans); cursor: pointer; }
.segments button[aria-pressed="true"] { background: var(--actif-fond); color: var(--actif-texte); box-shadow: var(--actif-ombre); font-weight: 600; }
.segments button[disabled] { opacity: 0.5; cursor: not-allowed; }
.bouton[aria-pressed="true"] { border-color: var(--choisi-bord); background: var(--choisi-fond); color: var(--choisi-texte); }
.pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.pastille { padding: 5px 11px; border: 1px solid var(--ligne-forte); border-radius: 999px; background: transparent; color: var(--encre-doux); font: 500 13px/1.2 var(--font-sans); cursor: pointer; }
.pastille[aria-pressed="true"] { background: var(--choisi-fond); border-color: var(--choisi-bord); color: var(--choisi-texte); font-weight: 600; }
.pastille.modifiee::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 999px; background: var(--choisi-texte); vertical-align: 1px; }
.cadre { flex: 1; min-height: 0; display: flex; justify-content: center; }
.cadre iframe { display: block; width: 100%; height: 100%; border: 1px solid var(--ligne-forte); border-radius: 12px; background: var(--surface); }
.cadre.mobile iframe { width: 390px; max-width: 100%; }

@media (max-width: 1023px) {
  #app.mode-espace { height: auto; }
  .espace { grid-template-columns: minmax(0, 1fr); }
  .panneau .vue { max-height: none; }
  .apercu { height: 78vh; min-height: 460px; }
}

@media (max-width: 640px) {
  .entete-app { margin: 8px 16px 0; }
  .barre { margin: 8px 16px 0; border-radius: 14px; }
  .cadre-apercu iframe { height: calc(100vh - 220px); }
  .message { margin: 10vh 16px 0; }
  .bandeau-pause { margin: 8px 16px 0; }
  .espace { padding: 8px 16px 16px; }
  .tuiles, .filtres { grid-template-columns: minmax(0, 1fr); }
  .grille-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sans flou d'arrière-plan, ou transparence réduite demandée : panneaux opaques, plus de fond décoratif. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .verre { background: var(--verre-fort); }
}
@media (prefers-reduced-transparency: reduce) {
  .verre { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fond-aurore { display: none; }
}

@media print {
  :root, [data-theme="nuit"] {
    --encre: #1c1626;
    --encre-doux: #463f52;
    --attenue: #625b6e;
    --fond: #ffffff;
    --surface: #ffffff;
    --verre: #ffffff;
    --verre-fort: #ffffff;
    --ligne-forte: rgb(28 22 38 / 0.18);
    --champ: #ffffff;
    --bord-champ: #8b8496;
    --actif-fond: #ffffff;
    --actif-texte: #1c1626;
    --action-fond: #1c1626;
    --action-texte: #ffffff;
    --succes: #0f7a4d;
    --attention: #8a5100;
    --danger: #b42318;
    --info: #1f5f8b;
  }
  .fond-aurore, .bascule-theme, .nav, .messages, .apercu { display: none; }
  #app.mode-espace { height: auto; }
  .espace { display: block; }
  .verre { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}