/* ═══════════════════════════════════════════════════════════════════════════
 * COPIE AUTOMATIQUE — NE PAS MODIFIER CE FICHIER ICI.
 *
 * Source   : saaphone-app-client/www/css/socle.css
 * Version  : 692bd9c (COPIE PRISE SUR UN ARBRE MODIFIÉ — non commité)
 * Portée par : outils/porter-le-socle-vers-le-site.sh
 *
 * Toute retouche faite dans ce fichier sera écrasée au prochain portage,
 * sans avertissement. Modifier la SOURCE, puis relancer le script.
 * ═══════════════════════════════════════════════════════════════════════════
 */
/*
 * socle.css — LE socle visuel de SaaPhone. App cliente ET saaphone.fr.
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Ce fichier est la SOURCE des couleurs, de la typographie, des espacements
 * et des rayons. Il ne décrit aucun écran : il décrit la marque. C'est ce qui
 * permet à l'app et au site d'être « exactement la même maison » — demande de
 * Rami du 2026-09-22 — sans recopier deux fois la même valeur à deux endroits
 * qui divergeront.
 *
 * ── Comment le partager avec le site ─────────────────────────────────────
 * Copier le DOSSIER `www/css/` entier : il se suffit à lui-même. La police y
 * est incluse (`polices/`), les chemins sont relatifs, rien n'est absolu.
 * Une valeur de marque qui change se change ICI, et les deux la reçoivent.
 *
 * ── Pas de CDN, jamais ───────────────────────────────────────────────────
 * La police est un fichier local. L'app cliente doit s'ouvrir dans une
 * boutique où le réseau tombe, et le site ne doit pas faire dépendre son
 * rendu d'un tiers. Aucun `@import` distant, aucun `fonts.googleapis.com`.
 *
 * ── Ce qui vient de la maquette du 2026-09-22 ────────────────────────────
 * Palette et typographie de la maquette retenue par Rami. Les anciennes
 * couleurs (bleu #171F46, rouge #DC2626, fond blanc) sont remplacées, pas
 * complétées : deux palettes qui cohabitent, c'est une palette qui ment.
 */

/* ════════════════════ La police ════════════════════
 *
 * Inter, en fichier VARIABLE : une seule ressource porte toutes les graisses
 * de 100 à 900. Quatre fichiers statiques (Regular/Medium/SemiBold/Bold)
 * pèsent 455 Ko à eux quatre ; celui-ci en pèse 87 et donne toute la plage.
 *
 * Il est SOUS-ENSEMBLÉ au latin + ponctuation + devises (352 Ko à l'origine).
 * Ce qui est parti : grec, cyrillique, vietnamien, centaines de signes
 * mathématiques — rien qu'une boutique de Lille affiche. Le script qui
 * reproduit exactement ce fichier est à côté : `polices/refaire-le-sous-ensemble.sh`.
 * Licence SIL OFL, incluse dans le même dossier.
 *
 * `font-display: swap` : le texte s'affiche tout de suite dans la police
 * système, puis bascule. Un écran vide en attendant une police est un écran
 * cassé pour qui le regarde.
 */
