/* ===================================
    Crafto - Magazine
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
/* variable */
:root {
    --base-color: #7A5268;
    --alt-font: 'Plus Jakarta Sans', serif;
    --primary-font: 'Plus Jakarta Sans', sans-serif;
    --very-light-gray: #f9f5f3;
    --medium-gray: #828282;
    /* ---- Neybras Family design tokens (refonte premium 2026) ---- */
    --nf-mauve: #7A5268;              /* = --base-color, alias explicite pour les nouveaux composants */
    --nf-gris-clair: #D9D9D9;
    /* Vert réservé aux contenus piliers/evergreen (dossiers de référence mis à jour régulièrement).
       Ne pas généraliser à d'autres blocs sans qu'un vrai contenu pilier existe : à ce jour, aucun
       bloc du site n'utilise cette couleur, elle est seulement documentée ici pour la prochaine fois. */
    --nf-sauge-reserved: #7A8E7A;
    --nf-radius-card: 16px;
    --nf-radius-pill: 999px;
    --nf-space-card: 24px;
}
.top-55 {
    top: 55%;
}

/* ==========================================================================
   Composants refonte premium — hero/featured (déjà géré par generate.js),
   duo-photo À propos, grille destinations, grille avantages newsletter.
   Recodés nativement (pas de Bootstrap additionnel), pensés pour rester
   légers : une seule micro-interaction (fade-in ou zoom léger) par bloc.
   ========================================================================== */

/* ---- Bloc À propos : duo photo + chiffre clé ---- */
.nf-about-duo { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }
.nf-about-photos { position: relative; flex: 1 1 420px; min-width: 300px; aspect-ratio: 1 / 1; }
.nf-about-photo { position: absolute; border-radius: var(--nf-radius-card); overflow: hidden; box-shadow: 0 20px 50px rgba(122, 82, 104, .18); }
.nf-about-photo img, .nf-about-photo .nf-photo-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; }
.nf-photo-back { width: 72%; height: 72%; top: 0; left: 0; }
.nf-photo-front { width: 56%; height: 56%; bottom: 0; right: 0; border: 6px solid #fff; }
.nf-about-stat { position: absolute; bottom: -22px; left: -22px; background: var(--nf-mauve); color: #fff; border-radius: var(--nf-radius-card); padding: 20px 24px; box-shadow: 0 16px 34px rgba(122, 82, 104, .35); z-index: 2; }
.nf-about-stat .nf-stat-num { font-family: var(--alt-font); font-weight: 700; font-size: 32px; line-height: 1; display: block; }
.nf-about-stat .nf-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.nf-about-text { flex: 1 1 420px; min-width: 300px; }
@media (max-width: 767px) { .nf-about-duo { gap: 40px; } .nf-about-stat { left: 10px; bottom: -18px; padding: 14px 18px; } .nf-about-stat .nf-stat-num { font-size: 26px; } }

/* Placeholder photo temporaire — traitement photographique (dégradé chaud), pas un pictogramme */
.nf-photo-placeholder { background: linear-gradient(135deg, #EFE3E8 0%, var(--nf-gris-clair) 100%); display: flex; align-items: flex-end; justify-content: flex-start; padding: 14px; }
.nf-photo-placeholder span { background: rgba(122, 82, 104, .92); color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 5px 10px; border-radius: var(--nf-radius-pill); font-weight: 600; }

/* ---- Grille destinations (catégorie Voyages) ---- */
.nf-destination-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--nf-space-card); }
.nf-destination-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--nf-radius-card); overflow: hidden; }
.nf-destination-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nf-destination-card:hover img { transform: scale(1.06); }
.nf-destination-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(30, 20, 25, .85) 100%); }
.nf-destination-label { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; color: #fff; }
.nf-destination-label .nf-dest-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; display: block; margin-bottom: 4px; }
.nf-destination-label .nf-dest-title { font-family: var(--alt-font); font-weight: 700; font-size: 18px; line-height: 1.3; }

/* ---- Fancy Images — cluster de photos décalées/superposées (inspiré Crafto "Fancy Images",
   recodé nativement : pas d'images incrustées, vraies photos d'articles du site) ---- */
