/* Tokens repris automatiquement de src/styles/theme.css au build.
   Ne pas éditer ici : modifier theme.css, qui fait foi pour tout le site. */
:root {
  --brand-bg:          #FAF7F2; /* page background, cream */
  --brand-navy:        #1A1A2E; /* primary text, headings */
  --brand-coral:       #F4836A; /* primary CTA, accent */
  --brand-coral-hover: #E5735A; /* coral hover state */
  --brand-green:       #7BAE7F; /* success, revenue */
  --brand-red:         #E85555; /* danger, expenses */
  --brand-gray:        #6B6B7B; /* secondary text */
  --brand-muted:       #B8B4AE; /* placeholder, disabled */
  --brand-border:      #EEEBE6; /* card borders, dividers */
  --brand-subtle:      #F0EDE8; /* subtle backgrounds */
  --status-todo-bg:      #F0EDE8;
  --status-todo-text:    #6B6B7B;
  --status-progress-bg:  #F0EDE8;
  --status-progress-text: #B8B4AE;
  --status-done-bg:      #EDF7EE;
  --status-done-text:    #7BAE7F;
  --rentability-green:     #6F8F63;
  --rentability-green-bg:  #E4E9DD;
  --rentability-coral:     #BD6B4C;
  --rentability-coral-bg:  #F0E1D8;
  --rentability-ochre:     #8A6D2E;
  --rentability-ochre-bg:  #EAD9A0;
}

/* ------------------------------------------------------------------
   Section Ressources — feuille de style autonome.

   Les valeurs sont reprises de src/styles/theme.css (palette brand) et de
   DESIGN_SYSTEM.md (Playfair pour le display, Inter pour le corps, cartes en
   rayon 16px, ombre au repos + élévation au survol). Elle est volontairement
   indépendante du build Tailwind de l'app : la section contenu est générée en
   HTML statique et ne doit pas dépendre du pipeline du produit.
   ------------------------------------------------------------------ */

/* Les tokens --brand-* et --rentability-* sont injectés en tête de fichier au
   build, depuis src/styles/theme.css. Seules les valeurs propres à la mise en
   page de la section sont définies ici. */
:root {
  --brand-coral-ink: #c2543a; /* coral assombri : contraste AA sur fond clair */

  --paper: #ffffff;
  --ombre: 0 1px 2px rgba(26, 26, 46, 0.04), 0 10px 30px -22px rgba(26, 26, 46, 0.35);
  --ombre-forte: 0 2px 4px rgba(26, 26, 46, 0.05), 0 18px 40px -24px rgba(26, 26, 46, 0.4);

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --shell: 1200px;
  --shell-etroit: 720px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--brand-bg);
  color: var(--brand-navy);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand-coral-ink);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--brand-coral-hover);
}

:focus-visible {
  outline: 2px solid var(--brand-coral-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
  color: var(--brand-navy);
}

p {
  margin: 0;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  /* Mêmes paliers que LandingNav : px-4 / sm:px-6 / lg:px-20 */
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .shell { padding: 0 1.5rem; }
}

@media (min-width: 1024px) {
  .shell { padding: 0 5rem; }
}

.shell-etroit {
  max-width: var(--shell-etroit);
}

/* ------------------------------------------------------------ navigation */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--brand-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 64px;
}

.nav-logo img {
  /* Aligné sur LandingNav.tsx (h-[3.38rem]) : sans ça l'en-tête saute de 8 px
     au passage de la SPA aux pages statiques. */
  height: 3.38rem;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 2rem; /* = gap-8 de LandingNav */
  /* `nowrap`, comme LandingNav : autoriser le retour à la ligne faisait passer
     l'en-tête sur deux lignes dès que la fenêtre se resserrait. */
  flex-wrap: nowrap;
}

.nav-links a {
  /* 15px exactement, comme le text-[15px] de LandingNav : 0.95rem donnait
     15,2px, assez pour décaler le bloc de liens de 2px d'une page à l'autre. */
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-navy);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current='page'] {
  color: var(--brand-coral-ink);
}

