/* ==========================================================================
   Smakoo — feuille de surcharge de l'application mobile
   --------------------------------------------------------------------------
   RÔLE
     Aligner l'habillage de l'app mobile (server/mobile/) sur la refonte du
     site (server/themes/landing2/css/smakoo.css) : mêmes couleurs, même
     typographie, mêmes formes.

   CHARGEMENT
     À inclure APRÈS mobile/css/smakoo20.css et mobile/css/smakoo.css :

       <link rel="stylesheet" href="css/smakoo-theme.css">

     Ce fichier ne modifie AUCUN fichier existant. Il ne fait que surcharger.

   PÉRIMÈTRE
     · Tous les sélecteurs de ce fichier ont été relevés dans les gabarits
       réellement servis : server/mobile/templates/mobile/ (fichiers .html)
       (settings.mobileTheme = « mobile », voir SMAKOO-PASSATION-COMPLETE.md §10).
     · Les feuilles d'origine étant très spécifiques (et par endroits en
       style inline dans index.php), `!important` est utilisé là où c'est
       nécessaire pour gagner la cascade. C'est assumé.

   INTERDITS RESPECTÉS (leçons du 03/10, incidents constatés)
     · aucun `filter:` ni filtre SVG ;
     · aucun calcul en `100vw` — au contraire, trois `100vw` hérités des
       feuilles d'origine sont neutralisés en fin de fichier ;
     · seules `transform` et `opacity` sont animées ;
     · `user-scalable` / `maximum-scale` ne sont pas touchés (le zoom reste
       sous le contrôle de la balise viewport d'index.php, non modifiée) ;
     · pas de `width`/`height`/`top`/`left` animés.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. POLICES
   Le site charge Calistoga (titres) + Inter (texte). L'app mobile ne charge
   aujourd'hui que Montserrat / Rubik / Inter selon le thème : on importe les
   deux familles ici. `@import` est en tête de fichier (obligation CSS).
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Inter:wght@400;500;600;700&display=swap');


/* --------------------------------------------------------------------------
   1. JETONS DE DESIGN
   Valeurs identiques au site. Les jetons dérivés (accent-texte, succes) sont
   ajoutés uniquement pour tenir le seuil de contraste de 4,5:1 sur fond clair.
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs officielles */
  --accent:        #1DA1F2;   /* bleu officiel : boutons, liens, indicateurs */
  --accent-appui:#1DA1F2;
  --accent-appui-hover:#0E8BD4;
  --accent-fonce:  #0E8BD4;   /* état appuyé / survol */
  --like:          #E0245E;   /* rose : « j'aime » et CTA */
  --like-fonce:    #C4184C;

  /* Texte */
  --encre:         #14171A;   /* texte principal      — 16:1 sur blanc */
  --gris:          #5B6672;   /* texte secondaire     — 5,4:1 sur surface */

  /* Surfaces */
  --blanc:         #FFFFFF;
  --surface:       #F7F5F2;   /* fonds neutres chauds */
  --surface-2:     #FDF3F5;
  --trait:         #E7E2DA;   /* bordures */

  /* Dérivés d'accessibilité (contraste ≥ 4,5:1 avec du texte blanc) */
  --accent-texte:  #0B6FA8;   /* bleu assombri : texte bleu sur fond clair,
                                 et fond bleu des bulles de chat (5,4:1) */
  --succes:        #0B8A3E;   /* vert de statut « en ligne » (4,4:1 sur blanc,
                                 seuil 3:1 exigé pour un indicateur non textuel) */

  /* Formes */
  --rayon:         26px;      /* cartes */
  --rayon-sm:      14px;      /* petits éléments */
  --rayon-pilule:  999px;     /* boutons, badges, avatars */

  /* Typographie */
  --titre: 'Calistoga', Georgia, 'Times New Roman', serif;
  --texte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Élévations */
  --ombre-1:       0 4px 14px rgba(20, 23, 26, .06);
  --ombre-2:       0 14px 38px rgba(20, 23, 26, .10);
  --ombre-accent:  0 8px 22px rgba(29, 161, 242, .26);
  --ombre-like:    0 8px 22px rgba(224, 36, 94, .28);

  /* Rythme */
  --t-court: 200ms;           /* micro-interactions */
  --t-long:  300ms;           /* transitions */
  --courbe:  cubic-bezier(.2, .8, .3, 1);

  /* Cible tactile minimale (§17) */
  --tactile: 44px;
}


/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--texte) !important;
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background-color: var(--blanc);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Le pincement pour zoomer reste autorisé : on ne verrouille rien. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Champs de saisie : Inter, jamais la police d'affichage. */
input, textarea, select, button {
  font-family: var(--texte);
}


/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE
   Dans cette application, `.comforta` / `.b-none` jouent le rôle de « police
   d'affichage » : ils habillent les titres, les noms et les grands libellés.
   → Calistoga, comme les titres du site.
   Les gabarits d'origine les forcent en Inter/Rubik via un bloc <style> de
   index.php ; la spécificité `body .x` (+ !important) reprend la main quel que
   soit l'ordre de chargement.
   -------------------------------------------------------------------------- */

/* Titres et noms */
body .comforta,
body .b-none,
body .chat-name,
body .profile-info__title,
body .feature-card__title,
body .stream-notice__title,
body .wallet-t-title,
body .qa-title,
.navigation-bar__title,
.cta-box__header,
.own-profile__username,
.encounters-card__name,
.profile-user-info__name {
  font-family: var(--titre) !important;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--encre);
}

.navigation-bar__title {
  font-size: 19px;
  line-height: 1.2;
}

.navigation-bar__title-additional {
  font-family: var(--texte);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--gris);
}

.cta-box__header {
  font-size: 24px;
  line-height: 1.2;
  color: var(--encre);
}

/* Titres posés sur un fond sombre (modales premium, célébrations) :
   on laisse la couleur claire décidée par le gabarit. */
body .premium-bg.comforta,
body .mi-violetita .comforta {
  color: inherit;
}

/* Courant : Inter, jamais la police d'affichage.
   Les gabarits posent souvent `comforta` sur ces éléments ; le `!important`
   est nécessaire pour reprendre la main sur `body .comforta` ci-dessus. */
body .text-muted,
body .csms-p-1,
body .profile-info__content,
body .chat-last-m,
body .wallet-t-details,
body .item-note,
body .contact-list-search__cancel,
body .csms-profile-info__name-inner,
body .profile-user-info__meta {
  font-family: var(--texte) !important;
}

body .csms-profile-info__name-inner {
  font-weight: 600;
  font-size: 16px;
  color: var(--encre);
}

body .text-muted,
.csms-connections-item__message,
.chat-last-m,
.item-note {
  color: var(--gris);
}

/* Étiquettes de section : petites capitales espacées, comme le site. */
.selector .selector__label,
.selector__label {
  font-family: var(--texte) !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gris);
}

.chat-v2-name {
  font-size: 18px;
  color: var(--encre);
}

.encounters-card__name,
.profile-user-info__name {
  font-size: 22px;
}

.encounters-card__announce {
  font-family: var(--texte);
  font-size: 14px;
  color: var(--gris);
}


/* --------------------------------------------------------------------------
   4. BARRE DE NAVIGATION HAUTE
   Le site : fond blanc, filet `--trait` en bas, pas d'ombre lourde.
   -------------------------------------------------------------------------- */
.navigation-bar {
  background-color: var(--blanc);
  border-bottom: 1px solid var(--trait);
  box-shadow: none;
}

