/* ================================================================
   REFONTE TABLETTE/DESKTOP — COUCHE COMMUNE (coquille partagée)
   Chargée EN DERNIER, uniquement si html.pcrefonte (aperçu ?pcrefonte=1
   ou flag admin site.mobile.pcrefonte_on=1). Réversible : flag OFF => non chargée.
   NE TOUCHE JAMAIS : App téléphone (<=767 : base gère déjà le bottom-nav),
   ni le Gardien (.ai-*), ni ses animations (.ai-orbit/.ai-ring/.ai-gardien*).
   Garde-fous respectés : on NE redéclare PAS grid-template-columns de .pub-shell ;
   on ajuste seulement --pub-rail-w.
   ================================================================ */

html.pcrefonte{
  --pc-navy-0:#071624; --pc-navy-1:#0D2233; --pc-navy-2:#12304a;
  --pc-cyan:#35D7D1; --pc-amber:#FFB65A; --pc-ink:#F6F0DF; --pc-ink-soft:#A9B8C6;
  --pc-danger:#DC352F; --pc-line:rgba(255,255,255,.08);
  --pc-radius:18px; --pc-gap:20px;
}

/* ================================================================
   DESKTOP >=1200px : nav rail LARGE, plate, libellés à droite, actif cyan
   ================================================================ */
@media (min-width:1200px){
  html.pcrefonte{ --pub-rail-w:236px; }

  html.pcrefonte .pub-rail{
    align-items:stretch !important;
    padding:16px 12px 40px !important;
    gap:2px;
  }
  html.pcrefonte .pub-rail-nav{ align-items:stretch; gap:2px; }

  /* Marque (logo flamme + nom) */
  html.pcrefonte .pub-rail-brand{
    display:flex; align-items:center; gap:10px;
    padding:4px 10px 14px; margin-bottom:6px;
  }
  html.pcrefonte .pub-rail-brand video{ width:44px; height:44px; flex:0 0 auto; }
  html.pcrefonte .pub-rail-brand .pub-rail-name{
    display:block !important; color:var(--pc-ink); font-weight:800; font-size:15px; line-height:1.15;
  }

  /* Familles rendues PLATES (une seule liste, comme la maquette) */
  html.pcrefonte .pub-rail-fam-h{ display:none !important; }
  html.pcrefonte .pub-rail-fam-body{ display:flex !important; gap:2px; padding:2px 0; }
  html.pcrefonte .pub-rail-sep{ margin:10px 8px; }

  /* Items : icône à gauche + libellé, alignés à gauche */
  html.pcrefonte .pub-rail-item{
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:12px !important;
    padding:10px 12px !important;
    border-radius:12px !important;
    font-size:14.5px !important;
    font-weight:600 !important;
    text-align:left !important;
    color:var(--pc-ink-soft) !important;
    line-height:1.15 !important;
  }
  html.pcrefonte .pub-rail-item svg{ width:22px; height:22px; flex:0 0 auto; }
  html.pcrefonte .pub-rail-item span{ font-size:14.5px; }
  html.pcrefonte .pub-rail-item:hover{
    background:rgba(255,255,255,.05) !important;
    color:var(--pc-ink) !important;
    transform:none !important;
  }
  /* Actif = cyan (remplace le doré de base) */
  html.pcrefonte .pub-rail-item.is-active{
    background:linear-gradient(90deg,rgba(53,215,209,.20),rgba(53,215,209,.06)) !important;
    color:var(--pc-cyan) !important;
    box-shadow:inset 0 0 0 1px rgba(53,215,209,.38) !important;
  }
  html.pcrefonte .pub-rail-item.is-active svg{ color:var(--pc-cyan) !important; }
  html.pcrefonte .pub-rail-item.is-active span{ color:var(--pc-cyan) !important; }

  /* Badge messages : repositionné pour item horizontal */
  html.pcrefonte .pub-rail-badge{ top:50% !important; right:12px !important; transform:translateY(-50%); }
}

/* ================================================================
   TABLETTE PAYSAGE 901–1199px : rail COMPACT icône seule (pas téléphone)
   ================================================================ */
