/*
  Copilote SEO — système de design
  Direction : cartographie / carnet d'exploration. Pas un template SaaS.
  Un seul élément fort (l'annotation en marge des opportunités) ; le reste
  reste discipliné et calme autour.
*/

:root {
  /* Couleurs de marque */
  --ink: #1B2430;
  --ink-soft: #4b5563;
  --ink-faint: #8b93a0;
  --paper: #EFEAE0;
  --paper-dim: #E3DCC9;
  --paper-line: #D9D0BA;
  --brass: #B8791E;
  --brass-dark: #96611A;
  --brass-tint: #F1E3CC;
  --sage: #2F6156;
  --sage-tint: #E1EAE6;
  --rust: #A23B3B;
  --rust-tint: #F2E2E0;
  --slate: #3E6B8A;
  --slate-tint: #E2EAF0;
  --clay: #B15A3A;
  --clay-tint: #F1E0D6;

  /* Typographie */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;

  --radius: 3px;
  --content-width: 42rem;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Structure ---------- */

.site-header {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
}

.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.wordmark:hover {
  color: var(--brass-dark);
}

.tagline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Bandeau sombre sur les écrans connectés déjà passés à la V2 (voir base.html,
   conditionné à planificateur_active() comme le reste de ce chantier) — reprend
   directement --ink en fond plutôt qu'une nouvelle couleur, pour rester dans la
   palette déjà en place. Contrastes vérifiés (WCAG) : wordmark en --paper sur --ink
   ≈ 13:1, tagline en --paper à 70% ≈ 6.3:1, survol en --brass-tint ≈ 12.4:1 — tous
   largement au-dessus du seuil AA (4.5:1) même si --ink change légèrement plus tard.
   --brass-dark (le survol habituel sur fond clair) ne passe pas ce seuil sur --ink
   (≈3:1) : jamais réutilisé tel quel ici. .account-menu__toggle n'a besoin d'aucun
   ajustement : il fixe déjà son propre fond (--paper) indépendamment du header. */
.site-header--sombre {
  background: var(--ink);
  border-bottom-color: var(--ink);
}

.site-header--sombre .wordmark {
  color: var(--paper);
}

.site-header--sombre .wordmark:hover {
  color: var(--brass-tint);
}

.site-header--sombre .tagline {
  color: rgba(239, 234, 224, 0.7);
}

/* Regroupe la tagline et les actions de header (voir {% block header_actions %},
   utilisé pour l'instant seulement par accueil.html) sur un même bloc à droite, pour
   que .site-header__inner garde exactement 2 enfants directs en justify-content:
   space-between — un bloc vide sur les pages qui n'utilisent pas ce block Jinja rend
   ce wrapper visuellement identique à l'ancien <span> seul, aucun changement sur le
   reste de l'app. */
.site-header__right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Menu compte (icône personne desktop / hamburger mobile), partagé par toutes les
   pages via _account_menu.html — contenu du menu déroulant conditionné par la
   présence d'un utilisateur connecté (connexion/inscription pour une visiteuse
   anonyme, sections de l'app + déconnexion une fois connectée). */
.account-menu {
  position: relative;
}

.account-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.account-menu__toggle:hover,
.account-menu__toggle[aria-expanded="true"] {
  border-color: var(--brass);
  color: var(--brass-dark);
}

.account-menu__icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Icône burger masquée par défaut (desktop) — voir la bascule dans le media query
   mobile ci-dessous, seuil aligné sur celui déjà utilisé pour l'écran de connexion
   (auth-hero__panel--split, 640px) plutôt que le 480px générique du reste du fichier :
   un menu de header profite d'un repli un peu plus tôt qu'une simple grille de
   contenu. */
.account-menu__icon--burger {
  display: none;
}

.account-menu__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11rem;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(27, 36, 48, 0.12);
  overflow: hidden;
  z-index: 2;
}

.account-menu__dropdown--open {
  display: block;
}

.account-menu__dropdown a {
  display: block;
  padding: 0.7rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  text-decoration: none;
}

.account-menu__dropdown a:hover {
  background: var(--brass-tint);
  color: var(--brass-dark);
}

.account-menu__dropdown a + a {
  border-top: 1px solid var(--paper-line);
}

/* Catégories dépliables du menu compte ("Opportunités SEO", "Paramètres") — repliées par
   défaut (retour direct, 03/08) : regroupe des liens apparentés sans allonger le menu tant
   qu'on ne l'ouvre pas. `list-style: none` + le marqueur webkit masqué remplacent le
   triangle natif du navigateur par le même chevron que le reste de l'app (::after ci-dessous),
   pour rester cohérent avec les autres <details> de l'interface. */
.account-menu__group {
  border-top: 1px solid var(--paper-line);
}

.account-menu__group summary {
  display: block;
  padding: 0.7rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.account-menu__group summary::-webkit-details-marker {
  display: none;
}

.account-menu__group summary::after {
  content: "▸";
  float: right;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
}

.account-menu__group[open] summary::after {
  transform: rotate(90deg);
}

.account-menu__group summary:hover {
  background: var(--brass-tint);
  color: var(--brass-dark);
}

.account-menu__dropdown .account-menu__group a {
  padding-left: 1.75rem;
}

/* Profil de sources externes (voir opportunity_service.niche_source_profile_label) :
   réservé à l'admin, jamais un lien — simple ligne d'information technique, distincte
   visuellement des actions de navigation au-dessus. */
.account-menu__meta {
  max-width: 15rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--paper-line);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.account-menu__meta-hint {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2.25rem 1.5rem 4rem;
}

/* ---------- Écrans de connexion/inscription ---------- */

/* Tagline visible sous le nom de l'app (le wordmark du header, au-dessus) — plus
   affirmée que .tagline (discrète dans le header sur toutes les autres pages),
   volontairement ici seulement, là où une première impression se joue. */
.auth-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

/* Carte façon carnet d'exploration en fond des écrans de connexion/inscription
   uniquement — jamais sur le reste de l'app. `position: fixed` + `inset: 0` plutôt
   que le classique "full-bleed" en 100vw/marges négatives essayé d'abord : ce dernier
   dépend d'un calcul de largeur de viewport (`100vw`) qui inclut la barre de
   défilement sur certains navigateurs/OS, ce qui laissait un espace vide résiduel et
   déclenchait un défilement horizontal indésirable — un `position: fixed` calé sur
   `inset: 0` est ancré directement sur le viewport visuel, sans ce calcul fragile, et
   sort l'élément du flux du document (donc plus aucune hauteur à faire défiler sur
   cet écran). Les libellés (`.map-labels`, voir _map_labels.html) et le panneau du
   formulaire (`.auth-hero__panel`) sont des enfants absolus de ce même conteneur
   fixe : ils bougent donc forcément ensemble avec l'image à tout redimensionnement,
   par construction plutôt que par coïncidence de calcul. Le header (`.site-header`,
   passé en `position: relative` + `z-index` + fond opaque) reste visuellement
   au-dessus de cette carte, qui commence sous lui. */
.auth-hero {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.auth-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Libellés positionnés en pourcentages (voir _map_labels.html) : ils suivent donc
   l'image quelle que soit la largeur réelle du hero, plutôt que des pixels fixes qui
   se décaleraient dès que le viewport change. */
.map-labels {
  position: absolute;
  inset: 0;
}

.map-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-serif);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: clamp(0.68rem, 1vw, 0.92rem);
  color: var(--brass-dark);
  white-space: nowrap;
}

