/* Feuille de style des PAGES PUBLIQUES (landing, calculateur, questions fréquentes, pages
   légales). Écrite à la main, sans Tailwind : ces pages sont rendues par PHP et n'ont pas de
   étape de construction, et le lot interdit d'ajouter une dépendance ou un paquet npm.

   Les valeurs de couleur et de typographie sont les MÊMES que celles du bloc @theme de
   app/web/src/index.css, qui reste la référence de la charte. Une divergence entre les deux
   fichiers ferait deux Easik de couleurs différentes selon la page : tests/run_pages_publiques_tests.php
   compare les deux et échoue si un token s'écarte.

   Mode clair par défaut, comme l'application : Easik est un outil de saisie fiscale utilisé en
   journée. Le mode sombre suit la préférence du système, sans bascule (une page publique n'a
   pas de compte où mémoriser un choix). */

:root {
  --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-display: 'Kanit', system-ui, sans-serif;

  --color-fond: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-elevee: #eef1f4;
  --color-bordure: #d8dde3;
  --color-encre: #181b1f;
  --color-encre-douce: #5a636e;

  --color-primaire: #ff6b35;
  --color-primaire-hover: #e9541e;
  --color-primaire-contraste: #f8f7f4;

  --color-secondaire: #c9a961;
  --color-secondaire-hover: #c29a41;

  --color-accent: #ff6b35;
  --color-accent-hover: #e9541e;

  --color-danger: #c83b2e;
  --color-danger-hover: #a82f24;
  --color-succes: #54ad7d;
  --color-attention: #e0a14b;

  --color-avis-fond: #fdf2e3;
  --color-avis-encre: #8a5a1e;

  --largeur: 72rem;
  --rayon: 0.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fond: #0b0d0e;
    --color-surface: #15191b;
    --color-surface-elevee: #1c2225;
    --color-bordure: #232a2d;
    --color-encre: #f2efea;
    --color-encre-douce: #9ba3a7;

    --color-avis-fond: #2a2013;
    --color-avis-encre: #f0c480;
  }
}