@media (min-width:901px) and (max-width:1199px){
  html.pcrefonte{ --pub-rail-w:78px; }
  html.pcrefonte .pub-rail{ align-items:center !important; padding:14px 6px 40px !important; }
  html.pcrefonte .pub-rail-fam-h{ display:none !important; }
  html.pcrefonte .pub-rail-fam-body{ display:flex !important; }
  html.pcrefonte .pub-rail-item{
    flex-direction:column !important; align-items:center !important; justify-content:center !important;
    gap:3px !important; padding:9px 4px !important; font-size:10.5px !important; text-align:center !important;
    color:var(--pc-ink-soft) !important;
  }
  html.pcrefonte .pub-rail-item svg{ width:22px; height:22px; }
  html.pcrefonte .pub-rail-name{ display:none !important; } /* rail icône-seule : pas de nom */
  html.pcrefonte .pub-rail-item.is-active{
    background:rgba(53,215,209,.16) !important; color:var(--pc-cyan) !important;
    box-shadow:inset 0 0 0 1px rgba(53,215,209,.34) !important;
  }
  html.pcrefonte .pub-rail-item.is-active svg{ color:var(--pc-cyan) !important; }
}

/* ================================================================
   TOPBAR épurée (>=768) : garder Phare + cloche + avatar.
   (Le masquage des actions rapides + « Bonjour » sont dans le fichier accueil.)
   ================================================================ */
@media (min-width:768px){
  html.pcrefonte .pub-topbar{
    gap:14px;
    background:rgba(7,22,36,.72);
    border-bottom:1px solid var(--pc-line);
  }
  /* Nettoyages GLOBAUX (toutes pages pcrefonte) : doublons/clutter préexistants */
  html.pcrefonte .ar-logo{ display:none !important; }         /* grosse flamme décorative (doublon Gardien) */
  html.pcrefonte .pub-visit-counter{ display:none !important; } /* compteur visiteurs admin en double */
  html.pcrefonte .pub-topbrand{ display:none !important; }      /* marque déjà portée par le rail */

  /* Fond SOMBRE UNI sous la refonte desktop/tablette (choix Julien 16/08).
     Les photos de fond restent intactes pour l'App (<=767) et quand la refonte est éteinte. */
  html.pcrefonte body{ background:var(--pc-navy-0) !important; }
  html.pcrefonte body::before{ background:var(--pc-navy-0) !important; background-image:none !important; }
}

/* ================================================================
   (audit 24/08 · FDCN-072) THÈME CLAIR ORPHELIN SUR ORDINATEUR
   ----------------------------------------------------------------
   Juste au-dessus, la refonte PC impose un fond bleu nuit UNI et
   SUPPRIME l'image de fond (`body::before{background-image:none}`).
   Mais les classes `has-pagebg` / `phare-light` restent posées sur le
   <body> : les pages qui repeignent alors leurs textes en NOIR — un
   noir choisi pour un fond clair qui n'existe plus — se retrouvent en
   noir sur bleu nuit.
   Mesuré sur Notifications : #0b0e14 sur #071624, soit ~1,06:1. Le
   titre et l'introduction étaient quasi invisibles
   (capture 57-notifications-pc-1440x900-prive.png).
   Le préfixe `html.pcrefonte` ajoute une classe de spécificité : il
   dépasse les règles écrites dans la page, malgré leur !important.
   ⚠️ On ne touche PAS `.notif-row` : la page lui pose déjà un bloc
      sombre et un texte clair — ce cas-là était correct.
   ⚠️ Ce conflit dépasse cette page (≈175 règles dans ~30 fichiers).
      Correction volontairement LIMITÉE à l'anomalie constatée ;
      le reste est signalé, pas modifié en aveugle.
   ================================================================ */
@media (min-width:768px){
  html.pcrefonte body.page-notifications.has-pagebg  .page-title,
  html.pcrefonte body.page-notifications.has-pagebg  .card h3,
  html.pcrefonte body.page-notifications.has-pagebg  .card summary,
  html.pcrefonte body.page-notifications.has-pagebg  .card label,
  html.pcrefonte body.page-notifications.has-pagebg  .card label span,
  html.pcrefonte body.page-notifications.phare-light .card h3,
  html.pcrefonte body.page-notifications.phare-light .card summary,
  html.pcrefonte body.page-notifications.phare-light .card label,
  html.pcrefonte body.page-notifications.phare-light .card label span,
  html.pcrefonte body.page-notifications.phare-light .notif-row strong { color:var(--pc-ink) !important; }

  html.pcrefonte body.page-notifications.has-pagebg  .page-subtitle,
  html.pcrefonte body.page-notifications.has-pagebg  .page-subtitle strong,
  html.pcrefonte body.page-notifications.has-pagebg  .card p,
  html.pcrefonte body.page-notifications.phare-light .card p,
  html.pcrefonte body.page-notifications.phare-light .notif-row p,
  html.pcrefonte body.page-notifications.phare-light .notif-row span { color:var(--pc-ink-soft) !important; }

  /* Les liens doivent rester reconnaissables : ambre + soulignement gardé. */
  html.pcrefonte body.page-notifications.has-pagebg .page-subtitle a { color:var(--pc-amber) !important; }

  /* Cartes et boutons : la page les avait éclaircis POUR l'image de fond
     disparue. On rétablit la surface sombre de la refonte. */
  html.pcrefonte body.page-notifications.has-pagebg .card,
  html.pcrefonte body.page-notifications.has-pagebg a.btn,
  html.pcrefonte body.page-notifications.has-pagebg button.btn-mini {
    background:var(--pc-navy-1) !important;
    border-color:var(--pc-line) !important;
  }
  html.pcrefonte body.page-notifications.has-pagebg  a.btn,
  html.pcrefonte body.page-notifications.has-pagebg  button.btn-mini,
  html.pcrefonte body.page-notifications.phare-light .card a.btn,
  html.pcrefonte body.page-notifications.phare-light .card button.btn-mini { color:var(--pc-ink) !important; }
}

