/* zzzz-phare.css — Rapproche l'ecran app "Mon Phare" (beacon.php, body.page-beacon)
   de la maquette 14-phare. ADDITIF, charge en dernier (prime). VISUEL seulement:
   la logique allumer/eteindre/confidentialite n'est pas touchee.
   Rollback = supprimer ce fichier (ou son <link>). Rien de Gardien/Etincelles cible. */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ---- 1. CTA "Enregistrer" -> AMBRE (accent de la maquette) ---- */
  html.apprefonte body.page-beacon .ph-saveall .adm-btn-primary{
    background:linear-gradient(180deg,#FFC470,#FFB65A) !important;
    color:#071624 !important;
    border:1px solid rgba(255,182,90,.7) !important;
    box-shadow:0 6px 20px rgba(255,182,90,.30) !important;
    font-weight:800 !important;
  }

  /* ---- 2. Cartes de choix : RANGEE de 3 (Allume | Compagnons | Eteint) = maquette 14.
     La carte "Compagnons" (semi) est un 3e enfant de .ph-toggle (edit beacon.php 16/08) ;
     l'orbe central decoratif (aria-hidden) est masque -> 3 cartes remplissent 3 colonnes. ---- */
  html.apprefonte body.page-beacon .ph-toggle{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
    align-items:stretch !important;
  }
  html.apprefonte body.page-beacon .ph-core{ display:none !important; }
  html.apprefonte body.page-beacon .ph-side{
    position:relative;
    width:auto !important; margin:0 !important;
    flex-direction:column !important; align-items:center !important; text-align:center !important;
    padding:14px 6px !important; gap:7px !important;
    border-radius:16px !important;
  }
  html.apprefonte body.page-beacon .ph-side svg{ width:34px !important; height:34px !important; }
  html.apprefonte body.page-beacon .ph-side strong{ font-size:13px !important; line-height:1.15 !important; }
  html.apprefonte body.page-beacon .ph-side small{ font-size:10.5px !important; line-height:1.2 !important; }
  /* Etat actif = accent AMBRE + pastille de validation, comme la carte "Allume" de la maquette. */
  html.apprefonte body.page-beacon .ph-side.ph-state-on{
    background:rgba(255,182,90,.08) !important;
    border-color:#FFB65A !important;
    box-shadow:0 0 22px rgba(255,182,90,.22) !important;
    color:#FFB65A !important;
  }
  html.apprefonte body.page-beacon .ph-side.ph-state-on strong{ color:#FFB65A !important; }
  html.apprefonte body.page-beacon .ph-side.ph-state-on small{ color:#F6F0DF !important; }
  html.apprefonte body.page-beacon .ph-side.ph-state-on svg{
    color:#FFB65A !important;
    filter:drop-shadow(0 0 6px rgba(255,182,90,.45)) !important;
  }
  html.apprefonte body.page-beacon .ph-side.ph-state-on::after{
    content:"\2713"; position:absolute; top:10px; right:10px;
    width:26px; height:26px; border-radius:50%;
    background:#FFB65A; color:#071624;
    display:grid; place-items:center; font-size:14px; font-weight:800; line-height:1;
    box-shadow:0 2px 8px rgba(255,182,90,.40);
  }

  /* ---- 3. Disponibilite -> controle segmente horizontal ---- */
  html.apprefonte body.page-beacon .adm-card:has(> .ph-radio){
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:8px; align-items:stretch;
  }
  html.apprefonte body.page-beacon .adm-card:has(> .ph-radio) .adm-card-head{ grid-column:1 / -1; }
  html.apprefonte body.page-beacon .ph-radio{
    flex-direction:column !important; align-items:center !important; justify-content:center !important;
    text-align:center; gap:4px !important; padding:12px 6px !important; margin:0 !important;
    border:1px solid rgba(255,255,255,.10); border-radius:12px; background:rgba(13,34,51,.60);
  }
  html.apprefonte body.page-beacon .ph-radio .dot{ display:none !important; }
  html.apprefonte body.page-beacon .ph-radio small{ display:none !important; }
  html.apprefonte body.page-beacon .ph-radio span:last-child{ align-items:center; }
  html.apprefonte body.page-beacon .ph-radio b{ font-size:13px; }
  html.apprefonte body.page-beacon .ph-radio:has(input:checked){
    border-color:var(--cyan) !important;
    background:rgba(53,215,209,.14) !important;
    box-shadow:0 0 14px rgba(53,215,209,.20);
  }
  html.apprefonte body.page-beacon .ph-radio:has(input:checked) b{ color:var(--cyan) !important; }

  /* ---- 4. Interets -> chips (pastilles) ---- */
  html.apprefonte body.page-beacon .adm-card:has(> .ph-check){
    display:flex !important; flex-wrap:wrap; gap:10px; align-items:center;
  }
  html.apprefonte body.page-beacon .adm-card:has(> .ph-check) .adm-card-head,
  html.apprefonte body.page-beacon .adm-card:has(> .ph-check) .adm-hint{ flex:0 0 100%; }
  html.apprefonte body.page-beacon .ph-check{
    display:inline-flex !important; align-items:center; gap:6px;
    padding:9px 15px !important; margin:0 !important;
    border:1px solid rgba(53,215,209,.40); border-radius:999px;
    background:transparent; color:var(--cyan); font-size:13px; white-space:nowrap;
  }
  html.apprefonte body.page-beacon .ph-check .box{ display:none !important; }
  html.apprefonte body.page-beacon .ph-check:has(input:checked){
    background:rgba(53,215,209,.16) !important;
    border-color:var(--cyan) !important;
  }

  /* ---- 5. Toggles -> renfort pastille iOS cyan (charte) ---- */
  html.apprefonte body.page-beacon .adm-toggle input:checked + .track{ background:var(--cyan) !important; }

  /* ---- 6. (16/08) EPURATION DOUCE (decision Julien) : on cache la DECO qui alourdit
     l'ecran vs maquette 14, SANS toucher aucun reglage de confidentialite. Reversible.
       - citation « Comme un phare dans la nuit… » (.ph-quote)
       - grande flamme decorative de l'en-tete (.ph-head-orb)
       - carte explicative « Comment ca fonctionne ? » (la .adm-card qui contient .ph-steps)
     Tous les CONTROLES restent : modes, rayon, disponibilite, interets, statut, tous les toggles. */
  html.apprefonte body.page-beacon .ph-quote{ display:none !important; }
  html.apprefonte body.page-beacon .ph-head-orb{ display:none !important; }
  html.apprefonte body.page-beacon .adm-card:has(> .ph-steps){ display:none !important; }

  /* ---- 7. (16/08) Illustrations de phare (assets exacts fournis par Julien) a la place
     des icones au trait, comme la maquette 14. Chaque carte garde SON illustration quel que
     soit l etat selectionne ; le SVG au trait reste pour le desktop (hors app). Reversible. ---- */
  html.apprefonte body.page-beacon .ph-side svg{ display:none !important; }
  html.apprefonte body.page-beacon .ph-side .ph-illus{
    display:block !important; width:100%; max-width:108px; height:auto;
    margin:0 auto 2px; object-fit:contain;
  }
  html.apprefonte body.page-beacon .ph-side.ph-state-off .ph-illus{ opacity:.92; }
}