/* ==================================================================
   KOMPTA — LA PAGE PUBLIQUE

   La seule partie du site qu'un inconnu voit. Elle ne se construit PAS
   avec le vocabulaire de l'application : `.carte` est un conteneur
   d'écran de travail, et quatre cartes blanches empilées sur une page
   d'accueil donnent exactement ce qu'on a eu — une pile de blocs
   identiques, sans hiérarchie, sans rythme, avec un titre qui se casse
   en trois lignes dans une colonne étroite au milieu d'un vide.

   Ici, la hiérarchie vient de trois choses et de rien d'autre :
     - un filet horizontal entre les sections, jamais un cadre ;
     - la taille du titre, qui respire avec la fenêtre (clamp) ;
     - l'accent, réservé à ce qui compte : l'italique du titre, les
       numéros d'étape, les mots que l'œil doit accrocher.

   Aucune couleur en hexadécimal : tout passe par les jetons de
   charte-tokens.css (règle 8).
   ================================================================== */

.vitrine {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

/* ------------------------------------------------------------------
   LA BARRE DU HAUT

   Elle n'est pas l'en-tête de l'application : pas de fond, pas
   d'ombre, juste un filet en dessous. Sur une page d'accueil, une
   barre pleine largeur avec un fond blanc coupe la page en deux avant
   même qu'on ait lu le titre.
   ------------------------------------------------------------------ */
.vitrine-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid var(--bordure);
}

.vitrine-barre .marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--texte);
  font-family: var(--police-titre);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}

.vitrine-barre .marque .logo { color: var(--accent); }

.vitrine-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ------------------------------------------------------------------
   L'ACCROCHE
   ------------------------------------------------------------------ */
.vitrine-hero { padding: 72px 0 52px; }

/* LE TITRE RESPIRE AVEC LA FENETRE.
   Une taille fixe en rem donne, sur un écran large, un titre qui se
   casse en trois lignes courtes au milieu d'un vide — c'était le
   défaut. clamp() le fait grandir avec la page, et max-width le tient
   sur deux lignes pleines plutôt que sur trois moignons. */
.vitrine-titre {
  /* PAS DE max-width ICI. Il y en avait un, et il coupait le titre en
     deux lignes dont la seconde ne portait qu'un mot — l'orphelin
     classique, qui donne une accroche bancale sur grand écran. La
     largeur de lecture est déjà tenue par .vitrine (980 px), et
     text-wrap: balance répartit les lignes à peu près également quand
     le titre doit vraiment se casser. */
  text-wrap: balance;
  margin: 0 0 24px;
  font-family: var(--police-titre);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* L'italique d'accent : le seul endroit de la page où la couleur porte
   le regard sur un mot plutôt que sur un bouton. */
.vitrine-titre em {
  color: var(--accent);
  font-style: italic;
}

/* LE TEXTE VA D'UN FILET A L'AUTRE.
   Le chapô s'arrêtait 300 px avant le trait qui souligne la section :
   une page inachevée, et c'est ce qui se voyait. La largeur de lecture
   est tenue par .vitrine, et par elle seule — c'est le seul endroit à
   changer si la ligne paraissait un jour trop longue. */
.vitrine-chapo {
  margin: 0 0 18px;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--texte-doux);
}

.vitrine-chapo strong { color: var(--texte); font-weight: 600; }

.vitrine-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 28px 0 0;
}

/* --texte-doux et NON --texte-tres-doux : ce dernier donne 3,2:1 sur le
   fond ivoire, sous le minimum AA de 4,5:1 pour du texte courant. Un
   gris plus clair paraît plus élégant sur la maquette et devient
   illisible sur un écran de portable en plein jour (règle 10e). */
.vitrine-appoint {
  font-size: 0.88rem;
  color: var(--texte-doux);
}

/* ------------------------------------------------------------------
   LES SECTIONS

   Séparées par un FILET, jamais encadrées. Un cadre autour de chaque
   section fabrique une pile de boîtes ; un filet fabrique une page.
   ------------------------------------------------------------------ */
.vitrine-section {
  padding: 48px 0;
  border-top: 1px solid var(--bordure);
}