/* Polices de marque, servies localement depuis /fonts. Aucune ressource tierce. */
@font-face {
  font-family: 'Satoshi';
  src: url('/fonts/Satoshi/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/Kanit/Kanit-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Kanit';
  src: url('/fonts/Kanit/Kanit-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

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

body {
  margin: 0;
  background-color: var(--color-fond);
  color: var(--color-encre);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  body {
    font-weight: 450; /* compense la finesse de Satoshi sur fond sombre (charte) */
  }
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--color-accent);
}
a:hover {
  color: var(--color-accent-hover);
}

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Lien d'évitement : visible seulement au focus clavier. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  color: var(--color-encre);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.saut-contenu:focus {
  left: 0;
}

.visuellement-masque {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.conteneur.etroit {
  max-width: 48rem;
}

/* En-tête ---------------------------------------------------------------- */
.entete {
  border-bottom: 1px solid var(--color-bordure);
  background: var(--color-surface);
  position: sticky;
  top: 0;
  z-index: 50;
}
.entete-barre {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
  flex-wrap: wrap;
}
.marque {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--color-encre);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.marque:hover {
  color: var(--color-accent);
}
.navigation {
  display: flex;
  gap: 1.25rem;
  flex: 1;
  flex-wrap: wrap;
}
.navigation a {
  color: var(--color-encre-douce);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
}
.navigation a:hover,
.navigation a[aria-current='page'] {
  color: var(--color-accent);
}
.entete-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Boutons et liens ------------------------------------------------------- */
.bouton {
  display: inline-block;
  background: var(--color-primaire);
  color: var(--color-primaire-contraste);
  border: 1px solid transparent;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease-out;
}
.bouton:hover {
  background: var(--color-primaire-hover);
  color: var(--color-primaire-contraste);
}
/* Jamais deux boutons pleins orange côte à côte (charte) : le second est discret. */
.lien-discret {
  display: inline-block;
  color: var(--color-encre-douce);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.625rem 0.5rem;
}
.lien-discret:hover {
  color: var(--color-accent);
}
/* Bouton contour, second appel d'une paire : jamais deux pleins orange côte à côte. */
.bouton-fantome {
  display: inline-block;
  background: transparent;
  color: var(--color-primaire);
  border: 1.5px solid currentColor;
  padding: 0.5625rem 1.1875rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  transition:
    background-color 0.15s ease-out,
    color 0.15s ease-out;
}
.bouton-fantome:hover {
  background: var(--color-primaire);
  color: var(--color-primaire-contraste);
}
/* Sur fond sombre le contour orange manque de contraste : il passe en blanc cassé. */
.bloc-sombre .bouton-fantome {
  color: var(--color-encre);
}
.bloc-sombre .bouton-fantome:hover {
  background: var(--color-encre);
  color: #0b0d0e;
}
.bouton-grand {
  padding: 0.8125rem 1.75rem;
  font-size: 1rem;
}
.bouton-fantome.bouton-grand {
  padding: 0.75rem 1.6875rem;
}
/* Pleine largeur au pied d'une carte d'offre, pour aligner les deux cartes. */
.bouton-large {
  display: block;
  text-align: center;
  padding-top: 0.8125rem;
  padding-bottom: 0.8125rem;
}
.carte-offre-phare .bouton {
  background: #0b0d0e;
  color: #f2efea;
}
.carte-offre-phare .bouton:hover {
  background: #1c2225;
}

/* Sections --------------------------------------------------------------- */
.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}
.section-alt {
  background: var(--color-surface-elevee);
}
.section-hero {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.kicker {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-secondaire);
  margin-bottom: 0.75rem;
}

.chapeau {
  font-size: 1.0625rem;
  color: var(--color-encre-douce);
}
.chapeau-large {
  max-width: 46rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
}

/* Hero ------------------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 60rem) {
  .hero {
    /* La colonne de droite porte la capture : elle ne doit pas être la plus étroite. */
    grid-template-columns: 1fr 1.05fr;
    gap: 3rem;
  }
}

/* Cartes ----------------------------------------------------------------- */
.carte {
  background: var(--color-surface);
  border: 1px solid var(--color-bordure);
  border-radius: var(--rayon);
  padding: 1.5rem;
}
.carte h3 {
  margin-top: 0;
}
.carte p:last-child {
  margin-bottom: 0;
}

.liste-cochee {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.5rem;
}
.liste-cochee li {
  padding-left: 1.75rem;
  position: relative;
}
.liste-cochee li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-succes);
}

/* Calculateur ------------------------------------------------------------ */
/* En-tête du calculateur : l'argumentaire à gauche, l'outil à droite, sur bloc sombre.
   Les champs n'ont besoin d'aucune règle particulière : .bloc-sombre redéfinit les tokens
   de surface, de bordure et d'encre, donc le formulaire suit sans code en double. */
.section-calc {
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
  /* Cible du renvoi après calcul. La marge tient compte de l'en-tête collante, pour que le
     titre ne se glisse pas dessous : on revient en haut de la SECTION, saisie et résultat
     dans le même écran, jamais collé sur le seul résultat. */
  scroll-margin-top: 5rem;
}
.calc-entete {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .calc-entete {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3.5rem;
  }
}
.calc-texte h1 {
  font-size: clamp(2rem, 4.2vw, 2.875rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.calc-texte .chapeau {
  max-width: 32rem;
}
.calc-points {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.25rem;
}
.calc-points li {
  font-size: 0.875rem;
  color: var(--color-encre-douce);
  padding-left: 1.75rem;
  position: relative;
}
.calc-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-secondaire);
}
.calc-points strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-encre);
  margin-bottom: 0.125rem;
}
.calc-outil {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}
/* Le formulaire est l'objet de la page : il porte l'ombre qui le détache du bloc. */
.calc-outil .formulaire {
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}