/* ================================================================
   (15/09/2026 — demande de Julien) LA COLONNE DE GAUCHE PASSE DANS
   « MES RACCOURCIS », SUR ORDINATEUR AUSSI.
   Sa demande : « supprime la colonne sur le cote et mets-la dans un raccourci
   comme sur l app, en adaptant a la version ordi, pas de doublon, meme
   fonctionnement que l app, sans rien supprimer d autre ; en version ordi on
   clique sur le Gardien, ca ouvre le raccourci. »

   ⛔ AUCUN DEUXIEME MENU N EST ECRIT. La feuille « Mes raccourcis » existe deja,
      une seule fois (assets/js/app-refonte.js) : elle se construit a partir de la
      MEME liste que la colonne et refuse les doublons par adresse. Le clic sur le
      Gardien bascule DEJA son etat ici (la roue porte la marque sc2-open) — il ne
      manquait que l habillage au-dela de 768 px. On ne fait donc qu habiller.

   ⛔ RIEN N EST SUPPRIME : la colonne reste dans la page, elle n est plus ouverte
      — exactement ce qui a ete fait sur le telephone le 14/09.

   ⛔ GARDE-FOU DE CE FICHIER RESPECTE : on ne redeclare pas grid-template-columns
      de .pub-shell, on met sa variable de largeur a zero.

   RETOUR ARRIERE : site.mobile.pcrefonte_on = 0, ou retirer ce bloc.
   ================================================================ */
