/* ============================================================================
   site/telephone.css — LE SITE SUR UN TÉLÉPHONE, ET RIEN D'AUTRE.

   POURQUOI CE FICHIER EXISTE — 13 octobre 2026. Un abonné qui PAIE a écrit à
   Marc : en arrivant sur le site, « ce n'était pas clair où aller ni quoi
   faire ». Il était sur un téléphone.

   MESURÉ AVANT D'ÉCRIRE UNE LIGNE (essais/sonde-premier-coup-doeil.mjs, un
   vrai compte abonné, 390 × 844, iPhone 14) :

     · LA NAVIGATION EST INVISIBLE. `accueil.css:110` dit
       `@media (max-width:960px){.liens{display:none}}` : sous 960 px, les six
       liens disparaissent et il ne reste qu'un bouton de 44 px SANS ÉTIQUETTE
       — trois traits blancs. Sur le premier écran de chaque page, tout ce
       qu'il voit est : « × », « Trend X17 », un carré muet, « Mon compte ».
       ⚠⚠ ET L'AIDE DU SITE LUI DIT : « Ouvre "Les tendances" — l'onglet en
         haut de la page. » Cet onglet n'existe pas sur son écran. C'est ça,
         « je ne savais pas où aller ».
     · LES CIBLES TACTILES : 8 sous 44 px. Le « × » à 30, les cinq liens du
       bas de page à 32, « Créer un compte » à 40. Apple donne 44 px comme
       minimum, et ce n'est pas une préférence : sous ça, le doigt rate.
     · LE TEXTE : 11 px sur `.badge-l`, `.ruban`, `.tag` ; 10,5 px sur la page
       des tendances.
     · LES PAGES FONT DE 3,6 À 6,6 ÉCRANS DE HAUT.

   ⚠⚠ POURQUOI UNE FEUILLE À PART, ET PAS UNE CORRECTION DANS LES AUTRES. Le
     site en charge TROIS : `commun.css` (11 pages), `accueil.css` (3),
     `facecam.css` (1) — et cinq pages n'en chargent aucune, tout est dans un
     `<style>` en ligne (tendances, sons, essais, prix, connexion). Corriger
     « partout » voudrait dire quatre endroits et une page oubliée ; le dépôt a
     déjà payé trois fois pour ça. Celle-ci est chargée EN DERNIER par les
     vingt et une pages, posée par `node src/telephone.mjs`. Elle ne corrige
     que le téléphone, et sur un écran d'ordinateur elle ne fait rien.

   ⚠ ELLE N'INVENTE AUCUNE COULEUR NI AUCUNE FORME : elle reprend les
     variables du site (`--texte`, `--doux`, `--ligne`, `--carte`, `--vert`).
     Un abonné ne doit pas voir « une version téléphone » — il doit voir le
     site, lisible.
   ========================================================================== */

/* ══ 1. LA NAVIGATION RESTE VISIBLE, EN UNE RANGÉE QUI GLISSE ══════════════
   C'est la correction qui répond à sa phrase. Les six liens restent à
   l'écran, sur leur propre rangée sous le logo, et se poussent du doigt.
   Le bouton muet disparaît : il n'a plus rien à ouvrir. */
