/*
 * Vitrine de subsah.com (board 2026-08-06).
 *
 * Écrite à la main, sans outil de compilation : la page doit rester debout même
 * si l'API tombe, puisque c'est d'ici que partent les liens vers les CGU et la
 * politique de confidentialité exigés par Google.
 *
 * ⚠️ CHEMINS RELATIFS OBLIGATOIRES. Caddy préfixe toutes les requêtes de
 * subsah.com par « /site » (cf. docker/Caddyfile). Un chemin absolu comme
 * « /images/logo.png » deviendrait « /site/images/logo.png » et donnerait un
 * 404. Écrire « wordmark.png », jamais « /wordmark.png ».
 *
 * Structure : tout en blanc, un filet rouge sous l'en-tête, et un seul bloc
 * sombre — le pied de page.
 */

:root {
  --rouge: #DA3743;      /* accent de marque, identique à Brand.accent de l'app */
  --jaune: #FFC629;      /* accent secondaire */
  --ardoise: #314051;    /* fond du pied de page */
  --encre: #2B2B2B;
  --encre-douce: #5F6672;
  --trait: #E8E8E8;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Parkinsans, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--encre);
  background: #fff;
  line-height: 1.6;
  /* Évite que les mots-clés de la marque soient coupés sur mobile. */
  overflow-wrap: break-word;
}

.centre {
  width: min(1160px, 100% - 3rem);
  margin-inline: auto;
}

/* ── En-tête ───────────────────────────────────────────────────────────── */

.entete {
  /* Filet de séparation au rouge de la charte. UN pixel depuis le board
     2026-08-11 : à trois, il pesait comme un bandeau et coupait la page en
     deux. Un cheveu suffit à séparer, et laisse le rouge à l'accent. */
  border-bottom: 1px solid var(--rouge);
}

.entete .centre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
}

.logo img {
  display: block;
  height: 2.1rem;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav a {
  color: var(--encre);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.98rem;
}

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

.nav svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
}

/* ── Bandeau d'accroche ────────────────────────────────────────────────── */

.accroche .centre {
  /* Le carrousel est SEUL dans l'accroche depuis le board 2026-08-10 : le
     surtitre et le bouton « Bientôt sur Android » sont partis avec le titre et
     la maquette de téléphone.

     La marge a été REDUITE le 2026-08-11 : réglée pour compenser le départ des
     autres blocs, elle creusait un vide entre les phrases et les captures. */
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem);
}



/*
 * Bouton VOLONTAIREMENT inerte : l'app n'est pas encore publiée (board
 * 2026-08-06). Rendu en <span> et non en <a> — un lien qui ne mène nulle part
 * se fait cliquer, et le visiteur croit à une panne. Le jour de la publication,
 * il redevient un <a> vers le Play Store.
 */


/*
 * ⚠️ `height: auto` est INDISPENSABLE. Les balises portent width/height pour
 * réserver la place avant chargement (sans quoi la page sursaute), mais sans
 * cette règle le navigateur applique le `height` du HTML tel quel : l'image se
 * retrouvait large de 300 px et haute de 1266, donc étirée du simple au double.
 */
/* ── Carrousel d'accroche (board 2026-08-10) ───────────────────────────────
   Reprise à l'identique de la PAGE 2 DE L'ONBOARDING de l'app
   (`screens/auth-prompt-screen`) : les six mêmes phrases, et le même
   mouvement — la sortante descend en s'effaçant, la suivante arrive par le
   haut, JAMAIS les deux en même temps.

   Durées reprises telles quelles : 2,5 s d'immobilité, 240 ms pour sortir,
   320 ms pour entrer. Six phrases font donc un cycle de 18 s, chacune décalée
   de 3 s par un `animation-delay` négatif — négatif pour que le carrousel soit
   déjà en régime au chargement, sans première phrase qui attendrait son tour.

   Tout en CSS : la page ne charge aucun JavaScript. */
