/* ============================================================
   CONFIGURATION HOMEPAGE - FICHIER FACILE A MODIFIER
   ============================================================

   Ce fichier contient TOUTES les variables modifiables pour
   personnaliser l'apparence de la page d'accueil.

   STRUCTURE :
   - CARD ANNONCE : Les annonces des particuliers/professionnels
   - CARD BANNIERE : Les bannieres des services regionaux
   - CARD PUB : Les publicites sponsorisees

   COMMENT MODIFIER :
   - Changez simplement les valeurs apres les deux-points (:)
   - Les tailles sont en pixels (px) ou rem (1rem = 16px)
   - Les couleurs sont en format hexadecimal (#ff6b35)

   IMPORTANT : Apres modification, rafraichissez la page (Ctrl+F5)
   ============================================================ */

:root {

/* ╔══════════════════════════════════════════════════════════════╗
   ║                                                              ║
   ║                    CARD ANNONCE                              ║
   ║         (Annonces des particuliers et professionnels)        ║
   ║                                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

    /* ──────────────────────────────────────────────────────────────
       CARD ANNONCE - MODE LISTE - DESKTOP (ecrans > 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de la card */
    --card-annonce-liste-desktop-largeur: 100%;       /* Largeur de la card (100% = pleine largeur) */
    --card-annonce-liste-desktop-hauteur: 13rem;      /* Hauteur de la card */

    /* Dimensions de l'image */
    --card-annonce-liste-desktop-img-largeur: 14rem;  /* Largeur de l'image */
    --card-annonce-liste-desktop-img-hauteur: 100%;   /* Hauteur de l'image */
    --card-annonce-liste-desktop-img-padding: 0;      /* Padding autour de l'image */

    /* Contenu (texte, prix, etc.) */
    --card-annonce-liste-desktop-contenu-padding: 1rem;  /* Padding du contenu */

    /* Typographie */
    --card-annonce-liste-desktop-titre-taille: 1.15rem;
    --card-annonce-liste-desktop-prix-taille: 1.15rem;
    --card-annonce-liste-desktop-location-taille: 0.95rem;

    /* ──────────────────────────────────────────────────────────────
       CARD ANNONCE - MODE LISTE - MOBILE (ecrans < 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de la card */
    --card-annonce-liste-mobile-largeur: 100%;        /* Largeur de la card */
    --card-annonce-liste-mobile-hauteur: auto;        /* Hauteur de la card (auto = s'adapte) */

    /* Dimensions de l'image */
    --card-annonce-liste-mobile-img-largeur: 100%;    /* Largeur de l'image */
    --card-annonce-liste-mobile-img-hauteur: 70vw;    /* Hauteur (70vw = 70% largeur ecran) */
    --card-annonce-liste-mobile-img-padding: 0;       /* Padding autour de l'image */

    /* Contenu (texte, prix, etc.) */
    --card-annonce-liste-mobile-contenu-padding: 1rem;   /* Padding du contenu */

    /* Typographie */
    --card-annonce-liste-mobile-titre-taille: 1rem;
    --card-annonce-liste-mobile-prix-taille: 1.1rem;
    --card-annonce-liste-mobile-location-taille: 0.9rem;

    /* ──────────────────────────────────────────────────────────────
       CARD ANNONCE - MODE GRILLE - DESKTOP (ecrans > 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de l'image */
    --card-annonce-grille-desktop-img-hauteur: 200px;
    --card-annonce-grille-desktop-img-padding: 0;     /* Padding autour de l'image */

    /* Contenu */
    --card-annonce-grille-desktop-contenu-padding: 1rem;

    /* ──────────────────────────────────────────────────────────────
       CARD ANNONCE - MODE GRILLE - MOBILE (ecrans < 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de l'image */
    --card-annonce-grille-mobile-img-hauteur: 100vw;  /* Hauteur = largeur ecran = carre */
    --card-annonce-grille-mobile-img-padding: 0;      /* Padding autour de l'image */

    /* Contenu */
    --card-annonce-grille-mobile-contenu-padding: 1rem;


/* ╔══════════════════════════════════════════════════════════════╗
   ║                                                              ║
   ║                    CARD BANNIERE                             ║
   ║              (Services regionaux par departement)            ║
   ║                                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

    /* ──────────────────────────────────────────────────────────────
       CARD BANNIERE - DESKTOP (ecrans > 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de la card */
    --card-banniere-desktop-largeur: 100%;            /* Largeur de la card */
    --card-banniere-desktop-hauteur: auto;            /* Hauteur de la card */

    /* Dimensions de l'image */
    --card-banniere-desktop-img-largeur: 26rem;       /* Largeur de l'image */
    --card-banniere-desktop-img-hauteur: 100%;        /* Hauteur de l'image */
    --card-banniere-desktop-img-padding: 0;           /* Padding autour de l'image */

    /* Contenu (texte, description) */
    --card-banniere-desktop-contenu-padding: 1.1rem 4rem 1rem 1.5rem;  /* Padding du contenu */

    /* Typographie */
    --card-banniere-desktop-titre-taille: 1.0rem;
    --card-banniere-desktop-description-taille: 0.95rem;
    --card-banniere-desktop-description-lignes: 4;    /* Nombre de lignes max */

    /* ──────────────────────────────────────────────────────────────
       CARD BANNIERE - MOBILE (ecrans < 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de la card */
    --card-banniere-mobile-largeur: 100%;             /* Largeur de la card */
    --card-banniere-mobile-hauteur-min: 280px;        /* Hauteur minimum */

    /* Dimensions de l'image */
    --card-banniere-mobile-img-largeur: 100%;         /* Largeur de l'image */
    --card-banniere-mobile-img-hauteur: 280px;        /* Hauteur de l'image */
    --card-banniere-mobile-img-padding: 0;            /* Padding autour de l'image */

    /* Contenu (texte, description) */
    --card-banniere-mobile-contenu-padding: 0.8rem;   /* Padding du contenu */

    /* Typographie */
    --card-banniere-mobile-titre-taille: 0.95rem;
    --card-banniere-mobile-description-taille: 0.9rem;
    --card-banniere-mobile-description-lignes: none;  /* none = tout afficher, ou un chiffre pour limiter */


/* ╔══════════════════════════════════════════════════════════════╗
   ║                                                              ║
   ║                      CARD PUB                                ║
   ║               (Publicites sponsorisees)                      ║
   ║                                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

    /* ──────────────────────────────────────────────────────────────
       CARD PUB - DESKTOP (ecrans > 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de la card */
    --card-pub-desktop-largeur: 100%;                 /* Largeur de la card */
    --card-pub-desktop-hauteur: 14rem;                /* Hauteur de la card */

    /* Image (couvre toute la card) */
    --card-pub-desktop-img-padding: 0;                /* Padding autour de l'image */

    /* Contenu (badge + titre en overlay) */
    --card-pub-desktop-contenu-padding: 1rem;         /* Padding du contenu */

    /* Typographie */
    --card-pub-desktop-badge-taille: 0.75rem;
    --card-pub-desktop-titre-taille: 1rem;

    /* ──────────────────────────────────────────────────────────────
       CARD PUB - MOBILE (ecrans < 448px)
       ────────────────────────────────────────────────────────────── */

    /* Dimensions de la card */
    --card-pub-mobile-largeur: 100%;                  /* Largeur de la card */
    --card-pub-mobile-hauteur: 130px;                 /* Hauteur de la card */

    /* Image (couvre toute la card) */
    --card-pub-mobile-img-padding: 0;                 /* Padding autour de l'image */

    /* Contenu (badge + titre en overlay) */
    --card-pub-mobile-contenu-padding: 1rem;          /* Padding du contenu */

    /* Typographie */
    --card-pub-mobile-badge-taille: 0.7rem;
    --card-pub-mobile-titre-taille: 0.95rem;


/* ╔══════════════════════════════════════════════════════════════╗
   ║                                                              ║
   ║                    COULEURS                                  ║
   ║                                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

    --couleur-principale: #f97316;            /* Orange (boutons, liens) */
    --couleur-principale-hover: #ea580c;      /* Orange au survol */
    --couleur-prix: #10b981;                  /* Vert pour les prix */
    --couleur-titre: #111827;                 /* Titres */
    --couleur-texte: #4b5563;                 /* Texte normal */
    --couleur-texte-clair: #6b7280;           /* Texte secondaire */
    --couleur-bordure: #e5e7eb;               /* Bordures */
    --couleur-fond: #ffffff;                  /* Fond des cartes */
    --couleur-badge-sponsorise: #ef4444;      /* Badge rouge "Sponsorise" */
    --couleur-badge-vedette: #7c3aed;         /* Badge violet "A la une" */
    --couleur-badge-service-pro: #10b981;     /* Badge vert "Service Pro" */


/* ╔══════════════════════════════════════════════════════════════╗
   ║                                                              ║
   ║                    STYLE GLOBAL                              ║
   ║            (S'applique a toutes les cards)                   ║
   ║                                                              ║
   ╚══════════════════════════════════════════════════════════════╝ */

    --card-arrondi: 0.25rem;                  /* Arrondi des coins */
    --card-espacement: 1.5rem;                /* Espace entre les cartes */
    --card-ombre: 0 2px 8px rgba(0,0,0,0.08); /* Ombre normale */
    --card-ombre-hover: 0 4px 16px rgba(0,0,0,0.12); /* Ombre au survol */

    --bouton-padding: 0.38rem 1.2rem;
    --bouton-arrondi: 5px;
    --bouton-taille-texte: 0.98rem;


    /* ========================================================
       VARIABLES LEGACY (compatibilite avec homepage.css)
       NE PAS MODIFIER - utilisees par le systeme
       ======================================================== */

    /* ANNONCES - Liste Desktop */
    --hp-annonce-desktop-width: var(--card-annonce-liste-desktop-largeur);
    --hp-annonce-desktop-height: var(--card-annonce-liste-desktop-hauteur);
    --hp-annonce-desktop-img-width: var(--card-annonce-liste-desktop-img-largeur);
    --hp-annonce-desktop-img-height: var(--card-annonce-liste-desktop-img-hauteur);
    --hp-annonce-desktop-img-padding: var(--card-annonce-liste-desktop-img-padding);
    --hp-annonce-desktop-padding: var(--card-annonce-liste-desktop-contenu-padding);
    --hp-annonce-desktop-title-size: var(--card-annonce-liste-desktop-titre-taille);
    --hp-annonce-desktop-price-size: var(--card-annonce-liste-desktop-prix-taille);
    --hp-annonce-desktop-location-size: var(--card-annonce-liste-desktop-location-taille);

    /* ANNONCES - Liste Mobile */
    --hp-annonce-mobile-width: var(--card-annonce-liste-mobile-largeur);
    --hp-annonce-mobile-height: var(--card-annonce-liste-mobile-hauteur);
    --hp-annonce-mobile-img-width: var(--card-annonce-liste-mobile-img-largeur);
    --hp-annonce-mobile-img-height: var(--card-annonce-liste-mobile-img-hauteur);
    --hp-annonce-mobile-img-padding: var(--card-annonce-liste-mobile-img-padding);
    --hp-annonce-mobile-padding: var(--card-annonce-liste-mobile-contenu-padding);
    --hp-annonce-mobile-title-size: var(--card-annonce-liste-mobile-titre-taille);
    --hp-annonce-mobile-price-size: var(--card-annonce-liste-mobile-prix-taille);
    --hp-annonce-mobile-location-size: var(--card-annonce-liste-mobile-location-taille);

    /* ANNONCES - Grille */
    --hp-annonce-grid-desktop-img-height: var(--card-annonce-grille-desktop-img-hauteur);
    --hp-annonce-grid-desktop-img-padding: var(--card-annonce-grille-desktop-img-padding);
    --hp-annonce-grid-desktop-padding: var(--card-annonce-grille-desktop-contenu-padding);
    --hp-annonce-grid-mobile-img-height: var(--card-annonce-grille-mobile-img-hauteur);
    --hp-annonce-grid-mobile-img-padding: var(--card-annonce-grille-mobile-img-padding);
    --hp-annonce-grid-mobile-padding: var(--card-annonce-grille-mobile-contenu-padding);

    /* BANNIERES - Desktop */
    --hp-banniere-desktop-width: var(--card-banniere-desktop-largeur);
    --hp-banniere-desktop-height: var(--card-banniere-desktop-hauteur);
    --hp-banniere-desktop-img-width: var(--card-banniere-desktop-img-largeur);
    --hp-banniere-desktop-img-height: var(--card-banniere-desktop-img-hauteur);
    --hp-banniere-desktop-img-padding: var(--card-banniere-desktop-img-padding);
    --hp-banniere-desktop-padding: var(--card-banniere-desktop-contenu-padding);
    --hp-banniere-desktop-title-size: var(--card-banniere-desktop-titre-taille);
    --hp-banniere-desktop-desc-size: var(--card-banniere-desktop-description-taille);
    --hp-banniere-desktop-desc-lines: var(--card-banniere-desktop-description-lignes);

    /* BANNIERES - Mobile */
    --hp-banniere-mobile-width: var(--card-banniere-mobile-largeur);
    --hp-banniere-mobile-min-height: var(--card-banniere-mobile-hauteur-min);
    --hp-banniere-mobile-img-width: var(--card-banniere-mobile-img-largeur);
    --hp-banniere-mobile-img-height: var(--card-banniere-mobile-img-hauteur);
    --hp-banniere-mobile-img-padding: var(--card-banniere-mobile-img-padding);
    --hp-banniere-mobile-padding: var(--card-banniere-mobile-contenu-padding);
    --hp-banniere-mobile-title-size: var(--card-banniere-mobile-titre-taille);
    --hp-banniere-mobile-desc-size: var(--card-banniere-mobile-description-taille);
    --hp-banniere-mobile-desc-lines: var(--card-banniere-mobile-description-lignes);

    /* PUBS - Desktop */
    --hp-pub-desktop-width: var(--card-pub-desktop-largeur);
    --hp-pub-desktop-height: var(--card-pub-desktop-hauteur);
    --hp-pub-desktop-img-padding: var(--card-pub-desktop-img-padding);
    --hp-pub-desktop-padding: var(--card-pub-desktop-contenu-padding);
    --hp-pub-desktop-badge-size: var(--card-pub-desktop-badge-taille);
    --hp-pub-desktop-title-size: var(--card-pub-desktop-titre-taille);

    /* PUBS - Mobile */
    --hp-pub-mobile-width: var(--card-pub-mobile-largeur);
    --hp-pub-mobile-height: var(--card-pub-mobile-hauteur);
    --hp-pub-mobile-img-padding: var(--card-pub-mobile-img-padding);
    --hp-pub-mobile-padding: var(--card-pub-mobile-contenu-padding);
    --hp-pub-mobile-badge-size: var(--card-pub-mobile-badge-taille);
    --hp-pub-mobile-title-size: var(--card-pub-mobile-titre-taille);

    /* COULEURS */
    --hp-color-primary: var(--couleur-principale);
    --hp-color-primary-hover: var(--couleur-principale-hover);
    --hp-color-price: var(--couleur-prix);
    --hp-color-title: var(--couleur-titre);
    --hp-color-text: var(--couleur-texte);
    --hp-color-text-light: var(--couleur-texte-clair);
    --hp-color-border: var(--couleur-bordure);
    --hp-color-background: var(--couleur-fond);
    --hp-color-badge-sponsored: var(--couleur-badge-sponsorise);
    --hp-color-badge-featured: var(--couleur-badge-vedette);
    --hp-color-service-pro: var(--couleur-badge-service-pro);

    /* STYLE GLOBAL */
    --hp-card-border-radius: var(--card-arrondi);
    --hp-card-gap: var(--card-espacement);
    --hp-card-shadow: var(--card-ombre);
    --hp-card-shadow-hover: var(--card-ombre-hover);

    --hp-btn-padding: var(--bouton-padding);
    --hp-btn-border-radius: var(--bouton-arrondi);
    --hp-btn-font-size: var(--bouton-taille-texte);
}


/* ============================================================
   EXEMPLES DE MODIFICATIONS
   ============================================================

   CARD ANNONCE - Augmenter hauteur image mobile :
   --card-annonce-liste-mobile-img-hauteur: 220px;

   CARD BANNIERE - Agrandir l'image desktop :
   --card-banniere-desktop-img-largeur: 30rem;

   CARD PUB - Reduire hauteur mobile :
   --card-pub-mobile-hauteur: 100px;

   COULEURS - Changer la couleur des prix :
   --couleur-prix: #3b82f6;

   ============================================================ */