.navigation-bar--no-background {
  background-color: transparent;
  border-bottom-color: transparent;
}

/* Icônes : cible tactile de 44 px garantie. */
.navigation-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--tactile);
  min-height: var(--tactile);
  padding: 7px;
  border-radius: var(--rayon-sm);
  color: var(--encre);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.navigation-bar__icon.is-active {
  color: var(--accent-texte);
}

.navigation-bar__icon:active {
  transform: scale(.92);
}

.navigation-bar__primary,
.navigation-bar__secondary {
  color: var(--encre);
}

.navigation-bar__logo img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.navigation-bar__userpic {
  min-width: var(--tactile);
  min-height: var(--tactile);
}


/* --------------------------------------------------------------------------
   5. BARRE D'ONGLETS BASSE
   Surface chaude, filet haut, indicateur rose.
   -------------------------------------------------------------------------- */
.tabbar {
  background-color: var(--surface);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -4px 14px rgba(20, 23, 26, .06);
}

.tabbar__items {
  /* 50 px de haut pour 44 px utiles : la cible tactile est tenue. */
  min-height: 50px;
}

.tabbar-item {
  min-height: var(--tactile);
  border-radius: var(--rayon-sm);
  color: var(--gris);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.tabbar-item.is-active,
.tabbar-item.is-pressed {
  color: var(--accent-texte);
}

.tabbar-item:active {
  transform: scale(.94);
}

.tabbar-item__icon {
  min-width: 30px;
  min-height: 30px;
}

.tabbar-item__icon-indicator {
  border-color: var(--surface);
  background: var(--like);
  box-shadow: 0 1px 4px rgba(224, 36, 94, .5);
}


/* --------------------------------------------------------------------------
   6. ONGLETS DE DOSSIER (haut de la liste de conversations)
   Le site souligne l'élément actif d'un trait rose : on reprend ce motif sans
   provoquer de décalage de mise en page (text-decoration, pas de border).
   -------------------------------------------------------------------------- */
.tabs .tab__label,
.tab .tab__label {
  font-family: var(--texte) !important;
  font-size: 14px;
  font-weight: 700 !important;      /* les gabarits passent font-weight:800 inline */
  letter-spacing: .04em;
  color: var(--gris);
}

.tabs .tab.is-active .tab__label {
  color: var(--encre) !important;
  text-decoration: underline;
  text-decoration-color: var(--like);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.tab {
  min-height: var(--tactile);
  display: inline-flex;
  align-items: center;
}


/* --------------------------------------------------------------------------
   7. CARTES, VIGNETTES ET AVATARS
   -------------------------------------------------------------------------- */

/* Vignette carrée (photos, aperçus) : rayon `--rayon-sm`, jamais rognée. */
.brick {
  max-width: 100%;
}

.brick--squared .brick__image {
  border-radius: var(--rayon-sm);
}

/* Les avatars restent ronds : c'est la forme du site pour les visages. */
.csms-brick--circle .csms-avatar__image,
.csms-avatar__image,
.profile-photo {
  border-radius: var(--rayon-pilule);
}

.csms-avatar__image,
.brick__image {
  background-color: var(--surface);
  border: 1px solid var(--trait);
}

.csms-brick--sm .csms-brick__avatar {
  border-radius: var(--rayon-pilule);
}

/* Anneau « story » aux couleurs de la marque. */
body .storyOn {
  border: 3px solid var(--like);
  border-radius: var(--rayon-pilule);
  padding: 2px;
  background-clip: content-box;
}

/* Anneau de mise en avant générique. */
.box-shadow-credits {
  box-shadow: var(--ombre-2);
}

/* Pastilles de compteur (messages non lus, notifications).
   `.csms-mark.csms-mark--red` (0,2,0) est défini dans smakoo20.css : il faut
   la même spécificité pour le reprendre. */
.mark,
.csms-mark,
.csms-mark.csms-mark--red {
  font-family: var(--texte) !important;
  border-radius: var(--rayon-pilule);
  background: var(--like);
  color: #fff;
  font-weight: 700;
}

.mark--sm {
  min-width: 18px;
  line-height: 18px;
  font-size: 11px;
}

.csms-mark--shadow {
  box-shadow: 0 2px 8px rgba(224, 36, 94, .45);
}

/* Point de présence : vert lisible sur fond clair. */
.csms-online-status--online {
  background: var(--succes);
}


/* --------------------------------------------------------------------------
   8. LISTE DE CONVERSATIONS / DE CONNEXIONS
   -------------------------------------------------------------------------- */
.csms-connections-item {
  min-height: 64px;
  background-color: var(--blanc);
  border-bottom: 1px solid var(--trait);
  transition: opacity var(--t-court) var(--courbe);
}

.csms-connections-item:active {
  opacity: .72;
}

/* La ligne d'origine est neutralisée : un seul filet, plus lisible. */
.csms-connections-item::after {
  border-bottom-color: transparent;
}

.csms-connections-item--user .csms-connections-item__profile {
  color: var(--encre);
}

.csms-connections-item--user .csms-connections-item__message {
  color: var(--gris);
  font-size: 14px;
}

.csms-spring-box {
  padding: 10px 0;
}

.csms-spring-box__media {
  margin-right: 14px;
}

/* Recherche : champ plein, surface chaude, rayon `--rayon-sm`. */
.contact-list-search {
  background-color: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  margin: 8px 15px;
  padding: 4px 14px;
  min-height: var(--tactile);
}

/* .matches.is-searching n'est jamais posé par le JS mobile (classe héritée de
   l'ancien gabarit Belloo) : on ne l'utilise pas ici. Les deux usages réels de
   `.contact-list-search` (matches.html, location.html) sont dans un parent
   sans retrait, la marge latérale de 15 px est donc la bonne. */

body .contact-list-search__input {
  font-family: var(--texte) !important;
  min-height: var(--tactile);
  font-size: 15px;
  color: var(--encre);
  background: transparent;
  border: 0;
  outline: none;
}

.contact-list-search__input::placeholder {
  color: var(--gris);
  opacity: 1;
}

.contact-list-search__icon {
  color: var(--gris);
}

.contact-list-search__cancel {
  color: var(--accent-texte);
  font-weight: 600;
  min-height: var(--tactile);
  display: inline-flex;
  align-items: center;
}

/* Carte de mise en avant (boost, publicité interne).
   Elle vit à l'intérieur de `.csms-connections-item` (padding 0 15px) :
   pas de marge latérale, sinon le retrait est doublé. */
.feature-card {
  background-color: var(--surface);
  border-radius: var(--rayon-sm);
  padding: 12px 14px;
  margin: 6px 0;
  min-height: var(--tactile);
}

.feature-card__title {
  font-family: var(--titre);
  font-size: 17px;
  color: var(--encre);
}


/* --------------------------------------------------------------------------
   9. BOUTONS
   Le site utilise des boutons pilule (`border-radius:999px`). Le bouton
   principal est bleu accent, texte blanc gras — comme `.smk-btn`.
   NOTE DE CONTRASTE : le texte blanc sur #1DA1F2 mesure 2,8:1, c'est-à-dire le
   ratio du site lui-même. Pour passer à 4,5:1 sans toucher au reste du thème,
   remplacer ci-dessous `var(--accent)` par `var(--accent-texte)` dans les deux
   règles `.button` et `.button--primary` : le fond devient #0B6FA8 (5,4:1).
   Le corps de texte, lui, est en `--encre`/`--gris` et dépasse 4,5:1.
   -------------------------------------------------------------------------- */
body .button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 385px;
  min-height: 52px;
  height: auto;
  margin: 0 auto;
  padding: 14px 24px;
  border: 0;
  border-radius: var(--rayon-pilule);
  background-color: var(--accent);
  color: #fff;
  font-family: var(--texte) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  box-shadow: var(--ombre-accent);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.button::before {
  border-radius: var(--rayon-pilule);
}

.button:active {
  transform: translateY(2px);
}

/* Bouton principal. La spécificité `body .button.button--primary` (0,2,1)
   bat le `.button.button--primary` (0,2,0) posé en <style> dans index.php. */
body .button.button--primary {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--ombre-accent);
}

.button__content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button__text {
  font-family: var(--texte) !important;
  font-weight: 600;
  color: inherit;
}

.button__loader {
  color: inherit;
}

/* Bouton secondaire « contour » (achat de crédits, actions facultatives). */
body .button.button--stroke {
  background-color: transparent !important;
  border: 2px solid var(--accent) !important;
  color: var(--accent-texte) !important;
  box-shadow: none !important;
}

body .button.button--stroke .button__text {
  color: inherit !important;
  font-weight: 700;
}

/* Bouton texte (fermeture de modale). On ne force ni fond ni couleur :
   il est posé tantôt sur fond clair, tantôt sur fond sombre. */
body .button.button-clear {
  background-color: transparent !important;
  border: 0;
  box-shadow: none !important;
  min-height: var(--tactile);
}

/* ÉTAT DÉSACTIVÉ — placé APRÈS les variantes et à spécificité (0,3,1) :
   sans cela, le fond `!important` de `.button--primary` rendrait un bouton
   désactivé visuellement actif. */
body .button:disabled,
body .button.disabled,
body .button.button--primary:disabled,
body .button.button--primary.disabled,
body .button.button--stroke:disabled,
body .button.button--stroke.disabled {
  background-color: var(--trait) !important;
  border-color: transparent !important;
  color: var(--gris) !important;
  box-shadow: none !important;
  opacity: 1;
}

body .button:disabled .button__text,
body .button.disabled .button__text {
  color: var(--gris) !important;
}

.button-block {
  border-radius: var(--rayon-pilule);
  min-height: var(--tactile);
}

/* Bouton texte secondaire. */
.inline-button {
  min-height: var(--tactile);
  padding: 12px 0;
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 600;
  color: var(--gris);
  transition: opacity var(--t-court) var(--courbe);
}

.inline-button:active {
  opacity: .65;
}

body .inline-button__text {
  font-family: var(--texte) !important;
  font-weight: 600;
}

.inline-button--primary,
body .inline-button--primary {
  color: var(--accent-texte);
}

.inline-button--sm {
  font-size: 14px;
}

/* Boutons utilitaires de style.css (`.u-btn`, `.u-btn--danger`). */
body .u-btn {
  min-height: var(--tactile);
  padding: 10px 16px;
  border: 0;
  border-radius: var(--rayon-pilule);
  background-color: var(--accent);
  color: #fff;
  font-family: var(--texte) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--ombre-accent);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.u-btn:active {
  transform: translateY(2px);
}

body .u-btn.u-btn--danger {
  background-color: var(--like);
  box-shadow: var(--ombre-like);
}

/* Anciens boutons (`.btn`, `.btn-primary`) : ramenés sur la marque. */
.btn {
  min-height: var(--tactile);
  border-radius: var(--rayon-pilule);
  font-family: var(--texte);
  font-weight: 600;
}

body .btn.btn-primary {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--ombre-accent);
}

