/* Le site public : l'en-tête, le pied de page et les pages légales.
 *
 * Deux règles tiennent le fichier (14-homepage-plan.md) :
 *
 * - aucune couleur écrite à la main — la palette de la maquette est déjà dans
 *   tokens.css, et une teinte en dur est la première à diverger ;
 * - rien sous 13 px pour un texte destiné à être lu, et --ink-2 plutôt que
 *   --muted dès qu'il y a une phrase : le gris clair de la maquette passe sous
 *   4,5:1 sur fond clair (§8.4).
 */

/* --- Le lien d'évitement ---------------------------------------------------- */

/* Premier élément au clavier, invisible tant qu'il n'a pas le focus. Il n'est
   pas caché par `display: none`, qui le retirerait aussi de la tabulation. */
.skip-link {
  position:      absolute;
  top:           -60px;
  left:          12px;
  z-index:       100;
  padding:       10px 16px;
  border-radius: var(--r-ctl);
  background:    var(--navy);
  color:         #fff;
  font-size:     var(--t-sub);
  text-decoration: none;
  transition:    top 120ms ease;
}

.skip-link:focus {
  top: 12px;
}

/* --- L'en-tête -------------------------------------------------------------- */

.site-header {
  position:        sticky;
  top:             0;
  z-index:         50;
  border-bottom:   1px solid var(--line);
  background:      color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
}

.site-header-inner,
.site-footer-inner {
  display:         flex;
  align-items:     center;
  gap:             18px;
  max-width:       1120px;
  margin:          0 auto;
  padding:         12px 20px;
  flex-wrap:       wrap;
}

.site-header-inner {
  justify-content: space-between;
}

.site-brand {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  color:           var(--navy);
  text-decoration: none;
}

/* Le logotype à côté de la marque. Il manquait : `.brand-word` n'était stylé
   que sous `.sidebar-brand` et `.auth-brand`, si bien que « Locafolio »
   sortait ici en texte courant, sans sa graisse ni le vert de « folio ». */
.site-brand .brand-word {
  font-family:    var(--font-title);
  font-size:      24px;
  font-weight:    700;
  letter-spacing: -0.01em;
  line-height:    1;
}

.site-brand .brand-word span {
  color: var(--teal-dark);
}


.site-nav {
  display:     flex;
  align-items: center;
  gap:         18px;
  flex-wrap:   wrap;
}

.site-nav a {
  color:           var(--ink-2);
  font-size:       var(--t-sub);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav .site-nav-cta {
  padding:       7px 15px;
  border-radius: var(--r-ctl);
  background:    var(--navy);
  color:         #fff;
}

.site-nav .site-nav-cta:hover {
  background: var(--navy-hover);
  color:      #fff;
}

/* Sur un téléphone, la navigation se réduit aux deux boutons (§4.1) : les liens
   de sections sont marqués et disparaissent, plutôt que de passer à la ligne. */
@media (max-width: 720px) {
  .site-nav-section {
    display: none;
  }
}

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

.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
}

.site-footer-inner {
  justify-content: space-between;
}

.site-footer-links {
  display:   flex;
  gap:       18px;
  flex-wrap: wrap;
}

.site-footer-links a {
  color:           var(--ink-2);
  font-size:       var(--t-sub);
  text-decoration: none;
}

.site-footer-links a:hover {
  color:           var(--ink);
  text-decoration: underline;
}

/* La marque et l'année sur une ligne : la signature du pied de page. */
.site-footer-note {
  display:        flex;
  align-items:    center;
  gap:            10px;
  margin:         0;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.08em;
}

.site-footer-note a {
  display: inline-flex;
}

/* --- Les pages légales ------------------------------------------------------ */

/* Une colonne étroite : ces pages se lisent, elles ne se survolent pas, et
   une ligne de plus de 75 caractères se relit mal. */
.legal-page {
  max-width: 74ch;
  margin:    0 auto;
  padding:   36px 20px 0;
  color:     var(--ink-2);
}

.legal-page h1 {
  margin-bottom: 4px;
}