.nav-links a[aria-current='page'] {
  font-weight: 600;
}

@media (max-width: 780px) {
  .nav-links {
    display: none;
  }
}

/* Barre secondaire : n'apparaît que dans la section Ressources. La barre
   primaire, elle, est identique partout — c'est le repère qui ne bouge pas. */
.nav-secondaire {
  border-top: 1px solid var(--brand-border);
  background: var(--brand-bg);
}

.nav-sous-liens {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  min-height: 44px;
  align-items: center;
}

.nav-sous-liens::-webkit-scrollbar {
  display: none;
}

.nav-sous-liens a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--brand-gray);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.15rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-sous-liens a:hover {
  color: var(--brand-navy);
}

.nav-sous-liens a[aria-current='page'] {
  color: var(--brand-navy);
  font-weight: 600;
  border-bottom-color: var(--brand-coral);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.5rem;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

/* Aligné sur le variant « ghost » de shadcn utilisé par LandingNav. */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-ghost {
  /* Valeurs relevées sur le bouton shadcn size="sm" variant="ghost" de
     LandingNav : 32 px de haut, 12 px de padding, 14 px en graisse 500.
     Sans ça les liens du menu ne démarrent pas au même x d'une page à l'autre. */
  background: transparent;
  color: var(--brand-navy);
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
}

.btn-ghost:hover {
  background: var(--brand-subtle);
  color: var(--brand-navy);
}

@media (max-width: 640px) {
  .btn-ghost { display: none; }
}

.btn-primary {
  background: var(--brand-coral);
  color: #fff;
}

/* Dans l'en-tête, les boutons reprennent la métrique shadcn size="sm" de
   LandingNav (32 px de haut, px-8, 14 px). Ailleurs dans la page, .btn garde
   sa taille normale. */
.site-nav .btn-primary {
  height: 32px;
  padding: 0 2rem;
  font-size: 14px;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--brand-coral-hover);
  color: #fff;
}

/* ---------------------------------------------------------- fil d'ariane */

.fil-ariane {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.4rem clamp(1.1rem, 4vw, 2.5rem) 0;
}

.fil-ariane ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--brand-gray);
}

.fil-ariane li + li::before {
  content: '/';
  margin-right: 0.45rem;
  color: #c8c2b8;
}

.fil-ariane a {
  color: var(--brand-gray);
  text-decoration: none;
}

.fil-ariane a:hover {
  color: var(--brand-coral-ink);
  text-decoration: underline;
}

/* ------------------------------------------------------------- en-têtes */

.page-tete {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(2rem, 5vw, 3.2rem) 0 clamp(1.6rem, 4vw, 2.4rem);
  max-width: 46rem;
}

.page-tete h1 {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  letter-spacing: -0.015em;
}

.page-tete-hub {
  max-width: 40rem;
}

.sur-titre {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-gray);
}

.chapo {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--brand-gray);
}

/* --------------------------------------------------------------- grilles */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.1rem;
  list-style: none;
  margin: 0 0 clamp(3rem, 7vw, 5rem);
  padding: 0;
}

.grille-rubriques {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.carte {
  background: var(--paper);
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  box-shadow: var(--ombre);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.carte:hover {
  box-shadow: var(--ombre-forte);
  transform: translateY(-2px);
}

.carte-lien {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1.5rem;
  color: inherit;
  text-decoration: none;
}

.carte h2 {
  font-size: 1.35rem;
}

.carte h3 {
  font-size: 1.1rem;
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.carte p {
  font-size: 0.92rem;
  color: var(--brand-gray);
  line-height: 1.55;
}

.carte-pied {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--brand-gray);
}

.carte-bientot {
  background: var(--brand-subtle);
  box-shadow: none;
}

.carte-bientot:hover {
  box-shadow: var(--ombre);
}

/* ------------------------------------------------------------- pastilles */

.pastille {
  align-self: flex-start;
  display: inline-block;
  padding: 0.18rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  background: var(--rentability-green-bg);
  color: var(--rentability-green);
}

.pastille-attente {
  background: var(--brand-subtle);
  color: var(--brand-gray);
}

.pastille-actif {
  background: var(--rentability-green-bg);
  color: var(--rentability-green);
}

.pastille-intention {
  background: var(--rentability-coral-bg);
  color: var(--rentability-coral);
}

/* --------------------------------------------------------------- filtres */

.filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.8rem;
}

.filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--brand-navy);
  text-decoration: none;
}

