/* Pages « Solutions et fonctionnalités » du Figma (WP #18296) : agences,
   fin de support, conformité CRA/NIS2, export SBOM, priorisation, veille
   nocturne, serveur MCP. Gabarit commun (partials app/views/features/_*),
   tout sous .page-feature. Mesures : cadres Desktop 1440 et Mobile 390. */

/* ── Sections génériques ─────────────────────────────────────────────────── */
/* Contenu en colonne : en-tête puis corps, 48 px d'écart (32 sur mobile). */
.page-feature .f-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.page-feature .f-section--tight .f-section__inner {
  gap: var(--space-8);
}

/* Deux filets collés (bas d'une section grise + haut de la suivante) n'en
   font qu'un, comme sur la capture du Figma. */
.page-feature .section--rule-bottom + .section--rule-top {
  border-top: 0;
}

/* En-tête de section : sur-titre sans puce + H2, 16 px (12 sur mobile). */
.page-feature .f-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.page-feature .f-head__lead {
  max-width: 760px;
}

/* ── Héro (80/120, texte 24 px d'écart, visuel 460 px à 64 px) ───────────── */
.page-feature .f-hero {
  padding-block: var(--space-12);
}

.page-feature .f-hero__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-11);
}

.page-feature .f-hero__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-7);
}

.page-feature .f-hero__lead {
  max-width: 720px;
}

.page-feature .f-hero__visual {
  flex: none;
  width: 460px;
}

/* Figma : la barre IA (677 px) tient sur une ligne à côté du visuel. */
@media (min-width: 1200px) {
  .page-feature .f-hero__row--visual .ai-bar {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* ── Boutons (héro, appel final) ─────────────────────────────────────────── */
.page-feature .f-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
}

/* ── Frise horaire (filet haut 2 px, marqueurs 12 px) ────────────────────── */
.page-feature .f-timeline {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
}

/* Le filet est porté par chaque étape : il reste continu à 1440 et suit les
   rangées quand la frise passe sur deux colonnes. */
.page-feature .f-timeline__step {
  position: relative;
  border-top: 2px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-7) 0 0;
}

.page-feature .f-timeline__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--border-strong);
}

.page-feature .f-timeline__step--accent::before { background: var(--bg-accent); }
.page-feature .f-timeline__step--critical::before { background: var(--critical-fill); }

/* ── Comparatif en carte (1,5 px border/strong, colonnes égales) ─────────── */
.page-feature .f-compare {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.page-feature .f-compare__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-8);
}

.page-feature .f-compare__col + .f-compare__col {
  border-left: 1px solid var(--border-default);
}

/* ── Deux colonnes : intro 360 px + contenu à 64 px (FAQ, étapes) ─────── */
.page-feature .f-split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-11);
}

.page-feature .f-split__aside {
  flex: none;
  width: 360px;
}

.page-feature .f-split__main {
  flex: 1 1 0;
  min-width: 0;
}

/* Figma : réponse 680 px max, pas de filet sous la dernière question. */
.page-feature .faq__answer {
  max-width: 680px;
}

.page-feature .faq:last-child {
  border-bottom: 0;
}

/* ── Appel final (128/120, centré, titre 900 px, 28 px d'écart) ──────────── */
.page-feature .f-final {
  padding-block: var(--space-14);
}

.page-feature .f-final__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.page-feature .f-final__title {
  max-width: 900px;
}

/* ── Maquette « Aperçu » du héro ─────────────────────────────────────────── */
.page-feature .f-preview {
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.page-feature .f-preview__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.page-feature .f-preview__head--split {
  justify-content: space-between;
  padding-block: 14px;
  white-space: nowrap;
}

.page-feature .f-preview__date {
  flex: none;
  width: 104px;
}

.page-feature .f-preview__row--dated {
  gap: var(--space-5);
}

.page-feature .f-preview__titles,
.page-feature .f-preview__name {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 0;
  min-width: 0;
}

.page-feature .f-preview__titles .t-body-s-strong {
  color: var(--text-primary);
}

/* Figma : titre sur une ligne ; sur mobile il passe à la ligne au lieu
   d'être coupé (le cadre 390 le tronque). */
@media (min-width: 768px) {
  .page-feature .f-preview__titles {
    white-space: nowrap;
  }
}

.page-feature .f-preview__rows {
  margin: 0;
}

.page-feature .f-preview__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-default);
}

