/*
 * Le système visuel Sesam, en CSS.
 *
 * Les mêmes valeurs que `apps/mobile/src/lib/theme.ts` et que le `@theme` de la
 * console commerçante. Aucune couleur ne s'écrit ailleurs que dans ce bloc.
 */
:root {
  --encre: #0b1416;
  --craie: #f5f2ec;
  --or: #f0a81c;
  --or2: #ffdf8e;
  --or3: #b87708;
  --emeraude: #19d48f;
  --corail: #ff6b3d;

  --verre: rgba(255, 255, 255, 0.06);
  --verre-fort: rgba(255, 255, 255, 0.1);
  --filet: rgba(255, 255, 255, 0.12);

  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ui: 'Archivo', system-ui, sans-serif;

  --r-feuille: 32px;
  --r-carte: 24px;
  --r-bouton: 20px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--encre);
  color: var(--craie);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
}

a {
  color: var(--or);
}

.contenu {
  width: min(100% - 2.5rem, 62rem);
  margin-inline: auto;
}

/* ------------------------------------------------------------------ barre */

.barre {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  background: color-mix(in srgb, var(--encre) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filet);
}

/*
 * La marque de la barre du haut : la loupe seule.
 *
 * Le mot « SESAM » y était en petites capitales, et le hero le redit trois
 * centimètres plus bas, en grand, sous la loupe animée. La marque bégayait.
 * Décision du pilote après le jour 7 : ne garder que la loupe en haut, le nom
 * reste dans le hero. Sur les pages sans hero — /pro, /support, les pages
 * légales — la loupe suffit à ramener à l'accueil, c'est le rôle d'un logo.
 */
.marque {
  display: inline-flex;
  align-items: center;
  color: var(--or);
  text-decoration: none;
}

.marque svg {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}

.marque:hover svg,
.marque:focus-visible svg {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--or) 55%, transparent));
}

.barre nav {
  display: flex;
  gap: 1.4rem;
  font-size: 0.92rem;
}

.barre nav a {
  color: color-mix(in srgb, var(--craie) 70%, transparent);
  text-decoration: none;
}

.barre nav a:hover,
.barre nav a:focus-visible {
  color: var(--craie);
}

/*
 * Quarante-quatre pixels sur les liens de navigation nommés.
 *
 * L'audit du 8 septembre a compté 103 liens de 20 à 27 px de haut là où il en
 * faut 44 — dans cette barre et dans le pied de page. Trente-huit d'entre eux
 * sont sur le chemin d'un commerçant qui découvre Sesam avant de s'inscrire, et
 * le plus petit de tous est « Tarifs », sur /pro : 36 × 23 px. C'est le prix.
 * Un commerçant qui vise le prix et tape à côté est un commerçant qu'on perd
 * avant d'avoir commencé.
 *
 * CE QUE LA RÈGLE NE TOUCHE PAS, ET POURQUOI
 *
 * Elle vise `nav` et la marque, donc des commandes. Elle laisse dehors :
 *
 * — Les liens au fil d'une phrase, comme l'adresse de courriel dans le pied de
 *   page. La règle 2.5.5 les exempte, et un plancher de 44 px au milieu d'un
 *   paragraphe écarterait les lignes sans rendre personne plus adroit.
 * — L'attribution MapLibre — OpenFreeMap, OpenStreetMap, OpenMapTiles. Ce sont
 *   les liens de la bibliothèque, requis par la licence, et ils doivent rester
 *   tels qu'elle les dessine. Ils ne sont dans aucun `nav` : ils sortent d'eux-
 *   mêmes du périmètre, sans exception à écrire.
 *
 * `inline-flex` et le centrage ne sont pas décoratifs : sans eux, le lien
 * grandit mais son texte reste collé en haut de la zone.
 */
.barre nav a,
.barre a.marque,
footer nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /*
   * La marche vaut dans les deux sens. Un mot court fait une cible étroite :
   * « Tarifs » mesurait 36 px de large une fois sa hauteur corrigée — le lien
   * le plus important de la page pour un commerçant, et le plus petit. La
   * largeur minimale ne change rien aux libellés longs, qui la dépassent déjà.
   */
  min-width: 44px;
}

/*
 * La marque n'a qu'une loupe pour libellé : 1,7 rem de large, soit 27 px. Il
 * lui faut la marche dans les deux sens, et son dessin recentré.
 */
.barre a.marque {
  justify-content: center;
  min-width: 44px;
}