/* Actions rondes de la carte « Rencontres ». */
.profile-action-button {
  min-width: 65px;
  min-height: 65px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-pilule);
  background: var(--blanc);
  box-shadow: var(--ombre-2);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.profile-action-button:active {
  transform: translateY(2px);
}

/* Boutons de la modale « C'est un match ». */
.promo-match-button {
  min-height: var(--tactile);
  border-radius: var(--rayon-sm);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.promo-match-button:active {
  transform: scale(.95);
}

.promo-match .promo-match-button .promo-match-button__label {
  font-family: var(--texte);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris);
}

/* Bouton d'envoi du chat. */
body .chat-send {
  font-family: var(--texte) !important;
  font-weight: 700;
  color: var(--accent-texte) !important;
  min-height: var(--tactile);
  display: inline-flex;
  align-items: center;
  transition: opacity var(--t-court) var(--courbe);
}

.chat-send:active {
  opacity: .6;
}


/* --------------------------------------------------------------------------
   10. FORMULAIRES
   Le site : champs à rayon `--rayon-sm`, bordure `--trait`, focus bleu accent.
   -------------------------------------------------------------------------- */
.text-field,
.list-item-form,
.reel-form {
  border-bottom-color: var(--trait);
}

.text-field__input,
body .text-field__input {
  min-height: var(--tactile);
  padding: 12px 14px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  background-color: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
}

.text-field__input:focus,
body .text-field__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(29, 161, 242, .14);
  outline: none;
}

/* Libellés posés à gauche dans les listes de formulaire. */
.list-view .list-item-form > label,
.list-view .list-item-form > input,
.list-view .list-item-form > select {
  font-family: var(--texte);
  color: var(--encre);
}

.list-view .list-item-form > label {
  font-weight: 600;
}

.list-view .list-item-form > input,
.list-view .list-item-form > select {
  min-height: var(--tactile);
}

/* Écran de connexion. */
.login-form .login-input {
  min-height: var(--tactile);
  padding: 10px 14px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 16px;
}

.login-form .login-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(29, 161, 242, .14);
  outline: none;
}

.login-form .login-btn {
  min-height: 52px;
  border: 0;
  border-radius: var(--rayon-pilule);
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--ombre-accent);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.login-form .login-btn:active {
  transform: translateY(2px);
}

body .login-btn.active {
  background: var(--accent-fonce) !important;
  color: #fff !important;
}

.login-form .login-btn span {
  font-family: var(--texte);
  font-weight: 600;
}

/* Champ de saisie de crédits / de lien. */
.share-copy-fallback {
  font-family: var(--titre);
  color: var(--encre);
  border: 1px solid var(--trait) !important;
  border-radius: var(--rayon-sm);
  background: var(--blanc);
  text-align: center;
  outline: none;
}

.share-copy-fallback:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(29, 161, 242, .14);
}

/* Interrupteurs et curseurs. */
.toggle .track {
  border-radius: var(--rayon-pilule);
  background-color: var(--trait);
}

.toggle .handle {
  border-radius: var(--rayon-pilule);
  box-shadow: var(--ombre-1);
}

body .toggle input:checked + .track {
  background-color: var(--accent);
}

.range .track {
  border-radius: var(--rayon-pilule);
}

.range .handle {
  border-radius: var(--rayon-pilule);
}

/* Éléments de liste Ionic : bordures aux couleurs du site uniquement
   (pas de fond forcé : certaines listes sont volontairement sombres). */
.item {
  border-color: var(--trait);
  color: var(--encre);
}

body .item-divider {
  font-family: var(--texte) !important;
  font-weight: 600;
  color: var(--gris);
  background-color: var(--surface);
  border-color: var(--trait);
}

body .item span {
  font-family: var(--texte) !important;
}

.item-toggle {
  border-color: var(--trait);
}


/* --------------------------------------------------------------------------
   11. MESSAGERIE
   -------------------------------------------------------------------------- */
.chat-v2__messages {
  background-color: var(--blanc);
}

.chat-message {
  margin-bottom: 6px;
}