/* L'invite à créer un compte, sous l'argumentaire, une fois un montant obtenu. Un filet or
   à gauche la relie à la signature de marque sans dominer, l'action reste orange (charte). */
.calc-invite {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--rayon);
  border: 1px solid var(--color-bordure);
  border-left: 3px solid var(--color-secondaire);
  background: var(--color-surface);
}
.calc-invite p {
  font-size: 0.9375rem;
  color: var(--color-encre-douce);
  margin-bottom: 1rem;
}
.calc-invite .bouton {
  width: 100%;
}
.formulaire .champs {
  display: grid;
  gap: 1rem;
}
@media (min-width: 34rem) {
  .formulaire .champs {
    grid-template-columns: 1fr 1fr;
  }
}
.champ {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin: 0;
}
.champ label {
  font-size: 0.875rem;
  font-weight: 600;
}
.champ input,
.champ select {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-bordure);
  border-radius: 0.5rem;
  background: var(--color-surface);
  color: var(--color-encre);
  width: 100%;
}
.aide {
  font-size: 0.8125rem;
  color: var(--color-encre-douce);
}
.champ-case {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
}
.champ-case label {
  font-size: 0.9375rem;
}

.carte-resultat {
  border-color: var(--color-accent);
  position: relative;
}

/* Contour orange qui se TRACE une fois, à l'apparition du résultat.
   Ce n'est pas une boucle décorative ambiante (celles-là, la charte les proscrit) : elle se
   joue UNE seule fois, au chargement de la page qui suit le clic sur « Calculer », donc en
   réponse à une intention, ce que la charte autorise expressément. L'angle du dégradé conique
   passe de 0 à 360°, l'orange fait le tour, puis se fige sur un contour complet qui garde le
   regard sur le montant.
   Le masque ne conserve du dégradé que l'anneau de 2 px : c'est la technique classique du
   bord dégradé. La valeur initiale de l'angle est 360°, donc sans @property ni animation
   (navigateur ancien, mouvement réduit) le contour est directement complet, jamais absent. */
@property --angle-contour {
  syntax: '<angle>';
  initial-value: 360deg;
  inherits: false;
}
@keyframes tracer-contour {
  from {
    --angle-contour: 0deg;
  }
  to {
    --angle-contour: 360deg;
  }
}
.carte-resultat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from -90deg,
    var(--color-accent) var(--angle-contour),
    transparent var(--angle-contour)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: tracer-contour 1.9s ease-in-out both;
}
@media (prefers-reduced-motion: reduce) {
  /* Contour complet immédiat : l'orange reste, seul son tracé progressif disparaît. */
  .carte-resultat::after {
    animation: none;
  }
}
.resultat-montant {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, 3rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1.05;
  margin: 0 0 1rem;
}
.resultat-detail {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.375rem 1rem;
  font-size: 0.9375rem;
}
.resultat-detail dt {
  color: var(--color-encre-douce);
}
.resultat-detail dd {
  margin: 0;
}
.resultat-note,
.resultat-source {
  font-size: 0.8125rem;
  color: var(--color-encre-douce);
  margin-bottom: 0;
}
.message-erreur {
  background: var(--color-avis-fond);
  color: var(--color-avis-encre);
  border: 1px solid var(--color-attention);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  margin: 0;
}

/* Tableaux --------------------------------------------------------------- */
.tableau-defilant {
  overflow-x: auto;
  margin-top: 1.5rem;
}
.tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.tableau th,
.tableau td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-bordure);
}
.tableau thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-encre-douce);
}
.tableau-legal {
  margin-top: 1rem;
}

/* Questions fréquentes --------------------------------------------------- */
.faq-liste {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-bordure);
  border-radius: var(--rayon);
  padding: 0 1.25rem;
}
.faq-item summary {
  cursor: pointer;
  padding: 1rem 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  margin-left: auto;
  color: var(--color-accent);
  font-size: 1.25rem;
  line-height: 1;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item summary h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}