/* ------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* La carte de nuit vit derrière le texte, jamais devant. */
#carte {
  position: absolute;
  inset: 0;
  filter: saturate(0.92);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--encre) 55%, transparent) 0%,
    color-mix(in srgb, var(--encre) 10%, transparent) 35%,
    var(--encre) 96%
  );
  pointer-events: none;
}

.hero .contenu {
  position: relative;
  z-index: 2;
  padding: 4rem 0 3.5rem;
}

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  max-width: 16ch;
}

.hero p.chapo {
  max-width: 46ch;
  margin: 1.2rem 0 2rem;
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  color: color-mix(in srgb, var(--craie) 78%, transparent);
}

.oeil {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--or);
}

/* ----------------------------------------------------------------- verre */

.verre {
  background: var(--verre);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  backdrop-filter: blur(18px);
}

/* --------------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 1.6rem;
  border: none;
  border-radius: var(--r-bouton);
  background: var(--or);
  color: var(--encre);
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.bouton:disabled {
  background: var(--verre-fort);
  color: color-mix(in srgb, var(--craie) 55%, transparent);
  cursor: progress;
}

.bouton-vide {
  background: transparent;
  border: 1px solid var(--filet);
  color: var(--craie);
}

/* -------------------------------------------------------------- formulaire */

.formulaire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  max-width: 34rem;
}

.champ {
  flex: 1 1 16rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--r-bouton);
  border: 1px solid var(--filet);
  background: var(--verre);
  color: var(--craie);
  font-family: var(--ui);
  font-size: 1rem;
}

.champ::placeholder {
  color: color-mix(in srgb, var(--craie) 55%, transparent);
}

.champ:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 1px;
}

.reponse {
  margin-top: 0.9rem;
  min-height: 1.4rem;
  font-size: 0.94rem;
  color: color-mix(in srgb, var(--craie) 75%, transparent);
}

.reponse[data-etat='ok'] {
  color: var(--emeraude);
}

.reponse[data-etat='erreur'] {
  color: var(--corail);
}

/* --------------------------------------------------------------- sections */

section.bande {
  padding: 4.5rem 0;
  border-top: 1px solid var(--filet);
}

section.bande h2 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  max-width: 20ch;
}

.trois {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
}

.trois article {
  padding: 1.6rem;
}

.trois h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.trois p {
  margin: 0;
  color: color-mix(in srgb, var(--craie) 72%, transparent);
  font-size: 0.96rem;
}

/*
  Les trois règles, sous les trois gestes.

  Une liste et non trois cartes de plus : ce ne sont pas des étapes, et leur
  donner la même forme qu'aux gestes ferait croire à un parcours en six temps.
  Le filet à gauche les rattache visuellement à ce qui précède sans les mettre
  au même rang.
*/
.regles {
  margin: 2.2rem 0 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
  border-left: 2px solid color-mix(in srgb, var(--or) 45%, transparent);
  display: grid;
  gap: 0.7rem;
  max-width: 60ch;
}

.regles li {
  margin: 0;
  color: color-mix(in srgb, var(--craie) 78%, transparent);
  font-size: 0.96rem;
  line-height: 1.55;
}

/*
  La mention fiscale suit le chapô des tarifs, en plus discret : elle doit être
  lue, pas récitée. Le `.chapo` lui donne sa largeur et sa mesure ; seules la
  taille et l'opacité changent.
*/
.mention-fiscale {
  margin-top: 0.4rem;
  font-size: 0.92rem;
  color: color-mix(in srgb, var(--craie) 55%, transparent);
}

.numero {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--or);
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}

/* ------------------------------------------------------------------ texte */

.page-texte {
  padding: 3rem 0 5rem;
}

.page-texte h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  margin-bottom: 0.6rem;
}

.page-texte .maj {
  color: color-mix(in srgb, var(--craie) 55%, transparent);
  font-size: 0.9rem;
}

.page-texte h2 {
  font-size: 1.3rem;
  margin: 2.6rem 0 0.7rem;
}

/* L'interligne de 1,6 n'est pas un choix de gout : a 390 px de large, deux
   liens qui tombent sur deux lignes voisines se retrouvaient a 7,8 px l'un de
   l'autre, sous le plancher de huit que mesure la sonde. Deux cibles qui se
   frolent se ratent au pouce — et ces pages-la sont les plus longues du site,
   ou l'oeil a le plus besoin d'air. */
.page-texte p,
.page-texte li {
  color: color-mix(in srgb, var(--craie) 80%, transparent);
  line-height: 1.6;
  max-width: 68ch;
}