.chat-message__text {
  font-family: var(--texte);
  font-size: 15.5px;
  line-height: 1.45;
  padding: 10px 14px;
  border-radius: 18px;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: var(--ombre-1);
  max-width: 80%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Reçu : surface chaude, texte encre (16:1). */
.chat-message--grey .chat-message__text {
  background-color: var(--surface);
  color: var(--encre);
  border: 1px solid var(--trait);
}

/* Envoyé : bleu, texte blanc sur `--accent-texte` (5,4:1).
   On n'utilise pas `--accent` ici : #1DA1F2 ne donnerait que 2,8:1 avec du
   texte blanc, or il s'agit de texte courant à lire. */
.chat-message--blue .chat-message__text {
  background-color: var(--accent-texte);
  color: #fff;
  box-shadow: 0 4px 14px rgba(11, 111, 168, .24);
}

.chat-message__status {
  font-family: var(--texte);
  color: var(--gris);
}

/* Zone de saisie. */
.chat-input {
  background-color: var(--blanc);
  border-top: 1px solid var(--trait);
}

body .chat-input__textarea,
.chat-input__textarea {
  min-height: var(--tactile);
  border: 1px solid var(--trait) !important;
  border-radius: var(--rayon-pilule);
  background-color: var(--surface);
  color: var(--encre);
  font-family: var(--texte) !important;
  font-size: 16px;
  padding: 12px 16px !important;
  outline: none;
}

.chat-input__textarea:focus {
  border-color: var(--accent) !important;
  background-color: var(--blanc);
}

body .chat-input__textarea::placeholder {
  color: var(--gris);
}

.chat-input__label {
  color: var(--gris);
}

/* Raccourcis de la barre d'envoi : 44 px garantis. */
.chat-switchers__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--tactile);
  height: var(--tactile);
  min-width: var(--tactile);
  min-height: var(--tactile);
  padding: 5px;
  border-radius: var(--rayon-pilule);
  color: var(--gris) !important;
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.chat-switchers__item.is-active,
body .chat-switchers__item.is-active {
  color: var(--accent-texte) !important;
}

.chat-switchers__item:active {
  transform: scale(.9);
}

.chat-switchers__item.is-disabled {
  opacity: .4 !important;
}

/* Brise-glace. */
.ice-breaker__text {
  font-family: var(--texte);
  color: var(--gris);
  background-color: var(--surface);
  border-radius: var(--rayon-sm);
  padding: 10px 14px;
}


/* --------------------------------------------------------------------------
   12. MENU LATÉRAL
   -------------------------------------------------------------------------- */
.menu-navigation {
  background-color: var(--encre);
  font-family: var(--texte);
}

