/*
 * Famileaf : site vitrine (feuille de style unique).
 *
 * Palette, typographies, rayons, ombres et durées repris EXACTEMENT de
 * src/tokens.css (lecture seule, non modifié) : ce fichier définit un
 * sous-ensemble local des mêmes tokens pour que le site reste 100 %
 * autonome (aucune dépendance à src/, chemins relatifs uniquement).
 *
 * Contrainte sécurité : page 100 % statique. Cette feuille ne référence
 * aucune ressource distante (fonts locales, aucune image via CDN, aucun
 * @import réseau). Conforme à la CSP de index.html (style-src 'self').
 */

@import url('./fonts/fonts.css');

:root {
  /* --- Couleurs (cf. src/tokens.css) --- */
  --color-base:           #F7F7F7;
  --color-surface:        #FFFFFF;

  --color-text:           #364455;
  --color-text-sub:       #5C6A78;
  --color-text-on-accent: #FFFFFF;

  --color-primary:        #6E8EFB;
  --color-primary-light:  #C3CCFD;
  --color-primary-dark:   #5A75E1;

  --color-accent:         #2A9D8F;
  --color-accent-dark:    #248276;
  /* Variante texte du teal, plus sombre : --color-accent seul (2A9D8F) ne
     passe pas l'AA (~3.1:1) pour du texte normal/petit sur nos fonds clairs
     (F7F7F7 / blanc). Réservée aux libellés (eyebrow, liens) ; les usages
     décoratifs (fonds de badge, puces de liste, texte large >= 24px bold)
     restent sur --color-accent. Contrastes mesurés : 4.83:1 sur --color-base,
     5.18:1 sur blanc (AA texte normal). */
  --color-accent-text:    #1D7A6D;

  --color-warm:           #C8906C;
  --color-warm-light:     #EAC8B0;
  --color-warm-dark:      #A87050;

  --color-water-light:    #D0E4EE;

  --color-success:        #2A9D8F;

  --color-border-light:   #E2E6EA;

  /* --- Typographie --- */
  --font-body:    'Nunito', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Comfortaa', 'Nunito', 'Helvetica Neue', Arial, sans-serif;

  --text-xs:   13px;
  --text-sm:   15px;
  --text-base: 17px;
  --text-md:   19px;
  --text-lg:   23px;
  --text-xl:   30px;
  --text-2xl:  40px;

  --leading-tight:   1.2;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* --- Espacement (grille 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --page-pad: 20px;
  --page-max: 1080px;

  /* --- Rayons --- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* --- Ombres --- */
  --shadow-sm: 0 2px 8px rgba(54, 68, 85, 0.10);
  --shadow-md: 0 8px 20px rgba(54, 68, 85, 0.12);
  --shadow-lg: 0 16px 40px rgba(54, 68, 85, 0.16);
  --shadow-accent: 0 10px 24px rgba(110, 142, 251, 0.35);

  /* --- Durées / easing --- */
  --dur-fast:   180ms;
  --dur-normal: 280ms;
  --ease-std:   cubic-bezier(0.40, 0.00, 0.20, 1.00);
}

/* ================================================================== */
/* PILES DE POLICES PAR LANGUE (déclinaisons i18n du site)            */
/* ================================================================== */

/* Nunito et Comfortaa (site/fonts/) sont des sous-ensembles LATIN
 * uniquement (voir fonts/fonts.css, unicode-range U+0000-00FF etc.) : le
 * japonais, le coréen, le chinois traditionnel, le hindi (Devanagari) et
 * le cyrillique russe n'y sont couverts par AUCUNE des deux polices. Sans
 * repli explicite, le navigateur retomberait sur sa police système pour
 * CES caractères tout en gardant Nunito pour les chiffres/ponctuation
 * latine du reste de la page (mélange visuel disgracieux). On bascule
 * donc l'intégralité de la police (titres + corps) sur une pile système
 * sûre pour ces langues : AUCUNE fonte supplémentaire embarquée (poids
 * ajouté nul), system-ui/-apple-system suffisent sur iOS, Android et les
 * navigateurs de bureau récents pour ces scripts. Vérifié au rendu sans
 * caractère tofu (voir rapport). */
html[lang="ja"] {
  --font-body: system-ui, -apple-system, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif;
  --font-display: var(--font-body);
}

html[lang="ko"] {
  --font-body: system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  --font-display: var(--font-body);
}

html[lang="zh-Hant"] {
  --font-body: system-ui, -apple-system, 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  --font-display: var(--font-body);
}

html[lang="hi"] {
  --font-body: system-ui, -apple-system, 'Noto Sans Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', sans-serif;
  --font-display: var(--font-body);
}

html[lang="ru"] {
  --font-body: system-ui, -apple-system, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-display: var(--font-body);
}

/* ================================================================== */
/* RESET MINIMAL                                                      */
/* ================================================================== */

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

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Défilement par sections aimantées (retouche PO) : chaque grand bloc
   * (hero, fonctionnalités, prix, pied de page) se cale proprement au
   * scroll. Appliqué sur la racine (portée par le document tout entier,
   * header inclus, qui n'est pas lui-même une cible d'aimantation).
   *
   * "proximity" et non "mandatory" : testé en conditions réelles à
   * 390x844, la carte Premium (mascotte + Gratuit + Mensuel/Annuel +
   * liste) dépasse largement 100svh sur mobile, impossible à faire
   * tenir sans sacrifier la lisibilité des prix. Avec "mandatory", le
   * défilement se serait retrouvé piégé : impossible de lire la carte
   * Premium en entier sans être aimanté de force au repère suivant.
   * "proximity" garde l'effet aimanté agréable là où une section tient
   * dans l'écran (hero, fonctionnalités) sans jamais bloquer le
   * défilement libre là où le contenu déborde (prix). */
  scroll-snap-type: y proximity;
}

