/* ═══════════════════════════════════════════════════════════════
   TÉLÉPHONE RÉALISTE — composant partagé
   Utilisation : <link rel="stylesheet" href="/page/css/premium-phone.css">
   Puis dans le HTML : <div class="rfi-phone"> ... </div>

   ── Châssis ──────────────────────────────────────────────────
   Toutes les dimensions du châssis utilisent cqi (container query
   inline units) → tout est proportionnel quand le téléphone change
   de taille. Le contenu de l'écran utilise em → proportionnel au
   font-size de l'écran (lui-même exprimé en cqi).

   ── Contenu de l'écran (RÈGLE ABSOLUE) ───────────────────────
   Tout le CSS à l'intérieur de .rfi-screen doit utiliser "em",
   JAMAIS px ni rem. Référence : 1em = ~10px à 250px de largeur.

   Conversions à appliquer systématiquement :
     px  → em  : diviser par 10       (ex: 14px → 1.4em)
     rem → em  : multiplier par 1.6   (ex: .88rem → 1.41em)

   Exemples courants :
     font-size: 9px  → 0.9em   | padding: 12px → 1.2em
     font-size: 11px → 1.1em   | gap: 8px      → 0.8em
     font-size: 14px → 1.4em   | border-radius: 10px → 1em
     width/height: 24px → 2.4em | margin: 16px → 1.6em

   ⚠ PIÈGE — élément avec son propre font-size :
     Si un élément a "font-size: X em", ses em de dimensions
     (width, height, padding, margin…) utilisent SON PROPRE em,
     pas celui du parent. Donc diviser par (X × 10) :
       font-size: 1.76em → own em = 17.6px
       width: 56px → 56 / 17.6 = 3.18em  (PAS 5.6em)
     Règle : width_em = px_value / (X * 10)

   Structure HTML minimale :
     <div class="rfi-phone">
       <div class="rfi-side rfi-side--vol"></div>
       <div class="rfi-side rfi-side--power"></div>
       <div class="rfi-frame">
         <div class="rfi-screen">
           <div class="rfi-notch"></div>
           <div class="rfi-sbar">
             <span style="padding-left:0.4em;font-size:1.15em;">9:41</span>
             <span class="rfi-sbar-icons">
               <svg width="1em" height="0.75em" viewBox="0 0 16 12" fill="currentColor" aria-hidden="true"><rect x="0" y="9" width="3" height="3" rx="0.5"/><rect x="4.3" y="6" width="3" height="6" rx="0.5"/><rect x="8.6" y="3" width="3" height="9" rx="0.5"/><rect x="12.9" y="0" width="3" height="12" rx="0.5" opacity="0.3"/></svg>
               <svg width="1em" height="0.75em" viewBox="0 0 20 15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="M1 4C5.5 0 14.5 0 19 4"/><path d="M4 7.5c3.3-3 8.7-3 12 0"/><path d="M7.5 11c1.7-1.5 4.8-1.5 6 0"/><circle cx="10" cy="13.5" r="1" fill="currentColor" stroke="none"/></svg>
               <svg width="1.4em" height="0.75em" viewBox="0 0 26 12" fill="none" aria-hidden="true"><rect x="0.5" y="0.5" width="22" height="11" rx="2.5" stroke="currentColor" stroke-opacity="0.4"/><rect x="23" y="3.5" width="2.5" height="5" rx="1" fill="currentColor" fill-opacity="0.4"/><rect x="2" y="2" width="17" height="8" rx="1.5" fill="currentColor"/></svg>
             </span>
           </div>
           <!-- CONTENU ICI — tout en em -->
           <div class="rfi-homeind"></div>
         </div>
       </div>
     </div>

   Pour surcharger la largeur dans une page (sinon défaut = 180-252px) :
     .rfi-phone { width: clamp(160px, 16vw, 220px); }
   Pour surcharger la couleur de fond de l'écran :
     .rfi-screen { background: #fff; }
   Si fond clair, surcharger la barre de statut et l'indicateur :
     .rfi-sbar { color: rgba(0,0,0,0.75); }
     .rfi-homeind::after { background: rgba(0,0,0,0.15); }

   ⚠ RESPONSIVE — badges/éléments à gauche et à droite du téléphone :
     Sur petit écran (≤600px), les éléments positionnés en absolu
     left/right du téléphone sortent du champ ou chevauchent l'écran.
     Toujours ajouter un breakpoint ≤600px pour les empiler :

     .mon-wrap {
       flex-direction: column;
       align-items: center;
       gap: 12px;
       padding: 8px 0;
     }
     .mon-badge {
       position: static;   ← retire le left/right absolu
       align-self: center; ← centre le badge dans la colonne
     }

     Pour les badges dans un stage absolu (position: absolute dans
     un conteneur), utiliser top:-44px / bottom:-44px + centrage :
       left: 0; right: 0; width: max-content; margin-inline: auto;
     Et donner du padding au conteneur parent pour faire de la place.
   ═══════════════════════════════════════════════════════════════ */