.carrousel {
  /* HAUTEUR FIXE de deux lignes, comme dans l'app. Ajustée au contenu, elle
     changerait à chaque phrase et ferait sauter tout ce qui suit. */
  position: relative;
  height: 2.5em;
  margin: 0;
  font-size: clamp(2.05rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
}

.carrousel span {
  position: absolute;
  inset: 0;
  /* CENTRÉ (board 2026-08-11), horizontalement ET verticalement. L'app les
     aligne à gauche, mais elle les pose au-dessus de deux boutons alignés à
     gauche eux aussi ; ici la phrase est seule sur toute la largeur.

     La boîte réserve DEUX lignes — deux des six phrases y tiennent, et une
     hauteur variable ferait sauter la page à chaque changement. Une phrase
     d'une seule ligne laissait donc une ligne vide SOUS elle ; centrée, elle
     répartit ce vide de part et d'autre. */
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  opacity: 0;
  animation: carrousel 18s infinite;
}

.carrousel span:nth-child(1) { animation-delay: 0s; }
.carrousel span:nth-child(2) { animation-delay: -15s; }
.carrousel span:nth-child(3) { animation-delay: -12s; }
.carrousel span:nth-child(4) { animation-delay: -9s; }
.carrousel span:nth-child(5) { animation-delay: -6s; }
.carrousel span:nth-child(6) { animation-delay: -3s; }

/*
  Un sixième du cycle par phrase, soit 16,67 %. Répartition, en pourcentage des
  18 secondes : 1,8 % pour entrer (320 ms), 13,9 % immobile (2,5 s), 1,3 % pour
  sortir (240 ms).

  Le retour en position haute se fait à 18 %, une fois la phrase invisible :
  sans cette étape, elle remonterait à l'écran en glissant à l'envers.
*/
@keyframes carrousel {
  0%              { opacity: 0; transform: translateY(-1.6rem); }
  1.8%            { opacity: 1; transform: translateY(0); }
  15.7%           { opacity: 1; transform: translateY(0); }
  17%             { opacity: 0; transform: translateY(1.6rem); }
  18%, 100%       { opacity: 0; transform: translateY(-1.6rem); }
}

/* Mouvement réduit demandé au niveau du système : la première phrase reste
   affichée, et rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .carrousel span {
    animation: none;
  }

  .carrousel span:first-child {
    opacity: 1;
  }
}

/* ── Trois colonnes ────────────────────────────────────────────────────── */

.atouts {
  padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(3.5rem, 8vw, 6rem);
}

.atouts ul {
  display: grid;
  /* QUATRE colonnes depuis le board 2026-08-11 : il y a quatre captures. */
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Panneau coloré qui RECADRE l'écran, au lieu de le montrer en entier : une
 * capture de téléphone fait deux fois sa largeur en hauteur, et trois colonnes
 * de cette taille donnaient une page interminable pour trois phrases. On n'en
 * montre que le haut, ce qui suffit à faire comprendre l'app.
 */
/*
  Les captures portent DÉJÀ leur cadre de téléphone et leur fond clair : on
  les affiche entières, sans rien autour.

  Le panneau coloré, l'ombre et le coin arrondi qui habillaient les aplats de
  remplacement ont sauté avec eux — sur une vraie capture, ils faisaient un
  téléphone dans un téléphone, et rognaient l'écran à mi-hauteur.
*/
.atout figure {
  margin: 0 0 1.25rem;
}

.atout figure img {
  display: block;
  width: 100%;
  height: auto;
}

.atout h2 {
  margin: 0 0 0.55rem;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.atout p {
  margin: 0;
  color: var(--encre-douce);
  font-size: 1.06rem;
  line-height: 1.55;
  /* Aucun `text-align` ici : la légende hérite du centrage de sa colonne.
     Elle a été justifiée un moment le 2026-08-11, sur un malentendu — la
     demande portait sur le carrousel, et « justifié » y voulait dire centré.
     Une colonne de 220 px justifiée ouvrait de toute façon des rivières
     blanches au milieu du paragraphe, même avec la césure automatique. */
}

/* ── Pied de page ──────────────────────────────────────────────────────── */

/*
 * Texte en BLANC sur l'ardoise, et non au rouge de marque : ce dernier n'y
 * atteint qu'un contraste de 2,3:1, soit la moitié du minimum lisible. Le rouge
 * reste présent — sur le filet de l'en-tête et les liens — là où il porte.
 */
/* ── Pied de page ──────────────────────────────────────────────────────────
   Trois colonnes puis une barre de mentions (board 2026-08-10). Il tenait sur
   une ligne avant, et ne disait presque rien : ni où trouver la FAQ, ni que
   l'app arrive sur les deux stores.

   L'ardoise est conservée. Un aplat au rouge de la marque viendrait concurrencer
   les accents rouges de la page, qui n'en ont qu'un seul à porter. */
.pied {
  background: var(--ardoise);
  color: #fff;
}

.pied-colonnes {
  display: grid;
  /* `auto-fit` + `minmax` : trois colonnes au large, deux puis une en
     descendant, sans une seule requête de média. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem 3rem;
  padding-block: 3.2rem;
  align-items: start;
}

/* Signature sous le wordmark : la même phrase que la première du carrousel. */
.pied-signature {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}

.pied-marque img {
  display: block;
  /* Plus petit que celui de l'en-tête (2,1 rem) : dans un pied de page, la
     marque rappelle, elle n'annonce pas. Réglée à vue : 2,6 rem écrasait les
     colonnes voisines, 1,3 rem se lisait à peine. Il est calé sur la HAUTEUR
     DES BADGES de la colonne d'en face — 40 px, soit 2,5 rem : les deux blocs
     se répondent au lieu de flotter chacun à sa taille.
     ROUGE et non blanc : sur l'ardoise, il ressort très bien. */
  height: 2.5rem;
  width: auto;
}


/* Les liens d'une colonne s'empilent : en ligne, ils se lisaient comme une
   seule phrase soulignée. */
.pied-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.pied-bloc h2 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
}

.pied-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/*
  Badges OFFICIELS des deux magasins, en SVG : ils restent nets à toute taille,
  et leur fond transparent se pose directement sur l'ardoise. Ils ont remplacé
  des JPEG dont il fallait détourer les coins.

  ⚠️ HAUTEURS DIFFÉRENTES, et c'est voulu. Le fichier de Google embarque sa
  marge de protection à l'intérieur du dessin, celui d'Apple non : à hauteur
  égale, le badge Google paraîtrait plus petit. L'écart les ramène à la même
  présence — réglé à l'œil, 47 px penchait trop de l'autre côté.

  Ils ne portent aucun lien tant que l'app n'est publiée nulle part.
*/
.pied-stores img {
  display: block;
  width: auto;
}

.badge-apple {
  height: 40px;
}

.badge-google {
  height: 43px;
}

.pied a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 1px;
}

.pied a:hover,
.pied a:focus-visible {
  border-bottom-color: #fff;
}

/* Barre de mentions, séparée par un filet clair plutôt que par une seconde
   couleur : un aplat de plus couperait le pied en deux. */
.pied-bas {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.pied-bas .centre {
  padding-block: 1.3rem;
}

.pied-bas p {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

/* ── Écrans étroits ────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  /* Le carrousel est déjà en pleine largeur : il ne reste qu'à lui laisser
     trois lignes, les phrases s'y repliant davantage sur un écran étroit. */
  .carrousel {
    height: 3.75em;
  }

  /* Deux colonnes sur tablette, une seule sur téléphone : quatre captures
     côte à côte deviendraient illisibles bien avant 860 px. */
  .atouts ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .atout {
    text-align: center;
  }

  /* Sur téléphone, les colonnes du pied s'empilent : on les centre pour
     qu'elles ne pendent pas à gauche sous un logo lui-même centré. */
  .pied-colonnes {
    justify-items: center;
    text-align: center;
  }

  .pied-bloc {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .atouts ul {
    grid-template-columns: 1fr;
    max-width: 22rem;
    margin-inline: auto;
  }

  .centre {
    width: calc(100% - 2.2rem);
  }

  .nav {
    gap: 1.15rem;
  }
}