.legal-page h2 {
  margin-top:    38px;
  padding-top:   18px;
  border-top:    1px solid var(--line);
  font-size:     var(--t-h3);
}

.legal-page h3 {
  margin-top: 26px;
  font-size:  var(--t-sub);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:      var(--muted);
}

.legal-page h4 {
  margin: 0 0 6px;
}

.legal-page p,
.legal-page li {
  line-height: 1.65;
}

.legal-page a {
  color: var(--ink);
}

.legal-updated {
  margin:    0 0 22px;
  color:     var(--muted);
  font-size: var(--t-small);
}

/* Ce qui reste à décider, dit franchement plutôt qu'inventé (§11). */
.legal-pending {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  padding:       11px 14px;
  border:        1px dashed var(--warn-accent);
  border-radius: var(--r-card);
  background:    var(--warn-bg);
  color:         var(--warn);
  font-size:     var(--t-sub);
}

.legal-toc {
  display:       flex;
  gap:           16px;
  margin:        22px 0;
  padding:       12px 14px;
  border-radius: var(--r-card);
  background:    var(--surface-alt);
  font-size:     var(--t-sub);
  flex-wrap:     wrap;
}

/* Les faits obligatoires en deux colonnes : ils se vérifient d'un coup d'œil,
   ce qu'un paragraphe ne permet pas. */
.legal-facts {
  display:               grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap:                   6px 18px;
  margin:                16px 0 0;
}

.legal-facts dt {
  color:     var(--muted);
  font-size: var(--t-sub);
}

.legal-facts dd {
  margin: 0;
  color:  var(--ink);
}

/* Les tableaux de ces pages se suffisent à eux-mêmes : `tables.css` pèse douze
   kilo-octets pour le grand livre et l'échéancier, et le site n'a que ces
   trois-là. */
.legal-table {
  width:           100%;
  margin-top:      16px;
  border-collapse: collapse;
  font-size:       var(--t-sub);
  text-align:      left;
}

