/* ---------- Version mobile : accueil et choix du candidat (index.php ; oct. 2026, docs/mobile.md, lot 2) ----------
   Toutes les règles sont sous html.mobile (js/mobile-bascule.js) : la version PC n'en lit aucune.
   Accueil : le menu en une colonne qui défile si l'écran est court, Dédé qui se penche dans le coin.
   Choix du candidat : la pile devient une rangée d'onglets kraft qu'on fait glisser (collée en haut), le dossier s'ouvre en une
   colonne (fiche, puis forces et axes), le bouton « Prendre la tête de la campagne » reste sous le pouce ; la télé, Le Sondé
   et vos campagnes suivent en dessous. Les fenêtres du menu passent en plein écran. */

/* ---- Barre noire du haut ---- */
html.mobile .qg-barre { height: calc(48px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); gap: 10px; }
html.mobile .qg-barre .logo { font-size: 19px; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
html.mobile .qg-barre > * { flex-shrink: 0; }
html.mobile .qg-barre .vide { flex: 1 1 0; min-width: 0; }
/* sur le choix du candidat, le compte à rebours laisse la place au bouton « ← Accueil » */
html.mobile body:not(.en-accueil) .qg-barre .pastille { display: none; }
html.mobile .qg-barre .sep, html.mobile #barre-date { display: none; }
html.mobile .qg-barre .pastille { font-size: 10.5px; padding: 2px 6px; white-space: nowrap; }
html.mobile .lien-barre { font-size: 13px; padding: 6px 10px; white-space: nowrap; }
/* icônes X et Bluesky (2 nov.) : barre resserrée et compte à rebours raccourci (« J − 166 ») pour tenir à côté de « Se connecter » sur 375 px */
html.mobile .lien-barre.reseau { padding: 0 7px; margin: 9px 0; }
html.mobile .qg-barre { gap: 8px; }
html.mobile .qg-barre .pastille { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.mobile .qg-barre .rebours-long { display: none; }
html.mobile .lien-barre.reseau + .lien-barre.reseau { margin-left: -2px; }

/* ---- Accueil ---- */
html.mobile .accueil { top: calc(48px + env(safe-area-inset-top, 0px)); padding: 18px 16px calc(52px + env(safe-area-inset-bottom, 0px));
    place-items: start center; overflow-y: auto; overscroll-behavior: contain; }
html.mobile .accueil::before { width: 92vw; top: 42%; }
html.mobile .accueil .colonne { width: min(400px, 100%); margin-top: 0; gap: 11px; }
html.mobile .accueil .titre { margin-bottom: 8px; }
html.mobile .accueil .titre .elysee { width: 150px; margin-top: 4px; }
html.mobile .accueil .titre .maquette { width: 220px; margin-top: 8px; }
html.mobile .accueil .titre small { font-size: 11.5px; letter-spacing: .32em; }
html.mobile .accueil .titre b { font-size: clamp(54px, 17vw, 72px); }
html.mobile .accueil .titre span { font-size: 16px; margin-top: 8px; }
html.mobile .btn { font-size: 20px; padding: 12px 16px; min-height: 52px; }
html.mobile .btn.principal { font-size: 26px; padding: 14px 18px; }
html.mobile .btn.tuto { font-size: 17px; padding: 8px 16px; min-height: 42px; }
html.mobile .btn-petits .btn { font-size: 16px; min-height: 46px; }
html.mobile .accueil .signature { margin-top: 10px; }
/* Dédé se penche dans le coin, sous le menu (les boutons passent devant) */
html.mobile .accueil .dede { width: 104px; right: 6px; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); position: fixed; z-index: 0; opacity: .95; }
html.mobile .accueil .dede .coin-bulle { width: 190px; right: 88%; top: -18%; }
html.mobile .accueil .dede .coin-bulle span { font-size: 13px; }
html.mobile .accueil .colonne { z-index: 1; }
html.mobile .accueil .ticker { position: fixed; height: calc(36px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); font-size: 15px; }
html.mobile .accueil .ticker b { padding: 0 12px; }

/* ---- Choix du candidat ---- */
html.mobile .page { display: flex; flex-direction: column; gap: 18px; min-height: 0; padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
/* la pile : une rangée d'onglets kraft collée sous la barre ; on la fait glisser du doigt */
html.mobile .pile { position: sticky; top: calc(48px + env(safe-area-inset-top, 0px)); z-index: 20; margin: 0 calc(-1 * max(12px, env(safe-area-inset-left, 0px))); padding: 12px max(12px, env(safe-area-inset-left, 0px)) 8px;
    background: var(--fond); box-shadow: 0 6px 10px -8px rgba(30, 24, 10, .45); }
html.mobile .pile .etiquette { font-size: 11.5px; margin-bottom: 2px; }
html.mobile .pile .sous { display: none; }
html.mobile #pile { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 2px 4px; }
html.mobile #pile::-webkit-scrollbar { display: none; }
html.mobile .chemise { flex: none; width: 152px; margin: 0; padding: 8px 10px 8px 14px; grid-template-columns: 1fr auto; gap: 4px; scroll-snap-align: start; border-radius: 3px 10px 3px 3px; }
html.mobile .chemise .num { display: none; }
html.mobile .chemise .nom { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mobile .chemise .nom small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mobile .chemise:hover { transform: none; }
html.mobile .chemise[aria-selected="true"] { transform: translateY(-4px); box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset, 0 0 0 2px var(--encre), 0 8px 14px -6px rgba(40,25,0,.6); }
html.mobile .chemise[aria-selected="true"]::after { display: none; }
html.mobile .noms-origine { margin-bottom: 4px; }

/* le dossier ouvert, en une colonne */
html.mobile .dossier { display: flex; flex-direction: column; gap: 16px; padding: 18px 12px 0; margin-top: 30px; min-height: 0 !important; border-radius: 4px 12px 6px 6px; }
html.mobile .dossier::before { left: 16px; font-size: 10px; padding: 7px 12px 0; }
html.mobile .dossier::after { width: 70px; height: 70px; }
html.mobile .feuille { padding: 18px 14px; }
html.mobile .f1, html.mobile .f2 { transform: none; }
html.mobile .entete-officiel { font-size: 9px; margin-bottom: 14px; gap: 8px; }
html.mobile .identite { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
html.mobile .polaroid { padding: 6px 6px 24px; }
html.mobile .polaroid figcaption { font-size: 10.5px; bottom: 5px; }
html.mobile .trombone { left: 16px; }
html.mobile .nom-grand { font-size: clamp(26px, 8.6vw, 40px); overflow-wrap: break-word; }   /* « LA PLUME » ne se coupe plus en « PLUM / E » sur 340 px */
html.mobile .nom-grand small { font-size: 17px; }
html.mobile .parti { font-size: 13px; margin-top: 8px; }
html.mobile .slogan { font-size: 17px; }
html.mobile .bio { font-size: 15px; }
html.mobile .fiche-tableau, html.mobile .objectifs { width: 100%; }
html.mobile .objectifs li { font-size: 14px; }
html.mobile .tampon-niveau { position: static; display: block; width: fit-content; max-width: none; margin: 16px 0 4px auto; font-size: 20px; }
html.mobile .postit-coin { position: static; width: auto; margin: -4px 0 14px; }
html.mobile .jauge { grid-template-columns: 96px 1fr 34px; font-size: 13px; }
html.mobile .sujets li { font-size: 16px; }
html.mobile .axes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
html.mobile .axe .bornes { font-size: 11px; }
html.mobile .outil-nom { width: 36px; height: 36px; }
html.mobile .saisie-nom { font-size: 28px; }
/* le bouton du dossier reste sous le pouce, collé en bas de l'écran pendant qu'on lit */
html.mobile .actions { position: sticky; bottom: 0; z-index: 5; flex-wrap: wrap; gap: 10px; margin: 0 -12px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(transparent, var(--kraft-fonce) 18px); }
html.mobile .actions .bouton-principal { flex: 1 1 100%; font-size: 19px; padding: 14px 16px; min-height: 52px; }
html.mobile .actions .vide, html.mobile .actions .mention { display: none; }
html.mobile .actions .bouton-abandon { flex: 1 1 100%; }

/* la télé et Le Sondé, puis vos campagnes */
html.mobile .ecrans { grid-column: auto; flex-direction: column; align-items: stretch; gap: 18px; }
html.mobile .ecrans > * { flex: none; }
html.mobile .barre { grid-template-columns: 92px 1fr 40px; }
html.mobile .journal { transform: none; }
html.mobile .journal p { columns: 1; font-size: 14px; }
html.mobile .journal h5 { font-size: 20px; }
html.mobile .bristols { grid-template-columns: 1fr; gap: 12px; }
html.mobile .bristol { grid-template-columns: 48px minmax(0, 1fr); gap: 10px 12px; padding: 12px 14px; }
html.mobile .bristol img, html.mobile .bristol .initiales { width: 48px; height: 48px; }
html.mobile .bristol .gestes { grid-column: 1 / -1; justify-content: flex-end; }
html.mobile .bristol .geste { min-height: 40px; display: inline-flex; align-items: center; }
html.mobile .remplacer-consigne { font-size: 15px; }

/* infobulle d'un axe : sur toute la largeur, un appui l'ouvre, un appui ailleurs la ferme */
html.mobile .infobulle { width: calc(100vw - 24px) !important; }

/* ---- Fenêtres du menu : plein écran ---- */
html.mobile .modale { place-items: stretch; background: var(--fond); }
html.mobile .modale .boite, html.mobile .modale .boite.reprise, html.mobile .modale .boite.carnet, html.mobile .modale .boite.atelier {
    width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none;
    padding: calc(18px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    overflow-y: auto; overscroll-behavior: contain; }
html.mobile .modale h3 { font-size: 28px; }
html.mobile .modale .boite > .btn#fermer { display: flex; width: 100%; justify-content: center; margin-top: 20px; min-height: 48px; }
html.mobile .modale .champ input { min-height: 46px; }
html.mobile .modale .choix-compte { grid-template-columns: 1fr; }
/* Continuer : un dossier par ligne */
html.mobile .reprise .rep-grille { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }
html.mobile .reprise .rep-vide { min-height: 0; }
html.mobile .reprise .rep-dossier:hover { transform: none; }
/* Options : une colonne */
html.mobile .opt-ligne { grid-template-columns: 1fr; }
html.mobile .opt-ligne small { grid-column: 1; }
html.mobile .opt-choix { flex-wrap: wrap; }
html.mobile .opt-choix button, html.mobile .opt-actions button { min-height: 42px; }
/* Mes succès : le carnet sur toute la hauteur, onglets qui glissent, listes en une colonne */
html.mobile .modale .boite.carnet { display: flex; overflow: hidden; }
html.mobile .carnet .sc-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-left: 0; }
html.mobile .carnet .sc-onglets::-webkit-scrollbar { display: none; }
html.mobile .carnet .sc-panneau { padding: 14px 12px 16px; }
html.mobile .carnet .sc-medailles li { grid-template-columns: 1fr; gap: 8px; }
html.mobile .carnet .sc-trois { grid-template-columns: 1fr; gap: 6px; }
html.mobile .carnet .sc-collections li { grid-template-columns: minmax(0, 1fr) 60px; }
html.mobile .carnet .sc-collections li .sc-barre { grid-column: 1 / -1; grid-row: 2; }
html.mobile .carnet .sc-legendaires { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
html.mobile .carnet .sc-affiches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.mobile .carnet .sc-fins { grid-template-columns: 1fr; }
html.mobile .carnet .sc-total { grid-template-columns: 1fr; gap: 8px; }

/* retouches après capture (19 oct.) : sur l'accueil, le bouton « ← Accueil » caché ne prend plus de place (il écrasait le logo) ;
   la légende du Polaroid tient sur une ligne */
html.mobile body.en-accueil .retour-bar { display: none; }
html.mobile .qg-barre .logo { min-width: 46px; }
html.mobile .polaroid figcaption { font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
/* le nom du jeu ne tient pas dans la barre à côté des boutons : seul le petit Élysée reste (le titre est juste en dessous) */
html.mobile .qg-barre .logo { font-size: 0; gap: 0; }
html.mobile .qg-barre .logo .logo-symbole { width: auto; height: 28px; margin: 0; }

/* « Votre candidat » : le texte du dossier vierge réservait la place du tampon (style en ligne) ; sur téléphone, le tampon est sous le texte */
html.mobile .dossier .bio { padding-right: 0 !important; min-height: 0 !important; }

/* « Votre candidat », l'entretien : le conseiller en bandeau (petit portrait, nom), la fiche bien visible sur le sous-main,
   l'échelle d'accord en cinq cases compactes sur une ligne ; la fenêtre défile si besoin */
html.mobile .modale .boite.entretien { height: 100%; display: flex; flex-direction: column; }
html.mobile .entretien .en-corps { grid-template-columns: minmax(0, 1fr); gap: 10px; height: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.mobile .entretien .en-conseiller { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; justify-items: start; align-items: center; text-align: left; height: auto; }
html.mobile .entretien .en-cadre-visage { grid-row: span 2; width: 64px; margin: 0; box-shadow: 2px 2px 0 var(--encre); }
html.mobile .entretien .en-conseiller b { font-size: 16px; align-self: end; }
html.mobile .entretien .en-conseiller small { font-size: 12px; align-self: start; }
html.mobile .entretien .en-tas { display: none; }
html.mobile .entretien .en-droite { flex: 1; min-height: 0; height: auto; }
html.mobile .entretien .en-bulle { min-height: 0; padding: 10px 14px; margin-bottom: 8px; }
html.mobile .entretien .en-bulle::before { left: 22px; top: -12px; border: 10px solid transparent; border-bottom-color: var(--encre); border-top: 0; }
html.mobile .entretien .en-bulle p { font-size: 15.5px; }
html.mobile .entretien .en-bureau { flex: 1 0 auto; min-height: 168px; padding: 12px; margin: 2px 0 10px; }
html.mobile .entretien .en-fiche { min-height: 0; padding: 14px 16px 16px; }
html.mobile .entretien .en-fiche .en-affirmation { font-size: 19px; }
html.mobile .entretien .en-echelle { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
html.mobile .entretien .en-echelle button { grid-auto-flow: row; justify-content: center; justify-items: center; gap: 6px; padding: 8px 2px 7px; font-size: 11px; line-height: 1.15; }
html.mobile .entretien .en-paquet { width: min(260px, 100%); height: 140px; }
html.mobile .entretien .en-actions { flex-wrap: wrap; }
html.mobile .entretien .en-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
/* identité et point de départ : une colonne */
html.mobile .identite-perso .id-corps, html.mobile .identite-perso .id-profils, html.mobile .identite-perso .id-deux { grid-template-columns: minmax(0, 1fr); }
html.mobile .identite-perso .id-fiche { position: static; }
html.mobile .identite-perso .id-form > #fermer { margin-top: 8px; }
/* l'atelier du portrait : une colonne */
html.mobile .atelier .at-corps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* Continuer : le score et son libellé sur une ligne, même sur un petit écran (recette du lot 7) */
html.mobile .reprise .rep-score b { white-space: nowrap; font-size: 30px; }
html.mobile .reprise .rep-score small { font-size: 11px; letter-spacing: .06em; }

/* ---- Invitation à installer le jeu (js/installer.js) : un post-it de Dédé collé au-dessus du bandeau Info24 ---- */
html.mobile .invite-install { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(48px + env(safe-area-inset-bottom, 0px)); padding: 14px 14px 8px;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 12px; align-items: start;
  background: var(--postit); color: var(--encre); box-shadow: var(--ombre-papier); transform: rotate(-1.2deg) translateY(16px); opacity: 0;
  transition: opacity .3s, transform .35s cubic-bezier(.3,1.4,.5,1); }
html.mobile .invite-install.vu { opacity: 1; transform: rotate(-1.2deg); }
html.mobile .invite-install::before { content: ''; position: absolute; top: -9px; left: 50%; width: 76px; height: 18px; margin-left: -38px; background: rgba(255, 255, 255, .55); transform: rotate(2deg); }
html.mobile .invite-install > img { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 2px solid var(--encre); }
html.mobile .invite-install p { margin: 0; font-family: var(--f-texte); font-size: 14.5px; line-height: 1.4; }
html.mobile .invite-install p b { display: block; margin-bottom: 4px; font-family: var(--f-titre); font-weight: 900; font-size: 17px; text-transform: uppercase; letter-spacing: .05em; }
html.mobile .invite-install .ii-gestes, html.mobile .invite-install .ii-pied { grid-column: 2; }
html.mobile .invite-install .ii-gestes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-family: var(--f-texte); font-size: 14px; }
html.mobile .invite-install .ii-gestes li { display: flex; align-items: center; gap: 8px; }
html.mobile .invite-install .ii-gestes svg { flex: none; width: 26px; height: 26px; padding: 3px; fill: none; stroke: #1a6fe0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; background: #fff; border-radius: 6px; border: 1px solid var(--ligne); }
html.mobile .invite-install .ii-pied { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
html.mobile .invite-install button { min-height: 40px; padding: 6px 14px; font-family: var(--f-titre); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
html.mobile .invite-install .ii-oui { color: #fff; background: var(--correcteur); border: 2px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); text-decoration: none; }
html.mobile.anim-reduites .invite-install { transition: none; }
/* cadre de neutralité : le tampon « Parodie » de la pile reste sur PC ; sur téléphone, la phrase est sur l'accueil (la bande de la pile est collée en haut) */
html.mobile .tampon-parodie { display: none; }
/* ligne du bas (version, mentions légales, Ko-fi) : à gauche de Dédé, qui est collé dans le coin */
html.mobile .accueil .version { margin-right: 108px; text-align: left; line-height: 1.6; }