/* ==========================================================================
   MonPatrimoine — shared.css
   Feuille de style partagée par toutes les pages.
   Charge via : <link rel="stylesheet" href="/assets/shared.css?v=1">

   Organisation :
   1. Reset + base
   2. Variables de thèmes (light / dark / blueprint)   — migré en Phase 2
   3. Composants génériques (.card, .btn, .modal, .fg) — migré en Phase 2
   4. Emplacements publicitaires (.ad-slot)            — NOUVEAU Phase 1

   Pour ajouter/modifier un composant global, édite ce fichier UNE fois
   et le changement s'applique aux 51 pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4. Emplacements publicitaires (AdSense)
   Les classes .ad-slot réservent une place fixe à la pub pour éviter que
   le contenu "saute" quand la pub se charge (CLS = 0).
   Tant que /assets/ads.js n'a pas d'ADSENSE_ID, les slots sont invisibles.
   -------------------------------------------------------------------------- */

.ad-slot {
  display: none; /* caché tant qu'AdSense n'est pas activé */
  margin: 1.5rem auto;
  text-align: center;
  overflow: hidden;
  position: relative;
}

/* Desktop leaderboard — 728×90 sous la topbar */
.ad-slot.ad-leaderboard {
  width: 100%;
  max-width: 728px;
  min-height: 90px;
}

/* Rectangle — 300×250 entre sections de contenu */
.ad-slot.ad-rectangle {
  width: 300px;
  min-height: 250px;
}

/* Mobile banner — 320×100 sticky bas d'écran (mobile uniquement) */
.ad-slot.ad-mobile-banner {
  width: 100%;
  max-width: 320px;
  min-height: 100px;
}

/* Sur desktop, cache le banner mobile */
@media (min-width: 768px) {
  .ad-slot.ad-mobile-banner {
    display: none !important;
  }
}

/* Sur mobile, cache le leaderboard desktop */
@media (max-width: 767px) {
  .ad-slot.ad-leaderboard {
    display: none !important;
  }
}

/* Quand AdSense est activé (classe ajoutée par ads.js), on affiche */
html.ads-enabled .ad-slot {
  display: block;
}
html.ads-enabled .ad-slot.ad-mobile-banner { display: none; }
html.ads-enabled .ad-slot.ad-leaderboard { display: block; }
@media (max-width: 767px) {
  html.ads-enabled .ad-slot.ad-mobile-banner { display: block; }
  html.ads-enabled .ad-slot.ad-leaderboard { display: none; }
}

/* --------------------------------------------------------------------------
   ZONES À REMPLIR EN PHASE 2 (migration des composants depuis budget/index.html)

   Sections 1-3 ci-dessus sont actuellement VIDES. Elles seront peuplées
   lors de la Phase 2 (pilote) quand on migrera budget/index.html et qu'on
   extraira les composants génériques identifiés :

     - Reset CSS (*,*::before,*::after)
     - Body font + transition
     - :root, [data-theme="light"], [data-theme="dark"], [data-theme="blueprint"]
     - Overrides blueprint
     - Composants : .card, .btn, .modal, .fg, .f-group, .f-label, .page, .help-q

   Tant que ces sections sont vides, les HTML conservent leur CSS inline
   et fonctionnent normalement — aucun conflit.
   -------------------------------------------------------------------------- */