.map-label__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brass);
  flex-shrink: 0;
}

.auth-mascot {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 0.75rem;
  transform-origin: bottom center;
  animation: mascot-wave 1.8s ease-in-out;
}

/* Centré sur le viewport entier (.auth-hero, `position: fixed; inset: 0`) plutôt que
   sur l'espace visible sous le header — un centrage à 50% pile pousse le haut du
   contenu (la mascotte) à moitié sous le header sur les viewports plus courts. Le
   décalage de 28px compense cette différence, avec la même marge que celle donnée
   aux libellés les plus hauts pour la même raison (voir _map_labels.html). */
.auth-hero__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 28px));
  width: min(340px, 90%);
  text-align: center;
  z-index: 1;
}

.auth-hero__panel .auth-tagline {
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}

.auth-hero__panel form,
.auth-hero__panel > p:last-child {
  text-align: left;
}

/* Variante "à côté du formulaire" (nouvelle mascotte Tya, cadrage plein pied
   uniquement) : image et formulaire sur la même ligne plutôt que la mascotte
   au-dessus du bloc de texte. Le plein pied a la hauteur nécessaire pour tenir la
   comparaison à côté du texte, contrairement au buste utilisé sur les autres écrans
   (voir .auth-mascot). Actif uniquement quand NOUVELLE_MASCOTTE_ACTIVE=true (voir
   login.html/register.html) — le comportement par défaut (mascotte boussole
   au-dessus, inchangé) reste la structure `.auth-hero__panel` seule. */
.auth-hero__panel--split {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: min(620px, 58%);
  text-align: left;
}

.auth-mascot--side {
  width: auto;
  height: 340px;
  margin: 0;
  flex-shrink: 0;
}

.auth-hero__formcol {
  flex: 1;
  min-width: 0;
}

/* Bandeau de réassurance (10/08, retour direct de bêta-testeuses) — sous le
   formulaire de connexion, visible sans compte. En colonne plutôt qu'une vraie
   rangée horizontale : .auth-hero__panel est une carte étroite (min(340px, 90%),
   voir plus haut), une rangée à 4 items y serait illisible, surtout sur mobile où
   la carte se resserre encore. Pictogrammes sobres (même style trait fin que
   .sidebar__help, jamais de remplissage plein), texte discret plutôt qu'un encadré
   coloré façon .guide__callout : une carte de connexion n'est pas l'endroit pour un
   bloc visuel appuyé. */
.reassurance-banner {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}

.reassurance-banner li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.reassurance-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--sage);
}

.reassurance-banner__faq {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  text-align: center;
}

/* ==========================================================================
   Page d'accueil (V2, derrière planificateur_active — voir accueil.html)
   ==========================================================================
   Refonte complète : plus de conteneur position:fixed façon .auth-hero (celui
   des écrans connexion/inscription, laissé intact ci-dessus, inchangé) — cette
   page vit en flux normal, plus robuste sur les viewports courts qu'un
   centrage vertical absolu (deux vrais bugs de chevauchement rencontrés avec
   l'ancienne approche, voir git history). Jamais de carte de fond avec
   libellés ici (`.map-labels`) : la maquette de référence ne la montre pas
   sur cet écran précis, contrairement à connexion/inscription. */
.accueil {
  background: var(--paper);
  min-height: 100vh;
}

.accueil__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
}

.accueil__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.accueil__logo-icon {
  width: 2.1rem;
  height: 2.1rem;
}

.accueil__logo-text {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.accueil__logo-tagline {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--brass-dark);
}

.accueil__hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: 3rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 1.5rem 2rem 4.5rem;
}

.accueil__headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.18;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.accueil__headline-accent {
  display: block;
  color: var(--brass);
}

.accueil__divider {
  width: 3.5rem;
  height: 2px;
  margin: 1.5rem 0;
  background: var(--paper-line);
  border: none;
}

.accueil__intro {
  max-width: 30rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

.accueil__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.accueil__cta svg {
  width: 1.1rem;
  height: 1.1rem;
}

.accueil__illustration {
  display: flex;
  justify-content: center;
}

.accueil__illustration img {
  width: 100%;
  max-width: 26rem;
  height: auto;
}

/* Trois repères courts sous le bouton "Continuer" de la page d'accueil
   uniquement (voir accueil.html) — jamais réutilisés sur connexion/inscription,
   qui partagent le reste de .auth-hero. */
.auth-features {
  display: flex;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.auth-features__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  max-width: 7rem;
}

.auth-features__item svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--ink);
}

.auth-features__item span {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* Bandeau de signature en pied de page — bloc normal en fin de flux
   maintenant (voir .accueil, plus de conteneur position:fixed à ancrer),
   jamais recouvert par un autre élément puisqu'il n'y a plus rien après lui. */
.accueil-banner {
  position: relative;
  min-height: 5.5rem;
  background: var(--ink);
  display: flex;
  align-items: center;
  padding: 1.5rem 3rem 1.5rem 7rem;
}

.accueil-banner__compass {
  position: absolute;
  left: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 5.5rem;
  height: 5.5rem;
  filter: drop-shadow(0 6px 12px rgba(27, 36, 48, 0.4));
}

.accueil-banner__text {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--brass-tint);
}

