/**
 * Styles spécifiques à l'application. Les tokens et composants génériques
 * viennent de design-system/ (copie exacte de github.com/samgzl1/
 * design-system-web-saas, commit 668872a, branche main — voir README.md
 * § Design system pour la provenance). Ce fichier ne redéfinit jamais une
 * couleur, un rayon ou une ombre : tout passe par les variables --color-*,
 * --space-*, --radius-*, --shadow-*, --text-*, --font-* du design system.
 * Point de rupture : 760px (celui documenté par le design system).
 */

/* Conteneur de page — guidance de docs/layout.md du design system,
   implémentée ici (preview/preview.css n'est pas un composant réutilisable,
   voir son propre en-tête : "not part of the reusable component library"). */
.page {
  max-width: 1180px;
  margin: auto;
  padding: var(--space-8) var(--space-6) var(--space-11);
}

.top { margin-bottom: var(--space-7); }

/* Navigation positionnée juste au-dessus du formulaire qu'elle contrôle,
   après le titre et le texte explicatif du parcours (brief correctif final
   « navigation et cartouches » §1) — pas juste sous le header. Elle existe
   en double dans le DOM, une fois par section de parcours (voir index.html
   et le commentaire dans app.js), pour rester sur le même axe horizontal
   que le formulaire de la section active ; un seul exemplaire est visible
   à la fois puisque l'autre section est hidden. Espacement net au-dessus
   (sépare de l'introduction) et en dessous (sépare de l'action) sans
   éloigner la navigation de l'action principale. Onglet actif renforcé
   sans devenir disproportionné : fond plein + texte plus foncé + trait
   d'accent, pas de nouvelle couleur. */
.mode-switch { display: flex; gap: var(--space-2); margin: var(--space-7) 0 var(--space-6); border-bottom: 1px solid var(--color-border); }
.mode-tab { background: transparent; color: var(--color-text-secondary); border-radius: 10px 10px 0 0; padding: var(--space-3) var(--space-5); font: 600 14px var(--font-body); box-shadow: none; }
.mode-tab:hover { color: var(--color-ink); }
.mode-tab:focus-visible { outline: 3px solid var(--color-accent-soft); outline-offset: -2px; }
.mode-tab.is-active { color: var(--color-ink); font-weight: 700; background: var(--color-surface-secondary); box-shadow: inset 0 -3px 0 var(--color-accent); }
.mode-panel[hidden] { display: none; }

.hero { padding: var(--space-9) 0 var(--space-7); }
.hero-compact { padding-top: var(--space-6); }
/* Même hiérarchie visuelle que h1 (brief dernier correctif §1) : .section-title
   est un <h2> pour des raisons sémantiques (un seul h1 par document — le
   parcours individuel), mais doit avoir exactement le même poids visuel que
   le titre du parcours individuel. Reprend donc littéralement les propriétés
   de h1 du design system (tokens/index.css + components/layout.css), pas une
   échelle réduite inventée. */
.section-title {
  max-width: 740px;
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: var(--text-h1-tracking);
  font-weight: var(--text-h1-weight);
}
/* Même accent que h1 em (design system) : seule l'accroche finale "en une
   fois." est mise en avant, pas tout le titre (brief dernier correctif
   §1, deuxième passe). La règle du design system ne cible que "h1 em" ;
   .section-title étant un h2, elle ne s'appliquait pas sans cette copie. */
.section-title em { color: var(--color-accent); font-style: normal; }

/* Panel de recherche (individuel et cabinet) : plus étroit que le panel de
   résultat, pour une largeur de lecture confortable — la carte de résultat,
   elle, occupe toute la largeur de la colonne de page (voir .result
   ci-dessous), exactement comme dans le design system référence. Pas de
   marge haute propre : la navigation qui précède directement porte déjà
   l'espacement (.mode-switch, margin-bottom ci-dessus). */
.panel-form { max-width: 650px; margin-top: 0; }
.panel-form textarea { width: 100%; }

.privacy-note { color: var(--color-text-secondary); font-size: var(--text-micro-size); margin: var(--space-3) 2px 0; max-width: 650px; }
.form-foot { display: flex; justify-content: space-between; align-items: center; color: var(--color-text-secondary); font-size: var(--text-micro-size); margin-top: var(--space-3); }
.cabinet-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }

/* Compteur "X / 30 entreprises" (brief dernier correctif §2) : information
   immédiate pendant la saisie, distincte du blocage réel à la soumission. */
.cabinet-counter { margin: var(--space-2) 2px 0; color: var(--color-text-secondary); font-size: var(--text-small-size); font-weight: 600; }
.cabinet-counter.is-over-limit { color: var(--color-danger); }

/* Pagination des résultats du lot (brief dernier correctif §3) : ne modifie
   jamais le portefeuille — seule la tranche affichée dans le tableau
   change, filtres et export CSV portent toujours sur l'ensemble. */
.cabinet-pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-5); }
.cabinet-page-indicator { color: var(--color-text-secondary); font-size: var(--text-small-size); font-weight: 600; min-width: 90px; text-align: center; }

.result-section { min-height: 20px; }
.loading, .empty-note { color: var(--color-text-secondary); padding: var(--space-5) 0; }

/* Panneau de résultat : pas de max-width/centrage indépendant — il occupe
   toute la largeur de la colonne de page, comme le panel de recherche
   commence sur le même axe horizontal (corrigé après recette : le résultat
   était centré séparément du reste du contenu). */
.result { margin-top: var(--space-6); }
/* Extension justifiée : le design system ne définit que .result (succès),
   .result.warn et .result.danger. Cette app a un 4ᵉ état réel ("données
   insuffisantes", ni succès ni alerte ni erreur) qui n'a pas d'équivalent —
   voir docs/principles.md, étape 1 : réutiliser un token existant plutôt
   qu'en inventer un. --color-text-secondary est déjà le token de
   .badge.neutral ; on l'applique ici à la bordure gauche pour le même état. */
.result.neutral { border-left-color: var(--color-text-secondary); }
.result-head h2 { font-size: 20px; margin: 3px 0 6px; }
.result-head p { font-size: var(--text-small-size); }

.label-warning { color: var(--color-warning-text); font-weight: 600; }

/* Espacement structurel entre les cartes de codes et l'encart d'information
   qui suit (corrigé après recette : les deux étaient visuellement collés).
   .note n'a pas de marge propre dans le design system (laissée au
   consommateur) — on la fixe ici avec le rythme vertical standard. */
.codes + .note { margin-top: var(--space-6); }

/* Mise en avant du futur code lorsqu'il diffère réellement du code actuel :
   accent indigo (bordure + fond doux), pas une couleur d'état fonctionnel —
   l'indigo signale "à suivre", pas "succès/erreur" (docs/principles.md).
   Codes identiques ou futur code absent -> aucun repère, pas de fausse alerte. */
.code-heading { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.code.code-highlight { border-color: var(--color-accent); background: var(--color-accent-soft); }
.code.code-highlight small { color: var(--color-accent-dark); }
.code .tag { text-transform: none; padding: 2px var(--space-2); font-size: 10px; }

/* Encart "Vos réponses" : un seul regroupement pour toutes les réponses
   déjà données, plutôt qu'un bloc par réponse (corrigé après recette : deux
   blocs empilés donnaient l'impression d'un doublon). */
.answers-recap { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.answers-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.answers-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); font-size: var(--text-small-size); }
.answers-row:first-child { border-top: 0; padding-top: 0; }
.answers-question { color: var(--color-text-secondary); }
.answers-value { font-weight: 700; color: var(--color-ink); }

.questions { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.question-text { font-size: var(--text-small-size); margin: 0 0 var(--space-3); }
.qa-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qa-option { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border-interactive); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-4); font: 600 13px var(--font-body); box-shadow: none; }
.qa-option:hover { background: var(--color-surface-secondary); border-color: var(--color-ink); }

/* Bloc de conclusion : encadrement visible + fond coloré selon l'état,
   demande explicite du brief correctif V1 (§2), qui adapte volontairement
   le principe "bordure mesurée" des passes précédentes. Réutilise les
   tokens *-soft du design system (mêmes teintes que .badge/.note), jamais
   une couleur inventée. Toujours un seul <span class="badge"> dans
   .result-head : ce bloc n'ajoute pas de second badge, seulement un
   encadrement, un fond teinté et l'emoji d'état devant le titre. */