.faq-item > p {
  margin: 0 0 1.25rem;
  color: var(--color-encre-douce);
}

/* Pages légales ---------------------------------------------------------- */
.texte-legal h2 {
  font-size: 1.375rem;
  margin-top: 2.5rem;
}
.texte-legal .revision {
  font-size: 0.875rem;
  color: var(--color-encre-douce);
  border-bottom: 1px solid var(--color-bordure);
  padding-bottom: 1.5rem;
}
.texte-legal ul {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
.texte-legal li {
  margin-bottom: 0.375rem;
}
.liste-definition {
  list-style: none;
  padding-left: 0;
}

/* Pied de page ----------------------------------------------------------- */
/* AUCUNE marge en haut : le pied doit toucher la section qui le précède.
   Une marge laisserait voir une bande du fond du body entre les deux, invisible tant que la
   dernière section est claire (gris sur gris), mais franche dès qu'une page se termine par
   un bloc sombre, ce qui est le cas de la landing. L'aération vient du padding, qui est
   INTÉRIEUR au pied et donc de sa couleur, et la séparation vient du filet. */
.pied {
  background: var(--color-surface);
  border-top: 1px solid var(--color-bordure);
  padding: 3rem 0 1.5rem;
}
.pied-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .pied-grille {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.pied-marque {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}
.pied-texte,
.pied-liste a {
  color: var(--color-encre-douce);
  font-size: 0.9375rem;
}
.pied-titre {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-encre-douce);
  margin-bottom: 0.75rem;
}
.pied-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.pied-liste a {
  text-decoration: none;
}
.pied-liste a:hover {
  color: var(--color-accent);
}
.pied-bas {
  border-top: 1px solid var(--color-bordure);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--color-encre-douce);
}
.pied-bas p {
  margin: 0;
}

/* Apparition au défilement ---------------------------------------------------
   Amélioration PROGRESSIVE, et le mot compte : sans JavaScript, aucune de ces règles ne
   s'applique et le contenu est intégralement visible. C'est indispensable ici, le rendu
   serveur de ces pages n'ayant qu'une raison d'être, être lu sans exécuter de script.

   La classe .anim est posée sur <html> par un court script, en tête de document pour éviter
   que le contenu n'apparaisse avant de se cacher. Le script ne la pose pas si la personne a
   demandé moins d'animations : l'état final est alors direct, comme l'exige la charte. */
.anim [data-revele] {
  opacity: 0;
  transform: translateY(1.5rem);
}
.anim [data-revele].revele {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--retard, 0s),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--retard, 0s);
}

/* Héros et bandeau final : blocs sombres --------------------------------------
   Le dark est la signature Wycan (charte : « dark par défaut, distinctif et premium »).
   Il est employé ici en BLOCS, pas sur toute la page : le corps du site reste clair pour
   rester cohérent avec l'application, et les deux blocs sombres cadrent la lecture. */
.bloc-sombre {
  --color-encre: #f2efea;
  --color-encre-douce: #9ba3a7;
  --color-surface: #15191b;
  --color-bordure: #232a2d;
  background: #0b0d0e;
  color: var(--color-encre);
  position: relative;
  overflow: hidden;
}
/* Une seule lueur, fixe : un accent, pas une boucle décorative permanente (charte). */
.bloc-sombre::before {
  content: '';
  position: absolute;
  inset: -30% 40% 30% -20%;
  background: radial-gradient(closest-side, rgba(255, 107, 53, 0.22), transparent 70%);
  pointer-events: none;
}
.bloc-sombre::after {
  content: '';
  position: absolute;
  inset: 40% -15% -40% 55%;
  background: radial-gradient(closest-side, rgba(201, 169, 97, 0.16), transparent 70%);
  pointer-events: none;
}
.bloc-sombre .conteneur {
  position: relative;
  z-index: 1;
}
.bloc-sombre .carte {
  background: rgba(28, 34, 37, 0.72);
  border-color: rgba(242, 239, 234, 0.12);
  backdrop-filter: blur(6px);
}
.bloc-sombre .lien-discret {
  color: var(--color-encre-douce);
}
.bloc-sombre .lien-discret:hover {
  color: var(--color-primaire-contraste);
}