@media (max-width: 860px) {
  .accueil__hero {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }

  .accueil__intro {
    margin-left: auto;
    margin-right: auto;
  }

  .accueil__illustration {
    order: -1;
  }

  .auth-features {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ---------- Page /abonnement (forfaits) ---------- */

.plans-page {
  background: var(--paper);
  min-height: 100vh;
}

/* Header compact sur cette page précise (padding réduit par rapport à
   .accueil__header, jamais touché ailleurs) — voir la note de compacité
   ci-dessous : l'objectif est que les cartes de forfaits soient visibles dès le
   premier écran, sans avoir à scroller (retour direct, 31/07). */
.plans-page .accueil__header {
  padding: 1rem 2rem;
}

.plans-page__header-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.plans-hero__flash {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Hero volontairement compact (padding et tailles réduits par rapport à
   .accueil__hero) : sur cette page, le contenu utile ce sont les forfaits, pas le
   hero — celui-ci doit rester court pour que les cartes apparaissent dès le
   premier écran. */
.plans-hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: 2rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0.25rem 2rem 1rem;
}

.plans-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.plans-hero__content .accueil__divider {
  margin: 0.75rem 0;
}

.plans-hero__intro {
  max-width: 30rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}

.plans-hero .auth-features {
  margin-top: 1rem;
}

.plans-hero__illustration {
  display: flex;
  justify-content: center;
}

.plans-hero__illustration img {
  width: 100%;
  max-width: 12rem;
  height: auto;
}

/* Bandeau d'essai (3 repères : essai en cours, jours restants, articles restants) —
   uniquement pour un compte en essai (voir abonnement.html), branché sur
   quota_service.quota_affichage, jamais de valeur en dur. */
.plans-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 84rem;
  margin: 0 auto 1.25rem;
  padding: 0.85rem 2rem;
}

.plans-banner__item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0 1.5rem;
  border-left: 1px solid var(--paper-line);
}

.plans-banner__item:first-child {
  border-left: none;
  padding-left: 0;
}

.plans-banner__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
}

.plans-banner__icon--svg {
  color: var(--brass-dark);
}

.plans-banner__item strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
}

.plans-banner__item p {
  margin: 0.15rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.plans-active {
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 2rem 2.5rem;
}

/* Variante à 1 ou 2 repères (abonnée active/résiliation programmée, voir abonnement.html) —
   .plans-banner seule suppose toujours 3 colonnes égales (bandeau d'essai), inadapté ici :
   flex plutôt que grid pour s'ajuster naturellement au nombre réel d'items, sans étirer un
   seul repère sur toute la largeur. */
.plans-banner--compact {
  display: flex;
  flex-wrap: wrap;
  max-width: none;
  margin: 1.25rem 0;
  padding: 0;
}

.plans-banner--compact .plans-banner__item {
  flex: 0 1 auto;
}

.plans-resilie {
  max-width: 84rem;
  margin: 0 auto 1.25rem;
  padding: 0 2rem;
}

.plans-heading {
  text-align: center;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 2rem 1rem;
}

.plans-heading h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.plans-heading p {
  font-family: var(--font-sans);
  color: var(--ink-soft);
  margin: 0;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 22rem));
  justify-content: center;
  gap: 1.75rem;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.plan-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  padding: 2rem 1.75rem;
}

.plan-card--recommande {
  border: 1px solid var(--brass);
  box-shadow: 0 10px 28px rgba(184, 121, 30, 0.14);
}

.plan-card__badge {
  position: absolute;
  top: -0.75rem;
  right: 1.75rem;
  background: var(--brass);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.plan-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--brass-tint);
  color: var(--brass-dark);
  margin-bottom: 1rem;
}

.plan-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.plan-card h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.35rem;
}

.plan-card__price {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.6rem;
}

.plan-card__price span {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.plan-card__divider {
  border: none;
  border-top: 1px solid var(--paper-line);
  margin: 1.25rem 0;
}

.plan-card__quota {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.plan-card__quota strong {
  font-family: var(--font-serif);
  font-size: 1.3rem;
}

.plan-card__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.plan-card__features li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.plan-card__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: 700;
}

.plan-card form {
  margin-top: 0.25rem;
}

.plan-card .btn,
.plan-card .btn--outline {
  display: block;
  width: 100%;
  text-align: center;
}

/* .btn.btn--outline (deux classes) plutôt que .btn--outline seule : la maquette
   applique toujours les deux classes ensemble (voir abonnement.html), et .btn (défini
   plus loin dans ce fichier, donc gagnant à spécificité égale) fixe déjà background —
   sans ce doublement, l'ordre de déclaration ferait gagner le fond plein sur celui-ci. */
.btn.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--paper-line);
}

.btn.btn--outline:hover {
  border-color: var(--brass);
  color: var(--brass-dark);
  background: transparent;
}

.plans-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 60rem;
  margin: 2.5rem auto 0;
  padding: 1.1rem 1.5rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper-dim);
}

.plans-info svg {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--ink-soft);
}

.plans-info p {
  flex: 1;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink);
}

.plans-info .btn-link {
  white-space: nowrap;
}

.plans-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  max-width: 84rem;
  margin: 3rem auto 0;
  padding: 2rem 2rem 0;
  border-top: 1px solid var(--paper-line);
}

.plans-rules__item svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--brass-dark);
  margin-bottom: 0.6rem;
}

.plans-rules__item strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.plans-rules__item p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.plans-footnote {
  text-align: center;
  max-width: 84rem;
  margin: 2rem auto 0;
  padding: 1.5rem 2rem 3rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .plans-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .plans-hero__intro {
    margin-left: auto;
    margin-right: auto;
  }

  .plans-hero__illustration {
    order: -1;
  }

  .auth-features {
    justify-content: center;
    flex-wrap: wrap;
  }

  .plans-banner {
    grid-template-columns: 1fr;
  }

  .plans-banner__item {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--paper-line);
    padding-top: 1.25rem;
  }

  .plans-banner__item:first-child {
    border-top: none;
    padding-top: 0;
  }

  .plans-grid {
    grid-template-columns: minmax(0, 22rem);
  }

  .plans-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .accueil__header {
    padding: 1.25rem 1.25rem;
  }

  .accueil-banner {
    padding: 1.5rem 1.5rem 1.5rem 5.5rem;
    text-align: left;
  }

  .accueil-banner__compass {
    left: 0.75rem;
    width: 4rem;
    height: 4rem;
  }
}

@media (max-width: 640px) {
  /* Sur mobile, l'icône silhouette cède la place à un hamburger classique — même
     bouton, même menu déroulant, seule l'icône affichée change. */
  .account-menu__icon--person {
    display: none;
  }

  .account-menu__icon--burger {
    display: block;
  }

  /* L'image est un format paysage 16:9 pensé pour un écran large : recadrée en
     bandeau sur un smartphone étroit, elle perd son charme (soit écrasée, soit
     coupée au point de ne plus se lire comme une carte). Plutôt que de forcer une
     adaptation ratée, on repasse simplement au fond "Papier" uni sur mobile — la
     carte illustrée reste réservée aux écrans larges (ordinateur, tablette) où elle
     a la place de bien s'afficher. Rien à déclarer explicitement pour le fond : sans
     image ni couleur propre, .auth-hero laisse transparaître le fond --paper déjà
     posé sur <body>. Repasse aussi en flux normal (`position: static`) : plus besoin
     d'un conteneur fixe une fois qu'il n'y a plus d'image à ancrer au viewport. */
  .auth-hero {
    position: static;
    inset: auto;
    overflow: visible;
  }

  .auth-hero__bg,
  .map-labels {
    display: none;
  }

  .auth-hero__panel {
    position: static;
    transform: none;
    width: 100%;
    max-width: 380px;
    margin: 2rem auto 0;
  }

  /* La disposition côte à côte n'a pas la place de respirer sur un smartphone étroit
     — on repasse en colonne (image au-dessus, formulaire en dessous), comme le
     comportement par défaut sur mobile. */
  .auth-hero__panel--split {
    flex-direction: column;
    align-items: center;
  }

  .auth-mascot--side {
    width: 140px;
    height: auto;
    margin: 0 auto 0.75rem;
  }
}