.legal-table th,
.legal-table td {
  padding:       9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal-table th {
  color:      var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.legal-table td {
  color: var(--ink-2);
}

.legal-form {
  margin:        20px 0;
  padding:       16px 18px;
  border:        1px solid var(--line-strong);
  border-radius: var(--r-card);
  background:    var(--surface-soft);
  font-size:     var(--t-sub);
}

@media (max-width: 560px) {
  .legal-facts {
    grid-template-columns: 1fr;
  }
}

/* --- La page longue --------------------------------------------------------- */

/* Les sections tiennent leur propre largeur : certaines saignent d'un bord à
   l'autre (le bandeau, le bloc marine), les autres non. */
.landing-main {
  padding: 0;
}

/* Seulement l'axe horizontal : un `padding` raccourci ici l'emporterait sur le
   `padding-top` de chaque section — un sélecteur classe + élément pèse plus
   qu'une classe seule — et les écraserait sans rien dire. C'est exactement ce
   qui avait collé le bandeau des documents à ses deux traits. */
.landing-main section {
  max-width:      1120px;
  margin:         0 auto;
  padding-inline: 20px;
}

/* Les bandes qui saignent d'un bord à l'autre. **Même poids de sélecteur** que
   la règle ci-dessus, sinon elle l'emporte et la bande reprend la largeur du
   texte, fond de page visible sur les côtés. C'est la faute que les
   `!important` cachaient. */
.landing-main section.full-bleed {
  max-width:      none;
  padding-inline: 0;
}

.section-eyebrow {
  margin:         0 0 8px;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Le héros --------------------------------------------------------------- */

.hero {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap:                   48px;
  align-items:           center;
  padding-block:         64px 24px;
}

.hero-text {
  display:        flex;
  flex-direction: column;
  gap:            22px;
  min-width:      0;
}

.hero-eyebrow {
  display:        inline-flex;
  align-self:     flex-start;
  align-items:    center;
  gap:            9px;
  margin:         0;
  padding:        7px 14px;
  border:         1px solid var(--line-strong);
  border-radius:  var(--r-pill);
  background:     var(--surface);
  color:          var(--ink);
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hero-dot {
  width:         7px;
  height:        7px;
  border-radius: var(--r-pill);
  background:    var(--teal);
  flex:          0 0 auto;
}

.hero h1 {
  margin:         0;
  font-size:      clamp(38px, 5vw, 66px);
  line-height:    1;
  letter-spacing: -0.02em;
  text-wrap:      balance;
}

.hero-accent {
  color: var(--teal-dark);
}

.hero-lead {
  max-width:   46ch;
  margin:      0;
  color:       var(--ink-2);
  font-size:   17px;
  line-height: 1.55;
}

.hero-actions {
  display:   flex;
  gap:       12px;
  flex-wrap: wrap;
}

/* L'action secondaire du héros : un cadre, pas un aplat — le vert est déjà pris
   par ce qu'on veut vraiment qu'on clique. */
.button-outline {
  display:         inline-flex;
  align-items:     center;
  padding:         var(--pad-ctl);
  border:          1px solid var(--line-strong);
  border-radius:   var(--r-ctl);
  color:           var(--ink);
  font-size:       var(--t-body);
  font-weight:     500;
  text-decoration: none;
}

.button-outline:hover {
  border-color: var(--ink);
}

.hero-claims {
  display:        flex;
  gap:            20px;
  margin:         0;
  padding:        0;
  list-style:     none;
  color:          var(--ink-2);
  font-family:    var(--font-mono);
  font-size:      13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-wrap:      wrap;
}

.hero-side {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  min-width:      0;
}

/* --- Le visuel : un document, trois écritures ------------------------------- */

.scan-card {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  padding:        18px;
  border-radius:  14px;
  background:     var(--navy);
  box-shadow:     0 26px 60px -30px color-mix(in srgb, var(--navy) 60%, transparent);
}

.scan-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
}

.scan-label {
  color:          var(--side-meta);
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.scan-state {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  color:       var(--teal);
  font-family: var(--font-mono);
  font-size:   var(--t-small);
}

/* Pendant la bêta, le visuel montre ce qui vient : une pastille à la place du
   « Lecture terminée », pour qu'il ne se lise pas comme un résultat. */
.scan-state-soon {
  padding:        3px 10px;
  border:         1px solid color-mix(in srgb, var(--teal) 55%, transparent);
  border-radius:  999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scan-body {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
}

/* Le fac-similé : des traits, jamais un vrai document (§4.2). Les deux traits
   verts sont les lignes que la lecture a retenues. */
.scan-doc {
  display:        flex;
  flex-direction: column;
  gap:            7px;
  flex:           0 0 128px;
  padding:        13px 12px;
  border-radius:  8px;
  background:     var(--surface);
}

.scan-doc-title {
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scan-line {
  height:        6px;
  border-radius: 2px;
  background:    var(--line-strong);
}

.scan-line-a { width: 86%; }
.scan-line-b { width: 64%; }
.scan-line-c { width: 52%; }
.scan-line-d { width: 44%; }
.scan-line-read { background: var(--teal); width: 74%; }

.scan-doc-file {
  margin-top:  auto;
  padding-top: 8px;
  color:       var(--muted-2);
  font-family: var(--font-mono);
  font-size:   9px;
}

.scan-entries {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  flex:           1 1 190px;
  min-width:      0;
}

.scan-entry {
  padding:       10px 12px;
  border:        1px solid transparent;
  border-radius: 8px;
  background:    var(--surface);
}

/* Celle qui attend une décision : le pointillé dit qu'elle n'est pas écrite. */
.scan-entry-pending {
  border-color: var(--teal);
  border-style: dashed;
}

.scan-entry-head {
  display:         flex;
  justify-content: space-between;
  gap:             10px;
  font-size:       13px;
  font-weight:     600;
}

.scan-entry-head span:last-child {
  font-family:  var(--font-mono);
  white-space:  nowrap;
}

.scan-entry-meta {
  margin:    4px 0 0;
  color:     var(--muted);
  font-size: 12px;
}

.scan-foot {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding-top:     13px;
  border-top:      1px solid color-mix(in srgb, var(--surface) 14%, transparent);
  color:           var(--side-fg);
  font-size:       12.5px;
  flex-wrap:       wrap;
}

.scan-total {
  color:       #fff;
  font-family: var(--font-mono);
}

/* Trois faits vérifiables à la place des trois chiffres inventés (§1.1) — et
   dans le document, pas dans le visuel décoratif : ils se lisent. */
.hero-facts {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:                   10px;
  margin:                0;
  padding:               0;
  list-style:            none;
}

.hero-facts li {
  display:        flex;
  flex-direction: column;
  gap:            3px;
  padding:        13px 14px;
  border:         1px solid var(--line);
  border-radius:  10px;
  background:     var(--surface);
}

.hero-fact-title {
  font-family: var(--font-title);
  font-size:   17px;
  font-weight: 700;
  line-height: 1.15;
  color:       var(--ink);
}

.hero-fact-note {
  color:       var(--ink-2);
  font-size:   13px;
  line-height: 1.35;
}

/* --- Le bandeau des documents ----------------------------------------------- */

/* Une seule ligne, toujours : le bandeau ne passe jamais à la ligne, et les
   pastilles glissent latéralement quand l'écran est trop étroit — un rang de
   documents qui se casse en deux ne se lit plus comme une liste. */
.documents-band {
  display:       flex;
  align-items:   center;
  gap:           26px;
  margin-top:    42px;
  padding-block: 22px;
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap:     nowrap;
}

.documents-label {
  flex:           0 0 auto;
  margin:         0;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.documents-chips {
  display:       flex;
  gap:           10px;
  min-width:     0;
  margin:        0;
  padding:       0;
  list-style:    none;
  flex-wrap:     nowrap;
  overflow-x:    auto;
  scrollbar-width: none;
}

.documents-chips::-webkit-scrollbar {
  display: none;
}

.documents-chips li {
  flex:          0 0 auto;
  padding:       7px 14px;
  border:        1px solid var(--line);
  border-radius: var(--r-pill);
  background:    var(--surface);
  font-size:     13px;
  font-weight:   500;
  white-space:   nowrap;
}

/* Sur un téléphone, l'étiquette passe au-dessus et laisse toute la largeur aux
   pastilles, qui restent sur leur ligne. */
@media (max-width: 720px) {
  .documents-band {
    align-items:    flex-start;
    flex-direction: column;
    gap:            12px;
  }

  .documents-chips {
    width: 100%;
  }
}

/* --- Les trois gestes -------------------------------------------------------- */

.how {
  padding-block: 54px;
}

.how h2,
.cta h2 {
  margin:         0;
  font-size:      clamp(28px, 3.4vw, 42px);
  line-height:    1.05;
  letter-spacing: -0.015em;
}

.how-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap:                   16px;
  margin:                30px 0 0;
  padding:               0;
  list-style:            none;
}

.how-card {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding:        24px 22px;
  border:         1px solid var(--line);
  border-radius:  12px;
  background:     var(--surface);
}

.how-card h3 {
  margin:      0;
  font-family: var(--font-title);
  font-size:   23px;
  font-weight: 600;
  line-height: 1.1;
}

.how-card p {
  margin:      0;
  color:       var(--ink-2);
  font-size:   14.5px;
  line-height: 1.6;
}

.how-step {
  color:          var(--teal-dark);
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.14em;
}

/* La troisième carte porte la promesse qui décide : rien n'est écrit sans
   vous. Elle est en marine pour ça, et pour rien d'autre. */
.how-card-strong {
  border-color: var(--navy);
  background:   var(--navy);
  color:        #fff;
}

.how-card-strong p {
  color: var(--side-fg);
}

.how-card-strong .how-step {
  color: var(--teal);
}

/* Ce qui existe déjà, sous les trois gestes qui viendront (bêta). */
.how-meanwhile {
  max-width:   68ch;
  margin:      22px 0 0;
  color:       var(--ink-2);
  font-size:   14.5px;
  line-height: 1.6;
}

/* --- L'appel à l'action ------------------------------------------------------ */

.cta {
  padding-block: 64px 8px;
}

.cta-block {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             28px;
  padding:         clamp(28px, 4vw, 52px);
  border-radius:   16px;
  background:      var(--navy);
  color:           #fff;
  flex-wrap:       wrap;
}

.cta-text {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  max-width:      36ch;
  min-width:      0;
}

.cta-text p {
  margin:      0;
  color:       var(--side-fg);
  font-size:   16px;
  line-height: 1.55;
}

/* --- Pilotage ---------------------------------------------------------------- */

/* La section saigne d'un bord à l'autre, sur fond blanc : elle coupe la page en
   deux et marque le passage de « comment ça marche » à « ce que ça donne ». */
.product {
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:    var(--surface);
}

.product-inner {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap:                   48px;
  align-items:           center;
  max-width:             1120px;
  margin:                0 auto;
  padding:               64px 20px;
}

.product-text {
  display:        flex;
  flex-direction: column;
  gap:            18px;
  min-width:      0;
}

.product h2 {
  margin:         0;
  font-size:      clamp(28px, 3.4vw, 42px);
  line-height:    1.05;
  letter-spacing: -0.015em;
}

.product-lead {
  max-width:   48ch;
  margin:      0;
  color:       var(--ink-2);
  font-size:   16.5px;
  line-height: 1.6;
}

.product-points {
  display:        flex;
  flex-direction: column;
  gap:            13px;
  margin:         0;
  padding:        0;
  list-style:     none;
}

.product-points li {
  display:     flex;
  gap:         12px;
  align-items: flex-start;
  font-size:   14.5px;
  line-height: 1.5;
  color:       var(--ink-2);
}

.product-points svg {
  flex:       0 0 19px;
  margin-top: 2px;
  color:      var(--teal-dark);
}

.product-points strong {
  color:       var(--ink);
  font-weight: 600;
}

/* --- Le mini-tableau de bord -------------------------------------------------- */

.mini-dashboard {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  min-width:      0;
  padding:        18px;
  border:         1px solid var(--line);
  border-radius:  14px;
  background:     var(--bg);
}

.mini-head {
  display:     flex;
  align-items: baseline;
  gap:         12px;
  flex-wrap:   wrap;
}

.mini-label {
  margin:         0;
  color:          var(--muted);
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mini-total {
  margin:      0;
  font-family: var(--font-title);
  font-size:   34px;
  font-weight: 700;
  line-height: 1.05;
  color:       var(--ink);
}

.mini-chart {
  display:     flex;
  align-items: flex-end;
  gap:         7px;
  height:      112px;
}

.mini-bar {
  flex:          1;
  border-radius: 3px 3px 0 0;
}

/* Les mois passés en gris, les derniers en marine, le mois courant en vert :
   la même lecture que le tableau de bord de l'application. */
.mini-bar-past  { background: var(--line-strong); }
.mini-bar-solid { background: var(--navy); }
.mini-bar-live  { background: var(--teal); }

.mini-rows {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin:         0;
  padding:        0;
  list-style:     none;
}

.mini-rows li {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   2px 12px;
  align-items:           center;
  padding:               11px 13px;
  border:                1px solid var(--line-soft);
  border-radius:         9px;
  background:            var(--surface);
}

.mini-row-name {
  font-size:   14px;
  font-weight: 600;
  color:       var(--ink);
}

.mini-row-note {
  grid-row:    2;
  color:       var(--muted);
  font-family: var(--font-mono);
  font-size:   11.5px;
}

.mini-row-amount {
  grid-row:    1 / span 2;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size:   14px;
}

/* --- Vos données ------------------------------------------------------------- */

.data-promises {
  padding-block: 60px 0;
}

.data-promises h2 {
  margin:         0 0 26px;
  font-size:      clamp(28px, 3.4vw, 42px);
  line-height:    1.05;
  letter-spacing: -0.015em;
}

.promise-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap:                   16px;
  margin:                0;
  padding:               0;
  list-style:            none;
}

.promise-card {
  display:        flex;
  flex-direction: column;
  gap:            9px;
  padding:        22px 20px;
  border:         1px solid var(--line);
  border-radius:  12px;
  background:     var(--surface);
}

.promise-card svg {
  color: var(--teal-dark);
}

.promise-card h3 {
  margin:      0;
  font-family: var(--font-title);
  font-size:   20px;
  font-weight: 600;
  line-height: 1.15;
}

.promise-card p {
  margin:      0;
  color:       var(--ink-2);
  font-size:   14.5px;
  line-height: 1.55;
}

.promise-link {
  margin:    20px 0 0;
  font-size: var(--t-body);
}

.promise-link a {
  color:         var(--ink);
  border-bottom: 2px solid var(--teal);
  padding-bottom: 2px;
  text-decoration: none;
}

/* --- La démonstration --------------------------------------------------------- */

.demo {
  padding-block: 56px 64px;
}

/* La vidéo à la largeur de la section. Les attributs width et height du
   <video> donnent son ratio (2,06:1, celui du montage) : la place est réservée
   avant le moindre chargement. Le fond marine se voit le temps que l'aperçu
   arrive. */
.demo h2 {
  margin:         0 0 24px;
  font-size:      clamp(28px, 3.4vw, 42px);
  line-height:    1.05;
  letter-spacing: -0.015em;
}

.demo-player {
  display:       block;
  width:         100%;
  height:        auto;
  border:        1px solid var(--line);
  border-radius: 16px;
  background:    var(--navy);
  box-shadow:    0 26px 60px -34px color-mix(in srgb, var(--navy) 55%, transparent);
}

/* --- Tarifs ------------------------------------------------------------------ */

/* Comme « Pilotage », la section saigne d'un bord à l'autre sur fond blanc :
   c'est le moment où la page demande quelque chose, et il se voit. */
.pricing {
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:    var(--surface);
}

.pricing-inner {
  display:        flex;
  flex-direction: column;
  gap:            26px;
  max-width:      1120px;
  margin:         0 auto;
  padding:        64px 20px;
}

.pricing-head h2 {
  margin:         0;
  font-size:      clamp(28px, 3.4vw, 42px);
  line-height:    1.05;
  letter-spacing: -0.015em;
}

/* Sur le site, les cartes sont posées sur du blanc : elles reprennent le fond
   doux pour se détacher, et la mise en avant garde son trait vert. */
.pricing .plan-card {
  background: var(--surface-soft);
}

.pricing .plan-picker {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.pricing .plan-actions a {
  flex:            1 1 auto;
  justify-content: center;
  text-decoration: none;
}

/* Elle rattrape ceux qui n'osent pas encore, sans faire concurrence aux
   cartes : pas de fond de couleur, un simple encadré en pointillé. */
.trial-offer {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            10px;
  padding:        22px 24px;
  border:         1px dashed var(--line-strong);
  border-radius:  var(--r-card);
  background:     var(--bg);
}

.trial-offer h3 {
  margin:      0;
  font-family: var(--font-title);
  font-size:   22px;
  font-weight: 700;
}

.trial-offer p {
  max-width:   68ch;
  margin:      0;
  color:       var(--ink-2);
  font-size:   14.5px;
  line-height: 1.6;
}

/* La carte unique de la bêta : la largeur d'une carte de la grille, pas celle
   de la page — une offre étirée sur 1 100 px se lit comme un bandeau. */
.beta-offer {
  width:     100%;
  max-width: 420px;
}

.beta-offer .plan-actions a {
  flex: 1 1 auto;
}

.plan-features .plan-feature-soon {
  color: var(--muted);
}

.pricing-vat {
  margin:    0;
  color:     var(--muted);
  font-size: var(--t-sub);
}

/* --- L'espace d'aide --------------------------------------------------------- */

.help-page {
  max-width: 72ch;
  margin:    0 auto;
  padding:   36px 20px 64px;
}

.help-lead {
  margin:      0 0 30px;
  color:       var(--ink-2);
  font-size:   var(--t-lead);
  line-height: 1.6;
}

/* Le sommaire numéroté : l'ordre est l'information — c'est le chemin d'un
   nouvel arrivant, pas une liste de sujets. */
.help-summary {
  margin:     0;
  padding:    0 0 0 2px;
  list-style: none;
  counter-reset: help;
}

.help-summary li {
  counter-increment: help;
  border-top:        1px solid var(--line);
}

.help-summary li:last-child {
  border-bottom: 1px solid var(--line);
}

.help-summary a {
  display:         grid;
  grid-template-columns: 2.4rem 1fr;
  gap:             4px 12px;
  padding:         16px 2px;
  color:           var(--ink);
  text-decoration: none;
}

.help-summary a::before {
  content:     counter(help, decimal-leading-zero);
  grid-row:    1 / span 2;
  color:       var(--muted);
  font-family: var(--font-mono);
  font-size:   var(--t-sub);
  padding-top: 3px;
}

.help-summary-title {
  font-family: var(--font-title);
  font-size:   var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
}

.help-summary-note {
  color:       var(--ink-2);
  font-size:   var(--t-body);
  line-height: 1.55;
}

.help-summary a:hover .help-summary-title {
  color: var(--teal-dark);
}

.help-contact,
.help-breadcrumb {
  margin:    24px 0 0;
  color:     var(--ink-2);
  font-size: var(--t-body);
}

.help-breadcrumb {
  margin:         0 0 10px;
  font-family:    var(--font-mono);
  font-size:      var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-updated {
  margin:    0 0 28px;
  color:     var(--muted);
  font-size: var(--t-sub);
}

/* Le corps rendu depuis le Markdown : aucune classe à poser, le contenu vient
   d'un fichier. Les sélecteurs visent donc les éléments eux-mêmes, sous la
   classe de la page. */
.help-article h2 {
  margin:      36px 0 10px;
  padding-top: 16px;
  border-top:  1px solid var(--line);
  font-size:   var(--t-h2);
}

.help-article p,
.help-article li {
  color:       var(--ink-2);
  font-size:   var(--t-lead);
  line-height: 1.7;
}

.help-article ul,
.help-article ol {
  padding-left: 20px;
}

.help-article li {
  margin-bottom: 8px;
}

.help-article strong {
  color: var(--ink);
}

.help-article a {
  color: var(--ink);
}

.help-article table {
  width:           100%;
  margin:          20px 0;
  border-collapse: collapse;
  font-size:       var(--t-body);
}

.help-article th,
.help-article td {
  padding:       10px 12px;
  border-bottom: 1px solid var(--line);
  text-align:    left;
}

.help-article th {
  color:          var(--muted);
  font-size:      var(--t-small);
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-article code {
  padding:       2px 5px;
  border-radius: var(--r-badge);
  background:    var(--surface-alt);
  font-family:   var(--font-mono);
  font-size:     0.9em;
}

.help-feedback {
  margin:        40px 0 0;
  padding:       20px 22px;
  border:        1px dashed var(--line-strong);
  border-radius: var(--r-card);
}

.help-feedback p {
  margin:      0;
  color:       var(--ink-2);
  font-size:   var(--t-body);
  line-height: 1.6;
}

.help-feedback p + p {
  margin-top: 6px;
}

/* --- Le contact -------------------------------------------------------------- */

.contact-page {
  max-width: 62ch;
  margin:    0 auto;
  padding:   36px 20px 64px;
}

.contact-page h1 {
  margin-bottom: 8px;
}

.contact-lead {
  margin:      0 0 28px;
  color:       var(--ink-2);
  font-size:   var(--t-lead);
  line-height: 1.6;
}

.contact-page textarea {
  min-height: 160px;
  resize:     vertical;
}

/* Le champ piège (§6) : hors de l'écran, hors du flux, et hors de la tabulation
   par son `tabindex`. `display: none` serait plus court et plus mauvais — un
   robot qui lit le CSS saute ce qui est masqué, et le piège ne prendrait plus
   personne. */
.trap-row {
  position: absolute;
  left:     -10000px;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

.contact-privacy {
  margin:      28px 0 0;
  padding-top: 18px;
  border-top:  1px solid var(--line);
  color:       var(--ink-2);
  font-size:   var(--t-sub);
  line-height: 1.6;
}

.contact-privacy a {
  color: var(--ink);
}

/* --- Les questions fréquentes ------------------------------------------------ */

.faq {
  padding-block: 64px 0;
}

.faq h2 {
  margin:         0 0 26px;
  font-size:      clamp(28px, 3.4vw, 42px);
  line-height:    1.05;
  letter-spacing: -0.015em;
}

/* Une seule colonne, et une largeur de lecture : une réponse de trois lignes
   étalée sur 1120 px se relit deux fois. */
.faq-list {
  max-width:     78ch;
  border-top:    1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

/* Le triangle par défaut du navigateur disparaît au profit du chevron, qui
   tourne — les deux à la fois feraient deux marqueurs pour une seule question. */
.faq-item summary {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             16px;
  padding:         18px 2px;
  cursor:          pointer;
  color:           var(--ink);
  font-family:     var(--font-title);
  font-size:       var(--t-h3);
  font-weight:     600;
  line-height:     1.25;
  list-style:      none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary svg {
  flex-shrink: 0;
  color:       var(--muted);
  transition:  transform 160ms ease;
}

.faq-item[open] summary svg {
  transform: rotate(180deg);
}

/* Le focus se voit : la question s'ouvre à l'`Entrée`, et personne ne doit
   avoir à deviner où il est dans la liste (§8.4). */
.faq-item summary:focus-visible {
  outline:        2px solid var(--teal-dark);
  outline-offset: 2px;
  border-radius:  var(--r-badge);
}

.faq-item p {
  max-width:     72ch;
  margin:        0;
  padding:       0 2px 20px;
  color:         var(--ink-2);
  font-size:     var(--t-body);
  line-height:   1.65;
}

.faq-link {
  margin:    22px 0 0;
  font-size: var(--t-body);
}

.faq-link a {
  color:           var(--ink);
  border-bottom:   2px solid var(--teal);
  padding-bottom:  2px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary svg {
    transition: none;
  }
}

/* --- Le bandeau de consentement (19-beta-plan.md §6) ------------------------- */

/* Posé en bas, sans voile sur la page : on peut lire le site avant de
   répondre, et ne pas répondre vaut refus. */
.consent {
  position:       fixed;
  right:          16px;
  bottom:         16px;
  left:           16px;
  z-index:        50;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  max-width:      520px;
  margin-inline:  auto;
  padding:        18px 20px;
  border:         1px solid var(--line-strong);
  border-radius:  var(--r-card);
  background:     var(--surface);
  box-shadow:     0 18px 40px -24px color-mix(in srgb, var(--navy) 45%, transparent);
}

.consent[hidden] {
  display: none;
}

.consent-title {
  margin:      0;
  font-family: var(--font-title);
  font-size:   18px;
  font-weight: 700;
}

.consent-text {
  margin:      0;
  color:       var(--ink-2);
  font-size:   14px;
  line-height: 1.55;
}

/* Même poids pour les deux : la CNIL demande qu'il soit aussi simple de
   refuser que d'accepter. */
.consent-actions {
  display: flex;
  gap:     8px;
}

.consent-actions button {
  flex: 1 1 0;
}

/* Un bouton, parce qu'il ne mène nulle part : il rouvre le bandeau. Habillé
   comme ses voisins du pied de page. */
.site-footer-consent {
  padding:     0;
  border:      0;
  background:  none;
  color:       var(--ink-2);
  font-family: inherit;
  font-size:   var(--t-sub);
  cursor:      pointer;
}

.site-footer-consent:hover {
  color:           var(--ink);
  text-decoration: underline;
}

.site-footer-consent[hidden] {
  display: none;
}