.filtre span {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
  color: var(--brand-gray);
}

.filtre:hover {
  border-color: var(--brand-coral);
  color: var(--brand-coral-ink);
}

/* ----------------------------------------------------------------- blocs */

.bloc {
  margin-bottom: clamp(3rem, 7vw, 5rem);
}

.bloc-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.bloc-tete h2 {
  font-size: 1.6rem;
}

.lien-suite {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.lien-suite:hover {
  text-decoration: underline;
}

.vide {
  padding: 3rem 0 5rem;
  color: var(--brand-gray);
}

/* --------------------------------------------------------------- article */

.article {
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.article-tete {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0 1.6rem;
}

.article-tete h1 {
  font-size: clamp(1.95rem, 4.4vw, 2.7rem);
  letter-spacing: -0.015em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--brand-gray);
  padding-top: 0.5rem;
  border-top: 1px solid var(--brand-border);
}

.article-meta .sep {
  color: #cfc9bf;
}

.article-meta .maj {
  color: var(--rentability-green);
  font-weight: 600;
}

/* Sommaire */
.sommaire {
  background: var(--paper);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.6rem;
}

.sommaire-titre {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-gray);
  margin-bottom: 0.6rem;
}

.sommaire ol {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  line-height: 1.7;
}

.sommaire li::marker {
  color: #cfc9bf;
}

.sommaire a {
  text-decoration: none;
  color: var(--brand-navy);
}

.sommaire a:hover {
  color: var(--brand-coral-ink);
  text-decoration: underline;
}

/* CTA contextuel — placé juste après l'introduction, pas en fin d'article. */
.cta-contextuel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--brand-coral);
  border-radius: 0 14px 14px 0;
  background: var(--paper);
}

.cta-titre {
  font-weight: 700;
  font-size: 1rem;
}

.cta-texte {
  font-size: 0.9rem;
  color: var(--brand-gray);
  margin-top: 0.15rem;
}

/* Corps rédactionnel */
.prose {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  font-size: 1.06rem;
}

.prose h2 {
  font-size: clamp(1.45rem, 3vw, 1.75rem);
  margin-top: 1.6rem;
  scroll-margin-top: 5rem;
}

.prose h3 {
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 700;
  margin-top: 1rem;
  scroll-margin-top: 5rem;
}

.prose h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
}

/* Bloc-réponse : premier paragraphe après un H2. Reste un paragraphe normal
   pour que l'extraction par les moteurs génératifs fonctionne — seule une
   barre latérale discrète le signale visuellement. */
.prose .answer-block {
  padding-left: 1rem;
  border-left: 2px solid var(--rentability-green);
  font-weight: 500;
}

.prose ul,
.prose ol {
  margin: 0;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.prose li::marker {
  color: #cfc9bf;
}

.prose a {
  font-weight: 500;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--brand-border);
  margin: 1.2rem 0;
  width: 100%;
}

.prose blockquote {
  margin: 0;
  padding: 0.9rem 1.2rem;
  background: var(--brand-subtle);
  border-radius: 12px;
  font-style: italic;
  color: var(--brand-navy);
}

.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--brand-subtle);
  padding: 0.1em 0.36em;
  border-radius: 5px;
}

