/* Site vitrine Dossero (phase 11) — mise en page propre au site.
   Les jetons, la typographie et les composants (.btn, .tag, .card, .field, .input, .table) viennent
   de /styles/broadsheet.css et /styles/broadsheet-sans.css, copies octet pour octet de
   packages/ui/src/styles ; <html data-espace="bureau"> applique la charte D (papier chaud, cartes
   blanches, cyan foncé pour le texte cliquable). Ce fichier ne lit que des jetons ; les quatre
   jetons « site » ci-dessous sont propres au site. */

:root {
  --site-largeur: 1120px;
  --site-texte: 64ch;
  --site-section: calc(var(--space-8) * 2);
  --site-titre: 44px;
  --site-entete: calc(var(--space-8) * 1.8);
}
@media (max-width: 720px) {
  :root { --site-section: var(--space-8); --site-titre: var(--text-3xl); }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { line-height: 1.55; }
h1.titre-site { font-size: var(--site-titre); line-height: 1.12; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-lg); }
.muted { color: var(--color-text-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-2); top: calc(var(--space-8) * -2); background: var(--color-surface); padding: var(--space-2) var(--space-3); z-index: 10; }
.skip:focus { top: var(--space-2); }
.btn i { font-size: 1.25em; }
.btn-secondary { background: var(--color-surface); }

/* Conteneur */
.wrap { width: min(var(--site-largeur), 100% - 2 * var(--space-4)); margin-inline: auto; }
.section { padding-block: var(--site-section); }
.section + .section { border-top: 1px solid var(--color-divider); }
.section-alt { background: var(--color-surface); }
.kicker { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--site-texte); }
.intro { max-width: var(--site-texte); margin-bottom: var(--space-8); }

.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Cartes — .card du système, bordure de la charte D */
.card { padding: var(--space-4); }
.section-alt .card { background: var(--color-bg); }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--color-text-muted); }
.card > i { font-size: 32px; color: var(--color-accent); }
.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* En-tête */
.site-header { background: var(--color-bg); border-bottom: 1px solid var(--color-divider); position: sticky; top: 0; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-4); min-height: calc(var(--space-8) * 1.8); }
.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; align-items: center; gap: var(--space-1); }
.nav a { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); padding: var(--space-2) var(--space-2); min-height: var(--touch-min); display: inline-flex; align-items: center; border-radius: var(--radius-md); }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-link); }
.nav a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--color-accent); }
.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions .btn-primary { min-height: var(--touch-action); padding: var(--space-2) var(--space-4); font-size: var(--text-base); }
.menu-mobile { display: none; }
@media (max-width: 960px) {
  .nav, .header-actions .btn-ghost { display: none; }
  .menu-mobile { display: block; }
  .menu-mobile summary { list-style: none; cursor: pointer; min-height: var(--touch-min); min-width: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); color: var(--color-link); font-weight: 600; border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding-inline: var(--space-2); background: var(--color-surface); }
  .menu-mobile summary::-webkit-details-marker { display: none; }
  .menu-mobile nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface); border-bottom: 1px solid var(--color-divider); padding: var(--space-2) var(--space-4) var(--space-4); display: flex; flex-direction: column; }
  .menu-mobile nav a { color: var(--color-text); text-decoration: none; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); min-height: var(--touch-min); }
  .menu-mobile nav a:last-child { border-bottom: 0; color: var(--color-link); }
}
@media (max-width: 520px) { .header-actions .btn-primary { display: none; } }

/* Accueil — haut de page */
.hero { padding-block: var(--site-section); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero .lead { margin-bottom: var(--space-6); }
.hero-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.hero-note span { display: inline-flex; align-items: center; gap: var(--space-1); }
.hero-note i { color: var(--color-accent); font-size: 18px; }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; } }

/* Aperçu du produit, dessiné en HTML (pas de capture : l'interface change de nom) */
.apercu { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; font-size: var(--text-xs); }
.apercu-tete { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.apercu-tete strong { font-size: var(--text-sm); }
.apercu-tete .tag { margin-left: auto; }
.apercu-ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr); gap: var(--space-1) var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.apercu-ligne:last-child { border-bottom: 0; }
.apercu-ligne .nom { font-weight: 600; font-size: var(--text-sm); }
.apercu-ligne .etape { font-weight: 600; color: var(--color-text); }
.apercu-ligne .pourquoi, .apercu-ligne .meta { color: var(--color-text-muted); }
.apercu-ligne.retard { box-shadow: inset 3px 0 0 var(--color-accent-2); }
.apercu-legende { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
@media (max-width: 520px) { .apercu-ligne { grid-template-columns: 1fr; } }

/* Parcours d'un dossier */
.parcours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); counter-reset: etape; }
.parcours li { counter-increment: etape; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.parcours li::before { content: counter(etape); width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 600; font-size: var(--text-sm); background: var(--color-accent-100); color: var(--color-accent-800); border: 1px solid var(--color-accent); font-variant-numeric: tabular-nums; }
.parcours h3 { margin: 0; }
.parcours p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.parcours .qui { font-size: var(--text-xs); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--color-divider); color: var(--color-text-muted); }
@media (max-width: 1080px) { .parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .parcours { grid-template-columns: 1fr; } }

/* Listes à icônes */
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.liste i { font-size: 26px; color: var(--color-accent); }
.liste strong { display: block; }
.liste span { color: var(--color-text-muted); }
.colonne { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: var(--space-6); }
.colonne h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); margin-bottom: var(--space-4); }
.colonne h3 i { color: var(--color-accent); font-size: 30px; }