.page-texte li {
  margin-bottom: 0.4rem;
}

/*
  Ce qui suit habille ce que le rendu markdown produit, et rien d'autre : les
  pages juridiques ne portent plus de HTML écrit à la main depuis le
  11 septembre. Voir assets/textes.js.
*/

.page-texte h3 {
  font-size: 1.05rem;
  margin: 1.8rem 0 0.5rem;
}

.page-texte ul {
  max-width: 68ch;
  padding-left: 1.2rem;
}

.page-texte blockquote {
  margin: 1.6rem 0;
  padding: 0.2rem 0 0.2rem 1.1rem;
  border-left: 2px solid color-mix(in srgb, var(--or) 45%, transparent);
}

.page-texte hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 2.6rem 0;
}

/*
  Le tableau défile dans sa propre bande plutôt que de pousser la page.

  Un tableau de trois colonnes ne tient pas dans 390 px, et c'est justement la
  largeur où l'on lit une politique de confidentialité — sur le téléphone qui
  vient de demander la position. Sans cette bande, c'est la page entière qui
  part de travers, et la sonde d'affichage le compte BLOQUE.
*/
.page-texte .tableau {
  overflow-x: auto;
  margin: 1.4rem 0;
  max-width: 68ch;
}

.page-texte table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: 0.93rem;
}

.page-texte th,
.page-texte td {
  border: 1px solid var(--filet);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  color: color-mix(in srgb, var(--craie) 80%, transparent);
}

.page-texte th {
  color: var(--craie);
  font-weight: 700;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- pied */

footer {
  border-top: 1px solid var(--filet);
  padding: 2.4rem 0 3rem;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--craie) 60%, transparent);
}

footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-bottom: 0.9rem;
}

footer a {
  color: color-mix(in srgb, var(--craie) 75%, transparent);
  text-decoration: none;
}

footer a:hover,
footer a:focus-visible {
  color: var(--craie);
}

/* Le mouvement sert à situer, pas à décorer : qui n'en veut pas s'en passe. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  #carte {
    display: none;
  }
}

/*
 * La séquence d'apparition de la marque, 1,6 s.
 *
 * Six temps : la lentille se dessine dans le sens horaire, le manche sort, le
 * coffre arrive au ressort, le couvercle s'entrouvre et se referme, un halo se
 * propage, le mot monte. Les mêmes durées et les mêmes courbes que
 * `apps/web-pro/src/index.css` et que l'écran de lancement de l'application.
 *
 * Dette consignée : trois copies, une par plateforme, faute d'un paquet de
 * design partagé — le site est servi tel quel, sans étape de construction.
 */
