/* chat-mobile.css — L'ecran d'arrivee du chat, sur telephone
 *
 * A part parce que `chat.css` depasse deja les 500 lignes du reglement, et
 * parce que ces regles se jugent ensemble : elles servent toutes le meme
 * chiffre, la part de l'ecran laissee a la barre de saisie.
 *
 * Chargee APRES `chat.css` : a specificite egale, c'est le dernier declare qui
 * gagne, et plusieurs regles d'ici redefinissent les siennes.
 *
 * Contexte des mesures : campagne Google Ads en cours, 70 % des arrivees sur
 * /chat viennent d'un telephone. Sur 14 jours, 45 arrivees, 24 personnes
 * tapent une idee, 4 creent un compte. Releve le 18/08/2026 a 375 px.
 */

/* ===== La barre de saisie sur telephone =====
   C'est le seul element pour lequel cet ecran existe, et il n'occupait que
   206 px sur 375, soit 55 % de la largeur. Deux causes qui s'additionnent :
   les 24 px de creux lateral de `.ch-vide`, et les deux boutons ronds plus
   leurs gouttieres qui mangent 91 px sur la meme ligne que le texte.

   Mesure du 18/08/2026 sur la campagne en cours : 45 arrivees, 24 personnes
   tapent une idee, 4 creent un compte. Tout se joue ici. */
@media (max-width: 600px) {
    /* 24 -> 12 px de chaque cote. La barre est bordee et posee sur un fond
       distinct : elle n'a pas besoin d'un creux qui la redit. */
    .ch-vide { padding-left: 0.75rem; padding-right: 0.75rem; }

    /* 16 px pile : sous ce seuil, Safari iOS zoome de lui-meme des qu'on
       touche le champ. La page saute, on perd son reperage, et on abandonne
       sur un incident qu'on n'a pas provoque. Vaut pour les DEUX barres, celle
       de l'arrivee et celle de la conversation. */
    .ch-saisie textarea { font-size: 16px; }
}

@media (max-width: 480px) {
    /* Les boutons passent SOUS le texte. C'est le motif des messageries
       mobiles, et ici il rend 116 px de largeur au champ : de 55 % a 86 % de
       l'ecran. Sur une ligne, un bouton de cible correcte (44 px) coute plus
       cher qu'il ne rapporte. */
    .ch-saisie { flex-wrap: wrap; padding: 0.7rem 0.7rem 0.6rem; }

    .ch-saisie textarea { flex: 1 1 100%; padding: 0.35rem 0.4rem; }

    /* Les deux boutons se rangent a droite, la ou tombe le pouce. */
    .ch-aide { order: 2; margin-right: auto; margin-left: 0.1rem; }
    .ch-envoyer { order: 3; }
}

/* ===== Les cibles tactiles de l'ecran d'arrivee =====
   44 px de cote, le seuil sous lequel on rate la cible au doigt. Releves a
   375 px : le bouton d'envoi et le « ? » faisaient 36x36, les quatre exemples
   37 px de haut. Un envoi rate sur un ecran ou tout se joue en un geste coute
   plus cher que les huit pixels gagnes.

   `min-height` et non `height` : le libelle des exemples doit pouvoir passer
   sur deux lignes sans que le bouton se coupe. */
@media (max-width: 600px) {
    .ch-envoyer, .ch-aide-bouton { width: 44px; height: 44px; }

    .ch-exemple { min-height: 44px; padding: 0.6rem 0.95rem; }
}

/* ===== Les cibles de l'ecran de conversation =====
   Le releve initial portait sur l'ecran d'arrivee. Une fois la conversation
   ouverte, neuf autres commandes passent sous les 44 px : le bouton du panneau
   des chats (38x38), celui du tiroir de donnees (39 de haut), les six onglets
   (35) et « Nouvelle conversation » (42).

   `min-height` partout plutot que `height` : ces libelles peuvent passer sur
   deux lignes selon la langue et la taille de police du systeme. */
@media (max-width: 1100px) {
    .ch-liste-bouton { width: 44px; height: 44px; }

    .ch-bascule { min-height: 44px; }

    /* La hauteur du bouton nourrit `--ch-bascule`, mesuree par chat.js pour
       caler le haut du panneau : elle suit toute seule. */
    .ch-onglet { min-height: 44px; }

    .ch-neuf { min-height: 44px; }
}

/* ===== Le titre d'arrivee =====
   `mobile.css` ramene TOUS les h1 a 22 px (20 sous 480) avec un `!important`,
   heritage d'une epoque ou cet ecran n'existait pas. Le titre tombait donc a
   20 px, la taille d'un intertitre, alors que c'est la premiere chose qu'on
   lit en arrivant d'une annonce et la seule qui dise ou l'on est.

   `!important` a contrecoeur : c'est le seul moyen de repasser devant celui de
   `mobile.css`. Entre deux declarations importantes, c'est la specificite qui
   tranche, et `.ch-titre` (une classe) bat `h1` (un element). */