.nf-fancy-images { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1 / 0.92; margin: 0 auto; }
.nf-fancy-img { position: absolute; border-radius: 16px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 14px 34px rgba(46, 36, 48, .18); transform: rotate(var(--nf-rot, 0deg)); transition: transform .35s ease, box-shadow .35s ease; }
.nf-fancy-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-fancy-img-1 { --nf-rot: -5deg; width: 60%; aspect-ratio: 4 / 5; top: 0; left: 0; z-index: 1; }
.nf-fancy-img-2 { --nf-rot: 6deg; width: 44%; aspect-ratio: 1 / 1; bottom: 0; right: 6%; z-index: 2; }
.nf-fancy-img-3 { --nf-rot: 4deg; width: 36%; aspect-ratio: 4 / 5; top: 8%; right: 0; z-index: 3; }
.nf-fancy-img:hover { transform: rotate(0deg) scale(1.05); box-shadow: 0 20px 44px rgba(46, 36, 48, .26); z-index: 5; }
@media (max-width: 991px) { .nf-fancy-images { max-width: 320px; } }
@media (prefers-reduced-motion: reduce) { .nf-fancy-img:hover { transform: rotate(var(--nf-rot, 0deg)); } }

/* ---- Grille avantages newsletter — cartes premium (fond, ombre, icône dégradée, hover) ---- */
.nf-nl-benefits-section { position: relative; overflow: hidden; }
.nf-nl-benefits-section::before { content: ''; position: absolute; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(122, 82, 104, .07), transparent 70%); top: -180px; right: -140px; pointer-events: none; }
.nf-nl-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; z-index: 1; }
.nf-nl-benefit { text-align: left; background: #fff; border-radius: var(--nf-radius-card); padding: 32px 28px; box-shadow: 0 1px 2px rgba(46, 36, 48, .05), 0 10px 26px rgba(46, 36, 48, .06); transition: transform .25s ease, box-shadow .25s ease; }
.nf-nl-benefit:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(46, 36, 48, .08), 0 20px 40px rgba(46, 36, 48, .12); }
.nf-nl-benefit .nf-nl-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--nf-mauve) 0%, #9C7488 100%); display: flex; align-items: center; justify-content: center; margin: 0 0 20px; color: #fff; font-size: 20px; }
.nf-nl-benefit h4 { font-family: var(--alt-font); font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.nf-nl-benefit p { font-size: 14px; color: var(--medium-gray); line-height: 1.6; margin: 0; }
@media (max-width: 767px) { .nf-nl-benefits { grid-template-columns: 1fr; gap: 20px; } .nf-nl-benefits-section::before { width: 300px; height: 300px; top: -100px; right: -100px; } }

/* ---- Menu principal : police resserrée pour les 9 entrées (Accueil...À propos) ---- */
#navbarNav .navbar-nav .nav-link { font-size: 13.5px; padding-left: 14px; padding-right: 14px; }

/* ---- Menu déroulant mobile (bouton à gauche du header) : police resserrée ---- */
.hamburger-menu.menu-list-wrapper .menu-item-list .nav-link { font-size: 16px !important; line-height: 1.6 !important; margin: 4px 0 !important; }

/* ---- Cartes "À essayer en famille" (jeux/quiz) — remplace l'ancien .nf-promo-card ---- */
.nf-tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.nf-tool-card { display: flex; flex-direction: column; border-radius: var(--nf-radius-card); overflow: hidden; background: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(46, 36, 48, .05), 0 10px 26px rgba(46, 36, 48, .08); transition: transform .25s ease, box-shadow .25s ease; }
.nf-tool-card:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(46, 36, 48, .1), 0 20px 40px rgba(46, 36, 48, .14); }
.nf-tool-visual { position: relative; height: 220px; overflow: hidden; }
.nf-tool-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nf-tool-card:hover .nf-tool-visual img { transform: scale(1.06); }
.nf-tool-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(30, 20, 25, .5) 100%); }
.nf-tool-badge { position: absolute; top: 16px; left: 16px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border-radius: var(--nf-radius-pill); background: var(--nf-mauve); color: #fff; }
.nf-tool-cta { position: absolute; bottom: 16px; right: 16px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--nf-mauve); display: flex; align-items: center; justify-content: center; font-size: 17px; opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .3s ease, transform .3s ease; }
.nf-tool-card:hover .nf-tool-cta { opacity: 1; transform: translateY(0) scale(1); }
.nf-tool-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
.nf-tool-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--nf-mauve); font-weight: 700; margin-bottom: 8px; }
.nf-tool-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px; color: #2E2430; margin-bottom: 8px; line-height: 1.3; }
.nf-tool-excerpt { font-size: 14px; color: #6b5c66; line-height: 1.5; margin: 0 0 14px; flex: 1; }
.nf-tool-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--medium-gray); font-weight: 600; }
@media (max-width: 767px) { .nf-tools-grid { grid-template-columns: 1fr; } .nf-tool-visual { height: 160px; } }