.page-feature .f-preview__row:last-child {
  border-bottom: 0;
}

.page-feature .f-preview__row .tag {
  flex: none;
}

.page-feature .f-preview__foot {
  padding: var(--space-4) var(--space-6);
  background: var(--bg-subtle);
}

/* ── Bande de chiffres (72/120, colonnes séparées par un filet) ──────────── */
.page-feature .f-stats {
  padding-block: 72px;
}

.page-feature .f-stats .f-section__inner {
  gap: var(--space-8);
}

/* Colonnes flex: 1 + padding, comme le Figma (la première, sans filet ni
   padding gauche, est 32 px plus étroite). Grille sous 1024 px. */
.page-feature .f-stats__row,
.page-feature .f-points__row {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.page-feature .f-stats__item,
.page-feature .f-points__item {
  flex: 1 1 0;
  min-width: 0;
}

.page-feature .f-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-8);
  border-left: 1px solid var(--border-default);
}

.page-feature .f-stats__item:first-child {
  padding-left: 0;
  border-left: 0;
}

/* ── Grille de cartes jointives (1,5 px border/strong) ───────────────────── */
.page-feature .f-cards {
  display: grid;
  grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr));
  border-top: 1.5px solid var(--border-strong);
  border-left: 1.5px solid var(--border-strong);
}

.page-feature .f-cards--2 { --cards: 2; }
.page-feature .f-cards--4 { --cards: 4; }

.page-feature .f-cards__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px;
  background: var(--bg-surface);
  border-right: 1.5px solid var(--border-strong);
  border-bottom: 1.5px solid var(--border-strong);
}

/* ── Étapes numérotées (case 40 px, trait 1,5 px) ────────────────────────── */
.page-feature .f-steps__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-7);
}

/* Trait vertical sous la case, jusqu'à l'étape suivante (pas sous la dernière). */
.page-feature .f-steps__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19.25px;
  top: 35px;
  bottom: 0;
  width: 1.5px;
  background: var(--border-strong);
}

.page-feature .f-steps__number {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  padding: var(--space-3) 0;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  color: var(--text-primary);
}

.page-feature .f-steps__step--active .f-steps__number {
  background: var(--bg-accent);
  border-color: var(--bg-accent);
  color: var(--text-on-accent);
}

.page-feature .f-steps__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 6px 0 var(--space-9);
}

.page-feature .f-steps__step:last-child .f-steps__content {
  padding-bottom: 0;
}

/* ── Points numérotés (64/120, colonnes séparées par un filet) ───────────── */
.page-feature .f-points {
  padding-block: var(--space-11);
}

.page-feature .f-points .f-section__inner {
  gap: var(--space-8);
}

.page-feature .f-points__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-8);
  border-left: 1px solid var(--border-default);
}

.page-feature .f-points__item:first-child {
  padding-left: 0;
  border-left: 0;
}

/* ── Tableau en carte (1,5 px border/strong, en-tête bg/subtle) ──────────── */
.page-feature .f-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-align: left;
}

.page-feature .f-table th,
.page-feature .f-table td {
  padding: 18px 0 18px var(--space-7);
  vertical-align: top;
  border-bottom: 1px solid var(--border-default);
  color: var(--text-primary);
}

.page-feature .f-table tr > :last-child {
  padding-right: var(--space-7);
}

.page-feature .f-table thead th {
  padding-block: 14px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.page-feature .f-table tbody tr:last-child > * {
  border-bottom: 0;
}

.page-feature .f-table td .tag {
  vertical-align: top;
}

.page-feature .f-table .f-table__row--critical > * {
  background: var(--critical-subtle);
}

/* ── Section sombre (brand/navy) : sur-titre sky, titre blanc, texte ink/300 */
.page-feature .f-dark .overline {
  color: var(--brand-sky);
}

.page-feature .f-dark .f-head .t-h2 {
  color: var(--text-on-accent);
}

.page-feature .f-dark .f-head__lead {
  color: var(--ink-300);
}

/* ── Liste éditoriale (repère, titre H3, texte 680 px), filets entre items ─ */
.page-feature .f-entries__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--border-default);
}

