/* ═══════════════════════════════════════════════════════════════
   FLOVIE — CSS pages livraison (flovie-shipping-v1-1.css) v1.1
   Chargé UNIQUEMENT sur :
     - /frais-port/ (page ID 24020)
     - /faq-livraisons-et-frais-de-port/ (page ID 24086)
   via flovie_enqueue_shipping_styles() dans functions.php (v2.3.1).

   ⚠️ FICHIER RENOMMÉ le 08/07/2026 (ex flovie-shipping.css) :
   l'optimiseur CSS de LiteSpeed conserve sa copie minifiée par URL
   source et ignore le paramètre ?ver= — après modification d'un CSS
   du thème, seul un changement de NOM de fichier force la
   régénération sans purge CSS/JS. L'ancien flovie-shipping.css
   peut être supprimé du serveur une fois la v1-1 en ligne.

   Origine : CSS inline de /frais-port/ sorti du post_content le
   08/07/2026 (le bridge MCP de Hugo passe par wp_kses_post qui
   supprime les balises <style>). Source : livrable Hugo
   2026-07-08_frais-port_css-a-enqueuer.css — intégré tel quel.

   v1.1 (08/07/2026) : fix contraste des titres de section
   (« France métropolitaine », « Hors France métropolitaine »).
   Le CSS des pages migrées (snippet #92) cible
   .flv-migrated-page .entry-content h2 (spécificité 0,2,1) et
   repeignait le titre en vert #386641 sur fond vert foncé.
   → règle de re-déclaration plus spécifique (0,3,1) en fin de
   section frais-port, sans !important.

   Palette : crème chaud · vert foncé · ardoise
   ═══════════════════════════════════════════════════════════════ */

.flv-ship {
    max-width: 880px;
    margin: 0 auto;
    padding: 0 16px 8px;
    font-family: 'Work Sans', -apple-system, sans-serif;
    color: #1C1C1C;
}

/* ── Intro ── */
.flv-ship-intro {
    background: linear-gradient(135deg, #F7F3EC, #EEF4E6);
    border: 1px solid #D5CFC6;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    margin-bottom: 36px;
}
.flv-ship-intro p {
    font-size: clamp(1rem, 1.8vw, 1.1rem);
    color: #1C1C1C;
    line-height: 1.7;
    margin: 0 0 18px;
}
.flv-ship-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    background: #1C3829;
    color: #FFFFFF;
    border-radius: 50px;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.5vw, 1.05rem);
    letter-spacing: .01em;
}

/* ── Section title ── */
.flv-ship-section-title {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 700;
    color: #FFFFFF;
    background: #1C3829;
    margin: 36px 0 0;
    padding: 14px 22px;
    border-radius: 12px 12px 0 0;
    letter-spacing: .01em;
}

/* v1.1 — Fix contraste : le snippet #92 (pages migrées) déclare
   .flv-migrated-page .entry-content h2 { color:#386641; font-size:clamp(1.3rem,2vw,1.6rem);
   margin:36px 0 14px } avec une spécificité (0,2,1) qui bat .flv-ship-section-title (0,1,0).
   Résultat : titre vert sur fond vert foncé + espace parasite sous le bandeau.
   On re-déclare les 3 propriétés en conflit avec une spécificité supérieure (0,3,1). */
.flv-migrated-page .entry-content h2.flv-ship-section-title {
    color: #FFFFFF;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin: 36px 0 0;
}

/* ── France métropolitaine ── */
.flv-metro-card {
    background: #fff;
    border: 1px solid #D5CFC6;
    border-top: none;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    margin-bottom: 32px;
    box-shadow: 0 6px 24px rgba(0,0,0,.07);
}