/* Encadré d'action — accent-100, bordure cyan, une seule par page */
.encadre-action { background: var(--color-accent-100); border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; }
.encadre-action h2 { margin-bottom: var(--space-2); }
.encadre-action p { margin: 0; color: var(--color-text); }
@media (max-width: 720px) { .encadre-action { grid-template-columns: 1fr; padding: var(--space-6) var(--space-4); } .encadre-action .btn { width: 100%; } }

/* Avis « à définir » — ambre : information manquante */
.a-definir { display: flex; gap: var(--space-2); align-items: flex-start; background: var(--color-attention-100); border: 1px solid var(--color-attention); color: var(--color-attention-700); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); }
.a-definir i { font-size: 22px; flex: none; }

/* Questions fréquentes — <details> natif */
.faq { border-top: 1px solid var(--color-divider); max-width: calc(var(--site-texte) + var(--space-8) * 4); }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; padding: var(--space-4) 0; font-weight: 600; min-height: var(--touch-min); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--color-accent); font-size: 22px; flex: none; transition: transform .15s; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq details > div { padding-bottom: var(--space-4); color: var(--color-text-muted); max-width: var(--site-texte); }

/* Tarifs */
.offre { position: relative; }
.offre .prix { font-size: var(--text-3xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--color-text); }
.offre .prix small { font-size: var(--text-sm); font-weight: 400; color: var(--color-text-muted); }
.offre ul { margin: 0; padding-left: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.offre .btn { margin-top: auto; }
.offre-hypothese { font-size: var(--text-xs); color: var(--color-attention-700); }
.table-wrap { overflow-x: auto; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { text-align: left; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 600; padding: var(--space-3); border-bottom: 1px solid var(--color-divider); height: 36px; }
.table td { padding: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td i { color: var(--color-accent); font-size: 20px; vertical-align: -4px; }

/* Étapes numérotées verticales */
.etapes { list-style: none; margin: 0; padding: 0; counter-reset: e; display: flex; flex-direction: column; gap: var(--space-4); }
.etapes li { counter-increment: e; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); }
.etapes li::before { content: counter(e); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; background: var(--color-surface); border: 1px solid var(--color-accent); color: var(--color-accent-800); }
.etapes strong { display: block; }
.etapes span { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Formulaire — .field + .input du système ; seules la grille et l'aide sont propres au site */
.form { display: grid; gap: var(--space-4); }
.form .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 720px) { .form .ligne { grid-template-columns: 1fr; } }
.field > label { font-size: var(--text-sm); color: var(--color-text); }
.field .aide { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.obligatoire { color: var(--color-text-muted); font-weight: 400; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--color-divider); padding-block: var(--space-8); font-size: var(--text-sm); }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-6); }
.site-footer h4 { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.site-footer li a { display: inline-flex; min-height: var(--touch-min); align-items: center; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.site-footer .bas { grid-column: 1 / -1; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); color: var(--color-text-muted); font-size: var(--text-xs); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
@media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } .site-footer .wrap > :first-child { grid-column: 1 / -1; } }

/* En-tête de page intérieure */
.page-tete { padding-block: var(--site-section) var(--space-8); }
.page-tete .lead { margin: 0; }

.site-footer .pied-titre { font-size: var(--text-sm); margin-bottom: var(--space-2); }
.site-footer .pied-logo { height: 30px; width: auto; margin-bottom: var(--space-3); }

/* Avis de projet (pages légales non validées) — ambre : information manquante */
.avis-projet { margin-bottom: var(--space-6); }
.prose { max-width: var(--site-texte); }
.prose h2 { font-size: var(--text-xl); margin-top: var(--space-8); }
.prose h3 { margin-top: var(--space-6); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-1); }
.a-completer { background: var(--color-attention-100); color: var(--color-attention-700); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
.marge-haut { margin-top: var(--space-6); }
.centre { align-items: center; }
.apercu-icone { color: var(--color-accent); font-size: var(--text-xl); }
.apercu .tag { margin-top: var(--space-1); }
.puces { margin: 0; padding-left: var(--space-4); color: var(--color-text-muted); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.section-sans-haut { padding-top: 0; }
.marge-bas { margin-bottom: var(--space-6); }
.offre .kicker { margin: 0; }
.offre-avant { border-color: var(--color-accent); }
.offre-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.offre-actions .btn { margin-top: 0; }
.titre-colonne { font-size: var(--text-xl); }
.grille-contact { align-items: start; }
.form .aide { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }
.a-definir-info { background: var(--color-accent-100); border: 1px solid var(--color-accent); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin: 0; }

/* Démonstrations animées (styles propres dans demos.css) : leur place dans les pages. */
.atouts { display: flex; flex-direction: column; gap: calc(var(--space-8) * 1.5); margin-top: calc(var(--space-8) * 1.5); }
.atout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-8); align-items: center; }
.atout:nth-child(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.atout:nth-child(even) > :first-child { order: 1; }
.atout h3 { font-size: var(--text-2xl); margin: 0 0 var(--space-2); }
.atout p { color: var(--color-text-muted); margin: 0; max-width: var(--site-texte); }
.atout .kicker { margin-bottom: var(--space-2); }
.demo-seule { margin-top: var(--space-8); }
.demos-paire { margin-top: var(--space-8); align-items: start; }
@media (max-width: 960px) { .atout { grid-template-columns: 1fr; gap: var(--space-4); } .atout:nth-child(even) > :first-child { order: 0; } .demos-paire { grid-template-columns: 1fr; } }