/* ============================================================
   UPJ — Pied de page « Éditorial vivant » (Footer B du handoff)
   ------------------------------------------------------------
   Porté par .ftB, avec ses propres tokens : ceux de style.css
   portent les mêmes noms mais pas les mêmes valeurs.
   Le markup est injecté par js/footer.js (source unique) et
   présent en statique dans les pages pour éviter tout clignotement.
   ============================================================ */

/* .ftB s'ajoute a .site-footer, qui impose sa propre mise en page dans
   style.css : on la neutralise entierement ici. */
footer.site-footer.ftB{
  display:block;padding:0;gap:0;width:auto;max-width:none;
  margin-inline:0;grid-template-columns:none;text-align:left;border:none;
}
.ftB{
  --gold:#cba041; --gold-2:#e6c66f;
  --ff-display:"Cinzel",serif;
  --ff:"Outfit","Inter",system-ui,sans-serif;
  position:relative;margin-top:110px;background:#010f24;color:#fff;overflow:hidden;
  font-family:var(--ff);
}
.ftB *,.ftB *::before,.ftB *::after{box-sizing:border-box}
.ftB a{text-decoration:none}
.ftB .wrap{width:min(100% - 36px,1200px);margin-inline:auto}
.ftB .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:2.4px;text-transform:uppercase}
.ftB .eyebrow .ln{width:34px;height:1.5px;display:block}

.ftB .mesh{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 12% 0%,rgba(6,58,130,.55),transparent 62%),
             radial-gradient(70% 60% at 92% 18%,rgba(203,160,65,.15),transparent 65%)}
.ftB .bigseal{position:absolute;right:-70px;bottom:-90px;width:360px;height:360px;border-radius:50%;
  border:1.5px solid rgba(203,160,65,.13);pointer-events:none;display:grid;place-items:center}
.ftB .bigseal::after{content:"";position:absolute;inset:38px;border-radius:50%;border:1px solid rgba(203,160,65,.1)}
.ftB .bigseal span{font-family:var(--ff-display);font-size:74px;font-weight:800;color:rgba(203,160,65,.07);letter-spacing:3px}