/* Desktop : les trois sections tiennent toujours dans la vue (verifie a
 * 1440x900, 1536x730, 1920x950) : aimantation STRICTE, on ne peut plus se
 * poser entre deux aimants (retour PO : le titre de la section suivante
 * apparaissait sur des positions intermediaires). Mobile et petites
 * fenetres gardent proximity (la carte Premium peut depasser 100svh). */
@media (min-width: 960px) and (min-height: 700px) {
  html {
    scroll-snap-type: y mandatory;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-base);
  color: var(--color-text);
  min-width: 280px;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  /* Les attributs width/height HTML (anti-CLS) fixent un ratio ; sans
   * height:auto, un conteneur plus etroit ecrase l'image (deformation
   * constatee par le PO sur le hero). */
  height: auto;
  display: block;
}

a {
  color: inherit;
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

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

/* ================================================================== */
/* EN-TÊTE                                                            */
/* ================================================================== */

.site-header {
  padding-block: var(--space-5);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.wordmark__leaf {
  color: var(--color-accent);
}

.site-nav__list {
  display: flex;
  gap: var(--space-6);
}

.site-nav__link {
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--color-text-sub);
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-std),
              border-color var(--dur-fast) var(--ease-std);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--color-accent-text);
  border-color: var(--color-accent);
}

/* Regroupe la nav et le sélecteur de langue à droite de l'en-tête, pour
 * que .site-header__row garde exactement deux blocs (wordmark / actions)
 * de part et d'autre du justify-content: space-between. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* En dessous de 720px, la nav à plat + le sélecteur de langue laissent
 * place au menu hamburger (voir .mobile-menu plus bas) : jamais les deux
 * à la fois. Desktop garde les liens à plat (13 langues au sélecteur y
 * restent lisibles en dropdown, pas besoin d'un hamburger avec autant
 * d'espace disponible). */
@media (max-width: 719.98px) {
  .site-header__actions {
    display: none;
  }
}

/* --- Sélecteur de langue (13 langues) : menu déroulant en HTML/CSS pur
 * (<details>/<summary>, AUCUN JavaScript), en haut à droite de l'en-tête.
 * Repli fermé par défaut : un simple bouton compact (drapeau + langue
 * courante), pour ne jamais peser sur le budget vertical du hero mobile
 * (voir .intro-viewport, 100svh strict). Drapeaux vendorisés localement
 * aux bords arrondis (voir assets/flags/, licence MIT flag-icons), noms
 * natifs, langue courante non cliquable (<span>, pas de lien vers la page
 * déjà affichée). --- */
.lang-switcher {
  position: relative;
}

.lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}

.lang-switcher__toggle::-webkit-details-marker {
  display: none;
}

.lang-switcher__chevron {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--color-text-sub);
  border-bottom: 1.5px solid var(--color-text-sub);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-std);
}

.lang-switcher[open] .lang-switcher__chevron {
  transform: rotate(-135deg);
}

.lang-switcher__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 30;
  /* Largeur EXPLICITE (retouche : une grille à pistes 1fr en position
   * absolute/largeur auto ne se dimensionne pas de façon fiable sur tous
   * les moteurs, constaté au rendu : repli en une seule colonne trop
   * étroite). 264px = 2 colonnes de 120px + l'entrefer + le padding. */
  width: 292px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: var(--space-2);
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 70svh;
  overflow-y: auto;
}

@media (max-width: 479.98px) {
  .lang-switcher__panel {
    width: min(220px, 78vw);
    grid-template-columns: 1fr;
    right: calc(var(--page-pad) * -1);
  }
}

.lang-switcher__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-sub);
  white-space: nowrap;
}

a.lang-switcher__link:hover,
a.lang-switcher__link:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.lang-switcher__link--current {
  background: var(--color-base);
  color: var(--color-text);
  font-weight: 700;
}

.lang-switcher__flag {
  width: 20px;
  height: 15px;
  border-radius: 4px;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(54, 68, 85, 0.14);
}

/* --- Menu hamburger mobile (< 720px) : regroupe Fonctionnalités, Prix ET
 * le sélecteur de langue derrière une seule icône. PUR CSS, AUCUN
 * JavaScript : motif "checkbox caché + label" (la checkbox porte l'état
 * ouvert/fermé, le label = icône 3 barres qui la bascule, le panneau se
 * révèle via :checked ~ .mobile-menu__panel). La checkbox reste dans le
 * flux d'accessibilité (.visually-hidden : ni display:none ni
 * visibility:hidden, qui la retireraient de la navigation clavier), donc
 * focusable et activable au clavier (Entrée/Espace) comme à la souris,
 * exactement comme une vraie case à cocher. --- */