.vitrine-section > h2 {
  margin: 0 0 8px;
  font-family: var(--police-titre);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Le surtitre d'une section : il annonce le sujet en deux mots, en
   petites capitales espacées, au-dessus du titre. */
.vitrine-surtitre {
  margin: 0 0 6px;
  color: var(--accent-texte);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.vitrine-section > p {
  margin: 0 0 14px;
  line-height: 1.65;
  color: var(--texte-doux);
}

.vitrine-section > p strong { color: var(--texte); }
.vitrine-section > p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   LES ETAPES — numérotées par le navigateur, pas à la main
   ------------------------------------------------------------------ */
.vitrine-etapes {
  counter-reset: etape;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

/* display:flex pour que les trois cartes fassent la même hauteur quel
   que soit le texte : trois blocs côte à côte de hauteurs différentes se
   lisent comme trois natures de contenu différentes. */
.vitrine-etapes > li {
  counter-increment: etape;
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}

.vitrine-etapes > li::before {
  content: counter(etape, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-family: var(--police-titre);
  font-size: 1.5rem;
  line-height: 1;
}

.vitrine-etapes h3 {
  margin: 0 0 6px;
  font-family: var(--police-corps);
  font-size: 1rem;
  font-weight: 600;
}

.vitrine-etapes p {
  margin: 0;
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   LE TABLEAU COMPARATIF

   C'est la pièce maîtresse de la page : la thèse du produit tient dans
   ces sept lignes. Elle mérite donc mieux qu'un paragraphe — deux
   colonnes qu'on lit de gauche à droite, et la différence saute aux
   yeux sans qu'on ait à la chercher dans une phrase.

   Il défile dans son propre conteneur sur téléphone : le corps de la
   page ne défile jamais horizontalement.
   ------------------------------------------------------------------ */
.vitrine-comparaison {
  overflow-x: auto;
  margin: 28px 0 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}

.vitrine-comparaison table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.vitrine-comparaison th,
.vitrine-comparaison td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--bordure);
}

.vitrine-comparaison thead th {
  border-top: 0;
  background: var(--surface-2);
  font-family: var(--police-corps);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* La première colonne nomme le critère : elle est du texte de
   structure, pas du contenu. */
.vitrine-comparaison tbody th {
  width: 26%;
  font-weight: 600;
  color: var(--texte);
}

/* La colonne de l'artiste-auteur est celle qu'on vient lire : un fond
   à peine teinté suffit à la désigner, sans la crier. */
.vitrine-comparaison td:last-child {
  background: var(--accent-doux);
  color: var(--texte);
}

.vitrine-comparaison td { color: var(--texte-doux); }

/* ------------------------------------------------------------------
   LES DEUX COLONNES — ce que l'outil fait, ce qu'il ne fait pas
   ------------------------------------------------------------------ */
.vitrine-colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px;
  margin: 28px 0 0;
}

.vitrine-colonnes h3 {
  margin: 0 0 10px;
  font-family: var(--police-corps);
  font-size: 1rem;
  font-weight: 600;
}

/* Les listes de la vitrine : séparées par un filet, sans puce. Une
   puce ronde devant une phrase de deux lignes fabrique un décrochage
   que l'œil doit franchir à chaque item. */
.vitrine-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vitrine-liste > li {
  padding: 12px 0;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: 0.94rem;
  line-height: 1.6;
}

.vitrine-liste > li:first-child { border-top: 0; padding-top: 0; }
.vitrine-liste > li strong { color: var(--texte); }

/* Les publics visés : des jetons, pas une liste à puces. */
.vitrine-jetons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.vitrine-jetons > li {
  padding: 7px 15px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-pilule);
  background: var(--surface);
  font-size: 0.86rem;
  color: var(--texte-doux);
}

/* ------------------------------------------------------------------
   LA FOIRE AUX QUESTIONS

   Un <details> par question : ouverture native, sans une ligne de
   JavaScript — donc rien que la CSP puisse bloquer en silence.

   La zone cliquable est la LIGNE ENTIERE, pas le seul libellé : une
   cible de la largeur du texte se rate au doigt.
   ------------------------------------------------------------------ */
.vitrine-faq { margin: 28px 0 0; border-top: 1px solid var(--bordure); }

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

.vitrine-faq-question {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;              /* Firefox */
}

/* Safari et Chrome dessinent sinon un triangle noir qui ne suit ni la
   couleur ni la graisse du reste. */
.vitrine-faq-question::-webkit-details-marker { display: none; }

/* La flèche tourne à l'ouverture, et c'est le seul mouvement de la
   page. Elle ne porte AUCUNE information à elle seule : <details>
   annonce déjà son état au lecteur d'écran (règle 10e). */
.vitrine-faq-question::before {
  content: '';
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform var(--transition);
}

.vitrine-faq-item[open] .vitrine-faq-question::before { transform: rotate(45deg); }

.vitrine-faq-question:hover { color: var(--accent-texte); }

.vitrine-faq-reponse { padding: 0 0 18px 20px; }

.vitrine-faq-reponse p {
  margin: 0 0 10px;
  color: var(--texte-doux);
  line-height: 1.65;
}

.vitrine-faq-reponse p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   LA SORTIE
   ------------------------------------------------------------------ */
.vitrine-final {
  padding: 48px 0 64px;
  border-top: 1px solid var(--bordure);
}

.vitrine-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0 40px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: 0.86rem;
}

.vitrine-pied nav { display: flex; gap: 18px; flex-wrap: wrap; }
.vitrine-pied a { color: var(--texte-doux); }

/* ------------------------------------------------------------------
   LES PAGES DE TEXTE — mentions légales, confidentialité

   Même ossature, une seule colonne, une largeur de lecture tenue.
   ------------------------------------------------------------------ */
.vitrine-texte { padding: 48px 0 64px; }

.vitrine-texte h1 {
  margin: 0 0 32px;
  font-family: var(--police-titre);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.vitrine-texte h2 {
  margin: 36px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--bordure);
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 600;
}

.vitrine-texte p,
.vitrine-texte li {
  max-width: 68ch;
  line-height: 1.7;
  color: var(--texte-doux);
}

.vitrine-texte strong { color: var(--texte); }

/* ==================================================================
   LE PORTAIL — connexion, code de vérification, secours

   Deux colonnes : ce que fait l'outil à gauche, le formulaire à droite.
   La colonne de gauche n'est pas un ornement — quelqu'un qui arrive sur
   une page de connexion nue, sans savoir chez qui il est, referme
   l'onglet. Et un accès qu'on ouvre trois fois par an se retrouve
   d'autant mieux qu'on reconnaît la page.

   Le formulaire garde une largeur FIXE : un champ de saisie étiré sur
   900 px n'en devient pas plus lisible, il devient plus difficile à
   viser du regard.
   ================================================================== */
.portail { padding: 56px 0 64px; }

.portail-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 32px;
  max-width: 920px;
  margin: 0 auto;
}