/* Tableaux : toujours dans leur propre conteneur défilable. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  background: var(--paper);
}

.table-scroll table {
  border-collapse: collapse;
  width: 100%;
  min-width: 420px;
  font-size: 0.92rem;
}

.table-scroll th {
  text-align: left;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-gray);
  font-weight: 700;
  padding: 0.85rem 1rem;
  /* Même valeur que les filets du tableau (#EEEBE6) : l'en-tête se fond dans
     le cadre au lieu de s'en détacher. Le token plutôt que la valeur, pour que
     cette feuille ne fige aucune couleur de marque. */
  background: var(--brand-border);
  border-bottom: 1px solid var(--brand-border);
}

.table-scroll td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--brand-border);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

/* La première colonne porte l'entrée de lecture — ce dont la ligne parle.
   Elle se distingue des valeurs qui la commentent. */
.table-scroll tbody td:first-child {
  font-weight: 600;
  color: var(--brand-navy);
}

.table-scroll tbody tr:last-child td {
  border-bottom: 0;
}

/* Encarts */
.encart-attente,
.encart-methodo {
  background: var(--paper);
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.encart-attente {
  border-left: 3px solid var(--rentability-ochre);
}

.encart-methodo {
  border-left: 3px solid var(--rentability-green);
  max-width: 46rem;
}

.encart-titre {
  font-weight: 700;
  font-size: 1rem;
}

.encart-attente p,
.encart-methodo p {
  font-size: 0.94rem;
  color: var(--brand-gray);
  line-height: 1.55;
}

/* Signature */
.signature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--brand-border);
}

.signature img {
  border-radius: 999px;
  flex: 0 0 auto;
}

.signature-nom {
  font-weight: 700;
}

.signature-role {
  font-size: 0.9rem;
  color: var(--brand-gray);
}

.signature-mention {
  font-size: 0.8rem;
  color: var(--brand-gray);
  margin-top: 0.5rem;
  max-width: 40rem;
}

/* ------------------------------------------------------------ pied de page */

.site-footer {
  border-top: 1px solid var(--brand-border);
  background: var(--paper);
  padding: clamp(2.4rem, 5vw, 3.4rem) 0 1.6rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 820px) {
  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
}

.footer-brand img {
  height: 46px;
  width: auto;
}

.footer-brand p {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--brand-gray);
  max-width: 22rem;
}

.footer-col h2 {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brand-gray);
  margin-bottom: 0.7rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.footer-col a {
  font-size: 0.92rem;
  color: var(--brand-navy);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--brand-coral-ink);
  text-decoration: underline;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--brand-border);
  font-size: 0.79rem;
  color: var(--brand-gray);
}

.footer-legal p {
  max-width: 46rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------- blocs Sanity ---
   Composants insérables depuis le Studio. Ils n'existaient pas dans le
   montage Markdown : un CTA y était dérivé de la catégorie, et un encart
   chiffré n'était pas exprimable du tout.
   ------------------------------------------------------------------ */

.prose .encart-chiffre {
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--rentability-green);
  border-radius: 0 16px 16px 0;
  background: var(--paper);
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.chiffre-valeur {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.05;
  color: var(--rentability-green);
  font-variant-numeric: lining-nums tabular-nums;
}

.chiffre-libelle {
  font-weight: 600;
  font-size: 1rem;
}

.chiffre-methode {
  font-size: 0.86rem;
  color: var(--brand-gray);
  margin-top: 0.35rem;
}

.prose .encart-avertissement {
  border: 1px solid var(--brand-border);
  border-left: 3px solid var(--rentability-ochre);
  border-radius: 0 16px 16px 0;
  background: var(--paper);
  padding: 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.encart-avertissement p:not(.encart-titre) {
  font-size: 0.95rem;
  color: var(--brand-gray);
  line-height: 1.55;
}

/* Le ton encode l'information, il ne décore pas : « ça a changé » signale une
   évolution réglementaire, « attention » un piège, « à retenir » une synthèse. */
.encart-retenir { border-left-color: var(--rentability-green); }
.encart-attention { border-left-color: var(--rentability-coral); }
.encart-changement { border-left-color: var(--rentability-ochre); }

/* Une source officielle citée dans le corps : soulignée en pointillé pour se
   distinguer d'un lien interne, sans casser la lecture. */
.prose a.lien-source {
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.table-legende {
  font-size: 0.84rem;
  color: var(--brand-gray);
  margin-top: -0.5rem;
}

/* ---------------------------------------------------------------- /faq ---
   La FAQ statique double l'accordéon React de la landing. Les deux lisent la
   même source Sanity, mais celle-ci est du HTML : les crawlers la voient.
   ------------------------------------------------------------------ */

.faq-groupe {
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.faq-groupe h2 {
  font-size: 1.5rem;
  padding-bottom: 0.6rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--brand-border);
}

.faq-item + .faq-item {
  margin-top: 1.6rem;
}

.faq-item h3 {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 700;
  scroll-margin-top: 7rem;
}

.faq-aparte {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--rentability-coral);
  margin-top: 0.3rem;
}

.faq-reponse {
  margin-top: 0.4rem;
  color: var(--brand-gray);
  line-height: 1.6;
}

.page-faq .page-tete {
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
}

/* ------------------------------------------------- formulaires de modèles ---
   Le formulaire ne s'affiche qu'après un clic : son bundle pèse ~650 Ko à cause
   de la génération PDF. La page, elle, reste légère et indexable.
   ------------------------------------------------------------------ */

.formulaire {
  margin: 0 0 2rem;
  padding: 1.5rem;
  background: var(--paper);
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  box-shadow: var(--ombre);
}

.formulaire-ouvert {
  padding: 1.75rem;
}

.f-teaser {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--brand-gray);
}

.f-erreur {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--rentability-coral);
}