/* ── Conteneur principal ──────────────────────────────── */
.rfi-phone {
  width: clamp(180px, 18vw, 252px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  flex-shrink: 0;
  container-type: inline-size; /* rend cqi relatif à la largeur du téléphone */
}

/* ── Boutons latéraux ─────────────────────────────────── */
.rfi-side {
  position: absolute;
  background: linear-gradient(90deg, #52575f 0%, #9ca1a8 30%, #6a6f78 60%, #3e4248 100%);
  border-radius: 3px;
  z-index: 10;
}

.rfi-side--vol {
  left: -1.4cqi;
  top: 43.7cqi;
  width: 1.4cqi;
  height: 13.5cqi;
  box-shadow: 0 19cqi 0 #52575f, 0 38cqi 0 #52575f;
}

.rfi-side--power {
  right: -1.4cqi;
  top: 55.6cqi;
  width: 1.4cqi;
  height: 20.6cqi;
}

/* ── Châssis métal ────────────────────────────────────── */
.rfi-frame {
  width: 100%;
  background: linear-gradient(135deg,
    #9ea4ab 0%, #e2e6ea 8%, #b8bcc3 16%,
    #4a4f57 28%, #0d0e10 44%,
    #2a2d32 58%, #a8adb4 74%,
    #d8dde3 86%, #8c9099 100%
  );
  border-radius: 21.4cqi;
  padding: 1.2cqi;
  position: relative;
  box-shadow:
    0 50px 100px rgba(0,0,0,.75),
    0 20px 40px rgba(0,0,0,.4),
    inset 0 1.5px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.5);
}

.rfi-frame::before {
  content: '';
  position: absolute;
  inset: 1.2cqi;
  border-radius: 20.6cqi;
  background: linear-gradient(160deg,
    rgba(255,255,255,.12) 0%,
    transparent 40%,
    rgba(0,0,0,.15) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.rfi-frame::after {
  content: '';
  position: absolute;
  inset: 1.2cqi;
  border-radius: 20.6cqi;
  border: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
  z-index: 2;
}

/* ── Écran ────────────────────────────────────────────── */
.rfi-screen {
  background: #0a0a0b;
  border-radius: 20.6cqi;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  font-size: clamp(7.2px, 4cqi, 10.1px); /* 1em = ~10px à 250px de largeur */
  position: relative;
  aspect-ratio: 9 / 19.5;
}

/* ── Dynamic Island ───────────────────────────────────── */
.rfi-notch {
  position: absolute;
  top: 4.8cqi;
  left: 50%;
  transform: translateX(-50%);
  width: 34.1cqi;
  height: 9.5cqi;
  background: #000;
  border-radius: 7.9cqi;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.06);
  z-index: 5;
}

.rfi-notch::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5.6cqi;
  transform: translateY(-50%);
  width: 3.2cqi;
  height: 3.2cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a3535, #1a0e0e);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.06);
}

/* ── Barre de statut ──────────────────────────────────── */
.rfi-sbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.8em 2em 0;
  height: 5.2em;
  font-size: 1.05em;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.rfi-sbar-icons {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

/* ── Indicateur home ──────────────────────────────────── */
.rfi-homeind {
  height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rfi-homeind::after {
  content: '';
  width: 9em;
  height: 0.4em;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
}

/* ── Thème clair ──────────────────────────────────────── */
html[data-theme="light"] .rfi-frame {
  background: linear-gradient(135deg,
    #d4d8de 0%, #eceef0 12%, #c8ccd2 22%,
    #3a3d42 34%, #0d0e10 46%,
    #252830 56%, #b0b4ba 72%,
    #dce0e4 86%, #9ea2a8 100%
  );
  box-shadow:
    0 40px 80px rgba(0,0,0,.18),
    0 14px 32px rgba(0,0,0,.1),
    inset 0 1.5px 0 rgba(255,255,255,.5);
}

html[data-theme="light"] .rfi-frame::before {
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, transparent 40%, rgba(0,0,0,.08) 100%);
}

html[data-theme="light"] .rfi-screen  { background: #f8f8f8; }
html[data-theme="light"] .rfi-sbar    { color: rgba(0,0,0,0.8); }
html[data-theme="light"] .rfi-notch   { background: #111; }
html[data-theme="light"] .rfi-side    { background: linear-gradient(90deg, #8a8f97 0%, #b8bcc4 30%, #9a9fa8 60%, #6e7278 100%); }
html[data-theme="light"] .rfi-homeind::after { background: rgba(0,0,0,0.2); }