/*
Theme Name:   Allopass Child
Theme URI:    https://www.allopass.com/
Description:  Thème enfant de Hello Elementor pour le site Allopass. Contient uniquement le CSS que le Kit Elementor ne peut pas exprimer.
Author:       Allopass
Template:     hello-elementor
Version:      1.0.0
Text Domain:  allopass-child
*/

/* =========================================================================
   RÈGLE DE MAINTENANCE
   -------------------------------------------------------------------------
   Ce fichier ne doit contenir QUE ce qu'Elementor ne sait pas produire.
   Toute couleur, taille de police, graisse, espacement ou style de bouton
   doit venir du Kit, jamais d'ici.

   Avant d'ajouter une règle, se poser la question : « est-ce qu'un réglage
   Elementor fait déjà ça ? » Si oui, corriger le Kit.

   Objectif : rester sous 400 lignes.
   ========================================================================= */


/* =========================================================================
   1. TOKENS
   -------------------------------------------------------------------------
   Rappel des variables d'origine. Elles servent UNIQUEMENT aux règles de ce
   fichier. Les mêmes valeurs existent en Global Colors / Global Fonts dans le
   Kit — voir la table de correspondance.
   ========================================================================= */

:root {
    /* Couleurs */
    --gold:          #d4af37;
    --gold-light:    #f0d875;
    --gold-dark:     #b8960c;

    --primary:       #2563eb;
    --primary-light: #3b82f6;
    --primary-dark:  #1d4ed8;

    --purple:        #7c3aed;
    --success:       #10b981;

    --bg-light:      #e8edf5;
    --bg-secondary:  #e8edf5;
    --bg-white:      #ffffff;
    --bg-dark:       #0f172a;
    --bg-darker:     #020617;

    --text-dark:     #0f172a;
    --text-body:     #475569;
    --text-muted:    #64748b;
    --text-light:    #f8fafc;

    --border:        #e2e8f0;
    --border-light:  #f1f5f9;

    /* Dégradés */
    --gradient-primary: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gradient-gold:    linear-gradient(135deg, #d4af37 0%, #f0d875 100%);

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);

    /* Rayons */
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}


/* =========================================================================
   2. TEXTE EN DÉGRADÉ
   -------------------------------------------------------------------------
   Elementor ne propose pas de remplissage dégradé sur du texte.
   Présent dans tous les titres de section du site : <span class="gradient-text">.
   Usage : ajouter la classe « gradient-text » au widget, ou envelopper le mot
   concerné dans l'éditeur de texte.
   ========================================================================= */

.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gradient-text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* =========================================================================
   3. BOUTON PRIMAIRE — FOND DÉGRADÉ
   -------------------------------------------------------------------------
   Le Kit gère taille, graisse, rayon et espacement interne du bouton.
   Il ne gère pas un fond dégradé. Seul le fond et l'ombre sont repris ici.
   ========================================================================= */

.elementor-button.btn-primary,
.btn-primary .elementor-button {
    background-image: var(--gradient-primary);
    box-shadow: 0 4px 14px rgba(37, 99, 235, .4);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.elementor-button.btn-primary:hover,
.btn-primary .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, .5);
}

/* Bouton or, utilisé sur les CTA de fin de page */
.elementor-button.btn-gold,
.btn-gold .elementor-button {
    background-image: var(--gradient-gold);
    color: var(--text-dark);
    box-shadow: 0 4px 14px rgba(212, 175, 55, .4);
}

.elementor-button.btn-gold:hover,
.btn-gold .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, .5);
}


/* =========================================================================
   4. HOVERS DE CARTES
   -------------------------------------------------------------------------
   Elementor propose des effets de survol, mais pas cette combinaison
   translation + ombre + changement de bordure sur un conteneur.
   Usage : ajouter la classe « card-lift » au conteneur de la carte.
   ========================================================================= */

.card-lift {
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base);
}

.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

/* Variante or : cartes de solution mises en avant */
.card-lift--gold:hover {
    border-color: var(--gold);
    box-shadow: 0 20px 25px -5px rgba(212, 175, 55, .18);
}


/* =========================================================================
   5. BORDURE EN DÉGRADÉ
   -------------------------------------------------------------------------
   Utilisée sur les cartes CTA principales. Non exprimable en natif.
   Usage : classe « border-gradient » sur le conteneur.
   ========================================================================= */

.border-gradient {
    position: relative;
    background-clip: padding-box;
    border: 1px solid transparent;
}

.border-gradient::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: -1px;
    border-radius: inherit;
    background: var(--gradient-primary);
}


/* =========================================================================
   6. TYPOGRAPHIE FLUIDE
   -------------------------------------------------------------------------
   Le Kit gère des tailles par breakpoint, pas une interpolation continue.
   Deux titres seulement utilisaient clamp() sur le site d'origine.
   Usage : classes « title-hero » et « title-section ».
   ========================================================================= */

.title-hero {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.1;
}

.title-section {
    font-size: clamp(25px, 5vw, 35px);
    line-height: 1.2;
}


/* =========================================================================
   7. FONDS DE SECTION
   -------------------------------------------------------------------------
   Reprise des trois fonds d'origine. Peut être fait en natif via le Kit ;
   ces classes existent pour accélérer le montage et garantir la cohérence.
   ========================================================================= */