.f-form {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.f-groupe {
  border: 0;
  padding: 0;
  margin: 0;
}

.f-groupe legend {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-gray);
  padding: 0 0 0.7rem;
}

.f-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem 1.1rem;
}

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

.f-champ label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-navy);
}

.f-opt {
  font-weight: 400;
  color: var(--brand-gray);
}

.f-champ input,
.f-champ select,
.f-champ textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--brand-navy);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  width: 100%;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.f-champ textarea {
  resize: vertical;
  line-height: 1.45;
}

.f-champ input:focus,
.f-champ select:focus,
.f-champ textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--brand-coral);
}

/* Le symbole reste dans le champ : la saisie ne porte que le nombre. */
.f-euros {
  position: relative;
}

.f-euros input {
  padding-right: 2rem;
  font-variant-numeric: tabular-nums;
}

.f-euros span {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-gray);
  font-size: 0.95rem;
  pointer-events: none;
}

.f-aide {
  font-size: 0.79rem;
  color: var(--brand-gray);
  line-height: 1.45;
}

/* Le verdict de conformité — c'est lui qui distingue ce modèle d'un PDF vierge. */
.f-verdict {
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  border-left: 3px solid;
  font-size: 0.91rem;
  line-height: 1.55;
}

.f-verdict.f-ok {
  background: var(--rentability-green-bg);
  border-left-color: var(--rentability-green);
  color: var(--brand-navy);
}

.f-verdict.f-alerte {
  background: var(--rentability-coral-bg);
  border-left-color: var(--rentability-coral);
  color: var(--brand-navy);
}

.f-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.f-actions .btn-ghost {
  height: auto;
  padding: 0.62rem 1.3rem;
  font-size: 0.93rem;
  font-weight: 600;
  border: 1px solid var(--brand-border);
}

.f-note {
  font-size: 0.8rem;
  color: var(--brand-gray);
  line-height: 1.5;
}

/* Référence légale : ce que le modèle applique, et depuis quand il est vérifié. */
.encart-reference {
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
  background: var(--brand-subtle);
  border-radius: 12px;
}

.encart-reference .encart-titre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-gray);
  margin-bottom: 0.25rem;
}

.encart-reference p:last-child {
  font-size: 0.89rem;
  color: var(--brand-navy);
}

/* Illustrations d'article : SVG produits avec les chiffres du texte, servis
   depuis public/ressources/visuels/. */