.page-feature .f-entries__item:first-child {
  padding-top: 0;
}

.page-feature .f-entries__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-feature .f-entries__text {
  max-width: 680px;
}

/* Ligne de tableau mise en avant (warning/subtle). */
.page-feature .f-table .f-table__row--warning > * {
  background: var(--warning-subtle);
}

/* Avertissement : Encadré pleine largeur collé à la section précédente. */
.page-feature .f-notice {
  padding-top: 0;
}

/* Bloc de code du héro : titre du fichier sur une ligne (Figma : nowrap). */
.page-feature .f-hero__visual .code-block__head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Figma : corps du bloc en pre-wrap (les longues lignes passent à la ligne
   sur mobile au lieu de défiler). */
.page-feature .f-hero__visual .code-block__body {
  white-space: pre-wrap;
}

/* Largeur du visuel du héro propre à chaque page. */
.page-feature--eol .f-hero__visual {
  width: 440px;
}

.page-feature--mcp .f-hero__visual {
  width: 480px;
}

/* Figma : cartes d'outils de 186,5 px de haut en première rangée. */
@media (min-width: 1200px) {
  .page-feature--mcp .f-cards__card {
    min-height: 186.5px;
  }
}

/* ── Tablette : grilles sur deux colonnes, visuel sous le texte ──────────── */
@media (max-width: 1199px) {
  .page-feature .f-hero__row--visual {
    flex-direction: column;
  }

  .page-feature .f-hero__visual {
    width: 100%;
    max-width: 460px;
  }

  .page-feature .f-timeline {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-8);
  }
}