/* ---------- Mascotte animée : une pose par écran, adaptée à ce qu'elle représente ---------- */

/* En-tête de compte (voir _nav_tabs.html) : message de quota, commun aux 4 onglets
   principaux. Sujet libre et déconnexion vivent désormais dans le menu compte du
   header (voir _account_menu.html) plutôt qu'ici. */
.account-bar {
  margin-bottom: 1rem;
}

/* Barre d'onglets persistante (opportunités / planificateur / sujet libre / mes
   articles) — un vrai indicateur de section active plutôt que des liens texte perdus
   dans le contenu, voir _nav_tabs.html. `margin-bottom: -1px` aligne le trait actif
   sur la bordure du conteneur plutôt que de créer un double trait à cet endroit
   précis. */
.tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--paper-line);
  margin-bottom: 2rem;
}

.tab-bar__tab {
  padding: 0.65rem 1rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.tab-bar__tab:hover {
  color: var(--ink);
}

.tab-bar__tab--active {
  color: var(--brass-dark);
  border-bottom-color: var(--brass);
  font-weight: 600;
}

@media (max-width: 640px) {
  .tab-bar {
    overflow-x: auto;
  }
}

/* Variante en page (ex. Brouillons/Publiés sur "Mes articles") : bascule côté client
   entre deux blocs déjà présents dans la page, jamais une navigation — d'où des
   <button> plutôt que des <a>, réinitialisés pour reprendre l'apparence exacte de
   .tab-bar__tab (voir _nav_tabs.html pour la variante navigation). */
.tab-bar--sub {
  margin-bottom: 1.5rem;
}

button.tab-bar__tab {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.hidden {
  display: none;
}

/* Bloc mascotte + h1 réutilisé sur tous les écrans qui donnent une pose contextuelle
   à la mascotte (dashboard, brief, attente de génération, résultat, confirmation) —
   .auth-hero reste séparé (mascotte au-dessus du formulaire, sur la carte, pas à côté
   d'un simple titre). */
.mascot-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.mascot-header h1 {
  margin: 0;
}

/* Salut + crayon (accueil) : quelques oscillations de rotation à l'affichage de la
   page, pour suggérer un geste de la main sans avoir à isoler le bras dans une pose
   séparée — une seule fois, jamais en boucle. */
@keyframes mascot-wave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-8deg); }
  30% { transform: rotate(6deg); }
  45% { transform: rotate(-5deg); }
  60% { transform: rotate(4deg); }
  75% { transform: rotate(-2deg); }
  90% { transform: rotate(1deg); }
}

/* Marche + pile de livres (résultat) / mascotte générique (confirmation) : petit
   rebond une fois à l'affichage, pour marquer l'arrivée ou la réussite — ces deux
   écrans ne sont rendus qu'en réponse directe à une génération/publication réussie
   (jamais au rechargement libre d'une URL), donc l'animation reste naturellement liée
   à ces moments sans JS ni déclencheur explicite à coder. */
.mascot-celebrate {
  width: 72px;
  height: auto;
  flex-shrink: 0;
  animation: mascot-bounce 1.4s ease-in-out;
}

@keyframes mascot-bounce {
  0% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-10px) rotate(-6deg); }
  45% { transform: translateY(0) rotate(4deg); }
  65% { transform: translateY(-4px) rotate(-2deg); }
  85%, 100% { transform: translateY(0) rotate(0deg); }
}

/* Longue-vue (tableau de bord) : légère oscillation verticale en boucle lente, comme
   si elle scrutait l'horizon — amplitude volontairement faible pour rester en fond,
   pas un mouvement qu'on remarque en continu en lisant les opportunités à côté.
   Le fichier source (mascotte_longue_vue.png) contenait à l'origine deux mascottes
   côte à côte plutôt qu'une seule pose isolée — recadré une fois pour toutes côté
   fichier (ne garde que celle de gauche, avec une marge confortable) plutôt qu'un
   bricolage CSS `object-fit`/`object-position` fragile. Contrainte par la hauteur
   plutôt que la largeur (contrairement aux autres poses) : le recadrage donne un
   personnage plus étroit/haut que les autres, `height` garde un gabarit visuel
   cohérent avec le reste de `.mascot-header` malgré ce ratio différent. */
.mascot-scan {
  height: 85px;
  width: auto;
  flex-shrink: 0;
  animation: mascot-scan-loop 3.5s ease-in-out infinite;
}

@keyframes mascot-scan-loop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* Idée + ampoule (attente pendant la génération) : légère pulsation lumineuse en
   boucle tant que la page reste affichée — un filter plutôt qu'un essai d'isoler
   l'ampoule dans l'image, peu coûteux et lisible comme "ça travaille". S'arrête
   d'elle-même à la redirection automatique vers le résultat (voir progression.html). */
.mascot-glow {
  width: 72px;
  height: auto;
  flex-shrink: 0;
  animation: mascot-glow-loop 2.2s ease-in-out infinite;
}

@keyframes mascot-glow-loop {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(184, 121, 30, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(184, 121, 30, 0.55)); }
}

/* Marche + livre (brief SEO) : léger balancement d'un pied sur l'autre, en boucle
   douce, pendant que le commerçant relit le plan proposé. */
.mascot-shift {
  width: 72px;
  height: auto;
  flex-shrink: 0;
  transform-origin: bottom center;
  animation: mascot-shift-loop 2.4s ease-in-out infinite;
}

@keyframes mascot-shift-loop {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mascot,
  .mascot-celebrate,
  .mascot-scan,
  .mascot-glow,
  .mascot-shift,
  .gen-spinner {
    animation: none;
  }
}

/* ---------- Typographie ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 1.85rem;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
}

h3 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--brass-dark);
}

a:hover {
  color: var(--brass);
}

em {
  font-style: italic;
}

.mono, .data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Message flash ---------- */

.flash {
  max-width: var(--content-width);
  margin: 1.25rem auto 0;
  padding: 0.75rem 1.5rem;
}