/* Héros ------------------------------------------------------------------------
   Le héros est CLAIR : il montre une capture d'écran de l'application, qui est claire
   elle aussi. Un panneau teinté cadre le visuel à droite, et la carte chiffrée déborde
   sur le coin du cadre : ce chevauchement est ce qui distingue une mise en page composée
   d'un empilement de blocs. Il ne s'active qu'à partir de 60rem, en dessous tout revient
   dans le flux. */
.section-hero {
  position: relative;
  overflow: hidden;
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}
.hero-fond {
  position: absolute;
  inset: 0 0 0 auto;
  width: 55%;
  background:
    radial-gradient(60% 60% at 70% 20%, rgba(255, 107, 53, 0.14), transparent 70%),
    radial-gradient(50% 50% at 30% 90%, rgba(201, 169, 97, 0.14), transparent 70%),
    var(--color-surface-elevee);
  border-bottom-left-radius: 7.5rem;
  pointer-events: none;
  display: none;
}
@media (min-width: 60rem) {
  .hero-fond {
    display: block;
  }
}
.hero {
  position: relative;
  z-index: 1;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.375rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin-bottom: 1.25rem;
  /* Répartit les lignes plutôt que de laisser un mot seul en dernière ligne. Ignoré par les
     navigateurs qui ne le connaissent pas, sans conséquence : le titre revient au retour à
     la ligne ordinaire. */
  text-wrap: balance;
}
.hero .chapeau {
  font-size: clamp(1.05rem, 2vw, 1.1875rem);
  max-width: 33rem;
}
.accent {
  color: var(--color-primaire);
}
.accent-doux {
  color: var(--color-secondaire);
}

/* Pastille d'annonce, en tête du héros. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--color-bordure);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-encre-douce);
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px -4px rgba(11, 13, 14, 0.25);
}
.pastille-point {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 999px;
  background: var(--color-succes);
  flex: none;
}

/* Puces de réassurance. */
.pilules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
}
.pilules li {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--color-bordure);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.8125rem;
  color: var(--color-encre-douce);
}

.hero-visuel {
  position: relative;
}
.cadre-flottant {
  box-shadow: 0 32px 64px -28px rgba(11, 13, 14, 0.45);
}
.carte-flottante {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-surface);
  border: 1px solid var(--color-bordure);
  border-radius: var(--rayon);
  box-shadow: 0 20px 44px -24px rgba(11, 13, 14, 0.4);
}
@media (min-width: 60rem) {
  .carte-flottante {
    position: absolute;
    /* Débord franc en bas à gauche : la carte doit mordre sur le coin du cadre, pas se
       poser au milieu de la capture, dont elle masquerait le graphique. */
    left: -3rem;
    bottom: -3.5rem;
    margin-top: 0;
    max-width: 14rem;
  }
}
/* Flottaison de la carte chiffrée.
   ÉCART ASSUMÉ à la charte, qui proscrit la boucle décorative ambiante permanente (le
   mouvement doit répondre à une intention). Demandé explicitement pour donner un peu de vie
   au héros. Trois garde-fous pour que l'écart reste supportable : amplitude faible (8 px),
   cycle lent (7 s), et arrêt complet si la personne a demandé moins d'animations, ce que
   traite déjà la règle globale prefers-reduced-motion en fin de fichier. */
