/* =====================================================================
   HolaNiños · LA SECTION « 3 ETAPES » DE L'ACCUEIL — 10/10/2026
   Elle remplace les deux bandes empilees (anniversaire + amis) par UNE
   section et UN bouton. Violet de la marque. N'apparait que sur
   l'accueil. Le HTML est dans index.html, la logique dans etapes.js.
   ===================================================================== */
#etapesBand{display:none}
body[data-view="inicio"] #etapesBand{display:block}
.et{
  background:linear-gradient(110deg,#F6EEFF 0%,#EFE6FF 60%,#F6EEFF 100%);
  border-bottom:1px solid var(--mg-borde,#E6DAF7);color:#3B1D6E;
}
.et-in{
  max-width:1180px;margin:0 auto;padding:16px 16px 18px;display:grid;gap:12px;
  grid-template-areas:"tete" "liste" "cta";
}
.et-tete{grid-area:tete}
.et-t{font-family:var(--f-titre,inherit);font-weight:700;font-size:19px;line-height:1.25;margin:0;color:#3B1D6E}
.et-s{margin:3px 0 0;font-size:14px;line-height:1.35;color:#4B4560}
.et-l{grid-area:liste;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.et-l li{
  display:flex;gap:12px;align-items:flex-start;
  background:#fff;border:1px solid #E6DAF7;border-radius:16px;padding:10px 12px;
}
.et-n{
  flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:15px;color:#fff;
  background:linear-gradient(150deg,#8A62E8,#5B32B8 70%);
}
.et-l b{display:block;font-size:15px;line-height:1.3;color:#3B1D6E}
.et-l small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:#4B4560}
.et-lien{
  display:inline-block;margin-top:4px;padding:6px 0;background:none;border:0;
  font:inherit;font-size:13.5px;font-weight:600;color:#5B32B8;
  text-decoration:underline;cursor:pointer;
}
.et-cta{
  grid-area:cta;width:100%;padding:14px 18px;border:0;border-radius:999px;
  font:inherit;font-size:16px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#7C4DE0,#5B32B8);
  box-shadow:0 8px 20px -8px rgba(91,50,184,.6);
  -webkit-tap-highlight-color:transparent;
}
.et-cta:hover{filter:brightness(1.08)}
.et-cta:focus-visible,.et-lien:focus-visible{outline:3px solid #7C4DE0;outline-offset:2px}
@media(max-width:420px){
  .et-in{padding:12px 12px 14px;gap:10px}
  .et-t{font-size:17px}
  .et-s{font-size:13px}
  .et-l li{padding:8px 10px;gap:10px}
  .et-n{width:26px;height:26px;font-size:13px}
  .et-l b{font-size:14px}
  .et-l small{font-size:12.5px}
}
@media(min-width:860px){
  .et-in{
    padding:20px 24px 22px;gap:14px 24px;align-items:center;
    grid-template-columns:1fr auto;
    grid-template-areas:"tete cta" "liste liste";
  }
  .et-t{font-size:24px}
  .et-cta{width:auto;padding:15px 30px;font-size:17px}
  .et-l{grid-template-columns:repeat(3,1fr);gap:14px}
  .et-l li{padding:14px;border-radius:18px}
}
@media (prefers-reduced-motion:no-preference){
  .et-cta{transition:filter .15s,transform .15s}
  .et-cta:active{transform:scale(.98)}
}

/* 10/10/2026 : sur telephone, le grand titre « Tout ce qu'il y a pour les
   enfants... », son paragraphe et ses quatre points sont retires (demande de
   Sullivan) : la section 3 etapes et « On fait quoi ? » suffisent. */
@media(max-width:767px){
  .ini-hero{display:none !important}
}

/* 10/10/2026 : version compacte sur telephone (« c'est trop haut »). Le long
   sous-titre et les descriptions passent en ordinateur seulement ; sur
   telephone : titre, badge gratuit, trois lignes, bouton. */
.et-gr{display:none}
@media(max-width:767px){
  .et-in{padding:10px 12px 12px;gap:8px}
  .et-t{font-size:16.5px}
  .et-s,.et-l small{display:none}
  .et-gr{
    display:inline-block;margin:4px 0 0;padding:3px 10px;border-radius:999px;
    font-size:12.5px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,#7C4DE0,#5B32B8);
  }
  .et-l{gap:6px}
  .et-l li{align-items:center;padding:6px 10px;gap:10px;border-radius:14px}
  .et-n{width:24px;height:24px;font-size:12.5px}
  .et-l b{font-size:14px}
  .et-lien{margin-top:0;padding:2px 0;font-size:12.5px}
  .et-cta{padding:11px 16px;font-size:15px}
}

/* 10/10/2026 : bouton « magic » anime (degrade violet, rose qui coule + halo)
   et version telephone centree : trois cartes en rangee, lien lieux dessous,
   et plus de grand vide entre la section et « On fait quoi ? ». */
.et-lien2{display:none}
.et-cta{
  background:linear-gradient(110deg,#6D3FD8 0%,#B14BE0 28%,#FF7AB6 50%,#B14BE0 72%,#6D3FD8 100%);
  background-size:260% 100%;background-position:0% 50%;
  animation:et-flux 4.5s ease-in-out infinite alternate,et-halo 2.4s ease-in-out infinite;
}
@keyframes et-flux{to{background-position:100% 50%}}
@keyframes et-halo{
  0%,100%{box-shadow:0 8px 20px -8px rgba(124,77,224,.65)}
  50%{box-shadow:0 10px 30px -6px rgba(255,122,182,.8)}
}
@media (prefers-reduced-motion:reduce){.et-cta{animation:none}}
@media(max-width:767px){
  .et{background:linear-gradient(180deg,#F3E9FF 0%,#FBF7FF 100%)}
  .et-in{text-align:center;justify-items:center;padding:14px 12px 12px;gap:10px}
  .et-tete{text-align:center}
  .et-t{font-size:18px;letter-spacing:-.01em}
  .et-gr{margin:6px auto 0;padding:4px 12px}
  .et-l{width:100%;grid-template-columns:repeat(3,1fr);gap:8px}
  .et-l li{
    flex-direction:column;align-items:center;text-align:center;gap:6px;
    padding:10px 6px 9px;border-radius:18px;border-color:#EADFFB;
    box-shadow:0 8px 18px -12px rgba(91,50,184,.45);
  }
  .et-l li > div{display:block}
  .et-n{width:28px;height:28px;font-size:13px}
  .et-l b{font-size:12.5px;line-height:1.25}
  .et-l .et-lien{display:none}
  .et-lien2{display:inline-block;margin:-2px auto 0;padding:2px 0;font-size:12.5px}
  .et-cta{padding:13px 16px;font-size:16px;letter-spacing:.01em}
  .ini-centro{min-height:0 !important;justify-content:flex-start !important}
  .mot-cabecera{padding-top:0}
  #v-inicio{padding-top:2px}
}

/* =====================================================================
   L'ASSISTANT « CREER MON EVENEMENT » (etapes.js) ET « MIS EVENTOS »
   (eventos.js) — 10/10/2026. Violet de la marque, feuille qui monte du bas
   sur telephone, carte centree sur ordinateur.
   ===================================================================== */
body.ew-abierto{overflow:hidden}
.ew-velo{position:fixed;inset:0;z-index:9500;display:flex;align-items:flex-end;justify-content:center;background:rgba(30,20,50,.55)}
.ew-hoja{
  position:relative;box-sizing:border-box;width:100%;max-width:480px;max-height:94vh;overflow:auto;
  background:#fff;border-radius:24px 24px 0 0;padding:20px 16px 14px;color:#3B1D6E;
  animation:ew-sube .22s ease-out;
}
@keyframes ew-sube{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:600px){.ew-velo{align-items:center;padding:16px}.ew-hoja{border-radius:24px;padding:24px 22px 16px}}
.ew-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:#F4F0FD;color:#5B32B8;font-size:22px;line-height:1;cursor:pointer}
.ew-puntos{display:flex;gap:6px;justify-content:center;margin:2px 0 12px}
.ew-puntos span{width:26px;height:6px;border-radius:99px;background:#E6DAF7}
.ew-puntos span.on{background:linear-gradient(90deg,#7C4DE0,#C04BD6)}
.ew-q{margin:0 0 4px;font-size:20px;line-height:1.25;color:#3B1D6E;text-align:center}
.ew-q2{margin:14px 0 6px;font-size:14px;color:#5B32B8}
.ew-i{margin:0 0 10px;font-size:14px;line-height:1.4;color:#4B4560;text-align:center}
.ew-aviso{color:#8A2D5C}
.ew-puces{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.ew-chip{padding:8px 12px;border:1.5px solid #DCCFF6;border-radius:999px;background:#fff;color:#3B1D6E;font:inherit;font-size:14px;cursor:pointer}
.ew-chip.on{background:linear-gradient(135deg,#7C4DE0,#5B32B8);border-color:transparent;color:#fff}
.ew-champ{display:block;margin:10px 0}
.ew-champ>span{display:block;margin:0 0 4px;font-size:13px;font-weight:600;color:#5B32B8}
.ew-champ i{font-weight:400;font-style:normal;color:#6b6280}
.ew-champ input{width:100%;box-sizing:border-box;padding:11px 12px;border:1.5px solid #DCCFF6;border-radius:12px;font:inherit;font-size:16px;color:#2A1650;background:#fff}
.ew-champ input:focus{outline:3px solid #CDB8F7;border-color:#7C4DE0}
.ew-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ew-opts{display:grid;gap:8px;margin:10px 0}
.ew-opt{padding:14px;border:1.5px solid #DCCFF6;border-radius:16px;background:#fff;font:inherit;font-size:15px;font-weight:600;color:#3B1D6E;cursor:pointer}
.ew-opt.on{border-color:#7C4DE0;background:#F4F0FD;box-shadow:0 0 0 3px #E3D6FA}
.ew-case{display:flex;gap:8px;align-items:flex-start;margin:12px 0;font-size:13px;line-height:1.4;color:#4B4560}
.ew-case input{margin-top:3px;width:18px;height:18px;flex:none}
.ew-case a{color:#5B32B8}
.ew-onglets{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:8px 0;padding:4px;background:#F4F0FD;border-radius:14px}
.ew-onglets button{padding:9px 6px;border:0;border-radius:11px;background:none;font:inherit;font-size:14px;font-weight:600;color:#5B32B8;cursor:pointer}
.ew-onglets button.on{background:#fff;box-shadow:0 2px 8px -3px rgba(91,50,184,.4)}
.ew-conn{margin:8px 0;padding:12px;border-radius:14px;background:#EAF8EF;color:#1F6B3D;font-weight:600;text-align:center}
.ew-err{min-height:18px;margin:6px 0 0;font-size:13px;color:#B3261E;text-align:center}
.ew-pie{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:6px}
.ew-go,.ew-sec{padding:13px 20px;border:0;border-radius:999px;font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.ew-go{flex:1;color:#fff;background:linear-gradient(110deg,#6D3FD8 0%,#B14BE0 40%,#FF7AB6 60%,#6D3FD8 100%);background-size:240% 100%;animation:et-flux 4.5s ease-in-out infinite alternate}
.ew-go:disabled{opacity:.7;animation:none}
.ew-sec{background:#F4F0FD;color:#5B32B8}
.ew-fin{text-align:center}
.ew-fin-ico{font-size:44px;line-height:1.1}
.ew-acciones{display:grid;gap:8px;margin:12px 0 4px}
@media (prefers-reduced-motion:reduce){.ew-hoja,.ew-go{animation:none}}

/* mis eventos (tableau de bord) */
.ev-nuevo{margin:0 0 10px}
.ev-lista{display:grid;gap:12px}
.ev-card{background:#fff;border:1px solid #E6DAF7;border-radius:18px;padding:14px;box-shadow:0 8px 20px -14px rgba(91,50,184,.5)}
.ev-top{display:flex;gap:12px;align-items:flex-start}
.ev-ico{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;background:#F4F0FD}
.ev-txt h3{margin:0 0 2px;font-size:17px;color:#3B1D6E}
.ev-meta{margin:2px 0;font-size:13.5px;color:#4B4560}
.ev-van{color:#5B32B8;font-weight:600}
.ev-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ev-btns button{width:auto}
.ev-del{color:#8A2D5C}
.ev-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ev-form{background:#fff;border:1px solid #CDB8F7;border-radius:18px;padding:14px;display:grid;gap:10px}
.ev-form label>span{display:block;margin:0 0 3px;font-size:13px;font-weight:600;color:#5B32B8}
.ev-form input,.ev-form select{width:100%;box-sizing:border-box;padding:10px;border:1.5px solid #DCCFF6;border-radius:12px;font:inherit;font-size:16px;background:#fff}
.ev-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* =====================================================================
   LE RESEAU (reseau.js, invitacion.js, eventos.js) — 10/10/2026
   Amis, profil, volet « Inviter », page d'invitation. Violet de la marque.
   ===================================================================== */
.rs-av{display:inline-flex;flex:none;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;font-size:22px;line-height:1}
.rs-av-g{display:flex;width:84px;height:84px;font-size:44px;margin:0 auto 8px}
.rs-ligne{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #EEE9FA}
.rs-ligne:last-child{border-bottom:0}
.rs-qui{flex:1;min-width:0}
.rs-qui b{display:block;color:#3B1D6E}
.rs-qui small{display:block;color:#6b6280;font-size:13px}
.rs-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.rs-acts button{width:auto;padding:8px 12px;font-size:14px}
.rs-etat{font-size:13px;color:#5B32B8;font-weight:600}
.rs-etat.ok{color:#1F6B3D}
.rs-quitar{background:none;border:0;padding:4px;color:#8A2D5C;text-decoration:underline;cursor:pointer;font:inherit;font-size:13px}
.rs-wa{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;padding:14px;margin:0 0 8px;border:0;border-radius:999px;background:#25D366;color:#073B1B;font:inherit;font-size:16px;font-weight:800;cursor:pointer;box-sizing:border-box}
.rs-wa:hover{filter:brightness(1.05)}
.rs-bus{display:flex;gap:8px;margin:10px 0 4px}
.rs-bus input{flex:1;min-width:0;padding:11px 12px;border:1.5px solid #DCCFF6;border-radius:12px;font:inherit;font-size:16px}
.rs-bus button{width:auto}
.rs-grid{display:flex;flex-wrap:wrap;gap:6px}
.rs-op{width:44px;height:44px;padding:0;border:2px solid #E6DAF7;border-radius:12px;background:#fff;font-size:22px;line-height:1;cursor:pointer}
.rs-op.on{border-color:#7C4DE0;box-shadow:0 0 0 3px #E3D6FA}
.rs-sw{border-radius:50%}
.rs-prev{margin:0 0 6px}
.rs-perfil{text-align:center}
.rs-bio{margin:6px 0;font-size:15px;color:#3B1D6E}
.rs-ev{display:block;width:100%;box-sizing:border-box;text-align:left;margin:6px 0;padding:10px 12px;border:1px solid #E6DAF7;border-radius:14px;background:#fff;color:#3B1D6E}
.rs-ev b{display:block}
.rs-ev small{color:#6b6280}
.rs-ev-b{font:inherit;cursor:pointer}
.rs-ev-b:hover{border-color:#7C4DE0}
.ew-champ textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1.5px solid #DCCFF6;border-radius:12px;font:inherit;font-size:16px;color:#2A1650;resize:vertical}
.ev-h2{margin:24px 0 8px;font-size:18px;color:#3B1D6E}
@keyframes rs-der{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:760px){
  .rs-drawer{justify-content:flex-end;align-items:stretch;padding:0}
  .rs-drawer .ew-hoja{max-width:420px;height:100%;max-height:100vh;border-radius:0;animation:rs-der .22s ease-out}
}

@media(max-width:480px){
  .rs-bus{flex-direction:column}
  .rs-bus button{width:100%}
}

/* =====================================================================
   « MON ESPACE » : deux portes 50 / 50 (acceso.js) — 10/10/2026
   ===================================================================== */
#v-acceso .pagehead{padding-bottom:4px}
#v-acceso .pagehead p{display:none}
#v-acceso.ac3-form .pagehead{display:none}
.ac3-portes{display:grid;grid-template-columns:1fr;gap:12px;max-width:1100px;margin:0 auto;padding:0 12px 12px}
.ac3-porte{
  display:flex;flex-direction:column;overflow:hidden;padding:0;border:1px solid #E6DAF7;border-radius:24px;
  background:#fff;color:#3B1D6E;text-align:center;cursor:pointer;font:inherit;
  box-shadow:0 14px 30px -20px rgba(91,50,184,.55);min-height:calc((100vh - 230px) / 2);
}
.ac3-porte:hover{border-color:#7C4DE0}
.ac3-porte:focus-visible{outline:3px solid #7C4DE0;outline-offset:2px}
.ac3-img{display:block;flex:1;min-height:120px;overflow:hidden;background:#EFE6FF}
.ac3-img img,.ac3-svg{display:block;width:100%;height:100%;object-fit:cover}
.ac3-txt{display:block;padding:12px 14px 4px}
.ac3-txt b{display:block;font-size:19px;line-height:1.25}
.ac3-txt small{display:block;margin-top:2px;font-size:13.5px;color:#4B4560}
.ac3-btn{
  display:block;margin:8px 14px 14px;padding:12px;border-radius:999px;font-weight:800;font-size:16px;color:#fff;
  background:linear-gradient(135deg,#7C4DE0,#5B32B8);
}
.ac3-pro .ac3-btn{background:linear-gradient(135deg,#FF7AB6,#B14BE0)}
@media(min-width:768px){
  .ac3-portes{grid-template-columns:1fr 1fr;gap:20px;padding:8px 20px 24px}
  .ac3-porte{min-height:min(560px,calc(100vh - 260px))}
  .ac3-txt b{font-size:22px}
}
.ac3-caja{max-width:440px;margin:0 auto;padding:12px 16px 24px}
.ac3-volver{margin:0 0 6px;padding:6px 0;border:0;background:none;color:#5B32B8;font:inherit;font-weight:600;cursor:pointer}
.ac3-titulo{margin:0 0 10px;font-size:24px;color:#3B1D6E;text-align:center}
.ac3-ok{display:block;width:100%;margin-top:6px}

/* l'ecran « Ou voulez-vous entrer ? » n'a pas besoin de la bande de chiffres ni des puces de l'agenda */
body[data-view="acceso"] #proof,
body[data-view="acceso"] #modoBand,
body[data-view="acceso"] #seccionesRail,
body[data-view="acceso"] #etapesBand{display:none !important}

@media(max-width:767px){
  .ac3-porte{min-height:0}
  .ac3-img{flex:none;height:min(150px,19vh)}
}

/* 10/10/2026 : sur telephone les DEUX portes se voient d'un coup d'oeil, sans defiler
   (regle de Sullivan : eviter au maximum de defiler sur mobile). */
@media(max-width:767px){
  #v-acceso .pagehead{padding:8px 16px 4px;margin:0}
  #v-acceso .pagehead h1{margin:0;font-size:21px;line-height:1.2}
  .ac3-portes{grid-template-rows:1fr 1fr;gap:10px;padding:6px 12px 0;height:calc(100vh - 290px);height:calc(100svh - 290px);min-height:380px}
  .ac3-porte{min-height:0;height:100%;border-radius:20px}
  .ac3-img{flex:1 1 0;min-height:60px;height:auto}
  .ac3-txt{padding:8px 12px 0}
  .ac3-txt b{font-size:17px}
  .ac3-txt small{font-size:12.5px;margin-top:0}
  .ac3-btn{margin:6px 12px 10px;padding:9px;font-size:15px}
}

/* meme menage sur les ecrans « espace » : pas de chiffres ni de puces d'agenda au-dessus */
body[data-view="panelpro"] #proof, body[data-view="panelpro"] #modoBand, body[data-view="panelpro"] #seccionesRail,
body[data-view="panel"] #proof, body[data-view="panel"] #modoBand, body[data-view="panel"] #seccionesRail,
body[data-view="perfil"] #proof, body[data-view="perfil"] #modoBand, body[data-view="perfil"] #seccionesRail{display:none !important}

/* 11/10/2026 : version ordinateur plus basse (« un peu trop de hauteur »). */
@media(min-width:860px){
  .et-in{padding:10px 24px 12px;gap:8px 24px}
  .et-t{font-size:20px;line-height:1.2}
  .et-s{margin:1px 0 0;font-size:13px;line-height:1.3}
  .et-cta{padding:11px 26px;font-size:16px}
  .et-l{gap:10px}
  .et-l li{padding:8px 12px;gap:10px;border-radius:14px;align-items:flex-start}
  .et-n{width:26px;height:26px;font-size:13px}
  .et-l b{font-size:14.5px;line-height:1.25}
  .et-l small{margin-top:1px;font-size:12.5px;line-height:1.3}
  .et-lien{margin-top:1px;padding:2px 0;font-size:12.5px}
}

/* 11/10/2026 : ordinateur « innovant » : UNE ligne. Titre + une seule ligne de description,
   les 3 etapes en pastilles reliees par des fleches, le bouton a droite. */
@media(min-width:860px){
  .et-l small,.et-lien{display:none}
  .et-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .et-l{grid-template-columns:repeat(3,auto);justify-content:start;gap:8px}
  .et-l li{align-items:center;padding:6px 14px 6px 8px;border-radius:999px;gap:8px;box-shadow:0 6px 14px -10px rgba(91,50,184,.5)}
  .et-l b{white-space:nowrap;font-size:14px}
  .et-l li:not(:last-child)::after{content:"\2192";margin-left:4px;color:#B49AF0;font-weight:700}
}
@media(min-width:1100px){
  .et-in{grid-template-columns:auto 1fr auto;grid-template-areas:"tete liste cta";align-items:center;padding:12px 24px}
  .et-l{justify-content:center}
  .et-s{max-width:340px}
}

/* =====================================================================
   11/10/2026 : REFONTE DESIGN de la section « 3 etapes ». Une carte arrondie
   violet -> rose, trois pastilles de verre avec icone reliees par un trait
   pointille, et un bouton chaud (jaune -> rose) qui ressort sur le violet.
   Tout est prefixe par #etapesBand : ces regles gagnent sur les precedentes.
   ===================================================================== */
#etapesBand{padding:10px 12px 4px}
#etapesBand .et{
  position:relative;overflow:hidden;max-width:1180px;margin:0 auto;border:0;border-radius:24px;color:#fff;
  background:radial-gradient(120% 160% at 100% 0%,rgba(255,122,182,.55) 0%,rgba(255,122,182,0) 55%),
             linear-gradient(120deg,#4B2CA6 0%,#6B3FD0 55%,#9B45D8 100%);
  box-shadow:0 18px 40px -22px rgba(75,44,166,.8);
}
#etapesBand .et::before,#etapesBand .et::after{content:"";position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.07)}
#etapesBand .et::before{width:180px;height:180px;left:-60px;bottom:-90px}
#etapesBand .et::after{width:120px;height:120px;right:26%;top:-70px}
#etapesBand .et-in{position:relative;z-index:1;max-width:none;padding:16px 16px 16px;gap:12px;text-align:center;justify-items:center}
#etapesBand .et-tete{text-align:center}
#etapesBand .et-t{margin:0;font-size:19px;line-height:1.2;letter-spacing:-.01em;color:#fff}
#etapesBand .et-s{display:none;color:rgba(255,255,255,.88)}
#etapesBand .et-gr{
  display:inline-block;margin:0 0 6px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;
  color:#3B1D6E;background:linear-gradient(135deg,#FFE29A,#FFB6D6);box-shadow:none;
}
#etapesBand .et-l{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;justify-content:stretch}
#etapesBand .et-l li{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px;
  background:none;border:0;border-radius:0;box-shadow:none;text-align:center;
}
#etapesBand .et-l li + li::before{
  content:"";position:absolute;top:19px;right:calc(50% + 24px);width:calc(100% - 48px);border-top:2px dotted rgba(255,255,255,.45);
}
#etapesBand .et-l li:not(:last-child)::after{content:none}
#etapesBand .et-n{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:#fff;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.06),0 6px 14px -8px rgba(0,0,0,.5);backdrop-filter:blur(2px);
}
#etapesBand .et-n svg{width:20px;height:20px}
#etapesBand .et-l b{display:block;font-size:12.5px;line-height:1.25;font-weight:700;color:#fff;white-space:normal}
#etapesBand .et-l small,#etapesBand .et-l .et-lien{display:none}
#etapesBand .et-lien2{
  display:inline-block;margin:-4px auto 0;padding:2px 0;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);text-decoration:underline;text-underline-offset:3px;
}
#etapesBand .et-cta{
  position:relative;overflow:hidden;width:100%;padding:13px 20px;border:0;border-radius:999px;font-size:16px;font-weight:800;letter-spacing:.01em;color:#3B1D6E;
  background:linear-gradient(110deg,#FFD27A 0%,#FF9F7A 38%,#FF7AB6 62%,#FFD27A 100%);background-size:240% 100%;
  box-shadow:0 10px 24px -10px rgba(255,160,122,.9);animation:et-flux 4.5s ease-in-out infinite alternate,et-halo2 2.6s ease-in-out infinite;
}
#etapesBand .et-cta::after{content:" \2192";font-weight:800}
#etapesBand .et-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:et-shine 3.4s ease-in-out infinite;
}
@keyframes et-halo2{0%,100%{box-shadow:0 10px 24px -10px rgba(255,160,122,.9)}50%{box-shadow:0 12px 30px -8px rgba(255,122,182,1)}}
@keyframes et-shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){#etapesBand .et-cta,#etapesBand .et-cta::before{animation:none}}
@media(min-width:860px){
  #etapesBand{padding:12px 20px 4px}
  #etapesBand .et-in{
    display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"tete liste cta";align-items:center;gap:8px 28px;
    padding:14px 26px;text-align:left;justify-items:stretch;
  }
  #etapesBand .et-tete{grid-area:tete;text-align:left}
  #etapesBand .et-t{font-size:22px;white-space:nowrap}
  #etapesBand .et-gr{display:none}
  #etapesBand .et-s{display:block;margin:2px 0 0;max-width:340px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #etapesBand .et-l{grid-area:liste;grid-template-columns:repeat(3,minmax(0,150px));justify-content:center}
  #etapesBand .et-lien2{display:none}
  #etapesBand .et-cta{grid-area:cta;width:auto;padding:14px 28px;font-size:17px;white-space:nowrap}
}
@media(max-width:859px) and (min-width:421px){
  #etapesBand .et-l b{font-size:13.5px}
}

/* =====================================================================
   11/10/2026 : REFONTE DESIGN de « Ou voulez-vous entrer ? ». Deux grandes
   cartes a 50 / 50 dont l'image remplit toute la carte, un voile violet
   en bas pour le texte, un bouton qui ressort. Titre centre. Tout est
   prefixe par #v-acceso : ces regles gagnent sur les precedentes.
   ===================================================================== */
#v-acceso .pagehead{text-align:center;padding:10px 16px 2px}
#v-acceso .pagehead h1{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.015em}
#v-acceso .pagehead p{display:none}
#v-acceso .ac3-portes{max-width:1080px;margin:0 auto;padding:8px 12px 0;gap:12px}
#v-acceso .ac3-porte{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  border:0;border-radius:26px;padding:0;color:#fff;text-align:left;isolation:isolate;
  box-shadow:0 22px 44px -26px rgba(59,29,110,.85);
  transition:transform .25s ease,box-shadow .25s ease;
}
#v-acceso .ac3-porte::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(36,16,84,.95) 0%,rgba(36,16,84,.72) 34%,rgba(36,16,84,.15) 62%,rgba(36,16,84,0) 100%);
}
#v-acceso .ac3-pro::after{background:linear-gradient(to top,rgba(70,16,70,.95) 0%,rgba(70,16,70,.7) 34%,rgba(36,16,84,.2) 62%,rgba(36,16,84,0) 100%)}
#v-acceso .ac3-img{position:absolute;inset:0;z-index:0;flex:none;height:100% !important;min-height:0;background:#4B2CA6;transition:transform .5s ease}
#v-acceso .ac3-img img,#v-acceso .ac3-svg{width:100%;height:100%;object-fit:cover}
#v-acceso .ac3-txt{position:relative;z-index:2;padding:0 18px 4px}
#v-acceso .ac3-txt b{font-size:20px;line-height:1.2;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
#v-acceso .ac3-txt small{margin-top:2px;font-size:13px;color:rgba(255,255,255,.88)}
#v-acceso .ac3-btn{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;
  margin:10px 16px 16px;padding:12px;border-radius:999px;font-size:15px;font-weight:800;color:#3B1D6E;
  background:linear-gradient(110deg,#FFD27A,#FF9F7A 60%,#FF7AB6);box-shadow:0 10px 22px -10px rgba(255,160,122,.9);
}
#v-acceso .ac3-pro .ac3-btn{color:#4B2CA6;background:#fff;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
#v-acceso .ac3-btn::after{content:"\2192";font-weight:800;transition:transform .2s ease}
#v-acceso .ac3-porte:hover{transform:translateY(-4px);box-shadow:0 30px 54px -26px rgba(59,29,110,.95)}
#v-acceso .ac3-porte:hover .ac3-img{transform:scale(1.04)}
#v-acceso .ac3-porte:hover .ac3-btn::after{transform:translateX(4px)}
@media(max-width:767px){
  #v-acceso .ac3-portes{grid-template-rows:1fr 1fr;height:calc(100vh - 262px);height:calc(100svh - 262px);min-height:380px;padding:6px 12px 0}
  #v-acceso .ac3-porte{min-height:0;height:100%;border-radius:22px}
  #v-acceso .ac3-txt{padding:0 14px 2px}
  #v-acceso .ac3-txt b{font-size:18px}
  #v-acceso .ac3-txt small{font-size:12.5px}
  #v-acceso .ac3-btn{margin:8px 12px 12px;padding:10px;font-size:14.5px}
}
@media(min-width:768px){
  #v-acceso .pagehead{padding:34px 16px 6px}
  #v-acceso .pagehead h1{font-size:38px}
  #v-acceso .pagehead p{display:block;margin:6px 0 0;font-size:16px;color:#4B4560}
  #v-acceso .ac3-portes{gap:24px;padding:20px 20px 36px}
  #v-acceso .ac3-porte{height:clamp(420px,calc(100vh - 340px),560px);min-height:0;border-radius:30px}
  #v-acceso .ac3-txt{padding:0 28px 4px}
  #v-acceso .ac3-txt b{font-size:30px}
  #v-acceso .ac3-txt small{font-size:15px;margin-top:4px}
  #v-acceso .ac3-btn{margin:16px 24px 24px;padding:15px;font-size:17px}
}
@media (prefers-reduced-motion:reduce){#v-acceso .ac3-porte,#v-acceso .ac3-img{transition:none}}

/* la famille se voit en entier au-dessus du voile ; sous-titre centre */
#v-acceso .pagehead p{text-align:center;max-width:none}
#v-acceso .ac3-fam .ac3-img{background:linear-gradient(to bottom,#EFE6FF 0%,#F9DDF0 62%,#CFE9C4 62%,#CFE9C4 100%)}
#v-acceso .ac3-fam .ac3-svg{position:absolute;top:0;left:0;width:100%;height:68%}
#v-acceso .ac3-fam::after{background:linear-gradient(to top,rgba(36,16,84,.96) 0%,rgba(36,16,84,.8) 26%,rgba(36,16,84,0) 46%)}

/* =====================================================================
   11/10/2026 : FOND CONTINU de l'accueil. Le fond violet doux commence tout en
   haut (derriere l'en-tete et la carte), et le « fond vivant » du hero
   se fond dedans au lieu de commencer par un bord net. L'en-tete est
   transparent au sommet, blanc et flou au defilement.
   ===================================================================== */
body[data-view="inicio"]{
  background:linear-gradient(180deg,#EFE5FF 0px,#F5EEFF 240px,#FAF7FF 560px,#FFFFFF 960px) no-repeat,#fff;
}
body[data-view="inicio"] header{transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
body[data-view="inicio"]:not(.hn-scrolled) header{
  background-color:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
body[data-view="inicio"].hn-scrolled header{box-shadow:0 8px 24px -16px rgba(59,29,110,.45)}
body[data-view="inicio"] .hn-vivo{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 140px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 140px);
}
body[data-view="inicio"] .hero{border-bottom-color:transparent}

/* le bord net venait de #inicioFondo (le fond vivant du hero, 660 px) qui commence sous la carte :
   on le fond vers le haut. */
body[data-view="inicio"] #inicioFondo{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 60px,#000 200px) !important;
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 60px,#000 200px) !important;
}

/* « Mot de passe oublie ? » sous le champ mot de passe (assistant, acces, invitation) */
.ew-lien{display:block;margin:-4px 0 6px auto;padding:6px 0;border:0;background:none;color:#5B32B8;font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}