/* ══════════════════════════════════════════════════════════════════════════
   OBA ACADEMY : promotion de l'atelier gratuit
   Bandeau d'annonce (.oba-bn) + pastille de relais (.oba-bnp) + carte d'invitation (.oba-inv).

   Chargé par un <link> dans les pages qui ont le bandeau, et par /js/atelier-promo.js
   pour la carte sur les autres pages. Toutes les couleurs lisent les variables du site
   avec une valeur de repli. Tout est préfixé : aucune règle ne vise un sélecteur existant.
   ══════════════════════════════════════════════════════════════════════════ */


/* ═══ 1. LE BANDEAU D'ANNONCE ═══
   Premier élément du <body>, DANS LE FLUX (volontairement non collant : l'en-tête
   du site est déjà collant en haut, deux éléments collants se recouvriraient).
   La pastille prend le relais une fois le bandeau sorti de l'écran. */

.oba-bn{
  position:relative;
  height:52px;
  overflow:hidden;
  background:var(--navy,#1A243C);
  color:#fff;
  transition:height .34s cubic-bezier(.4,0,.2,1);
}
.oba-bn.is-off{height:0}

.oba-bn__in{
  max-width:var(--wrap,1360px);
  margin:0 auto;
  padding:0 26px;
  height:52px;
  display:flex;
  align-items:center;
  gap:20px;
}

.oba-bn__tag{display:flex;align-items:center;gap:10px;flex:none}
.oba-bn__tag i{width:3px;height:19px;background:var(--gold,#D4AC4A);display:block;flex:none}
.oba-bn__tag span{
  font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
  font-size:.65rem;font-weight:800;letter-spacing:.15em;
  color:var(--gold,#D4AC4A);white-space:nowrap;
}

.oba-bn__t{
  font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
  font-size:.95rem;font-weight:700;color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Titre court, affiché seulement sous 620px (une phrase plus courte mais entière,
   plutôt qu'un titre tronqué par des points de suspension). */
.oba-bn__tm{display:none}

.oba-bn__d{
  font-size:.84rem;color:rgba(255,255,255,.62);white-space:nowrap;
  padding-left:20px;border-left:1px solid rgba(255,255,255,.18);flex:none;
}
.oba-bn__d::first-letter{text-transform:uppercase}   /* le dashboard envoie « jeudi » en minuscule */

.oba-bn__cd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  color:var(--gold,#D4AC4A);background:rgba(212,172,74,.13);
  padding:5px 10px;flex:none;white-space:nowrap;font-variant-numeric:tabular-nums;
}

.oba-bn__sp{flex:1 1 auto;min-width:8px}

.oba-bn__go{
  flex:none;
  font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
  font-size:.82rem;font-weight:700;
  color:var(--navy,#1A243C);background:var(--gold,#D4AC4A);
  padding:9px 16px;text-decoration:none;white-space:nowrap;
  transition:background .2s ease;
}
.oba-bn__go:hover,.oba-bn__go:focus-visible{background:#E4BF60}

.oba-bn__x{
  flex:none;background:none;border:0;color:rgba(255,255,255,.45);
  font-size:1.1rem;line-height:1;cursor:pointer;padding:6px;
  transition:color .2s ease;
}
.oba-bn__x:hover,.oba-bn__x:focus-visible{color:#fff}

/* ─── Pastille de relais ─── */
.oba-bnp{
  position:fixed;right:22px;bottom:22px;z-index:39;
  display:flex;align-items:center;gap:11px;
  background:var(--navy,#1A243C);color:#fff;text-decoration:none;
  padding:12px 17px;
  box-shadow:0 18px 40px -16px rgba(26,36,60,.75);
  opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;
  transition:opacity .34s ease,transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s;
}
.oba-bnp.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.oba-bnp i{width:7px;height:7px;background:var(--gold,#D4AC4A);display:block;flex:none;border-radius:50%}
.oba-bnp span{font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;font-size:.84rem;font-weight:700;letter-spacing:-.01em}
.oba-bnp em{
  font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.73rem;color:var(--gold,#D4AC4A);letter-spacing:.05em;font-variant-numeric:tabular-nums;
}

/* Dégressif : la date tombe en premier, puis le décompte. Le titre et le bouton restent. */
@media(max-width:1100px){ .oba-bn__d{display:none} }
@media(max-width:860px){
  .oba-bn,.oba-bn__in{height:48px}
  .oba-bn.is-off{height:0}
  .oba-bn__cd{display:none}
  .oba-bn__in{padding:0 14px;gap:12px}
  .oba-bn__t{font-size:.84rem}
  .oba-bn__go{padding:8px 12px;font-size:.76rem}
}
@media(max-width:620px){
  .oba-bn__tag span{display:none}
  .oba-bn__in{gap:10px}
  .oba-bn__x{padding:6px 2px}
  .oba-bn__t{display:none}
  .oba-bn__tm{
    display:block;
    font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
    font-size:.82rem;font-weight:700;color:#fff;letter-spacing:-.01em;
    white-space:nowrap;
  }
}
@media(max-width:560px){
  .oba-bnp{right:14px;bottom:14px;padding:11px 14px;gap:9px}
  .oba-bnp span{font-size:.79rem}
}

/* Le menu mobile du site s'ouvre à 88px du haut (sous l'en-tête collé en haut).
   Tant que le bandeau est visible, l'en-tête est plus bas : le script mesure la partie
   visible du bandeau dans --oba-bn-h et le menu se décale d'autant. */
@media(max-width:900px){
  html.oba-bn-vis .mobile-menu{inset:calc(88px + var(--oba-bn-h,0px)) 0 0 0!important}
}


/* ═══ 2. LA CARTE D'INVITATION ═══ */

.oba-inv{
  position:fixed;right:24px;bottom:24px;z-index:70;
  width:352px;max-width:calc(100vw - 32px);
  background:var(--cream,#F7F4ED);
  box-shadow:0 30px 70px -26px rgba(26,36,60,.62);
  opacity:0;transform:translateY(22px);pointer-events:none;visibility:hidden;
  transition:opacity .45s ease,transform .45s cubic-bezier(.33,1,.68,1),visibility 0s linear .45s;
}
.oba-inv.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}

.oba-inv__hd{background:var(--navy,#1A243C);padding:18px 22px 17px;position:relative}
.oba-inv__k{
  font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
  font-size:.63rem;font-weight:800;letter-spacing:.16em;
  color:var(--gold,#D4AC4A);margin:0 0 9px;
}
.oba-inv__hd h3{
  font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
  font-size:1.22rem;font-weight:700;line-height:1.18;
  color:#fff;letter-spacing:-.02em;margin:0;
}
.oba-inv__x{
  position:absolute;right:9px;top:8px;
  background:none;border:0;color:rgba(255,255,255,.4);
  font-size:1.05rem;line-height:1;cursor:pointer;padding:7px;
  transition:color .2s ease;
}
.oba-inv__x:hover,.oba-inv__x:focus-visible{color:#fff}

.oba-inv__bd{padding:18px 22px 20px}
.oba-inv__rows{
  display:grid;grid-template-columns:auto 1fr;gap:9px 16px;
  font-size:.85rem;align-items:baseline;margin:0;
}
.oba-inv__rows dt{
  font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
  font-size:.62rem;font-weight:800;letter-spacing:.13em;
  color:var(--ink-pale-3,#8892A6);padding-top:2px;
}
.oba-inv__rows dd{color:var(--ink-2,#55607A);margin:0}
.oba-inv__rows dd b{color:var(--navy,#1A243C);font-weight:600}

.oba-inv__cd{
  margin:16px 0 0;padding-top:14px;
  border-top:1px dashed var(--line,rgba(26,36,60,.14));
  display:flex;align-items:baseline;gap:9px;
}
.oba-inv__cd b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.02rem;font-weight:700;color:var(--gold-darker,#6B4F0D);
  letter-spacing:.03em;font-variant-numeric:tabular-nums;
}
.oba-inv__cd span{font-size:.78rem;color:var(--ink-pale-3,#8892A6)}

.oba-inv__ft{display:flex;align-items:center;gap:16px;margin-top:17px}
.oba-inv__go{
  flex:1 1 auto;text-align:center;
  background:var(--navy,#1A243C);color:#fff;text-decoration:none;
  font-family:var(--font-display,'Bricolage Grotesque'),sans-serif;
  font-weight:700;font-size:.88rem;padding:13px 16px;
  transition:background .2s ease;
}
.oba-inv__go:hover,.oba-inv__go:focus-visible{background:var(--navy-panel,#232F4C)}
.oba-inv__no{
  flex:none;background:none;border:0;
  font-family:var(--font-body,'Chivo'),sans-serif;font-size:.82rem;
  color:var(--ink-pale-3,#8892A6);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.oba-inv__no:hover,.oba-inv__no:focus-visible{color:var(--ink-2,#55607A)}

@media(max-width:560px){
  .oba-inv{left:16px;right:16px;bottom:16px;width:auto}
}


/* ═══ 3. COHABITATION ═══
   La pastille et la carte occupent le même coin : la pastille s'efface tant que la
   carte est ouverte (le script pose la classe sur <body>). */
body.oba-inv-ouverte .oba-bnp{
  opacity:0;transform:translateY(14px);pointer-events:none;visibility:hidden;
}

/* Masqué par le script (atelier terminé, complet ou fermé) */
.oba-bn[hidden],.oba-bnp[hidden],.oba-inv[hidden]{display:none!important}


/* ═══ 4. ACCESSIBILITÉ ═══ */
@media(prefers-reduced-motion:reduce){
  .oba-bn,.oba-bnp,.oba-inv{transition:none!important}
}
.oba-bn__go:focus-visible,.oba-bnp:focus-visible,
.oba-inv__go:focus-visible,.oba-inv__no:focus-visible,
.oba-bn__x:focus-visible,.oba-inv__x:focus-visible{
  outline:2px solid var(--gold,#D4AC4A);outline-offset:3px;
}