/* La carte est en SECONDE colonne sur grand écran, et en PREMIÈRE sur
   téléphone : on vient pour se connecter, la présentation attend en
   dessous. L'ordre du HTML est celui du téléphone ; c'est la grille qui
   le renverse quand il y a la place. */
.portail-carte { grid-column: 2; grid-row: 1; }
.portail-presentation { grid-column: 1; grid-row: 1; }

.portail-carte {
  padding: 32px 28px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}

/* La marque en tête de carte : on sait chez qui on tape son mot de
   passe. C'est la première défense contre une page d'hameçonnage — pas
   une garantie, mais l'absence de marque en est l'inverse. */
.portail-marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--texte);
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  text-decoration: none;
}

.portail-marque .logo { color: var(--accent); }

.portail-titre {
  margin: 0 0 10px;
  font-family: var(--police-titre);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.portail-titre em { color: var(--accent); font-style: italic; }

.portail-intro {
  margin: 0 0 24px;
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.6;
}

.portail-intro strong { color: var(--texte); }

/* La note de pied de carte, détachée par un filet : ce n'est pas une
   étape du formulaire, c'est ce qu'il faut savoir une fois qu'on a
   compris qu'on ne va pas entrer tout de suite. */
.portail-note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--bordure);
  color: var(--texte-doux);
  font-size: 0.82rem;
  line-height: 1.6;
}

.portail-note p { margin: 0 0 8px; }
.portail-note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   LA SORTIE SECONDAIRE — « mot de passe oublié »

   Un <details>, replié par défaut. Deux formulaires dépliés côte à
   côte sur une page de connexion font hésiter : on ne sait plus lequel
   est le chemin normal. Replié, le chemin normal est le seul visible ;
   déplié, il est toujours là au-dessus.

   Ouverture native, sans une ligne de JavaScript — donc rien que la
   CSP puisse bloquer en silence.
   ------------------------------------------------------------------ */
.portail-repli { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--bordure); }

.portail-repli > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent-texte);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.portail-repli > summary::-webkit-details-marker { display: none; }

.portail-repli > summary::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
  transition: transform var(--transition);
}