.flash-inner {
  background: var(--brass-tint);
  border-left: 2px solid var(--brass);
  padding: 0.65rem 1rem;
  font-size: 0.92rem;
  border-radius: var(--radius);
}

/* ---------- Boutons & liens d'action ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 0.65rem 1.4rem;
  background: var(--brass);
  color: var(--paper);
  transition: background 0.15s ease;
}

.btn:hover {
  background: var(--brass-dark);
  color: var(--paper);
}

.btn:disabled {
  background: var(--paper-dim);
  color: var(--ink-faint);
  cursor: not-allowed;
}

.btn--danger {
  background: var(--rust);
}

.btn--danger:hover {
  background: var(--rust);
  filter: brightness(0.9);
}

.btn-link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brass-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.btn-link:hover {
  color: var(--brass);
  border-bottom-color: currentColor;
}

.quiet-link {
  color: var(--ink-soft);
  font-size: 0.92rem;
  text-decoration: none;
  border-bottom: 1px solid var(--paper-line);
}

.quiet-link:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-soft);
}

button.quiet-link {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid var(--paper-line);
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
}

.quiet-link--danger {
  color: var(--rust);
}

.quiet-link--danger:hover {
  color: var(--rust);
  border-bottom-color: var(--rust);
}

/* Encart de confirmation déplié par <summary class="quiet-link--danger"> (voir
   articles.html) — fond teinté pour se distinguer visuellement du reste de la carte
   comme une zone qui demande une vraie décision, pas une simple info. */
.delete-confirm__panel {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--rust-tint);
  border-radius: var(--radius);
}

.delete-confirm__panel .hint {
  margin: 0 0 0.75rem;
}

/* Même principe que .delete-confirm__panel, mais teinté sage (pas rust) : enregistrer
   n'est pas une action destructrice en soi, seulement un point d'attention si
   l'utilisatrice a modifié ce brouillon directement sur son site entre-temps (voir
   article_detail.html) — retour direct d'une utilisatrice (22/07). */
.save-confirm summary.btn {
  list-style: none;
}

.save-confirm summary.btn::-webkit-details-marker {
  display: none;
}

.save-confirm__panel {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  background: var(--sage-tint);
  border-radius: var(--radius);
}

.save-confirm__panel .hint {
  margin: 0 0 0.75rem;
}

.actions-row {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 1.25rem 0;
}

.hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.page-footer {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- Formulaires ---------- */

form {
  margin: 0;
}

label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.field {
  margin-bottom: 1.25rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
}

textarea {
  font-family: var(--font-sans);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brass);
  box-shadow: 0 0 0 3px var(--brass-tint);
}

.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.radio-option input {
  margin-top: 0.3rem;
}

.checkbox-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.checkbox-option input {
  margin-top: 0.3rem;
}

/* Rang de programmation (voir majCompteurProgrammation, dashboard.html) : vide tant
   que la case n'est pas cochée, donc invisible par construction (:empty) plutôt que
   piloté par une classe JS supplémentaire. */
.selection-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brass);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
}

.selection-order:empty {
  display: none;
}

fieldset {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
  margin: 0 0 1.25rem;
}

legend {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  padding: 0 0.4rem;
}

/* Bloc mis en avant (ex : catalogue produit recommandé) — même structure que fieldset,
   mais avec un fond et une bordure teintés pour qu'il ne se confonde jamais visuellement
   avec les champs d'identifiants juste au-dessus, même en scannant vite la page. */
.fieldset--accent {
  background: var(--sage-tint);
  border-color: var(--sage);
}

.fieldset--accent legend {
  color: var(--sage);
}

/* Boutons à sélection unique (ex : tutoiement/vouvoiement) — mêmes cases à cocher
   natives que .radio-option, mais visuellement des boutons plutôt qu'une liste, pour
   un choix rapide qui ne se lit pas comme une question à part entière. */
.toggle-group {
  display: flex;
  gap: 0.6rem;
}

.toggle-option {
  margin: 0;
}

.toggle-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-option span {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}

.toggle-option input:checked + span {
  border-color: var(--brass);
  background: var(--brass-tint);
  color: var(--brass-dark);
  font-weight: 600;
}

.toggle-option input:focus-visible + span {
  outline: none;
  box-shadow: 0 0 0 3px var(--brass-tint);
}

/* Chips à sélection multiple (ex : adjectifs de ton) — même principe que
   .toggle-option, cases à cocher plutôt que radios. */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.chip {
  margin: 0;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
}

.chip input:checked + span {
  border-color: var(--sage);
  background: var(--sage-tint);
  color: var(--sage);
  font-weight: 600;
}

.chip input:focus-visible + span {
  outline: none;
  box-shadow: 0 0 0 3px var(--sage-tint);
}

.chip input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}

.error {
  background: var(--rust-tint);
  border-left: 2px solid var(--rust);
  padding: 0.65rem 1rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}

/* ---------- Disclosure (details/summary) ---------- */

details {
  border-top: 1px solid var(--paper-line);
  padding: 0.9rem 0;
}

summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

summary:hover {
  color: var(--brass-dark);
}

details > form,
details > *:not(summary) {
  margin-top: 0.9rem;
}

/* Légende des badges d'intention/catégorie (voir dashboard.html) — un <details> plutôt
   qu'une info-bulle par badge : une seule explication à consulter à la demande, pas
   quatre survols différents à découvrir un par un. */