.mobile-menu {
  display: none;
}

@media (max-width: 719.98px) {
  .mobile-menu {
    display: block;
    position: relative;
  }
}

.mobile-menu__toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  background: var(--color-surface);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.mobile-menu__bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  transition: transform var(--dur-fast) var(--ease-std),
              opacity var(--dur-fast) var(--ease-std);
}

/* Barres -> croix quand ouvert (transforme l'icône sans JS : le sibling
 * general ~ lit l'état :checked de la checkbox qui précède ces deux
 * éléments dans le DOM). */
.mobile-menu__checkbox:checked ~ .mobile-menu__toggle .mobile-menu__bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu__checkbox:checked ~ .mobile-menu__toggle .mobile-menu__bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu__checkbox:checked ~ .mobile-menu__toggle .mobile-menu__bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-menu__checkbox:focus-visible ~ .mobile-menu__toggle {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mobile-menu__panel {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 30;
  width: min(320px, 86vw);
  max-height: 75svh;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.mobile-menu__checkbox:checked ~ .mobile-menu__panel {
  display: block;
}

.mobile-menu__nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-menu__nav-list a {
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
}

.mobile-menu__nav-list a:hover,
.mobile-menu__nav-list a:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.mobile-menu__lang-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* "Bahasa Indonesia" (le nom natif le plus long des 13) se coupait encore
 * en deux colonnes sous ~400px : une seule colonne en dessous de ce
 * palier, toujours 100 % lisible. */
@media (max-width: 399.98px) {
  .mobile-menu__lang-list {
    grid-template-columns: 1fr;
  }
}

/* ================================================================== */
/* HERO                                                                */
/* ================================================================== */

/* Conteneur header + hero (retouche PO, aimant vertical) : colonne flex de
 * hauteur PLANCHER 100svh (min-height, jamais height : un petit ecran ou un
 * header qui passe sur deux lignes peut toujours pousser le bloc plus haut,
 * rien n'est jamais coupe). Le header garde sa hauteur de contenu naturelle
 * (flex-shrink: 0) et le hero se voit attribuer TOUT l'espace restant via
 * flex-grow : plus d'arithmetique "100svh - Xpx" a recalculer a la main des
 * que la hauteur reelle du header change (retrait de nav, agrandissement de
 * police, etc.) - la section suivante ne peut plus jamais deborder de
 * quelques pixels dans la premiere vue. */
.intro-viewport {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

.site-header {
  flex-shrink: 0;
}

.hero {
  position: relative;
  padding-block: var(--space-8) var(--space-12);
  overflow: hidden;
  /* Remplit exactement l'espace restant sous le header dans .intro-viewport
   * (voir commentaire ci-dessus). min-height: auto (valeur initiale, pas de
   * surcharge) laisse le contenu pousser le bloc plus haut que l'espace
   * disponible si necessaire, sans jamais l'ecraser. */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  /* L'aimant de la premiere vue est porte par .intro-viewport (le bloc
   * header+hero ENTIER, qui commence a y=0). Le poser ICI faisait defiler
   * la page de la hauteur du header a l'arrivee en aimantation stricte :
   * header ejecte par le haut, titre de la section suivante visible en bas
   * (bug constate par le PO). */
}

.hero > .container {
  width: 100%;
}

.hero__blob {
  position: absolute;
  z-index: 0;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: blur(2px);
  pointer-events: none;
}

/* Blobs FLOTTANTS entiers (retouche PO : plus jamais decoupes par le bord).
 * Derive organique lente : translation + legere respiration du contour.
 * Desactivee si l'utilisateur prefere reduire les animations. */
@media (prefers-reduced-motion: no-preference) {
  .hero__blob--periwinkle { animation: blob-drift 9s ease-in-out infinite; }
  .hero__blob--water      { animation: blob-drift 11s ease-in-out infinite reverse; }
}

@keyframes blob-drift {
  0%, 100% {
    transform: translate(0, 0);
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  }
  50% {
    transform: translate(-14px, 12px);
    border-radius: 55% 45% 40% 60% / 50% 55% 45% 50%;
  }
}

.hero__blob--periwinkle {
  width: 300px;
  height: 300px;
  top: 28px;
  right: 4vw;
  background: var(--color-primary-light);
  opacity: 0.55;
}

.hero__blob--water {
  width: 240px;
  height: 240px;
  bottom: 24px;
  left: 4vw;
  background: var(--color-water-light);
  opacity: 0.6;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.hero__copy {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.hero__title {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

.hero__subtitle {
  font-size: var(--text-md);
  color: var(--color-text-sub);
  max-width: 46ch;
}

.hero__art {
  width: min(340px, 72vw);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__art img {
    animation: hero-float 5.5s var(--ease-std) infinite;
  }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Réorganisation du hero en mobile (retouche PO) : la mascotte passe
 * AU-DESSUS du titre, nettement plus petite, pour que l'essentiel (titre,
 * sous-titre, badges) tienne dans la première vue sans scroll interne du
 * hero. Uniquement en dessous de 720px (juste avant que .hero__inner passe
 * en ligne) : l'ordre DOM et la taille de l'illustration en desktop restent
 * STRICTEMENT inchangés, cette règle ne s'applique jamais à partir de
 * 720px (voir @media (min-width: 720px) plus bas, qui repasse en ligne). */
@media (max-width: 719.98px) {
  .hero__inner {
    gap: var(--space-5);
  }

  .hero__art {
    order: -1;
    width: min(230px, 52vw);
  }

  .hero__copy {
    gap: var(--space-4);
  }

  /* Polices resserrées d'un cran en mobile (retouche PO) : le titre en
   * --text-2xl (40px) forçait 3 lignes sur un iPhone standard. Baissé
   * ainsi, l'illustration peut grandir juste au-dessus sans faire déborder
   * la première vue (voir aussi le header en menu hamburger ci-dessous,
   * qui rend de la hauteur en repassant sur une seule ligne). */
  .hero__title {
    font-size: 32px;
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }
}

/* --- Badges de disponibilité --- */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: center;
}

/* Badge officiel "Disponible sur Google Play" (retouche PO : remplace
 * l'ancien badge dessiné en CSS). Image NON modifiée (règles de marque
 * Google Play : pas de recadrage, pas de recoloration), une variante
 * localisée par langue du site (voir assets/badges/, 13 fichiers, un par
 * langue, README de provenance dans ce dossier). Dimensionnée par la
 * HAUTEUR uniquement (comme le châssis de téléphone du carrousel) : jamais
 * sous 40px, conformément aux règles de marque. */
.badge-google-play {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: transform var(--dur-fast) var(--ease-std);
}

.badge-google-play:hover,
.badge-google-play:focus-visible {
  transform: translateY(-2px);
}

.badge-google-play img {
  height: 56px;
  width: auto;
  display: block;
}

@media (max-width: 719.98px) {
  .badge-google-play img {
    height: 46px;
  }
}

.chip-ios {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1.5px dashed var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text-sub);
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--color-surface);
}

/* ================================================================== */
/* SECTIONS GÉNÉRIQUES                                                */
/* ================================================================== */

section {
  padding-block: var(--space-12);
}

.section__eyebrow {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-2);
}

.section__title {
  text-align: center;
  font-size: var(--text-xl);
  margin-bottom: var(--space-10);
}

/* ================================================================== */
/* FONCTIONNALITÉS : CARROUSEL DE CAPTURES D'ÉCRAN                    */
/* ================================================================== */

/* Plein écran comme le hero (retouche PO) : titre de section ancré en
 * haut, piste du carrousel centrée dans l'espace restant, indication de
 * glisse toujours visible sans avoir à faire défiler la PAGE. min-height
 * (jamais height) : si le contenu a besoin de plus de place, il pousse. */
.fonctionnalites {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: var(--space-4);
  scroll-snap-align: start;
}

.fonctionnalites .section__title {
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.fonctionnalites .section__eyebrow {
  flex-shrink: 0;
}

/* Piste de défilement horizontal en CSS pur : overflow-x + scroll-snap.
 * overflow-y: hidden (rien à faire défiler verticalement dans la piste)
 * permet aux navigateurs de rediriger la molette verticale en défilement
 * horizontal ; les gestes tactiles et trackpad fonctionnent nativement.
 * Cette piste est un conteneur de scroll INDÉPENDANT (axe x) de
 * l'aimantation verticale de la page (axe y) : les deux cohabitent sans
 * jamais se déclencher l'un l'autre. */

.carousel {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}

.carousel__viewport {
  position: relative;
  /* Fenêtre du carrousel (retouche PO, diaporama automatique) : rogne tout
   * ce qui dépasse horizontalement de la piste, qui n'est plus un
   * conteneur de défilement natif mais une bande animée par transform
   * (voir .carousel__track). Le padding-block anti-rognage de l'ombre du
   * châssis reste posé sur .carousel__track lui-même (padding = espace
   * DANS la boîte qui déborde), donc rien n'est coupé verticalement :
   * .carousel__viewport s'ajuste en hauteur (auto) exactement à cette
   * boîte, overflow: hidden ne rogne alors QUE l'axe horizontal. */
  overflow: hidden;
}

/* Fondus dégradés sur les bords de la piste, signalant qu'il y a plus de
 * contenu de part et d'autre. Purement décoratifs (pointer-events: none). */
.carousel__viewport::before,
.carousel__viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: var(--space-4);
  width: 36px;
  z-index: 2;
  pointer-events: none;
}

.carousel__viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--color-base), rgba(247, 247, 247, 0));
}