.portail-repli[open] > summary::before { transform: rotate(45deg); }

.portail-repli-corps { padding-top: 16px; }

.portail-repli-corps > p {
  margin: 0 0 16px;
  color: var(--texte-doux);
  font-size: 0.86rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   LE CODE À SIX CHIFFRES

   Champ court, chiffres espacés : on le lit et on le recopie sans se
   tromper, y compris depuis un SMS affiché juste à côté sur le même
   écran de téléphone.
   ------------------------------------------------------------------ */
.portail-carte .champ input[name="code"] {
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-align: center;
}

/* ------------------------------------------------------------------
   LA COLONNE DE GAUCHE — ce que fait l'outil
   ------------------------------------------------------------------ */
.portail-presentation {
  padding: 28px 30px 30px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface-2);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--texte-doux);
}

.portail-presentation h2 {
  margin: 0 0 10px;
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--texte);
}

.portail-presentation h3 {
  margin: 22px 0 8px;
  font-family: var(--police-corps);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.portail-presentation p { margin: 0 0 12px; }
.portail-presentation p:last-child { margin-bottom: 0; }
.portail-presentation strong { color: var(--texte); }

.portail-presentation ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.portail-presentation li {
  padding: 9px 0;
  border-top: 1px solid var(--bordure);
}

.portail-presentation li:first-child { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------------------
   TELEPHONE
   ------------------------------------------------------------------ */
@media (width <= 900px) {
  .vitrine-hero { padding: 44px 0 36px; }
  .vitrine-section { padding: 36px 0; }

  /* UNE SEULE COLONNE, ET LA CARTE PASSE DEVANT : on vient pour se
     connecter, la présentation attend en dessous. */
  .portail { padding: 36px 0 48px; }

  .portail-duo {
    grid-template-columns: 1fr;
    max-width: 520px;
    gap: 20px;
  }

  .portail-carte        { grid-column: 1; grid-row: 1; }
  .portail-presentation { grid-column: 1; grid-row: 2; }
}

/* Le portail SANS colonne de présentation — vérification d'un lien
   échouée, par exemple. La carte se centre au lieu de se coller à
   droite d'un vide. */
.portail-solo { grid-template-columns: minmax(0, 460px); justify-content: center; }
.portail-solo .portail-carte        { grid-column: 1; }
.portail-solo .portail-presentation { grid-column: 1; grid-row: 2; }

/* La page de secours garde ses deux colonnes : le diagnostic y est la
   moitié de l'intérêt. */
.portail-solo:has(.portail-presentation) {
  grid-template-columns: minmax(0, 1fr) 420px;
  justify-content: stretch;
}

.portail-solo:has(.portail-presentation) .portail-carte        { grid-column: 2; grid-row: 1; }
.portail-solo:has(.portail-presentation) .portail-presentation { grid-column: 1; grid-row: 1; }

@media (width <= 900px) {
  .portail-solo,
  .portail-solo:has(.portail-presentation) { grid-template-columns: 1fr; }
  .portail-solo:has(.portail-presentation) .portail-carte        { grid-column: 1; grid-row: 1; }
  .portail-solo:has(.portail-presentation) .portail-presentation { grid-column: 1; grid-row: 2; }
}

/* ==================================================================
   LES PRIX

   Deux cartes cote a cote, une seule colonne en telephone. Aucune
   couleur ne porte l'information a elle seule : la carte mise en avant
   l'est par sa bordure ET par son texte (regle 10e).
   ================================================================== */

.vitrine-prix {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 40px 0;
}

@media (min-width: 700px) {
  .vitrine-prix { grid-template-columns: 1fr 1fr; }
}

.vitrine-prix-carte {
  padding: 32px 28px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--surface);
}

.vitrine-prix-carte--mise-en-avant {
  border-color: var(--accent);
  border-width: 2px;
}

.vitrine-prix-nom {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

.vitrine-prix-montant {
  margin: 0 0 12px;
  font-family: var(--police-titre);
  font-size: 2.75rem;
  line-height: 1.1;
  color: var(--texte);
}

/* « par mois » ne doit pas peser autant que le chiffre : c'est le
   chiffre qu'on vient lire. */
.vitrine-prix-montant span {
  display: block;
  margin-top: 4px;
  font-family: var(--police-corps);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--texte-doux);
}

.vitrine-prix-note {
  margin: 0;
  color: var(--texte-doux);
  line-height: 1.55;
}