.menu-navigation-item {
  min-height: var(--tactile);
  padding: 10px 6px;
  border-radius: var(--rayon-sm);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.menu-navigation-item:active {
  transform: scale(.96);
  opacity: .85;
}

.menu-navigation-item__name {
  font-family: var(--texte);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}

.menu-navigation-item__counter {
  background: var(--like);
  color: #fff;
}

.menu-navigation-item__avatar .brick__image {
  border-color: var(--like);
}

/* Bloc des soldes (premium / popularité / crédits). */
.menu-payment {
  min-height: var(--tactile);
  font-family: var(--texte);
}

.menu-payment + .menu-payment {
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.menu-payment__name {
  font-family: var(--texte);
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
}

.menu-payment__value {
  font-family: var(--titre);
  color: #fff;
}

.menu-payment__icon {
  color: #fff;
}


/* --------------------------------------------------------------------------
   13. PROFIL
   -------------------------------------------------------------------------- */
.own-profile__username {
  font-family: var(--titre);
  font-size: 24px;
  color: var(--encre);
}

.own-profile__payments {
  background-color: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 16px;
}

.own-profile__payments-item {
  min-height: var(--tactile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body .own-profile__payments-label {
  font-family: var(--texte) !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris);
}

body .own-profile__payments-value {
  font-family: var(--texte) !important;
  font-size: 20px;
  font-weight: 700;
  color: var(--encre);
}

/* Lignes « sélecteur » du profil : réglées comme des cartes discrètes. */
.selector {
  min-height: var(--tactile);
  padding: 12px 16px;
  background-color: var(--blanc);
  border-bottom: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  margin-bottom: 8px;
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.selector:active {
  transform: translateY(1px);
  opacity: .85;
}

.selector__icon {
  color: var(--accent-texte);
  font-family: var(--texte);
  font-weight: 700;
}

/* Bloc d'informations du profil consulté. */
.profile-info__section {
  border-bottom: 1px solid var(--trait);
}

body .profile-info__content {
  font-family: var(--texte) !important;
  font-size: 15px;
  line-height: 1.55;
  color: var(--gris);
}

.profile-title__statuses,
.profile-actions__item {
  min-height: var(--tactile);
}

/* Actions rapides sous la photo de profil. */
.profile-action {
  border-radius: var(--rayon-pilule);
  transition: transform var(--t-court) var(--courbe),
              opacity   var(--t-court) var(--courbe);
}

.profile-action:active {
  transform: scale(.94);
}

/* Portefeuille. */
.wallet-transaction {
  border-bottom: 1px solid var(--trait);
  min-height: var(--tactile);
}

.wallet-t-details {
  font-family: var(--texte);
  color: var(--gris);
  font-size: 13px;
}


/* --------------------------------------------------------------------------
   14. CARTE « RENCONTRES » (balayage)
   -------------------------------------------------------------------------- */
.encounters-card {
  /* `border-radius` est posé en style inline dans explore.html
     (`#discoverGame` → 17px) : sans `!important`, la surcharge serait ignorée. */
  border-radius: var(--rayon) !important;
  overflow: hidden;
  background-color: var(--surface);
  box-shadow: var(--ombre-2);
}

.encounters-card__info {
  background-color: rgba(255, 255, 255, .94);
  border-radius: var(--rayon-sm);
  box-shadow: var(--ombre-1);
  padding: 10px 14px;
  max-width: 100%;
  box-sizing: border-box;
}

.encounters-card__announce {
  color: var(--gris);
}

/* Dégradé de lisibilité sous le nom : `background-image` n'est pas un filtre,
   il est donc autorisé. Aucun `filter:` n'est utilisé ici. */
.encounters-card__floating {
  background-image: linear-gradient(to top, rgba(20, 23, 26, .55), rgba(20, 23, 26, 0));
}

body .profile-user-info__meta,
body .profile-user-info__age {
  font-family: var(--texte) !important;
  color: var(--gris);
}


/* --------------------------------------------------------------------------
   15. MODALES ET PANNEAUX
   -------------------------------------------------------------------------- */
.modal,
.overlay-page {
  font-family: var(--texte);
}

/* Le site : cartes à grand rayon, ombre douce, filet `--trait`. */
.floating-action .cta-box,
.promo-match .cta-box {
  background-color: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-2);
  padding: 20px 18px;
  box-sizing: border-box;
  max-width: 100%;
}

body .cta-box__content {
  font-family: var(--texte) !important;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--gris);
}

/* Panneau de stickers / cadeaux. */
.stickers {
  background-color: var(--surface) !important;
}

/* Modale d'achat (fond sombre volontaire) : on garde le fond sombre mais on
   l'aligne sur l'encre du site au lieu du noir pur. */
.mi-violetita {
  background-color: var(--encre) !important;
}

body .positive-bg {
  background: var(--accent) !important;
}

/* Bandeau promotionnel de bas d'écran. */
.floating-action {
  background-color: var(--blanc);
  border-top: 1px solid var(--trait);
  box-shadow: 0 -4px 14px rgba(20, 23, 26, .06);
}

/* Bandeau « Rencontres à proximité ». */
.stream-notice {
  background-color: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
}

.stream-notice__title {
  font-family: var(--titre);
  font-size: 17px;
  color: var(--encre);
}

.stream-notice__content {
  font-family: var(--texte);
  color: var(--gris);
}


/* --------------------------------------------------------------------------
   16. CHARGEMENTS ET MICRO-DÉTAILS
   Les points de chargement passent au bleu de la marque.
   (`.loader`, `.small` et `.grey` sont portés par le MÊME élément :
   `.loader.grey .dot` (0,3,0) bat `.grey .dot` (0,2,0) et son !important.)
   -------------------------------------------------------------------------- */
.loader.grey .dot,
.loader .dot {
  background-color: var(--accent) !important;
}

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

.skeleton-line {
  background-color: var(--surface);
  border-radius: var(--rayon-sm);
}

.section-footer-effect {
  background-image: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}

.multimedia,
.multimedia__image {
  border-radius: var(--rayon-sm);
}

.profileP {
  border-radius: var(--rayon-sm);
}


/* --------------------------------------------------------------------------
   17. ACCESSIBILITÉ — CIBLES TACTILES ET FOCUS
   Chaque composant cliquable reçoit sa hauteur minimale dans SA section
   (boutons 52 px, lignes de conversation 64 px, onglets 50 px, icônes de
   navigation et champs 44 px…). Les redéclarer ici, plus bas, écraserait les
   valeurs plus généreuses (même spécificité : la dernière règle gagne).
   Ne restent donc que les éléments non traités ailleurs.
   -------------------------------------------------------------------------- */
.item,
.item-toggle,
.contact-list-item,
.chat-v2__status {
  min-height: var(--tactile);
}

/* Contour de focus visible au clavier uniquement (pas de contour parasite au
   toucher). Le bleu accent est réservé aux éléments décoratifs : ici le
   contour est un repère, pas du texte. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.js-touchable:focus-visible,
.js-goto:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rayon-sm);
}

/* Évite le halo bleu par défaut de WebKit sur les éléments non focusables. */
* {
  -webkit-tap-highlight-color: rgba(29, 161, 242, .18);
}


/* --------------------------------------------------------------------------
   18. PAS DE DÉFILEMENT HORIZONTAL
   Aucune règle de ce fichier n'utilise `100vw`. Trois calculs en `100vw`
   hérités des feuilles d'origine sont en plus neutralisés ici : ils portent
   sur des sélecteurs réellement présents dans templates/mobile/.
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Largeur de la barre de navigation : `100vw` d'origine déborde dès qu'une
   barre de défilement est présente. */
.navigation-bar {
  width: 100% !important;
  max-width: 100% !important;
}

/* `max-width: calc(100vw - 160px)` d'origine : remplacé par un calcul sûr. */
.chat-v2-name {
  max-width: 100% !important;
}

/* `height: 100vw` d'origine : remplacé par un carré sans unité de viewport. */
.profile-preview__photos {
  height: auto !important;
  aspect-ratio: 1 / 1;
  max-height: 100vh;
}

.page,
.page-container,
.layout,
.layout__content,
.cta-box,
.cta-box__content,
.encounters-card,
.selector,
.text-field {
  max-width: 100%;
  box-sizing: border-box;
}

/* Les conteneurs à défilement horizontal prévus (listes de stories) gardent
   leur défilement : on ne le supprime que sur l'axe vertical. */
.scroll-horizontal,
.tabs-top .scroll,
.tabs .scroll {
  overflow-x: auto;
  overflow-y: hidden;
}


/* --------------------------------------------------------------------------
   19. MOUVEMENT RÉDUIT
   Le site respecte cette préférence, l'app mobile doit faire de même.
   Les animations sont neutralisées (les classes `vivify` redeviennent visibles
   d'elles-mêmes, leur état final étant l'état naturel de l'élément).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .tabbar,
  .floating-action,
  .tabbar-item,
  .navigation-bar__icon,
  .chat-switchers__item,
  .profile-action,
  .profile-action-button,
  .promo-match-button,
  .selector,
  .csms-connections-item,
  .menu-navigation-item {
    transition: none !important;
  }
}


/* ==========================================================================
   COMPLÉMENT — REELS, STORIES, FIL D'ACTUALITÉ, RENCONTRES, RÉCOMPENSE
   --------------------------------------------------------------------------
   Les sections 1 à 19 ne couvraient pas ces cinq écrans. Toutes les classes
   ci-dessous ont été relevées dans les gabarits réellement servis :

     · templates/mobile/home/reels.html
     · templates/mobile/home/stories.html
     · templates/mobile/home/feed.html  +  requests/feed.php (les cartes du fil
       sont injectées par AJAX dans #feed-content : mobile/js/controllers.js
       appelle `requests/feed.php?action=loadFeed`)
     · templates/mobile/home/explore.html, meet.html, dating.html,
       matches.html, likesme.html, match.html
     · templates/mobile/modals/share.html

   CLASSES VOLONTAIREMENT NON TRAITÉES (déjà couvertes par les sections 1 à
   19, rien n'est dupliqué ici) :
     `.stream-notice`, `.stream-notice__content`, `.stream-notice__title`
     (section 15), `.brick--squared .brick__image` et `.profile-photo`
     (section 7), `.profileP` / `.multimedia__image` (section 16).

   ORDRE DE CHARGEMENT RÉEL (index.php) — la plupart des feuilles de base
   arrivent APRÈS ce fichier, d'où les préfixes `body` et les `!important` :
     style.css → smakoo20.css → smakoo.css → smakoo-theme.css → i.css →
     themes/default/css/crossplatform.css → <style> inline d'index.php →
     css/live.css → thème des plugins (vendor/swiper.css pour Reels,
     vendor/feed.css pour le fil, vendor/live.css pour le direct) → twigo.css.

   INTERDITS RESPECTÉS
     · aucun `filter:` ajouté (les deux `filter: blur(18px)` du voile premium
       de `vendor/feed.css` sont conservés : ils portent la fonctionnalité
       « publication payante ») ;
     · aucun `100vw` écrit ; celui de `.detail .video-item` (vendor/swiper.css)
       est neutralisé en §20.1 ;
     · seules `transform` et `opacity` sont animées ici.
   ========================================================================== */


/* --------------------------------------------------------------------------
   20. REELS  (home/reels.html — écran noir plein écran)
   Le gabarit pose ces textes sur des voiles sombres : on garde les textes
   clairs, `--encre` ne serait pas lisible ici.
   -------------------------------------------------------------------------- */

/* 20.1 — Pleine largeur sans `100vw`.
   `vendor/swiper.css` pose `.detail .container, .detail .video-item
   { width: 100vw; max-width: 540px }` : le `100vw` est remplacé par `100%`,
   le plafond de 540 px du plugin est conservé. Quatrième calcul en `100vw`
   neutralisé, comme les trois de la §18. */
body .detail .container,
body .detail .video-item {
  width: 100%;
}

/* 20.2 — Bandeau d'identité du reel (avatar, nom, légende). */
body .video-wraper .info-wraper .user-info .avator {
  width: var(--tactile);
  height: var(--tactile);
  border-color: rgba(255, 255, 255, .28);
}

body .video-wraper .info-wraper .user-info .name {
  font-family: var(--titre) !important;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

body .video-wraper .info-wraper .video-info {
  font-family: var(--texte) !important;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .94);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* 20.3 — Voiles de guidage (import, reel privé, achat). Le titre devient un
   bouton pilule : 44 px de haut et un fond translucide pour tenir le 4,5:1
   sur la vidéo. */
body .video-wraper .mask .guide-info .title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactile);
  margin-top: 14px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--rayon-pilule);
  background-color: rgba(20, 23, 26, .55);
  font-family: var(--titre) !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

body .video-wraper .mask .guide-info p,
body .video-wraper .mask .guide-info .content {
  font-family: var(--texte) !important;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

/* 20.4 — Colonne d'actions (like, prix, partage) : les SVG du gabarit font
   32 px, la cible tactile doit en faire 44. */
body .video-wraper .side-bar svg {
  width: var(--tactile);
  height: var(--tactile);
  margin-top: 14px;
}

/* 20.5 — Légende et prix éditables : le plugin impose la police Rubik. */
body .video-wraper .reel-mobile-textarea,
body .video-wraper .input-reel-caption {
  min-height: var(--tactile);
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--rayon-sm);
  background-color: rgba(255, 255, 255, .08);
  font-family: var(--texte) !important;
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
}

body .video-wraper .reel-mobile-textarea::placeholder,
body .video-wraper .input-reel-caption::placeholder {
  color: rgba(255, 255, 255, .7);
  opacity: 1;
}

/* Champ « prix » et case « reel privé ». Ionic masque la case
   (`i.css` : `.toggle input { display: none }`) : la cible réelle est le
   libellé `.reel-track`, traité en 20.6. Le style est posé pour les deux, le
   gabarit pouvant afficher l'un ou l'autre. */
body .video-wraper .input-reel-price,
body .video-wraper .reel-mobile-private-input {
  min-height: var(--tactile);
  border: 1px solid rgba(255, 255, 255, .3) !important;
  border-radius: var(--rayon-sm);
  background-color: rgba(255, 255, 255, .1);
  font-family: var(--texte) !important;
  font-size: 16px;
  color: #fff;
}

/* 20.6 — Interrupteur « reel privé » : le plugin force #ffbf00 en !important,
   et le gabarit pose `background: none` en style inline sur le curseur. Le
   libellé passe à 44 px sans déplacer le curseur (padding 5 px d'origine
   conservé, `align-items: center` recentre la piste). */
body .reel-track.toggle-assertive .track {
  border: 1px solid rgba(255, 255, 255, .3) !important;
  background-color: rgba(255, 255, 255, .12) !important;
}

body .reel-track.toggle-assertive input:checked + .track {
  border-color: var(--accent) !important;
  background-color: var(--accent) !important;
}

body .reel-track.toggle-assertive input:checked + .track .handle {
  background-color: #fff;
}

body .reel-track.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
}