.tags-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tags-legend__list li {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.tags-legend__list .tag {
  margin-right: 0.4rem;
}

/* ---------- Aperçu formaté du contenu (resultat.html) ---------- */

.content-preview {
  padding: 1.75rem 2rem;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.content-preview h2 {
  font-size: 1.3rem;
  margin-top: 1.75rem;
}

.content-preview h2:first-child {
  margin-top: 0;
}

.content-preview h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin-top: 1.4rem;
}

.content-preview p {
  margin: 0 0 1rem;
}

.content-preview ul {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.content-preview li {
  margin-bottom: 0.4rem;
}

.content-preview strong {
  color: var(--brass-dark);
  font-weight: 700;
}

.content-preview hr {
  border: none;
  border-top: 1px solid var(--paper-line);
  margin: 1.75rem 0;
}

/* Un bloc = un titre/paragraphe/liste régénérable individuellement (voir
   planificateur_service.split_content_blocks) — l'action reste discrète (quiet-link,
   petit texte) pour ne jamais dominer le contenu réel, avec un filet pointillé léger
   entre blocs plutôt qu'un vrai encart pour garder l'aperçu lisible comme un article,
   pas comme une liste de fiches. */
.content-block {
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px dashed var(--paper-line);
}

.content-block:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.content-block__body > *:first-child {
  margin-top: 0;
}

.content-block__body > *:last-child {
  margin-bottom: 0;
}

.content-block__action {
  margin-top: 0.3rem;
}

.content-block__action .quiet-link {
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.content-block__action .quiet-link:hover {
  color: var(--brass-dark);
}

.content-block__action .quiet-link:disabled {
  color: var(--paper-line);
  cursor: not-allowed;
}

/* MVP génération d'image (03/08, derrière image_generation_active, réservé à l'admin) —
   largeur plafonnée pour rester lisible à côté du texte, jamais en pleine largeur. */
.illustration-preview {
  max-width: 100%;
  width: 420px;
  height: auto;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  display: block;
}

.code-snippet {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  background: var(--paper-dim);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  white-space: pre;
}

/* ---------- Opportunités (dashboard) ---------- */

.opportunity-list {
  margin-top: 0.5rem;
}

.opportunity {
  border-top: 1px solid var(--paper-line);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0 0.9rem;
}

.opportunity:last-child {
  padding-bottom: 0.5rem;
}

.opportunity__index {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  padding-top: 0.2rem;
}

/* Remplace la colonne d'index sur l'écran des opportunités quand le planificateur est
   actif (voir dashboard.html) : même emplacement dans la grille, une case à cocher
   plutôt qu'un numéro d'ordre. */
.opportunity__checkbox {
  padding-top: 0.3rem;
}

.opportunity__checkbox input {
  width: 1.15rem;
  height: 1.15rem;
  cursor: pointer;
}

/* Liste triée par date (ex. "Mes articles") plutôt que par rang (ex. tableau de
   bord) : pas de colonne d'index numéroté, qui laisserait croire à un ordre
   chronologique de création plutôt qu'un tri du plus récent au plus ancien. */
.opportunity--no-index {
  grid-template-columns: 1fr;
}

.opportunity__body {
  min-width: 0;
}

.opportunity h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  margin: 0 0 0.5rem;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.date-stamp {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--paper-dim);
  color: var(--ink-soft);
}

.tag--brass {
  background: var(--brass-tint);
  color: var(--brass-dark);
}

/* Échec (génération ou publication programmée) — même teinte rust que .delete-confirm__panel,
   la seule autre notion "alerte" déjà présente dans la charte. */
.tag--danger {
  background: var(--rust-tint);
  color: var(--rust);
}

/* Détail technique d'un incident (ex. réponse brute d'un site tiers, voir
   Article.last_publish_error) : préserve les retours à la ligne, monospace pour rester
   lisible même sur du JSON/HTML brut, jamais destiné à la lectrice d'un article. */
.error-detail {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper-dim);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  max-height: 260px;
  overflow-y: auto;
}

/* Badge des sujets "Histoire & découverte" (opportunités is_evergreen) : vert sauge,
   volontairement distinct des badges d'intention (Informationnel/Transactionnel, fond neutre)
   et du badge catalogue (laiton). Signale un sujet de fond/culturel, pas une opportunité à
   fort trafic — cohérent avec sa présentation honnête (aucune promesse de trafic). */
.tag--sage {
  background: var(--sage-tint);
  color: var(--sage);
}

/* Intention de recherche (voir dashboard.html) : deux teintes distinctes plutôt que le
   gris neutre partagé d'origine — retour direct d'une utilisatrice (31/07), qui ne
   distinguait pas "Transactionnel" d'"Informationnel" au premier coup d'œil. */
.tag--clay {
  background: var(--clay-tint);
  color: var(--clay);
}

.tag--slate {
  background: var(--slate-tint);
  color: var(--slate);
}

/* L'annotation "pourquoi" — élément signature : une note en marge, pas une
   info-bulle générique. Serif italique, repère fin en filet vertical. */
.annotation {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  border-left: 2px solid var(--brass);
  padding: 0.05rem 0 0.05rem 1.1rem;
  margin: 0.9rem 0 1.1rem;
}

.titles-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.titles-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--paper-dim);
  font-size: 0.95rem;
}

.titles-list li:first-child {
  border-top: none;
}

.titles-list .btn-link {
  flex-shrink: 0;
  font-size: 0.85rem;
}

.used-note {
  font-size: 0.92rem;
  color: var(--ink-soft);
}

/* ---------- Checklist ---------- */

.checklist {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.checklist li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--paper-line);
  margin-bottom: 0.4rem;
  font-size: 0.94rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-dim);
}

.checklist li.ok {
  border-left-color: var(--sage);
  background: var(--sage-tint);
}

/* Adouci le 17/08 (retour direct) : le triangle ⚠️ et le fond rosé faisaient peur pour du
   perfectible non bloquant — RIEN dans cette checklist n'est dangereux. `.warn` (statut
   interne "encore perfectible", jamais "danger") partage désormais exactement le même
   traitement visuel neutre que `.neutral` ci-dessous, plutôt que le rouge/rust d'origine —
   seuls deux tons existent maintenant dans toute la checklist : vert (validé) et neutre
   (perfectible ou sans objet, indiscernables à l'œil, la distinction n'a plus lieu d'être
   côté utilisatrice). */
.checklist li.warn,
.checklist li.neutral {
  border-left-color: var(--ink-faint);
  background: var(--paper-dim);
  color: var(--ink-soft);
}

/* Détail dépliable d'une ligne agrégée (ex. "Optimisation du mot-clé : partielle",
   voir seo_checklist._check_keyword_placement) — la granularité par emplacement (titre,
   description Google, sous-titre...) reste disponible pour qui la cherche, jamais affichée
   par défaut (refonte du 17/08, retour direct : la checklist ne doit plus jamais montrer
   un mur d'avertissements répétitifs). Override volontairement plus léger que le style
   <details> générique (bordure/padding pensés pour un bloc autonome, disproportionnés ici
   pour une ligne de checklist déjà encadrée). */
.checklist__detail {
  border-top: none;
  padding: 0.35rem 0 0;
  margin-top: 0.25rem;
}

.checklist__detail summary {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: underline;
}

