/* ============================================================
   POPUP NEWSLETTER — popup-newsletter.css
   ============================================================

   ► COMMENT MODIFIER LE STYLE ?

   Ce fichier est organisé en sections numérotées.
   Cherchez le numéro de la section que vous voulez modifier
   et changez uniquement les valeurs entre les commentaires.

   VARIABLES GLOBALES (couleurs, tailles) → Section 1
   Il suffit de changer les variables --pnr-* pour tout modifier
   d'un coup sans toucher au reste.

   SECTIONS :
   1.  Variables CSS (couleurs, typo, effets)
   2.  Overlay (fond semi-transparent derrière la popup)
   3.  Modale (la boîte blanche elle-même)
   4.  Côté gauche — image
   5.  Côté droit — contenu
   6.  Bouton fermer ✕
   7.  Titre principal
   8.  Sous-titre
   9.  Champs de saisie
   10. Zone de message (erreur / succès)
   11. Bouton S'ABONNER
   12. Bloc succès après inscription
   13. Mentions légales
   14. Animations d'entrée
   15. Responsive mobile (≤ 640px)
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. VARIABLES CSS GLOBALES
   Modifiez ici pour changer les couleurs partout à la fois.
───────────────────────────────────────────────────────────── */
:root {
    /* Couleur principale (bouton, titre, bordures…) */
    --pnr-blue:          #1b2d6b;
    --pnr-blue-hover:    #162558;

    /* Fond des champs de saisie */
    --pnr-input-bg:      #f0f2f5;

    /* Couleur du texte principal */
    --pnr-text:          #1a1a2e;

    /* Couleur du texte secondaire */
    --pnr-text-light:    #666;

    /* Arrondi des coins (champs, bouton) */
    --pnr-radius:        4px;

    /* Ombre de la modale */
    --pnr-shadow:        0 20px 60px rgba(0, 0, 0, 0.35);

    /* Durée des animations d'entrée */
    --pnr-anim:          0.35s;
}


/* ────────────────────────────────────────────────────────────
   2. OVERLAY — fond semi-transparent
   Couvre toute la page derrière la popup.
───────────────────────────────────────────────────────────── */
.pnr-overlay {
    position:   fixed;
    inset:      0;           /* top:0; right:0; bottom:0; left:0 */
    z-index:    99999;
    display:    flex;
    align-items:     center;
    justify-content: center;
    padding:    16px;

    /* Couleur et flou du fond — modifiez rgba(0,0,0,0.55) */
    background:         rgba(0, 0, 0, 0.55);
    backdrop-filter:    blur(3px);
    -webkit-backdrop-filter: blur(3px);

    /* Animation voir section 14 */
    opacity:    0;
    animation:  pnr-fade-in var(--pnr-anim) ease forwards;
}

/* Quand la popup est cachée (attribut HTML hidden) */
.pnr-overlay[hidden] {
    display: none !important;
}


/* ────────────────────────────────────────────────────────────
   3. MODALE — la boîte principale
───────────────────────────────────────────────────────────── */
.pnr-modal {
    display:     flex;
    width:       100%;
    max-width:   1000px;    /* ← Largeur max — modifiez ici */
    min-height:  400px;    /* ← Hauteur min — modifiez ici */
    background:  #ffffff;
    border-radius: 0px;
    overflow:    hidden;
    position:    relative;
    box-shadow:  var(--pnr-shadow);

    /* Animation voir section 14 */
    transform:   translateY(28px);
    animation:   pnr-slide-up var(--pnr-anim) ease forwards;
}


/* ────────────────────────────────────────────────────────────
   4. CÔTÉ GAUCHE — image
   Pour masquer l'image : ajoutez display:none à .pnr-visual
───────────────────────────────────────────────────────────── */
.pnr-visual {
    flex:       0 0 50%;   /* ← Largeur de l'image (45% de la modale) */
    position:   relative;
    overflow:   hidden;
    background: #f3e4d7;   /* ← Couleur de fond si l'image tarde à charger */
}