/* bande newsletter */
.ftB-nl{position:relative;z-index:2;border-bottom:1px solid rgba(255,255,255,.1);padding:52px 0}
.ftB-nl .in{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.ftB-nl .eyebrow{color:var(--gold-2)}
.ftB-nl .eyebrow .ln{background:linear-gradient(90deg,var(--gold-2),transparent)}
.ftB-nl h3{font-family:var(--ff-display);font-size:clamp(22px,2.7vw,31px);margin:16px 0 12px;line-height:1.22;color:#fff}
.ftB-nl h3 .g{color:var(--gold-2)}
.ftB-nl p{color:rgba(255,255,255,.68);font-size:14.5px;line-height:1.7;max-width:44ch;margin:0}
/* Le formulaire porte aussi la classe .newsletter-form, deja habillee par
   style.css : fond blanc, coins 4px, grille 1fr/44px, overflow:hidden et
   max-width:320px sous 768px. Sur mobile cela dessinait un pave blanc autour
   du champ et bridait la largeur. On neutralise avec une specificite
   suffisante pour l'emporter sur les media queries de style.css. */
.ftB .ftB-nl form,
.ftB .ftB-nl form.newsletter-form{display:flex;gap:11px;flex-wrap:wrap;
  background:none;border:0;border-radius:0;overflow:visible;
  max-width:none;width:100%;grid-template-columns:none;padding:0}
.ftB-nl .fld{flex:1;min-width:210px;position:relative}
footer.site-footer.ftB .ftB-nl input[type="email"],
.ftB-nl input{width:100%;height:56px;border-radius:14px;border:1.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;padding:0 18px 0 48px;font-family:inherit;font-size:14.5px;outline:none;transition:.16s}
footer.site-footer.ftB .ftB-nl input::placeholder,
.ftB-nl input::placeholder{color:rgba(255,255,255,.42)}
/* Neutralise le fond clair impose par l'autofill du navigateur */
footer.site-footer.ftB .ftB-nl input:-webkit-autofill{
  -webkit-text-fill-color:#fff;box-shadow:0 0 0 1000px #0d2038 inset;caret-color:#fff}
.ftB-nl input:focus{border-color:var(--gold);background:rgba(255,255,255,.09)}
.ftB-nl .fld .mi{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);pointer-events:none}
.ftB-nl .fld .mi svg{width:19px;height:19px}
.ftB-nl button{height:56px;padding:0 26px;border-radius:14px;border:none;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:700;background:linear-gradient(120deg,#d9b558,#cba041);color:#2a1f06;
  display:inline-flex;align-items:center;gap:10px;transition:.16s;box-shadow:0 14px 30px -14px rgba(203,160,65,.7)}
.ftB-nl button:hover{filter:brightness(1.06);transform:translateY(-2px)}
.ftB-nl button svg{width:18px;height:18px}
.ftB-nl .fine{font-size:12px;color:rgba(255,255,255,.4);margin-top:12px}
.ftB-nl .ok{display:none;align-items:center;gap:10px;margin-top:14px;font-size:14px;font-weight:600;color:var(--gold-2)}
.ftB-nl .ok.show{display:flex}
.ftB-nl .ok .ci{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#2a1f06;display:grid;place-items:center;flex:none}
.ftB-nl .ok .ci svg{width:15px;height:15px}

/* corps */
.ftB-main{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;padding:56px 0 44px}
.ftB .idn .brandline{display:flex;align-items:center;gap:13px}
.ftB .brandline>span:last-child{display:flex;flex-direction:column;min-width:0}
.ftB .seal{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:#02152e;border:1.6px solid var(--gold);box-shadow:0 0 0 4px rgba(203,160,65,.12)}
.ftB .seal img{width:100%;height:100%;object-fit:cover;display:block}
.ftB .nm{display:block;font-family:var(--ff-display);font-weight:700;font-size:18px;letter-spacing:1.3px;line-height:1;color:#fff}
.ftB .sb{display:block;font-size:9px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-top:5px}
.ftB .idn p{color:rgba(255,255,255,.66);font-size:14px;line-height:1.75;margin:16px 0 0;max-width:33ch}
.ftB .tri{display:flex;gap:8px;margin-top:20px}
.ftB .tri span{font-family:var(--ff-display);font-size:11.5px;letter-spacing:2px;color:var(--gold-2);
  border:1px solid rgba(203,160,65,.3);border-radius:8px;padding:7px 12px;background:rgba(203,160,65,.06)}

.ftB h4{font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.42);
  font-weight:800;margin:0 0 18px;font-family:var(--ff)}
.ftB ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.ftB ul a{color:rgba(255,255,255,.78);font-size:14.5px;transition:.16s;display:inline-block}
.ftB ul a:hover{color:var(--gold-2);transform:translateX(4px)}
.ftB .badge{display:inline-block;margin-left:8px;font-size:9.5px;font-weight:800;letter-spacing:.6px;
  background:var(--gold);color:#2a1f06;border-radius:20px;padding:3px 8px;vertical-align:middle}

/* bas de page */
.ftB-bot{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.1);padding:22px 0 28px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ftB-bot .cp{font-size:13px;color:rgba(255,255,255,.48)}
.ftB-bot .legal{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.ftB-bot .legal a{color:rgba(255,255,255,.6)}
.ftB-bot .legal a:hover{color:var(--gold-2)}
.ftB-bot .soc{display:flex;gap:8px;margin-left:auto}
.ftB-bot .soc a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.05);display:grid;place-items:center;color:#fff;transition:.18s}
.ftB-bot .soc a:hover{background:var(--gold);border-color:transparent;color:#2a1f06;transform:translateY(-3px)}
.ftB-bot .soc svg{width:17px;height:17px}
.ftB-bot .up{width:40px;height:40px;border-radius:50%;border:1px solid rgba(203,160,65,.4);
  background:rgba(203,160,65,.1);color:var(--gold-2);display:grid;place-items:center;cursor:pointer;transition:.18s}
.ftB-bot .up:hover{background:var(--gold);color:#2a1f06;border-color:transparent}
.ftB-bot .up svg{width:18px;height:18px}

@media(max-width:1000px){
  .ftB-nl .in{grid-template-columns:1fr;gap:26px}
  .ftB-main{grid-template-columns:1fr 1fr;gap:34px 28px}
  .ftB .idn{grid-column:span 2}
}
@media(max-width:760px){
  .ftB{margin-top:80px}
  .ftB-nl{padding:38px 0}
  .ftB-nl p{max-width:none}
  .ftB-nl form{flex-direction:column}
  .ftB-nl .fld{min-width:0;width:100%}
  .ftB-nl button{width:100%;justify-content:center}
  .ftB-main{grid-template-columns:1fr 1fr;gap:30px 20px;padding:38px 0 32px}
  .ftB .idn{grid-column:span 2;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
  .ftB .idn p{max-width:none}
  .ftB .tri{flex-wrap:wrap}
  .ftB h4{margin-bottom:14px}
  .ftB ul{gap:11px}
  .ftB ul a{font-size:14px}
  .ftB-bot{flex-direction:column;text-align:center;gap:16px;padding-top:20px}
  .ftB-bot .legal{justify-content:center;gap:14px}
  .ftB-bot .soc{margin-left:0;justify-content:center}
  .ftB .bigseal{right:-120px;bottom:-140px;width:280px;height:280px}
}
@media (prefers-reduced-motion:reduce){
  .ftB ul a:hover,.ftB-bot .soc a:hover,.ftB-nl button:hover{transform:none}
}