@font-face {
  font-family: 'Inter SaaPhone';
  src: url('polices/InterVariable-saaphone.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─────────── Couleurs de marque ───────────
   * Les sept de la maquette, sous les noms que le code emploie déjà.
   */
  --bleu-nuit: #0B1F33;   /* la couleur de la marque : titres, barres, logo */
  --rouge: #E11D2E;       /* LE rouge SaaPhone : action, prix, pastilles */
  --vert: #10B981;        /* confirmé, en stock, payé */
  --orange: #F59E0B;      /* attention sans gravité : en attente, bientôt fini */

  /* ─────────── Surfaces ───────────
   * ATTENTION, c'est l'inversion par rapport à l'ancienne palette : la PAGE
   * est grise, les CARTES sont blanches. Avant, la page était blanche et le
   * gris servait aux champs. Les cartes ne flottent que si le fond est plus
   * sombre qu'elles — sans ça, l'ombre porte dans le vide.
   */
  --fond: #F8FAFC;        /* la page */
  --carte: #FFFFFF;       /* cartes, feuilles, blocs posés sur la page */
  --entete: #FFFFFF;      /* barres haute et basse : blanches sur page grise */
  --surface: #F1F5F9;     /* champs, puces, boutons doux — un cran SOUS la page,
                             pour rester lisibles sur la page ET sur les cartes */
  --trait: #E5E7EB;       /* le gris clair de la maquette */

  /* ─────────── Texte ─────────── */
  --texte: #111827;       /* le texte courant de la maquette */
  --titre: var(--bleu-nuit);
  --doux: #5B6472;        /* secondaire — assombri depuis #64748B pour tenir
                             le contraste AA sur le fond gris, mesuré */
  --sur-accent: #FFFFFF;  /* ce qu'on écrit SUR le rouge ou le bleu nuit */

  /* ─────────── Accent (noms historiques, conservés) ─────────── */
  --accent: var(--rouge);
  --accent-clair: #F26D78;
  --accent-sombre: #A3111D;
  --navigation: #1D4ED8;  /* les liens. Le bleu nuit ne peut pas servir ici :
                             il est trop proche du texte, un lien qui ressemble
                             à du texte n'est pas un lien. */
  --or: var(--orange);    /* la maquette n'a pas d'or — l'orange prend sa place
                             sur le seul bloc qui s'en servait (coup de cœur) */

  /* ─────────── Les gommettes RÉELLES de la boutique ───────────
   * Jaune = neuf, bleu = occasion, vert = reconditionné. Ce sont les
   * étiquettes physiques collées sur les téléphones : l'app et le site
   * parlent le langage du comptoir, pas l'inverse. Elles ne suivent PAS la
   * maquette — changer ces trois couleurs rendrait l'écran incohérent avec
   * ce que le client a dans la main.
   */
  --gommette-neuf: #facc15;
  --gommette-occasion: #60a5fa;
  --gommette-recond: #4ade80;

  /* ─────────── Typographie ───────────
   * Inter d'abord, puis la police système. Le repli n'est pas décoratif :
   * si la police tarde ou manque un signe (Inter n'a pas « ✕ »), le
   * navigateur descend la liste signe par signe.
   */
  --police: 'Inter SaaPhone', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --police-chiffres: var(--police);

  --t-micro: 11.5px;
  --t-petit: 12.5px;
  --t-detail: 13.5px;
  --t-base: 15px;
  --t-corps: 16px;
  --t-sous-titre: 18px;
  --t-titre: 21px;
  --t-grand: 26px;

  /* ─────────── Rythme ───────────
   * Un pas de 4 px. Toute marge de l'app et du site sort de cette échelle :
   * c'est ce qui fait qu'un écran « tombe juste » sans qu'on sache dire
   * pourquoi.
   */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px; --e10: 40px;

  /* ─────────── Rayons ─────────── */
  --r-petit: 9px;
  --r-moyen: 12px;
  --r-grand: 16px;
  --r-carte: 18px;
  --r-rond: 999px;

  /* ─────────── Ombres ───────────
   * Teintées de bleu nuit, pas de noir : une ombre noire sur un fond froid
   * grise l'image.
   */
  --ombre: 0 1px 2px rgba(11, 31, 51, 0.04), 0 4px 16px rgba(11, 31, 51, 0.06);
  --ombre-portee: 0 8px 28px rgba(11, 31, 51, 0.10);
  --ombre-barre: 0 -1px 0 var(--trait);

  /* ─────────── La cible du doigt ───────────
   * 44 px, la règle d'Adhem. Elle est un JETON pour qu'aucun écran ne la
   * redécide dans son coin.
   */
  --cible: 44px;
}

/*
 * La police s'applique au document entier, app et site. Elle est posée ici et
 * nulle part ailleurs : une seule déclaration à changer le jour où la marque
 * change de typographie.
 */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--police); }

/*
 * Les chiffres alignés VERTICALEMENT dans les colonnes de prix. Sans ça, une
 * liste de prix ondule — le « 1 » est plus étroit que le « 8 ».
 */
.prix, [data-prix], .ligne-panier-prix, .panier-pastille {
  font-variant-numeric: tabular-nums;
}

/*
 * ── LE ZOOM QUI NE SE DÉZOOME PAS ─────────────────────────────────────────
 *
 * Signalé par Rami le 2026-09-27, dans l'onglet Boutique : toucher la barre de
 * recherche zoomait la page, et refermer le clavier la laissait zoomée — les
 * onglets du bas se retrouvaient coupés, sans moyen de revenir en arrière.
 *
 * Ce n'est pas un défaut de la page : c'est une RÈGLE D'iOS. Safari et toute
 * WebView zooment d'office sur un champ dont la police fait MOINS de 16 px,
 * pour le rendre lisible. La barre de recherche était à 0,95 rem = 15,2 px.
 * Il manquait 0,8 pixel.
 *
 * Le remède est la taille, pas le verrouillage. On aurait pu poser
 * `maximum-scale=1` ou `user-scalable=no` dans le viewport : ça aurait
 * empêché le zoom automatique ET le zoom volontaire, donc privé de loupe qui
 * en a besoin — et dans une WebView, le zoom bloqué est justement ce qui
 * empêchait Rami de revenir en arrière. 16 px supprime la cause.
 *
 * Cette règle est un FILET : elle rattrape les champs qui n'ont pas de taille
 * à eux (ils héritent alors de leur conteneur, souvent plus petit). Un champ
 * qui déclare SA taille garde la main — et le test « aucun champ sous 16 px »
 * refuse qu'elle descende sous la barre.
 */
@media (max-width: 820px) {
  input, textarea, select { font-size: max(16px, 1em); }
}