.pnr-visual img {
    width:          100%;
    height:         100%;
    object-fit:     cover;
    object-position: top center; /* ← Cadrage : center, top, bottom… */
    display:        block;
    transition:     transform 0.6s ease;
}

/* Légère mise à l'échelle au survol de la modale */
.pnr-modal:hover .pnr-visual img {
    transform: scale(1.03);
}


/* ────────────────────────────────────────────────────────────
   5. CÔTÉ DROIT — zone de contenu
───────────────────────────────────────────────────────────── */
.pnr-content {
    flex:        1;
    padding:     8px 44px 8px;  /* ← Espacements internes */
    display:     flex;
    flex-direction: column;
    justify-content: center;
    position:    relative;
}


/* ────────────────────────────────────────────────────────────
   6. BOUTON FERMER ✕
───────────────────────────────────────────────────────────── */
.pnr-close {
    position:    absolute;
    top:         16px;
    right:       18px;
    background:  none;
    border:      none;
    font-size:   20px;
    color:       #999;
    cursor:      pointer;
    padding:     4px 8px;
    border-radius: 50%;
    line-height: 1;
    transition:  color 0.2s, background 0.2s;
}

.pnr-close:hover {
    color:       var(--pnr-text);
    background:  #f0f0f0;
}


/* ────────────────────────────────────────────────────────────
   7. TITRE PRINCIPAL
   clamp(min, préféré, max) adapte la taille selon la fenêtre
───────────────────────────────────────────────────────────── */
.pnr-title {
    font-family: 'Outfit', sans-serif;
    font-size:    clamp(24px, 3.2vw, 45px); /* ← Min 24px, max 36px */
    font-weight:  400;
    color:        var(--pnr-text);
    line-height:  1.1;
    margin:       0 0 14px;
    letter-spacing: -0.5px;
}


/* ────────────────────────────────────────────────────────────
   8. SOUS-TITRE
───────────────────────────────────────────────────────────── */
.pnr-subtitle {
    font-size:   14px;
    color:       #000;
    margin:      0 0 28px;
    line-height: 1.5;
    font-family: 'Outfit', sans-serif;
}


/* ────────────────────────────────────────────────────────────
   9. CHAMPS DE SAISIE
───────────────────────────────────────────────────────────── */
.pnr-form-wrap {
    display:        flex;
    flex-direction: column;
    gap:            12px;   /* ← Espacement entre les champs */
}

.pnr-input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px 18px !important;
    background-color: #F2F2F2 !important;
    border: 1.5px solid transparent !important;
    border-radius: var(--pnr-radius) !important;
    font-size: 14px !important;
    color: var(--pnr-text) !important;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.pnr-input::placeholder {
    color: #aaa;
}

/* Style au focus (clic dans le champ) */
.pnr-input:focus {
    background:    #fff;
    border-color:  var(--pnr-blue);
}

/* Style en cas d'erreur de validation */
.pnr-input.pnr-error {
    border-color:  #e74c3c;
    background:    #fff8f7;
}


/* ────────────────────────────────────────────────────────────
   10. ZONE DE MESSAGE (erreur / succès inline)
───────────────────────────────────────────────────────────── */
.pnr-message {
    font-size:   13px;
    line-height: 1.4;
    min-height:  18px;
}