@keyframes flottaison {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-0.5rem);
  }
}
@media (min-width: 60rem) {
  .carte-flottante {
    animation: flottaison 7s ease-in-out infinite alternate;
  }
}
.carte-flottante-titre {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-encre-douce);
  margin-bottom: 0.25rem;
}
.carte-flottante-montant {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-primaire);
  margin-bottom: 0.25rem;
}
.carte-flottante-detail {
  font-size: 0.8125rem;
  color: var(--color-encre-douce);
  margin-bottom: 0;
}

/* Bandeau de repères ------------------------------------------------------------
   STATIQUE, là où la v1 le faisait défiler en boucle : la charte proscrit la boucle
   décorative permanente, et un texte qui défile se lit moins bien qu'un texte qui reste. */
.bandeau-faits {
  border-top: 1px solid var(--color-bordure);
  border-bottom: 1px solid var(--color-bordure);
  background: var(--color-surface);
  padding: 1.25rem 0;
}
.bandeau-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  list-style: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  /* « auto » est indispensable : la liste hérite du max-width de .conteneur, et un
     « margin: 0 » écraserait son centrage automatique, collant le bandeau au bord gauche
     de la fenêtre au lieu de l'aligner sur le reste de la page. */
  margin: 0 auto;
}
.bandeau-liste li {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.fait-valeur {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-encre);
}
.fait-libelle {
  font-size: 0.8125rem;
  color: var(--color-encre-douce);
}

/* Titres de section centrés ---------------------------------------------------- */
.titre-centre {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.titre-centre h2 {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.titre-centre .chapeau {
  margin: 0.875rem auto 0;
}

/* Carte vedette : la fonctionnalité mise en avant, sur fond sombre. */
.carte-vedette {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--rayon);
  background:
    radial-gradient(70% 120% at 85% 15%, rgba(255, 107, 53, 0.22), transparent 65%),
    linear-gradient(135deg, #15191b, #0b0d0e);
  border: 1px solid rgba(242, 239, 234, 0.1);
  color: #f2efea;
}
@media (min-width: 52rem) {
  .carte-vedette {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}
.carte-vedette h3 {
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  margin: 0 0 0.75rem;
  color: #f2efea;
}
.carte-vedette p {
  color: #9ba3a7;
  margin-bottom: 0;
}
.etiquette-vedette {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 107, 53, 0.16);
  border: 1px solid rgba(255, 107, 53, 0.35);
  color: var(--color-primaire);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}
.demo-etapes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.875rem;
}
.demo-etapes li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}
.demo-num {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 107, 53, 0.16);
  border: 1px solid rgba(255, 107, 53, 0.35);
  color: var(--color-primaire);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
}
.demo-corps {
  display: flex;
  flex-direction: column;
}
.demo-corps strong {
  font-size: 0.9375rem;
  color: #f2efea;
}
.demo-corps span {
  font-size: 0.8125rem;
  color: #9ba3a7;
}

/* Grille des fonctionnalités ---------------------------------------------------- */
.grille-fonctions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}
@media (min-width: 42rem) {
  .grille-fonctions {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .grille-fonctions {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Un filet d'accent au survol : le mouvement répond à une intention (charte). */
.carte-fonction {
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease-out;
}
.carte-fonction::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--color-primaire);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease-out;
}
.carte-fonction:hover {
  border-color: color-mix(in srgb, var(--color-primaire) 40%, var(--color-bordure));
}
.carte-fonction:hover::before {
  transform: scaleX(1);
}
.carte-fonction h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}
.carte-fonction p {
  font-size: 0.9375rem;
  color: var(--color-encre-douce);
}