.carousel__viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--color-base), rgba(247, 247, 247, 0));
}

.carousel__track {
  display: flex;
  /* AUCUN padding-inline (mêmes raisons qu'avant) : sur une piste qui
   * déborde toujours de 9 diapositives pleine largeur, en mettre ici
   * ferait « fuiter » quelques pixels de la suivante. Le padding-block
   * ci-dessous reste indispensable dans les DEUX modes : c'est la place
   * où respire l'ombre du châssis (--shadow-lg, ~24px au-dessus / ~56px
   * en dessous) sans être rognée par le overflow: hidden désormais posé
   * sur .carousel__viewport (voir plus haut). */
  padding-block: 24px 48px;

  /* Une seule diapositive visible à la fois : chaque .carousel__slide
   * occupe toute la largeur utile de la piste, rien ne dépasse sur les
   * côtés. */
  counter-reset: fl-slide;

  /* Diaporama automatique (retouche PO), CSS pur : la piste n'est plus un
   * conteneur de défilement natif mais une bande continue animée par
   * transform (voir @keyframes carousel-autoplay). 9 diapositives, pause
   * ~5 s puis glissement ~0,7 s chacune, cycle total 9 x 5,7 s = 51,3 s.
   * Repris en scroll-snap manuel dans la branche
   * prefers-reduced-motion: reduce plus bas (aucun autoplay dans ce cas). */
  animation: carousel-autoplay 51.3s linear infinite;
}