.prose .illustration {
  margin: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.illustration img {
  width: 100%;
  height: auto;
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  background: var(--paper);
}

.illustration figcaption {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--brand-gray);
}

/* ------------------------------------------------ formulaire en plusieurs pas
   Le bail demande une centaine de champs. Les poser d'un bloc rend la page
   décourageante et masque les signalements, qui sont pourtant l'intérêt du
   modèle : on découpe en six écrans, et le panneau de signalements reste visible
   sous tous, parce qu'un contrôle qui n'apparaît qu'à la fin arrive trop tard.
   ------------------------------------------------------------------ */

.f-etapes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.f-etape {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.8rem;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--brand-gray);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.f-etape:hover {
  color: var(--brand-navy);
  border-color: var(--brand-coral);
}

.f-etape-active {
  color: var(--brand-navy);
  background: var(--paper);
  border-color: var(--brand-coral);
}

.f-etape-num {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.7rem;
  border-radius: 50%;
  background: var(--brand-border);
  color: var(--brand-navy);
}

.f-etape-active .f-etape-num {
  background: var(--brand-coral);
  color: #fff;
}

.f-ecran {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* `display` l'emporte sur la feuille du navigateur : sans cette règle,
   l'attribut `hidden` ne masque plus rien et les six écrans s'empilent. */
.f-ecran[hidden],
.f-signalements[hidden] {
  display: none;
}

/* Un champ masqué par une réponse « non » : on ne le supprime pas du DOM,
   la saisie déjà faite doit revenir si l'utilisateur change d'avis. */
.f-champ[hidden] {
  display: none;
}

.f-pas {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
}

.f-pas .btn-ghost {
  height: auto;
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  border: 1px solid var(--brand-border);
}

.f-pas .btn-ghost:disabled {
  opacity: 0.4;
  cursor: default;
}

.f-aide-large {
  grid-column: 1 / -1;
  margin-bottom: 0.9rem;
  font-size: 0.83rem;
  color: var(--brand-gray);
  line-height: 1.5;
}

/* --- Signalements : jamais bloquants, toujours sourcés. */

.f-signalements {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.f-verdict.f-info {
  background: var(--brand-subtle);
  border-left-color: var(--brand-border);
  color: var(--brand-navy);
}

.f-source {
  margin-top: 0.35rem;
  font-size: 0.76rem;
  color: var(--brand-gray);
}

/* --- Les onze catégories du décret. */

.f-mobilier {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.f-mob {
  padding: 0.6rem 0.75rem;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
}

.f-mob-tete {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--brand-navy);
  cursor: pointer;
}

.f-mob-tete input {
  margin-top: 0.16rem;
  accent-color: var(--brand-coral);
  flex: 0 0 auto;
}

.f-mob-detail {
  display: none;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-left: 1.5rem;
}

.f-mob:has(input[data-mob]:checked) {
  background: var(--paper);
  border-color: var(--brand-coral);
}

.f-mob:has(input[data-mob]:checked) .f-mob-detail {
  display: flex;
  flex-wrap: wrap;
}

.f-mob-detail input,
.f-mob-detail select,
.f-ligne input,
.f-ligne select {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--brand-navy);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: 9px;
  padding: 0.42rem 0.6rem;
  flex: 1 1 9rem;
  min-width: 0;
}

.f-mob-detail input:focus,
.f-mob-detail select:focus,
.f-ligne input:focus,
.f-ligne select:focus {
  outline: none;
  border-color: var(--brand-coral);
}

.f-court {
  flex: 0 0 4.5rem !important;
}

/* --- Le mobilier libre, pièce par pièce. */

.f-lignes {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.f-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.f-retirer {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--brand-gray);
  background: transparent;
  border: 1px solid var(--brand-border);
  border-radius: 9px;
  cursor: pointer;
}

.f-retirer:hover {
  color: var(--rentability-coral);
  border-color: var(--rentability-coral);
}

.f-ajouter {
  align-self: flex-start;
  margin-top: 0.7rem;
  padding: 0.42rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-navy);
  background: var(--brand-bg);
  border: 1px dashed var(--brand-border);
  border-radius: 10px;
  cursor: pointer;
}