.checklist__detail ul {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.checklist__detail li {
  /* Doit explicitement écraser .checklist li ci-dessus (20/08, retour direct — "un
     sous-critère mal rangé... apparaît dans le détail dépliable du critère mot-clé, alors
     que c'est le critère de maillage interne"). Vérifié : aucun bug de nesting réel côté
     donnée ni template, `_check_maillage_interne` reste bien un item autonome — le vrai
     problème est ici, en CSS : `.checklist li` (même spécificité, définie plus haut)
     s'applique aussi à CES <li> imbriqués (descendants de .checklist), et comme cette
     règle ne redéfinissait que font-size/color/padding, la boîte encadrée (bordure
     colorée, fond, marge) de .checklist li restait visible sur un simple sous-critère —
     indiscernable à l'œil d'un vrai item autonome comme "Lien vers un de tes articles"
     juste après. Neutralise ici toute la boîte pour que seuls les VRAIS items de premier
     niveau aient cette apparence. */
  display: block;
  border-left: none;
  background: none;
  margin-bottom: 0;
  border-radius: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding: 0.15rem 0;
}

/* ---------- Étapes de génération (progression) ---------- */

.steps {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.steps li {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink-soft);
  padding: 0.55rem 0;
  border-top: 1px solid var(--paper-line);
}

.steps li:first-child {
  border-top: none;
}

/* La bascule gras/normal reste pilotée par le script existant (style.fontWeight
   inline) pour ne pas toucher au comportement JS déjà en place. */
.steps li.active {
  color: var(--ink);
}

/* ---------- Animation d'attente pendant la génération d'un article ----------
   Volontairement une pure mise en scène (voir progression.html) : ne reflète jamais
   le vrai déroulé technique, juste les points de la checklist finale qui se cochent
   un par un pour rassurer sans jamais dévoiler les coulisses. Même vocabulaire visuel
   que .checklist (bordure gauche + fond) pour que la bascule vers la vraie checklist,
   une fois l'article prêt, ne soit pas un changement brutal de langage graphique. */
.gen-checklist {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.gen-checklist__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.7rem;
  border-left: 2px solid var(--paper-line);
  margin-bottom: 0.4rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-dim);
  transition: border-color 0.5s ease, background 0.5s ease;
}

.gen-checklist__dot {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  position: relative;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.gen-checklist__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gen-checklist__label {
  color: var(--ink-soft);
  font-size: 0.94rem;
  transition: color 0.4s ease;
}

.gen-checklist__item.is-checked {
  border-left-color: var(--sage);
  background: var(--sage-tint);
}

.gen-checklist__item.is-checked .gen-checklist__dot {
  border-color: var(--sage);
  background: var(--sage);
}

.gen-checklist__item.is-checked .gen-checklist__dot::after {
  content: "\2713";
  opacity: 1;
  transform: scale(1);
}

.gen-checklist__item.is-checked .gen-checklist__label {
  color: var(--ink);
}

.gen-spinner-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 1.25rem 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.gen-spinner {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid var(--paper-line);
  border-top-color: var(--brass);
  animation: gen-spin 0.85s linear infinite;
}

@keyframes gen-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Planificateur éditorial (calendrier) ---------- */

.calendar {
  margin: 1.25rem 0;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.calendar-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-row--header {
  background: var(--paper-dim);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.calendar-row--header span {
  padding: 0.5rem 0.4rem;
}

/* Hauteur fixe (pas min-height) volontairement : une case avec un article planifié ne
   doit jamais être plus grande qu'une case vide, sinon les lignes de la grille se
   désalignent selon leur contenu — signalé en conditions réelles (18/07). Relevée à
   11rem (retour direct d'une utilisatrice, 31/07, après passage de 3 à 5 lignes de
   titre — voir calendar-day__article) pour laisser la place à des titres plus longs
   plutôt qu'une troncature agressive — un titre court laisse simplement du blanc, ce
   qui importe est que la grille reste alignée. `overflow: hidden` empêche un contenu
   en trop (rare : plusieurs articles le même jour) de casser cette hauteur fixe. */
.calendar-day {
  height: 11rem;
  padding: 0.5rem;
  border-top: 1px solid var(--paper-line);
  border-left: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  overflow: hidden;
}

.calendar-row .calendar-day:first-child {
  border-left: none;
}

.calendar-day--vide {
  background: var(--paper-dim);
}

.calendar-day--aujourdhui {
  background: var(--brass-tint);
}

.calendar-day__numero {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* display:-webkit-box + line-clamp (pas white-space:nowrap/text-overflow:ellipsis) :
   affiche le titre en entier jusqu'à 5 lignes (retour direct d'une utilisatrice, 31/07 —
   3 lignes coupait encore trop souvent, et le statut encodé uniquement par une teinte de
   fond pastel n'était pas assez lisible) plutôt que de le tronquer dès la 1ère. Un titre
   encore plus long au-delà de 5 lignes reste tronqué, l'infobulle (attribut title, voir
   planificateur.html) reste le filet de sécurité pour ce cas rare. */
.calendar-day__article {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  font-size: 0.78rem;
  line-height: 1.3;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  background: var(--paper-dim);
  color: var(--ink-soft);
  text-decoration: none;
  overflow: hidden;
}

/* Pastille de statut au-dessus du titre — retour direct : la couleur de fond seule
   (voir --ok/--warn/--pending ci-dessous) ne se voyait pas assez. Réutilise les mêmes
   classes de couleur que la légende (.calendar-legend__dot--*) pour ne jamais désigner
   deux couleurs différentes pour un même statut. */
.calendar-day__article-dot {
  display: block;
  margin: 0 0 0.25rem;
}

.calendar-day__article--ok {
  background: var(--sage-tint);
  color: var(--sage);
}

.calendar-day__article--warn {
  background: var(--rust-tint);
  color: var(--rust);
}

.calendar-day__article--pending {
  background: var(--brass-tint);
  color: var(--brass-dark);
}

/* ==========================================================================
   Barre latérale (V2, derrière planificateur_active — voir base_sidebar.html)
   ==========================================================================
   Portée systématiquement scopée sous .page--sidebar pour les éléments
   partagés avec l'ancien gabarit (.opportunity, .tag, .checkbox-option,
   .calendar*) : ces classes restent utilisées telles quelles par les écrans
   pas encore migrés (brief, résultat, publication...) et par le rendu
   drapeau-off — jamais touchées hors de ce scope, pour ne rien changer chez
   une bêta-testeuse qui ne voit pas encore ce chantier. */

.app-shell {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 100vh;
  background: var(--paper);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.25rem 1.25rem;
}

.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  padding: 0.25rem 0.5rem 1.75rem;
}

.sidebar__logo-icon {
  width: 1.6rem;
  height: 1.6rem;
}

.sidebar__logo-text {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--paper);
  letter-spacing: 0.01em;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  color: rgba(239, 234, 224, 0.78);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__link-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}

.sidebar__link:hover {
  background: rgba(239, 234, 224, 0.08);
  color: var(--paper);
}

.sidebar__link--active {
  background: var(--brass);
  color: var(--ink);
  font-weight: 600;
}

.sidebar__link--active:hover {
  background: var(--brass);
  color: var(--ink);
}

.sidebar__footer {
  margin-top: auto;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sidebar__credits {
  background: rgba(239, 234, 224, 0.06);
  border: 1px solid rgba(239, 234, 224, 0.12);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.sidebar__credits-label {
  margin: 0 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(239, 234, 224, 0.65);
}

.sidebar__credits-fallback {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(239, 234, 224, 0.85);
}

.sidebar__ring {
  position: relative;
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
}

.sidebar__ring svg {
  width: 100%;
  height: 100%;
}

.sidebar__ring-track {
  fill: none;
  stroke: rgba(239, 234, 224, 0.14);
  stroke-width: 2.6;
}

.sidebar__ring-value {
  fill: none;
  stroke: var(--sage);
  stroke-width: 2.6;
  stroke-linecap: round;
  transition: stroke-dasharray 0.3s ease;
}

.sidebar__ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sidebar__ring-fraction {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--paper);
}

.sidebar__ring-slash {
  font-size: 0.8rem;
  color: rgba(239, 234, 224, 0.6);
}

.sidebar__ring-caption {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: rgba(239, 234, 224, 0.65);
  margin-top: 0.15rem;
}

.sidebar__badge {
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--brass-tint);
}

/* Jours restants d'essai (voir quota_service.trial_days_remaining) — même registre
   discret que .sidebar__credits-fallback, jamais aussi appuyé que .sidebar__badge. */
.sidebar__credits-hint {
  margin: 0.3rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: rgba(239, 234, 224, 0.6);
}

.sidebar__help {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  color: rgba(239, 234, 224, 0.65);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.84rem;
}

.sidebar__help svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.sidebar__help:hover {
  color: var(--brass-tint);
}

.app-shell__content {
  min-width: 0;
}

.content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.25rem 2rem 0;
}