/* ── NOUVEAU 08/07 : mode de livraison (domicile / point de retrait) ── */
.flv-metro-mode {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    font-weight: 700;
    color: #1C3829;
    margin: 0;
    padding: 16px 22px 14px;
    background: #F7F3EC;
    border-bottom: 1px solid #EAE7E2;
}
.flv-metro-mode span {
    display: block;
    font-family: 'Work Sans', -apple-system, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: #555;
    margin-top: 5px;
    line-height: 1.5;
}
.flv-metro-mode-second { border-top: 1px solid #D5CFC6; }

.flv-metro-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.flv-metro-tier {
    padding: 28px 16px;
    text-align: center;
    border-right: 1px solid #EAE7E2;
    position: relative;
}
.flv-metro-tier:last-child { border-right: none; }
.flv-metro-tier-label {
    font-size: clamp(0.9rem, 1.3vw, 0.975rem);
    color: #444;
    line-height: 1.6;
    margin: 0 0 14px;
}
.flv-metro-tier-label strong { color: #1C1C1C; font-weight: 700; }
.flv-metro-tier-price {
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    font-weight: 800;
    margin: 0;
    line-height: 1;
}
.flv-metro-tier-price.paid { color: #A0272E; }
.flv-metro-tier-price.free { color: #1C3829; }
.flv-metro-tier.recommended { background: #F2F8EC; }
.flv-metro-tier.recommended::before {
    content: "✔ Livraison offerte";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    background: #1C3829;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
}

/* ── NOUVEAU 08/07 : note de calcul sous la grille France ── */
.flv-ship-note {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: -20px 4px 32px;
}
.flv-ship-note a { color: #1C3829; font-weight: 600; }

/* ── NOUVEAU 08/07 : bandeau international (remplace un style="" inline) ── */
.flv-metro-card-intl {
    border-radius: 0;
    margin-bottom: 16px;
}
.flv-ship-intl-note {
    padding: 16px 20px;
    font-size: clamp(0.9rem, 1.4vw, 0.975rem);
    color: #444;
    line-height: 1.6;
}

/* ── Zones ── */
.flv-zones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.flv-zone-card {
    background: #fff;
    border: 1px solid #D5CFC6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
    transition: box-shadow .25s, transform .25s;
}
.flv-zone-card:hover {
    box-shadow: 0 8px 24px rgba(28,56,41,.12);
    transform: translateY(-3px);
}
.flv-zone-head {
    padding: 15px 16px;
    background: #F7F3EC;
    border-bottom: 2px solid #1C3829;
}
.flv-zone-head-name {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    font-weight: 700;
    color: #1C3829;
    margin: 0 0 6px;
}
.flv-zone-head-price {
    font-size: clamp(0.875rem, 1.3vw, 0.95rem);
    color: #1C1C1C;
    margin: 0;
    line-height: 1.5;
}
.flv-zone-head-price strong { color: #A0272E; font-weight: 700; }
.flv-zone-head-price .free { color: #1C3829; font-weight: 700; }
.flv-zone-body { padding: 14px 16px; }
.flv-zone-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0; padding: 0;
    list-style: none;
}
.flv-zone-countries li {
    background: #F7F3EC;
    border: 1px solid #D5CFC6;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.875rem;
    color: #1C1C1C;
    font-weight: 500;
}

/* ── Zone 4 ── */
.flv-zone4-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.flv-zone4-card {
    background: #fff;
    border: 1px solid #D5CFC6;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
}
.flv-zone4-head {
    padding: 15px 16px;
    background: #FDF6E8;
    border-bottom: 2px solid #C8A84B;
}
.flv-zone4-head-name {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    font-weight: 700;
    color: #1C1C1C;
    margin: 0 0 5px;
}
.flv-zone4-head-price {
    font-size: 1rem;
    font-weight: 700;
    color: #A0272E;
    margin: 0 0 3px;
}
.flv-zone4-head-note {
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
    margin: 0;
}
.flv-zone4-body { padding: 14px 16px; }

/* ── Footer contact ── */
.flv-ship-contact {
    text-align: center;
    padding: 32px 24px;
    background: #F7F3EC;
    border: 1px solid #D5CFC6;
    border-radius: 16px;
    box-shadow: 0 3px 12px rgba(0,0,0,.05);
}
.flv-ship-contact p {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    color: #1C1C1C;
    margin: 0 0 18px;
    font-weight: 500;
}
.flv-ship-contact a {
    display: inline-block;
    padding: 14px 34px;
    background: #1C3829;
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.05rem);
    letter-spacing: .01em;
    transition: background .2s, transform .2s;
    box-shadow: 0 4px 14px rgba(28,56,41,.25);
}
.flv-ship-contact a:hover {
    background: #142B1F;
    transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 720px) {
    .flv-zones-grid { grid-template-columns: 1fr; }
    .flv-zone4-grid { grid-template-columns: 1fr; }
    .flv-zone-card:hover { transform: none; }
}
@media (max-width: 520px) {
    .flv-metro-tiers { grid-template-columns: 1fr; }
    .flv-metro-tier { border-right: none; border-bottom: 1px solid #EAE7E2; }
    .flv-metro-tier:last-child { border-bottom: none; }
    .flv-metro-tier.recommended::before { display: none; }
    .flv-ship-intro { padding: 22px 16px; }
    .flv-ship-section-title { padding: 13px 18px; }
    .flv-metro-mode { padding: 14px 18px 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE FAQ LIVRAISONS (/faq-livraisons-et-frais-de-port/, ID 24086)
   Titres de section verts soulignés (l'accordéon lui-même est
   stylé par le composant [flovie_faq], rien à ajouter pour lui).
   Scopé via la body class page-id-24086 → aucun impact ailleurs.
   ═══════════════════════════════════════════════════════════════ */
.page-id-24086 .flv-page-seo {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px 8px;
}
.page-id-24086 .flv-page-seo h2 {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 700;
    color: #386641;
    margin: 32px 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #6A994E;
}