.classification-content {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-secondary);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
}
/* Bug corrigé (brief correctif « états et parcours » §2) : app.js pose la
   classe combinée "classification-ok"/"classification-warn"/
   "classification-neutral" sur cet élément (pas une classe "ok"/"warn"/
   "neutral" séparée) — les sélecteurs `.classification-content.ok` etc. ne
   correspondaient donc jamais, et le fond restait toujours gris. Les
   sélecteurs ci-dessous correspondent exactement aux classes réellement
   générées, avec les mêmes tokens que la pastille .badge correspondante
   (--color-success-soft / --color-warning-soft / --color-surface-secondary). */
.classification-content.classification-ok { border-left-color: var(--color-success); background: var(--color-success-soft); }
.classification-content.classification-warn { border-left-color: var(--color-warning); background: var(--color-warning-soft); }
.classification-content.classification-neutral { border-left-color: var(--color-text-secondary); background: var(--color-surface-secondary); }
.classification-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 17px var(--font-display);
  margin: 0 0 var(--space-4);
}
/* Le point décoratif de .badge (::before, design system) fait doublon avec
   l'emoji d'état déjà présent dans le texte du badge (🟢/🟡/⚪) : supprimé
   explicitement (brief correctif final § 1 : "aucun point supplémentaire
   avant ou après l'emoji"), y compris sur les badges du tableau de lot qui
   n'ont pas d'emoji, pour rester visuellement cohérent. !important : ce
   point avait déjà été retiré dans une passe précédente et signalé encore
   visible en recette — cette règle doit gagner sans ambiguïté de cascade,
   quel que soit l'ordre de chargement des feuilles de style. */
.badge::before { content: none !important; }
.classification-content.classification-ok .classification-label { color: var(--color-success); }
.classification-content.classification-warn .classification-label { color: var(--color-warning-text); }
.classification-content.classification-neutral .classification-label { color: var(--color-text-secondary); }
.classification-content dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-small-size); }
.classification-content dt { color: var(--color-text-secondary); font-weight: 600; }
.classification-content dd { margin: 0; color: var(--color-ink); }

.checklist-section { margin-top: var(--space-6); }
.checklist-subtitle { color: var(--color-text-secondary); font-size: var(--text-micro-size); margin: 0 0 var(--space-2); font-style: italic; }

.result-actions { margin-top: var(--space-6); }
.source-note { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: var(--text-micro-size); }

/* Mode cabinet : structure propre au tableau desktop (le design system
   fournit le composant table de base — ici on ajoute uniquement les
   largeurs de colonnes spécifiques). La variante mobile générique
   data-table="cards" du design system (une ligne étirée en colonnes
   label/valeur étroites) s'est révélée illisible avec des libellés NAF
   longs en recette (brief correctif responsive mobile du lot) : remplacée
   sur mobile par .cabinet-cards, une mise en page dédiée (voir plus bas et
   renderPortfolioCard() dans app.js), le tableau desktop restant inchangé
   et simplement masqué en dessous de 760px. */
.cabinet-progress { margin: var(--space-4) 0 0; padding: var(--space-4); background: var(--color-accent-soft); color: var(--color-accent-dark); border-radius: var(--radius-sm); font-size: var(--text-small-size); font-weight: 600; }
.cabinet-results { margin-top: var(--space-5); }
.cabinet-toolbar { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-5) 0 var(--space-4); }
.cabinet-toolbar label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-micro-size); font-weight: 600; color: var(--color-text-secondary); margin: 0; }
.cabinet-toolbar select { width: auto; padding: var(--space-2) var(--space-3); font-size: 12px; }
.cabinet-count { color: var(--color-text-secondary); font-size: var(--text-micro-size); margin-left: auto; }
.cabinet-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cabinet-table { table-layout: fixed; }
.cabinet-table td { word-wrap: break-word; overflow-wrap: break-word; }
/* 6 colonnes en V1 (colonne Statut retirée de l'interface, brief correctif
   final § 8 — la logique/les classes restent dans le code, voir app.js). */