/* Pause à l'interaction (retouche PO) : la piste ET la barre de
 * progression partagent le même déclencheur, le conteneur .carousel
 * (parent commun), donc elles se figent et repartent TOUJOURS ensemble,
 * jamais l'une sans l'autre. */
.carousel:hover .carousel__track,
.carousel:active .carousel__track,
.carousel:focus-within .carousel__track,
.carousel:hover .carousel__progress-fill,
.carousel:active .carousel__progress-fill,
.carousel:focus-within .carousel__progress-fill {
  animation-play-state: paused;
}

/* 9 paliers de translation, un par diapositive (0 %, -100 %, -200 %, ...,
 * -800 %, en pourcentage de la largeur PROPRE de la piste : chaque
 * diapositive vaut déjà 100 % de cette largeur, donc translateX(-100%)
 * avance exactement d'une diapositive). Chaque palier est un couple de
 * repères à la MÊME valeur (début et fin de la pause) : l'interpolation
 * linéaire automatique entre deux paliers consécutifs de valeurs
 * différentes produit le glissement de ~0,7 s, sans keyframe dédiée. */
@keyframes carousel-autoplay {
  0%       { transform: translateX(0%); }     /* diapo 1 : début pause */
  9.747%   { transform: translateX(0%); }     /* diapo 1 : fin pause */
  11.111%  { transform: translateX(-100%); }  /* diapo 2 : début pause */
  20.858%  { transform: translateX(-100%); }  /* diapo 2 : fin pause */
  22.222%  { transform: translateX(-200%); }  /* diapo 3 : début pause */
  31.969%  { transform: translateX(-200%); }  /* diapo 3 : fin pause */
  33.333%  { transform: translateX(-300%); }  /* diapo 4 : début pause */
  43.08%   { transform: translateX(-300%); }  /* diapo 4 : fin pause */
  44.444%  { transform: translateX(-400%); }  /* diapo 5 : début pause */
  54.191%  { transform: translateX(-400%); }  /* diapo 5 : fin pause */
  55.556%  { transform: translateX(-500%); }  /* diapo 6 : début pause */
  65.302%  { transform: translateX(-500%); }  /* diapo 6 : fin pause */
  66.667%  { transform: translateX(-600%); }  /* diapo 7 : début pause */
  76.413%  { transform: translateX(-600%); }  /* diapo 7 : fin pause */
  77.778%  { transform: translateX(-700%); }  /* diapo 8 : début pause */
  87.524%  { transform: translateX(-700%); }  /* diapo 8 : fin pause */
  88.889%  { transform: translateX(-800%); }  /* diapo 9 : début pause */
  98.635%  { transform: translateX(-800%); }  /* diapo 9 : fin pause */
  100%     { transform: translateX(0%); }     /* boucle -> diapo 1 */
}

/* --- Barre de progression fine, pilule, sous le smartphone (retouche PO) :
 * une seule animation locale de durée = UN palier (5,7 s = 5 s de pause +
 * 0,7 s de glissement), en boucle infinie. Choix documenté : c'est le plus
 * robuste des deux motifs proposés, parce que sa période (5,7 s) divise
 * EXACTEMENT le cycle complet de la piste (51,3 s = 9 x 5,7 s) - démarrées
 * en même temps au chargement (aucun délai sur l'une ou l'autre), les deux
 * horloges CSS restent forcément en phase pour toujours, sans avoir à
 * ré-écrire 9 segments de remplissage à la main (source d'erreur si le
 * cycle de la piste est un jour retouché). --- */
.carousel__progress {
  width: min(220px, 60%);
  height: 6px;
  margin-inline: auto;
  flex-shrink: 0;
  background: var(--color-border-light);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.carousel__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  animation: carousel-progress-fill 5.7s linear infinite;
}

@keyframes carousel-progress-fill {
  0%      { width: 0%; }   /* début de la pause de la diapositive */
  87.719% { width: 100%; } /* fin de la pause (5 s / 5,7 s du palier) */
  100%    { width: 100%; } /* pleine pendant le glissement de 0,7 s */
}

.carousel__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  counter-increment: fl-slide;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.carousel__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 380px;
}

.carousel__index {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent-text);
}

