/* =====================================================================
   HolaNinos · LA BANDE « ANNIVERSAIRE » ET SA FENETRE — 16/09/2026
   Voir l'en-tete de `fiesta.js` pour la demande et les regles.
   Charge APRES opciones.css : `#socioBand` y garde sa regle d'affichage
   (accueil seulement), ce fichier ne dessine que ce qu'il y a dedans.

   CONTRASTES, calcules ici (WCAG 2.1) :
   - titre #3B1D6E sur le fond le plus clair (#FFF7FB)  : 13,4:1
   - sous-titre #5E4A86 sur #F6EEFF                      :  7,0:1
   - bouton : blanc sur #7C4DE0 -> #5B32B8               :  5,3:1 au plus clair
   ===================================================================== */

#socioBand{padding:0}
.fi-band{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;
  width:100%;max-width:1180px;margin:0 auto;
  min-height:68px;padding:8px 14px 8px 8px;
  border:0;border-bottom:1px solid var(--mg-borde, #E6DAF7);
  font:inherit;text-align:left;cursor:pointer;color:#3B1D6E;
  background:linear-gradient(110deg,#FFF7FB 0%,#F6EEFF 45%,#FFF3E3 100%);
  background-size:220% 100%;
  animation:fi-fond 9s ease-in-out infinite alternate;
  -webkit-tap-highlight-color:transparent;
}
/* Des confettis qui passent derriere le texte, en fond de bande. */
.fi-band::before,.fi-band::after{
  content:"";position:absolute;inset:-40px 0 0 0;pointer-events:none;
  background-image:
    radial-gradient(circle,#F29BC1 1.6px,transparent 2px),
    radial-gradient(circle,#A47CEC 1.4px,transparent 1.8px),
    radial-gradient(circle,#FFB74D 1.5px,transparent 1.9px);
  background-size:90px 40px,130px 40px,70px 40px;
  background-position:10px 0,55px 14px,35px 26px;
  opacity:.55;animation:fi-pluie 6s linear infinite;
}
.fi-band::after{background-size:110px 40px,80px 40px,150px 40px;opacity:.35;animation-duration:9s}
.fi-band>*{position:relative;z-index:1}
.fi-band:focus-visible{outline:3px solid #7C4DE0;outline-offset:-3px}

.fi-art{flex:none;width:74px;height:52px;display:block}
.fi-svg{width:100%;height:100%;display:block;overflow:visible}
.fi-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fi-txt b{font-family:var(--f-titre, inherit);font-weight:600;font-size:14.5px;line-height:1.25;color:#3B1D6E}
.fi-txt i{font-style:normal;font-size:12px;line-height:1.3;color:#5E4A86}
.fi-cta{
  flex:none;padding:9px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#7C4DE0,#5B32B8);
  box-shadow:0 6px 16px -6px rgba(91,50,184,.55);
  animation:fi-pouls 2.4s ease-in-out infinite;
}
.fi-band:hover .fi-cta{filter:brightness(1.08)}
@media(max-width:420px){
  /* Sur un telephone, le sous-titre faisait monter la bande a ~130 px
     (quatre a cinq lignes dans ~150 px de large). Il tombe : la promesse
     entiere est redite en tete de la fenetre. Reste ~70 px, le double de
     l'ancienne bande partenaire, comme demande. */
  .fi-txt i{display:none}
  .fi-band{gap:8px;padding-right:10px}
  .fi-art{width:60px;height:44px}
  .fi-txt b{font-size:13.5px}
  .fi-txt i{font-size:11.5px}
  .fi-cta{padding:8px 11px;font-size:12.5px}
}

/* Les pieces du dessin, animees separement. */
.fi-ballon{transform-box:fill-box;transform-origin:50% 100%}
.fi-b1{animation:fi-flotte 3.2s ease-in-out infinite}
.fi-b2{animation:fi-flotte 3.8s ease-in-out -1.2s infinite}
.fi-b3{animation:fi-flotte 2.9s ease-in-out -.6s infinite}
.fi-flamme{transform-box:fill-box;transform-origin:50% 100%;animation:fi-flamme .9s ease-in-out infinite alternate}
.fi-c{transform-box:fill-box;animation:fi-tombe 2.8s linear infinite}
.fi-c2{animation-delay:-.7s}.fi-c3{animation-delay:-1.5s}.fi-c4{animation-delay:-2.1s}.fi-c5{animation-delay:-1.1s}

@keyframes fi-fond{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes fi-pluie{from{transform:translateY(0)}to{transform:translateY(40px)}}
@keyframes fi-flotte{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes fi-flamme{from{transform:scale(1,1)}to{transform:scale(.8,1.15) translateY(-1px)}}
@keyframes fi-tombe{0%{transform:translateY(-6px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(80px) rotate(260deg);opacity:0}}
@keyframes fi-pouls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ------------------------------------------------------------ la fenetre */
body.fi-bloque{overflow:hidden}
.fi-voile{
  position:fixed;inset:0;z-index:10000;display:none;
  align-items:center;justify-content:center;padding:14px;
  background:rgba(59,29,110,.38);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.fi-voile.on{display:flex}
.fi-boite{
  position:relative;width:100%;max-width:440px;max-height:calc(100dvh - 28px);overflow:auto;
  padding:22px 18px 16px;border-radius:24px;color:#3B1D6E;
  background:linear-gradient(180deg,#FFF7FB,#FFFFFF 38%);
  box-shadow:0 30px 60px -20px rgba(59,29,110,.45);
  animation:fi-monte .28s ease-out;
}
.fi-x{
  position:absolute;top:8px;right:8px;width:38px;height:38px;border:0;border-radius:50%;
  background:transparent;color:#5E4A86;font-size:26px;line-height:1;cursor:pointer;
}
.fi-x:hover{background:#F2EAFE}
.fi-tete{text-align:center;padding:0 22px}
.fi-badge{
  display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg,#7C4DE0,#5B32B8);
}
.fi-promesa{margin:8px 0 10px;font-size:13.5px;line-height:1.4;color:#5E4A86}
.fi-points{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.fi-points span{width:22px;height:5px;border-radius:3px;background:#E6DAF7;transition:background .2s}
.fi-points span.on{background:#7C4DE0}
.fi-corps{padding:12px 2px 4px;text-align:center}
.fi-entre{animation:fi-entre .3s ease-out}
.fi-q{margin:4px 0 14px;font-family:var(--f-titre, inherit);font-size:20px;line-height:1.25;font-weight:600;color:#3B1D6E}
.fi-q2{margin:16px 0 8px;font-size:14px;font-weight:600;color:#3B1D6E}
.fi-champ{
  width:100%;box-sizing:border-box;padding:13px 14px;border-radius:14px;
  border:1.5px solid #D9C9F5;background:#fff;color:#3B1D6E;font:inherit;font-size:16px;
}
.fi-champ:focus{outline:none;border-color:#7C4DE0;box-shadow:0 0 0 3px rgba(124,77,224,.18)}
.fi-note{margin:8px 0 0;font-size:12px;color:#6B5A8E}
.fi-puces{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fi-ages .fi-puces{display:grid;grid-template-columns:repeat(5,1fr)}
.fi-puce{
  min-height:44px;padding:8px 13px;border-radius:14px;border:1.5px solid #E6DAF7;
  background:#fff;color:#3B1D6E;font:inherit;font-size:14.5px;font-weight:500;cursor:pointer;
  box-shadow:0 2px 6px -3px rgba(59,29,110,.18);
  transition:transform .12s,border-color .12s,background .12s;
}
.fi-puce:hover{border-color:#A47CEC}
.fi-puce:active{transform:scale(.96)}
.fi-puce.on{border-color:#7C4DE0;background:#F2EAFE;color:#3B1D6E;font-weight:600}
.fi-rgpd{display:flex;gap:9px;align-items:flex-start;margin-top:14px;text-align:left;font-size:12.5px;line-height:1.4;color:#5E4A86;cursor:pointer}
.fi-rgpd input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:#7C4DE0}
.fi-rgpd a{color:#5B32B8}
.fi-erreur{min-height:18px;margin:6px 0 0;text-align:center;font-size:13px;font-weight:500;color:#B3261E}
.fi-pied{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.fi-go{
  flex:1;max-width:240px;margin-left:auto;padding:13px 18px;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,#7C4DE0,#5B32B8);box-shadow:0 8px 18px -8px rgba(91,50,184,.6);
}
.fi-retour{padding:12px 10px;border:0;background:transparent;color:#5B32B8;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.fi-fin{text-align:center}
.fi-fin-art{width:140px;height:98px;margin:0 auto 6px}
.fi-fin p{margin:0 0 12px;font-size:14px;line-height:1.45;color:#5E4A86}
.fi-recap{list-style:none;margin:0;padding:10px 12px;border-radius:14px;background:#F7F1FF;text-align:left;font-size:13.5px;line-height:1.7}
.fi-fin + .fi-erreur + .fi-pied .fi-go{margin:0 auto}

@keyframes fi-monte{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fi-entre{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* Le telephone demande moins de mouvement : tout s'arrete, rien ne
   disparait. Ce Mac a ce reglage actif (voir la memoire du projet). */
@media (prefers-reduced-motion: reduce){
  .fi-band,.fi-band::before,.fi-band::after,.fi-cta,.fi-ballon,.fi-flamme,.fi-c,.fi-boite,.fi-entre{animation:none}
  .fi-c{opacity:1}
}

/* =====================================================================
   LA BANDE VA JUSQU'AUX BORDS SUR ORDINATEUR — 18/09/2026
   ---------------------------------------------------------------------
   Elle portait `max-width:1180px`. Posee juste au-dessus d'un heros qui
   touche desormais les deux bords de l'ecran, elle s'arretait 130 px
   avant eux de chaque cote : vu a l'ecran a 1440 px, ca faisait une
   MARCHE en haut de la page, le genre de detail qui donne l'impression
   que deux morceaux de site ont ete colles.
   Elle s'etire donc, et reprend a l'interieur la marge exacte de la
   colonne du site : `50vw` moins la demi-colonne, moins les 24 px de
   `.wrap`. Les deux nombres (566 et 596) sont la demi-colonne moins 24 :
   changer la largeur du site oblige a les changer ici.
   LA REGLE EST DANS CE FICHIER ET PAS DANS `opciones.css`, parce que
   `fiesta.css` est chargee APRES lui dans `index.html` : a specificite
   egale, c'est celle-ci qui gagne. Ecrite la-bas, elle ne s'appliquait
   pas — mesure a l'ecran avant de la deplacer.
   ===================================================================== */
@media(min-width:1024px){
  .fi-band{
    max-width:none;
    padding-left:max(8px,calc(50vw - 566px));
    padding-right:max(14px,calc(50vw - 566px));
  }
}
@media(min-width:1360px){
  .fi-band{
    padding-left:max(8px,calc(50vw - 596px));
    padding-right:max(14px,calc(50vw - 596px));
  }
}