.cabinet-table th:nth-child(1), .cabinet-table td:nth-child(1) { width: 20%; }
.cabinet-table th:nth-child(2), .cabinet-table td:nth-child(2) { width: 17%; }
.cabinet-table th:nth-child(3), .cabinet-table td:nth-child(3) { width: 17%; }
/* Cartouches de classement centrés (brief correctif final « navigation et
   cartouches » §2) — uniquement cette colonne : Entreprise, codes, Motif et
   Date restent alignés à gauche (comportement par défaut des <td>, non
   modifié). Le badge reste inline-flex (largeur au contenu, jamais étiré
   sur toute la colonne) ; text-align centre son texte si le libellé passe
   sur deux lignes. */
.cabinet-table th:nth-child(4), .cabinet-table td:nth-child(4) { width: 14%; text-align: center; }
.cabinet-table td:nth-child(4) .badge { text-align: center; }
.cabinet-table th:nth-child(5), .cabinet-table td:nth-child(5) { width: 24%; }
.cabinet-table th:nth-child(6), .cabinet-table td:nth-child(6) { width: 8%; }
.siren-sub { color: var(--color-text-secondary); font-size: 11px; font-family: var(--font-mono); }
.motif-cell { color: var(--color-text-secondary); font-size: 12px; line-height: 1.45; }
/* Date sur une seule ligne quand la largeur le permet (brief § 7). Le
   tableau lui-même est masqué sur mobile (voir media query plus bas) au
   profit de .cabinet-cards, donc nowrap n'y crée jamais de débordement. */
.date-cell { white-space: nowrap; }

/* Cartes mobiles du mode lot (brief correctif responsive mobile) : masquées
   par défaut, affichées uniquement sous 760px (media query plus bas), où
   elles remplacent .cabinet-table-wrap. Une seule colonne de contenu par
   carte, codes en blocs larges plutôt qu'en grille label/valeur étroite,
   classement centré avec emoji, motif replié par défaut derrière
   <details>/<summary> natifs. */