/* 20.7 — Onglets « Récents / Tendance » posés sur la vidéo : la barre fait
   37 px dans le plugin. */
body .swipe-top-bar {
  height: auto;
  min-height: var(--tactile);
}

body .swipe-top-bar #discover-toggles > button {
  min-height: var(--tactile);
  padding: 10px 8px;
  border: 0;
  border-radius: var(--rayon-pilule);
  background-color: transparent;
  font-family: var(--texte);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  transition: background-color var(--t-court) var(--courbe),
              color             var(--t-court) var(--courbe);
}

body .swipe-top-bar #discover-toggles > button.reel-tab-selected {
  background-color: rgba(255, 255, 255, .18);
  color: #fff;
}

/* 20.8 — Bouton d'import. `@keyframes Gradient` (crossplatform.css) anime la
   `background-position` : c'est la seule animation de ces écrans qui ne passe
   ni par `transform` ni par `opacity`, elle est donc neutralisée. Le fond
   utilise `--accent-texte` (blanc sur #0B6FA8 = 5,4:1) car le libellé fait
   13 px, trop petit pour se contenter du 2,8:1 de `--accent` (voir la note de
   la §9). */
body .upload-reel .btn-upload-reel,
body .upload-reel .btn-upload-reel-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactile);
  padding: 0 16px;
  border: 0;
  border-radius: var(--rayon-pilule);
  background-color: var(--accent-texte);
  background-image: none;
  font-family: var(--texte) !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  box-shadow: 0 8px 22px rgba(11, 111, 168, .34);
  animation: none !important;
}


/* --------------------------------------------------------------------------
   21. STORIES ET DIRECT  (home/stories.html)
   Bases : `themes/default/css/crossplatform.css` (`.story-preview*`,
   `.stories-feed*`) et `themes/default/css/vendor/live.css` (`.stream-*`,
   `.user-card*`), complétées par `css/live.css`.
   -------------------------------------------------------------------------- */

/* 21.1 — Vignette de story : rayon de carte du site. Les deux couches
   `.story-preview-background` / `.story-preview-avatar` portent
   `.profile-photo` (rond, §7) et sont rognées par l'`overflow: hidden` de
   `.story-preview` : rien d'autre à faire de ce côté. */
body .story-preview {
  border-radius: var(--rayon-sm);
}

body .story-preview .story-preview-name {
  font-family: var(--texte);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* 21.2 — Bandeau de stories : aucune sortie d'écran. La hauteur est posée en
   style inline par le gabarit (`height: 104px`) et les vignettes sont en
   `flex-wrap: wrap` : on ne touche pas à la mise en page, seulement aux
   limites. */
body .stories-feed,
body .stories-feed-layout,
body .stories-discover {
  max-width: 100%;
}

/* 21.3 — Cartes de direct (même écran, section visible sous les stories). */
body .stream-page__content,
body .stream-list__content,
body .stream-slider__scroll {
  max-width: 100%;
}

body .stream-card,
body .user-card {
  border-radius: var(--rayon-sm);
}

body .user-card__photo {
  background-color: var(--surface);
}

body .user-card-caption__name,
body .user-card-caption__account {
  font-family: var(--texte);
  font-weight: 600;
}

body .stream-author__name {
  font-family: var(--titre) !important;
  font-size: 17px;
  color: #fff;
}

/* 21.4 — Champ de saisie du chat du direct. `css/live.css` force
   `background: rgba(225,225,225,.15) !important` sur la pastille et
   `color: #fff !important` sur le texte : le champ reste donc translucide sur
   le canvas noir, et NON blanc — le `background: #fff` (non prioritaire) que
   stories.html pose sur `.stream-comment-field` est écrasé. On garde le texte
   clair et on ne corrige que le placeholder, resté en #767676 (2,7:1 sur la
   pastille). */
body .stream-comment-field .text-field__input {
  min-height: var(--tactile);
  border-radius: var(--rayon-sm);
  font-family: var(--texte) !important;
  color: #fff !important;
}

body .stream-comment-field .text-field__input::placeholder {
  color: rgba(255, 255, 255, .72);
  opacity: 1;
}

/* 21.5 — Boutons « Terminer » et « Fermer » du direct : 19 px et 30 px dans le
   gabarit (styles inline). `min-width`/`min-height` l'emportent sur
   `width`/`height`. */
body .stream-data__item {
  border-radius: var(--rayon-sm);
}

body #endStream,
body #streamClose {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
}

/* Bouton d'envoi du chat du direct : l'icône ne fait que 24 px. */
body .stream-comment-field__send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
  color: var(--accent);
}

/* 21.6 — État vide du direct : `.credits-section` est posé avec
   `min-width: 360px` dans `style.css`, ce qui déborde sur un écran de 320 px. */
body .credits-section {
  min-width: 0;
}