.carousel__index::before {
  content: counter(fl-slide) " / 9";
}

.carousel__title {
  font-size: var(--text-lg);
}

.carousel__text {
  color: var(--color-text-sub);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* --- Indication de glisse (chevrons + « Glisse pour découvrir l'appli ») :
 * n'a plus de sens en diaporama automatique, personne ne glisse plus rien
 * (retouche PO). Masquée par défaut, reprise telle quelle (statique, sans
 * nudge animé) uniquement dans la branche manuelle
 * prefers-reduced-motion: reduce plus bas. --- */

.carousel__hint {
  display: none;
}

.carousel__chevron {
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-accent);
  border-right: 1.5px solid var(--color-accent);
  opacity: 0.7;
}

.carousel__chevron--left {
  transform: rotate(-135deg);
}

.carousel__chevron--right {
  transform: rotate(45deg);
}

/* Compacité mobile du carrousel (retouche PO) : le téléphone est agrandi
 * (voir .phone-frame plus haut, 58svh) donc titre/texte de diapositive
 * descendent d'un cran et la piste resserre ses marges verticales, pour
 * que téléphone + titre + description + barre de progression tiennent
 * ensemble dans la première vue (390x844 ET 360x740, vérifié au rendu).
 * Desktop (>= 720px) : aucune de ces règles ne s'applique. */
@media (max-width: 719.98px) {
  .carousel__slide {
    gap: var(--space-4);
  }

  .carousel__copy {
    gap: 2px;
  }

  .carousel__title {
    font-size: 20px;
    line-height: 1.25;
  }

  .carousel__text {
    font-size: 14px;
    line-height: 1.4;
  }

  .carousel__track {
    /* Anti-rognage de l'ombre du châssis (--shadow-lg) réduit mais pas
     * supprimé : juste assez pour ne pas la couper net. */
    padding-block: 12px 20px;
  }

  .carousel {
    gap: var(--space-1);
  }
}

/* Palier supplémentaire pour les tout petits écrans (ex. 360x740) : les
 * titres longs (notamment en allemand/russe) passent sur une ligne de
 * plus dès que la largeur redescend sous ~380px, ce qui suffit à faire
 * déborder légèrement la première vue. On resserre encore un peu (jamais
 * en dessous de 719.98px, jamais sur desktop). Le débord résiduel éventuel
 * reste un défilement NATUREL (scroll-snap-type: y proximity sur mobile,
 * jamais mandatory) : rien ne bloque jamais l'utilisateur. */
@media (max-width: 379.98px) {
  .fonctionnalites .section__title {
    font-size: 26px;
  }

  .phone-frame {
    height: min(52svh, 460px);
  }

  .carousel__title {
    font-size: 18px;
  }

  .carousel__text {
    font-size: 13px;
    line-height: 1.35;
  }
}

/* --- Repli manuel (retouche PO) : prefers-reduced-motion: reduce désactive
 * le diaporama automatique et retombe sur le défilement horizontal MANUEL
 * scroll-snap d'origine. C'est la branche qui garde le CSS manuel existant
 * (overflow-x + scroll-snap-type + scrollbar), inversée par rapport au
 * reste de la page : ici, la version « no-preference » (sans media query,
 * ci-dessus) est la version ANIMÉE par défaut, et cette branche restaure la
 * version statique/manuelle pour qui préfère moins de mouvement. --- */
@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    animation: none;
    overflow-x: auto;
    /* overflow-y ne peut pas rester visible (l'axe x seul doit défiler),
     * donc la piste ROGNE tout débord vertical : l'ombre du châssis vit
     * entièrement dans le padding-block (inchangé, toujours en place). */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;

    /* Scrollbar fine et discrète plutôt que masquée : garde une affordance
     * native visible sans jamais concurrencer le contenu. */
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-light) transparent;
  }

  .carousel__track::-webkit-scrollbar {
    height: 6px;
  }

  .carousel__track::-webkit-scrollbar-track {
    background: transparent;
  }

  .carousel__track::-webkit-scrollbar-thumb {
    background: var(--color-border-light);
    border-radius: var(--radius-pill);
  }

  .carousel__slide {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .carousel__progress {
    display: none;
  }

  .carousel__progress-fill {
    animation: none;
  }

  .carousel__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-shrink: 0;
    color: var(--color-text-sub);
    font-size: var(--text-xs);
    font-weight: 600;
  }
}

/* --- Châssis de smartphone : bezel fin, coins très arrondis, caméra
 * poinçon, boutons latéraux suggérés, reflet doux et ombre légère. --- */