.cabinet-cards { display: none; }
.cabinet-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4); margin-bottom: var(--space-4); }
.cabinet-card:last-child { margin-bottom: 0; }
.cabinet-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-4); }
.cabinet-card-head strong { font-size: var(--text-small-size); word-break: break-word; }
.cabinet-card-code { margin-bottom: var(--space-3); }
.cabinet-card-code-label { display: block; color: var(--color-text-secondary); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.cabinet-card-code-value { display: block; font-family: var(--font-mono); font-size: var(--text-small-size); line-height: 1.4; word-break: break-word; }
.cabinet-card-classement { text-align: center; margin: var(--space-4) 0; }
.cabinet-card-classement .badge { white-space: normal; text-align: center; }
.cabinet-card-motif { margin-top: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.cabinet-card-motif summary { cursor: pointer; color: var(--color-accent); font-weight: 700; font-size: var(--text-small-size); list-style: none; }
.cabinet-card-motif summary::-webkit-details-marker { display: none; }
.cabinet-card-motif summary:focus-visible { outline: 3px solid var(--color-accent-soft); outline-offset: 2px; }
.cabinet-card-motif p { margin: var(--space-2) 0 0; color: var(--color-text-secondary); font-size: var(--text-small-size); line-height: 1.5; }
.cabinet-card-date { margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-size: 11px; }

/* Contenu éditorial statique (SEO) : présent dans le HTML initial, pas
   injecté dynamiquement, pour que le contexte explicatif essentiel soit
   disponible sans dépendre du JS. Réutilise .section-head du design system. */
.static-info { margin-top: var(--space-10); }
.static-info-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.static-info-list h3 { margin: 0 0 var(--space-2); }
.static-info-list p { margin: 0; color: var(--color-text-secondary); font-size: var(--text-small-size); }

footer { color: var(--color-text-secondary); font-size: var(--text-micro-size); line-height: 1.5; margin-top: var(--space-10); display: flex; justify-content: space-between; gap: var(--space-5); border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
footer p { margin: 0; }
footer a { color: var(--color-accent); }

@media (max-width: 760px) {
  .page { padding: var(--space-6) var(--space-4) var(--space-9); }
  .hero { padding-top: var(--space-7); }
  .hero-compact { padding-top: var(--space-5); }
  .mode-switch { overflow-x: auto; }
  .result-head, .top { display: block; }
  .result-head > *:not(:first-child) { margin-top: var(--space-4); }
  .answers-row { grid-template-columns: 1fr; gap: var(--space-1); text-align: left; }
  .classification-content dl { grid-template-columns: 1fr; }
  .qa-option { flex: 1 1 auto; text-align: center; }
  .cabinet-table-wrap { display: none; }
  .cabinet-cards { display: block; }
  .cabinet-actions { flex-direction: column; }
  .cabinet-actions button { width: 100%; }
  .cabinet-toolbar { flex-direction: column; align-items: stretch; }
  .cabinet-count { margin-left: 0; }
  .cabinet-pagination { gap: var(--space-3); }
  .cabinet-pagination button { flex: 1 1 auto; min-width: 0; }
  .static-info-list { grid-template-columns: 1fr; }
  footer { flex-direction: column; margin-top: var(--space-9); }
}

/* =========================================================================
   Design V3 — validé en recette le 2026-09-16 (preview/landing-page-v3.html,
   branche feat/naf2025-lp-v3-design-only), promu ici comme design définitif
   de la V1. Reprend uniquement les adaptations testées : typographie en
   pile système (aucune police distante), fond blanc, hero centré, FAQ.
   ========================================================================= */

:root {
  --font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --color-paper: #ffffff;
  --color-surface: #ffffff;
  --color-surface-secondary: #f5f5f6;

  /* H1 recalibré (76px max réel jugé trop agressif en recette) : ~38px
     mobile, ~56-68px desktop. Seul --text-h1-size est redéfini ;
     --text-h1-line/-tracking/-weight restent ceux d'origine. */
  --text-h1-size: clamp(2.4rem, 4.5vw + 0.6rem, 4.25rem);

  /* Jaune du soulignement du H1 : le design system n'a pas de token jaune
     (accent/succès/alerte/erreur seulement). Nouvelle variable dédiée,
     utilisée uniquement pour cette emphase décorative, jamais pour un état
     fonctionnel réel (qui reste --color-warning ailleurs). */
  --color-h1-underline: #f4cf57;
}

/* Largeur resserrée pour un H1/titre de lot mieux équilibrés (2 lignes
   nettes plutôt qu'un pavé de 740px). */
.hero h1, .hero .section-title { max-width: 620px; }

/* Hero centré (texte + blocs), dans les deux parcours (même classe .hero). */
.hero { text-align: center; }
.hero h1,
.hero .section-title,
.hero .lead,
.hero .privacy-note {
  margin-left: auto;
  margin-right: auto;
}
.hero .mode-switch {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.hero .panel-form {
  margin-left: auto;
  margin-right: auto;
  text-align: left; /* le formulaire reste un bloc centré, mais son contenu
                        interne (label, champ, bouton) reste lisible en
                        alignement naturel gauche-à-droite. */
}

.hero h1 em {
  text-decoration: underline;
  text-decoration-color: var(--color-h1-underline);
  text-decoration-thickness: .06em;
  text-underline-offset: .08em;
}

/* En-tête de "Ce qu'il faut savoir..." centré (.section-head est un flex à
   un seul enfant : justify-content:space-between n'a alors aucun effet
   centreur). "Questions fréquentes" (FAQ) reste à gauche sur demande
   explicite : .faq-v3 rend ce sélecteur plus spécifique, il l'emporte sans
   dépendre de l'ordre des règles. */
.section-head {
  justify-content: center;
  text-align: center;
}
.faq-v3 .section-head {
  justify-content: flex-start;
  text-align: left;
}

/* FAQ : seul bloc éditorial ajouté par le design V3. Réutilise .static-info
   (margin-top déjà défini plus haut) via la classe combinée sur la
   <section>. Sobre, cohérente avec le reste de la V1. */
.faq-v3-list { display: grid; gap: var(--space-3); max-width: 780px; }
.faq-v3-item {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.faq-v3-item summary {
  cursor: pointer;
  font: 700 15px var(--font-display);
  list-style: none;
}
.faq-v3-item summary::-webkit-details-marker { display: none; }
.faq-v3-item summary:focus-visible { outline: 3px solid var(--color-accent-soft); outline-offset: 2px; }
.faq-v3-item p { margin: var(--space-3) 0 0; color: var(--color-text-secondary); font-size: var(--text-small-size); }