@media (min-width:769px){

  /* 1. La colonne se referme et rend sa largeur au contenu. */
  html.pcrefonte{ --pub-rail-w:0px; }
  /*  ⛔ DEFAUT MESURE LE 15/09 : avec « display:none » la colonne QUITTE la
      grille, et le contenu vient prendre sa place — la colonne de zero pixel.
      Le texte se retrouvait ecrase sur 150 px (photo a l appui). La colonne
      reste donc dans la grille, simplement refermee a zero : invisible, hors
      du clavier, sans un pixel de large. C est aussi la regle du 14/09 :
      on ne la supprime pas, on cesse de l ouvrir. */
  html.pcrefonte .pub-rail{
    visibility:hidden !important; pointer-events:none !important;
    width:0 !important; min-width:0 !important; max-width:0 !important;
    padding:0 !important; border:0 !important; overflow:hidden !important;
  }

  /* 2. Un seul mecanisme de raccourcis : le petit anneau secondaire laisse la
        place a la feuille, comme sur le telephone. La roue principale reste
        visible quand la feuille est ouverte. */
  html.pcrefonte .ai-node2{ display:none !important; }
  html.pcrefonte .ai-cluster.sc2-open .ai-node:not(.ai-node2){
    opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important; pointer-events:auto !important;
  }
  html.pcrefonte .ai-sc2hint{ display:none !important; }   /* la feuille a son propre pied */

  /* 3. LA MEME FEUILLE, HABILLEE POUR UN GRAND ECRAN : au centre, et non collee
        en bas comme sur un telephone. */
  html.pcrefonte .ar-shortcuts-sheet{
    display:flex !important; flex-direction:column; gap:16px;
    position:fixed; left:50%; top:50%; z-index:1200;
    width:min(940px,92vw); max-height:80vh; overflow:auto;
    padding:22px 24px 18px; box-sizing:border-box;
    background:var(--pc-navy-1); border:1px solid var(--pc-line);
    border-radius:calc(var(--pc-radius) + 6px);
    box-shadow:0 30px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05);
    transform:translate(-50%,-46%) scale(.96); opacity:0; pointer-events:none;
    transition:transform .2s cubic-bezier(.2,0,0,1), opacity .2s;
  }
  html.pcrefonte .ar-shortcuts-sheet.ar-open{
    transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto;
  }
  /*  Le voile sombre derriere : il ne prend AUCUN clic, pour qu un clic « a cote »
      atteigne la page et referme la feuille comme sur le telephone. */
  html.pcrefonte .ar-shortcuts-sheet::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:rgba(4,12,22,.66);
  }

  /*  (15/09) ON ATTRAPE LE PANNEAU PAR SON EN-TETE pour le deplacer : le curseur
      le dit avant meme le clic. La croix garde son curseur de bouton. */
  html.pcrefonte .ar-sc-head{ position:relative; text-align:center; padding:2px 52px 0;
    cursor:grab; user-select:none; touch-action:none; }
  html.pcrefonte .ar-shortcuts-sheet.ar-sc-drag .ar-sc-head{ cursor:grabbing; }
  html.pcrefonte .ar-shortcuts-sheet.ar-sc-drag{ transition:none; }   /* il suit le doigt, sans retard */
  html.pcrefonte .ar-sc-head .ar-sc-close{ cursor:pointer; }
  html.pcrefonte .ar-sc-title{ font:700 24px/1.2 'Inter',system-ui,sans-serif; color:var(--pc-ink); }
  html.pcrefonte .ar-sc-sub{ font-size:14px; color:var(--pc-ink-soft); margin-top:3px; }
  html.pcrefonte .ar-sc-close{
    position:absolute; top:-4px; right:-6px; width:44px; height:44px;
    display:flex; align-items:center; justify-content:center; border-radius:999px;
    background:transparent; border:0; color:var(--pc-ink-soft); cursor:pointer;
  }
  html.pcrefonte .ar-sc-close:hover{ background:rgba(255,255,255,.06); color:var(--pc-ink); }
  html.pcrefonte .ar-sc-close svg{ width:22px; height:22px; }

  html.pcrefonte .ar-sc-grid{
    display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:12px;
  }
  html.pcrefonte .ar-sc-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    min-height:96px; padding:14px 8px; text-decoration:none;
    background:var(--pc-navy-2); border:1px solid var(--pc-line); border-radius:var(--pc-radius);
    color:var(--pc-ink); transition:transform .12s, border-color .12s, background .12s;
  }
  html.pcrefonte .ar-sc-tile:hover{
    transform:translateY(-2px); border-color:rgba(53,215,209,.45); background:#16395a;
  }
  html.pcrefonte .ar-sc-emo{ font-size:30px; line-height:1; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
  html.pcrefonte .ar-sc-tile span:not(.ar-sc-emo){ font:600 13px/1.2 'Inter',system-ui,sans-serif; text-align:center; }
  html.pcrefonte .ar-sc-foot{ text-align:center; font-size:13px; color:var(--pc-ink-soft); }

  @media (prefers-reduced-motion:reduce){
    html.pcrefonte .ar-shortcuts-sheet{ transition:none; }
    html.pcrefonte .ar-sc-tile{ transition:none; }
  }
}

/* ================================================================
   (15/09, URGENT — Julien : « je peux plus aller en arriere ou directement au
   Gardien ») LA BARRE « RETOUR AU GARDIEN » NE DOIT JAMAIS PARTIR EN HAUT.

   Ce qui s est passe : sans la colonne de gauche, la seule porte de sortie d une
   page ouverte dans le panneau du Gardien est le bouton « Retour au Gardien » de
   sa barre. Sur un grand ecran la page ouverte est longue : on descend, la barre
   sort de l ecran par le haut, et il n y a plus AUCUNE sortie visible.

   La barre se colle donc en haut de l ecran tant que le panneau est ouvert : le
   bouton de retour ET la vignette du Gardien restent sous les yeux, toujours.
   ⛔ Rien n est ajoute a l ecran, rien n est retire : c est la barre qui existe
      deja, elle cesse seulement de s en aller.
   RETOUR ARRIERE : supprimer ce bloc.
   ================================================================ */
@media (min-width:769px){
  html.pcrefonte.gp-on .gp-bar{
    position:sticky !important; top:0; z-index:12;
    background:rgba(9,24,40,.96) !important;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  /*  Un parent qui coupe ce qui depasse empeche le collage : on le laisse passer. */
  html.pcrefonte.gp-on .gp-panneau,
  html.pcrefonte.gp-on .gp-vue{ overflow:visible !important; }
  /*  Le bouton de retour se voit de loin. */
  html.pcrefonte.gp-on .gp-back{ font-size:13.5px !important; padding:8px 14px !important; }
}