@media (max-width: 960px) {
  :root {
    /* 64 px de barre + 52 px de rangée. Tout ce qui dégage la barre fixe se
       calcule sur `--nav` (`.hero`, `.tete-haut`, `.menu-mob`, les
       `scroll-margin-top`) : en le montant ici, les dix pages suivent. */
    --nav: 126px;   /* 64 de barre + 10 d'écart + 52 de rangée */
  }
  /* ⚠⚠ `row-gap`, PAS UNE MARGE — 13 octobre 2026. Marc : « le bouton "Créer un
     compte" est beaucoup trop proche des autres options ». Mesuré : la
     pastille finissait à y=92 et la rangée commençait à y=92. ZÉRO pixel.
     Ma première réparation mettait `margin-top:10px` sur la pastille : elle
     l'a poussée vers le bas ET la rangée avec, puisqu'elles sont dans le même
     flux qui passe à la ligne. L'écart est resté nul. C'est le `row-gap` de
     l'enveloppe qui décide de l'espace entre les deux rangées — et je l'avais
     mis à 0 moi-même. */
  .nav .env {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 10px;
  }
  /* le logo et le compte gardent la première rangée */
  .nav .env > .logo { order: 1 }
  .nav .env > .droite { order: 2 }

  .liens {
    display: flex !important;
    order: 3;
    flex: 0 0 100%;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* la rangée va d'un bord à l'autre, même si l'enveloppe a des marges */
    margin: 0 calc(var(--g, 16px) * -1) 0;
    padding: 0 var(--g, 16px) 8px;
  }
  .liens::-webkit-scrollbar { display: none }
  .liens a {
    flex: 0 0 auto;
    min-height: 44px;            /* le minimum d'Apple, et il est mesuré */
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--doux, #8b93a1);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--ligne, #262d3a);
  }
  .liens a.ici,
  .liens a[aria-current="page"] {
    color: var(--texte, #e7eaef);
    background: rgba(255, 255, 255, .12);
    border-color: #3a424f;
  }
  /* ⚠ LE BOUTON MUET S'EN VA, ET SON MENU AVEC. Garder les deux, c'est deux
     façons d'aller au même endroit, dont une invisible. */
  .menu-btn { display: none !important }
  .menu-mob { display: none !important }

  /* ══ ET IL FAUT DIRE QUE LA RANGÉE CONTINUE — 14 octobre 2026 ═════════════
     La rangée glissante a remplacé le menu muet du 13 octobre, et c'était le
     bon choix. Mais mesuré aujourd'hui, à 390 px, sur les huit pages d'un
     abonné : 348 px restent cachés, TOUJOURS. On voit « Accueil », « Les
     tendances », « L'aide » ; « Paramètres » est tranché en deux ; « Comment
     ça marche » et « Nos chiffres » ne sont jamais à l'écran. Et rien, nulle
     part, ne dit qu'on peut la faire glisser.

     Un mot coupé net ne se lit pas comme « ça continue » : il se lit comme
     « c'est cassé ». Le fondu, lui, est compris sans qu'on l'explique.

     ⚠ LE FONDU SUIT LE DOIGT, il n'est pas peint une fois pour toutes. Posé en
       dur à droite, il resterait quand on arrive au bout de la rangée et
       mangerait le dernier mot pour rien. Les classes `a-gauche`/`a-droite`
       sont mises à jour par site/telephone.js, au défilement. Sans ce script,
       aucune des deux classes n'est posée et la rangée reste exactement comme
       avant — aucune régression possible. */
  .liens.a-droite {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  .liens.a-gauche {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(to left, #000 calc(100% - 34px), transparent);
  }
  .liens.a-gauche.a-droite {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 34px,
                        #000 calc(100% - 34px), transparent);
            mask-image: linear-gradient(to right, transparent, #000 34px,
                        #000 calc(100% - 34px), transparent);
  }
}

/* ══ 2. CE QUE LE DOIGT DOIT POUVOIR VISER ═════════════════════════════════
   Huit cibles mesurées sous 44 px. On ne grossit pas le dessin : on agrandit
   la zone qui écoute le doigt. */
@media (max-width: 960px) {
  .pied a, footer a, .pied-liens a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
  }
  /* ⚠ `.pill` HORS DE LA BARRE garde ses 44 px : ce sont les gros boutons du
     corps de page (« Créer mon compte », « Voir les forfaits »). Celle de la
     BARRE est traitée plus bas, à la demande de Marc. */
  .pill:not(.nav .pill) {
    min-height: 44px;
  }
  /* ⚠ LES COMMANDES MESURÉES SOUS 44 px, NOMMÉES UNE PAR UNE. On ne passe pas
     un `min-height` global sur `button` : il casserait les petites pastilles
     posées dans du texte. Chacune ici a été mesurée sur la page d'essai.
       .cmp-moi              38 px — la pastille du compte (compagnon.js)
       .question2 input      27 px — le champ de l'assistant
       .question2 button     34 px — son bouton d'envoi
       .filtre-marche button 38 px — les catégories de tendances
       .filtres button       34 px — l'ordre de la liste */
  .cmp-moi {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .question2 { min-height: 44px }
  .question2 input {
    min-height: 44px !important;
    height: auto !important;
  }
  .question2 button {
    min-height: 40px !important;
    min-width: 40px !important;
  }
  .filtre-marche button, .filtres button, .entre button {
    min-height: 44px !important;
  }
  /* ⚠ DEUX DE PLUS, MESURÉES LE 14 OCTOBRE en refaisant le tour du site en
     inconnu, à 390 px :
       .co-petit        32 px — « Mot de passe oublié ? » et « Crée ton
                                compte », sur /connexion. C'est LA page que
                                l'abonné qui paie retouche à chaque visite, et
                                ce sont ses deux seules issues si le mot de
                                passe ne rentre pas.
       [data-rythme]    40 px — « Mensuel » / « Annuel » sur /prix. Rater la
                                bascule, c'est voir le mauvais prix.
     ⚠ CE QUI N'EST PAS TOUCHÉ, ET POURQUOI :
       · la `.pill` de la barre reste à 36 px — c'est écrit plus haut, Marc l'a
         demandée ainsi ;
       · les liens DANS une phrase (« conditions », « témoins », 15 px) ne sont
         pas grossis : un lien de 44 px au milieu d'un paragraphe casse la
         ligne. Pour ceux-là, ce qui compte est l'espace autour, pas la taille. */
  .co-petit {
    min-height: 44px !important;
  }
  [data-rythme] {
    min-height: 44px !important;
  }
  /* le « × » qui ferme le bandeau : 30 px mesurés */
  .fermer-l, .fermer, [aria-label="Fermer"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ══ 3. CE QU'IL DOIT POUVOIR LIRE ═════════════════════════════════════════
   11 px mesurés sur trois classes, 10,5 px sur la page des tendances. On ne
   touche pas au texte courant, qui va bien : seulement à ce qui descend sous
   12,5 px, la limite basse de ce qui se lit sur un téléphone. */
@media (max-width: 960px) {
  /* ⚠ LA LISTE EST MESUREE, pas devinee : chacune de ces classes a ete trouvee
     SOUS 13 px sur la page d essai, en comptant ce qui est VISIBLE.
       .badge .badge-l .ruban .tag .nom small .petit .me  — 11 a 12,5 px
       .puce-haut span   la date « Mesure le 13 octobre 2026 »
       .pastille-d       les hausses et les baisses, « ▲ +6 » — et ce sont
                         justement les chiffres qu il vient lire. */
  .badge, .badge-l, .ruban, .tag, .nom, small, .petit, .me,
  .puce-haut span, .pastille-d {
    font-size: 13px !important;
  }
  /* ⚠⚠ 16 px SUR TOUT CHAMP DE SAISIE, ET C'EST PEUT-ÊTRE CE QU'IL A VU. Sous
     16 px, Safari sur iPhone ZOOME la page au moment où le doigt touche le
     champ — et elle ne se dézoome jamais toute seule. On se retrouve dans une
     page plus large que l'écran, qu'il faut déplacer du doigt, et où le haut
     passe par-dessus le reste. Marc, le 13 octobre : « la section du haut, elle
     embarque par-dessus le texte quand on déplace l'écran. » C'est exactement
     la description d'une page zoomée qu'on promène.
     ⚠ MA PREMIÈRE RÈGLE NE GAGNAIT PAS : mesuré à 15 px sur la page de
       connexion après l'avoir écrite. `input` tout court perd contre
       `.co-champ input`. On monte donc en spécificité, et on le mesure au lieu
       de le supposer — un `!important` qui perd ressemble à un `!important`
       qui gagne. */
  input, select, textarea,
  .co-champ input, .co-champ select,
  form input, form select, form textarea,
  .champ input, .boite input {
    font-size: 16px !important;
  }
}

/* ══ 4. L'AIDE EST UNE CHOSE QU'ON VOIT ════════════════════════════════════
   Marc, 13 octobre : « si les gens ont un problème ou ont besoin d'aide, ils
   doivent pouvoir demander à l'assistant directement sur le site, et il faut
   que ce soit le plus clair possible. »

   ⚠⚠ L'ASSISTANT EXISTAIT DÉJÀ SUR LES VINGT ET UNE PAGES, et j'ai failli en
     poser un deuxième à côté. C'est `.cmp-bulle`, posée par
     `site/compagnon.js` — celui que Marc a demandé le 3 septembre : « un petit
     bouton en bas de l'écran ».

   POURQUOI SON CLIENT NE L'A PAS TROUVÉE, mesuré sur un iPhone :
     · 42 px, et AUCUN TEXTE visible. Son étiquette existe pourtant —
       `<span class="tx">Une question ?</span>` — mais `compagnon.js:435` la
       cache : `.cmp-bulle .tx{display:none}` ;
     · elle est en HAUT À DROITE (`right:14px;top:14px`) : l'endroit où on
       cherche un menu ou une croix, et le plus loin du pouce.

   On ne touche donc pas à son assistant. On lui rend ses mots, et on le met
   là où la main est. `!important` parce que `compagnon.js` calcule sa position
   en mesurant les barres de la page et l'écrit en style direct. */
.cmp-bulle .tx { display: inline !important }
.cmp-bulle {
  top: auto !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  width: auto !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 0 18px 0 15px !important;
  gap: 9px;
  border-radius: 999px !important;
  font: 700 15px/1 inherit;
}
/* ⚠ DANS L'ÉDITEUR, ON NE LA GROSSIT PAS : `compagnon.js` la met à 34 px et à
   demi effacée pour ne pas couvrir le montage, et c'est le bon choix là. */
body.mode-editeur .cmp-bulle {
  min-height: 34px !important;
  padding: 0 !important;
  width: 34px !important;
  border-radius: 50% !important;
}
body.mode-editeur .cmp-bulle .tx { display: none !important }


/* ══ 5. LA PAGE DE CONNEXION, DÉBARRASSÉE DE SA SECTION QUI TOURNE ═════════
   Marc, 13 octobre 2026 : « quand on va dans la section pour se connecter ou
   créer un compte, la section du haut, elle embarque par-dessus le texte quand
   on déplace l'écran. […] on pourrait juste l'enlever et faire une page de
   connexion très basique, puisqu'on est sur téléphone. Sur ordinateur, on fait
   une vraie page comme on a déjà, car elle est beaucoup plus clean. »

   ⚠⚠ ET MON PREMIER DIAGNOSTIC ÉTAIT FAUX — il faut l'écrire, parce que j'ai
     failli refaire la moitié de la page pour rien. J'avais mesuré, le clavier
     ouvert, que « SE CONNECTER » était hors de l'écran, et j'en avais conclu
     que la page ne défilait pas et que le bouton était INATTEIGNABLE. J'avais
     donc rendu `#app` et `.co` non figés pour que la page défile.
     C'était faux : le formulaire défile DANS son panneau
     (`.co-panneau{position:absolute;overflow:auto}`), et moi je faisais
     défiler la FENÊTRE. En poussant le panneau, comme un doigt le fait :

       écran entier, 844 px   le bouton passe de y=722 à y=648   le doigt le touche
       clavier, 560 px        de y=614 à y=364                   le doigt le touche
       clavier, 420 px        de y=561 à y=224                   le doigt le touche
       clavier, 320 px        de y=523 à y=124                   le doigt le touche

     La page n'a jamais été cassée. J'ai donc RETIRÉ mon changement de
     position : il ne réparait rien et il touchait la mise en page d'une page
     qui marche. Ce qui le gênait, c'est la section qui tourne — et c'est
     exactement ce qu'il a demandé d'enlever.

   ⚠ CE QU'ON RETIRE, ET SEULEMENT ÇA : la phrase qui change (`.co-accroche`)
     et ses flèches « Phrase précédente / Phrase suivante » (`.co-fleches`).
     Quelqu'un qui ouvre cette page vient se connecter — il a déjà acheté. Sur
     un écran d'ordinateur elles restent : il l'a dit lui-même. */
/* ⚠⚠ 760 px, PAS 960 — ET C'EST LA LARGEUR DE BASCULE DE LA PAGE ELLE-MÊME.
   Mesuré : avec ma règle à 960, un écran de 800 px perdait la bande mais
   gardait un panneau de **340 px de large sur 800** — 460 px de vide à droite.
   La page a sa propre bascule, `@media (max-width:760px)`, et c'est là qu'elle
   passe en une colonne. Au-dessus, sa disposition côte à côte est juste et ne
   me regarde pas. On s'aligne sur la sienne au lieu de lui imposer la mienne.
   ⚠ Les règles de navigation, de texte et de cibles restent à 960 px : c'est
     là que `.liens` disparaît, et c'est ce seuil-là qu'elles corrigent. */
@media (max-width: 760px) {
  /* ⚠⚠ LA BANDE ENTIÈRE, PAS SEULEMENT SES MOTS — corrigé après mesure. Ma
     première version cachait la phrase (`.co-accroche`) et ses flèches, et
     laissait la BANDE : mesuré, `.co-visuel` occupait toujours **321 px, 38 %
     de l'écran**, vides. Et un doigt posé dedans ne fait rien défiler — rien
     n'y réagit. C'est la moitié du défaut qu'il décrit : le formulaire
     commence à 38 % du haut, défile dans sa propre boîte, et son texte est
     coupé net au bord de la bande. « Elle embarque par-dessus le texte. »
     ⚠ ON LA CACHE EN CSS, ON NE LA RETIRE PAS DU HTML : le script de la page
       la cherche par id, et la supprimer le ferait tomber AVANT de brancher le
       bouton « Se connecter ». Un carrousel invisible ne gêne personne ; un
       bouton débranché, oui. */
  .co-visuel, .co-accroche, .co-fleches { display: none !important }

  /* le formulaire prend tout l'écran : c'est la « page de connexion très
     basique » qu'il a demandée. */
  .co-panneau {
    position: static !important;
    inset: auto !important;
    max-height: none !important;
    overflow: visible !important;
    /* ⚠⚠ LA ZONE SÛRE, ET J'AVAIS ÉCRASÉ SA MARGE — trouvé par un examinateur.
       Ma première version mettait `padding: 0 …` : le titre se retrouvait à
       15 px du haut, c'est-à-dire SOUS L'ENCOCHE sur un iPhone. La page avait
       déjà la bonne idée (`calc(env(safe-area-inset-top,0px) + 34px)`) et je
       l'ai effacée en la remplaçant. On la remet. */
    padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--g, 16px) 40px !important;
  }
  .co { overflow: auto !important }

  /* ⚠⚠ LA MARQUE REVIENT, ET C'EST UN DÉFAUT QUE J'AVAIS CRÉÉ. Avec la bande
     retirée, « TrendX17 » n'apparaissait PLUS NULLE PART sur la page où on
     crée son compte — les deux endroits qui le portent sont cachés sur
     téléphone. Un formulaire nu, sans nom, sur lequel on tape son mot de
     passe : personne ne devrait avoir à faire ce saut de foi.
     ⚠ On rallume l'élément de la page (`.co-marque`), on n'écrit pas la marque
       en CSS : du texte inventé dans une feuille de style n'est ni traduisible
       ni lisible par un lecteur d'écran. */
  .co-marque { display: block !important; margin-bottom: 18px }
}

/* ══ 6. « CRÉER UN COMPTE » NE TOUCHE PLUS LA RANGÉE DE LIENS ═══════════════
   Marc : « en haut à droite, le bouton "Créer un compte" est beaucoup trop
   proche des autres options dans le haut de la page. »

   ⚠ MESURÉ : la pastille est à y=48-92 et la rangée de liens commence à y=92.
     L'écart est de ZÉRO pixel — elles se touchent. C'est ma rangée qui l'a
     créé, en montant sous le logo.

   ⚠⚠ JE NE L'ENLÈVE PAS, ET VOICI POURQUOI. Il proposait « soit la rétrécir,
     soit l'enlever ». Sur l'accueil, l'enlever serait sans risque : la rangée
     porte déjà « Se connecter », et le hero offre « Créer mon compte » et
     « J'ai déjà un compte » à 481 px. MAIS c'est le MÊME élément (`.nav .pill`)
     qui porte « Mon compte » sur les pages d'un abonné — et là, il OUVRE un
     panneau, pas une page. « Paramètres » dans la rangée mène à la page du
     compte, ce n'est pas la même chose. L'enlever fermerait ce panneau sur
     téléphone pour tous les abonnés, pour régler un problème d'espacement.
     On espace donc. Si Marc préfère l'enlever de l'ACCUEIL seulement, c'est
     une ligne : `body.accueil .nav .pill{display:none}`. */
@media (max-width: 960px) {
  /* ⚠⚠ PLUS PETITE, SANS PERDRE LA ZONE QUE LE DOIGT TOUCHE — Marc, 13 octobre
     2026 : « le bouton "Créer un compte" devrait être un petit peu plus
     petit, donc le bouton en haut à droite de l'écran. »
     Elle faisait 44 px de haut (mon propre plancher tactile). Elle en fait
     maintenant 36 : visiblement plus petite, comme il le demande.
     ⚠ MAIS ON NE REND PAS UN BOUTON PLUS DUR À TOUCHER POUR LE RENDRE PLUS
       JOLI. Le `::before` étend la zone sensible à 44 px sans rien changer au
       dessin — c'est exactement la technique que la page emploie déjà pour sa
       croix de fermeture (`commun.css` : `.fermer-l::before{content:"";
       position:absolute;inset:-7px}`). On emprunte son geste au lieu d'en
       inventer un. */
  .nav .pill {
    position: relative;
    min-height: 36px !important;
    height: 36px;
    padding: 0 13px;
    font-size: 13px;
  }
  .nav .pill::before {
    content: "";
    position: absolute;
    inset: -4px -2px;        /* 36 + 8 = 44 px de haut pour le doigt */
  }
}

/* ⚠ RIEN SOUS 13 PX SUR UN TÉLÉPHONE — 18 octobre 2026. Marc : « lance une
   boucle pour t'assurer que l'interface va bien s'afficher sur un écran de
   téléphone, et que quelqu'un qui arrive peut tout voir. » La sonde
   premier-coup-d'œil tenait trois pages au rouge depuis des jours : les
   pastilles `.tag` (confirmée, business, 12 s…) et les petits indices des
   chiffres étaient à 10,5 px — illisibles au pouce. La règle de la sonde est
   la bonne : rien sous 13 px. Les pages du catalogue sont fabriquées par
   src/publier.mjs (MOTEUR) ; on corrige ici, dans la feuille du téléphone,
   qui s'applique à toutes les pages d'un abonné. */
@media (max-width: 960px) {
  .tag { font-size: 13px; }
  .chiffres.petit .ind { font-size: 13px; }
  /* mesuré sur un téléphone, page par page : les petits écarts « à mesurer »
     des rangs (11,5 px), l'aide sous la liste et le pied de page (12,5 px) */
  .rang .delta { font-size: 13px; }
  .aide-liste { font-size: 13px; }
  .pied nav a, .pied span { font-size: 13px; }
}