@keyframes logo-lentille {
  from {
    stroke-dashoffset: 220;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes logo-manche {
  from {
    stroke-dashoffset: 42;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes logo-coffre {
  from {
    transform: scale(0.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes logo-couvercle {
  0% {
    transform: rotate(0deg);
  }
  55% {
    transform: rotate(-38deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes logo-halo {
  0% {
    transform: scale(0.35);
    opacity: 0;
  }
  35% {
    opacity: 0.55;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@keyframes logo-mot {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.logo-marque {
  display: block;
  margin-bottom: 1.4rem;
}

.logo-marque svg {
  display: block;
  width: clamp(84px, 12vw, 116px);
  height: auto;
}

/* Le slogan monte avec le mot : « Sesam » est déjà là, il ne se répète pas. */
.logo-marque .logo-slogan {
  font-family: var(--ui);
  font-weight: 500;
  font-size: clamp(0.78rem, 1.5vw, 0.95rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
  margin: 0.35rem 0 0;
}

.logo-anime .logo-slogan {
  animation: logo-mot 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) 1.36s both;
}

@media (prefers-reduced-motion: reduce) {
  .logo-anime .logo-slogan {
    animation: logo-mot 0.6s ease both;
  }
}

.logo-marque .logo-mot {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.05;
  margin: 0.2rem 0 0;
  color: var(--craie);
}

/* Hors séquence, le halo n'est pas là : c'est un passage, pas une lueur. */
.logo-marque .logo-halo {
  opacity: 0;
}

.logo-anime .logo-lentille {
  stroke-dasharray: 220;
  animation: logo-lentille 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.logo-anime .logo-manche {
  stroke-dasharray: 42;
  animation: logo-manche 0.35s cubic-bezier(0.2, 0.8, 0.3, 1) 0.78s both;
}

.logo-anime .logo-coffre {
  transform-origin: 52px 56px;
  animation: logo-coffre 0.3s cubic-bezier(0.3, 1.6, 0.5, 1) 1.05s both;
}

.logo-anime .logo-couvercle {
  transform-origin: 52px 50px;
  animation: logo-couvercle 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) 1.3s both;
}

.logo-anime .logo-halo {
  transform-origin: 52px 52px;
  animation: logo-halo 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) 1.35s both;
}

.logo-anime .logo-mot {
  animation: logo-mot 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) 1.3s both;
}

@media (prefers-reduced-motion: reduce) {
  .logo-anime .logo-lentille,
  .logo-anime .logo-manche,
  .logo-anime .logo-coffre,
  .logo-anime .logo-couvercle,
  .logo-anime .logo-halo,
  .logo-anime .logo-mot {
    animation: logo-mot 0.6s ease both;
    stroke-dasharray: none;
  }
}

/* ------------------------------------------------ page de téléchargement */

/*
 * La page qui explique comment installer l'application hors magasin.
 *
 * Elle s'adresse à quelqu'un qui n'a jamais installé d'APK et qui va voir deux
 * écrans d'avertissement d'Android. Tout ce qui suit sert cette personne-là :
 * un bouton qu'on ne peut pas manquer, des étapes numérotées assez espacées
 * pour qu'on ne saute pas la deuxième, et une empreinte qu'on peut comparer
 * sans savoir ce qu'est une empreinte.
 */

.bloc-telechargement {
  margin: 2rem 0 3rem;
  padding: 1.5rem;
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  background: var(--verre);
  text-align: center;
}

.bouton-telecharger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 2rem;
  border-radius: var(--r-bouton);
  background: var(--or);
  color: var(--encre);
  font-family: var(--ui);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.bouton-telecharger[aria-disabled='true'] {
  background: var(--verre-fort);
  color: color-mix(in srgb, var(--craie) 55%, transparent);
  cursor: not-allowed;
}

.bloc-telechargement .detail {
  margin: 0.9rem auto 0;
  font-size: 0.92rem;
}

.bloc-telechargement .empreinte {
  margin: 1.1rem auto 0;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--craie) 55%, transparent);
}

.bloc-telechargement code,
.code-bloc code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.85em;
  word-break: break-all;
}

/* Les étapes : numérotées par le navigateur, espacées pour qu'on les lise. */
.etapes {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.etapes > li {
  margin-bottom: 2.2rem;
  padding-left: 0;
  /* La largeur de lecture appartient au texte, pas au pas.

     `.page-texte li` plafonne a 68ch, et c'est juste pour une puce qui est
     une phrase. Un pas de /telecharger, lui, contient un titre, deux
     paragraphes et un encadre de code : le plafond s'appliquait au pas
     entier, donc a l'encadre, qui s'arretait a 587 px la ou les blocs
     voisins vont a 780. La page paraissait de travers. Les paragraphes
     gardent leur 68ch chacun — c'est la qu'elle sert. */
  max-width: none;
}

.etapes h3 {
  font-family: var(--display);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--craie);
}

/*
 * La note en retrait : ce qu'on lit si l'on veut comprendre, et qu'on saute si
 * l'on veut seulement avancer. Le filet à gauche dit « ceci est un aparté ».
 */
.page-texte .note {
  margin-top: 0.8rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--filet);
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--craie) 60%, transparent);
}

.page-texte .code-bloc,
.code-bloc {
  /* Pleine largeur, comme les autres blocs de la page.

     Sans cela, l'encadré s'arrêtait à la longueur de son texte — 607 px là où
     les blocs voisins vont à 800 — et la page paraissait de travers. La sonde
     l'a bloqué sous la règle « les blocs d'un même écran partagent la même
     grille horizontale ». */
  display: block;
  /* Ni prose, ni 68ch : une ligne de code se lit entiere ou pas du tout. */
  max-width: none;
  padding: 0.75rem 1rem;
  border-radius: var(--r-bouton);
  background: var(--verre);
  border: 1px solid var(--filet);
}

.questions {
  margin: 0;
}

.questions dt {
  margin-top: 1.4rem;
  font-family: var(--ui);
  font-weight: 700;
  color: var(--craie);
}

.questions dd {
  margin: 0.35rem 0 0;
  max-width: 68ch;
  color: color-mix(in srgb, var(--craie) 80%, transparent);
}

.page-texte .retrait {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--filet);
}