.content-header__greeting h1 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
}

.content-header__greeting p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.content-header__actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
  padding-top: 0.3rem;
}

.content-header__bell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink-soft);
}

.content-header__bell svg {
  width: 1.3rem;
  height: 1.3rem;
}

.page--sidebar {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem;
}

.flash--sidebar {
  max-width: 64rem;
  margin: 1.25rem auto 0;
  padding: 0 2rem;
}

/* Cartes d'opportunités/articles redessinées — cartes blanches, ombre douce,
   pastille numérotée dorée. L'élément .opportunity__number existe déjà dans le
   DOM hors de ce scope (voir dashboard.html) mais reste masqué par défaut :
   seul ce contexte lui donne une apparence, jamais l'ancien gabarit. */
.page--sidebar .opportunity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page--sidebar .opportunity {
  position: relative;
  background: #fff;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(27, 36, 48, 0.04), 0 6px 16px -8px rgba(27, 36, 48, 0.12);
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
}

.opportunity__number {
  display: none;
}

.page--sidebar .opportunity__number {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -0.7rem;
  left: -0.7rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--brass);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.92rem;
  box-shadow: 0 2px 6px rgba(184, 121, 30, 0.35);
}

.page--sidebar .tag {
  border-radius: 999px;
}

.section-heading {
  margin-bottom: 1rem;
}

.section-heading h2 {
  margin: 0 0 0.25rem;
}

.section-heading p {
  margin: 0;
}

/* Boutons d'action principale en vert sapin sous la barre latérale (--brass reste
   réservé à l'accroche de la page d'accueil, jamais réutilisé ici) — portée scopée
   comme le reste de ce chantier, l'ancien gabarit garde .btn en --brass tel quel. */
.page--sidebar .btn {
  background: var(--sage);
}

.page--sidebar .btn:hover {
  background: var(--sage);
  filter: brightness(1.12);
}

.page--sidebar .btn:disabled {
  background: var(--paper-dim);
  color: var(--ink-faint);
  filter: none;
}

.page--sidebar .titles-list li {
  align-items: center;
}

.page--sidebar .checkbox-option {
  align-items: center;
}

.page--sidebar .checkbox-option input {
  margin-top: 0;
}

/* Calendrier : bouton "Aujourd'hui" + légende à 3 états réels (pas de 4e état
   "à planifier" — un ScheduledArticle a toujours l'un des statuts ci-dessous
   dès qu'il existe, voir ScheduledArticle.status). */
.page--sidebar .calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.calendar-legend__dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.calendar-legend__dot--ok { background: var(--sage); }
.calendar-legend__dot--pending { background: var(--brass); }
.calendar-legend__dot--warn { background: var(--rust); }
.calendar-legend__dot--neutral { background: var(--ink-faint); }

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem 1.25rem;
  }

  .sidebar__logo {
    padding: 0 1rem 0 0;
  }

  .sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
  }

  .sidebar__link span {
    display: none;
  }

  .sidebar__link {
    padding: 0.5rem;
  }

  .sidebar__footer {
    margin-top: 0;
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }

  .sidebar__credits {
    display: none;
  }

  .sidebar__help span {
    display: none;
  }

  .content-header {
    padding: 1.5rem 1.25rem 0;
  }

  .page--sidebar {
    padding: 1.5rem 1.25rem 3rem;
  }

  .flash--sidebar {
    padding: 0 1.25rem;
  }
}

@media (max-width: 480px) {
  .content-header {
    flex-direction: column;
  }

  .content-header__actions {
    align-self: flex-end;
  }
}

/* ---------- Divers ---------- */

.section-block {
  margin-top: 1.5rem;
}

.muted {
  color: var(--ink-soft);
}

@media (max-width: 480px) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .opportunity {
    grid-template-columns: 1fr;
  }

  .opportunity__index {
    padding-top: 0;
  }

  /* Grille 7 colonnes illisible sur mobile — repli en liste verticale, un jour par
     ligne, plutôt que des cases minuscules et un texte tronqué à l'excès. */
  .calendar-row {
    grid-template-columns: 1fr;
  }

  .calendar-row--header {
    display: none;
  }

  .calendar-day {
    border-left: none;
    height: auto;
  }

  .calendar-day--vide {
    display: none;
  }
}

/* ---------- Guide de connexion (page publique /guide-connexion) ---------- */

.guide {
  max-width: 38rem;
}

.guide__section {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--paper-line);
}

.guide__steps {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.guide__step p {
  margin: 0 0 0.6rem;
}

/* Emplacement réservé pour une capture d'écran ajoutée manuellement — pleine largeur,
   ratio approximatif d'une capture d'écran d'admin WordPress, pour que le texte autour
   ne bouge pas une fois l'image posée à la place. */
.guide__screenshot-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: center;
  padding: 1rem;
}

/* Capture d'écran réelle (voir guide_connexion.html) — même largeur/coins que le
   placeholder qu'elle remplace, sans le pointillé ni le fond factice. */
.guide__screenshot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
}

.guide__video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius);
  background: var(--paper-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: center;
  padding: 1rem;
  margin: 1.5rem 0;
}

/* Encadré rassurant — teinte sauge, même famille que .tag--sage, jamais utilisée pour
   une alerte : réservée à une information positive/rassurante dans toute la charte. */
.guide__callout {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--sage-tint);
  color: var(--sage);
  border-radius: var(--radius);
  font-size: 0.92rem;
}