@media (max-width: 768px) {
    .ch-titre { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
}

/* ===== Le tableau de bord, resserre =====
   Releve a 375 px sur le panneau Tendances : la zone visible fait 531 px, dont
   146 pris par la grille d'onglets, qui ne defile pas. Il reste 284 px pour
   524 px de contenu, soit 240 px a faire defiler pour un seul bloc.

   Les valeurs de base sont dessinees pour une colonne de 580 px sur grand
   ecran, ou l'air est une qualite. Sur 375 px il devient un cout : on paie en
   gestes de pouce ce qu'on gagne en respiration. */
@media (max-width: 600px) {
    /* La courbe garde sa forme a 120 px : c'est une tendance sur douze mois,
       pas une lecture de valeurs point par point, et les chiffres exacts sont
       juste au-dessus dans les cellules.

       On regle la VARIABLE et pas la hauteur du SVG : les points de la courbe
       et les graduations sont poses en pourcentage sur deux autres elements de
       meme hauteur. Toucher le seul SVG les laissait cales sur 150 px, donc
       flottant a cote du trace. */
    .ch-graphe-zone { --ch-graphe-h: 120px; }

    /* Les cellules de chiffres : le creux passe de 12 a 9 px et la valeur de
       1,4 a 1,25rem. Elle reste deux fois plus grosse que son libelle, ce qui
       est le seul rapport qui compte pour qu'on lise le nombre d'abord. */
    .ch-chiffre { padding: 0.55rem 0.7rem; }
    .ch-chiffre b { font-size: var(--ch-fs-xl); }

    /* Le cadre du bloc et les ecarts internes. 1,3rem de creux lateral sur une
       carte de 343 px, c'est 8 % de la largeur rendue au texte. */
    .ch-bloc { padding: 0.85rem 0.9rem; gap: 0.7rem; }
    .ch-bloc-titre { padding-bottom: 0.45rem; }
    .ch-panneau { gap: 0.7rem; }
    .ch-panneaux { padding-top: 0.6rem; }
    .ch-fiche { padding: 0.7rem 0.8rem 0.75rem; }
}

/* Les sous-onglets d'un panneau (« Demande », « Mots-cles »...) font 31 px.
   Ils avaient echappe au releve des cibles tactiles : sans donnees, aucun
   panneau n'en affiche, et l'ecran de depart en est donc depourvu. Ils coutent
   12 px de hauteur, a rebours du resserrage ci-dessus, mais un onglet qu'on
   rate est un onglet qu'on n'ouvre pas. */
@media (max-width: 600px) {
}

/* ===== La pastille des panneaux neufs =====
   Replie, le tiroir cache les chiffres derriere un bouton. Quand une recherche
   aboutit, rien ne le disait : les donnees arrivaient dans un panneau ferme et
   personne n'allait voir. La pastille repond a la seule question qui se pose
   devant un bouton ferme, « est-ce que ca vaut le coup de l'ouvrir ».

   Blanche et pleine, a cote de la fleche : c'est le seul point clair du bouton,
   donc le regard y va sans qu'on ait a l'agrandir. */
@media (max-width: 1100px) {
    .ch-bascule-neuf {
        flex: none;
        min-width: 20px; height: 20px;
        margin-left: auto; margin-right: 0.15rem;
        display: flex; align-items: center; justify-content: center;
        padding: 0 5px;
        border-radius: 999px;
        background: var(--mr-cream, #f7f2e9);
        color: var(--mr-ink, #1a1712);
        font-size: var(--ch-fs-2xs); font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1;
    }

    /* OBLIGATOIRE tant que la regle du dessus pose un `display` : une
       declaration `display` en CSS bat l'attribut `hidden`, que le script
       pilote. Sans cette ligne, un rond blanc vide reste dessine quand il n'y
       a rien de neuf. Meme piege que pour `.ch-side-voile` plus haut. */
    .ch-bascule-neuf[hidden] { display: none; }

    /* `margin-left: auto` sur la pastille pousse la fleche au bout ; sans
       pastille, c'est le libelle qui doit le faire. */
    .ch-bascule-texte { margin-right: auto; }
    .ch-bascule-neuf:not([hidden]) ~ .ch-bascule-fleche { margin-left: 0; }
}

/* ===== Les onglets qui viennent de se remplir =====
   La pastille du bouton dit COMBIEN ; une fois le tiroir ouvert, il reste a
   dire LESQUELS. Sans ca on ouvre, on voit six onglets identiques, et il faut
   les essayer un par un.

   On grossit la pastille d'etat deja presente plutot que d'ajouter une marque
   a cote : c'est le meme element qui dit « rempli » et « rempli a l'instant »,
   donc il n'y a jamais deux points a interpreter sur un onglet de 170 px.

   Elle s'eteint au clic sur l'onglet, pas a l'ouverture du tiroir : ouvrir ne
   veut pas dire avoir lu. */
@media (max-width: 1100px) {
    .ch-onglet.est-neuf u {
        width: 11px; height: 11px;
        background: var(--mr-cream, #f7f2e9);
        border: 0;
        opacity: 1;
        /* Le halo detache le point du fond sombre de l'onglet non selectionne,
           ou un rond creme sur creme se perdrait au bord du libelle. */
        box-shadow: 0 0 0 2px var(--mr-surface);
    }

    .ch-onglet.est-neuf { color: var(--mr-text-strong); }
}

/* ===== Le tiroir ouvert prend la page =====
   Deplie, le panneau gardait au-dessus de lui le titre de la conversation et,
   en bas, la barre de saisie : deux bandes qui ne servent pas a lire des
   chiffres, environ 120px sur un ecran qui en fait 660.

   La barre du site, elle, RESTE. C'est la seule sortie vers le compte, les
   reglages et le reste du produit ; l'effacer donnait bien 64px de plus mais
   enfermait dans un ecran sans issue visible.

   Tout revient a la fermeture. C'est le meme geste qui donne la place et la
   rend, et le bouton de repli reste sous les yeux en haut du panneau. */
@media (max-width: 1100px) {
    /* Le bouton des conversations se cale sous la barre du site, exactement ou
       le bouton de repli vient se poser une fois deplie. Deux boutons au meme
       endroit, et la liste des chats n'a de toute facon rien a faire sous un
       panneau qui couvre l'ecran. */
    .ch.donnees-ouvertes .ch-liste-bouton { display: none; }

    /* La colonne de conversation reste EN PLACE, simplement plus peinte.
       `visibility` ne retire rien du flux : ni la hauteur de la barre de
       saisie, ni la position du fil ne bougent, donc rien ne saute a la
       fermeture. `display: none` aurait redimensionne le fil sous le panneau,
       et son defilement serait revenu ailleurs qu'on l'avait laisse.
       Le bouton de repli redevient visible : `visibility` s'herite, et un
       descendant peut la reprendre. */
    .ch.donnees-ouvertes .ch-rail { visibility: hidden; }
    .ch.donnees-ouvertes .ch-bascule { visibility: visible; }

    /* Plus rien a laisser voir en bas : le panneau descend jusqu'au bord.
       `--ch-bas` reservait la place de la saisie, qui n'est plus la. */
    .ch.donnees-ouvertes .ch-bord { bottom: 0; }

    /* Sans l'en-tete du fil, le bouton viendrait se coller a la barre du site,
       deux bords arrondis l'un contre l'autre. Le creux passe par une variable
       et non par un `padding` sur le conteneur : le bouton ET le panneau se
       calent sur `--ch-creux-haut` (chat-bord.css), donc ils descendent
       ensemble et le bouton garde son recouvrement de moitie. Un `padding`
       aurait en plus rallonge la boite du conteneur, et le bas du panneau
       serait passe sous le bord de l'ecran. */
    .ch.donnees-ouvertes { --ch-creux-haut: 0.55rem; }
}

/* Les six onglets tiennent sur une bande qu'on balaie du doigt, comme la rangee
   d'onglets d'un navigateur mobile. Ils avaient ete passes sur deux rangs de
   trois pour que rien ne reste hors champ ; deux rangs coutent 90px de haut sur
   l'ecran ou le tableau de bord en a le moins a perdre.

   Ce qui manquait au defilement, ce n'etait pas la place mais le SIGNAL : rien
   ne disait qu'il y avait quelque chose a droite. Deux ajouts le disent. Le
   fondu du bord droit laisse voir un onglet coupe au lieu d'un bord net, et un
   bord coupe se lit comme « ca continue ». Et le creux de droite reserve la
   largeur du fondu : arrive au bout, le dernier onglet s'arrete avant lui,
   donc il est net et on sait qu'il n'y a plus rien apres. */
@media (max-width: 700px) {
    .ch-onglets {
        gap: 4px;
        /* Le creux de droite fait exactement la largeur du fondu. */
        padding: 0 1.4rem 5px 0;
        /* `proximity` et non `mandatory` : un balayage court doit pouvoir
           s'arreter entre deux onglets, sinon la bande rebondit sous le doigt.
           `scroll-padding` empeche l'onglet vise de se caler sous le fondu. */
        scroll-snap-type: x proximity;
        scroll-padding: 0 1.4rem 0 0;
        /* Safari iOS ne lit que la propriete prefixee. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.4rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 1.4rem), transparent);
    }

    .ch-onglet {
        scroll-snap-align: start;
        gap: 0.4rem; padding: 0.45rem 0.65rem;
        font-size: var(--ch-fs-xs);
        border-radius: var(--mr-radius-sm);
        margin-bottom: 0;
    }

    /* La metaphore de l'onglet de navigateur tombe des que la bande defile :
       le trait du bas de l'onglet actif n'efface plus le filet de facon lisible
       quand l'onglet peut se retrouver a moitie sorti. Il prend donc un cadre
       complet, qui le designe ou qu'il soit dans la bande. */
    .ch-onglet[aria-selected="true"] {
        background: var(--mr-surface-card);
        border-color: var(--mr-border-strong);
        border-bottom-color: var(--mr-border-strong);
    }
}