/* ══════════════════════════════════════════════════════════════════════════
   ÉlecPro — HABILLAGE PC (desktop)
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ RÈGLE ABSOLUE DE CE FICHIER : il ne doit JAMAIS s'appliquer sur mobile.
   Double sécurité :
     1) index.html le charge avec  media="(min-width:1000px) and (pointer:fine)"
        → le navigateur n'applique aucune règle en dessous / sans souris.
     2) tout le contenu est de toute façon enveloppé dans le même @media.
   Conséquence : sur iPhone/iPad tactile, ce fichier est INERTE.
   Rollback complet = supprimer la ligne <link> dans index.html.

   ⚠️ POURQUOI TOUS LES SÉLECTEURS COMMENCENT PAR « html » :
   ce fichier est chargé AVANT les deux blocs <style> d'index.html (lignes 12
   et 199). À spécificité égale, c'est le dernier déclaré qui gagne — donc
   `body{max-width:none}` était écrasé par `body{max-width:430px}`.
   Le préfixe `html` monte la spécificité d'un cran : nos règles gagnent quelle
   que soit leur position, et sans aucun !important (testé 25/07).

   Ce fichier ne fait QUE de la mise en page. Aucune couleur en dur :
   on réutilise les variables (--s, --br, --bg, --f, --bl, --bll…) pour rester
   compatible avec le mode sombre (body.dark).
   Créé le 2026-07-25 — voir journal_rollback.
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width:1000px) and (pointer:fine){

  /* ── 1. LARGEUR ────────────────────────────────────────────────────────
     L'app est bloquée en colonne de 430px (body{max-width:430px}).
     On libère la largeur ; le contenu reste borné plus bas via .pg.        */
  html body{
    max-width:none;
    margin:0;
  }
  /* La barre latérale (ex-barre du bas) n'existe que pour les gestionnaires :
     on ne décale le corps que dans ce cas (classe posée par updateBottomNav). */
  html body.has-bnav{ padding-left:216px; }

  /* ── 2. BARRE DU BAS → COLONNE LATÉRALE GAUCHE ─────────────────────────
     On ne touche PAS à `display` (piloté en inline par updateBottomNav :
     'flex' pour les gestionnaires, 'none' sinon) — on ne change que la forme. */
  html #bottom-nav{
    top:0; bottom:0; left:0; right:auto;
    width:216px; max-width:216px; margin:0;
    flex-direction:column;
    justify-content:flex-start;
    gap:4px;
    padding:22px 12px 24px;
    border-top:none;
    border-right:1px solid var(--br);
    box-shadow:2px 0 14px rgba(0,0,0,.05);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  html #bottom-nav button{
    flex:none;
    width:100%;
    flex-direction:row;
    justify-content:flex-start;
    align-items:center;
    gap:12px;
    font-size:13.5px;
    padding:12px 14px;
    border-radius:12px;
    text-align:left;
    transition:background .12s;
  }
  html #bottom-nav button span{ font-size:21px; width:26px; text-align:center; line-height:1; }
  html #bottom-nav button:hover{ background:var(--f); }
  html #bottom-nav button.on{ background:var(--bll); }

  /* Plus de barre en bas → on récupère les 120px de marge basse. */
  html body.has-bnav #ct{ padding-bottom:0; }

  /* ── 3. ZONE DE CONTENU ────────────────────────────────────────────────
     ⚠️ NE PAS toucher au mécanisme de scroll de #ct (overflow-y/max-height) :
     piège connu (flex 10/07 + barre iOS). On ne change QUE la largeur.      */
  html #ct{ width:100%; }

  /* Le contenu utile reste borné pour rester lisible sur un 27". */
  html .pg{ max-width:1240px; margin:0 auto; padding:26px 34px 60px; }
  /* Ces deux pages portent un padding en style inline → !important requis. */
  html #p-facturation, html #p-autre{ padding:26px 34px 60px !important; }

  /* ── 4. BANDEAU SUPÉRIEUR ──────────────────────────────────────────────
     Reste sticky et pleine largeur (dégradé bleu), contenu recentré.        */
  html #nav-top{ max-width:1240px; margin:0 auto; }

  /* ── 5. FENÊTRES (bottom-sheets → boîtes de dialogue centrées) ─────────── */
  html .ov{ align-items:center; padding:24px; }
  html body.has-bnav .ov{ padding-left:240px; }
  html .sh{
    border-radius:18px;
    max-width:860px;
    max-height:86vh;
    padding:26px 30px 30px;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
  }

  /* ── 6. CONFORT SOURIS ─────────────────────────────────────────────────
     Survol uniquement sur ce qui est réellement cliquable (attribut onclick),
     pour ne pas faire réagir les cartes purement informatives.              */
  html [onclick]{ cursor:pointer; }
  html .card[onclick]:hover,
  html .cdsm[onclick]:hover,
  html .swipe-card[onclick]:hover{
    border-color:var(--bl);
    box-shadow:0 4px 16px rgba(26,79,214,.10);
  }
  html .card, html .cdsm, html .swipe-card{ transition:border-color .12s, box-shadow .12s; }
  html .btn:hover{ filter:brightness(.95); }
  html .btn:active{ filter:brightness(.9); }
  html .ibtn:hover{ background:var(--f); }
  html .tg:hover{ border-color:var(--ac); }
  html .xb:hover{ filter:brightness(.93); }

  /* ── 7. FORMULAIRES ────────────────────────────────────────────────────
     Un champ « Nom » étiré sur 1240px est illisible. On borne globalement :
     `input{width:100%}` est défini pour tous les champs de l'app, et
     facturation.js n'utilise PAS la classe .f (divs + styles inline) — une
     règle ciblée .f>input ne l'aurait donc pas couvert (constaté au test).
     max-width ne rétrécit jamais un champ déjà petit (CP, qté, PU…).        */
  html input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
  html select{ max-width:620px; }
  html textarea{ max-width:860px; }
  /* Un bouton « pleine largeur » sur 1240px ne ressemble à rien. */
  html .bfl{ max-width:420px; }
  html .sh .bfl{ max-width:none; }

  /* ── 8. ASCENSEURS discrets (WebKit/Chromium) ──────────────────────────── */
  html #ct::-webkit-scrollbar, html .sh::-webkit-scrollbar, html #bottom-nav::-webkit-scrollbar{ width:10px; }
  html #ct::-webkit-scrollbar-thumb, html .sh::-webkit-scrollbar-thumb{
    background:var(--br); border-radius:8px; border:3px solid transparent; background-clip:content-box;
  }
  html #ct::-webkit-scrollbar-thumb:hover, html .sh::-webkit-scrollbar-thumb:hover{ background:var(--mid); background-clip:content-box; }
}