.section-bg-white  { background-color: var(--bg-white); }
.section-bg-light  { background-color: var(--bg-light); }
.section-bg-dark   { background-color: var(--bg-dark); color: var(--text-light); }

/* Motif de points discret, présent sur certaines sections claires */
.section-bg-dots {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%232563eb' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


/* =========================================================================
   8. ÉTIQUETTE DE SECTION
   -------------------------------------------------------------------------
   Le sur-titre en majuscules au-dessus de chaque titre de section.
   Entièrement faisable dans le Kit ; conservé ici en raccourci de montage.
   Usage : classe « section-tag » sur un widget Titre.
   ========================================================================= */

.section-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}


/* =========================================================================
   9. ACCESSIBILITÉ
   ========================================================================= */

/* Lien d'évitement, présent sur toutes les pages d'origine */
.skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 9999;
    padding: 10px 16px;
    background: var(--bg-dark);
    color: var(--text-light);
    border-radius: var(--radius-md);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 8px;
}

/* Anneau de focus visible et homogène */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Respect de la préférence système de réduction des animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================================
   10. DIVERS
   ========================================================================= */

html {
    scroll-behavior: smooth;
    /* Compense la navbar fixe lors d'un saut vers une ancre */
    scroll-padding-top: 100px;
}

body {
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* SVG fluide — à appliquer AU CAS PAR CAS.
   -------------------------------------------------------------------------
   Certains SVG sans attributs width/height intrinsèques s'affichent à une
   taille arbitraire une fois chargés en <img>. Cette classe les force à
   remplir leur conteneur.

   Ne JAMAIS généraliser cette règle à img[src$=".svg"] : elle ferait gonfler
   le logo (36 × 36 px) et toutes les petites icônes à la largeur de leur
   conteneur.

   Usage : classe « svg-fluid » sur le widget Image concerné. */
.svg-fluid img,
img.svg-fluid {
    width: 100%;
    height: auto;
}


/* =========================================================================
   11. EN-TÊTE, PIED DE PAGE ET APERÇUS
   -------------------------------------------------------------------------
   Ajouté à l'itération 2. Ce que le Theme Builder ne sait pas exprimer.
   ========================================================================= */

/* Effet au défilement de l'en-tête collant */
#site-header.elementor-sticky--effects {
    background: rgba(255, 255, 255, .95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md);
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    transition: all var(--transition-base);
}

.site-logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
}

#site-footer .site-logo-text { color: #fff; }

/* Listes de liens du pied de page */
.footer-links,
.footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li { margin-bottom: 10px; }

.footer-links a,
.footer-legal a {
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover,
.footer-legal a:hover { color: #fff; }

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
}

.footer-col-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

#site-footer p { color: rgba(255, 255, 255, .7); }

/* Aperçus de parcours des heros */
.preview-step-num {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-body);
}

.preview-step-num.is-active { color: #fff; }

.preview-title {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.preview-step-sub p {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Étiquettes de la section Fonctionnalités */
.dcb-tag {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 6px 6px 0;
    border-radius: var(--radius-full);
    background: var(--bg-light);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

/* === FICHES PAYS (couverture-pays.php) — début === */
/* Pages enfants de « Couverture géographique ». Ce que le Kit ne sait pas faire.
   Chaque élément porte une classe : l'éditeur de texte d'Elementor les conserve. */
.fiche-ariane { font-size: 13px; color: var(--text-muted); }
.fiche-ariane a { color: var(--text-muted); text-decoration: none; }
.fiche-ariane a:hover { color: var(--primary); }
.fiche-drapeau img { width: 64px; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); }
.fiche-region { margin: 0; font-size: 14px; color: var(--text-muted); }
.fiche-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fiche-badges span { display: inline-flex; padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; background: #eff6ff; color: #2563eb; }
.fiche-liseret { position: relative; overflow: hidden; }
.fiche-liseret::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); }
.fiche-icone img { width: 48px; height: 48px; object-fit: contain; }

/* Carte « Informations pays » */
p.fiche-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0 !important; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; line-height: 1.45; }
p.fiche-ligne:last-of-type { border-bottom: 0; }
.fiche-libelle { color: var(--text-muted); }
.fiche-valeur { text-align: right; font-weight: 600; color: var(--text-dark); }
.fiche-precision { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }

/* Carte « Opérateurs mobiles » */
p.fiche-ops { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
.fiche-op { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--border); border-radius: 9999px; font-size: 13px; font-weight: 600; color: var(--text-dark); background: var(--border-light); }
.fiche-part { font-weight: 500; color: var(--text-muted); margin-left: 6px; }

/* Carte « Cadre réglementaire » */
.fiche-regles { margin: 12px 0 0; padding-left: 18px; font-size: 14px; }
.fiche-regles li { margin-bottom: 6px; }
.fiche-a-documenter { font-style: italic; color: var(--text-muted); }

/* Ancien balisage (avant réparation), conservé par sécurité */
.fiche-infos { margin: 0; }
.fiche-infos div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.fiche-infos div:last-child { border-bottom: 0; }
.fiche-infos dt { color: var(--text-muted); }
.fiche-infos dd { margin: 0; text-align: right; font-weight: 600; color: var(--text-dark); }
.fiche-infos small { display: block; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.fiche-ops em { font-style: normal; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
/* === FICHES PAYS (couverture-pays.php) — fin === */