body .credits-section h1 {
  font-family: var(--titre) !important;
  color: var(--encre);
}

body .credits-section h4 {
  font-family: var(--texte) !important;
  font-size: 14px;
  font-weight: 400;
  color: var(--gris);
}


/* --------------------------------------------------------------------------
   22. FIL D'ACTUALITÉ  (home/feed.html, cartes de requests/feed.php)
   Base : `themes/default/css/vendor/feed.css` (feuille du plugin fgfeed).
   -------------------------------------------------------------------------- */

/* 22.1 — La carte ne doit jamais dépasser l'écran. `feed.css` pose
   `width: calc(100% + 30px)` entre 481 et 1198 px, et `.insta-imgs-slider`
   mesure 500 px de haut avec une image en `background-size: cover`. */
body .instagram-sec {
  max-width: 100%;
  border-radius: var(--rayon-sm);
}

body .instagram-sec .insta-imgs-slider,
body .instagram-sec .insta-imgs-slider .insta-imgs-slide {
  max-width: 100%;
}

body .instagram-sec .insta-sec-heading,
body .instagram-sec .insta-sec-footer {
  background-color: var(--blanc);
}

/* 22.2 — En-tête : nom et lieu en Inter, couleurs du site. */
body .instagram-sec .insta-sec-heading .insta-sec-head-content .insta-sec-head-inner h6 {
  font-family: var(--texte) !important;
  font-size: 15px;
  font-weight: 700;
  color: var(--encre);
}

body .instagram-sec .insta-sec-heading .insta-sec-head-content .insta-sec-head-inner p {
  font-family: var(--texte) !important;
  font-size: 12px;
  color: var(--gris);
}

/* 22.3 — Bouton « ⋯ » de la carte : 28 px dans `feed.css`, 32 px en !important
   sous 480 px. `min-width`/`min-height` l'emportent sur `width`/`height`. */
body .instagram-sec .insta-sec-heading .moreDropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
  border-radius: var(--rayon-pilule);
}

/* Le lien qui entoure la photo de profil de la publication ne fait que 36 px.
   On le porte à 44 px en compensant par une marge négative : l'en-tête ne
   bouge pas (`.insta-sec-head-inner` est en `calc(100% - 36px)` et passerait
   sinon à la ligne, le parent étant en `flex-wrap: wrap`). */
body .instagram-sec .insta-sec-heading .insta-sec-head-content > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
  margin: -4px;
  padding: 4px;
  border-radius: var(--rayon-pilule);
}

/* 22.4 — Actions de la publication. Les gestionnaires `onclick` de
   `requests/feed.php` sont posés sur les SVG eux-mêmes
   (`<svg class="unlike" onclick="likeFeed(...)">`, `<svg class="save save-<id>"
   onclick="postFav(...)">`) : agrandir le conteneur ne suffit pas, c'est la
   taille du SVG qui fait la cible — ils passent donc de 22–26 px à 44 px. */
body .instagram-sec .insta-sec-footer .insta-footer-link ul li > div {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
  border-radius: var(--rayon-pilule);
}

body .instagram-sec .insta-sec-footer .insta-footer-link ul li > div svg,
body .instagram-sec .insta-sec-footer .insta-footer-link button svg {
  width: var(--tactile);
  height: var(--tactile);
}

body .instagram-sec .insta-sec-footer .insta-footer-link button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
  padding: 0;
  border: 0;
  background-color: transparent;
}

body .comment-like-wrap .comment-wrap .comment-content p,
body .comment-like-wrap .comment-wrap .comment-content p .commenter-name {
  font-family: var(--texte);
  color: var(--encre);
}

/* 22.5 — Voile « publication premium ». Le `filter: blur(18px)` de
   `feed.css` porte la fonctionnalité payante : il est conservé tel quel. */
body .instagram-sec.premium-post .premium-post-label {
  border-radius: var(--rayon-sm);
  background-color: rgba(255, 255, 255, .93);
}

body .instagram-sec.premium-post .premium-post-label h6 {
  font-family: var(--titre) !important;
  font-weight: 400;
  color: var(--gris);
}

body .instagram-sec.premium-post .premium-post-label p {
  font-family: var(--texte) !important;
  font-weight: 500;
  color: var(--encre);
}

/* 22.6 — Toast « Story saved » (`.our-collection`). Le libellé était en
   #262626 sur #FEF0F2 : on garde l'encre du site sur la surface rosée du jeu
   de jetons. (`.our-collection button` est stylé dans `vendor/feed.css` mais
   aucun `<button>` n'est produit par `requests/feed.php`, qui ne remplit que
   `.oc-content` : règle volontairement non reprise ici.) */
body .instagram-sec .insta-sec-footer-wrap .our-collection {
  background-color: var(--surface-2);
  border-radius: var(--rayon-sm);
}

body .instagram-sec .insta-sec-footer-wrap .our-collection .oc-content img {
  border-radius: var(--rayon-sm);
}

body .instagram-sec .insta-sec-footer-wrap .our-collection .oc-content span {
  font-family: var(--texte);
  color: var(--encre);
}

/* 22.7 — Panneau de commentaires plein écran. */
body .insta-comments .insta-comments-inner .comments-header {
  background-color: var(--blanc);
  border-bottom: 1px solid var(--trait);
}

/* Le lien de l'avatar d'un commentaire fait 40 px : porté à 44 px, encombrement
   inchangé (`.comment-content` est en `calc(100% - 40px)`). */
body .comment-like-wrap .comment-wrap .comment-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
  margin: -2px;
  padding: 2px;
  border-radius: var(--rayon-pilule);
}

body .insta-comments .insta-comments-inner .comments-header span {
  font-family: var(--titre) !important;
  color: var(--encre);
}

body .insta-comments .insta-comments-inner .comment-footer {
  background-color: var(--surface);
  border-top: 1px solid var(--trait);
}

body .insta-comments .insta-comments-inner .comment-footer form textarea {
  min-height: var(--tactile);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-sm);
  background-color: var(--blanc);
  font-family: var(--texte) !important;
  font-size: 16px;
  color: var(--encre);
}

/* Le bouton d'envoi reprend le rose foncé du jeu de jetons : #F96C7C sur
   #FAFAFA ne donne que 2,5:1. */
body .insta-comments .insta-comments-inner .comment-footer form button {
  min-height: var(--tactile);
  border-radius: var(--rayon-sm);
  font-family: var(--texte);
  color: var(--like-fonce);
}


/* --------------------------------------------------------------------------
   23. RENCONTRES, DÉCOUVERTE ET PARTAGE
   (home/explore.html, meet.html, dating.html, matches.html,
   modals/share.html, home/profile.html)
   -------------------------------------------------------------------------- */

/* 23.1 — Bandeau « Rencontres à proximité » (meet.html, dating.html) : la §15
   n'habille que `.floating-action .cta-box` et `.promo-match .cta-box`, le
   cartouche de ce bandeau restait nu. */
body .people-nearby-banner .cta-box {
  max-width: 100%;
  padding: 20px 18px;
  background-color: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-2);
}

body .people-nearby-banner .cta-box__content {
  font-family: var(--texte) !important;
  color: var(--gris);
}

/* 23.2 — Carte de découverte. Le fond gris (#f6f6f6) du diaporama devient la
   surface chaude du site. `.encounters-card` lui-même est traité en §14. */
body .slider-gallery {
  max-width: 100%;
  background-color: var(--surface);
}

body .slider-gallery__pages,
body .slider-gallery__page {
  max-width: 100%;
}