.phone-frame {
  position: relative;
  /* Dimensionné par la HAUTEUR (pas la largeur) : le téléphone est la
   * vedette de chaque diapositive et doit exploiter l'espace vertical
   * disponible plutôt que rester à taille fixe quel que soit l'écran.
   * aspect-ratio = proportions EXTERNES du châssis (écran 640x1387 +
   * liseré de 7px de chaque côté) ; la largeur s'en déduit automatiquement,
   * jamais assez grande pour justifier de régénérer des captures plus
   * larges que 640px (~180-290px de large affiché selon la coupure).
   * Valeur mobile (< 720px) relevée à 58svh (retouche PO) : le téléphone
   * est vraiment la vedette de la vue mobile ; voir @media (max-width:
   * 719.98px) plus bas pour le reste de la compacité qui lui fait de la
   * place (titres/texte de diapositive resserrés, marges réduites). */
  height: min(58svh, 460px);
  aspect-ratio: 654 / 1401;
  padding: 7px;
  background: linear-gradient(155deg, #4C5C72 0%, #313D4D 55%, #212A35 100%);
  border-radius: calc(var(--radius-xl) + 8px);
  box-shadow: var(--shadow-lg);
  flex-shrink: 0;
}

/* Boutons latéraux suggérés : un bouton d'alimentation à droite, deux
 * boutons de volume à gauche (dupliqué via box-shadow sur ::after). */
.phone-frame::before {
  content: "";
  position: absolute;
  top: 26%;
  right: -2px;
  width: 3px;
  height: 15%;
  min-height: 34px;
  background: #1A2029;
  border-radius: 2px 0 0 2px;
}

.phone-frame::after {
  content: "";
  position: absolute;
  top: 20%;
  left: -2px;
  width: 3px;
  height: 9%;
  min-height: 22px;
  background: #1A2029;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 15% 0 #1A2029;
}

.phone-frame__camera {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #57667B, #10141A 72%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.phone-frame__screen {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-xl) + 8px - 5px);
  background: var(--color-base);
  line-height: 0;
}

.phone-frame__screen img {
  width: 100%;
  height: auto;
}

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

.pricing {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
}

/* Mascotte à côté des cartes (jamais dedans) : accompagne la section sans
 * toucher aux cartes elles-mêmes. Empilée sobrement au-dessus du bloc de
 * cartes en mobile/tablette, à côté en grand desktop. */
.pricing__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 980px;
  margin-inline: auto;
}

.pricing__mascot {
  width: 120px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pricing__mascot {
    animation: hero-float 5.5s var(--ease-std) infinite;
  }
}

.pricing__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
}

.price-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.price-card--premium {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
}

.price-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
}

/* --- Palier gratuit : bandeau compact et secondaire (retouche PO), jamais
 * au même gabarit que la carte Premium. Une ligne sur desktop, s'enroule
 * sur deux lignes sur mobile sans jamais adopter le traitement "carte". --- */

.price-free-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  text-align: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1.5px dashed var(--color-border-light);
  color: var(--color-text-sub);
  font-size: var(--text-sm);
}

.price-free-banner__label {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
}

.price-free-banner__amount {
  font-weight: 700;
  color: var(--color-accent-text);
}

.price-free-banner__text {
  color: var(--color-text-sub);
}

/* --- Deux formules Premium côte à côte (mensuel sobre / annuel en
 * vedette) : reprend fidèlement le motif de l'écran d'abonnement de
 * l'app (src/subscription.html + src/styles/subscription.css,
 * .sub-plan-card / .sub-plan-card--highlight) pour une cohérence
 * visuelle totale entre le site et le produit. --- */

.price-card__plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-block: var(--space-1) var(--space-2);
}

.price-card__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-1);
  background: var(--color-base);
  border: 1.5px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-2) var(--space-3);
}

.price-card__plan--yearly {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.price-card__badge {
  position: absolute;
  top: calc(var(--space-2) * -1);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-on-accent);
  background: var(--color-warm-dark);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.price-card__plan-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-sub);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.price-card__plan--yearly .price-card__plan-label {
  color: var(--color-primary-dark);
}

.price-card__plan-price {
  display: flex;
  /* Retouche PO : la periode (/ mois, / an) se place DERRIERE le montant,
   * sur la meme ligne, alignee sur la ligne de base, jamais en dessous. */
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  line-height: 1.15;
  margin-top: var(--space-1);
}

.price-card__plan-amount {
  font-family: var(--font-display);
  font-weight: 700;
  /* Plafond abaissé à 20px (au lieu de --text-lg/23px) : à ce gabarit de
   * carte (deux formules côte à côte), "2,99 EUR" à 23px déborde la largeur
   * disponible et se coupe entre le chiffre et l'unité malgré le
   * &nbsp; (repli sur overflow-wrap). 20px est le plus grand palier qui
   * tient sur une seule ligne, mesuré au rendu, desktop et mobile. */
  font-size: clamp(15px, 5vw, 20px);
  line-height: 1.1;
  color: var(--color-text);
  overflow-wrap: break-word;
  max-width: 100%;
}

.price-card__plan--yearly .price-card__plan-amount {
  color: var(--color-primary-dark);
}

.price-card__plan-period {
  /* Retouche PO (polish mobile) : "/ mois" ne doit jamais passer seul à la
   * ligne sous le montant (constaté en 390px). white-space: nowrap
   * empêche le retour à la ligne À L'INTÉRIEUR du libellé lui-même ; le
   * clamp légèrement abaissé sur .price-card__plan-amount (ci-dessus)
   * laisse assez de place pour que les DEUX tiennent côte à côte jusqu'à
   * 320px (vérifié au rendu). */
  white-space: nowrap;
  font-size: var(--text-xs);
  color: var(--color-text-sub);
  font-weight: 600;
}