/* Tarifs ------------------------------------------------------------------------ */
.grille-tarifs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
@media (min-width: 56rem) {
  .grille-tarifs {
    grid-template-columns: 1fr 1.4fr;
  }
}
.carte-offre {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--rayon);
  background: rgba(28, 34, 37, 0.72);
  border: 1px solid rgba(242, 239, 234, 0.12);
}
.carte-offre .actions {
  margin-top: auto;
  padding-top: 1.5rem;
}
.carte-offre-phare {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(140deg, var(--color-primaire), #d64a1a);
  border-color: rgba(255, 255, 255, 0.24);
}
.offre-badge {
  position: absolute;
  top: clamp(1.5rem, 3.5vw, 2.5rem);
  right: clamp(1.5rem, 3.5vw, 2.5rem);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: #0b0d0e;
  color: #f2efea;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.offre-nom {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-encre-douce);
  margin-bottom: 1rem;
}
.carte-offre-phare .offre-nom {
  color: rgba(248, 247, 244, 0.75);
}
.offre-prix {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-encre);
  margin-bottom: 1.5rem;
}
.carte-offre-phare .offre-prix {
  color: var(--color-primaire-contraste);
}
.offre-periode {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  margin-left: 0.375rem;
}
.offre-prix span {
  display: inline;
  color: var(--color-encre-douce);
}
.offre-prix > span:last-child {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: 0.5rem;
}
.carte-offre-phare .offre-prix span {
  color: rgba(248, 247, 244, 0.75);
}
.offre-argument {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.875rem;
  color: rgba(248, 247, 244, 0.9);
  margin-bottom: 1.5rem;
}
.offre-argument strong {
  color: var(--color-primaire-contraste);
}
.carte-offre-phare .liste-cochee li::before {
  background: var(--color-primaire-contraste);
}
.carte-offre-phare .liste-cochee {
  color: rgba(248, 247, 244, 0.92);
}
.liste-cochee-double {
  gap: 0.5rem 1.5rem;
}
@media (min-width: 34rem) {
  .liste-cochee-double {
    grid-template-columns: 1fr 1fr;
  }
}

/* Appel final -------------------------------------------------------------------- */
.bloc-final {
  border-top: 1px solid var(--color-bordure);
}
.appel-final {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 56rem) {
  .appel-final {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
  }
}
.appel-final h2 {
  font-size: clamp(1.85rem, 4.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.carte-benefices {
  list-style: none;
  padding: clamp(1.5rem, 3.5vw, 2rem);
  margin: 0;
  display: grid;
  gap: 1.25rem;
  border-radius: var(--rayon);
  background: rgba(28, 34, 37, 0.72);
  border: 1px solid rgba(242, 239, 234, 0.12);
}
.carte-benefices li {
  font-size: 0.875rem;
  color: var(--color-encre-douce);
  padding-left: 1.75rem;
  position: relative;
}
.carte-benefices li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-primaire);
}
.carte-benefices strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-encre);
  margin-bottom: 0.125rem;
}

/* Aperçu du produit ------------------------------------------------------------ */
.apercus {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 60rem) {
  .apercus {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
.apercu figcaption {
  margin-top: 1rem;
  color: var(--color-encre-douce);
  font-size: 0.9375rem;
}
.apercu figcaption strong {
  display: block;
  color: var(--color-encre);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}
/* Cadre de navigateur : la capture est un écran de logiciel, pas une illustration. */
.cadre-ecran {
  border: 1px solid var(--color-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 18px 40px -24px rgba(11, 13, 14, 0.5);
}
.cadre-ecran-barre {
  display: flex;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-bordure);
  background: var(--color-surface-elevee);
}
.cadre-ecran-barre span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-bordure);
}
.cadre-ecran img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* État final direct, jamais un contenu resté invisible faute d'animation. */
  .anim [data-revele] {
    opacity: 1;
    transform: none;
  }
  /* Arrêt FRANC de la flottaison. La règle générale ci-dessus ramène la durée à 0,01 ms,
     ce qui, sur une animation « infinite alternate », ne l'arrête pas : elle oscille à très
     haute fréquence, invisible mais bien réelle, et occupe le processeur de quelqu'un qui a
     précisément demandé moins de mouvement. */
  .carte-flottante {
    animation: none !important;
    transform: none !important;
  }
}