@media (max-width: 1023px) {
  .page-feature .f-split {
    flex-direction: column;
    gap: var(--space-7);
  }

  .page-feature .f-split__aside,
  .page-feature .f-split__main {
    width: 100%;
  }

  .page-feature .f-stats__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-8);
  }

  .page-feature .f-stats__item:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .page-feature .f-cards--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Mobile (cadres 390) ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .page-feature .f-section__inner,
  .page-feature .f-section--tight .f-section__inner {
    gap: var(--space-8);
  }

  .page-feature .f-head {
    gap: var(--space-4);
  }

  /* Héro : 40/20/48, texte à 20 px d'écart, visuel dessous à 24 px. */
  .page-feature .f-hero {
    padding-block: var(--space-9) var(--space-10);
  }

  .page-feature .f-hero__row {
    flex-direction: column;
    gap: var(--space-7);
  }

  .page-feature .f-hero__text {
    gap: var(--space-6);
  }

  .page-feature .f-hero__visual {
    max-width: none;
  }

  /* Boutons empilés, pleine largeur, centrés, Taille M. */
  .page-feature .f-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    width: 100%;
  }

  .page-feature .f-actions .btn {
    justify-content: center;
    padding: 10px var(--space-5);
    font-size: 15px;
    line-height: 20px;
    letter-spacing: 0;
  }

  .page-feature .f-actions .btn--secondary {
    padding-block: 10px;
  }

  /* Frise verticale : filet gauche 2 px, étapes 0/0/28/24. */
  .page-feature .f-timeline {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    border-left: 2px solid var(--border-strong);
  }

  .page-feature .f-timeline__step {
    border-top: 0;
    padding: 0 0 28px var(--space-7);
  }

  .page-feature .f-timeline__step::before {
    left: -7px;
    top: 2px;
  }

  /* Comparatif empilé : 24/20, titres H4, lignes Body/S. */
  .page-feature .f-compare {
    grid-auto-flow: row;
  }

  .page-feature .f-compare__col {
    padding: var(--space-7) var(--space-6);
  }

  .page-feature .f-compare__col + .f-compare__col {
    border-left: 0;
    border-top: 1px solid var(--border-default);
  }

  .page-feature .f-compare__title {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }

  .page-feature .f-compare__line {
    font-size: 15px;
    line-height: 23px;
  }


  /* Chiffres : 48/20, empilés à 24 px, sans filet vertical, chiffre 40/44. */
  .page-feature .f-stats {
    padding-block: var(--space-10);
  }

  .page-feature .f-stats__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-7);
  }

  .page-feature .f-stats__item,
  .page-feature .f-stats__item:nth-child(odd) {
    padding: 0;
    border-left: 0;
  }

  /* Cartes : une colonne, padding 20, titres H4. */
  .page-feature .f-cards,
  .page-feature .f-cards--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-feature .f-cards__card {
    padding: var(--space-6);
  }

  .page-feature .f-cards__title {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }

  /* Étapes : case 32 px, 16 px d'écart, contenu pb 32, H4 + Body/S. */
  .page-feature .f-steps__step {
    gap: var(--space-5);
  }

  .page-feature .f-steps__step:not(:last-child)::before {
    left: 15.25px;
  }

  .page-feature .f-steps__number {
    width: 32px;
  }

  .page-feature .f-steps__content {
    padding-bottom: var(--space-8);
  }

  .page-feature .f-steps__title {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }

  .page-feature .f-steps__text,
  .page-feature .f-head__lead {
    font-size: 15px;
    line-height: 23px;
  }

  /* Points : 48/20, empilés à 24 px, filet haut entre deux, 40/44, H4, Body/S. */
  .page-feature .f-points {
    padding-block: var(--space-10);
  }

  .page-feature .f-points__row {
    flex-direction: column;
    gap: var(--space-7);
  }

  .page-feature .f-points__item {
    padding: 0;
    border-left: 0;
  }

  .page-feature .f-points__item + .f-points__item {
    padding-top: var(--space-7);
    border-top: 1px solid var(--border-default);
  }

  .page-feature .f-points__title {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }

  .page-feature .f-points__text {
    font-size: 15px;
    line-height: 23px;
  }

  /* Tableau → une carte par ligne (bordure 1 px), 12 px d'écart. */
  .page-feature .f-table,
  .page-feature .f-table tbody,
  .page-feature .f-table tr,
  .page-feature .f-table th,
  .page-feature .f-table td {
    display: block;
  }

  .page-feature .f-table {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .page-feature .f-table thead {
    display: none;
  }

  .page-feature .f-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .page-feature .f-table tr {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
  }

  .page-feature .f-table tbody tr > *,
  .page-feature .f-table tbody tr:last-child > * {
    width: auto !important;
    padding: 10px var(--space-5);
    border-bottom: 0;
  }

  .page-feature .f-table tbody tr > .f-table__title,
  .page-feature .f-table tbody tr:last-child > .f-table__title {
    padding-block: 14px;
    border-bottom: 1px solid var(--border-default);
  }

  .page-feature .f-table td {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .page-feature .f-table td::before {
    content: attr(data-label);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .page-feature .f-dark .f-head__lead {
    font-size: 15px;
    line-height: 23px;
  }

  .page-feature--eol .f-hero__visual,
  .page-feature--mcp .f-hero__visual {
    width: 100%;
  }

  .page-feature .f-entries__item {
    padding-block: var(--space-7);
  }

  .page-feature .f-entries__title {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: -0.005em;
  }

  .page-feature .f-entries__text {
    font-size: 15px;
    line-height: 23px;
  }

  .page-feature .f-table .f-table__row--warning {
    background: var(--warning-subtle);
  }

  .page-feature .f-table .f-table__row--critical {
    background: var(--critical-subtle);
  }

  .page-feature .f-table td .tag {
    align-self: flex-start;
  }

  .page-feature .f-notice {
    padding-top: 0;
  }

  /* Appel final : 64/20, aligné à gauche. */
  .page-feature .f-final {
    padding-block: var(--space-11);
  }

  .page-feature .f-final__inner {
    align-items: flex-start;
    text-align: left;
  }
}