/* 23.3 — Grille « Rencontres » (meet.html). `.brick__name_` n'a aucune règle
   dans les feuilles d'origine : le nom hérite donc du #000 de `.brick__name`. */
body .users-folder__item .brick__name {
  color: var(--encre);
}

body .users-folder__item .brick__name_ {
  font-family: var(--titre) !important;
  font-size: 13px;
  color: var(--encre);
}

/* 23.4 — Pastilles « spotlight » (matches, menu, likes, superlikes,
   visiteurs). La cible tactile d'origine (47 px) tient, on aligne surtout la
   forme et la typographie. */
body .spotlight-me {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tactile);
  padding: 10px 20px;
  border-radius: var(--rayon-pilule);
  font-family: var(--texte) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

/* 23.5 — Partage externe (modals/share.html). Les icônes font déjà 65 px et le
   libellé hérite d'Inter : on garantit le plancher tactile et l'état appuyé. */
body .external-provider a {
  min-height: var(--tactile);
  border-radius: var(--rayon-sm);
  transition: opacity var(--t-court) var(--courbe);
}

body .external-provider a:active {
  opacity: .72;
}

/* 23.6 — `.own-profile__userpic` (profile.html) n'a pas besoin de règle CSS :
   il est couvert par la §13 (`.own-profile__*`) et par la correction de
   l'arrondi en ligne décrite en §26. */


/* --------------------------------------------------------------------------
   24. MODALE DE RÉCOMPENSE
   (likesme.html, match.html, mylikes.html, matches.html, stories.html,
   meet.html, messaging.html — 12 règles dans css/style.css, aucune dans les
   sections 1 à 19.)
   -------------------------------------------------------------------------- */

/* 24.1 — La carte. `border-radius: 10px` est posé en style inline dans
   matches.html et stories.html : `!important` est nécessaire, comme pour
   `.encounters-card` en §14. `--ombre-3` n'est pas déclaré dans le `:root` de
   la §1 (seuls `--ombre-1`, `--ombre-2`, `--ombre-accent` et `--ombre-like`
   existent) : on utilise `--ombre-2`. */
body .wrapper-reward .modal-reward {
  max-width: 100%;
  border: 1px solid var(--trait);
  border-radius: var(--rayon) !important;
  box-shadow: var(--ombre-2);
}

/* Les deux moitiés de la carte portaient 10 px en dur. */
body .wrapper-reward .modal-reward-top {
  border-top-left-radius: var(--rayon);
  border-top-right-radius: var(--rayon);
}

body .wrapper-reward .modal-reward-bottom {
  border-bottom-left-radius: var(--rayon);
  border-bottom-right-radius: var(--rayon);
}

/* 24.2 — Libellés : Montserrat/Lato d'origine. Le titre est un titre
   (Calistoga), le sous-titre est du texte courant (Inter). La couleur reste
   `inherit` : les variantes colorées du gabarit (`.boostSpotlight`,
   `.boostDiscover`, `.boostRiseUp`) posent un fond sur la carte entière. */
body .wrapper-reward .modal-reward-header {
  font-family: var(--titre) !important;
  font-size: 20px;
  line-height: 1.25;
  color: inherit;
}

body .wrapper-reward .modal-reward-subheader {
  font-family: var(--texte) !important;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  color: inherit;
}

/* 24.3 — L'icône (photo de profil, 120 px en inline) et le bouton d'action.
   `@keyframes tinder-bg` (style.css) anime la `background-position` du bouton :
   seule animation de ces écrans hors `transform`/`opacity`, elle est
   neutralisée. */
body .wrapper-reward .modal-reward-icon {
  max-width: 100%;
  border-radius: var(--rayon-pilule);
}

body .wrapper-reward .modal-reward-btn {
  min-height: var(--tactile);
  border-radius: var(--rayon-pilule);
  animation: none !important;
}

/* Le bouton de fermeture `.klose` ne fait que 25 px. */
body .wrapper-reward .modal-reward-top .klose {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactile);
  min-height: var(--tactile);
  border-radius: var(--rayon-pilule);
}

/* 24.4 — Contraste des variantes colorées.
   Quatre variantes du gabarit posent le texte en blanc sur un fond moyen ou
   clair, sous le seuil de 4,5:1 : `gradient18` (#4158D0 → #C850C0 → #FFCC70,
   jusqu'à 1,5:1), `boostDiscover` (#00B697, 2,6:1), `boostSpotlight`
   (#ff661b, 2,6:1) et `boostRiseUp` (#25BA25, 2,6:1). Les fonds sont posés
   par crossplatform.css / style.css, donc intouchables sans casser les autres
   écrans : on interpose un bandeau encre translucide derrière les deux
   libellés. Le blanc repasse au-dessus de 5:1 sur les quatre fonds.
   (Les variantes `gradient32` — meet.html — et le fond `rgba(0,0,0,.4)` de
   stories.html sont déjà sombres : hors périmètre.) */
body .wrapper-reward .modal-reward.gradient18 .modal-reward-header,
body .wrapper-reward .modal-reward.gradient18 .modal-reward-subheader,
body .wrapper-reward .modal-reward.boostDiscover .modal-reward-header,
body .wrapper-reward .modal-reward.boostDiscover .modal-reward-subheader,
body .wrapper-reward .modal-reward.boostSpotlight .modal-reward-header,
body .wrapper-reward .modal-reward.boostSpotlight .modal-reward-subheader,
body .wrapper-reward .modal-reward.boostRiseUp .modal-reward-header,
body .wrapper-reward .modal-reward.boostRiseUp .modal-reward-subheader {
  padding: 10px 14px;
  border-radius: var(--rayon-sm);
  background-color: rgba(20, 23, 26, .55);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}


/* --------------------------------------------------------------------------
   25. MOUVEMENT RÉDUIT — COMPLÉMENTS
   La §19 coupe déjà toutes les animations via le sélecteur universel. On
   nomme en plus les éléments animés par cette section, pour que la règle
   survive à une réorganisation du fichier.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .btn-upload-reel,
  .btn-upload-reel-complete,
  .video-wraper .side-bar svg,
  .video-wraper .mask .guide-info .title,
  .reel-track.toggle .track,
  .reel-track.toggle .handle,
  .swipe-top-bar #discover-toggles > button,
  .story-preview,
  .story-preview .story-preview-avatar,
  .user-card,
  .stream-card,
  .modal-reward,
  .modal-reward-btn,
  .external-provider a {
    animation: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   26. ARRONDIS POSÉS EN LIGNE DANS LES GABARITS (modifications assumées)
   Deux arrondis étaient écrits en dur en attribut `style`, donc inaccessibles
   depuis cette feuille. Ils ont été remplacés à la source par les jetons du
   §1 — aucune règle CSS ne peut les reprendre sans `!important` sur un
   attribut `style`, ce qui aurait écrasé tous les autres arrondis en ligne du
   même gabarit :

     · `border-radius: 15px` → `var(--rayon-sm)`
         home/feed.html, home/profile.html, home/matches.html,
         home/stories.html, home/reels.html, home/meet.html, home/explore.html
         (le `.profile-photo` de la barre d'onglets basse)
       + home/reels.html (le bouton caché `#goToMyReels`) ;
     · `border-radius: 70px` → `var(--rayon)`
         home/profile.html (`.own-profile__userpic .brick__image`)
         modals/verification.html (`.brick__image` de la modale).

   Les fichiers .css ne sont pas concernés par ces deux corrections.
   -------------------------------------------------------------------------- */