/* ---- Bloc "À essayer en famille" en colonne verticale (home) ---- */
.nf-games-hook { display: inline-flex; align-items: center; gap: 10px; background: rgba(122, 82, 104, .08); border-radius: var(--nf-radius-pill); padding: 10px 18px; font-weight: 700; color: var(--nf-mauve); font-size: 14px; margin-top: 22px; }
.nf-games-hook .nf-bounce { display: inline-block; font-size: 16px; animation: nf-bounce 2s ease-in-out infinite; }
@keyframes nf-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .nf-games-hook .nf-bounce { animation: none; } }

.nf-games-list { display: flex; flex-direction: column; gap: 20px; }
.nf-game-row { display: flex; gap: 20px; align-items: center; background: #fff; border-radius: var(--nf-radius-card); padding: 16px; text-decoration: none; box-shadow: 0 1px 2px rgba(46, 36, 48, .05), 0 10px 26px rgba(46, 36, 48, .08); transition: transform .25s ease, box-shadow .25s ease; }
.nf-game-row:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 6px 14px rgba(46, 36, 48, .1), 0 20px 40px rgba(46, 36, 48, .14); }
.nf-game-thumb { position: relative; flex: none; width: 110px; height: 110px; border-radius: 14px; overflow: hidden; }
.nf-game-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nf-game-badge { position: absolute; top: 8px; left: 8px; background: var(--nf-mauve); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: var(--nf-radius-pill); }
.nf-game-info { flex: 1; min-width: 0; }
.nf-game-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: #2E2430; margin: 4px 0 6px; line-height: 1.3; }
.nf-game-excerpt { font-size: 13px; color: #6b5c66; line-height: 1.5; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-game-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--nf-mauve); }
.nf-game-cta i { font-size: 13px; transition: transform .2s ease; }
.nf-game-row:hover .nf-game-cta i { transform: translateX(4px); }
@media (max-width: 575px) { .nf-game-row { flex-direction: column; align-items: flex-start; } .nf-game-thumb { width: 100%; height: 140px; } }

/* ---- Bulle de dialogue recréée en HTML/CSS par-dessus une photo (remplace l'incrustation image) ---- */
.nf-speech-bubble { position: absolute; top: 8px; right: 8px; z-index: 2; background: #fff; color: #2E2430; font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 700; font-size: 9.5px; line-height: 1.3; padding: 6px 10px; border-radius: 12px; max-width: 72px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); }
.nf-speech-bubble::after { content: ''; position: absolute; bottom: -5px; left: 14px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; }
.nf-speech-bubble-lg { font-size: 14px; line-height: 1.35; font-weight: 700; padding: 12px 16px; max-width: 220px; border-radius: 16px; top: 16px; right: 16px; }
.nf-speech-bubble-lg::after { border-left-width: 6px; border-right-width: 6px; border-top-width: 7px; left: 20px; bottom: -6px; }
@media (max-width: 575px) { .nf-speech-bubble-lg { max-width: 170px; font-size: 12.5px; padding: 10px 12px; } }

/* ---- Duo "Fancy Images" viral — À essayer en famille (grandes photos décalées, titre incrusté) ---- */
.nf-viral-games { position: relative; width: 100%; max-width: 580px; margin: 0 auto; aspect-ratio: 1 / 1; }
.nf-viral-card { position: absolute; display: block; border-radius: 20px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 16px 40px rgba(46, 36, 48, .22); transform: rotate(var(--nf-rot, 0deg)); transition: transform .35s ease, box-shadow .35s ease; text-decoration: none; }
.nf-viral-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-viral-card-1 { --nf-rot: -4deg; width: 72%; aspect-ratio: 4 / 5; top: 0; left: 0; z-index: 1; }
.nf-viral-card-2 { --nf-rot: 5deg; width: 60%; aspect-ratio: 4 / 5; bottom: 0; right: 0; z-index: 2; }
.nf-viral-card:hover { transform: rotate(0deg) scale(1.04); box-shadow: 0 22px 50px rgba(46, 36, 48, .32); z-index: 5; }
.nf-viral-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(20, 12, 16, .85) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.nf-viral-title { font-family: 'Fraunces', serif; font-weight: 600; color: #fff; font-size: 16px; line-height: 1.3; margin: 3px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Carte "solo" (calculateur vacances) posée à gauche de la pile — même style visuel,
   pas de rotation/chevauchement puisqu'elle est seule dans sa colonne flex. */
.nf-viral-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 20px; }
.nf-viral-row .nf-viral-games { margin: 0; max-width: 380px; flex: 2 1 320px; }
.nf-viral-solo { position: relative; display: block; flex: 1 1 220px; max-width: 260px; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; border: 6px solid #fff; box-shadow: 0 16px 40px rgba(46, 36, 48, .22); text-decoration: none; transition: transform .35s ease, box-shadow .35s ease; }
.nf-viral-solo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-viral-solo:hover { transform: scale(1.04); box-shadow: 0 22px 50px rgba(46, 36, 48, .32); }

@media (max-width: 1199px) {
  .nf-viral-games { max-width: 460px; }
  .nf-viral-row .nf-viral-games { max-width: 300px; flex-basis: 260px; }
  .nf-viral-solo { max-width: 190px; flex-basis: 160px; }
  .nf-viral-title { font-size: 13px; }
  /* Les cartes de .nf-viral-row rétrécissent pour laisser de la place à la 3e carte :
     badge/bulle/titre doivent suivre, sinon ils débordent de cartes devenues plus petites. */
  .nf-viral-row .nf-viral-title { font-size: 12px; margin: 2px 0 4px; }
  .nf-viral-row .nf-tool-cat { font-size: 9.5px; letter-spacing: .5px; }
  .nf-viral-row .nf-game-cta { font-size: 10.5px; }
  .nf-viral-row .nf-game-badge { font-size: 9px; padding: 3px 8px; top: 8px; left: 8px; }
  /* Cartes trop étroites ici pour loger badge + bulle côte à côte (contrairement au
     mobile où la carte solo repasse en pleine largeur) : la bulle descend sous le badge,
     avec assez de marge verticale pour ne jamais chevaucher son cadre (badge ~36px de haut). */
  .nf-viral-row .nf-speech-bubble-lg { max-width: 140px; font-size: 11px; padding: 7px 10px; top: 50px; right: 8px; }
}
@media (max-width: 575px) {
  .nf-viral-games { max-width: 320px; aspect-ratio: 1 / 1.25; }
  .nf-viral-row { flex-direction: column; align-items: center; gap: 24px; }
  .nf-viral-solo { max-width: 320px; width: 100%; aspect-ratio: 4 / 5; }
  /* Le dégradé ne couvre plus qu'une petite bande basse — le visage de Mamoune/Aya doit rester visible */
  .nf-viral-scrim { background: linear-gradient(180deg, transparent 62%, rgba(20, 12, 16, .92) 100%); padding: 12px; justify-content: flex-end; }
  .nf-viral-title { font-size: 11px; line-height: 1.25; margin: 2px 0 4px; -webkit-line-clamp: 2; }
  .nf-viral-card .nf-tool-cat, .nf-viral-solo .nf-tool-cat { font-size: 8.5px; letter-spacing: .5px; }
  .nf-viral-card .nf-game-cta, .nf-viral-solo .nf-game-cta { font-size: 9.5px; }
  .nf-viral-card .nf-game-badge, .nf-viral-solo .nf-game-badge { font-size: 8px; padding: 3px 7px; top: 8px; left: 8px; }
  .nf-viral-card .nf-speech-bubble-lg, .nf-viral-solo .nf-speech-bubble-lg { max-width: 118px; font-size: 10px; padding: 6px 9px; top: 8px; right: 8px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .nf-viral-card:hover, .nf-viral-solo:hover { transform: rotate(var(--nf-rot, 0deg)); } }

/* ---- "À essayer en famille" v3 — 3 cartes égales alignées sur une seule ligne ----
   Remplace la pile nf-viral-* et la mise en page Hero+secondaires ci-dessus (composants
   conservés au cas où). */
#nf-tools-section { padding-top: 90px; padding-bottom: 90px; background: linear-gradient(180deg, #fff 0%, var(--very-light-gray) 100%); }

.nf-tools-intro { max-width: 560px; margin: 0 auto 40px; text-align: center; }
.nf-tools-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 32px; line-height: 1.15; color: #292023; margin: 10px 0 16px; }
.nf-tools-sub { font-size: 15px; color: #6b5c66; margin: 0 auto 24px; line-height: 1.55; }

.nf-tools-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.nf-premium-card { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; box-shadow: 0 8px 22px rgba(46, 36, 48, .10); transition: transform .35s ease, box-shadow .35s ease; }
.nf-premium-card:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(46, 36, 48, .16); }
.nf-premium-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-tools-card { aspect-ratio: 4 / 5; }
.nf-premium-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 16, 0) 42%, rgba(20, 12, 16, .82) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.nf-premium-badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 2; }
.nf-glass-badge { background: rgba(255, 255, 255, .18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 5px 11px; border-radius: var(--nf-radius-pill); border: 1px solid rgba(255, 255, 255, .25); }
.nf-glass-badge.nf-glass-badge-accent { background: var(--nf-mauve); border-color: var(--nf-mauve); }
.nf-premium-title { font-family: 'Fraunces', serif; font-weight: 600; color: #fff; font-size: 16px; line-height: 1.3; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-premium-cta { color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; display: inline-flex; align-items: center; gap: 6px; }
/* La bulle reste toujours sous les badges (jamais à côté) : ces cartes étant compactes à
   toutes les largeurs, mettre badges et bulle côte à côte les fait systématiquement se chevaucher. */
.nf-premium-card .nf-speech-bubble-lg { top: 62px; right: 14px; max-width: 65%; font-size: 10.5px; padding: 7px 10px; }

@media (max-width: 767px) {
  .nf-tools-title { font-size: 26px; }
  .nf-tools-cards { grid-template-columns: 1fr; gap: 20px; max-width: 340px; margin: 0 auto; }
}

/* ---- Footer — bleu nuit propre à Neybras Family (#1E3557, distinct de la palette
   navy+or de neybras-magazine.com : les 3 sites du groupe gardent des palettes
   volontairement différentes). Structure à 4 colonnes seulement empruntée à une
   maquette de référence ; couleurs, typo et contenu restent ceux de Family.
   Fraunces italique pour la marque (cohérent avec le reste du site), Inter pour
   le texte courant, accent mauve dérivé du prune de la charte (#7A5268). */
.nf-ft { background: #1E3557; font-family: 'Inter', sans-serif; }
.nf-ft-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 14px; }
.nf-ft-name { font-family: 'Fraunces', serif; font-style: italic; font-weight: 600; font-size: 19px; color: #fff; }
.nf-ft-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 38px; padding: 56px 0 38px; }
.nf-ft-tagline { font-size: 13px; color: rgba(255, 255, 255, .55); line-height: 1.7; max-width: 280px; margin: 0 0 18px; }
.nf-ft-social { display: flex; gap: 10px; }
.nf-ft-social a { width: 32px; height: 32px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .6); font-size: 12px; transition: all .25s ease; }
.nf-ft-social a:hover { border-color: #C9A2B5; color: #C9A2B5; }
.nf-ft-col h5 { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #C9A2B5; margin-bottom: 16px; }
.nf-ft-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nf-ft-link { font-size: 13px; color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .2s ease; }
.nf-ft-link:hover { color: #fff; }
.nf-ft-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12px; color: rgba(255, 255, 255, .45); }
@media (max-width: 900px) { .nf-ft-main { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 680px) { .nf-ft-main { grid-template-columns: 1fr; } }

/* ---- Cartes "Derniers articles" : équilibre image/texte ----
   Le thème Crafto fixe .blog-image à height/min-height:300px, indépendamment de la hauteur
   du bloc texte (variable selon la longueur du titre/résumé) — ce qui laisse un vide sur le
   côté le plus court dès que l'autre dépasse 300px. On clampe titre + résumé à 2 lignes pour
   des hauteurs de texte homogènes, et sur desktop (où .blog-box passe en ligne via d-lg-flex),
   l'image suit la hauteur réelle du bloc texte au lieu d'être bornée à une valeur fixe.
   Le mobile empilé (d-block, image hors flex) garde le comportement Crafto d'origine. */
.blog-box .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-box .card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 992px) {
  .blog-side-image .blog-box .blog-image, .blog-wrapper .blog-box .blog-image { height: auto; min-height: 220px; }
}

/* ---- Micro-interaction unique : fade-in discret au scroll (une seule par bloc) ---- */
.nf-fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.nf-fade-in.nf-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .nf-fade-in { opacity: 1; transform: none; transition: none; } }
section {
    padding-top: 100px;
    padding-bottom: 100px;
}
/* bg transparent */
.bg-gradient-bottom-dark-transparent {
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,0.90) 80%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%,rgba(0,0,0,0.90) 80%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%,rgba(0,0,0,0.90) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a8000000',GradientType=0 );
}
.bg-gradient-bottom-very-light-gray { 
    background-image:linear-gradient(to top, #ffffff, #ffffff, #ffffff, #ffffff, #f9f5f3);
}
.bg-gradient-black-green {
    background-image: linear-gradient(to right top, #1f2021, #1b1d1c, #1b1d1c, #222523, #333c37);
}
.bg-nero {
    background-color: #1c1c1c;
}
/* btn */
.btn {
    letter-spacing: normal;
    font-family: var(--primary-font);
}
.categories-btn {
    font-size: 12px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 18px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
/* video icon */
.video-icon-medium .video-icon {
    font-size: 15px;
}
/* contact form */
.terms-condition .box {
    padding-left: 25px;
}
.terms-condition .box:before { 
    width: 15px;
    height: 15px;
    background-color: var(--white);
    border: 1px solid #e4e4e4;
    top: 0;
    left: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}
.terms-condition .box:after {
    left: 5px;
    top: 3px;
    width: 5px;
    height: 8px;
}
/* box layout */
.box-layout {
    padding: 0 60px;
}
/* header */
header .navbar-brand img {
    max-height: 35px;
}
.navbar .navbar-nav .nav-link {
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
}
.header-push-button {
    padding-left: 0;
    padding-right: 20px;
}
.push-menu {
    left: -100%;
}
.show-menu .push-menu {
    left: 0;
}
.menu-item-list li {
    border-bottom: 1px solid var(--extra-medium-gray);
}
.menu-item-list li:last-child {
    border-bottom: none;
}
.menu-item-list .nav-link {
    color: var(--dark-gray);
    font-size: 32px;
    padding: 13px 0;
}
.menu-item-list .nav-link:hover{
    color: var(--dark-gray);
    padding: 13px 10px;
}
.push-menu .close-menu {
    right: 30px;
    top: 30px;
}
/* page title */
.page-title-extra-large h1 {
    font-size: 4.375rem;
    line-height: 4.375rem;
}
.social-icon-style-10 .default-color a {
    color: var(--dark-gray) !important;
}
/* newsletter style 04 */
.newsletter-style-04 input { 
    padding-right: 100px !important; 
}
/* footer */
footer .btn.alt-font, header .btn.alt-font {
    font-family: var(--alt-font);
}
footer .newsletter-style-02 input {
    padding-right: 130px;
}
footer .elements-social.social-icon-style-02 li {
    margin: 0 30px 0 0;
}
@media (max-width: 1600px){
    section {
        padding-top: 90px;
        padding-bottom: 90px;
    }
}
@media (max-width: 1199px){
    .navbar .navbar-nav .nav-link {
        font-size: 13px;
    }
    .box-layout {
        padding: 0 50px;
    }
}
@media (max-width: 991px){
    section {
        padding-top: 75px;
        padding-bottom: 75px;
    }
    .box-layout {
        padding: 0 30px;
    } 
}
@media (max-width: 767px){
    section {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .box-layout {
        padding: 0 15px;
    }
    .interactive-banner-style-09 img {
        height: 350px;
        width: 100%;
        object-fit: cover;
        background-position: center center;
    }
}

/* ---- Popup newsletter ("Je m'abonne") ---- */
.nf-popup { position: relative; background: #fff; max-width: 420px; width: 90vw; margin: 40px auto; padding: 36px 32px; border-radius: 16px; text-align: center; }
.nf-popup-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border: none; background: transparent; color: #9b8a94; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 50%; transition: background .2s ease, color .2s ease; }
.nf-popup-close:hover { background: #F4F1F3; color: #292023; }
.nf-popup-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; color: #292023; margin: 0 0 10px; }
.nf-popup-sub { font-size: 14px; color: #6b5c66; line-height: 1.55; margin: 0 0 22px; }
.nf-popup-form { display: flex; flex-direction: column; gap: 12px; }
.nf-popup-form input[type=email] { border: 1.5px solid #E7E1DE; border-radius: 10px; padding: 12px 16px; font-size: 14.5px; font-family: 'Inter', sans-serif; color: #292023; }
.nf-popup-form input[type=email]:focus-visible { outline: 2px solid var(--nf-mauve); outline-offset: 1px; }
.nf-popup-form button { background: var(--nf-mauve); color: #fff; border: none; border-radius: 999px; padding: 12px 20px; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: background .2s ease; }
.nf-popup-form button:hover { background: #5E3E50; }
.nf-popup-form button:disabled { opacity: .6; cursor: not-allowed; }
.nf-popup-note { font-size: 12px; color: #9b8a94; margin: 16px 0 0; line-height: 1.5; }