.f-ajouter:hover {
  border-color: var(--brand-coral);
}

/* --- Annexes à joindre. */

.f-annexes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.4rem 1rem;
}

.f-case {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--brand-navy);
  cursor: pointer;
}

.f-case input {
  margin-top: 0.18rem;
  accent-color: var(--brand-coral);
  flex: 0 0 auto;
}

.f-case input:disabled + span {
  color: var(--brand-gray);
}

/* Un champ facultatif ailleurs, exigé en zone d'encadrement : le libellé le dit
   au lieu de le laisser deviner. */
.f-opt.f-obl {
  font-weight: 600;
  color: var(--rentability-coral);
}

/* Deux portes d'entrée : remplir ici, ou emporter le document vierge. */
.f-portes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.f-portes .btn-ghost {
  height: auto;
  padding: 0.62rem 1.3rem;
  font-size: 0.93rem;
  font-weight: 600;
  border: 1px solid var(--brand-border);
}

.f-portes .btn-ghost:disabled,
.f-portes .btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ------------------------------------------------ questions dépliantes ---
   Même forme que l'accordéon de la page d'accueil, écrite ici à la main : la
   landing est habillée par Tailwind, les Ressources par cette feuille. Les
   deux puisent dans les mêmes tokens de theme.css, ce qui suffit à ce que le
   visiteur ne voie qu'un seul système.

   `<details>` natif, donc pas une ligne de script : les réponses sont dans le
   HTML dès le chargement, et le clavier fonctionne sans qu'on s'en occupe.
   ------------------------------------------------------------------ */

.faq-bloc {
  margin: 3rem 0 0;
}

.faq-bloc-titre {
  margin-bottom: 1rem;
}

.faq-q {
  border-bottom: 1px solid var(--brand-border);
}

.faq-q > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.9rem;
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 0.15s ease;
  list-style: none;
}

/* Safari dessine son propre triangle : on le retire des deux façons. */
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::marker { content: ''; }

.faq-q > summary:hover {
  background: var(--brand-bg);
}

.faq-q > summary:focus-visible {
  outline: 2px solid var(--brand-coral);
  outline-offset: 2px;
}

.faq-question {
  font-weight: 600;
  color: var(--brand-navy);
  line-height: 1.45;
}

.faq-chevron {
  flex: none;
  color: var(--brand-muted);
  transition: transform 0.2s ease;
}

.faq-q[open] .faq-chevron {
  transform: rotate(180deg);
}

.faq-r {
  padding: 0 0.9rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.faq-r p {
  color: var(--brand-gray);
  line-height: 1.65;
}

/* L'aparté de Monique, comme sur la page d'accueil. */
.faq-r .faq-aparte {
  color: var(--brand-coral);
  font-style: italic;
  font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  .faq-q > summary,
  .faq-chevron { transition: none; }
}

/* ------------------------------------------------------------- sources ---
   Ce sur quoi la page s'appuie, nommé et daté. Discret : c'est une garantie
   qu'on veut pouvoir vérifier, pas un argument qu'on met en avant.
   ------------------------------------------------------------------ */

.bloc-sources {
  margin: 3rem 0 0;
  padding: 1.4rem 1.5rem;
  background: var(--brand-subtle);
  border-radius: 14px;
}

.bloc-sources-titre {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-gray);
  margin: 0 0 0.8rem;
  font-family: inherit;
}

.bloc-sources ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bloc-sources li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--brand-gray);
}

.bloc-sources li::marker {
  color: var(--brand-muted);
}

.bloc-sources a {
  color: var(--brand-navy);
  text-decoration: underline;
  text-decoration-color: var(--brand-border);
  text-underline-offset: 2px;
}

.bloc-sources a:hover {
  text-decoration-color: var(--brand-coral);
}

.source-date {
  color: var(--brand-muted);
  white-space: nowrap;
}