.pnr-message.is-error   { color: #e74c3c; }  /* ← Rouge erreur */
.pnr-message.is-success { color: #27ae60; font-weight: 600; }


/* ────────────────────────────────────────────────────────────
   11. BOUTON S'ABONNER
───────────────────────────────────────────────────────────── */
.pnr-btn {
    display:         inline-block;
    background:      #004290;
    color:           #ffffff;
    border:          none;
    border-radius:   var(--pnr-radius);
    padding:         17px 32px;
    font-size:       14px;
    font-weight:     700;
    letter-spacing:  1.5px;
    text-transform:  uppercase;
    cursor:          pointer;
    align-self:      flex-start;    /* Ne prend pas toute la largeur */
    transition:      background 0.2s, transform 0.15s;
}

.pnr-btn:hover:not(:disabled) {
    background:  var(--pnr-blue-hover);
    transform:   translateY(-1px);
}

.pnr-btn:disabled {
    opacity: 0.65;
    cursor:  not-allowed;
}

/* Spinner de chargement intégré dans le bouton (JS ajoute la classe .is-loading) */
.pnr-btn.is-loading::after {
    content:       '';
    display:       inline-block;
    width:         13px;
    height:        13px;
    border:        2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation:     pnr-spin 0.7s linear infinite;
    margin-left:   10px;
    vertical-align: middle;
}


/* ────────────────────────────────────────────────────────────
   12. BLOC SUCCÈS — affiché après inscription réussie
───────────────────────────────────────────────────────────── */
.pnr-success-box {
    background:    #f0f8f4;
    border:        2px dashed #27ae60;
    border-radius: 8px;
    padding:       24px;
    text-align:    center;
}

.pnr-success-box p {
    margin:      0 0 12px;
    font-size:   14px;
    color:       #333;
}

/* Le code promo cliquable */
.pnr-coupon-code {
    display:      inline-block;
    font-family:  'Courier New', Courier, monospace;
    font-size:    26px;
    font-weight:  900;
    letter-spacing: 4px;
    color:        var(--pnr-blue);
    background:   #fff;
    border:       1px solid #c3e6cb;
    border-radius: 4px;
    padding:      8px 16px;
    cursor:       pointer;
    user-select:  all;  /* Sélectionne tout le code d'un coup */
    transition:   background 0.2s;
}

.pnr-coupon-code:hover {
    background: #e8f8ef;
}

.pnr-copy-hint {
    font-size:   11px;
    color:       #999;
    margin:      6px 0 0;
}


/* ────────────────────────────────────────────────────────────
   13. MENTIONS LÉGALES
───────────────────────────────────────────────────────────── */
.pnr-legal {
    font-size:   11px;
    color:       #bbb;
    margin:      16px 0 0;
    line-height: 1.5;
}

.pnr-legal a {
    color:           var(--pnr-blue);
    text-decoration: none;
}

.pnr-legal a:hover {
    text-decoration: underline;
}


/* ────────────────────────────────────────────────────────────
   14. ANIMATIONS D'ENTRÉE
   Supprimez ou modifiez les keyframes si vous ne voulez pas
   d'animation.
───────────────────────────────────────────────────────────── */

/* Fondu de l'overlay */
@keyframes pnr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Montée de la modale */
@keyframes pnr-slide-up {
    from { transform: translateY(28px); }
    to   { transform: translateY(0); }
}

/* Rotation du spinner bouton */
@keyframes pnr-spin {
    to { transform: rotate(360deg); }
}


/* ────────────────────────────────────────────────────────────
   15. RESPONSIVE — Mobile (écran ≤ 640px)
   Sur mobile : image en haut, formulaire en dessous.
───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* La modale passe en colonne sur mobile */
    .pnr-modal {
        flex-direction: column;
        max-height:     92vh;
        overflow-y:     auto;
    }

    /* L'image est réduite en hauteur fixe */
    .pnr-visual {
        flex:    0 0 200px;
        height:  200px;
    }

    /* Padding réduit sur mobile */
    .pnr-content {
        padding: 28px 24px 28px;
    }

    /* Bouton pleine largeur sur mobile */
    .pnr-btn {
        width:      100%;
        text-align: center;
    }
}

/* Très petits écrans (< 400px) */
@media (max-width: 400px) {
    .pnr-content {
        padding: 24px 18px 24px;
    }
    .pnr-title {
        font-size: 22px;
    }
}