.price-card__plan-note {
  font-size: var(--text-xs);
  color: var(--color-text-sub);
}

.price-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-sub);
  font-size: var(--text-sm);
}

.price-card__list li {
  padding-left: var(--space-5);
  position: relative;
}

.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.pricing__note {
  text-align: center;
  color: var(--color-text-sub);
  font-size: var(--text-sm);
  max-width: 46ch;
  margin: var(--space-6) auto 0;
}

/* Compacité mobile de #prix (retouche PO, "scroll bizarre" constaté) : la
 * section (mascotte + carte Premium 2 formules + 5 items + bandeau Gratuit
 * + note) dépassait largement 100svh en mobile ; combinée à
 * min-height: 100svh + scroll-snap-align: start, l'excédent produisait un
 * arrêt intermédiaire inconfortable entre l'aimant de #prix et celui du
 * pied de page. On resserre les espacements et on réduit nettement la
 * mascotte pour que la section tienne (au plus près) dans une vue mobile ;
 * min-height repasse à auto (jamais 100svh figé) : s'il reste malgré tout
 * un peu de débord sur les tout petits écrans, le défilement est NATUREL
 * (scroll-snap-type reste "proximity" sur mobile, voir html plus haut :
 * jamais de blocage façon "mandatory"). Desktop (>= 720px) strictement
 * inchangé (voir @media (min-width: 960px) plus bas, non touché). */
@media (max-width: 719.98px) {
  .pricing {
    min-height: auto;
    padding-block: var(--space-8) var(--space-6);
  }

  .pricing__layout {
    gap: var(--space-4);
  }

  .pricing__mascot {
    width: 64px;
  }

  .pricing .section__title {
    margin-bottom: var(--space-4);
  }

  .pricing__grid {
    gap: var(--space-4);
  }

  .price-card {
    padding: var(--space-5) var(--space-4);
    gap: var(--space-2);
  }

  .price-card__plans {
    margin-block: var(--space-1);
  }

  .price-card__list {
    gap: 6px;
    font-size: 13px;
  }

  .price-free-banner {
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
  }

  .pricing__note {
    margin-top: var(--space-4);
    font-size: 13px;
  }
}

/* ================================================================== */
/* PIED DE PAGE                                                       */
/* ================================================================== */

.site-footer {
  padding-block: var(--space-10) var(--space-12);
  border-top: 1px solid var(--color-border-light);
  /* Plus petit qu'un écran : s'aimante par le BAS (fin de piste) plutôt
   * que par le haut, pour ne jamais laisser un demi-écran vide piégé
   * entre la fin de #prix et le pied de page. */
  scroll-snap-align: end;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.site-footer__mascot {
  width: 56px;
}

.site-footer__brand {
  font-weight: 700;
  color: var(--color-text);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  font-size: var(--text-sm);
}

.site-footer__links a {
  text-decoration: underline;
  text-decoration-color: var(--color-border-light);
  text-underline-offset: 3px;
  color: var(--color-text-sub);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-accent-text);
  text-decoration-color: var(--color-accent);
}

.site-footer__meta {
  color: var(--color-text-sub);
  font-size: var(--text-xs);
  max-width: 42ch;
  line-height: var(--leading-relaxed);
}

/* Mention discrète : pages légales disponibles en français uniquement
 * (présente sur les déclinaisons non FR / non EN, cf. rapport i18n). */
.site-footer__legal-note {
  color: var(--color-text-sub);
  font-size: 12px;
  font-style: italic;
  margin-top: calc(var(--space-2) * -1);
}


/* ================================================================== */
/* MISE EN PAGE : TABLETTE / BUREAU                                   */
/* ================================================================== */

@media (min-width: 720px) {
  .hero__inner {
    flex-direction: row;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
  }

  .hero__copy {
    align-items: flex-start;
    text-align: left;
  }

  .store-badges {
    justify-content: flex-start;
  }

  /* Téléphone d'un côté, texte de l'autre ; le côté du texte alterne
   * d'une diapositive à l'autre pour donner du rythme au défilement
   * (même principe que l'ancienne alternance des articles). */
  .carousel__slide {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-12);
  }

  .carousel__slide:nth-child(even) {
    flex-direction: row-reverse;
  }

  .carousel__copy {
    align-items: flex-start;
    text-align: left;
  }

  .phone-frame {
    height: min(52svh, 500px);
  }
}

@media (min-width: 960px) {
  .hero__title {
    font-size: 46px;
  }

  /* Illustration desktop agrandie (retouche PO, 400px -> 500px) : elle est
   * la vedette du hero, vérifié sans débordement de la première vue pleine
   * hauteur à 1440x900 et 1536x730 (voir rapport). */
  .hero__art {
    width: 500px;
  }

  .phone-frame {
    height: min(56svh, 540px);
  }

  /* Mascotte à côté du bloc de cartes plutôt qu'au-dessus, une fois qu'il
   * y a assez de largeur pour ne pas comprimer les deux cartes de prix. */
  .pricing__layout {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--space-10);
  }

  .pricing__mascot {
    width: 220px;
  }
}