/* =====================================================================
   HolaNinos · LES ECRANS AJOUTES LE 26/08/2026
   ---------------------------------------------------------------------
   Tarifs, camps, anniversaires, espace commerce, plan du week-end,
   vacances, familles, tableau de bord des mairies.

   A CHARGER EN DERNIER, apres refonte.css. Ce fichier ne redefinit
   AUCUN jeton du socle : il n'utilise que --br-*, --sp-*, --r-*, --t-*
   et les roles de couleur. Le jour ou la marque change, ces ecrans
   changent avec elle sans qu'on y touche.

   Une seule famille de prefixes, `o` comme options, pour qu'on sache
   d'un coup d'oeil d'ou vient une classe et ou la corriger.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. NAVIGATION AJOUTEE
   ------------------------------------------------------------------ */

/* Les trois entrees supplementaires de l'en-tete. En dessous de 1180 px
   la barre deborderait sur le selecteur de langue : elles disparaissent,
   et le rail ci-dessous prend le relais. */
.topnav .navlink.extra{display:none}
@media(min-width:1180px){ .topnav .navlink.extra{display:inline-flex} }

/* Le rail des sections. Il defile horizontalement plutot que de passer
   a la ligne : deux lignes de puces au-dessus de l'agenda repousseraient
   les sorties sous la ligne de flottaison sur un telephone. */
.rail{
  display:flex;gap:var(--sp-8);overflow-x:auto;scrollbar-width:none;
  padding:var(--sp-12) 0 var(--sp-4);margin:0 0 var(--sp-8);
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.railchip{
  flex:none;white-space:nowrap;
  border:1px solid var(--trait);background:var(--surface);
  border-radius:var(--r-pill);padding:8px 15px;
  font-size:var(--t-small);font-weight:var(--w-medium);color:var(--encre-2);
  transition:background var(--d-court) var(--ease-doux),border-color var(--d-court) var(--ease-doux);
}
.railchip:hover{background:var(--surface-2);border-color:var(--trait-fort)}
.railchip.on{background:var(--br-500);border-color:transparent;color:var(--br-sur-fond)}

/* ---------------------------------------------------------------------
   2. BRIQUES COMMUNES
   ------------------------------------------------------------------ */

.ocard{
  background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--r-card);padding:var(--sp-24);
  margin:var(--gap-entre-cartes) 0 0;
}
.ocard.hecho{opacity:.55}
.ocard-t{
  display:flex;align-items:center;gap:var(--sp-8);
  font-size:var(--t-h4);margin:0 0 var(--gap-titre-texte);
}
.ocard-i{color:var(--doux);margin:0 0 var(--sp-16);max-width:62ch}
.ocard-p{margin-top:var(--sp-16)}

.onota{color:var(--doux);font-size:var(--t-small);line-height:var(--lh-tight);margin:var(--sp-12) 0 0}
.onota-pago{
  background:var(--alerte-fond);border:1px solid var(--alerte-trait);
  color:var(--alerte);border-radius:var(--r-sm);padding:10px 12px;margin:var(--sp-12) 0 0;
}
.ovacio{
  color:var(--doux);text-align:center;padding:var(--sp-32) var(--sp-16);
  background:var(--surface-2);border-radius:var(--r-card);margin:var(--sp-16) 0 0;
}
.ocount{color:var(--doux);font-size:var(--t-small);margin:var(--sp-16) 0 var(--sp-8)}
.ocentro{display:flex;justify-content:center;gap:var(--sp-12);flex-wrap:wrap}

.olista{list-style:none;padding:0;margin:var(--sp-12) 0 0}
.olista li{
  position:relative;padding:5px 0 5px 22px;
  color:var(--encre-2);font-size:var(--t-body);line-height:var(--lh-tight);
}
.olista li::before{
  content:"";position:absolute;left:4px;top:12px;
  width:7px;height:7px;border-radius:50%;background:var(--br-400);
}
.olista.lugares li{padding-left:0}
.olista.lugares li::before{display:none}
.olista.lugares a{color:var(--br-ink);text-decoration:underline}

/* Les champs. Meme grammaire que `.champ` du profil, mais sans en
   dependre : les deux fichiers peuvent evoluer separement. */
.ochamp{display:block;margin:0 0 var(--sp-16)}
.ochamp>span{
  display:block;font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--doux);margin:0 0 6px;
}
.ochamp input,.ochamp textarea,.ochamp select{
  width:100%;border:1px solid var(--trait);border-radius:var(--r-md);
  background:var(--surface);padding:11px 13px;font-size:var(--t-body);
}
.ochamp textarea{resize:vertical;line-height:var(--lh-tight)}
.ochamp input:focus-visible,.ochamp textarea:focus-visible,.ochamp select:focus-visible{
  outline:2px solid var(--br-500);outline-offset:1px;
}
.odos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-16)}
@media(max-width:560px){ .odos{grid-template-columns:1fr;gap:0} }

.ofiltros{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16);margin:var(--sp-16) 0}
@media(max-width:720px){ .ofiltros{grid-template-columns:1fr} }

.ocheck{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-16);cursor:pointer}
.ocheck input{width:18px;height:18px;accent-color:var(--br-500)}

/* La case de consentement de l'ecran BUSCO (10/09/2026). Elle n'est PAS
   un champ comme les autres, et son style le dit : la phrase se lit en
   entier, sur trois lignes s'il le faut, alignee en haut sur la case.
   Une phrase de consentement ecrasee en minuscules capitales comme une
   etiquette de champ (`.ochamp>span`) serait illisible — et un
   consentement qu'on ne lit pas n'en est pas un (RGPD art. 7.2 :
   « de forma inteligible y de facil acceso »). */
.ocheck-legal{align-items:flex-start;line-height:var(--lh-tight)}
.ocheck-legal input{margin-top:2px;flex:0 0 auto}
.ocheck-legal>span{font-size:var(--t-small,14px);color:var(--doux)}

/* L'accuse de reception d'une demande. */
.oacuse{
  background:var(--ok-fond);border:1px solid var(--ok-trait);
  border-radius:var(--r-card);padding:var(--sp-24);margin:var(--sp-16) 0 0;
}
.oacuse-t{font-weight:var(--w-semi);color:var(--ok);margin:0 0 var(--sp-8)}
.oacuse ul{list-style:none;padding:0;margin:0 0 var(--sp-16)}
.oacuse li{font-size:var(--t-small);color:var(--encre-2);padding:3px 0}

/* ---------------------------------------------------------------------
   3. LES PRIX
   ------------------------------------------------------------------ */

.oprecio{display:flex;align-items:baseline;gap:6px;margin:var(--sp-8) 0}
.oprecio b{font-family:var(--f-display);font-weight:var(--w-semi);font-size:26px;letter-spacing:var(--ls-title)}
.oprecio.grande b{font-size:38px}
.oprecio i{font-style:normal;color:var(--doux);font-size:var(--t-small)}

.precioband{margin:var(--sp-32) 0 0}
.pb-tete{margin:0 0 var(--sp-16)}
.pb-tete h2{font-size:var(--t-h3)}
.pb-tete p{color:var(--doux);margin:6px 0 0}

.pb-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-16)}
.pb-grille.dos{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){ .pb-grille,.pb-grille.dos{grid-template-columns:1fr} }

.pb-carte{
  position:relative;text-align:left;
  background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--r-card);padding:var(--sp-24);cursor:pointer;
  transition:transform var(--d-normal) var(--ease),box-shadow var(--d-normal) var(--ease);
}
.pb-carte:hover{transform:translateY(var(--leve));box-shadow:var(--el-2)}
.pb-carte.destacada{border-color:var(--br-400);box-shadow:var(--el-1);background:var(--br-wash)}
.pb-carte h3{font-size:var(--t-h4)}
.pb-etiq{
  position:absolute;top:-11px;left:var(--sp-24);
  background:var(--br-500);color:var(--br-sur-fond);
  font-size:var(--t-label);font-weight:var(--w-semi);letter-spacing:var(--ls-label);
  text-transform:uppercase;border-radius:var(--r-pill);padding:4px 10px;
}
.pb-seg{color:var(--doux);font-size:var(--t-small)}
.pb-para{color:var(--encre-2);font-size:var(--t-small);margin:var(--sp-12) 0 0}
.pb-pied{display:flex;gap:var(--sp-12);flex-wrap:wrap;margin:var(--sp-16) 0 0}
.pb-pied .btn-ghost{display:inline-flex;align-items:center}

/* ---------------------------------------------------------------------
   4. TABLEAUX
   Un tableau ne passe jamais a la ligne tout seul sur telephone : il
   defile dans sa propre boite. La page, elle, ne defile pas de travers.
   ------------------------------------------------------------------ */
.otabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--sp-16) 0 0}
.otabla{width:100%;border-collapse:collapse;font-size:var(--t-small);min-width:520px}
.otabla th{
  text-align:left;font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--doux);font-weight:var(--w-semi);
  border-bottom:1px solid var(--trait-fort);padding:0 12px 8px 0;white-space:nowrap;
}
.otabla td{padding:11px 12px 11px 0;border-bottom:1px solid var(--trait);vertical-align:top}
.otabla td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.otabla.comparar tbody tr{cursor:pointer}
.otabla.comparar tbody tr:hover{background:var(--surface-2)}

.ostats{display:flex;gap:var(--sp-16);margin:var(--sp-16) 0}
.ostats>div{
  flex:1;background:var(--surface-2);border-radius:var(--r-card);
  padding:var(--sp-16);text-align:center;
}
.ostats b{display:block;font-family:var(--f-display);font-weight:var(--w-semi);font-size:26px}
.ostats span{color:var(--doux);font-size:var(--t-small)}

.obarras{margin:var(--sp-16) 0 0}
.obarra{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:var(--sp-12);padding:5px 0}
.ob-l{font-size:var(--t-small);color:var(--encre-2)}
.ob-b{background:var(--surface-2);border-radius:var(--r-pill);height:9px;overflow:hidden}
.ob-b i{display:block;height:100%;background:var(--br-grad);border-radius:var(--r-pill)}
.ob-n{text-align:right;font-size:var(--t-small);color:var(--doux);font-variant-numeric:tabular-nums}
@media(max-width:560px){ .obarra{grid-template-columns:96px 1fr 36px} }

/* ---------------------------------------------------------------------
   5. ESPACE COMMERCE
   ------------------------------------------------------------------ */
.ofichapro{
  position:relative;border:1px solid var(--trait);border-radius:var(--r-card);
  padding:var(--sp-24);margin:var(--sp-16) 0 0;background:var(--surface);
}
.ofichapro.destacada{border-color:var(--br-400);background:var(--br-wash)}
.ofp-etiq{
  position:absolute;top:var(--sp-16);right:var(--sp-16);
  background:var(--br-500);color:var(--br-sur-fond);border-radius:var(--r-pill);
  font-size:var(--t-label);text-transform:uppercase;letter-spacing:var(--ls-label);padding:3px 9px;
}
.ofp-meta{color:var(--doux);font-size:var(--t-small);margin:4px 0 var(--sp-12)}
.ofp-acciones{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin:var(--sp-12) 0 0}
.ofp-acciones .qbtn{padding:8px 14px;font-size:var(--t-small);cursor:default}

.owg-vista{margin:var(--sp-16) 0 0;border:1px solid var(--trait);border-radius:var(--r-card);overflow:hidden}
.owg-vista iframe{width:100%;height:420px;border:0;display:block;background:var(--surface-2)}

/* ---------------------------------------------------------------------
   6. LE WEEK-END, LES VACANCES, LA JOURNEE
   ------------------------------------------------------------------ */
.oalerta{
  display:flex;align-items:center;gap:var(--sp-16);
  background:var(--alerte-fond);border:1px solid var(--alerte-trait);
  border-radius:var(--r-card);padding:var(--sp-16);margin:0 0 var(--sp-24);
}
.oalerta .oa-ic{color:var(--alerte);flex:none}
.oalerta .oa-ic .ico{width:26px;height:26px}
.oalerta div{flex:1}
.oalerta b{display:block;color:var(--encre)}
.oalerta span{color:var(--encre-2);font-size:var(--t-small)}

.ofecha{color:var(--doux);font-size:var(--t-small);margin:0 0 var(--sp-16)}

.oplan{display:grid;gap:var(--sp-16)}
.oplan-l{position:relative}
.oplan-l .op-n{
  position:absolute;z-index:2;top:-8px;left:-8px;
  width:32px;height:32px;border-radius:50%;
  background:var(--br-500);color:var(--br-sur-fond);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:var(--w-semi);font-size:15px;
  box-shadow:var(--el-1);
}
@media(min-width:760px){ .oplan{grid-template-columns:repeat(2,1fr)} }

.ojornada{list-style:none;padding:0;margin:var(--sp-12) 0 0;counter-reset:j}
.ojornada li{
  padding:11px 0 11px 18px;border-left:2px solid var(--br-200);
  margin-left:6px;font-size:var(--t-body);
}
.ojornada li b{color:var(--br-ink);margin-right:8px}
.ojornada li.pausa{color:var(--doux);border-left-style:dashed}

.ovac{display:grid;gap:var(--sp-12);margin:var(--sp-16) 0 0}
.ovac-d{border:1px solid var(--trait);border-radius:var(--r-card);padding:var(--sp-16)}
.ovac-t{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--sp-8)}
.ovac-t b{font-family:var(--f-display);font-weight:var(--w-semi)}
.ovac-m{display:inline-flex;align-items:center;gap:5px;color:var(--doux);font-size:var(--t-small)}
.ovac-d ul{list-style:none;padding:0;margin:0}
.ovac-d li{
  padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--t-small);
  transition:background var(--d-court) var(--ease-doux);
}
.ovac-d li:hover{background:var(--surface-2)}
.ovac-d li b{color:var(--br-ink);margin-right:6px}
.ovac-d li i{color:var(--doux);font-style:normal}
.ovac-libre{color:var(--pale);font-size:var(--t-small)}

/* ---------------------------------------------------------------------
   7. LES FAMILLES, LA FICHE ENRICHIE
   ------------------------------------------------------------------ */
.olista-plan{display:grid;gap:var(--sp-8);margin:var(--sp-16) 0 0}
.olp{
  text-align:left;background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--r-card);padding:var(--sp-16);cursor:pointer;
}
.olp:hover{background:var(--surface-2)}
.olp b{display:block}
.olp span{color:var(--doux);font-size:var(--t-small)}

.odominante{margin:var(--sp-8) 0 var(--sp-16)}
.odominante.on{background:var(--ok);box-shadow:none}

.oplazas{
  background:var(--br-wash);border:1px solid var(--br-200);
  border-radius:var(--r-card);padding:var(--sp-16);margin:var(--sp-8) 0;
}
.oplazas b{color:var(--br-ink)}
.oplazas span{display:block;color:var(--encre-2);font-size:var(--t-small);margin-top:3px}
.oplazas p{margin:var(--sp-8) 0 0;color:var(--doux);font-size:var(--t-small);line-height:var(--lh-tight)}

.otrayecto{
  display:flex;align-items:center;gap:var(--sp-8);
  color:var(--encre-2);font-size:var(--t-small);margin:var(--sp-12) 0;
}
.otrayecto .ico{color:var(--br-500);flex:none}
.otrayecto i{color:var(--pale);font-style:normal;font-size:var(--t-label)}

.oacceso{margin:var(--sp-16) 0}
.oa-t{
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--doux);margin:0 0 var(--sp-8);
}
.oa-g{display:flex;gap:6px;flex-wrap:wrap}
.oa-b{
  border:1px solid var(--trait);border-radius:var(--r-pill);
  padding:7px 13px;font-size:var(--t-small);color:var(--encre-2);background:var(--surface);
}
.oa-b.on{background:var(--ok-fond);border-color:var(--ok-trait);color:var(--ok);font-weight:var(--w-medium)}

/* ---------------------------------------------------------------------
   8. LE PASSEPORT AUGMENTE
   ------------------------------------------------------------------ */
/* La barre de progression du defi. `.bar` du passeport est ecrite sous
   `.pass-hero`, sur fond violet : hors de ce bloc elle n'existe pas, et
   une barre blanche sur fond blanc ne se verrait pas. */
.ocard .bar{
  height:9px;border-radius:var(--r-pill);background:var(--surface-2);
  overflow:hidden;margin:var(--sp-8) 0;
}
.ocard .bar i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--br-grad);transition:width var(--d-long) var(--ease);
}

.oreto{display:flex;flex-wrap:wrap;gap:6px;margin:var(--sp-12) 0}
.oreto-c{
  border:1px dashed var(--trait-fort);border-radius:var(--r-pill);
  padding:5px 12px;font-size:var(--t-small);color:var(--pale);
}
.oreto-c.on{
  border-style:solid;border-color:transparent;
  background:var(--br-500);color:var(--br-sur-fond);
}

/* ---------------------------------------------------------------------
   9. LA RECHERCHE EN LANGAGE ORDINAIRE
   ------------------------------------------------------------------ */
.blbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:var(--sp-8) 0 0}
.blbar:empty{display:none}
.bl-i{color:var(--doux);font-size:var(--t-small)}
.bl-c{
  background:var(--br-100);color:var(--br-ink);border-radius:var(--r-pill);
  padding:4px 11px;font-size:var(--t-small);font-weight:var(--w-medium);
}
.bl-go{
  color:var(--br-ink);font-size:var(--t-small);font-weight:var(--w-semi);
  text-decoration:underline;padding:4px 6px;
}

/* ---------------------------------------------------------------------
   10. LA PREMIERE QUESTION
   ------------------------------------------------------------------ */
.omodo{
  position:relative;display:flex;align-items:center;gap:var(--sp-16);flex-wrap:wrap;
  background:var(--br-wash);border:1px solid var(--br-200);
  border-radius:var(--r-card);padding:var(--sp-16) var(--sp-24);margin:var(--sp-16) 0 0;
}
.omodo b{font-family:var(--f-display);font-weight:var(--w-semi);flex:1;min-width:220px}
.omodo-b{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.omodo-x{
  position:absolute;top:6px;right:10px;
  font-size:20px;line-height:1;color:var(--pale);padding:4px 6px;
}
.omodo-x:hover{color:var(--encre-2)}

/* Les rappels d'anniversaire. */
.orec{display:grid;gap:var(--sp-8)}
.orec-l{display:flex;align-items:center;gap:var(--sp-12)}
.orec-n{flex:1;font-weight:var(--w-medium)}
.orec-n i{color:var(--doux);font-style:normal;font-weight:var(--w-regular)}
.orec-l input{
  border:1px solid var(--trait);border-radius:var(--r-md);padding:8px 10px;
  font-size:var(--t-small);background:var(--surface);
}

/* Le bouton « voir plus » de l'agenda. Il vit hors de la grille, sinon
   il occuperait une case et se rangerait a cote d'une fiche. */
.voirplus{margin:var(--sp-24) auto 0;display:flex;max-width:320px}

/* La carte du week-end dans l'agenda porte la couleur de la marque :
   c'est le rendez-vous, pas une rubrique de plus.
   `.mk-card` pose color:#fff sur son degrade violet. En repeignant le fond
   en clair sans reprendre la couleur du texte, le titre et la sortie du
   week-end sortaient blancs sur #F7F3FF : illisibles. Defaut vu au premier
   rendu reel, le 26/08/2026 — il ne se voyait pas a la lecture du code.
   Le bouton reprend le violet plein : sur fond clair, un bouton blanc
   n'est plus un bouton. */
.mk-card.finde{border:1px solid var(--br-200);background:var(--br-wash);color:var(--br-ink)}
.mk-card.finde p{color:var(--ink);opacity:.9}
.mk-card.finde .mk-go{background:var(--br-500);color:#fff}

/* ---------------------------------------------------------------------
   11. LES PAGES AUTONOMES
   simulador.html et widget.html ne chargent ni styles.css ni
   refonte.css : ces deux feuilles portent l'agenda entier, et une page
   de 900 lignes n'a pas a en tirer 48 Ko pour trois boutons. Elles
   portent `class="sola"` sur le body, et les quelques classes du site
   dont elles ont besoin sont redefinies ICI, sous ce selecteur, pour
   qu'aucune ne puisse deborder sur l'application.
   ------------------------------------------------------------------ */
.sola .btn-primary,.sola .btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-pill);padding:12px 22px;
  font-size:var(--t-body);font-weight:var(--w-semi);
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--d-court) var(--ease),box-shadow var(--d-court) var(--ease);
}
.sola .btn-primary{background:var(--br-500);color:var(--br-sur-fond);box-shadow:0 6px 18px -8px var(--br-ombre)}
.sola .btn-ghost{background:var(--surface);color:var(--encre-2);border-color:var(--trait)}
.sola .btn-primary:hover,.sola .btn-ghost:hover{transform:translateY(var(--leve))}
.sola .btn-ghost:hover{background:var(--surface-2)}
.sola .subhead{
  font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;
  color:var(--doux);margin:var(--sp-32) 0 var(--sp-8);
}

/* ---------------------------------------------------------------------
   12. LE CARNET DE L'ETE, SUR PAPIER
   Douze cases sur une feuille A4, a plier et a tamponner. Rien de tout
   cela n'existe a l'ecran : #feuille est masque, et l'impression masque
   tout le reste du site.
   ------------------------------------------------------------------ */
@media print{
  #feuille .cuaderno{
    display:grid;grid-template-columns:repeat(3,1fr);gap:6mm;margin-top:8mm;
  }
  #feuille .cua-c{
    position:relative;border:1pt dashed #444;border-radius:3mm;
    min-height:34mm;padding:5mm 4mm 4mm;
  }
  #feuille .cua-n{
    position:absolute;top:2mm;left:3mm;font-size:8pt;color:#777;
  }
  #feuille .cua-c b{display:block;font-size:9.5pt;line-height:1.25;margin-top:4mm}
  #feuille .cua-c b.vide{min-height:12mm}
  #feuille .cua-c i{display:block;font-size:8pt;color:#555;margin-top:1mm}
}

/* ---------------------------------------------------------------------
   13. LES TROIS ONGLETS DE PUBLIC, ET LA QUESTION D'AGE
   Poses le 28/08/2026, apres l'audit qui a mesure que 58 % des sorties
   affichees etaient classees "ignorer" par le site lui-meme.

   ATTENTION AU CONTRASTE. Le 26/08, la carte du week-end ecrivait son
   titre en blanc sur du lavande clair : contraste 1,09, illisible, et
   aucune epreuve ne pouvait le voir puisqu'elles lisent des fichiers et
   pas des pixels. Ici l'onglet actif est VIOLET PLEIN avec du blanc
   dessus (contraste 6,9), les autres sont de l'encre sur surface. Aucune
   regle ne repeint un fond sans reprendre la couleur du texte.
   ------------------------------------------------------------------ */
.pubtabs{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);
  margin:0 0 var(--sp-16);
}
.pubtab{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--trait);background:var(--surface);color:var(--encre-2);
  border-radius:var(--r-pill);padding:8px 14px;
  font-size:var(--t-small);font-weight:var(--w-medium);cursor:pointer;
  transition:background var(--d-court) var(--ease-doux),color var(--d-court) var(--ease-doux),
             border-color var(--d-court) var(--ease-doux);
}
.pubtab:hover{background:var(--surface-2);color:var(--encre)}
.pubtab.on{
  background:var(--br-500);color:var(--br-sur-fond);border-color:transparent;
  font-weight:var(--w-semi);box-shadow:0 6px 16px -9px var(--br-ombre);
}
.pubn{
  font-family:var(--f-num);font-size:12px;font-weight:var(--w-semi);
  background:var(--surface-2);color:var(--encre-2);
  border-radius:var(--r-pill);padding:1px 7px;line-height:1.5;
}
/* Sur l'onglet actif, la pastille garde SON propre couple fond/texte :
   un fond translucide sur du violet, du blanc dessus. */
.pubtab.on .pubn{background:rgba(255,255,255,.22);color:var(--br-sur-fond)}
.pubnote{
  flex-basis:100%;margin:2px 0 0;
  font-size:var(--t-small);color:var(--doux);line-height:var(--lh-body);
}

/* La question d'age, en clair dans la page. Elle remplace la feuille
   modale qui bloquait l'accueil : meme question, plus de porte fermee. */
.edadstrip{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8);
  background:var(--br-wash);border:1px solid var(--br-200);
  border-radius:var(--r-lg);padding:var(--sp-12) var(--sp-16);
  margin:0 0 var(--sp-16);
}
.edadstrip[hidden]{display:none}
.edadstrip .es-q{
  font-family:var(--f-display);font-weight:var(--w-semi);
  color:var(--br-ink);font-size:var(--t-body);flex:1;min-width:180px;
}
.edadstrip .es-b{display:flex;gap:6px;flex-wrap:wrap}
.edadstrip .es-x{
  background:none;border:0;cursor:pointer;color:var(--doux);
  font-size:20px;line-height:1;padding:0 4px;
}
.edadstrip .es-x:hover{color:var(--encre-2)}

/* ---------------------------------------------------------------------
   14. LE HERO SUR TELEPHONE
   Mesure du 28/08 dans un cadre de 386 px : la premiere sortie arrivait
   a 4,3 ecrans. La scene dessinee est decorative — elle ne porte aucune
   information — et elle coutait a elle seule presque un ecran entier.
   Elle disparait sous 720 px : le titre, la recherche et les filtres
   restent, les sorties remontent.
   ------------------------------------------------------------------ */
@media(max-width:719px){
  .hero-scene{display:none}
}

/* Le lieu sur la carte. Ajoute le 28/08/2026 : « Orihuela » ne dit pas ou
   se garer. Le nom du lieu peut etre long (« Biblioteca Publica del Estado
   y Archivo Historico Fernando de Loazes ») : il est coupe sur une ligne
   plutot que de faire grandir la carte, et le titre de survol le donne en
   entier. */
.card .meta .lieu{
  max-width:100%;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* =====================================================================
   15. LA CHISPA — le rond du bas, sa fenetre, sa page
   ---------------------------------------------------------------------
   Ajoutee le 28/08/2026 EN BLEU, avec cette justification : « un rond
   violet au milieu d'une barre violette ne se serait pas vu ».

   CORRIGE LE 10/09/2026, sur la demande de le responsable. Le raisonnement
   de depart etait juste sur la lisibilite et faux sur la marque : la
   marque de HolaNinos est violette (marque-ninos.css, --br-500), et
   l'element le plus regarde du site sortait dans une couleur qui
   n'etait celle de rien. Un bouton qu'on voit bien mais qui appartient
   a une autre marque n'est pas un bouton reussi.

   CE QUI REMPLACE LE BLEU, ET COMMENT IL RESTE VISIBLE : ce n'est pas
   le violet plat de la barre, c'est le DEGRADE de marque (--br-grad,
   du violet #7C4DE0 vers la magenta #C05BD8) pose sur un rond en
   relief, avec halo et anneaux. Il se detache par la lumiere et le
   mouvement, plus par le desaccord de teinte.

   Les contrastes sont mesures, pas supposes : blanc sur #7C4DE0 = 5,26 ;
   #5A2FB0 sur #F0E9FE = 7,10. Le 26/08 une carte etait sortie en blanc
   sur lavande (1,09) parce que personne n'avait fait ce calcul.

   Les jetons ne s'appellent plus « bleu » : un nom de variable qui ment
   sur sa valeur se fait recopier tel quel pendant des mois.
   ------------------------------------------------------------------ */
:root{
  --ch-marca:#7C4DE0;         /* le violet de marque, --br-500 */
  --ch-marca-clair:#A47CEC;   /* --br-400, le haut du degrade */
  --ch-marca-fonce:#5A2FB0;   /* --br-ink, ce qui s'ecrit sur le lavande */
  --ch-marca-100:#D8C9FB;     /* --br-200, les bordures */
  --ch-marca-mag:#C05BD8;     /* la magenta, le bas de --br-grad */
  --ch-wash:#F0E9FE;          /* le lavande de fond */
  --ch-halo:rgba(124,77,224,.45);
}

/* La case vide de la barre du bas. Deux liens de chaque cote : le centre
   de cette case est le centre exact de la barre, quelle que soit la
   largeur du telephone. */
.ch-slot{flex:1}

.ch-fab{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  z-index:85;width:58px;height:58px;padding:0;border:none;border-radius:50%;
  background:none;cursor:pointer;
  filter:drop-shadow(0 8px 18px var(--ch-halo));
}
/* Le coeur du bouton. Il porte le degrade et le reflet ; les anneaux
   sont dessus, l'icone au-dessus de tout. */
.ch-nucleo{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* LE DEGRADE DE MARQUE, ET PAS UN VIOLET PLAT. --br-grad va du violet
     a la magenta : c'est lui qui fait que le rond se detache d'une barre
     violette unie sans avoir a changer de famille de couleur. */
  background:linear-gradient(150deg,var(--ch-marca-clair) 0%,var(--ch-marca) 46%,var(--ch-marca-mag) 100%);
  color:#fff;border:3px solid var(--surface);
  animation:ch-latido 2.8s ease-in-out infinite;
}
.ch-nucleo .ico{position:relative;z-index:2;stroke-width:2}
/* L'eclat qui traverse le rond toutes les 4,6 s : c'est lui qui « allume »
   le bouton. Court, et jamais deux fois de suite. */
.ch-nucleo::after{
  content:"";position:absolute;z-index:1;top:-60%;left:-130%;width:55%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  transform:rotate(18deg);animation:ch-destello 4.6s ease-in-out infinite;
}
/* Les deux ondes. La seconde part a mi-parcours de la premiere. */
.ch-anillo{
  position:absolute;inset:0;border-radius:50%;border:2px solid var(--ch-marca);
  opacity:0;animation:ch-onda 2.8s ease-out infinite;pointer-events:none;
}
.ch-anillo.dos{animation-delay:1.4s}
.ch-fab-t{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-19px;
  font-size:9.5px;font-weight:800;color:var(--doux);white-space:nowrap;letter-spacing:.01em;
}
.ch-nucleo .ch-magic{position:relative;z-index:2;font-size:10px;font-weight:900;letter-spacing:.12em;color:#fff}
.ch-fab:hover .ch-nucleo{border-color:var(--ch-wash)}
.ch-fab:active{transform:translateX(-50%) scale(.93)}
.ch-fab:focus-visible{outline:3px solid var(--ch-marca);outline-offset:4px}

@keyframes ch-latido{
  0%,100%{box-shadow:0 0 0 0 rgba(124,77,224,0)}
  50%    {box-shadow:0 0 0 5px rgba(124,77,224,.14)}
}
@keyframes ch-onda{
  0%  {transform:scale(.92);opacity:.5}
  70% {transform:scale(1.75);opacity:0}
  100%{transform:scale(1.75);opacity:0}
}
@keyframes ch-destello{
  0%,74%  {left:-130%}
  90%,100%{left:135%}
}

/* Au-dessus de 900 px la barre du bas n'existe pas : le rond va se poser
   en bas a droite, sans etiquette, et il garde son halo. */
@media(min-width:900px){
  .ch-fab{left:auto;right:26px;bottom:26px;transform:none;width:62px;height:62px}
  .ch-fab:active{transform:scale(.93)}
  .ch-fab-t{display:none}
}
/* Un parent qui a demande moins d'animation ne recoit ni onde ni eclat.
   Le bouton reste bleu, rond et visible : c'est le mouvement qu'on
   retire, pas le reperage. */
@media(prefers-reduced-motion:reduce){
  .ch-nucleo,.ch-nucleo::after,.ch-anillo{animation:none}
  .ch-anillo{opacity:.35}
  .ch-nucleo::after{display:none}
}
@media print{ .ch-fab,.ch-modal{display:none !important} }

/* ---------- La fenetre des trois questions ---------- */
.ch-sheet{padding:0 0 14px;max-width:520px;display:flex;flex-direction:column;max-height:84vh}
.ch-top{display:flex;align-items:center;gap:10px;padding:14px 16px 10px}
.ch-av{
  width:32px;height:32px;flex:none;border-radius:50%;
  background:linear-gradient(150deg,var(--ch-marca-clair),var(--ch-marca) 55%,var(--ch-marca-fonce));
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.ch-quien{font-weight:700;font-size:14.5px;color:var(--encre)}
.ch-pas{margin-left:auto;font-size:11.5px;color:var(--doux);font-weight:600}
.ch-x{
  width:32px;height:32px;flex:none;border-radius:50%;background:none;color:var(--doux);
  display:flex;align-items:center;justify-content:center;
}
.ch-x:hover{background:var(--surface-2);color:var(--encre)}
.ch-prog{height:3px;background:var(--trait);margin:0 16px;border-radius:3px;overflow:hidden}
.ch-prog i{
  display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--ch-marca),var(--ch-marca-clair));
  transition:width .45s var(--ease);
}
.ch-flujo{
  padding:14px 16px 6px;overflow:auto;min-height:126px;
  display:flex;flex-direction:column;gap:8px;
}
.ch-b{
  max-width:88%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;
  animation:ch-entra .28s var(--ease) both;
}
.ch-b-ella{align-self:flex-start;background:var(--surface-2);color:var(--encre);border-bottom-left-radius:5px}
.ch-b-yo{align-self:flex-end;background:var(--ch-marca);color:#fff;font-weight:600;border-bottom-right-radius:5px}
.ch-b-esc{padding:12px 14px}
@keyframes ch-entra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ch-honesto{display:block;margin-top:7px;font-size:11.5px;color:var(--doux);line-height:1.4}
.ch-esc{display:flex;gap:4px;align-items:center;height:8px}
.ch-esc i{width:6px;height:6px;border-radius:50%;background:var(--trait-fort);animation:ch-pts 1.1s infinite}
.ch-esc i:nth-child(2){animation-delay:.18s}
.ch-esc i:nth-child(3){animation-delay:.36s}
@keyframes ch-pts{0%,60%,100%{opacity:.32;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ch-mini{
  display:inline-block;margin:5px 5px 0 0;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--ch-wash);color:var(--ch-marca-fonce);font-size:12px;font-weight:700;
}
.ch-b-yo .ch-mini{background:rgba(255,255,255,.22);color:#fff}
.ch-mini-l{display:block;margin-top:2px}

.ch-pie{padding:10px 16px 4px;border-top:1px solid var(--trait)}
.ch-chips{display:flex;flex-wrap:wrap;gap:8px}
.ch-chip{
  padding:10px 15px;border-radius:var(--r-pill);border:1.5px solid var(--ch-marca-100);
  background:var(--ch-wash);color:var(--ch-marca-fonce);font-size:14px;font-weight:700;
  animation:ch-chip-in .3s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms);
  transition:background var(--d-court) var(--ease-doux),color var(--d-court) var(--ease-doux),border-color var(--d-court) var(--ease-doux);
}
.ch-chip:hover{background:var(--ch-marca);border-color:var(--ch-marca);color:#fff}
@keyframes ch-chip-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.ch-libre{display:flex;gap:8px;margin-top:10px}
.ch-libre input{
  flex:1;min-width:0;border:1px solid var(--trait-fort);border-radius:var(--r-pill);
  padding:10px 15px;font-size:14px;background:var(--surface);color:var(--encre);
}
.ch-libre input:focus{border-color:var(--ch-marca);outline:none;box-shadow:0 0 0 3px rgba(124,77,224,.16)}
.ch-env{
  width:42px;height:42px;flex:none;border-radius:50%;background:var(--ch-marca);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.ch-env:hover{background:var(--ch-marca-fonce)}
.ch-nota{font-size:11.5px;color:var(--doux);margin:9px 0 0;text-align:center}
/* Le bouton OK reste bleu : on est encore dans le fil de la chispa, et
   un bouton violet ici ferait croire a un autre ecran. */
.ch-ok{background:var(--ch-marca);box-shadow:0 1px 2px rgba(90,47,176,.3)}
.ch-ok:hover{background:var(--ch-marca-fonce)}
.ch-n{display:inline-block;margin-left:6px;background:rgba(255,255,255,.24);border-radius:var(--r-pill);padding:1px 8px;font-size:12.5px}
.ch-rehacer{
  display:block;margin:10px auto 0;background:none;color:var(--doux);
  font-size:12.5px;font-weight:700;text-decoration:underline;
}

/* ---------- La page de resultats ---------- */
.ch-res-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}
.ch-res-k{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--doux);font-weight:700;margin-right:4px;
}
.ch-res-i{color:var(--doux);font-size:14px;margin:14px 0 0}
.ch-res-lista{display:grid;gap:14px;margin-top:14px}
.ch-res-l.primero{
  padding:12px;border-radius:var(--r-lg);
  background:var(--ch-wash);border:1px solid var(--ch-marca-100);
}
.ch-res-top-l{
  display:block;margin-bottom:8px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ch-marca-fonce);
}
@media(min-width:760px){
  .ch-res-lista{grid-template-columns:1fr 1fr}
  .ch-res-l.primero{grid-column:1 / -1}
}
/* Sous 360 px, l'etiquette du rond n'a plus la place : « What shall we
   do? » debordait sur « Places » et « My plans ». On garde le rond, qui
   se reconnait seul, et on retire le mot. Mesure faite dans un cadre de
   390 px et verifiee a 320. */
@media(max-width:359px){ .ch-fab-t{display:none} }

/* =====================================================================
   16. LES GESTES — ahora mismo, compte a rebours, roulette, pile a
       trier, mode enfant                          (28/08/2026, soir)
   ---------------------------------------------------------------------
   Aucune couleur neuve. Le bleu de la chispa sert a ce qui est « en
   direct » (la bande de l'heure), le violet de la marque a tout le
   reste. Les contrastes sont mesures, pas supposes :
     .ah-band     #5A2FB0 sur #F0E9FE = 7,10
     .cu-chip     #5A2FB0 sur #F7F3FF = 7,8
     .vm-sello    blanc sur #2E7D46 = 5,1  et sur #C0392B = 5,4
     .mn-tile     blanc sur la couleur de categorie assombrie a 62 % :
                  de 5,8 (playa) a 9,5 (taller)
   Le 26/08 une carte etait sortie en blanc sur lavande (1,09) parce que
   personne n'avait fait ce calcul.
   ------------------------------------------------------------------ */

/* ---------- 16.1 AHORA MISMO ---------- */
.ahora{margin:0 0 var(--sp-16)}
.ah-band{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 14px;border-radius:var(--r-lg);cursor:pointer;
  background:var(--ch-wash);border:1px solid var(--ch-marca-100);
  color:var(--ch-marca-fonce);font:inherit;
}
.ah-band:hover{border-color:var(--ch-marca)}
.ah-band:focus-visible{outline:3px solid var(--ch-marca);outline-offset:2px}
.ah-pt{
  width:9px;height:9px;flex:none;border-radius:50%;background:var(--ch-marca);
  animation:ah-latido 1.9s ease-in-out infinite;
}
.ah-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0;flex:1}
.ah-txt b{font-size:13.5px;font-weight:800;white-space:nowrap}
.ah-t{
  font-size:14px;color:var(--encre);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.ah-l{font-size:12px;color:var(--doux);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ah-ver{
  margin-left:auto;flex:none;font-size:12px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;
}
.ah-mas{margin:6px 0 0;font-size:12.5px;color:var(--doux)}
.ah-nota{margin:4px 0 0;font-size:11.5px;color:var(--doux)}
@keyframes ah-latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.55}}
@media(prefers-reduced-motion:reduce){ .ah-pt{animation:none} }

/* ---------- 16.2 LE COMPTE A REBOURS SUR LA CARTE ---------- */
.card .meta .cu-chip{
  background:var(--br-wash);color:var(--br-ink);border:1px solid var(--br-100);
  border-radius:var(--r-pill);padding:1px 9px;font-size:11.5px;font-weight:800;
  white-space:nowrap;
}

/* ---------- 16.3 LA BOITE DES TROIS GESTES ---------- */
.gs-bots{display:grid;gap:10px}
.gs-b{
  display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;
  gap:2px 12px;align-items:center;text-align:left;cursor:pointer;
  padding:13px 14px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--trait);color:var(--encre);
  font:inherit;
}
.gs-b .ico{grid-row:1 / span 2;color:var(--br-500)}
.gs-b b{font-size:15px;font-weight:700}
.gs-b i{font-style:normal;font-size:12.5px;color:var(--doux);line-height:1.35}
.gs-b:hover{border-color:var(--br-400);background:var(--br-wash)}
.gs-b:focus-visible{outline:3px solid var(--br-500);outline-offset:2px}
@media(min-width:760px){ .gs-bots{grid-template-columns:1fr 1fr 1fr} }

/* ---------- 16.4 LA ROULETTE ---------- */
.sr-sheet{max-width:440px;padding:0 0 18px;display:flex;flex-direction:column}
.sr-top{display:flex;align-items:center;gap:10px;padding:14px 18px 6px}
.sr-t{font-weight:800;font-size:15px;color:var(--encre)}
.sr-top .ch-x{margin-left:auto}
.sr-cuerpo{padding:8px 18px;min-height:262px;display:flex;align-items:center;justify-content:center}
.sr-pie{padding:6px 18px 0;display:grid;gap:8px}
.sr-carta{width:100%;text-align:center}
.sr-carta.gira{opacity:.72}
.sr-vis{
  height:150px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:var(--surface-2);
}
.sr-vis img,.sr-vis .vis{width:100%;height:100%;object-fit:cover;display:block}
.sr-vis .shade{position:absolute;inset:0}
/* Trois lignes au plus : un titre de mairie fait cinq lignes et
   poussait « Otra » hors de l'ecran sur un telephone de 386 px.
   Vu a l'ecran le 28/08/2026. */
.sr-h{
  font-size:17px;line-height:1.25;margin:12px 0 2px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sr-m{font-size:13px;color:var(--doux);margin:0}
.sr-p{margin:8px 0 0;font-size:13px}
.sr-girando{text-align:center;color:var(--doux);font-size:13px;margin:0}
.sr-vamos{background:var(--ch-marca)}
.sr-vamos:hover{background:var(--ch-marca-fonce)}
/* La roulette au bout de la page de la chispa, jamais en haut. */
.ch-ruleta{margin-top:10px}
/* Le bouton du mode enfant, sous les reponses de la premiere question. */
.ch-nino{
  display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  margin-top:10px;padding:9px 12px;border-radius:var(--r-pill);cursor:pointer;
  background:var(--br-wash);border:1px solid var(--br-100);color:var(--br-ink);
  font:inherit;font-size:13px;font-weight:700;
}
.ch-nino:hover{border-color:var(--br-400)}

/* ---------- 16.5 ¿VAMOS? : LA PILE QU'ON TRIE ---------- */
.vm-sub{color:var(--doux);font-size:13.5px;margin:0 0 var(--sp-16);text-align:center}
.vm-zona{position:relative;height:396px;max-width:400px;margin:0 auto;touch-action:pan-y}
.vm-c{
  position:absolute;inset:0;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--r-card);
  box-shadow:var(--el-2);overflow:hidden;display:flex;flex-direction:column;
}
.vm-c.detras{transform:scale(.94) translateY(12px);opacity:.6;z-index:1}
.vm-c.arriba{z-index:2;cursor:grab;touch-action:none;user-select:none}
.vm-c.arriba.tirando{cursor:grabbing;transition:none}
.vm-c.arriba:not(.tirando){transition:transform .22s var(--ease)}
.vm-c.fuera-si{transform:translateX(140%) rotate(18deg) !important;opacity:0}
.vm-c.fuera-no{transform:translateX(-140%) rotate(-18deg) !important;opacity:0}
.vm-vis{height:220px;flex:none;position:relative;background:var(--surface-2)}
.vm-vis img,.vm-vis .vis{width:100%;height:100%;object-fit:cover;display:block}
.vm-vis .shade{position:absolute;inset:0}
/* La carte a une hauteur FIXE : le titre le plus long du fichier fait
   quatre lignes et poussait la date hors du cadre, coupee net par
   l'`overflow:hidden` de la carte. Vu a l'ecran le 28/08/2026 dans un
   cadre de 386 px. Trois lignes de titre, une de lieu, et la date
   reste toujours lisible : c'est elle qui decide du pouce. */
.vm-cuerpo{padding:14px 16px;flex:1;min-height:0;display:flex;flex-direction:column}
.vm-cuerpo h3{
  font-size:18px;line-height:1.22;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.vm-m{
  font-size:13px;color:var(--doux);margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.vm-d{font-size:13px;color:var(--encre-2);margin:auto 0 0;display:flex;gap:8px;flex-wrap:wrap}
.vm-sello{
  position:absolute;top:16px;z-index:3;opacity:0;pointer-events:none;
  padding:6px 14px;border-radius:var(--r-sm);color:#fff;
  font-size:16px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.vm-sello.si{left:16px;background:#2E7D46;transform:rotate(-12deg)}
.vm-sello.no{right:16px;background:#C0392B;transform:rotate(12deg)}
.vm-mandos{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:var(--sp-24)}
.vm-b{
  cursor:pointer;font:inherit;border-radius:50%;width:58px;height:58px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:2px solid var(--trait-fort);color:var(--encre);
}
.vm-b.no{color:#C0392B;border-color:#E8BDB7}
.vm-b.si{color:#2E7D46;border-color:#B6D9C2}
.vm-b.no:hover{background:#FBEDEB}
.vm-b.si:hover{background:#EAF6EE}
.vm-b.und{
  width:auto;height:auto;border-radius:var(--r-pill);padding:8px 14px;
  font-size:12.5px;font-weight:700;color:var(--doux);border-color:var(--trait);
}
.vm-b.und[disabled]{opacity:.4;cursor:default}
.vm-b:focus-visible{outline:3px solid var(--br-500);outline-offset:2px}
.vm-cont{text-align:center;color:var(--doux);font-size:12.5px;margin:var(--sp-12) 0 0}
.vm-fin{text-align:center;padding:var(--sp-32) var(--sp-16)}
.vm-fin-i{
  display:inline-flex;width:56px;height:56px;border-radius:50%;
  align-items:center;justify-content:center;
  background:var(--br-wash);color:var(--br-500);margin-bottom:var(--sp-12);
}
.vm-fin h3{font-size:var(--t-h3);margin:0 0 var(--sp-8)}
.vm-fin p{color:var(--doux);margin:0 0 var(--sp-16)}
@media(max-width:420px){ .vm-zona{height:368px} .vm-vis{height:196px} }
@media(prefers-reduced-motion:reduce){
  .vm-c.arriba:not(.tirando){transition:none}
  .vm-c.fuera-si,.vm-c.fuera-no{opacity:0;transform:none !important}
}

/* ---------- 16.6 EL MODO NINO ---------- */
/* Il prend tout l'ecran : c'est le telephone qu'on tend a l'enfant, et
   rien de la page des parents ne doit rester visible autour. */
.mn-modal{align-items:stretch}
.mn-sheet{
  max-width:none;width:100%;border-radius:0;max-height:100vh;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px
          calc(env(safe-area-inset-bottom,0px) + 20px);
  background:var(--surface);position:relative;
}
/* La croix de sortie : en haut, taille d'adulte, la ou un enfant ne va
   pas chercher. Aucun autre chemin ne quitte l'ecran. */
.mn-x{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;z-index:3;
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--trait);color:var(--doux);
  display:flex;align-items:center;justify-content:center;
}
/* Les tuiles restent des CARRES, quelle que soit la largeur : etirees
   sur un ecran de bureau elles devenaient des bandes de 450 x 128, et
   l'icone y flottait au milieu de rien. Vu a l'ecran le 28/08/2026. */
.mn-rejilla{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  margin-top:52px;max-width:520px;margin-left:auto;margin-right:auto;
}
.mn-tile{
  position:relative;min-height:128px;aspect-ratio:1 / .82;
  border-radius:var(--r-card);cursor:pointer;
  border:4px solid transparent;background:var(--tc);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--el-1);transition:transform .12s var(--ease);
}
.mn-tile::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(120% 80% at 30% 20%,rgba(255,255,255,.22),transparent 70%);
}
.mn-tile .mn-i{position:relative;z-index:2;display:flex}
.mn-tile .ico{width:54px;height:54px;stroke-width:1.7}
.mn-tile:active{transform:scale(.96)}
.mn-tile.on{border-color:var(--encre)}
.mn-ok{
  position:absolute;top:8px;right:8px;z-index:3;opacity:0;
  width:32px;height:32px;border-radius:50%;background:#fff;color:var(--tc);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--el-1);
}
.mn-tile.on .mn-ok{opacity:1}
/* La grande fleche de fin. Elle n'apparait qu'une fois quelque chose
   choisi : rien a lire, rien a comprendre. */
.mn-pie{display:flex;justify-content:center;margin-top:18px;min-height:74px}
.mn-go{
  width:74px;height:74px;border-radius:50%;cursor:pointer;border:none;
  background:var(--br-grad);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px var(--br-ombre);animation:mn-pop .28s var(--ease);
}
.mn-go:active{transform:scale(.94)}
@keyframes mn-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.mn-res{padding-top:44px;max-width:900px;margin:0 auto}
.mn-res-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mn-res-k{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--doux);font-weight:700;margin-right:4px;
}
@media(min-width:620px){
  .mn-rejilla{grid-template-columns:repeat(3,1fr);max-width:660px}
  .mn-tile{min-height:150px}
}
@media(prefers-reduced-motion:reduce){ .mn-go{animation:none} .mn-tile{transition:none} }

/* Les grilles de resultats debordaient a droite sur un ecran large : une
   colonne `1fr` ne descend pas sous la largeur minimale de son contenu,
   et une carte porte des lignes en `nowrap` (le lieu, la date). Les deux
   colonnes prenaient 511 px chacune dans un cadre de 900. `min-width:0`
   rend la main a l'ellipse, qui etait deja prevue.
   Vu a l'ecran le 28/08/2026, sur l'ecran des parents du mode enfant. */
.ch-res-lista>*{min-width:0}
.ch-res-lista .card .meta{min-width:0}

/* =====================================================================
   APUNTAR — les offres (31/08/2026)
   ---------------------------------------------------------------------
   Camps, ecoles de sport, activites de l'annee, inscriptions ouvertes.

   LA LECON DU 26/08 EST APPLIQUEE ICI. Ce jour-la, `.mk-card.finde`
   repeignait son fond sans reprendre la couleur de son texte : titre
   blanc sur lavande, contraste 1,09, en haut de l'agenda. Aucune epreuve
   ne pouvait le voir, elles lisent des fichiers et pas des pixels.
   Chaque regle ci-dessous qui pose un `background` pose donc AUSSI son
   `color`, sans exception, et les cinq pastilles de forme sont ecrites
   en `--br-ink` sur un fond clair, jamais l'inverse.
   ===================================================================== */
.ofpuente{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  flex-wrap:wrap;
  background:var(--surface-2);color:var(--encre);
  border:1px solid var(--trait);border-left:4px solid var(--br-500);
  border-radius:var(--r-12);padding:var(--sp-12) var(--sp-16);
  margin:0 0 var(--sp-16);
}
.ofpuente[hidden]{display:none}
.opu-t{font-weight:600;color:var(--encre)}
.opu-b{
  border:1px solid var(--br-500);background:var(--br-500);color:var(--br-sur-fond);
  border-radius:var(--r-8);padding:6px 14px;font:inherit;font-weight:600;cursor:pointer;
}
.opu-b:hover{background:var(--br-ink);border-color:var(--br-ink)}

.ofcount{color:var(--doux);font-size:var(--t-small);margin:var(--sp-12) 0}
.ofgrid{display:grid;gap:var(--sp-16);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ofcard{
  display:flex;flex-direction:column;gap:8px;
  background:var(--surface);color:var(--encre);
  border:1px solid var(--trait);border-radius:var(--r-12);padding:var(--sp-16);
}
.ofcard-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ofcard-t{margin:0;font-size:1rem;line-height:var(--lh-tight);color:var(--encre)}
.ofcard-l{margin:0;color:var(--doux);font-size:var(--t-small)}
.ofcard-c{margin:0;color:var(--doux);font-size:var(--t-small)}
.ofcard-b{margin-top:auto}
.ofciudad{color:var(--doux);font-size:var(--t-small);text-align:right}

/* Les cinq formes. Fond clair, texte fonce : lisible avec ou sans le
   fond, exactement comme les en-tetes de tableaux corriges le 27/08. */
.oftipo{
  display:inline-block;border-radius:999px;padding:2px 10px;
  font-size:.75rem;font-weight:700;letter-spacing:.02em;
  background:var(--surface-2);color:var(--br-ink);border:1px solid var(--trait);
  white-space:nowrap;
}
.oftipo.of-campamento{background:#FFF1DC;color:#7A4A05;border-color:#F0D9B5}
.oftipo.of-actividad {background:#E4F2FF;color:#0B4A75;border-color:#C2DFF5}
.oftipo.of-inscripcion{background:#EDE7FE;color:#4E2AA0;border-color:#D6C9F7}
.oftipo.of-cumple    {background:#FFE7F0;color:#8A1F4A;border-color:#F6C9DA}
.oftipo.of-lugar     {background:#E6F6EC;color:#14603A;border-color:#C6E7D3}

.ofpills{display:flex;flex-wrap:wrap;gap:6px}
.opill{
  background:var(--surface-2);color:var(--encre);
  border:1px solid var(--trait);border-radius:999px;
  padding:2px 9px;font-size:.75rem;
}
.opill.gratis{background:#E6F6EC;color:#14603A;border-color:#C6E7D3}
.opill.plazo {background:#FFF1DC;color:#7A4A05;border-color:#F0D9B5}

@media (max-width:640px){
  .ofgrid{grid-template-columns:1fr}
  .ofpuente{flex-direction:column;align-items:flex-start}
}

/* La preuve trouvee DANS le programme d'une fete (31/08/2026).
   Le titre dit « Fiestas de San Roque » et ne dira jamais rien d'autre ;
   les hinchables et le cuentacuentos sont a la ligne trente du
   programme. Cette ligne dit au parent pourquoi la fiche est la, et le
   collecteur ecrit les marqueurs trouves dans `programa_ninos`. */
.progninos{
  margin:6px 0 0;font-size:var(--t-small);font-weight:600;
  color:#14603A;background:#E6F6EC;border:1px solid #C6E7D3;
  border-radius:var(--r-8);padding:4px 9px;display:inline-block;
}

/* =====================================================================
   DEPORTE (02/09/2026)
   L'ecran du sport reutilise entierement les cartes des offres
   (`.ofcard`, `.ofgrid`, `.oftipo`, `.opill`) : une seule forme de
   fiche dans le site, une seule feuille a corriger. Ne sont ecrits ici
   que les huit pastilles de forme d'equipement et les deux notes du
   bas.

   REGLE DE COULEUR, celle payee le 26/08 par le contraste 1,09 de la
   carte du week-end et redite le 27/08 pour les en-tetes de tableaux :
   fond CLAIR, texte FONCE. Chacune des huit paires ci-dessous est au
   dessus de 7:1 sur son fond, donc lisible meme si le fond disparait.
   ===================================================================== */
.oftipo.dp-polideportivo    {background:#E4F2FF;color:#0B4A75;border-color:#C2DFF5}
.oftipo.dp-pabellon         {background:#EDE7FE;color:#4E2AA0;border-color:#D6C9F7}
.oftipo.dp-estadio          {background:#E6F6EC;color:#14603A;border-color:#C6E7D3}
.oftipo.dp-pista            {background:#F1F3F6;color:#374151;border-color:#DDE2E9}
.oftipo.dp-pista_atletismo  {background:#FFF1DC;color:#7A4A05;border-color:#F0D9B5}
.oftipo.dp-piscina          {background:#E0F5F7;color:#0B5560;border-color:#BEE6EB}
.oftipo.dp-gimnasio_aire_libre{background:#FDF0E4;color:#7A3E05;border-color:#F5D9BF}
.oftipo.dp-parque_acuatico  {background:#E0F5F7;color:#0B5560;border-color:#BEE6EB}
.oftipo.dp-club             {background:#FFE7F0;color:#8A1F4A;border-color:#F6C9DA}

/* La note qui explique l'absence des calendriers de championnat. Elle
   n'est pas une alerte : elle est en gris doux, sous la liste, et elle
   ne doit jamais crier. Mais elle est encadree a gauche, pour qu'on
   voie que c'est une explication et pas une legende de plus. */
.onota.dp-liga{
  border-left:3px solid var(--trait);
  padding-left:var(--sp-12);
  margin-top:var(--sp-24);
}
.onota.dp-osm{margin-top:var(--sp-8);font-size:.75rem}

/* Le pont du sport dans l'agenda : meme bande que celui des offres,
   avec un liseré distinct pour qu'on ne prenne pas l'un pour l'autre
   quand les deux sont affiches l'un sous l'autre. */
.ofpuente.dppuente{border-left-color:#0B5560}

/* Sur telephone, la grille du sport passe a une colonne comme les
   autres : la regle vit deja dans la media query des offres. */

/* =====================================================================
   EMPRESAS (09/09/2026)
   Meme principe que le sport : l'ecran reutilise entierement les cartes
   des offres (`.ofcard`, `.ofgrid`, `.oftipo`, `.opill`). Ne sont
   ecrits ici que les quatre pastilles de categorie, le bandeau
   d'honnetete et le lien de correction.

   MEME REGLE DE COULEUR, celle payee le 26/08 par le contraste 1,09 :
   fond CLAIR, texte FONCE, chaque paire au-dessus de 7:1.

   ET UNE REGLE DE PLUS, celle du modele economique fige le 08/09 :
   AUCUNE de ces classes ne distingue une fiche payante d'une autre, et
   il ne doit jamais y en avoir. Pas de `.emcard.destacada`, pas de
   bordure doree, pas d'ombre plus large. Une fiche mise en avant par le
   style est une fiche qui se vend, et le modele l'interdit.
   ===================================================================== */
.oftipo.em-academia  {background:#EDE7FE;color:#4E2AA0;border-color:#D6C9F7}
.oftipo.em-guarderia {background:#E6F6EC;color:#14603A;border-color:#C6E7D3}
.oftipo.em-ocio      {background:#FFF1DC;color:#7A4A05;border-color:#F0D9B5}
.oftipo.em-tienda    {background:#E4F2FF;color:#0B4A75;border-color:#C2DFF5}

/* Le bandeau d'honnetete, en haut de l'ecran. Il porte la couleur de la
   marque parce que c'est un engagement, pas un avertissement. */
.ocard.emgratis{border-left:3px solid var(--violet, #7C4DE0)}

/* Le lien de correction, en bas de chaque fiche. Volontairement petit :
   il s'adresse au commercant, pas au parent. */
.emcorr{
  display:inline-block;margin-top:var(--sp-8);
  font-size:.72rem;color:var(--gris-2, #6B7280);text-decoration:underline;
}
.onota.em-osm{margin-top:var(--sp-8);font-size:.75rem}

/* Le pont des entreprises dans l'agenda : troisieme bande possible sous
   les sorties, avec son propre lisere pour qu'on ne la confonde ni avec
   celle des offres ni avec celle du sport. */
.ofpuente.empuente{border-left-color:#7C4DE0}

/* =====================================================================
   LA CHISPA EN QUATRE ECRANS PLEINS — 10/09/2026
   ---------------------------------------------------------------------
   Remplace les bulles de conversation du 28/08. Les regles de dessin
   viennent mot pour mot de la demande de le responsable :

     « Le seul endroit vraiment spectaculaire : ✨. Pas de neons, pas
       d'hologrammes, pas de 3D inutile, pas de particules, pas de
       cyberpunk, pas de gradients partout, pas d'animations lourdes.
       Le wow doit venir de la fluidite, des micro-interactions, des
       transitions, de la typographie, de la qualite du matching et de
       la simplicite. »

   Ce qui est donc ici : des transitions de 200 a 320 ms, une grille de
   tuiles, et rien qui tourne. Aucune ombre portee coloree, aucun
   degrade en dehors de ceux que la marque porte deja sur le rond.

   TOUT SE DESACTIVE sous `prefers-reduced-motion`, en bas de ce bloc.
   le responsable : « Le site doit fonctionner parfaitement sans les
   animations. » Sans, pas degrade : sans.
   ===================================================================== */

/* L'en-tete : retour, points d'avancement, fermeture. Trois zones de
   largeur egale, pour que les points soient au centre EXACT meme quand
   la fleche de retour n'est pas la (ecran 1). Un centre qui se deplace
   d'un ecran a l'autre est le genre de detail qu'on ne nomme pas mais
   qu'on sent. */
.ch-cab{display:flex;align-items:center;padding:12px 12px 4px;gap:8px}
.ch-atras,.ch-atras-hueco{width:36px;height:36px;flex:none}
.ch-atras{
  border-radius:50%;background:none;color:var(--doux);
  display:flex;align-items:center;justify-content:center;
}
.ch-atras:hover{background:var(--surface-2);color:var(--encre)}
.ch-puntos{flex:1;display:flex;justify-content:center;gap:7px}
/* LES POINTS. Ils remplacent « Question 2 sur 4 ». 7 px, pas 4 : en
   dessous, ils se lisent comme de la poussiere sur l'ecran. */
.ch-pt{
  width:7px;height:7px;border-radius:50%;background:var(--trait-fort);
  transition:background var(--d-court,.2s) var(--ease,ease),
             transform var(--d-court,.2s) var(--ease,ease);
}
.ch-pt.hecho{background:var(--ch-marca-100,#D8C9FB)}
.ch-pt.on{background:var(--ch-marca,#7C4DE0);transform:scale(1.35)}

.ch-cuerpo{padding:2px 16px 16px;overflow:auto}
/* L'ecran suivant ARRIVE, il n'apparait pas. 8 px de montee et 240 ms :
   assez pour que l'oeil suive, trop court pour qu'on attende. */
.ch-entra{animation:ch-entra .24s var(--ease,ease) both}

.ch-preg{
  font-size:1.32rem;line-height:1.25;font-weight:800;
  margin:6px 0 14px;color:var(--encre);text-align:center;
}

/* LA GRILLE DES BESOINS. Deux colonnes sur telephone, trois a partir de
   420 px. Jamais une seule : neuf tuiles en colonne, c'est la « longue
   page a faire defiler » que le responsable refuse. */
.ch-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(min-width:420px){ .ch-rejilla{grid-template-columns:1fr 1fr 1fr} }
.ch-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;padding:15px 8px;border-radius:var(--r-lg,14px);
  border:1.5px solid var(--trait);background:var(--surface);
  color:var(--encre);font-size:.86rem;font-weight:700;line-height:1.25;
  text-align:center;min-height:96px;
  transition:border-color .18s var(--ease,ease),background .18s var(--ease,ease),
             transform .18s var(--ease,ease);
}
.ch-tile.ancho{grid-column:1 / -1;flex-direction:row;min-height:0;padding:13px 14px}
.ch-tile:hover{border-color:var(--ch-marca,#7C4DE0);background:var(--ch-wash,#F0E9FE)}
/* L'ENFONCEMENT, et c'est la seule « micro-interaction » du parcours :
   la tuile recule de 3 % sous le doigt. Elle dit « j'ai senti », ce
   qu'aucun texte ne dit aussi vite. */
.ch-tile:active{transform:scale(.97)}
.ch-emo{font-size:1.6rem;line-height:1}
.ch-tile.ancho .ch-emo{font-size:1.25rem}

/* LES REPONSES EN RANGEE (ages, communes). Elles s'enroulent : quatre
   tranches d'age tiennent sur une ligne, sept communes sur trois. */
.ch-fila{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.ch-edad,.ch-ciudad,.ch-cerca{
  padding:13px 18px;border-radius:var(--r-pill,999px);
  border:1.5px solid var(--trait);background:var(--surface);
  color:var(--encre);font-size:.95rem;font-weight:700;
  transition:border-color .18s var(--ease,ease),background .18s var(--ease,ease),
             transform .18s var(--ease,ease);
}
.ch-edad:hover,.ch-ciudad:hover,.ch-cerca:hover{
  border-color:var(--ch-marca,#7C4DE0);background:var(--ch-wash,#F0E9FE)
}
.ch-edad:active,.ch-ciudad:active,.ch-cerca:active{transform:scale(.97)}
/* CE QUE LA FAMILLE A DEJA DIT. Le profil connait souvent l'age et la
   commune : la reponse probable est marquee, jamais pre-cochee. La
   pre-cocher, c'est repondre a sa place. */
.ch-edad.sugerida,.ch-ciudad.sugerida{
  border-color:var(--ch-marca,#7C4DE0);background:var(--ch-wash,#F0E9FE)
}
.ch-tuyo{
  display:block;font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ch-marca-fonce,#5A2FB0);margin-top:2px;
}
.ch-cerca{display:flex;align-items:center;gap:8px;margin:0 auto 12px;width:fit-content}
/* « Plusieurs ages », « Toute la comarque » : une sortie, pas un choix.
   Elle est donc un lien souligne, pas un cinquieme bouton — sinon elle
   pese autant que les vraies reponses. */
.ch-salta{
  display:block;margin:16px auto 0;background:none;color:var(--doux);
  font-size:.82rem;font-weight:700;text-decoration:underline;padding:8px 12px;
}
.ch-salta:hover{color:var(--encre)}

/* L'ECRAN « BUSCANDO… ». 900 ms, et rien n'est simule : voir chispa.js.
   Un seul cercle qui respire, pas trois points qui sautent — les points
   qui sautent, c'est le signe d'un chatbot qui ecrit. */
.ch-buscando{padding:34px 8px 30px;text-align:center}
.ch-orbe{
  display:block;width:52px;height:52px;margin:0 auto 16px;border-radius:50%;
  background:linear-gradient(150deg,var(--ch-marca-clair,#A47CEC),var(--ch-marca,#7C4DE0) 60%,var(--ch-marca-fonce,#5A2FB0));
  animation:ch-respira 1.1s var(--ease,ease) infinite;
}
@keyframes ch-respira{
  0%,100%{transform:scale(.86);opacity:.75}
  50%    {transform:scale(1);opacity:1}
}
.ch-bt{font-size:1.05rem;font-weight:700;color:var(--encre);margin:0}
.ch-mini-r{font-size:.82rem;color:var(--doux);margin:7px 0 0}

/* ---------- La page de resultats, version du 10/09/2026 ---------- */
.ch-res-cab{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:6px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--trait);
}
.ch-minis{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px}
/* Le titre de bloc. Il dit CE QUE C'EST (« Avec une date », « Ouvert
   toute l'annee ») et non d'ou ca vient : un parent ne distingue pas
   `events.json` de `negocios.json`, et n'a pas a le faire. */
.ch-blq{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--doux);font-weight:800;margin:22px 0 10px;
}
.ch-grid{margin-bottom:6px}
.ch-mas{display:block;margin:12px auto 0}
.ch-vacio{text-align:center;padding:30px 12px}
.ch-vacio .btn-primary{margin-top:14px}
/* L'ecran « rien trouve ». Orange et non rouge : ce n'est pas une
   erreur du parent, c'est un trou de notre catalogue. */
.ocard.ch-nada{border-left:3px solid #E08A00}
/* L'invitation au compte. Elle est SOUS les resultats, jamais devant :
   voir chispa.js, section 5. */
.ocard.ch-cuenta{border-left:3px solid var(--ch-marca,#7C4DE0);margin-top:26px}
.ch-ben{margin:10px 0 14px;padding-left:18px;color:var(--encre);font-size:.9rem;line-height:1.65}
.ch-sin{
  display:block;margin:10px auto 0;background:none;color:var(--doux);
  font-size:.82rem;font-weight:700;text-decoration:underline;padding:8px 12px;
}
.ch-sin:hover{color:var(--encre)}

/* LE HALO QUI S'ETEND, a l'appui sur le rond. le responsable : « Le halo du
   bouton s'etend. L'ecran change legerement. Le moteur semble
   s'activer. » Une onde qui part du rond et se dissipe en 600 ms. Elle
   ne bloque rien : la fenetre s'ouvre pendant, pas apres. */
.ch-fab.ch-encendido .ch-nucleo{animation:ch-enciende .62s var(--ease,ease)}
.ch-fab.ch-encendido::after{
  content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;
  margin:-28px 0 0 -28px;border-radius:50%;
  border:2px solid var(--ch-marca,#7C4DE0);
  animation:ch-onda .62s var(--ease,ease) forwards;pointer-events:none;
}
@keyframes ch-enciende{
  0%{transform:scale(1)} 45%{transform:scale(1.12)} 100%{transform:scale(1)}
}
@keyframes ch-onda{
  from{transform:scale(1);opacity:.55} to{transform:scale(2.4);opacity:0}
}

/* Les couleurs des trois categories nees le 10/09/2026. Elles suivent
   la meme logique que les quatre du 09/09 : un fond tres clair, un
   texte fonce, une bordure entre les deux. Rien de sature — ce sont
   des etiquettes, pas des alertes. */
.oftipo.em-comer   {background:#FFECEC;color:#8A2020;border-color:#F5CFCF}
.oftipo.em-cultura {background:#F0EAFB;color:#4A2A85;border-color:#DDD0F2}
.oftipo.em-aire    {background:#E9F7E4;color:#2A5E17;border-color:#CDEBC2}
/* Les equipements enfants REELLEMENT declares par la source. Vert, et
   discrets : quatre fiches sur 321 en portent un. Voir negocios.js. */
.opill.emserv{background:#E9F7E4;color:#2A5E17}

/* =====================================================================
   SANS ANIMATION — et « sans », pas « degrade ».
   Un parent qui a coche « reduire les animations » dans son telephone
   doit voir EXACTEMENT les memes ecrans, aux memes endroits, avec les
   memes informations. Seul le mouvement disparait.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .ch-entra{animation:none}
  .ch-orbe{animation:none;opacity:1;transform:none}
  .ch-tile,.ch-edad,.ch-ciudad,.ch-cerca{transition:none}
  .ch-tile:active,.ch-edad:active,.ch-ciudad:active,.ch-cerca:active{transform:none}
  .ch-pt{transition:none}
  .ch-fab.ch-encendido .ch-nucleo{animation:none}
  .ch-fab.ch-encendido::after{display:none}
}

/* =====================================================================
   16. LE MOTEUR « ✨ » — la fenetre de la chispa, refaite le 10/09/2026
   ---------------------------------------------------------------------
   POURQUOI UN SEIZIEME BLOC PLUTOT QU'UNE RETOUCHE DU QUINZIEME
   La chispa avait, depuis le 10/09 au matin, quatre ecrans propres dans
   une FEUILLE BLANCHE remontee du bas — la meme forme que la fiche, que
   la roulette et que le mode enfant. le responsable a vu chez Hola Blanca ce
   que ce meme parcours donne dans une SURFACE SOMBRE qui se deploie
   depuis le bouton, et il demande la meme chose ici, « aux couleurs de
   Hola Ninos, avec les references de Hola Ninos dedans ».

   Ce n'est pas une repeinte : une feuille blanche de 84 % de hauteur et
   une surface sombre plein ecran n'ont pas les memes regles de
   contraste, pas les memes ombres et pas la meme facon d'entrer. Les
   deux ne pouvaient pas cohabiter dans le meme jeu de classes sans que
   chaque correction de l'une casse l'autre. D'ou un espace de noms a
   part, « mot- », et l'ancien qui garde ce qui sert encore : le rond du
   bas, et la PAGE de resultats (`ch-res-*`), qui reste claire parce
   qu'elle est une page du site et non un moment.

   CE QUI VIENT DE HOLA BLANCA : la forme, les durees, l'ordre des
   ecrans, le disque qui s'ouvre depuis le bouton, les trois points, la
   cascade des cartes.
   CE QUI EST DE HOLA NINOS, ET QUI N'A PAS ETE COPIE : la couleur. Le
   panneau de Hola Blanca est ambre et terre cuite ; celui-ci est violet
   et magenta, c'est-a-dire --br-grad, le degrade de la marque.

   ---------------------------------------------------------------------
   PASSE EN CLAIR LE 15/09/2026, A LA DEMANDE DU RESPONSABLE :
   « Bouton magique : modifier son design pour passer d'un format Dark a
   un format Light, le rendu en mode sombre n'est pas esthetique. »

   CE QUI A CHANGE, ET CE QUI N'A PAS BOUGE. La forme, les durees, le
   disque qui s'ouvre depuis le rond, la cascade des cartes, les trois
   points : rien de tout cela n'a bouge. Ce sont les COULEURS qui
   changent, et elles changent A UN SEUL ENDROIT — ce bloc :root. Le
   reste du moteur n'ecrit plus une seule couleur en dur.

   POUR Y ARRIVER, QUATRE VARIABLES NEUVES. Le panneau sombre ecrivait
   ses surfaces en blanc translucide (`rgba(255,255,255,.07)`) : sur un
   fond clair, un blanc translucide est INVISIBLE. Les vingt-quatre
   occurrences sont devenues quatre variables, teintees de violet, qui
   se voient sur du clair. Repeindre en changeant seulement le fond
   aurait rendu un panneau blanc sur blanc, sans une seule bordure.

   CONTRASTES MESURES SUR LE FOND CLAIR #F7F3FF :
     --mg-fuerte #1B1033 = 16,4    --mg-texto #2A1B4A = 12,7
     --mg-2      #5B32B8 = 7,73    --mg-doux  #675580 = 5,53
   Tous au-dessus de 4,5 (WCAG AA texte normal), les deux premiers
   au-dessus de 7 (AAA). Et sur le violet plein #7C4DE0 : blanc = 5,26,
   c'est pourquoi --mg-tinta reste BLANC — il n'ecrit que sur le violet
   des vignettes et des boutons, qui n'a pas change.
   ===================================================================== */
:root{
  --mg-1:#7C4DE0;        /* le violet, le coeur du degrade — inchange */
  --mg-2:#5B32B8;        /* l'accent : ce qui s'ecrit en violet sur le clair */
  --mg-3:#A47CEC;        /* le haut du degrade — inchange */
  --mg-fonce:#C05BD8;    /* la magenta, le bas du degrade — inchange */
  --mg-tinta:#FFFFFF;    /* ce qu'on ecrit SUR le violet plein */
  --mg-fondo:#F7F3FF;    /* le fond du panneau : un blanc violace */
  --mg-fondo-2:#FFFFFF;
  --mg-texto:#2A1B4A;    /* le texte courant */
  --mg-fuerte:#1B1033;   /* ce qui etait blanc : les titres et les nombres */
  /* ASSOMBRI LE 15/09/2026 AU SOIR, de #675580 a #56446F. Raison : le
     fond anime de la section 19 a ete pousse beaucoup plus loin, et le
     texte secondaire devait garder ses 4,5:1 SUR LE COMPOSITE le plus
     charge, pas seulement sur le fond nu. Mesure : 5,53 -> 7,83 sur
     --mg-fondo, et 5,17 sur le point le plus colore de l'accueil.
     Le changement n'abaisse aucun contraste ailleurs : il ne fait que
     foncer un gris deja fonce. */
  --mg-doux:#56446F;     /* le texte secondaire */
  /* LES QUATRE SURFACES. Elles remplacent le blanc translucide du
     panneau sombre. Teintees de violet, et non grises : un gris
     translucide sur un fond violace vire au sale. */
  --mg-vidrio-0:rgba(124,77,224,.03);
  --mg-vidrio:rgba(124,77,224,.06);
  --mg-vidrio-2:rgba(124,77,224,.13);
  --mg-vidrio-3:rgba(124,77,224,.20);
  --mg-borde:rgba(124,77,224,.17);
  --mg-borde-2:rgba(124,77,224,.32);
  /* Le liseré CLAIR des vignettes violettes : celui-la reste blanc,
     parce qu'il est pose SUR le violet plein et nulle part ailleurs. */
  --mg-realce:rgba(255,255,255,.28);
  --mg-rgb:124,77,224;
  --mg-2-rgb:91,50,184;
  --mg-3-rgb:164,124,236;
  --mg-fonce-rgb:192,91,216;
  /* AJOUTE LE 15/09/2026 AU SOIR. Un bleu-violet, quatrieme teinte du
     fond anime de la section 19 — et LA SEULE du projet qui ne soit pas
     de la marque. Raison : un degrade fait de trois violets et d'un
     magenta se lit comme un lavis, pas comme une nebuleuse ; il faut
     deux bouts de spectre pour qu'un maillage de couleurs se voie. Il
     reste DANS la famille froide (teinte 231 deg contre 258 pour
     --mg-1), il ne sert QUE de fond, et aucun texte, aucun bouton,
     aucune icone ne le porte. */
  --mg-azul-rgb:91,107,240;
}

/* ---- l'ouverture : elle part du bouton, litteralement -------------------
   Le fond est decoupe en un disque centre sur le rond qu'on vient de
   toucher, et ce disque grandit jusqu'a couvrir l'ecran. Le point arrive en
   variables CSS depuis chispa.js. C'est ce qui fait comprendre, sans une
   ligne de texte, que ce panneau EST ce bouton en grand. A defaut de point,
   on repart du bas du milieu, la ou le rond se tient sur telephone. */
/* DEUX COUCHES, ET C'EST UNE CORRECTION, PAS UN RAFFINEMENT.
   Le disque etait d'abord decoupe dans .mot-fond lui-meme. Or `clip-path`
   ne coupe pas que l'image : il coupe aussi la ZONE SENSIBLE AU DOIGT.
   Pendant les 460 ms de l'ouverture, tout ce qui etait hors du disque
   laissait donc passer le toucher jusqu'a la page en dessous. Reproduit
   a l'ecran le 10/09/2026 : deux touchers rapides — le rond, puis une
   carte — et le second atterrissait dans le champ de recherche de
   l'agenda, derriere le panneau.
   Le fond ne porte donc plus que le role de capteur : il couvre l'ecran
   du premier au dernier instant. C'est le VOILE, a l'interieur, qui
   s'ouvre en disque, et il ne recoit aucun toucher. */
.mot-fond{
  position:fixed;inset:0;z-index:400;display:none;
  align-items:flex-end;justify-content:center;
}
.mot-fond.open{display:flex}
.mot-velo{
  position:absolute;inset:0;pointer-events:none;
  background:rgba(16,10,30,.62);
  -webkit-backdrop-filter:blur(6px) saturate(120%);
  backdrop-filter:blur(6px) saturate(120%);
  clip-path:circle(0px at var(--ox,50%) var(--oy,92%));
}
.mot-fond.open .mot-velo{
  animation:mot-desplegar .46s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes mot-desplegar{
  to{clip-path:circle(160vmax at var(--ox,50%) var(--oy,92%))}
}
.mot-fond.cerrando .mot-velo{animation:mot-plegar .24s ease-in forwards}
@keyframes mot-plegar{
  from{clip-path:circle(160vmax at var(--ox,50%) var(--oy,92%))}
  to{clip-path:circle(0px at var(--ox,50%) var(--oy,92%))}
}

.mot-escena{
  position:relative;z-index:1;overflow:hidden;width:100%;max-width:760px;
  height:94vh;height:94dvh;
  display:flex;flex-direction:column;
  border-radius:26px 26px 0 0;
  background:linear-gradient(168deg,var(--mg-fondo-2) 0%,var(--mg-fondo) 64%);
  color:var(--mg-texto);
  box-shadow:0 -18px 70px rgba(38,22,72,.26),0 0 0 1px var(--mg-borde);
  animation:mot-entra .42s cubic-bezier(.22,1,.36,1) both;
}
.mot-escena:focus{outline:none}
@keyframes mot-entra{
  from{transform:translateY(26px) scale(.97);opacity:.4}
  to{transform:none;opacity:1}
}
@media(min-width:721px){
  .mot-fond{align-items:center}
  .mot-escena{border-radius:26px;height:min(88vh,760px)}
}

/* LA LUMIERE. Deux taches qui derivent lentement, tres loin derriere. Rien
   ne s'y lit : c'est ce qui donne a la surface son air d'etre allumee. La
   premiere est violette, la seconde magenta — les deux bouts de --br-grad.
   Deux taches de la meme teinte n'auraient donne aucune profondeur. */
.mot-luz{
  position:absolute;pointer-events:none;z-index:0;border-radius:50%;
  width:70%;padding-bottom:70%;top:-22%;left:-18%;
  background:radial-gradient(circle at 50% 50%,rgba(var(--mg-rgb),.13),transparent 68%);
  filter:blur(24px);
  animation:mot-deriva 19s ease-in-out infinite alternate;
}
.mot-luz.dos{
  top:auto;left:auto;right:-24%;bottom:-26%;width:62%;padding-bottom:62%;
  background:radial-gradient(circle at 50% 50%,rgba(var(--mg-fonce-rgb),.10),transparent 68%);
  animation-duration:23s;animation-direction:alternate-reverse;
}
@keyframes mot-deriva{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(7%,6%,0) scale(1.18)}
}

/* ---- la barre du haut : retour, reperage, fermeture ---------------------
   TROIS ZONES DE LARGEUR EGALE, et les points au centre EXACT. Le retour
   est un rond de 34 px sans texte, exactement de la taille de la croix qui
   lui fait face : c'est la seule facon d'avoir les points au meme endroit
   d'un ecran a l'autre. Il garde son nom pour les lecteurs d'ecran. */
.mot-cabecera{
  position:relative;z-index:2;flex:none;
  display:flex;align-items:center;gap:10px;
  padding:14px 16px 4px;
}
.mot-atras,.mot-hueco{flex:none;width:34px;height:34px}
.mot-atras{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--mg-vidrio);border:none;
  cursor:pointer;font-family:inherit;color:var(--mg-doux);padding:0;
}
.mot-atras:hover{background:var(--mg-vidrio-2);color:var(--mg-fuerte)}
.mot-atras:focus-visible{outline:2px solid var(--mg-2);outline-offset:2px}
/* LES POINTS RESTENT RONDS, Y COMPRIS L'ACTIF : le point courant grossit
   d'un tiers, il ne s'allonge pas en barre. Une barre qui se remplit est
   une jauge, et une jauge est le vocabulaire du formulaire. */
.mot-puntos{flex:1;display:flex;gap:7px;align-items:center;justify-content:center}
.mot-puntos i{
  display:block;width:7px;height:7px;border-radius:50%;
  background:var(--mg-vidrio-3);
  transition:background var(--d-normal) var(--ease),transform var(--d-normal) var(--ease);
}
.mot-puntos i.hecho{background:rgba(var(--mg-3-rgb),.55)}
.mot-puntos i.on{background:var(--mg-1);transform:scale(1.35)}
.mot-x{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--mg-vidrio);border:none;color:var(--mg-texto);font-family:inherit;
}
.mot-x:hover{background:var(--mg-vidrio-2);color:var(--mg-fuerte)}
.mot-x:focus-visible{outline:2px solid var(--mg-2);outline-offset:2px}

/* ---- le corps ---- */
.mot-cuerpo{
  position:relative;z-index:1;flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:8px 18px calc(26px + env(safe-area-inset-bottom,0px));
}
/* L'ECRAN SUIVANT ARRIVE, IL N'APPARAIT PAS : 8 px de montee, 240 ms.
   Assez pour que l'oeil suive, trop court pour qu'on attende. */
.mot-paso{animation:mot-paso-in .24s var(--ease) both}
@keyframes mot-paso-in{
  from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}
}
.mot-h{
  margin:12px 0 0;font-family:var(--f-display);font-size:26px;line-height:1.18;
  font-weight:var(--w-semi);letter-spacing:-.02em;color:var(--mg-fuerte);
}
.mot-sub{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--mg-doux)}
.mot-honesto{margin:14px 0 0;font-size:11.5px;line-height:1.45;color:var(--mg-doux)}

/* ---- les grandes cartes du choix ---------------------------------------
   Volontairement grandes : c'est le premier ecran, il doit se toucher au
   pouce sans viser. Deux par ligne sur telephone, trois des qu'il y a la
   place. Elles entrent en cascade, chacune 60 ms apres la precedente. */
.mot-rejilla{
  display:grid;gap:11px;margin-top:18px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.mot-carta{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  min-height:126px;padding:16px 15px 14px;cursor:pointer;text-align:left;
  font-family:inherit;color:var(--mg-texto);
  border:1px solid var(--mg-borde);border-radius:18px;
  background:linear-gradient(160deg,var(--mg-vidrio),var(--mg-vidrio-0));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:mot-carta-in .38s var(--ease) both;
  animation-delay:calc(var(--i,0) * 60ms);
  transition:border-color var(--d-court) var(--ease-doux),
             transform var(--d-court) var(--ease-doux),
             box-shadow var(--d-court) var(--ease-doux);
}
.mot-carta.ancho{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center;gap:12px}
/* LA CARTE COURTE, pour les reponses qui tiennent en trois caracteres.
   Vu a l'ecran le 10/09/2026 dans un cadre de 390 px : « 0-2 », « 3-5 »,
   « 6-9 », « 10+ » posees dans la carte de 126 px des besoins donnaient
   quatre grandes boites vides avec une etiquette minuscule en haut a
   gauche. Une carte n'a pas a etre grande, elle a a etre facile a
   toucher : celle-ci fait 74 px, ce qui est deja plus du double de la
   cible tactile recommandee, et son mot est au centre. */
.mot-carta.corta{
  min-height:74px;padding:18px 14px;align-items:center;justify-content:center;
  text-align:center;gap:3px;
}
.mot-carta.corta b{font-size:18px}
.mot-carta.corta i{margin-top:0;font-size:10.5px;font-weight:var(--w-semi);
  letter-spacing:.05em;text-transform:uppercase;color:var(--mg-2)}
.mot-carta:hover{
  border-color:rgba(var(--mg-3-rgb),.6);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(var(--mg-rgb),.16);
}
/* L'ENFONCEMENT SOUS LE DOIGT, a 3 % : a 1,5 % on ne le sent pas, et une
   reaction qu'on ne sent pas ne sert a rien. */
.mot-carta:active{transform:scale(.97)}
.mot-carta:focus-visible{outline:2px solid var(--mg-2);outline-offset:3px}
.mot-carta b{
  font-family:var(--f-display);font-size:15.5px;line-height:1.25;
  font-weight:var(--w-semi);color:var(--mg-fuerte);
}
.mot-carta i{font-style:normal;font-size:12px;color:var(--mg-doux);margin-top:auto}
.mot-carta.ancho i{margin-top:0}
/* LA VIGNETTE EST PLEINE, PAS TRANSLUCIDE : un degrade a 60 % pose sur le
   fond sombre rend un violet terne sur lequel l'emoji se perd. */
.mot-ico{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:13px;margin-bottom:6px;font-size:21px;line-height:1;
  color:var(--mg-tinta);
  background:linear-gradient(150deg,var(--mg-3),var(--mg-1) 70%);
  box-shadow:inset 0 0 0 1px var(--mg-realce);
}
.mot-carta.ancho .mot-ico{margin-bottom:0;flex:none}
@keyframes mot-carta-in{
  from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}
}

/* ---- « ou ? » : un vrai champ, et les communes qui existent ------------- */
.mot-campo{
  display:flex;align-items:center;gap:10px;margin-top:16px;
  border:1px solid var(--mg-borde-2);border-radius:var(--r-pill);
  background:var(--mg-vidrio);padding:0 16px;
}
.mot-campo svg{flex:none;color:var(--mg-doux)}
.mot-campo input{
  flex:1;min-width:0;border:none;background:none;color:var(--mg-fuerte);font-family:inherit;
  font-size:16px;padding:14px 0;
}
.mot-campo input::placeholder{color:var(--mg-doux)}
.mot-campo input:focus{outline:none}
/* LA CROIX DU NAVIGATEUR EST RETIREE. `type="search"` en pose une, et
   Chrome la dessine en bleu clair : sur le panneau violet, c'etait la
   seule chose a l'ecran qui n'appartenait pas a la marque. Vu dans un
   cadre de 390 px le 10/09/2026. Le champ reste effacable au clavier,
   et changer de commune se fait de toute facon en touchant une autre
   suggestion. */
.mot-campo input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.mot-campo:focus-within{border-color:var(--mg-2);box-shadow:0 0 0 3px rgba(var(--mg-2-rgb),.2)}
.mot-sug{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.mot-sug li{animation:mot-sug-in .26s var(--ease) both;animation-delay:calc(var(--i,0) * 26ms)}
.mot-sug button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:14px;cursor:pointer;font-family:inherit;
  border:1px solid var(--mg-borde);background:var(--mg-vidrio);
  color:var(--mg-texto);font-size:15px;text-align:left;
  transition:background var(--d-court) var(--ease-doux),
             border-color var(--d-court) var(--ease-doux);
}
.mot-sug button:hover{background:rgba(var(--mg-3-rgb),.2);border-color:rgba(var(--mg-3-rgb),.5)}
.mot-sug button:focus-visible{outline:2px solid var(--mg-2);outline-offset:2px}
.mot-sug em{font-style:normal;font-size:12px;color:var(--mg-doux)}
@keyframes mot-sug-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.mot-vacio{margin:16px 0 0;font-size:14px;color:var(--mg-doux)}
/* La sortie « toute la comarque » : un lien, pas un huitieme bouton. */
.mot-salta{
  display:block;margin:16px auto 0;background:none;border:none;cursor:pointer;
  color:var(--mg-doux);font-family:inherit;font-size:13px;font-weight:var(--w-semi);
  text-decoration:underline;padding:8px 12px;
}
.mot-salta:hover{color:var(--mg-fuerte)}

/* ---- le temps de la recherche : court, et jamais faux ------------------- */
.mot-escaneo{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:8vh}
/* L'ORBE. Il RESPIRE — le disque enfle et se retire — et son halo bat
   par-dessus. Un halo qui bat sans que la forme bouge se lit comme un
   voyant d'alerte, pas comme quelque chose qui travaille. */
.mot-orbe{
  display:flex;align-items:center;justify-content:center;width:76px;height:76px;
  border-radius:50%;color:var(--mg-tinta);
  background:linear-gradient(150deg,var(--mg-3),var(--mg-1) 55%,var(--mg-fonce));
  box-shadow:0 0 0 0 rgba(var(--mg-rgb),.5);
  animation:mot-pulso 1.5s ease-out infinite,mot-respira 1.1s var(--ease) infinite;
}
@keyframes mot-pulso{
  0%{box-shadow:0 0 0 0 rgba(var(--mg-rgb),.5)}
  70%{box-shadow:0 0 0 26px rgba(var(--mg-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--mg-rgb),0)}
}
@keyframes mot-respira{
  0%,100%{transform:scale(.88)} 50%{transform:scale(1)}
}
.mot-escaneo .mot-h{font-size:21px}
.mot-check{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;
  font-size:13.5px;color:var(--mg-doux);min-width:min(280px,86%)}
.mot-check li{display:flex;justify-content:space-between;gap:14px;
  padding:10px 14px;border-radius:12px;background:var(--mg-vidrio)}
.mot-check li b{color:var(--mg-doux);font-weight:var(--w-semi)}
.mot-check li{transition:color .35s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.mot-check li.ok{color:var(--mg-fuerte);transform:scale(1.02)}
.mot-check li.ok b{color:var(--mg-2)}

/* ---- les resultats ------------------------------------------------------ */
.mot-cuenta{
  display:flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--mg-2);
}
.mot-cuenta b{font-family:var(--f-display);font-size:20px;font-weight:var(--w-semi);color:var(--mg-fuerte)}
.mot-resumen{margin:4px 0 0;font-size:13px;color:var(--mg-doux)}
/* LES CONFETTIS DES RESULTATS, poses le 10/10/2026. UNE SEULE RAFALE,
   JAMAIS EN BOUCLE : au contraire des decors d'ambiance ci-dessus, elle
   se joue une fois a l'arrivee des resultats puis se retire du document
   (voir `confeti()` dans chispa.js) — elle ne peut donc jamais ralentir
   un ecran qui reste ouvert. */
.mot-confeti{
  position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;
  border-radius:inherit;
}
.mot-confeti i{
  position:absolute;top:-10px;left:0;width:7px;height:11px;border-radius:2px;
  background:var(--mg-3);opacity:0;
  animation:mot-confeti-cae .95s cubic-bezier(.25,.65,.3,1) both;
}
.mot-confeti i:nth-child(2n){background:#FFB74D;width:6px;height:6px;border-radius:50%}
.mot-confeti i:nth-child(3n){background:#35B36B}
.mot-confeti i:nth-child(5n){background:#2E86DE}
.mot-confeti i:nth-child(7n){background:var(--mg-2)}
@keyframes mot-confeti-cae{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(480%) rotate(var(--giro,360deg));opacity:0}
}
@media(prefers-reduced-motion:reduce){ .mot-confeti{display:none} }
/* `minmax(0,1fr)` ET PAS LA COLONNE PAR DEFAUT. Une colonne de grille
   vaut par defaut `minmax(min-content,1fr)` : sa largeur est celle de
   son element le plus large, et une ligne de resultat porte parfois un
   nom de quarante caracteres. Vu dans un cadre de 390 px le 10/09/2026 :
   « Escuela de Arte Superior y Diseño de Orihuela » poussait la colonne
   au-dela du panneau, et LES TROIS lignes debordaient a droite, fleche
   comprise — y compris « Dojo Kando », qui tient en dix caracteres.
   Avec 0 comme minimum, la colonne ne depasse jamais le corps, et
   l'ellipse du titre fait le reste. */
.mot-lista{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:16px}
.mot-ficha{
  display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:16px;
  width:100%;text-align:left;cursor:pointer;font-family:inherit;
  border:1px solid var(--mg-borde);background:var(--mg-vidrio);
  color:var(--mg-texto);
  animation:mot-ficha-in .4s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms);
  transition:border-color var(--d-court) var(--ease-doux),
             transform var(--d-court) var(--ease-doux),
             background var(--d-court) var(--ease-doux);
}
.mot-ficha:hover{
  border-color:rgba(var(--mg-3-rgb),.55);background:rgba(var(--mg-3-rgb),.13);
  transform:translateY(-2px);
}
.mot-ficha:focus-visible{outline:2px solid var(--mg-2);outline-offset:3px}
@keyframes mot-ficha-in{
  from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}
}
.mot-av{
  flex:none;width:46px;height:46px;border-radius:13px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  color:var(--mg-tinta);
  background:linear-gradient(150deg,var(--mg-3),var(--mg-1) 70%);
  box-shadow:inset 0 0 0 1px var(--mg-realce);
}
.mot-f-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mot-f-txt b{font-size:14.5px;font-weight:var(--w-semi);color:var(--mg-fuerte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mot-f-txt i{font-style:normal;font-size:12px;color:var(--mg-doux);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* LE FAIT VERIFIABLE, ET RIEN D'AUTRE. Une date, ou la forme que la source
   declare. Pas d'etoile, pas de note, pas de « recommande » : HolaNinos ne
   vend pas de visibilite, et une pastille de qualite serait la premiere
   chose qui se vendrait. */
.mot-sello{
  align-self:flex-start;font-style:normal;font-size:10.5px;font-weight:var(--w-semi);
  padding:2px 7px;border-radius:100px;margin:1px 0;
  color:var(--mg-2);background:rgba(var(--mg-2-rgb),.13);
  border:1px solid rgba(var(--mg-2-rgb),.3);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mot-f-ir{flex:none;color:var(--mg-doux)}
/* « VOIR TOUS LES RESULTATS » · un vrai bouton, pas un lien de bas de page.
   Il n'y a que trois fiches au-dessus de lui : ce bouton est le chemin
   normal vers le reste, et un lien souligne de 13 px se serait fait manquer
   sur un telephone. */
.mot-todos{
  display:flex;align-items:center;justify-content:center;width:100%;
  margin-top:14px;padding:13px 20px;border-radius:var(--r-pill);cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:var(--w-semi);text-align:center;
  color:var(--mg-texto);
  border:1.5px solid rgba(var(--mg-3-rgb),.42);background:rgba(var(--mg-rgb),.12);
  transition:background var(--d-court) var(--ease-doux),
             border-color var(--d-court) var(--ease-doux);
}
.mot-todos:hover{background:rgba(var(--mg-rgb),.2);border-color:rgba(var(--mg-3-rgb),.62)}
.mot-todos:focus-visible{outline:2px solid var(--mg-2);outline-offset:3px}
.mot-nada{margin-top:18px;padding:18px;border-radius:18px;
  border:1px solid var(--mg-borde);background:var(--mg-vidrio)}
.mot-nada p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--mg-texto)}

/* ---- les deux blocs du bas : garder la recherche, puis demander --------- */
.mot-guardar,.mot-pedir{
  margin-top:20px;padding:16px;border-radius:18px;
  border:1px solid var(--mg-borde);background:var(--mg-vidrio);
}
.mot-pedir{border-color:rgba(var(--mg-3-rgb),.34);background:rgba(var(--mg-rgb),.14)}
.mot-guardar b,.mot-pedir b{display:block;font-family:var(--f-display);
  font-size:15.5px;font-weight:var(--w-semi);color:var(--mg-fuerte)}
.mot-guardar p,.mot-pedir p{margin:6px 0 12px;font-size:13.5px;line-height:1.5;
  color:var(--mg-texto)}
.mot-guardar ul{margin:0 0 12px;padding-left:18px;font-size:13px;line-height:1.6;
  color:var(--mg-doux)}
.mot-pedir i{display:block;margin-top:10px;font-style:normal;font-size:11.5px;
  line-height:1.45;color:var(--mg-doux)}

/* ---- les boutons -------------------------------------------------------- */
.mot-boton{
  border:none;border-radius:var(--r-pill);cursor:pointer;
  padding:12px 20px;font-family:inherit;font-size:14.5px;font-weight:var(--w-semi);
  color:var(--mg-tinta);background:linear-gradient(120deg,var(--mg-1),var(--mg-fonce));
  box-shadow:0 8px 22px rgba(var(--mg-rgb),.24);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.mot-boton:hover{filter:brightness(1.07)}
.mot-boton:focus-visible{outline:2px solid var(--mg-2);outline-offset:3px}
.mot-boton.grande{width:100%;margin-top:4px;padding:15px 20px;font-size:15px}
.mot-boton.pale{background:none;border:1.5px solid var(--mg-borde-2);
  box-shadow:none;color:var(--mg-texto)}
.mot-boton.pale:hover{background:var(--mg-vidrio-2);filter:none}

/* LE MOUVEMENT EST UN CONFORT, JAMAIS UNE INFORMATION.
   Quand le systeme demande moins d'animation, tout s'arrete et rien ne
   disparait : le disque d'ouverture devient une apparition franche, les
   cartes sont la d'emblee, la lumiere de fond cesse de deriver. Le parcours,
   lui, est exactement le meme. */
@media(prefers-reduced-motion:reduce){
  .mot-velo,.mot-fond.open .mot-velo,.mot-fond.cerrando .mot-velo{
    animation:none;clip-path:none}
  .mot-escena,.mot-paso,.mot-carta,.mot-ficha,.mot-sug li{animation:none}
  .mot-luz{animation:none}
  .mot-orbe{animation:none}
  .mot-carta:hover,.mot-ficha:hover{transform:none}
  .mot-carta:active{transform:none}
}
@media print{ .mot-fond{display:none !important} }

/* =====================================================================
   BLOC 17 · L'ECRAN D'ACCUEIL (15/09/2026, REFAIT EN ETAPES LE MEME SOIR)
   ---------------------------------------------------------------------
   Il emprunte la palette ET les classes du moteur (`--mg-*`, `.mot-*`,
   bloc 16). C'est la demande, deux fois plutot qu'une : « adopter la
   meme interface que le bouton magique des l'ouverture », puis « en
   gros la premiere section de l'accueil c'est comme dans le bouton
   magique ». Il n'y a donc presque rien ici : l'en-tete a points, les
   cartes, le champ des communes et les suggestions sont ceux du moteur,
   sans une ligne de copie.

   CE QUI A DISPARU CE SOIR, ET POURQUOI. Les quatre rangees de puces
   (`.ini-tira`, `.ini-puce`) defilaient horizontalement : jusqu'a
   1326 px de contenu dans 360 px de large, donc coupees net au bord
   droit. le responsable, sur son telephone : « ca deborde beaucoup sur la
   droite de l'ecran ». Une rangee coupee ne dit pas « il y a une
   suite », elle dit « c'est casse » — et quatre rangees coupees le
   disent quatre fois. Une question par ecran : plus rien ne defile,
   donc plus rien a couper.

   CE QUI RESTE DIFFERENT DU MOTEUR. Le moteur est un PANNEAU pose sur
   le site (fond, ombre, bord arrondi, croix de fermeture). L'accueil est
   une PAGE : ni fond, ni ombre, ni croix, et son en-tete n'a pas de
   remplissage lateral — la page en a deja un.
   ===================================================================== */
/* LE BAS DE L'ACCUEIL PASSE DE 30 A 76 px. Vu a l'ecran le 15/09/2026
   au soir, dans un cadre de 500 px : le rond violet de la barre du bas
   DEPASSE de sa barre (il est surcale) et recouvrait le milieu de
   « Ou voir toute l'agenda » — le mot central etait illisible. Le
   defaut est anterieur a ce cycle, il n'a rien a voir avec le fond
   anime ; il se voit ici parce que c'est le premier cycle ou cet
   ecran a ete regarde jusqu'en bas. */
#v-inicio{padding:6px 0 76px}
/* L'en-tete du moteur vit dans un panneau qui a ses propres marges ;
   ici la page les porte deja. Sans ca, les points se decalent de 16 px
   vers l'interieur et ne sont plus au centre de l'ecran. */
#v-inicio .mot-cabecera{padding:2px 0 6px}
.ini-t{
  font-family:var(--f-display);font-size:clamp(25px,6.6vw,34px);line-height:1.14;
  font-weight:var(--w-semi);letter-spacing:-.025em;margin:10px 0 0;color:var(--mg-fuerte);
}
.ini-s{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:var(--mg-doux);max-width:46ch}
/* LES TROIS PORTES sont des cartes LARGES : une par ligne, pleine
   largeur. Deux colonnes auraient coupe « Comer con ninos » en deux
   lignes dans un cadre de 360 px, et c'est exactement le genre de
   detail qui fait croire que la page deborde. */
.ini-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ini-txt b{
  font-family:var(--f-display);font-size:16.5px;line-height:1.2;
  font-weight:var(--w-semi);color:var(--mg-fuerte);
}
.ini-txt i{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--mg-doux)}
.ini-ir{flex:none;color:var(--mg-doux)}
.ini-honesto{margin:16px 0 0;font-size:11.5px;line-height:1.45;color:var(--mg-doux)}
/* LA SORTIE DE SECOURS. Un parent qui ne veut repondre a rien doit
   pouvoir atteindre la liste entiere d'un seul geste. */
.ini-salta{
  display:block;width:100%;margin:14px 0 0;padding:10px;border:none;background:none;
  cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:var(--w-semi);
  color:var(--mg-2);text-decoration:underline;text-underline-offset:3px;
}
.ini-salta:hover{color:var(--mg-fuerte)}
@media(min-width:721px){
  #v-inicio{max-width:640px;margin:0 auto}
}

/* L'ACCUEIL SE TIENT SEUL. Trois bandes vivent HORS des vues, donc
   au-dessus de n'importe laquelle : la question des vacances
   (`#modoBand`), la preuve de fraicheur (`#proof`) et le rail de quinze
   puces (`#seccionesRail`). Ensemble elles occupaient les deux tiers du
   premier ecran d'un telephone AVANT la premiere question — c'est-a-dire
   exactement « le surplus de vignettes et d'elements visuels a
   l'arrivee » que la demande du 15/09/2026 veut voir disparaitre.
   Elles ne sont ni supprimees ni deplacees : elles se TAISENT sur
   l'accueil, et reapparaissent telles quelles des qu'on ouvre l'agenda.
   La bande des vacances reste atteignable : elle revient au premier
   passage par l'agenda, ou le parent la voit avant de filtrer. */
body[data-view="inicio"] #modoBand,
body[data-view="inicio"] #proof,
body[data-view="inicio"] #seccionesRail{display:none}
/* Le grand visuel d'en-tete appartient a l'agenda et il y reste ;
   l'accueil n'en a pas. Le masquer plutot que le deplacer garde
   l'agenda intact, y compris ses adresses partagees. */
body[data-view="inicio"] .hero{display:none}

/* =====================================================================
   19. LE FOND VIVANT — ne le 15/09/2026 au soir, REHAUSSE LE MEME SOIR
   ---------------------------------------------------------------------
   LA PREMIERE DEMANDE disait « ca vit, c'est pas drastique et c'est
   futuriste aussi ». La version d'il y a une heure a pris « pas
   drastique » au pied de la lettre : trois taches a 26 s, qu'il fallait
   fixer l'ecran pour voir. le responsable a regarde et a repris :

       « Stp innove au niveau futuriste ce background gradient anime,
         faut vraiment en mettre plein les yeux. »

   CE QUI CHANGE, ET CE QUI NE CHANGE PAS
   Ce qui change : il y a maintenant QUATRE couches au lieu de deux, et
   elles bougent trois fois plus vite. Ce qui ne change pas : AUCUN
   caractere du site ne devient plus difficile a lire. Les deux tiennent
   ensemble grace a une piece qui n'existait pas, LE VOILE — un blanc
   translucide pose PAR-DESSUS toutes les couleurs, exactement la ou le
   texte se trouve. Le fond peut donc etre violent sur les bords et rester
   sage sous les mots. C'est la seule facon honnete de dire oui a « plein
   les yeux » sans reprendre d'une main ce qu'on donne de l'autre.

   LES QUATRE COUCHES, DU FOND VERS LA SURFACE
     1. `.hn-nebula`  le disque conique qui TOURNE (24 s) + la grille
                      qui DESCEND (7 s). C'est la couche « futuriste ».
     2. `.hn-chispas` sept etincelles qui montent et s'eteignent.
     3. `.hn-vivo`    l'aurore — cinq taches qui derivent (14 s) — et,
                      posee par-dessus elle, LE VOILE.
     4. `.hn-carga`   le faisceau de chargement, devenu une comete.

   TROIS CONTRAINTES QUE CE CODE S'IMPOSE, TOUJOURS
   1. LE TEXTE NE PERD JAMAIS SON CONTRASTE. Le voile ramene le centre
      de l'ecran a moins de 18 % de couleur cumulee ; les cartes, elles,
      sont passees en VERRE BLANC (plus bas) plutot qu'en verre violet.
      Mesure du 15/09 au soir, sur le composite le plus charge :
      titre #1B1033 sur le fond voile = 8,6:1 ; texte secondaire, apres
      l'assombrissement de --mg-doux, = 5,2:1. Les deux au-dessus des
      4,5:1 exiges.
   2. AUCUNE ANIMATION DE `width`, `height`, `top` NI `left` : seuls
      `background-position`, `transform` et `opacity` sont animes. Le
      disque conique fait 220 % de l'ecran pour que son bord soit HORS
      champ : c'est ce qui permet de le faire tourner SANS `filter:blur`,
      qui aurait fait repeindre une surface floue a chaque image sur un
      telephone d'entree de gamme.
   3. `prefers-reduced-motion` COUPE TOUT. Pas « plus lent » : arrete.
      Les degrades restent, dans leur position de depart.

   OU CA S'AFFICHE : les memes quatre elements dans les deux ecrans,
   poses par `inicio.js` pour l'accueil et par `chispa.js` pour le
   moteur. Une seule definition, deux emplois : une couleur changee ici
   change les deux, et ils ne peuvent pas diverger.
   ===================================================================== */

/* ---- COUCHE 1 : LA NEBULEUSE -------------------------------------------
   Un disque de degrade CONIQUE, plus large que l'ecran, qui tourne sans
   fin. C'est lui qui donne l'impression que la couleur « change » :
   l'aurore fait deriver des taches, la nebuleuse fait passer les teintes
   les unes dans les autres. Premier et dernier arret de couleur
   IDENTIQUES — sans ca, la couture a 0 degre traverse l'ecran comme un
   coup de couteau toutes les 24 secondes. */
.hn-nebula{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;overflow:hidden;
}
.hn-nebula::before{
  content:'';position:absolute;left:50%;top:42%;width:220%;height:220%;
  transform:translate(-50%,-50%);border-radius:50%;
  /* 15/09/2026, tard · LIGHT MODE. Les huit arrets tombent de ~.44 a
     ~.17 de moyenne : la demande dit « fond clair et lumineux, violets
     pastel et blancs, aucun mode sombre ». Les teintes sont les MEMES
     (aucune couleur de marque n'a bouge), seule l'opacite change. */
  background:conic-gradient(from 0deg,
    rgba(var(--mg-3-rgb),.19),
    rgba(var(--mg-fonce-rgb),.16) 16%,
    rgba(var(--mg-rgb),.21) 33%,
    rgba(var(--mg-azul-rgb),.13) 48%,
    rgba(var(--mg-2-rgb),.12) 62%,
    rgba(var(--mg-fonce-rgb),.18) 76%,
    rgba(var(--mg-rgb),.15) 90%,
    rgba(var(--mg-3-rgb),.19));
  animation:hn-gira 24s linear infinite;
  will-change:transform;
}
@keyframes hn-gira{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}
}
/* LA GRILLE. Deux jeux de traits d'un pixel tous les 46 px, qui
   descendent d'exactement une maille en 7 s : le deplacement est donc
   invisible en tant que tel, on ne voit que la surface respirer. C'est
   le seul element du fond qui soit franchement « machine », et c'est
   voulu — c'est lui qui fait lire l'ensemble comme futuriste plutot que
   comme un papier peint. Il est a 9 % : sous le voile, au centre, il ne
   reste presque rien. */
.hn-nebula::after{
  content:'';position:absolute;left:0;right:0;top:-46px;bottom:-46px;
  background:
    repeating-linear-gradient(90deg,rgba(var(--mg-2-rgb),.022) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(var(--mg-2-rgb),.017) 0 1px,transparent 1px 46px);
  animation:hn-malla 7s linear infinite;
  will-change:transform;
}
@keyframes hn-malla{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(0,46px,0)}
}

/* ---- COUCHE 2 : LES ETINCELLES -----------------------------------------
   Sept points qui montent et s'eteignent, chacun avec son retard et sa
   duree. Ils ne veulent rien dire et ne comptent rien : ils existent
   pour qu'un ecran immobile ait quand meme quelque chose qui se passe
   dedans. Sept, parce qu'a trois on les compte et qu'a quinze ca fait
   de la poussiere sur l'ecran. */
.hn-chispas{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;overflow:hidden;
}
.hn-chispas i{
  position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#fff,rgba(var(--mg-3-rgb),.9) 45%,
             rgba(var(--mg-rgb),0) 72%);
  opacity:0;
  animation:hn-chispa 9s ease-in-out infinite;
  will-change:transform,opacity;
}
.hn-chispas i:nth-child(1){left:7%; animation-duration:9.5s; animation-delay:0s}
.hn-chispas i:nth-child(2){left:21%;animation-duration:12s;  animation-delay:1.6s;width:4px;height:4px}
.hn-chispas i:nth-child(3){left:38%;animation-duration:10.5s;animation-delay:3.4s}
.hn-chispas i:nth-child(4){left:55%;animation-duration:13s;  animation-delay:.8s;width:6px;height:6px}
.hn-chispas i:nth-child(5){left:71%;animation-duration:9s;   animation-delay:4.7s;width:4px;height:4px}
.hn-chispas i:nth-child(6){left:84%;animation-duration:11.5s;animation-delay:2.3s}
.hn-chispas i:nth-child(7){left:94%;animation-duration:10s;  animation-delay:6.1s;width:4px;height:4px}
@keyframes hn-chispa{
  0%  {transform:translate3d(0,0,0) scale(.5);opacity:0}
  12% {opacity:.55}
  70% {opacity:.32}
  100%{transform:translate3d(14px,-74vh,0) scale(1.15);opacity:0}
}

/* ---- COUCHE 3 : L'AURORE, ET LE VOILE ----------------------------------
   CINQ taches au lieu de trois, poussees a .55 au lieu de .30, et un
   aller-retour de 14 s au lieu de 26. Elles sont volontairement ancrees
   AUX BORDS (8 % / 96 % / -6 % / 106 %) : c'est la ou il n'y a jamais de
   texte, donc c'est la qu'on peut etre violent.

   LE VOILE est le PREMIER plan de `background`, donc le plus haut de la
   pile : un blanc a 62 % au centre, qui s'efface completement avant
   d'atteindre les bords. Il ne change pas de forme et ne bouge pas —
   c'est ce qui garantit que la zone protegee est toujours la meme, quelle
   que soit la position des taches en dessous. Un voile anime aurait rendu
   le contraste du texte dependant de l'instant, c'est-a-dire
   invérifiable. */
.hn-vivo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;overflow:hidden;
  /* 15/09/2026, tard · LIGHT MODE. Le voile (premier plan) passe de 38 a
     66 % au centre, et les six taches de ~.63 a ~.28 de moyenne. Le fond
     redevient un blanc violace sur lequel des taches poudrees derivent,
     au lieu d'un violet dense qu'on eclaircissait par-dessus. */
  background:
    radial-gradient(92% 66% at 50% 40%,rgba(255,255,255,.66),
                    rgba(255,255,255,.34) 62%,rgba(255,255,255,0) 92%),
    radial-gradient(44% 34% at 8% 6%,   rgba(var(--mg-3-rgb),.34),   transparent 70%),
    radial-gradient(42% 32% at 96% 10%, rgba(var(--mg-fonce-rgb),.30),transparent 68%),
    radial-gradient(48% 36% at 50% 104%,rgba(var(--mg-rgb),.30),     transparent 72%),
    radial-gradient(34% 40% at 88% 44%, rgba(var(--mg-azul-rgb),.22),transparent 68%),
    radial-gradient(36% 42% at -6% 62%, rgba(var(--mg-2-rgb),.22),   transparent 70%),
    radial-gradient(38% 32% at 106% 72%,rgba(var(--mg-3-rgb),.26),   transparent 70%);
  background-size:100% 100%,150% 150%,160% 160%,170% 170%,155% 155%,150% 150%,160% 160%;
  background-position:0% 0%,0% 0%,100% 0%,50% 100%,80% 30%,0% 50%,100% 50%;
  animation:hn-aurora 14s ease-in-out infinite alternate;
}
/* Le premier plan (le voile) garde `0% 0%` a toutes les etapes : c'est
   ce qui le rend immobile alors que les cinq autres derivent. */
@keyframes hn-aurora{
  0%  {background-position:0% 0%, 0% 0%,   100% 0%,  50% 100%, 80% 30%, 0% 50%,  100% 50%}
  50% {background-position:0% 0%, 62% 34%, 38% 66%,  12% 42%,  18% 74%, 74% 18%, 26% 82%}
  100%{background-position:0% 0%, 100% 62%,0% 100%,  90% 12%,  46% 6%,  34% 96%, 60% 6%}
}

/* ---- COUCHE 4 : LA COMETE, « l'effet loading » -------------------------
   C'etait un fil de 2 px et une lueur pale. C'est maintenant un rail de
   3 px sur lequel passe une comete : un noyau blanc, une trainee violette
   derriere, et un halo porte par `box-shadow`. Elle met 2,4 s a traverser
   au lieu de 3,4.
   Ce n'est toujours PAS une barre de progression : elle ne mesure rien et
   ne s'arretera jamais a 100 %. C'est pour ca qu'elle n'a ni bout net, ni
   pourcentage, et qu'elle ne remplit jamais la largeur — une barre qui se
   remplit promettrait une fin. */
.hn-carga{
  position:absolute;top:0;left:0;right:0;height:3px;z-index:3;
  pointer-events:none;overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(var(--mg-3-rgb),.30),transparent);
}
.hn-carga::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:42%;
  background:linear-gradient(90deg,transparent,rgba(var(--mg-3-rgb),.7) 30%,
             var(--mg-1) 62%,#fff 88%,rgba(255,255,255,.9));
  box-shadow:0 0 12px 1px rgba(var(--mg-rgb),.55);
  animation:hn-barrido 2.4s cubic-bezier(.45,0,.25,1) infinite;
  will-change:transform;
}
/* La seconde comete part a contre-sens, moitie moins visible, et avec un
   decalage qui fait qu'elles ne se croisent jamais au meme endroit. Deux
   passages dans le meme sens auraient donne un metronome. */
.hn-carga::before{
  content:'';position:absolute;top:0;bottom:0;right:0;width:26%;
  background:linear-gradient(270deg,transparent,rgba(var(--mg-fonce-rgb),.85),transparent);
  animation:hn-barrido-2 3.7s cubic-bezier(.4,0,.3,1) infinite;
  animation-delay:1.1s;
  will-change:transform;
}
@keyframes hn-barrido{
  0%  {transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}
@keyframes hn-barrido-2{
  0%  {transform:translateX(120%)}
  100%{transform:translateX(-420%)}
}

/* ---- LE TEXTE QUI N'EST SUR AUCUNE CARTE -------------------------------
   TROIS PASSES ONT ETE NECESSAIRES, ET C'EST LA MESURE QUI A TRANCHE.
   Le voile a d'abord ete pose a 62 % : le texte tenait, mais l'ecran
   redevenait lavande — tout ce qu'on gagnait en couleur sur les bords
   etait cache derriere les cartes, et le centre, seule zone de fond
   vraiment visible, etait le seul endroit delave. « Plein les yeux »
   n'etait pas tenu.

   LE VOILE EST DONC TOMBE A 38 %, et la contrepartie est ici : le texte
   qui flotte SUR le fond — le sous-titre, la phrase d'honnetete, les
   liens de sortie — quitte le gris secondaire pour l'encre courante.
   Ce qui est pose sur une carte ne change pas : la carte est deja du
   verre blanc, elle protege son propre texte.

   MESURE, sur le composite le plus charge (60 % de violet sous 38 % de
   voile, soit rgb(201,181,243)) :
     --mg-texto  #2A1B4A   8,4:1   (c'est ce qui est applique ici)
     --mg-doux   #56446F   4,6:1   (ce qui reste sur les cartes)
     --mg-2      #5B32B8   3,0:1   ← refuse, d'ou le lien de sortie
                                      repasse en --mg-texto
   Le seuil vise est 4,5:1 (WCAG AA, texte courant). */
#v-inicio .ini-s,
#v-inicio .ini-honesto,
#v-inicio .ini-salta,
#v-inicio .mot-salta,
#v-inicio .mot-vacio,
.mot-escena .mot-salta,
.mot-escena .mot-vacio,
.mot-escena .ch-honesto{color:var(--mg-texto)}
#v-inicio .ini-salta:hover,
#v-inicio .mot-salta:hover,
.mot-escena .mot-salta:hover{color:var(--mg-fuerte)}

/* ---- LE VERRE DEVIENT BLANC --------------------------------------------
   AVANT : les cartes etaient un verre VIOLET a 6 % — presque
   transparentes. Sur le fond calme d'il y a une heure, ca passait. Sur
   celui-ci, le sous-titre gris d'une carte se serait retrouve a lire sur
   une tache magenta a 48 %, soit 3,2:1 : en dessous du seuil.
   APRES : un verre BLANC a 72 %, avec le flou d'arriere-plan double
   (6 -> 14 px). La carte flotte au-dessus d'un fond qu'on devine bouger
   derriere elle — c'est le geste qui rend l'ensemble « futuriste » plutot
   que « charge », et c'est aussi celui qui rend le texte lisible. Une
   seule decision sert les deux.
   Ces regles ne valent QUE dans les deux ecrans du moteur : ailleurs, ces
   classes n'existent pas. */
#v-inicio .mot-carta,
.mot-escena .mot-carta{
  /* 15/09/2026, tard : « cartes douces, epurees, coins arrondis, relief
     subtil ». Le verre passe de 56/34 % a 78/62 % — sur un fond devenu
     pastel, un verre trop transparent donnait une carte grise. */
  background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.64));
  -webkit-backdrop-filter:blur(16px) saturate(1.35);
          backdrop-filter:blur(16px) saturate(1.35);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 6px 20px rgba(38,22,72,.09),inset 0 1px 0 rgba(255,255,255,.95);
}
#v-inicio .mot-carta:hover,
.mot-escena .mot-carta:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.84));
  border-color:rgba(var(--mg-3-rgb),.6);
  box-shadow:0 14px 32px rgba(var(--mg-rgb),.16),inset 0 1px 0 rgba(255,255,255,.95);
}
#v-inicio .mot-campo,
.mot-escena .mot-campo,
#v-inicio .mot-sug button,
.mot-escena .mot-sug button{
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-color:rgba(255,255,255,.8);
}
#v-inicio .mot-sug button:hover,
.mot-escena .mot-sug button:hover{
  background:rgba(255,255,255,.92);border-color:rgba(var(--mg-3-rgb),.6);
}

/* ---- LA MISE EN PLACE DANS LES DEUX ECRANS -----------------------------
   Les quatre couches sont des elements POSITIONNES a z-index 0. En CSS,
   un element positionne passe DEVANT un bloc ordinaire meme s'il vient
   avant lui dans le document : sans les regles ci-dessous, le fond
   recouvrirait le texte de l'etape. Chaque conteneur de contenu est donc
   remonte explicitement. `.mot-cabecera` (z-index 2) et `.mot-cuerpo`
   (z-index 1) le sont deja de leur cote — c'est `.mot-paso` de l'accueil,
   qui n'est dans aucun des deux, qu'il fallait nommer. */
#v-inicio{position:relative;min-height:60vh;overflow:hidden}
#v-inicio > #inicioBody > .mot-paso{position:relative;z-index:1}
/* L'accueil est une PAGE, pas un panneau : le fond y deborde jusqu'aux
   bords de l'ecran plutot que de s'arreter au texte. Les 16 px de marge
   de la page sont donc repris a l'envers, pour les quatre couches. */
/* 15/09/2026, tard : les couches ne vivent plus DANS `#inicioBody`, qui
   est reecrit a chaque etape. Elles vivent dans `#inicioFondo`, un calque
   pose une seule fois — c'est ce qui permet au nuage de balayer l'ecran
   PENDANT que la question change (section 21). Le debordement de 16 px
   est porte une fois par le calque, au lieu de l'etre par chaque couche. */
#inicioFondo{
  position:absolute;left:-16px;right:-16px;top:0;bottom:auto;
  /* PAS `bottom:0` — MESURE DU 15/09/2026, tard, dans un cadre de
     500 x 659 : la vue fait 1133 px de haut des que les dernieres
     sorties s'affichent, le calque suivait, et le nuage — ancre en bas
     du calque — se retrouvait a 707 px, c'est-a-dire SOUS LE PLI. Un
     nuage qu'il faut faire defiler pour voir n'est pas un decor.
     Le calque tient donc dans le premier ecran, et le nuage occupe le
     tiers bas de CE QU'ON VOIT, comme demande. */
  height:min(100%,78vh);
  z-index:0;pointer-events:none;overflow:hidden;
}
@supports (height:100svh){
  #inicioFondo{height:min(100%,78svh)}
}
#v-inicio > #inicioBody{position:relative;z-index:1}

/* ---- LES DEUX BANDES BLANCHES SUR LES COTES, 16/09/2026 ----------------
   « Sur mobile y'a des marges sur les cotes, c'est pas tres beau. »
   C'EST EXACT, ET LA CAUSE N'EST PAS CELLE QU'ON CROIT. Le calque de
   fond deborde bien de 16 px (`#inicioFondo{left:-16px;right:-16px}`)
   — mais `#v-inicio` porte `overflow:hidden` (il le doit : c'est lui qui
   empeche le nuage et la comete de sortir de l'ecran). Le debordement
   etait donc RECOUPE au bord de la colonne de texte.
   MESURE DU 16/09 dans un cadre de 500 px : `main.wrap` fait 500 px avec
   18 px de marge interne, `#v-inicio` commence a x=18 et fait 464 px de
   large. Le lavande s'arretait a 18 px de chaque bord, et les 18 px
   restants montraient le blanc de la page. Deux liserés blancs, sur
   toute la hauteur de l'ecran.
   LA CORRECTION : la vue elle-meme va d'un bord a l'autre, et reprend a
   l'interieur la marge qu'elle vient d'annuler. `calc(50% - 50vw)` vaut
   exactement la marge de `.wrap` quelle qu'elle soit (18 px sous 640 px,
   24 px au-dessus) — ecrire `-18px` aurait laisse un liseré de 6 px
   entre 641 et 720 px de large, la ou `.wrap` reprend ses 24 px.
   PORTEE MOBILE SEULEMENT : au-dela de 720 px, `100vw` compte la barre
   de defilement du bureau et pousserait la page de 15 px vers la
   droite. Sur un telephone la barre est flottante et ne compte pas. */
@media(max-width:720px){
  /* 16/09/2026 au soir : le `calc(50% - 50vw)` qui etait ici a ete
     RETIRE, il n'a plus d'objet. La section 22 (fin de fichier) retire
     la marge de `main.wrap` pour TOUTES les vues : `#v-inicio` part
     donc deja de x=0, et une marge negative calculee sur `100vw`
     rajoutait la largeur de la barre de defilement du bureau — 15 px de
     page defilable lateralement entre 641 et 720 px. Le meme resultat,
     sans cet effet de bord. Les 18 px de marge interne restent ici pour
     memoire ; ils sont desormais poses par `.view`. */
  #v-inicio{padding-left:18px;padding-right:18px}
  /* Le calque n'a plus rien a rattraper : il epouse la vue, qui epouse
     l'ecran. Garder `-16px` ici ferait deborder le nuage de 16 px sous
     le doigt, `overflow:hidden` le couperait, et le flou du bord
     reviendrait par l'autre cote. */
  #inicioFondo{left:0;right:0}
}

/* ---- LE BAS DE L'ACCUEIL N'EST PLUS UN MUR BLANC ----------------------
   Le calque de fond s'arrete a 78 svh, exprès (le nuage doit rester dans
   le premier ecran, mesure du 15/09). Consequence vue a l'ecran le
   16/09 : sous le pli, les vignettes tombaient sur du blanc pur, et la
   page se coupait en deux au milieu — « c'est pas full soft ».
   Un lavande tres dilue, pose sur la vue entiere et qui ne commence
   qu'aux deux tiers, recoud les deux moities sans toucher au nuage.
   0,10 d'opacite sur #A47CEC : le texte le plus clair de la zone
   (`--mg-doux` #56446F) y reste a 4,7:1, au-dessus des 4,5:1 exiges. */
#v-inicio{
  background:linear-gradient(0deg,
    rgba(var(--mg-3-rgb),.11) 0,
    rgba(var(--mg-3-rgb),.05) 200px,
    rgba(255,255,255,0) 400px);
}
/* ET LE CALQUE NE SE COUPE PLUS AU COUTEAU. Vu a l'ecran le 16/09 : le
   lavande s'arretait sur une LIGNE HORIZONTALE nette, juste sous le
   bouton « Autre chose », et la page semblait faite de deux morceaux
   colles. Le masque fait descendre le calque jusqu'a rien sur ses 22
   derniers pourcents. Il ne change ni la hauteur du calque ni la
   position du nuage — c'est la meme mesure du 15/09 qui tient.

   LE MASQUE NE PORTE PAS SUR LE CALQUE ENTIER, ET C'EST MESURE : le
   nuage y occupe de 279 a 517 px sur 522 (mesure du 16/09), c'est-a-dire
   exactement la zone que le masque efface. Masquer `#inicioFondo` aurait
   efface le nuage avec la couleur — vu a l'ecran avant de le corriger.
   Seules les DEUX couches de couleur sont fondues ; le nuage, la comete
   et les etincelles gardent leur opacite pleine. */
#inicioFondo > .hn-nebula,
#inicioFondo > .hn-vivo{
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,0) 100%);
}

/* Dans le moteur, les quatre couches se posent PAR-DESSUS les deux taches
   `.mot-luz` qui existaient deja : elles donnent la profondeur fixe, les
   quatre nouvelles donnent le mouvement. */
.mot-escena > .hn-carga{top:0;border-radius:26px 26px 0 0}
@media(min-width:721px){
  .mot-escena > .hn-carga{border-radius:26px 26px 0 0}
}

/* ---- LE RESPECT DU REGLAGE DU TELEPHONE --------------------------------
   Pas « plus lent » : ARRETE. Les degrades restent dans leur position de
   depart, la comete et les etincelles disparaissent completement — un
   fil qui ne bouge plus ne veut plus rien dire et vaut mieux absent. */
@media (prefers-reduced-motion: reduce){
  .hn-vivo,.hn-nebula::before,.hn-nebula::after{animation:none}
  .hn-carga,.hn-chispas{display:none}
}

/* =====================================================================
   20. LES DEUX BOUTONS « AFFICHER LES AUTRES » — 15/09/2026 au soir
   ---------------------------------------------------------------------
   LA DEMANDE : « en evidence aussi, anime le bouton afficher les autres,
   tu vois la c'est trop discret. »

   IL Y EN A DEUX, ET LES DEUX ETAIENT DISCRETS. On ne pouvait pas
   trancher entre les deux sans deviner, donc les deux ont ete traites :

     `#iniOtra`  accueil, etape 1 — « Autre chose · toutes les options ».
                 C'etait un `.mot-salta` : 13 px, gris, souligne. Le seul
                 chemin vers les NEUF besoins du moteur depuis la porte
                 d'entree du site, ecrit comme une note de bas de page.
     `.ch-mas`   page de resultats — « Voir {n} de plus ». C'etait un
                 `.qbtn` generique, et il n'avait AUCUNE regle a son nom
                 dans cette feuille : il heritait d'un bouton gris fait
                 pour des actions secondaires, alors qu'il porte la
                 moitie des resultats de la recherche.

   CE QU'ILS SONT DEVENUS : un bouton plein, pleine largeur, sur le
   degrade de la marque, avec QUATRE mouvements qui ne se superposent
   jamais au meme instant.
     1. le degrade lui-meme defile (8 s) — la couleur n'est jamais figee
     2. un reflet blanc balaye la surface (4,2 s) — l'objet a l'air poli
     3. le halo respire (3,4 s) — il attire l'oeil sans clignoter
     4. la fleche avance et revient (1,9 s) — elle dit ou ca mene

   POURQUOI PAS UN CLIGNOTEMENT : un element qui clignote plus de trois
   fois par seconde est un risque documente pour les personnes
   photosensibles (WCAG 2.3.1). Aucune des quatre animations ne coupe
   ni ne rallume quoi que ce soit : ce sont des glissements continus.

   ET LE RESTE NE BOUGE PAS. « Ou voir toute l'agenda » (`.ini-salta`)
   reste un lien discret, « plusieurs ages » et « toute la comarque »
   (`.mot-salta`) restent des liens discrets. Si tout est en evidence,
   plus rien ne l'est.
   ===================================================================== */
.ini-otra,
.ch-mas{
  position:relative;overflow:hidden;isolation:isolate;
  /* `flex-direction:row` est EXPLICITE : `.ch-mas` est aussi un `.qbtn`,
     et `.qbtn` empile en colonne. Sans cette ligne, le texte et la
     fleche se retrouvent l'un sous l'autre. */
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;
  width:100%;margin:20px 0 0;padding:16px 20px;
  border:none;border-radius:18px;cursor:pointer;
  font-family:inherit;font-size:15.5px;font-weight:var(--w-semi);
  letter-spacing:-.01em;line-height:1.2;text-align:center;
  color:var(--mg-tinta);text-decoration:none;
  background:linear-gradient(100deg,
    var(--mg-3) 0%,var(--mg-1) 26%,var(--mg-fonce) 50%,
    var(--mg-1) 74%,var(--mg-3) 100%);
  background-size:260% 100%;
  box-shadow:0 10px 26px rgba(var(--mg-rgb),.34),
             inset 0 1px 0 rgba(255,255,255,.34);
  animation:otra-flujo 8s linear infinite,
            otra-halo 3.4s ease-in-out infinite;
  transition:transform var(--d-court) var(--ease-doux);
  will-change:background-position,box-shadow;
}
/* La page de resultats est une liste centree : le bouton n'y prend pas
   toute la largeur de l'ecran, il prend celle de la liste. */
.ch-mas{max-width:420px;margin-left:auto;margin-right:auto}

/* LE DEFILEMENT DU DEGRADE. 260 % de large pour 100 % d'ecran : il faut
   donc parcourir 160 % pour revenir au meme endroit, et le premier et le
   dernier arret sont la meme couleur — sinon le retour a zero se voit
   comme un saut. */
@keyframes otra-flujo{
  from{background-position:0% 50%}
  to  {background-position:160% 50%}
}
/* LE HALO QUI RESPIRE. Il ne s'eteint jamais : il passe de 26 px a 40 px
   de diffusion. Une ombre qui disparait et revient se lit comme une
   alerte ; une ombre qui enfle se lit comme quelque chose de vivant. */
@keyframes otra-halo{
  0%,100%{box-shadow:0 10px 26px rgba(var(--mg-rgb),.34),
                     inset 0 1px 0 rgba(255,255,255,.34)}
  50%    {box-shadow:0 14px 40px rgba(var(--mg-rgb),.52),
                     inset 0 1px 0 rgba(255,255,255,.44)}
}
/* LE REFLET. Une bande blanche inclinee qui traverse, puis une longue
   pause : sans la pause (les 62 % finaux de l'animation), le bouton
   scintillerait en continu et deviendrait fatigant a cote du texte. */
.ini-otra::after,
.ch-mas::after{
  content:'';position:absolute;top:-60%;bottom:-60%;left:0;width:34%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55) 48%,transparent);
  transform:translateX(-160%) rotate(8deg);
  animation:otra-brillo 4.2s cubic-bezier(.4,0,.3,1) infinite;
  will-change:transform;
}
@keyframes otra-brillo{
  0%  {transform:translateX(-160%) rotate(8deg)}
  38% {transform:translateX(420%)  rotate(8deg)}
  100%{transform:translateX(420%)  rotate(8deg)}
}
/* Le texte et les icones doivent rester AU-DESSUS du reflet : celui-ci
   est en z-index -1 dans le contexte d'empilement cree par `isolation`,
   et le contenu y remonte explicitement. */
.ini-otra > *,
.ch-mas > *{position:relative;z-index:1}
.ini-otra:hover,
.ch-mas:hover{transform:translateY(-2px)}
.ini-otra:active,
.ch-mas:active{transform:scale(.98)}
.ini-otra:focus-visible,
.ch-mas:focus-visible{outline:3px solid var(--mg-2);outline-offset:3px}

/* L'ETINCELLE de gauche : elle grossit et retrecit, decalee d'une demi
   seconde par rapport au halo pour que les deux ne battent pas ensemble. */
.ini-otra-ico{
  font-size:17px;line-height:1;flex:none;
  animation:otra-brilla 2.6s ease-in-out infinite;
}
@keyframes otra-brilla{
  0%,100%{transform:scale(1)   rotate(0deg);opacity:.95}
  50%    {transform:scale(1.22) rotate(12deg);opacity:1}
}
/* LA FLECHE de droite : trois pixels d'avance et retour. C'est le seul
   des quatre mouvements qui porte un SENS — il dit que le bouton mene
   ailleurs, et pas qu'il valide quelque chose. */
.ini-otra-ir{flex:none;animation:otra-flecha 1.9s ease-in-out infinite}
@keyframes otra-flecha{
  0%,100%{transform:translateX(0)}
  50%    {transform:translateX(4px)}
}
.ini-otra-t{flex:0 1 auto;min-width:0}

/* MEME REGLE QUE LE FOND : un parent qui a demande a son telephone
   d'arreter les animations garde un bouton PLEIN et bien visible — on ne
   lui rend pas le lien gris d'avant — mais plus rien ne bouge dessus. */
@media (prefers-reduced-motion: reduce){
  .ini-otra,.ch-mas,
  .ini-otra::after,.ch-mas::after,
  .ini-otra-ico,.ini-otra-ir{animation:none}
  .ini-otra,.ch-mas{background-position:30% 50%}
  .ini-otra::after,.ch-mas::after{display:none}
  .ini-otra:hover,.ch-mas:hover{transform:none}
}
/* Sur « Voir N de plus », la fleche pointe VERS LE BAS et descend : elle
   dit « la suite est en dessous », pas « on va ailleurs ». Meme duree que
   celle de l'accueil, pour que les deux boutons aient le meme rythme. */
.ini-otra-ir.abajo{animation:otra-flecha-y 1.9s ease-in-out infinite}
@keyframes otra-flecha-y{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(4px)}
}
@media (prefers-reduced-motion: reduce){
  .ini-otra-ir.abajo{animation:none}
}


/* =====================================================================
   21. LE NUAGE, LES ETAPES CENTREES, LA BANDE PARTENAIRE ET LES DERNIERS
       EVENEMENTS — 15/09/2026, tard
   ---------------------------------------------------------------------
   LA DEMANDE, en cinq points : un Light Mode pur (violets poudres, blancs
   doux, roses), des etapes CENTREES au milieu de l'ecran, un GRAND NUAGE
   cotonneux ancre dans le tiers bas qui respire au repos et balaye
   l'ecran au clic, une fine bande partenaire sous l'en-tete, et les
   derniers evenements sur l'accueil.

   CE QUI A CHANGE AILLEURS ET QU'IL FAUT SAVOIR EN LISANT CECI
   La section 19 n'a pas ete reecrite, elle a ete DESATUREE : memes
   couches, memes teintes de marque, opacites divisees par deux a trois.
   Le fond n'est plus un violet dense qu'on eclaircit par-dessus ; c'est
   un blanc violace sur lequel des taches pastel derivent. C'est la seule
   facon d'obtenir « light mode pur » sans inventer une seconde palette.

   LE NUAGE EST UN DECOR, PAS UN ETAT. Il ne porte aucune donnee, aucun
   texte, aucune commande : `aria-hidden`, `pointer-events:none`. Un
   lecteur d'ecran ne l'annonce jamais, et `prefers-reduced-motion`
   l'arrete sans rien casser — le parcours fonctionne a l'identique sans
   une seule animation.
   ===================================================================== */

/* ---- LE NUAGE ----------------------------------------------------------
   REECRIT LE 16/09/2026, D'APRES LES TROIS CAPTURES ENVOYEES CE MATIN.
   Elles montrent un nuage SCULPTE : un cumulus a lobes distincts, blanc
   sur le dessus, violine dessous, pose juste au-dessus de la barre du
   bas, le rond du bouton magique sortant de son ventre. Ce que ce
   fichier peignait jusqu'ici — cinq boules de coton en degrades radiaux
   qui s'effacent sur leurs bords — ne donnait pas ca : mesure du 16/09
   sur la production, le nuage occupait bien 595 x 292 px a l'endroit
   voulu et RESTAIT INVISIBLE, parce que du blanc qui s'efface sur du
   lavande tres clair n'a aucun bord. Un nuage sans bord est une brume.

   LE CHANGEMENT DE METHODE, et c'est lui qui fait toute la difference :
   la SILHOUETTE et la MATIERE sont maintenant deux choses separees.
     · la silhouette est un MASQUE — sept ellipses opaques reunies. Comme
       elles sont toutes de la meme opacite pleine, leur union n'a aucune
       couture : on voit un seul corps, pas sept taches superposees.
     · la matiere est un degrade peint SOUS ce masque : blanc en haut,
       lavande au milieu, violine sous le ventre, plus deux reflets.
   C'est cette separation qui donne le relief des captures. Avec des
   degrades seuls, chaque boule devait s'effacer sur son bord pour ne pas
   montrer sa couture — donc aucune ne pouvait avoir de bord.

   AUCUN `filter:blur` ICI NON PLUS. Le masque est net, le modele est
   peint. Rien n'est reflou a chaque image : la surface repeinte est la
   meme qu'avant, et c'est ce qui la garde tenable sur un telephone
   d'entree de gamme.

   LA GEOMETRIE. La boite fait 78 % de la largeur (plafonnee a 420 px,
   sinon le nuage devient une banniere sur une tablette) pour 62 % de sa
   propre largeur en hauteur — un cumulus est plus large que haut. Les
   sept lobes sont poses dans ce repere, en % de la boite ; les rayons
   verticaux valent le rayon horizontal divise par 0,62, ce qui les rend
   RONDS a l'ecran malgre la boite aplatie. */
/* CENTRE PAR `left:0;right:0` ET DES MARGES AUTO, pas par
   `left:50%;transform:translateX(-50%)` : `transform` est deja pris par
   la respiration et par le balayage, et une animation qui redefinit
   `transform` effacerait le centrage a la premiere image. */
.hn-nube{
  position:absolute;left:0;right:0;bottom:1%;
  width:min(66%,330px);margin-left:auto;margin-right:auto;
  aspect-ratio:1 / 0.72;
  z-index:0;pointer-events:none;
  transform-origin:50% 86%;
  will-change:transform,opacity;
}
/* Repli pour les navigateurs sans `aspect-ratio` : une hauteur en % du
   parent, moins juste mais jamais nulle. */
@supports not (aspect-ratio:1 / 1){
  .hn-nube{height:42%}
}

/* LE CORPS. Un seul element, masque par l'union des sept lobes. Le
   `mask-composite` n'est pas utilise : par defaut les couches d'un
   masque s'ADDITIONNENT en luminance, donc poser sept ellipses blanches
   revient exactement a faire leur reunion. */
.hn-nube::before{
  content:'';position:absolute;inset:0;
  /* LA MATIERE, du haut vers le bas. Les deux premiers arrets sont les
     reflets — ils restent DANS le masque, donc ils n'eclairent que le
     nuage et jamais le fond autour. Le troisieme est l'ombre du ventre,
     celle qui pose le nuage au lieu de le laisser flotter a plat. */
  /* L'ORDRE DES COUCHES SE LIT DU HAUT VERS LE BAS : la premiere est
     devant. Reflets, puis creux entre les bosses, puis ombre du ventre,
     puis la masse. */
  background:
    /* les deux reflets, sur les bosses les plus hautes */
    radial-gradient(26% 22% at 51% 24%,rgba(255,255,255,.99),rgba(255,255,255,0) 78%),
    radial-gradient(22% 19% at 28% 40%,rgba(255,255,255,.92),rgba(255,255,255,0) 78%),
    /* L'OMBRE DU VENTRE. Seule ombre interieure conservee.
       ESSAI ABANDONNE, ecrit ici pour qu'il ne soit pas refait : quatre
       taches sombres avaient ete posees aux points ou deux bosses se
       rejoignent, pour les detacher les unes des autres. Vu a l'ecran le
       16/09, elles ne se lisaient pas comme des creux mais comme QUATRE
       SALISSURES flottant au milieu du blanc — un creux n'est pas un
       disque, c'est un croissant qui epouse l'arc d'une bosse, et un
       degrade radial ne sait pas dessiner ca. Le nuage des captures tire
       d'ailleurs son relief de sa masse claire et de son ventre sombre,
       pas d'ombres entre ses bosses. */
    radial-gradient(64% 30% at 50% 100%,rgba(var(--mg-fonce-rgb),.50),rgba(var(--mg-rgb),0) 76%),
    /* LA MASSE, ET LE REGLAGE QUI A DEMANDE TROIS ESSAIS.
       Essai 2 : blanc jusqu'a 30 % puis violine. Vu a l'ecran le 16/09,
       LE NUAGE AVAIT DISPARU — il ne restait que la nappe rose autour.
       Un nuage blanc sur un lavande tres clair n'a pas de silhouette : la
       ou il n'y a pas d'ecart de valeur, il n'y a pas de forme, quel que
       soit le soin mis au masque. Les captures s'en tirent parce que leur
       fond est un lavande franc ; le notre est presque blanc.
       Le degrade descend donc TOT dans le violine — des 34 % — et c'est
       ce qui rend la forme lisible. Le blanc reste sur le dessus des
       bosses, la ou il sert a quelque chose. */
    linear-gradient(to bottom,
      #ffffff 0%,#fdfbff 18%,#f5f0fd 34%,
      #e3daf8 52%,#ccbbf1 70%,#b39fe7 87%,#a48ce1 100%);
  /* LA SILHOUETTE : UN SOCLE ET CINQ BOSSES, ET L'ORDRE COMPTE.
     Premier essai du 16/09, vu a l'ecran : les sept lobes etaient poses
     autour d'un centre, et le nuage sortait A L'ENVERS — un plateau plat
     sur le dessus, des festons qui pendaient dessous. Un cumulus est
     l'inverse : une base plate et des bosses en haut.
     LE SOCLE est une ellipse CENTREE SUR LE BAS DE LA BOITE (`at 50%
     100%`) : sa moitie basse tombe hors du cadre, donc son bord bas est
     COUPE NET. C'est ce qui donne la base plate, sans dessiner de
     rectangle. Les cinq bosses posent ensuite le dessus. */
  -webkit-mask-image:
    radial-gradient(45% 36% at 50% 100%,#000 99%,transparent 100%),
    radial-gradient(21% 32% at 51% 39%,#000 99%,transparent 100%),
    radial-gradient(18% 27% at 29% 55%,#000 99%,transparent 100%),
    radial-gradient(17% 26% at 72% 53%,#000 99%,transparent 100%),
    radial-gradient(13% 20% at 14% 67%,#000 99%,transparent 100%),
    radial-gradient(13% 20% at 87% 65%,#000 99%,transparent 100%);
  mask-image:
    radial-gradient(45% 36% at 50% 100%,#000 99%,transparent 100%),
    radial-gradient(21% 32% at 51% 39%,#000 99%,transparent 100%),
    radial-gradient(18% 27% at 29% 55%,#000 99%,transparent 100%),
    radial-gradient(17% 26% at 72% 53%,#000 99%,transparent 100%),
    radial-gradient(13% 20% at 14% 67%,#000 99%,transparent 100%),
    radial-gradient(13% 20% at 87% 65%,#000 99%,transparent 100%);
  animation:hn-nube-respira 13s ease-in-out infinite alternate;
  will-change:transform;
}
/* L'OMBRE PORTEE, sous le nuage. Elle ne fait pas partie du corps — elle
   vit hors du masque, donc elle deborde, et c'est ce debordement qui
   detache le nuage du fond. Peinte par `::after`, donc PAR-DESSUS le
   corps dans l'ordre naturel ; `z-index:-1` la renvoie dessous. */
.hn-nube::after{
  content:'';position:absolute;left:-34%;right:-34%;bottom:-16%;top:-26%;
  z-index:-1;border-radius:50%;
  /* CETTE NAPPE FAIT DEUX CHOSES, et la seconde est la plus importante.
     Elle pose l'ombre sous le ventre, evidemment. Mais surtout elle
     FONCE LE FOND TOUT AUTOUR DU NUAGE : mesure du 16/09 a l'ecran, le
     haut du nuage — blanc pur — etait pose sur un lavande presque blanc,
     donc il n'avait aucun bord visible. Un nuage blanc n'a de silhouette
     que si ce qui l'entoure est plus sombre que lui. Les captures le
     montrent d'ailleurs bien : leur fond est un lavande franc, pas un
     blanc. La nappe deborde donc largement du nuage (34 % de chaque
     cote) et s'eteint progressivement. */
  background:
    radial-gradient(48% 34% at 50% 84%,
      rgba(var(--mg-rgb),.30),rgba(var(--mg-fonce-rgb),.13) 46%,
      rgba(var(--mg-3-rgb),0) 74%),
    radial-gradient(52% 52% at 50% 56%,
      rgba(var(--mg-3-rgb),.20),rgba(var(--mg-3-rgb),.09) 54%,
      rgba(var(--mg-3-rgb),0) 82%);
  animation:hn-nube-respira 13s ease-in-out infinite alternate;
}
@keyframes hn-nube-respira{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(6px,-5px,0) scale(1.035)}
}

/* ---- LES ETINCELLES DU NUAGE -------------------------------------------
   La premiere capture montre, pendant le tourbillon, une poussiere de
   points clairs qui monte du nuage vers la reponse choisie. Les cinq
   `<i>` que le nuage portait deja servent a ca : ils n'ont plus de corps
   a dessiner, ils sont devenus ces etincelles.
   INVISIBLES AU REPOS — `opacity:0` et aucune animation. Elles ne
   coutent donc rien tant que personne ne repond. */
.hn-nube i{
  position:absolute;display:block;opacity:0;
  width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    #fff 0 34%,rgba(var(--mg-2-rgb),.85) 56%,rgba(var(--mg-2-rgb),0) 100%);
  will-change:transform,opacity;
}
.hn-nube i:nth-child(1){left:18%;bottom:46%}
.hn-nube i:nth-child(2){left:37%;bottom:56%}
.hn-nube i:nth-child(3){left:52%;bottom:50%}
.hn-nube i:nth-child(4){left:66%;bottom:58%}
.hn-nube i:nth-child(5){left:81%;bottom:44%}

/* ---- LE BALAYAGE, AU CLIC ----------------------------------------------
   « Des que l'utilisateur clique sur une reponse, le nuage s'active,
   s'amplifie et tourbillonne pour balayer l'ecran en douceur. »
   Il monte, grossit jusqu'a 2,2 fois, part de quatre degres d'un cote et
   revient de l'autre — puis redescend a sa place. 820 ms, et il finit
   TOUJOURS a l'etat de repos : la classe `barre` est retiree par le
   script, mais meme si elle restait, le dernier arret de l'animation est
   la position de depart. Un decor ne doit jamais pouvoir rester coince.
   LA ROTATION EST PLUS FRANCHE QU'AVANT (4,2° au lieu de 2,4°) parce que
   le nuage a desormais des lobes : une silhouette dentelee qui tourne se
   lit comme un tourbillon, une tache floue qui tourne ne se lit pas. */
#v-inicio.barre .hn-nube,
.mot-escena.barre .hn-nube{
  animation:hn-nube-barre .82s cubic-bezier(.34,.68,.28,1) both;
}
@keyframes hn-nube-barre{
  0%  {transform:translate3d(0,0,0)      scale(1)    rotate(0deg)}
  34% {transform:translate3d(-2%,-24%,0) scale(2.2)  rotate(-4.2deg)}
  66% {transform:translate3d(2%,-11%,0)  scale(1.55) rotate(3deg)}
  100%{transform:translate3d(0,0,0)      scale(1)    rotate(0deg)}
}
/* LE CORPS CONTRE-TOURNE pendant le balayage : le nuage tourne d'un
   cote, sa matiere de l'autre, et c'est ce cisaillement qui donne le
   tourbillon des captures plutot qu'un simple objet qu'on fait pivoter.
   Il remplace la respiration le temps de l'animation. */
#v-inicio.barre .hn-nube::before,
.mot-escena.barre .hn-nube::before{
  animation:hn-nube-remolino .82s cubic-bezier(.34,.68,.28,1) both;
}
@keyframes hn-nube-remolino{
  0%  {transform:rotate(0deg)   scale(1)}
  38% {transform:rotate(7deg)   scale(1.06)}
  70% {transform:rotate(-4deg)  scale(1.02)}
  100%{transform:rotate(0deg)   scale(1)}
}
/* LES ETINCELLES MONTENT, chacune avec son retard : elles partent du
   nuage au moment ou il s'amplifie et s'eteignent avant qu'il ne
   redescende. `both` garde le dernier arret, qui est `opacity:0`. */
#v-inicio.barre .hn-nube i,
.mot-escena.barre .hn-nube i{
  animation:hn-chispa-sube .82s ease-out both;
}
#v-inicio.barre .hn-nube i:nth-child(2),
.mot-escena.barre .hn-nube i:nth-child(2){animation-delay:.06s}
#v-inicio.barre .hn-nube i:nth-child(3),
.mot-escena.barre .hn-nube i:nth-child(3){animation-delay:.12s}
#v-inicio.barre .hn-nube i:nth-child(4),
.mot-escena.barre .hn-nube i:nth-child(4){animation-delay:.03s}
#v-inicio.barre .hn-nube i:nth-child(5),
.mot-escena.barre .hn-nube i:nth-child(5){animation-delay:.09s}
@keyframes hn-chispa-sube{
  0%  {opacity:0;transform:translate3d(0,0,0) scale(.5)}
  22% {opacity:1;transform:translate3d(0,-26px,0) scale(1)}
  62% {opacity:.8;transform:translate3d(0,-74px,0) scale(.9)}
  100%{opacity:0;transform:translate3d(0,-124px,0) scale(.4)}
}

/* ---- LA BILLE DE LA REPONSE CHOISIE ------------------------------------
   16/09/2026 — PRISE DE LA PREMIERE CAPTURE. Elle montre le tourbillon en
   cours, et sur la reponse qu'on vient de toucher — « 3-5 » — une bille
   violette lumineuse posee dans la carte. C'est le seul endroit des trois
   images ou une couleur pleine apparait ; tout le reste est pastel. Elle
   dit « c'est celle-la » pendant les 190 ms ou l'ancienne question est
   encore a l'ecran, puis elle part avec la carte.

   ELLE NE CHANGE RIEN AU PARCOURS : la classe est posee au clic et
   retiree par un minuteur, et de toute facon la carte est reecrite par
   l'etape suivante. Si le minuteur ne tournait pas, le dernier arret de
   l'animation est `opacity:0` — la bille ne peut pas rester collee.
   `z-index` : la bille est SOUS le texte de la carte, sinon elle cache
   le chiffre qu'elle est censee designer. */
.mot-carta.elegida::after{
  content:'';position:absolute;left:50%;top:50%;z-index:0;
  width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;
  pointer-events:none;
  /* `--mg-1` ET PAS `--mg` : la variable du violet central s'appelle
     `--mg-1`. Ecrite `var(--mg)`, elle n'existe pas, et une variable
     absente rend TOUT le degrade invalide — la bille etait alors posee,
     dimensionnee, visible dans l'inspecteur, et parfaitement
     transparente. Releve a l'ecran le 16/09 : `background-image: none`. */
  background:radial-gradient(circle at 36% 30%,
    #ffffff 0 7%,var(--mg-2) 30%,var(--mg-1) 68%,var(--mg-fonce) 100%);
  box-shadow:0 0 0 7px rgba(var(--mg-2-rgb),.18),
             0 0 30px 12px rgba(var(--mg-2-rgb),.50);
  animation:hn-bola .82s cubic-bezier(.2,.8,.3,1) both;
}
.mot-carta.elegida > *{position:relative;z-index:1}
/* L'OPACITE PLAFONNE A 0,58, ET C'EST UNE MESURE, PAS UN GOUT.
   Vu a l'ecran le 16/09 avec une bille pleine : le mot de la reponse
   passe PAR-DESSUS elle, et le prune du texte (#1B1033) sur l'anneau le
   plus sombre de la bille (--mg-2 #5B32B8) ne donne que 2,25:1 — sous le
   3:1 exige meme pour un grand caractere gras. A 58 %, la bille se
   compose avec le blanc de la carte, le fond effectif devient #A58ED8 et
   le rapport remonte a 6,41:1. On garde une boule violette franchement
   lumineuse, et le mot reste lisible pendant qu'elle brille. */
@keyframes hn-bola{
  0%  {opacity:0;transform:scale(.25)}
  26% {opacity:.58;transform:scale(1.12)}
  55% {opacity:.58;transform:scale(1)}
  100%{opacity:0;transform:scale(1.5)}
}
/* SOUS « REDUIRE LES ANIMATIONS », LA BILLE RESTE — elle ne fait que
   s'arreter. Elle avait d'abord ete cachee comme le reste du decor ;
   c'est une erreur de rangement : les etincelles et le tourbillon sont
   de l'ornement, la bille DIT QUELLE REPONSE A ETE TOUCHEE. Retirer une
   information a quelqu'un qui a demande moins de mouvement, c'est lui
   retirer autre chose que ce qu'il a demande. */
@media (prefers-reduced-motion: reduce){
  .mot-carta.elegida::after{animation:none;opacity:.58;transform:none}
}

/* ---- LA BRUME QUI PASSE DEVANT -----------------------------------------
   Elle, et elle seule, passe AU-DESSUS du contenu — c'est ce qui fait
   que la question suivante « emerge de la brume » au lieu de simplement
   apparaitre. Trois garde-fous, parce qu'un voile blanc plein ecran est
   la piece la plus dangereuse de tout ce fichier :
     1. `pointer-events:none` — elle n'intercepte jamais un doigt ;
     2. `opacity:0` au repos ET en fin d'animation (`both`) — si la
        classe restait collee, l'ecran resterait lisible ;
     3. `aria-hidden` cote script.
   Elle est POSEE DANS LA VUE, pas dans le calque de fond : `#inicioFondo`
   est a `z-index:0` et cree son propre contexte d'empilement, donc rien
   de ce qu'il contient ne peut passer devant le contenu. */
.hn-bruma{
  position:absolute;left:-16px;right:-16px;top:0;bottom:0;
  z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(130% 84% at 50% 92%,
    rgba(255,255,255,.96),rgba(255,255,255,.78) 38%,
    rgba(248,244,255,.36) 66%,rgba(248,244,255,0) 86%);
}
#v-inicio.barre > .hn-bruma,
.mot-escena.barre > .hn-bruma{animation:hn-bruma-paso .82s ease-in-out both}
@keyframes hn-bruma-paso{
  0%  {opacity:0}
  28% {opacity:.9}
  58% {opacity:.62}
  100%{opacity:0}
}
/* Dans le moteur, la brume epouse les coins arrondis du panneau. */
.mot-escena > .hn-bruma{left:0;right:0;border-radius:inherit}

/* ---- LA QUESTION QUI SORT DE LA BRUME ----------------------------------
   `mot-paso-in` (240 ms, 8 px de montee) reste pour tout le reste du
   site ; ici l'etape arrive FLOUE et se precise. Le flou n'est anime que
   500 ms sur un sous-arbre de quelques elements : c'est le seul endroit
   du site ou `filter` est anime, et c'est assume. */
#v-inicio .mot-paso,
.mot-escena .mot-paso{animation:hn-niebla .52s cubic-bezier(.22,.7,.3,1) both}
@keyframes hn-niebla{
  0%  {opacity:0;filter:blur(10px);transform:translate3d(0,18px,0) scale(.985)}
  55% {opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}
}

/* ---- LES ETAPES CENTREES -----------------------------------------------
   « La question principale et les 2 a 4 blocs de reponses doivent etre
   parfaitement centres au milieu de l'ecran. »
   `100svh` et pas `100vh` : sur un telephone, `vh` compte la barre
   d'adresse comme si elle n'existait pas, et le bloc « centre » se
   retrouve pousse sous le pli. Le repli `100vh` sert aux navigateurs qui
   ne connaissent pas encore l'unite.
   LES 268 px RETIRES sont l'en-tete du site, la bande partenaire, les
   points d'etape et la barre du bas — mesures, pas estimes. */
#v-inicio .ini-centro{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:calc(100vh - 268px);padding:6px 0 2px;
}
@supports (height:100svh){
  #v-inicio .ini-centro{min-height:calc(100svh - 268px)}
}
#v-inicio .ini-centro > *{width:100%;max-width:460px;margin-left:auto;margin-right:auto}
#v-inicio .ini-t,
#v-inicio .ini-s{text-align:center}
#v-inicio .ini-s{max-width:42ch}
/* Le contenu d'une carte LARGE reste aligne a gauche : c'est le bloc qui
   est centre, pas la phrase. Un titre et son sous-titre centres dans une
   carte en ligne, a cote d'une icone, donnent deux axes qui se battent. */
#v-inicio .mot-carta.ancho{text-align:left}

/* ---- LES CARTES DES ETAPES, D'APRES LES CAPTURES DU 16/09 --------------
   Sur les trois images, les reponses sont des cartes BLANCHES PLEINES,
   franchement arrondies, posees sur le lavande par une ombre douce et
   basse. Ce que la feuille peignait : du verre — un degrade translucide
   avec `backdrop-filter`, un liseré, et une ombre seulement au survol.
   Sur un fond deja tres clair, du verre translucide sur du lavande clair
   donne une carte qui n'a ni bord ni relief : c'est exactement ce que
   montre la comparaison entre la production de ce matin et les images.

   LE BLANC EST PLEIN, ET C'EST LE POINT : c'est le contraste entre le
   blanc de la carte et le lavande du fond qui construit tout le relief
   des captures. Le meme blanc est celui du nuage — la carte et le nuage
   sont de la meme matiere, et c'est ce qui fait tenir l'ecran ensemble.

   PORTEE VOLONTAIREMENT ETROITE : les etapes de l'accueil et celles du
   bouton magique, rien d'autre. Les cartes de l'agenda, de l'annuaire et
   des offres gardent leur apparence — elles ne sont pas dans les
   captures, et rien ne demande de les changer.

   LE `backdrop-filter` EST RETIRE ICI, pas seulement recouvert : un
   flou d'arriere-plan sous une carte devenue opaque ne se voit plus mais
   se calcule encore, sur chaque carte et a chaque image. */
#v-inicio .ini-centro .mot-carta,
.mot-escena .mot-carta{
  background:#ffffff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-color:rgba(var(--mg-3-rgb),.34);
  border-radius:24px;
  box-shadow:0 10px 24px -8px rgba(var(--mg-rgb),.22),
             0 2px 6px rgba(var(--mg-rgb),.07);
}
#v-inicio .ini-centro .mot-carta:hover,
.mot-escena .mot-carta:hover{
  border-color:rgba(var(--mg-3-rgb),.72);
  box-shadow:0 18px 38px -10px rgba(var(--mg-rgb),.30),
             0 3px 8px rgba(var(--mg-rgb),.09);
}
/* LE MOT DE LA REPONSE COURTE passe de 18 a 23 px. Sur les captures il
   occupe franchement la carte ; a 18 px dans une carte de 24 px de rayon,
   il flotte au milieu d'un blanc trop grand pour lui. */
#v-inicio .ini-centro .mot-carta.corta,
.mot-escena .mot-carta.corta{min-height:84px}
#v-inicio .ini-centro .mot-carta.corta b,
.mot-escena .mot-carta.corta b{font-size:23px;letter-spacing:-.01em}
/* LA QUESTION. « Pour qui ? », « Quand ? » : sur les captures elle est
   nettement plus grosse que le reste et d'un prune tres fonce. */
#v-inicio .ini-centro .ini-t{font-size:clamp(28px,7.4vw,36px);letter-spacing:-.02em}
/* L'AIR ENTRE LES REPONSES, 16/09/2026. 11 px de gouttiere entre trois
   cartes de 24 px de rayon : les arrondis se touchaient presque et les
   trois portes se lisaient comme un seul bloc gris. 14 px suffisent —
   c'est la moitie du rayon, la regle qui tient partout ailleurs sur le
   site. */
#v-inicio .ini-centro .mot-rejilla{gap:14px;margin-top:22px}

/* ---- LA FINE BANDE PARTENAIRE ------------------------------------------
   « Juste en dessous du header principal et au-dessus de la section de
   recherche, une fine barre horizontale tres elegante, de tres faible
   hauteur. »
   ELLE NE PARAIT QUE SUR L'ACCUEIL : la demande la range dans « les
   nouveautes de la page d'accueil », et l'agenda a deja son grand visuel
   sous l'en-tete. 30 px de haut, texte de 12 px.
   AUCUN SCRIPT TIERS, AUCUN COOKIE, AUCUNE MESURE : c'est un lien
   ordinaire vers le site voisin de la maison. La politique de
   confidentialite promet « ni publicidad, ni medicion de audiencia » en
   quatre langues — une regie publicitaire ici rendrait cette phrase
   fausse, un lien maison ne la touche pas. */
#socioBand{display:none}
body[data-view="inicio"] #socioBand{display:block}
.socio{
  display:flex;align-items:center;justify-content:center;gap:9px;
  max-width:1180px;margin:0 auto;padding:6px 16px;
  font-size:12px;line-height:1.35;color:var(--mg-texto);
  background:linear-gradient(90deg,
    rgba(var(--mg-3-rgb),.10),rgba(255,255,255,.72) 42%,
    rgba(var(--mg-fonce-rgb),.10));
  border-bottom:1px solid var(--mg-borde);
}
.socio-badge{
  flex:none;padding:2px 7px;border-radius:999px;
  /* PAS `--mg-3` DANS CE DEGRADE : blanc sur #A47CEC vaut 2,9:1, et ce
     badge porte du TEXTE de 9,5 px. Du violet plus fonce (#7C4DE0 ->
     #5B32B8) met le point le plus clair a 5,26:1, au-dessus des 4,5:1
     exiges. Calcul WCAG refait ici, pas repris d'ailleurs. */
  background:linear-gradient(135deg,var(--mg-1),var(--mg-2));
  color:var(--mg-tinta);font-size:9.5px;font-weight:var(--w-semi);
  letter-spacing:.06em;text-transform:uppercase;
}
.socio-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.socio-txt b{font-weight:var(--w-semi);color:var(--mg-fuerte)}
.socio-ir{
  flex:none;color:var(--mg-2);font-weight:var(--w-semi);text-decoration:none;
  border-bottom:1px solid rgba(var(--mg-2-rgb),.35);
}
.socio-ir:hover{color:var(--mg-fuerte);border-bottom-color:var(--mg-fuerte)}
@media(max-width:520px){
  /* Sous 520 px la phrase d'explication tombe : il reste le badge, le nom
     et le lien. Mieux vaut trois mots lisibles qu'une phrase coupee. */
  .socio-txt i{display:none}
}

/* ---- LES DERNIERS EVENEMENTS SUR L'ACCUEIL -----------------------------
   « Pour que l'utilisateur voie immediatement du contenu vivant des son
   arrivee. » Six sorties, les plus proches dans le temps, jamais une
   sortie finie — c'est `HN.agenda()` qui les donne, la meme source que
   l'agenda, et pas une seconde liste qui aurait diverge.
   Elles sont SOUS le bloc centre de la premiere etape : le haut de
   l'ecran appartient a la question, comme demande le 15/09 au soir. */
/* 16/09/2026 : 10 px de marge haute devenaient 28. Entre le bouton
   « Autre chose » et le titre des dernieres sorties, dix pixels ne
   separaient rien — les deux blocs se touchaient et l'ensemble se
   lisait comme une seule liste. C'est l'autre moitie de « c'est tout
   tasse ». */
.ini-ultimos{margin:28px 0 0;position:relative;z-index:1}
.ini-u-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ini-u-t{
  margin:0;font-family:var(--f-display);font-size:19px;line-height:1.2;
  font-weight:var(--w-semi);color:var(--mg-fuerte);
}
.ini-u-todo{
  border:none;background:none;padding:4px 0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:var(--w-semi);color:var(--mg-2);
  text-decoration:underline;text-underline-offset:3px;
}
.ini-u-todo:hover{color:var(--mg-fuerte)}
/* 16/09/2026 : TROIS VIGNETTES A PHOTO, PLUS SIX PASTILLES A EMOJI.
   « En dessous finalement mets deux ou trois vignettes mais avec photo
   et belles, la c'est tout tasse. »
   CE QUI ETAIT TASSE, MESURE A L'ECRAN LE MEME MATIN, dans 500 px :
   `auto-fill minmax(158px,1fr)` donnait DEUX colonnes de 227 px, une
   carte de 144 px de haut, un titre coupe net a la troisieme ligne
   (`-webkit-line-clamp:3` sur du 13,5 px) et, en guise d'image, un
   emoji de 20 px. Six fois.
   UNE SEULE COLONNE SUR TELEPHONE. La photo de la phototheque fait
   640 x 240 (2,67:1) ; une vignette pleine largeur de 464 x 168 fait
   2,76:1, soit un recadrage de trois pour cent. Deux colonnes de 227 px
   auraient impose une image de 227 x 130 — la photo aurait ete la, mais
   trop petite pour qu'on y reconnaisse quoi que ce soit. */
.ini-u-lista{
  display:grid;gap:16px;margin-top:16px;
  grid-template-columns:1fr;
}
@media(min-width:721px){
  /* Sur un ecran large, les trois tiennent de front sans rapetisser la
     photo : 3 x ~370 px dans la colonne de 1180. */
  .ini-u-lista{grid-template-columns:repeat(3,1fr);gap:18px}
}
/* LA CARTE EST BLANCHE ET PLEINE, comme les reponses des etapes depuis
   les captures du 16/09 : c'est le contraste du blanc sur le lavande qui
   fait tout le relief. Pas de `padding` sur la carte — la photo touche
   les trois bords, et c'est ce qui la fait exister. */
.ini-u-c{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:0;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;
  color:var(--mg-texto);border:1px solid rgba(var(--mg-3-rgb),.28);
  border-radius:26px;background:#ffffff;
  box-shadow:0 12px 28px -10px rgba(var(--mg-rgb),.24),
             0 2px 6px rgba(var(--mg-rgb),.07);
  animation:mot-carta-in .38s var(--ease) both;
  animation-delay:calc(var(--i,0) * 70ms);
  transition:transform var(--d-court) var(--ease-doux),
             box-shadow var(--d-court) var(--ease-doux),
             border-color var(--d-court) var(--ease-doux);
}
.ini-u-c:hover{
  transform:translateY(-3px);border-color:rgba(var(--mg-3-rgb),.7);
  box-shadow:0 22px 44px -12px rgba(var(--mg-rgb),.32),
             0 3px 8px rgba(var(--mg-rgb),.09);
}
.ini-u-c:active{transform:scale(.99)}
.ini-u-c:focus-visible{outline:2px solid var(--mg-2);outline-offset:3px}

/* --- LA PHOTO -----------------------------------------------------------
   `height` FIXE ET PAS `aspect-ratio` : le plancher du projet est
   Android 7 (`minSdk 24`), et `aspect-ratio` demande Chrome 88. La
   WebView se met a jour toute seule sur la plupart des appareils, mais
   « la plupart » n'est pas « tous », et une image sans hauteur sur un
   appareil ancien, c'est une carte ecrasee a zero pixel.
   Le fond degrade sert DEUX fois : pendant le chargement de la photo, et
   pour de bon si le fichier manque (`.sin-foto`). Un `.webp` de zero
   octet est deja parti en production le 29/08 — il passe `exists()`. */
.ini-u-vis{
  position:relative;display:block;width:100%;height:168px;overflow:hidden;
  background:linear-gradient(140deg,
    rgba(var(--mg-3-rgb),.34),rgba(var(--mg-rgb),.20));
}
@media(min-width:721px){.ini-u-vis{height:150px}}
.ini-u-vis img.poster,
.ini-u-vis .vis{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;
}
.ini-u-vis .shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,12,20,.26) 0%,rgba(10,12,20,0) 42%,rgba(10,12,20,.30) 100%);
}
/* L'EMOJI N'A PAS DISPARU, IL A CHANGE DE ROLE : il ne remplace plus
   l'image, il la legende. Pastille blanche en haut a gauche, comme le
   badge de categorie de l'agenda. */
.ini-u-cat{
  position:absolute;top:10px;left:10px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 8px rgba(var(--mg-rgb),.22);
}
/* Les deux mentions d'honnetete, reprises telles quelles de l'agenda :
   « cartel oficial » engage la sortie, « imagen ilustrativa » dit que la
   photo represente le genre d'activite et pas celle-ci. Le voile
   `.shade` passe dessous et garantit le contraste quelle que soit la
   photographie. */
.ini-u-real,.ini-u-ilu{
  position:absolute;right:11px;bottom:10px;border-radius:999px;
  font-style:normal;letter-spacing:.02em;
}
.ini-u-real{
  background:rgba(255,255,255,.94);color:var(--mg-fuerte);
  font-size:10px;font-weight:var(--w-semi);padding:3px 9px;
  text-transform:uppercase;letter-spacing:.06em;
}
.ini-u-ilu{
  background:rgba(12,14,22,.55);color:#fff;font-size:10px;font-weight:500;
  padding:3px 8px;
}
/* Quand l'image tombe, la pastille de categorie devient le seul motif :
   elle grossit et se centre, plutot que de laisser un aplat muet. */
.ini-u-vis.sin-foto .ini-u-cat{
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;font-size:26px;
}

/* --- LE TEXTE SOUS LA PHOTO --------------------------------------------
   Le titre passe de 13,5 a 16,5 px et de trois lignes coupees a deux :
   une vignette pleine largeur porte deux fois plus de mots par ligne,
   donc deux lignes y disent plus que trois dans 227 px. */
.ini-u-txt{
  display:flex;flex-direction:column;gap:5px;padding:14px 16px 16px;
}
.ini-u-c b{
  font-family:var(--f-display);font-size:16.5px;line-height:1.28;
  font-weight:var(--w-semi);color:var(--mg-fuerte);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ini-u-c i{font-style:normal;font-size:12.5px;line-height:1.35;color:var(--mg-doux)}
.ini-u-fecha{
  font-size:12px;font-weight:var(--w-semi);color:var(--mg-2);
  letter-spacing:.02em;text-transform:uppercase;
}
.ini-u-lugar{display:flex;align-items:center;gap:5px}

/* ---- LES FICHES DE RESULTAT, SORTIES DE LA BRUME -----------------------
   « Les resultats se materialisent sous forme de cartes elegantes et
   semi-translucides qui emergent delicatement de la brume, tout en
   restant parfaitement lisibles sur fond clair. » Meme verre que les
   reponses, meme cascade — la lisibilite vient du verre blanc, pas d'un
   fond opaque. */
.mot-escena .mot-ficha{
  background:linear-gradient(160deg,rgba(255,255,255,.84),rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
          backdrop-filter:blur(16px) saturate(1.3);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(38,22,72,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.mot-escena .mot-ficha:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
  border-color:rgba(var(--mg-3-rgb),.6);
  box-shadow:0 14px 30px rgba(var(--mg-rgb),.16),inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---- LE RESPECT DU REGLAGE DU TELEPHONE --------------------------------
   Meme regle que la section 19 : ARRETE, pas ralenti. Le nuage reste
   dessine et immobile — c'est un decor, il ne disparait pas ; la brume et
   le flou d'arrivee, eux, n'ont aucun sens a l'arret et sont retires. */
@media (prefers-reduced-motion: reduce){
  .hn-nube,.hn-nube i,.hn-nube::before,.hn-nube::after,
  #v-inicio.barre .hn-nube,.mot-escena.barre .hn-nube,
  #v-inicio.barre .hn-nube::before,.mot-escena.barre .hn-nube::before,
  #v-inicio.barre .hn-nube i,.mot-escena.barre .hn-nube i{animation:none}
  /* Les etincelles n'ont pas de position de repos visible : sans
     animation elles ne doivent pas apparaitre figees en plein vol. */
  .hn-nube i{opacity:0}
  .hn-bruma{display:none}
  #v-inicio .mot-paso,.mot-escena .mot-paso{animation:none}
  .ini-u-c{animation:none}
  .ini-u-c:hover{transform:none}
}

/* ---- LA PAGE DE RESULTATS NE DEBORDE PLUS A DROITE ---------------------
   MESURE DU 15/09/2026, tard, dans un cadre de 500 px : la grille
   `.ch-grid` fait 464 px de large et sa colonne unique en fait 504,27 —
   la carte est donc coupee de 40 px sur le bord droit, affiche et badge
   « CARTEL OFICIAL » compris. Ce n'est pas la largeur de la colonne qui
   est fautive : c'est la regle par defaut `min-width:auto` des elements
   d'une grille, qui interdit a une carte de devenir plus etroite que son
   propre contenu minimal. Un `min-width:0` rend ce droit a la carte, et
   l'affiche suit (elle porte deja `max-width:100%`).
   Le defaut est ANTERIEUR a ce cycle et n'a rien a voir avec le nuage ;
   il se voit ici parce que c'est la premiere fois que la page de
   resultats est regardee jusqu'au bord dans un cadre de telephone. */
.ch-grid > *{min-width:0}

/* ---- LE DECOR DE LA PAGE DE RESULTATS ----------------------------------
   Trois couches seulement (nebuleuse, aurore voilee, nuage) : ni
   etincelles ni comete. Une page de resultats se LIT, elle ne se regarde
   pas — le mouvement y est un decor de fond, pas un spectacle.
   `left:0;right:0` et PAS `-16px` : contrairement a l'accueil, cette vue
   n'a pas d'`overflow:hidden`, et un calque qui deborderait de 16 px de
   chaque cote rendrait la page defilable lateralement. C'est exactement
   le defaut que le responsable a signale le 15/09 au soir. */
#v-chispa{position:relative}
#chispaFondo{
  position:absolute;left:0;right:0;top:0;bottom:auto;
  height:min(100%,72vh);
  z-index:0;pointer-events:none;overflow:hidden;
}
@supports (height:100svh){
  #chispaFondo{height:min(100%,72svh)}
}
#v-chispa > #chispaBody{position:relative;z-index:1}
/* LES CARTES SEMI-TRANSLUCIDES. Le verre est plus dense ici que sur
   l'accueil (88 %) : ces cartes portent une affiche, un titre, une date,
   un lieu et un prix — beaucoup plus de texte qu'une reponse a une
   question, et c'est le texte qui commande, pas l'effet. */
#v-chispa .ch-grid .card{
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.80));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
          backdrop-filter:blur(16px) saturate(1.3);
  animation:hn-niebla .55s cubic-bezier(.22,.7,.3,1) both;
}
@media (prefers-reduced-motion: reduce){
  #v-chispa .ch-grid .card{animation:none}
}

/* ======================================================================
   22 . TOUTE L'APPLICATION VA D'UN BORD A L'AUTRE — 16/09/2026 au soir
   « Dans toute l'app le full width stp. »
   ----------------------------------------------------------------------
   CE QUI ETAIT MESURE AVANT (cadre de 426 px, production, 16/09) :
     main.wrap        L0   R426   (la boite va bien jusqu'aux bords)
     #v-inicio        L0   R426   corrige le 16/09 au matin, SEUL
     #v-agenda        L18  R408   <- 18 px de blanc mort de chaque cote
     #v-chispa        L18  R408   <- idem, et son decor avec
     #chispaFondo     L18  R408   le calque anime est `left:0;right:0`
                                  DANS la vue : il s'arretait donc a
                                  18 px du verre, et la page de
                                  resultats montrait deux liseres
                                  blancs sur toute sa hauteur. C'est
                                  exactement ce que montre la capture
                                  du 16/09 09:22.
     #proof/.ofpuente/.ah-band  L18 R408, fonds teintes, memes liseres.

   LA CAUSE, UNE SEULE : la marge interne de 18 px vivait sur
   `main.wrap`, c'est-a-dire SUR LE CADRE COMMUN. Tout ce qui portait
   une couleur heritait donc de deux bandes blanches, et aucune vue ne
   pouvait en sortir sans un calcul en `100vw` (qui, lui, compte la
   barre de defilement du bureau et rend la page defilable de travers).

   LA CORRECTION : la marge descend d'un cran. Le CADRE va d'un bord a
   l'autre ; chaque VUE reprend les 18 px a l'interieur. Geometrie du
   texte inchangee au pixel pres, mais tout ce qui porte un fond — le
   decor anime, les bandeaux teintes — peut desormais toucher le verre.
   Aucun `100vw` : rien a rattraper, donc rien a compenser.

   PORTEE MOBILE SEULEMENT (<=720 px). Au-dela, la colonne centree de
   1180 px reste la bonne reponse : une bande de couleur de 1440 px de
   large derriere trois cartes serait laide, et personne ne l'a
   demandee.
   ====================================================================== */
@media(max-width:720px){

  /* 1. Le cadre commun devient l'ecran. */
  main.wrap{padding-left:0;padding-right:0}

  /* 2. Chaque vue reprend a l'interieur la marge qu'on vient de lui
        retirer. `#modoBand` n'est pas une vue mais un bandeau direct du
        cadre : il la reprend aussi, sinon son texte colle au verre. */
  main.wrap > .view,
  main.wrap > #modoBand{padding-left:18px;padding-right:18px}

  /* 3. Le rail des sections SE FAIT DEFILER : lui, il doit toucher les
        deux bords — un defilement horizontal qui s'arrete a 18 px du
        verre donne l'impression d'etre coince. Il garde sa respiration
        par sa propre marge interne, et `scroll-padding` fait que le
        jeton amene par le defilement ne colle pas au bord non plus. */
  main.wrap > .rail{
    padding-left:18px;padding-right:18px;
    scroll-padding-left:18px;scroll-padding-right:18px;
  }

  /* 4. LES SURFACES TEINTEES N'ONT PLUS DE LISERE BLANC A COTE.
        Un bandeau de couleur qui s'arrete a 18 px du bord se lit comme
        une erreur de mise en page ; le meme bandeau qui touche les deux
        bords se lit comme une application. Chacun porte deja sa propre
        marge interne (14 a 20 px), le texte ne touche donc jamais le
        verre. Le rayon et les bords lateraux tombent : un coin arrondi
        pose sur le bord de l'ecran montre le blanc de la page par le
        creux, et une bordure de 1 px sur le bord ne se voit pas — elle
        se compte.
        `.ofpuente` garde sa barre GAUCHE de 4 px : elle porte le sens
        (c'est le repere de la passerelle), pas la decoration. */
  .view > .ofpuente,
  .view > .today-band,
  .view .ah-band{
    margin-left:-18px;margin-right:-18px;
  }
  /* `.proof` n'est pas DANS une vue : c'est un bandeau direct du cadre.
     Le cadre ne porte plus de marge, il est donc deja d'un bord a
     l'autre — lui donner -18 px de plus le faisait deborder de 18 px de
     chaque cote (mesure du 16/09 : L-18 R444). Il ne prend ici que le
     rayon et les bords lateraux. */
  main.wrap > .proof,
  .view > .ofpuente,
  .view > .today-band,
  .view .ah-band{
    border-radius:0;
    border-left-width:0;border-right-width:0;
    max-width:none;
  }
  .view > .ofpuente{border-left-width:4px}
  /* `.ah-band` porte `width:100%` : sa largeur etait donc FIGEE a celle
     de la colonne (390 px), et la marge negative de droite ne
     l'etirait pas — elle se posait a L0 R390, decalee vers la gauche.
     Mesure du 16/09 avant correction. `width:auto` NE MARCHE PAS non
     plus : c'est un `<button>` en `display:flex`, donc une boite qui se
     retrecit sur son contenu — mesure suivante, L0 R1064, il sortait de
     l'ecran par la droite. La largeur est donc donnee explicitement :
     la colonne, plus les deux marges qu'on vient de lui rendre. */
  .view .ah-band{width:calc(100% + 36px)}

  /* 4 bis. UN DEBORDEMENT TROUVE EN CHEMIN, ANTERIEUR A CE CYCLE.
     Le commutateur de l'ecran Commerces (`.seg`) est un `inline-flex`
     sans repli ni defilement : mesure du 16/09 dans un cadre de 426 px,
     `#empresasSeg` allait de L18 a R889 — 463 px de contenu hors du
     verre, et aucun moyen d'atteindre les derniers onglets. Il defile
     desormais lateralement, comme le rail des sections. */
  .view .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .view .seg::-webkit-scrollbar{display:none}
  .view .seg > *{flex:none}

  /* 5. LA CONTINUITE. L'accueil a recu le 16/09 un lavande tres dilue
        qui recoud le bas de l'ecran (il evitait que la page se coupe en
        deux sur du blanc pur). Les autres ecrans n'avaient rien : on
        passait d'un accueil colore a une page blanche. Le meme lavande,
        deux fois plus dilue encore, est pose sur toutes les vues.
        0,06 d'opacite sur #A47CEC : le texte le plus clair du site
        (`--doux`) y reste bien au-dessus des 4,5:1 exiges — c'est la
        moitie de la valeur deja mesuree a 4,7:1 sur l'accueil.
        `#v-inicio` garde la sienne, plus franche : son selecteur est un
        identifiant, il l'emporte sur `.view`. */
  .view{
    background:linear-gradient(0deg,
      rgba(var(--mg-3-rgb),.06) 0,
      rgba(var(--mg-3-rgb),.028) 180px,
      rgba(255,255,255,0) 360px);
  }

  /* 6. LES BANDES QUI DEFILENT TOUCHENT LES DEUX BORDS (16/09 au soir).
        Meme raison que le rail des sections au point 3, et meme mesure :
        une bande qui se fait glisser du doigt et qui s'arrete a 18 px du
        verre se lit comme coincee — on croit avoir atteint le bout alors
        qu'il reste du contenu. Releve du 16/09 dans un cadre de 500 px,
        AVANT correction : les jetons de date et de categorie de l'agenda
        (`.chips`, contenu plus large que le cadre, defilement actif) a
        L18 R482 ; le carrousel « Hoy » (`.tb-rail`) a L20 R480 ; les
        rails « Guias » et « Para ti » (`.gu-rail`, `.fy-rail`) a L18
        R482 ; les tableaux de prix, de camps, de mairie et de l'espace
        pro (`.otabla-wrap`, contenu de 520 a 563 px) a L18 R482 ; les
        commutateurs d'ecran (`.seg`) a L18 R482.
        Chacun rend sa marge par une marge NEGATIVE et la reprend en
        marge INTERNE : le premier jeton reste a 18 px du bord au repos,
        mais la surface qui defile, elle, va d'un bord a l'autre.
        `scroll-padding` fait que le jeton amene par le defilement ne
        colle pas au verre non plus.
        Ces bandes sont toutes a un ou deux crans de la vue (jamais dans
        une carte, verifie a l'ecran le 16/09) : la marge negative ne
        peut donc pas faire sortir un contenu de son cadre blanc. */
  .toolbar > .chips,
  .view .gu-rail,
  .view .fy-rail,
  .view .otabla-wrap{
    margin-left:-18px;margin-right:-18px;
    padding-left:18px;padding-right:18px;
    scroll-padding-left:18px;scroll-padding-right:18px;
  }
  /* `.seg` A ETE ESSAYE PUIS RETIRE, ET LA MESURE DIT POURQUOI.
     Le commutateur d'ecran est un PASTILLE : fond blanc, bord de 1 px,
     rayon plein, ombre portee. Bleu de la meme marge negative que les
     jetons, il s'est pose a L0 sur l'ecran « Campamentos » alors qu'il
     ne fait que 325 px de large (mesure du 16/09) — une pastille
     arrondie collee au verre, coupee sur son coin gauche, avec du vide
     a sa droite. C'est exactement ce que le point 4 refuse : un coin
     arrondi pose sur le bord de l'ecran montre le blanc de la page par
     le creux. Une bande de jetons n'a pas de contour, une pastille en a
     un : la premiere peut toucher le verre, la seconde est un objet et
     garde sa marge. Il ne recoit donc ici que son defilement (point
     4 bis) et le confort du defilement. */
  .view .seg{scroll-padding-left:4px;scroll-padding-right:4px}
  /* Dans la bande « Hoy », la marge interne n'est pas 18 mais 20 px
     (`.today-band{padding:20px 20px 22px}`) : le carrousel et la bande
     meteo rendent 20. */
  .today-band .tb-rail,
  .today-band .meteo{
    margin-left:-20px;margin-right:-20px;
    padding-left:20px;padding-right:20px;
    scroll-padding-left:20px;scroll-padding-right:20px;
  }
}

/* =====================================================================
   L'EN-TETE SUR UN ECRAN ETROIT (16/09/2026)
   « Sur un Samsung Flip, le logo en haut deborde et envoie le menu
   dehors » (le responsable). Mesure dans des cadres de 280, 320, 344 et
   360 px : le mot « HolaNiños » passait SOUS le choix de langue des
   344 px, et le bouton du compte sortait de l'ecran a 280 px. Sur
   Android, le bouton d'installation (40 px) s'ajoute encore.
   Trois gestes :
   1. le logo est le SEUL element qui peut retrecir, et il coupe ce qui
      deborde au lieu de le poser sous la langue ; la langue, le compte
      et l'installation ne retrecissent jamais — c'est ce qui garde le
      bouton du compte a l'ecran, quelle que soit la taille du texte
      choisie dans le telephone ;
   2. sous 420 px, tout se serre d'un cran ;
   3. le mot « HolaNiños » ne disparait que s'il n'a plus la place : sous
      340 px, ou sous 381 px quand le bouton d'installation est affiche
      (il ne l'est que sur Android). Le rond du logo reste toujours.
   ===================================================================== */
.header .wrap>.logo{flex:0 1 auto;min-width:0;overflow:hidden}
.header .logo img{flex:none}
.header .logo .brand{white-space:nowrap}
.header .wrap>.lang,
.header .wrap>.icon-btn,
.header .wrap>.install-btn{flex:none}
@media(max-width:420px){
  .header .wrap{gap:8px;padding-left:12px;padding-right:12px}
  .header .logo{gap:7px}
  .header .logo img{width:28px;height:28px;border-radius:8px}
  .header .logo .brand{font-size:17px}
  .header .lang{padding:2px;gap:1px}
  .header .lang button{padding:4px 6px;font-size:11.5px}
  .header .icon-btn{width:36px;height:36px}
  .header .install-btn{padding:8px}
}
@media(max-width:380px){
  .header .wrap:has(.install-btn.show) .logo .brand{display:none}
}
@media(max-width:339px){
  .header .logo .brand{display:none}
}
/* 24/09/2026 : entre 480 et 540 px, avec le bouton d'installation
   affiche, le mot de la marque sortait coupe (« HolaNiñc ») sur les
   tableaux de bord : il lui manquait une quinzaine de pixels. Les quatre
   boutons de langue perdent 3 px de marge de chaque cote (24 px rendus),
   et le mot reste entier. Mesure de 421 a 561 px : aucune coupure. */
@media(min-width:480px) and (max-width:540px){
  .header .wrap:has(.install-btn.show) .lang button{padding-left:5px;padding-right:5px}
}


/* =====================================================================
   23. L'ACCUEIL SUR ORDINATEUR ET SUR TABLETTE — 18/09/2026
   ---------------------------------------------------------------------
   « Je viens d'aller sur ordinateur : c'est la version mobile en petit
     au milieu. La version mobile il faut la faire en version ordinateur
     et en version tablette. La version mobile elle est magnifique, la
     tablette tu peux reprendre la meme, l'ordi innove un peu : fais un
     heros avec un titre, une description, a droite du heros le truc
     interactif comme sur mobile, et en dessous des vignettes, plus
     classique. »

   CE QUI CLOUAIT L'ACCUEIL AU MILIEU : une seule ligne, posee le 15/09
   quand l'ecran venait de naitre sur telephone.

       @media(min-width:721px){ #v-inicio{max-width:640px;margin:0 auto} }

   Elle etait juste ce jour-la et fausse depuis : 640 px au centre d'un
   ecran de 1440, c'est 800 px de vide, et le reste du site (l'agenda,
   l'annuaire, les tarifs) occupe deja ses 1180 px. L'accueil, porte
   d'entree du site, etait le seul ecran a se recroqueviller.

   TROIS TAILLES, ET UNE SEULE MECANIQUE
     - telephone (jusqu'a 720 px) : RIEN NE CHANGE. Pas une regle de
       cette section ne descend sous 721 px. C'etait la demande, et
       c'est aussi la prudence : cet ecran a ete regle a la main sur
       trois jours de va-et-vient, il n'y a rien a y gagner.
     - tablette (721 a 1023 px) : la meme page, respiree. La colonne
       passe de 640 a 760 px et les reponses de 460 a 540. « Tu peux
       reprendre la meme » : on la reprend, on ne la redessine pas.
     - ordinateur (1024 px et au-dela) : deux colonnes. Le heros a
       gauche, les etapes a droite, les vignettes en dessous.

   COMMENT LES DEUX COLONNES TIENNENT
   `#inicioBody` devient une grille, et `.mot-paso` passe en
   `display:contents` : ses trois enfants (les etapes, les dernieres
   sorties, le pied) deviennent alors des cases de CETTE grille, sans
   qu'une seule ligne de JavaScript ait a les deplacer. C'est ce qui
   permet au heros — ecrit hors de `.mot-paso` — de se poser a cote des
   etapes tout en laissant les vignettes passer sous les deux colonnes.
   Les lignes sont nommees par leur numero et non par des zones : aux
   etapes 2, 3 et 4 les vignettes et le pied n'existent pas, et une
   ligne vide d'une grille implicite ne prend aucune hauteur, alors
   qu'une zone nommee en aurait garde une.

   LE FOND VIVANT N'EST PAS TOUCHE. Le nuage, la nebuleuse et la comete
   vivent dans `#inicioFondo`, qui epouse la vue : la vue s'elargit, le
   decor s'elargit avec elle. On ne lui ajoute ici qu'un arrondi en bas
   et un fondu sur les cotes, parce qu'une bande lavande coupee au
   couteau a 1132 px de large se voit, alors qu'a 390 px elle touchait
   les deux bords de l'ecran et ne se voyait pas.
   ===================================================================== */

/* ---- TABLETTE : la meme page, avec de l'air ----------------------------
   « La version tablette, tu peux reprendre la meme. » On la reprend
   telle quelle : une question par ecran, les memes cartes, le meme fond.
   Trois reglages seulement, et chacun repare quelque chose que l'ecran
   d'un telephone cachait.

   1. LA COLONNE PASSE DE 640 A 760 PX, et les reponses de 460 a 540.

   2. LE BLOC CENTRE NE FAIT PLUS LA HAUTEUR DE L'ECRAN. Le centrage
      vertical (`100svh - 268px`) avait ete regle sur un telephone de
      660 px de haut, ou il tenait juste. Mesure a 834 x 1100 : le bloc
      reclamait 800 px pour 415 px de contenu, donc 190 px de vide
      au-dessus de la question ET 190 en dessous, et les vignettes
      commencaient a 1010 px, sous le pli. Le `min()` garde le centrage
      sur un ecran court et l'arrete a 540 px sur un ecran long.

   3. LE NUAGE N'EST PLUS COUPE. Il est ancre au bas du calque, et le
      calque faisait 78 svh, soit 858 px : le nuage se terminait donc a
      984 px, en plein milieu des vignettes, coupe net par
      `overflow:hidden`. Meme geste que sur ordinateur, memes raisons :
      le calque s'arrete au-dessus des vignettes, et le bas du nuage se
      fond au lieu de se couper. */
@media(min-width:721px) and (max-width:1023px){
  #v-inicio{max-width:760px}
  #v-inicio .ini-centro > *{max-width:540px}
  #v-inicio .ini-centro{min-height:min(540px,calc(100vh - 300px))}
  #v-inicio .ini-ultimos .ini-u-lista{gap:20px}
  #v-inicio .ini-u-vis{height:164px}
  /* Les coins bas arrondis. Sur telephone la bande touche les deux bords
     de l'ecran et n'a pas de contour ; ici elle laisse 21 px de blanc de
     chaque cote (760 px de colonne dans 834 px de tablette) et se
     terminait sur trois aretes vives. Arrondie, elle se lit comme une
     surface posee, ce qu'elle est. */
  #inicioFondo{height:min(100%,620px);border-radius:0 0 36px 36px}
  .hn-nube{width:min(52%,420px)}
}
@supports (height:100svh){
  @media(min-width:721px) and (max-width:1023px){
    #v-inicio .ini-centro{min-height:min(540px,calc(100svh - 300px))}
  }
}
/* LE FONDU DU BAS DU NUAGE vaut des 721 px : c'est la meme coupe, pour
   la meme raison, sur la tablette et sur l'ordinateur. Il est ecrit une
   fois ici plutot que deux fois plus bas. */
@media(min-width:721px){
  .hn-nube{
    -webkit-mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,0) 99%);
            mask-image:linear-gradient(180deg,#000 64%,rgba(0,0,0,0) 99%);
  }
}

/* ---- LE HEROS : invisible partout ailleurs ----------------------------- */
.ini-hero{display:none}

/* =====================================================================
   ORDINATEUR (1024 px et au-dela) — REECRIT LE 18/09/2026 EN FIN DE MATINEE
   ---------------------------------------------------------------------
   LA PREMIERE ECRITURE DE CE BLOC A ETE REGARDEE ET REJETEE :

       « Dans le heros, la partie de droite, on dirait vraiment un
         iframe que tu as integre. C'est horrible. Enleve-moi les
         boules la en haut, les ronds. Je n'ai pas envie que ca fasse
         trop iframe de la version mobile qu'on a mis sur ordi. Et
         surtout, pleine largeur, parce que la c'est encore encadre. »

   IL AVAIT RAISON, ET LA CAUSE EST NOMMABLE. Les questions etaient
   posees dans un PANNEAU : fond propre, liseré, coins arrondis, grande
   ombre portee. Ce sont, un par un, les signaux visuels d'un contenu
   IMPORTE d'ailleurs. Et comme chaque reponse est deja une carte
   blanche avec son propre liseré et sa propre ombre, on avait deux
   niveaux d'encadrement imbriques : un cadre dans un cadre, c'est-a-dire
   exactement le dessin d'une fenetre d'application posee dans une page.

   CE QUI EST FAIT MAINTENANT
     1. PLUS DE PANNEAU. Les trois portes flottent directement sur le
        fond, plus grandes. Rien ne les entoure.
     2. PLUS DE POINTS D'ETAPE. Quatre ronds au-dessus d'un panneau ne
        veulent rien dire sur un ecran large. Le bouton RETOUR, lui,
        reste : il vit dans le meme bloc et il est la seule facon de
        revenir en arriere. Il devient un lien discret au-dessus des
        cartes.
     3. PLEINE LARGEUR, POUR DE BON. La vue sort de `main.wrap` et va
        d'un bord a l'autre de l'ecran ; elle reprend a l'interieur une
        colonne de 1240 px. Le lavande touche donc les deux bords, et les
        deux bandes blanches verticales qu'on voyait sur toute la hauteur
        ont disparu.
     4. UN CIEL QUI BOUGE. Trois nuages traversent le heros de gauche a
        droite en 60 a 95 secondes.

   LE PIEGE DE LA PLEINE LARGEUR, ET SA PARADE
   `calc(50% - 50vw)` est la seule facon d'echapper a un conteneur
   centre sans JavaScript — mais `100vw` compte la barre de defilement du
   bureau, donc la page devient defilable de 15 px vers la droite. C'est
   ecrit noir sur blanc dans la section 21, ou la regle du plein ecran
   avait du s'arreter a 720 px pour cette raison. La parade est
   `overflow-x:clip` sur le corps de page : contrairement a `hidden`, il
   ne cree PAS de conteneur de defilement, donc il ne casse ni les
   elements collants ni le defilement ancre. Verifie a l'ecran :
   `scrollWidth` vaut `innerWidth` a 1024, 1280 et 1440.
   ===================================================================== */
@media(min-width:1024px){

  /* Le seul role de cette ligne : absorber les 15 px de barre de
     defilement que `100vw` compte et que la page n'a pas. */
  body{overflow-x:clip}

  /* LA VUE VA D'UN BORD A L'AUTRE, et reprend sa colonne a l'interieur.
     Les marges negatives annulent le centrage de `main.wrap` ; la marge
     interne remet le contenu dans 1240 px au milieu. */
  #v-inicio{
    max-width:none;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:0 0 72px;
    background:none;
    border-radius:0;
  }
  #v-inicio > #inicioBody{
    display:grid;
    max-width:1240px;margin:0 auto;padding:clamp(34px,5vh,64px) 40px 0;
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    column-gap:clamp(48px,5vw,80px);
    align-items:start;
  }
  #v-inicio > #inicioBody > .mot-paso{display:contents}

  .ini-hero{
    display:flex;flex-direction:column;align-items:flex-start;
    grid-column:1;grid-row:2;align-self:start;
    padding:0 10px 32px 0;
  }
  /* LES RONDS DISPARAISSENT, PAS LE RETOUR. `.mot-cabecera` reste dans
     le flux (c'est lui qui porte le bouton), mais il ne pese plus rien :
     les points et les deux cales de 34 px sont retires, et le bloc se
     colle au-dessus des cartes. */
  #v-inicio .mot-cabecera{
    grid-column:2;grid-row:1;
    display:flex;justify-content:flex-start;padding:0;margin:0 0 12px;min-height:0;
  }
  #v-inicio .mot-puntos,
  #v-inicio .mot-hueco{display:none}
  #v-inicio .mot-atras{
    width:auto;height:auto;padding:7px 14px 7px 10px;border-radius:999px;
    background:rgba(255,255,255,.72);border:1px solid rgba(var(--mg-3-rgb),.32);
    color:var(--mg-2);
  }
  #v-inicio .mot-atras:hover{background:#fff;border-color:rgba(var(--mg-3-rgb),.6)}
  #v-inicio .ini-centro{grid-column:2;grid-row:2}
  #v-inicio .ini-ultimos{grid-column:1 / -1;grid-row:3}
  #v-inicio .ini-honesto{grid-column:1 / -1;grid-row:4}
  #v-inicio .ini-salta{grid-column:1 / -1;grid-row:5}

  /* ---- LA COLONNE DE GAUCHE ---------------------------------------- */
  .ini-hero-tag{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 14px 6px 11px;border-radius:999px;
    background:rgba(255,255,255,.72);border:1px solid rgba(var(--mg-3-rgb),.34);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    font-size:12.5px;font-weight:var(--w-semi);letter-spacing:.02em;
    color:var(--mg-2);
    box-shadow:0 4px 12px -6px rgba(var(--mg-rgb),.30);
  }
  /* LE TITRE N'EST PAS UN `h1`, ET C'EST DELIBERE : le `h1` de la vue
     reste la question, comme sur telephone. Une page qui change de titre
     principal selon la largeur de la fenetre aurait deux structures pour
     un meme contenu. */
  .ini-hero-t{
    font-family:var(--f-display);font-weight:var(--w-semi);
    font-size:clamp(42px,4.1vw,62px);line-height:1.02;letter-spacing:-.035em;
    color:var(--mg-fuerte);margin:22px 0 0;max-width:14ch;
  }
  .ini-hero-s{
    margin:20px 0 0;max-width:44ch;
    font-size:17px;line-height:1.6;color:var(--mg-doux);
  }
  .ini-hero-cifras{
    display:flex;align-items:flex-start;gap:28px;
    margin:30px 0 0;padding:0;list-style:none;
  }
  .ini-hero-cifras li{position:relative;display:flex;flex-direction:column;gap:1px}
  .ini-hero-cifras li + li{padding-left:28px}
  .ini-hero-cifras li + li::before{
    content:"";position:absolute;left:0;top:4px;width:1px;height:32px;
    background:rgba(var(--mg-3-rgb),.42);
  }
  .ini-hero-cifras b{
    font-family:var(--f-display);font-weight:var(--w-semi);
    font-size:34px;line-height:1.05;letter-spacing:-.02em;color:var(--mg-2);
  }
  .ini-hero-cifras span{font-size:12.5px;line-height:1.3;color:var(--mg-doux)}
  .ini-hero-frais{
    display:flex;align-items:center;gap:7px;margin:18px 0 0;
    font-size:12.5px;color:var(--mg-doux);
  }
  .ini-hero-frais .pt{
    flex:none;width:7px;height:7px;border-radius:50%;background:#2E9E6B;
    box-shadow:0 0 0 3px rgba(46,158,107,.18);
  }
  /* Blanc sur #7C4DE0 vaut 5,26:1, la mesure de la ligne 1414 du fichier. */
  .ini-hero-agenda{
    display:inline-flex;align-items:center;gap:9px;
    margin:30px 0 0;padding:14px 24px;border:none;border-radius:999px;
    background:linear-gradient(135deg,var(--mg-1),var(--mg-2));
    color:var(--mg-tinta);font-family:inherit;
    font-size:15.5px;font-weight:var(--w-semi);cursor:pointer;
    box-shadow:0 14px 28px -12px rgba(var(--mg-rgb),.62),
               0 2px 6px rgba(var(--mg-rgb),.14);
    transition:transform .18s var(--ease),box-shadow .18s var(--ease);
  }
  .ini-hero-agenda:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 38px -12px rgba(var(--mg-rgb),.70),
               0 3px 8px rgba(var(--mg-rgb),.18);
  }
  .ini-hero-agenda:active{transform:translateY(0)}
  .ini-hero-agenda:focus-visible{outline:2px solid var(--mg-2);outline-offset:3px}
  .ini-hero-agenda svg{transition:transform .18s var(--ease)}
  .ini-hero-agenda:hover svg{transform:translateX(3px)}

  /* ---- LA COLONNE DE DROITE : DES CARTES, PAS UNE FENETRE ----------- */
  /* AUCUN FOND, AUCUN LISERE, AUCUNE OMBRE ICI. Tout ce qui se voit dans
     cette colonne, ce sont les cartes elles-memes. C'est toute la
     difference entre « les questions du site » et « la version mobile
     posee dans un cadre ». */
  #v-inicio .ini-centro{
    min-height:0;display:block;text-align:left;
    padding:0;background:none;border:none;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  #v-inicio .ini-centro > *{max-width:none;margin-left:0;margin-right:0}
  #v-inicio .ini-centro .ini-t{
    font-size:27px;text-align:left;letter-spacing:-.02em;margin:0;
  }
  #v-inicio .ini-centro .ini-s{
    text-align:left;max-width:44ch;margin:8px 0 0;font-size:15px;
  }
  #v-inicio .ini-centro .mot-rejilla{gap:14px;margin-top:22px}

  /* LES CARTES SONT PLUS GRANDES ET PLUS FRANCHES. Le liseré se fonce
     d'un cran maintenant qu'elles sont sur le lavande et non sur du
     blanc, et l'ombre descend : c'est elle, et elle seule, qui fait
     tenir la colonne. */
  #v-inicio .ini-centro .mot-carta{
    border-color:rgba(var(--mg-3-rgb),.30);
    border-radius:22px;
    box-shadow:0 18px 40px -22px rgba(var(--mg-rgb),.55),
               0 2px 6px rgba(var(--mg-rgb),.06);
  }
  #v-inicio .ini-centro .mot-carta.ancho{padding:19px 22px;gap:16px}
  #v-inicio .ini-centro .mot-carta.ancho .mot-ico{width:52px;height:52px;font-size:26px}
  #v-inicio .ini-centro .ini-txt b{font-size:18px}
  #v-inicio .ini-centro .ini-txt i{font-size:13px}
  #v-inicio .ini-centro .mot-carta.corta{min-height:82px}
  #v-inicio .ini-centro .mot-carta:hover{
    transform:translateY(-3px);
    border-color:rgba(var(--mg-3-rgb),.62);
    box-shadow:0 26px 52px -22px rgba(var(--mg-rgb),.62),
               0 3px 8px rgba(var(--mg-rgb),.09);
  }
  #v-inicio .ini-centro .ini-otra{margin-top:16px}

  /* ---- SOUS LES DEUX COLONNES : LES VIGNETTES ----------------------- */
  #v-inicio .ini-ultimos{margin-top:clamp(48px,7vh,84px)}
  #v-inicio .ini-u-lista{grid-template-columns:repeat(3,1fr);gap:26px}
  #v-inicio .ini-u-vis{height:208px}
  #v-inicio .ini-u-t{font-size:27px}
  #v-inicio .ini-u-c b{font-size:16px}
  #v-inicio .ini-honesto{margin:38px 0 0;max-width:62ch;font-size:12.5px}
  /* La sortie de secours du bas fait double emploi avec le bouton du
     heros, qui est visible sans defiler. */
  #v-inicio .ini-salta{display:none}

  /* ---- LE DECOR ----------------------------------------------------- */
  /* Il epouse la vue, qui epouse desormais l'ecran : plus de fondu sur
     les cotes a prevoir, il n'y a plus de cotes. Sa hauteur est en
     pixels et non en `vh` — les deux colonnes ont une hauteur a peu pres
     fixe sur ordinateur, et c'est le contenu du dessous qui suit. */
  /* LE FONDU EST POSE SUR LE CALQUE ENTIER, ET PLUS SUR DEUX DE SES
     COUCHES. Sur telephone il fallait epargner le nuage, qui occupait
     exactement la zone que le fondu efface (mesure du 16/09) ; ici le
     nuage sculpte est retire et les nuages du ciel sont repartis sur
     toute la hauteur. Sans ce fondu, la bande se terminait sur une
     HORIZONTALE FRANCHE de 1440 px de long, juste au-dessus des
     vignettes : les nuages, eux, n'etaient masques par rien et se
     coupaient au couteau. */
  #inicioFondo{
    left:0;right:0;height:min(100%,660px);border-radius:0;
    -webkit-mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg,#000 68%,rgba(0,0,0,0) 100%);
  }
  #inicioFondo > .hn-nebula,
  #inicioFondo > .hn-vivo{
    -webkit-mask-image:none;mask-image:none;
  }
  /* Le nuage sculpte du bas s'efface sur ordinateur : il a ete dessine
     pour tenir dans le tiers bas d'un telephone, et le ciel de la
     section suivante fait desormais ce travail-la, en mieux et en
     mouvement. */
  #inicioFondo > .hn-nube{display:none}

  /* ---- LE CIEL : TROIS NUAGES QUI TRAVERSENT ------------------------ */
  /* « Le heros, mets un nuage derriere qui s'anime. »
     Chaque nuage est UN element, et sa silhouette est un masque fait de
     cinq ellipses pleines reunies — la meme methode que le nuage du
     16/09, et pour la meme raison : cinq boules degradees qui doivent
     s'effacer sur leurs bords pour cacher leurs coutures ne peuvent pas
     avoir de silhouette, et cinq taches blanches qui s'effacent sur du
     lavande clair font une brume, pas un nuage.
     Ils traversent de gauche a droite en 60 a 95 s, chacun a sa hauteur
     et a sa vitesse. `translate3d` et rien d'autre : c'est la seule
     propriete que le navigateur peut animer sans recalculer la page. */
  .hn-cielo{
    position:absolute;inset:0;overflow:hidden;pointer-events:none;
  }
  /* LA MATIERE EST BEAUCOUP PLUS LEGERE QU'AU PREMIER ESSAI, et c'est
     une correction faite a l'ecran. Un blanc a 98 % pose sur un lavande
     tres clair ne donne pas un nuage : il donne une TACHE, et la plus
     grosse passait derriere le titre en le salissant. Le blanc plafonne
     donc a 62 %, et le ventre garde juste assez de violet pour que la
     forme existe. Ce sont les memes 34 % de bascule que le nuage du
     16/09, pour la meme raison : la ou il n'y a pas d'ecart de valeur,
     il n'y a pas de forme. */
  .hn-cielo i{
    position:absolute;display:block;
    background:
      radial-gradient(62% 48% at 50% 28%,rgba(255,255,255,.62),rgba(255,255,255,.30) 64%,rgba(255,255,255,.12) 100%),
      linear-gradient(180deg,rgba(255,255,255,.44) 0,rgba(var(--mg-3-rgb),.22) 100%);
    -webkit-mask-image:
      radial-gradient(28% 46% at 50% 56%,#000 99%,transparent 100%),
      radial-gradient(22% 34% at 26% 68%,#000 99%,transparent 100%),
      radial-gradient(21% 32% at 74% 68%,#000 99%,transparent 100%),
      radial-gradient(17% 27% at 40% 40%,#000 99%,transparent 100%),
      radial-gradient(15% 24% at 62% 42%,#000 99%,transparent 100%);
            mask-image:
      radial-gradient(28% 46% at 50% 56%,#000 99%,transparent 100%),
      radial-gradient(22% 34% at 26% 68%,#000 99%,transparent 100%),
      radial-gradient(21% 32% at 74% 68%,#000 99%,transparent 100%),
      radial-gradient(17% 27% at 40% 40%,#000 99%,transparent 100%),
      radial-gradient(15% 24% at 62% 42%,#000 99%,transparent 100%);
    will-change:transform;
    animation:hn-cielo-derive linear infinite;
  }
  /* Ils partent HORS de l'ecran a gauche et finissent HORS a droite :
     aucun nuage n'apparait ni ne disparait dans le cadre. */
  .hn-cielo i:nth-child(1){
    top:2%;  width:560px;height:190px;opacity:.72;
    animation-duration:78s;animation-delay:-18s;
  }
  .hn-cielo i:nth-child(2){
    top:26%; width:380px;height:135px;opacity:.52;
    animation-duration:60s;animation-delay:-42s;
  }
  .hn-cielo i:nth-child(3){
    top:54%; width:780px;height:265px;opacity:.60;
    animation-duration:95s;animation-delay:-70s;
  }
  @keyframes hn-cielo-derive{
    from{transform:translate3d(-100%,0,0)}
    to  {transform:translate3d(calc(100vw + 100%),0,0)}
  }

  /* ---- L'EN-TETE, LA SUITE DU 18/09 --------------------------------- */
  /* La premiere correction de ce jour rendait au logo sa largeur entiere
     et laissait le menu ceder en dernier recours. Vu a l'ecran : quand le
     bouton d'installation est affiche, « ceder » voulait dire marges
     internes a zero, et le menu se lisait « AgendaActividadesDescubrir ».
     On prend donc les 90 px ailleurs : sur un ordinateur, le bouton
     d'installation garde son icone et pose son libelle hors du cadre.
     Le mot reste dans la page, donc le bouton garde son nom pour un
     lecteur d'ecran ; c'est la seule raison de ne pas ecrire
     `display:none`. */
  .header .install-btn span{
    position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;
  }
  .header .install-btn{padding:9px 11px}
  .header .topnav{min-width:auto}
  .header .topnav>*{min-width:auto}

  /* La bande anniversaire est traitee dans `fiesta.css`, qui est
     chargee APRES celle-ci : une regle posee ici n'y arriverait pas. */

  /* ---- LE PIED DE PAGE ---------------------------------------------- */
  /* Treize liens dans une seule rangee qui se replie : sur un ecran
     large ils formaient DEUX rangees desalignees, la seconde commencant
     sous le logo. En trois colonnes alignees a droite, le pied redevient
     un bloc. Et sa marge haute tombe : la section de contact se termine
     desormais sur une bande de couleur, et les 80 px de blanc entre les
     deux ne separaient rien, ils laissaient juste un trait flotter. */
  .footer{margin-top:0}
  .footer .wrap{align-items:flex-start;gap:var(--sp-32)}
  .footer .cols{
    display:grid;grid-template-columns:repeat(3,auto);
    gap:10px clamp(28px,3vw,52px);justify-items:start;flex-wrap:nowrap;
  }
}

/* ---- LE CADRE DU SITE S'ELARGIT SUR LES GRANDS ECRANS ----------------
   Meme sans le bouton d'installation, l'en-tete etait pile a la limite :
   mesure a 1440 px, 1 133 px reclames pour 1 132 disponibles, et « Mis
   planes » et « El finde » se cassaient en deux lignes. Le menu compte
   neuf entrees ; il n'y a rien a y retirer et rien a serrer de plus.
   Le cadre du site (`.wrap`) passe donc de 1 180 a 1 240 px au-dela de
   1 360 px de fenetre. C'est le meme nombre que la colonne du heros, ce
   qui aligne enfin l'en-tete, le contenu et le pied de page sur une
   seule mesure, et ca rend au menu les 60 px qui lui manquaient.
   PORTEE : au-dela de 1 360 px seulement. En dessous, tout garde
   exactement la largeur d'avant. */
@media(min-width:1360px){
  .wrap{max-width:1240px}
  .header .topnav .navlink{white-space:nowrap}
}

/* Le reglage « moins de mouvement » du systeme vaut ici comme partout
   ailleurs sur cet ecran.

   ATTENTION AU PIEGE, ET IL A FAILLI PASSER : les trois nuages du ciel
   PARTENT hors du cadre, a `translate3d(-100%,0,0)`. Ecrire seulement
   `animation:none` les aurait donc laisses la ou ils commencent,
   c'est-a-dire INVISIBLES — un ciel vide, sur toutes les machines ou
   « reduire les animations » est actif, et il l'est sur celle de
   le responsable. Ils sont donc REPOSES a la main, chacun a sa place dans le
   cadre. Un decor immobile, pas un decor absent. */
@media (prefers-reduced-motion: reduce){
  .ini-hero-agenda,.ini-hero-agenda svg{transition:none}
  .ini-hero-agenda:hover{transform:none}
  .ini-hero-agenda:hover svg{transform:none}
  .hn-cielo i{animation:none;transform:none}
  .hn-cielo i:nth-child(1){left:-6%}
  .hn-cielo i:nth-child(2){left:62%}
  .hn-cielo i:nth-child(3){left:18%}
}

/* =====================================================================
   24. LE NOM DE LA MARQUE, COUPE DANS L'EN-TETE SUR ORDINATEUR
   ---------------------------------------------------------------------
   VU EN REGARDANT L'ACCUEIL DE BUREAU LE 18/09/2026 : l'en-tete
   n'affiche pas « HolaNinos » mais « HolaNin ». Ce n'est pas un defaut
   de cet ecran, il est sur TOUTES les pages du site des qu'on est sur un
   ordinateur ; il ne se voyait pas parce que personne n'avait regarde le
   site ailleurs que sur un telephone depuis des semaines.

   LA CAUSE, MESUREE A 1440 PX. La regle de l'en-tete etroit (section
   precedente, 16/09) dit que le logo est le SEUL element qui a le droit
   de retrecir, et qu'il coupe ce qui deborde au lieu de le poser sous la
   langue. C'etait juste sur un Samsung Flip. Sur un ordinateur, le menu
   compte NEUF entrees qui reclament 775 px, le choix de langue 165, le
   compte 38 : il manque exactement 22 px, et ce sont les 22 px du mot.

   LA CORRECTION EST DE L'AUTRE COTE. Rendre au logo sa largeur entiere
   ne suffisait pas : il fallait la prendre quelque part. Les neuf
   entrees du menu portaient 13 px de marge interne de chaque cote, soit
   234 px de vide pour 9 mots. A 10 px elles en rendent 54, c'est-a-dire
   deux fois ce qu'il manque. Le meme geste repare au passage « My plans »
   et « This weekend », qui se cassaient en deux lignes faute de place.

   PORTEE 1024 PX ET AU-DELA : sous cette largeur, l'en-tete garde mot
   pour mot le comportement regle le 16/09 sur les ecrans etroits.
   ===================================================================== */
@media(min-width:1024px){
  .header .wrap>.logo{flex:none;overflow:visible}
  .header .topnav>*{padding-left:10px;padding-right:10px}
  /* ET LE MENU DEVIENT CE QUI CEDE EN DERNIER RECOURS. Le logo ne
     retrecissant plus, il faut que quelque chose d'autre puisse le
     faire, sinon ce qui suit le menu sort de l'ecran : mesure a 1280 px
     avec le bouton d'installation affiche (il l'est sur Chrome de
     bureau, pas seulement sur Android), « Installer » etait coupe par le
     bord droit. `min-width:0` autorise le menu a descendre sous la
     largeur de ses mots ; ses entrees passent alors sur deux lignes,
     comme elles le font deja, et rien ne sort de l'en-tete.
     LE `min-width:0` EST SUR LE MENU **ET** SUR SES ENTREES. Sur le
     menu seul, la boite retrecit mais pas ce qu'elle contient : mesure
     a 1440 px, « Pricing » passait alors PAR-DESSUS le choix de langue.
     Ce qui cede en dernier, ce sont les marges internes des entrees, et
     c'est le moindre mal : l'autre solution que la page avait trouvee
     toute seule, c'etait de faire disparaitre le nom du site. */
  .header .topnav{min-width:0}
  .header .topnav>*{min-width:0}
}

/* =====================================================================
   26. L'ACCUEIL DEVIENT UNE VRAIE PAGE — 18/09/2026, APRES-MIDI
   ---------------------------------------------------------------------
   « Sur ordinateur et sur mobile, la page d'accueil, j'adore. Est-ce que
     tu peux mettre plus d'evenements en dessous avec les images et tout,
     et peut-etre mettre les differentes categories, que ca fasse une
     vraie page d'accueil ? Mais ce que je voulais vraiment, c'est que le
     heros, et que ce soit sur mobile, il soit vraiment comme on l'a
     fait. Et aussi, si possible, un encart pour inciter les societes a
     venir s'inscrire gratuitement, que ca leur apportera de la
     visibilite, et qu'ils se joignent au projet. »

   LA PREMIERE PHRASE EST UNE CONSIGNE, PAS UN COMPLIMENT : le heros ne
   bouge pas, ni sur telephone ni sur ordinateur. Tout ce qui suit se
   pose SOUS lui. Aucune regle de cette section ne touche a `.ini-hero`,
   a `.ini-centro`, ni au calque de fond.

   TROIS AJOUTS, DANS CET ORDRE A L'ECRAN
     1. les dernieres sorties passent de trois a six ;
     2. une rangee de categories, comptees sur l'agenda du jour ;
     3. l'encart des commerces.

   ELLES VALENT AUX TROIS TAILLES. C'est la demande (« et sur ordinateur
   et sur mobile ») : ce qui est ecrit ici est mobile d'abord, et le bloc
   de 1024 px plus bas ne fait que l'elargir.
   ===================================================================== */

/* ---- LES CATEGORIES ----------------------------------------------------- */
.ini-cats{margin:34px 0 0;position:relative;z-index:1}
.ini-cats-s{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--mg-doux)}
.ini-cat-rejilla{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0;
}
/* LA CASE. Le blanc plein est celui des cartes du heros : deux matieres
   differentes sur une meme page auraient fait deux pages. La couleur de
   la categorie n'est PAS le fond de la case — elle ne teinte que la
   pastille de l'emoji. Onze fonds de couleur pleine dans une rangee,
   c'est un nuancier, pas une navigation. */
.ini-cat{
  display:flex;align-items:center;gap:11px;min-width:0;
  padding:12px 13px;border-radius:18px;cursor:pointer;
  background:#fff;border:1px solid rgba(var(--mg-3-rgb),.26);
  font-family:inherit;text-align:left;
  box-shadow:0 8px 20px -14px rgba(var(--mg-rgb),.42);
  transition:transform .18s var(--ease),border-color .18s var(--ease),
             box-shadow .18s var(--ease);
  animation:mot-carta-in .34s var(--ease) both;
  animation-delay:calc(var(--i,0) * 40ms);
}
.ini-cat:hover{
  transform:translateY(-2px);border-color:rgba(var(--mg-3-rgb),.6);
  box-shadow:0 16px 30px -16px rgba(var(--mg-rgb),.5);
}
.ini-cat:active{transform:scale(.985)}
.ini-cat:focus-visible{outline:2px solid var(--mg-2);outline-offset:3px}
.ini-cat-em{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  font-size:19px;line-height:1;
  /* 14 % de la teinte : assez pour nommer la categorie, pas assez pour
     abimer le contraste du texte pose a cote. */
  background:color-mix(in srgb,var(--tinte) 14%,#fff);
}
@supports not (background:color-mix(in srgb,red 10%,blue)){
  .ini-cat-em{background:rgba(var(--mg-3-rgb),.14)}
}
.ini-cat-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ini-cat-t b{
  font-family:var(--f-display);font-size:14.5px;font-weight:var(--w-semi);
  line-height:1.2;color:var(--mg-fuerte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ini-cat-t i{font-style:normal;font-size:12px;color:var(--mg-doux)}
@media (prefers-reduced-motion: reduce){
  .ini-cat{animation:none;transition:none}
  .ini-cat:hover{transform:none}
}

/* ---- L'ENCART DES COMMERCES -------------------------------------------- */
/* IL EST VIOLET PLEIN, ET C'EST LE SEUL DE LA PAGE : c'est ce qui le
   detache de six vignettes blanches et huit cases blanches sans qu'il
   ait besoin d'etre plus gros qu'elles. Blanc sur #7C4DE0 vaut 5,26:1,
   la mesure inscrite ligne 1414 de ce fichier ; le texte secondaire est
   a 88 % de blanc, soit 4,8:1, toujours au-dessus des 4,5 exiges. */
.ini-neg{
  margin:34px 0 0;position:relative;z-index:1;overflow:hidden;
  padding:24px 22px;border-radius:26px;
  background:linear-gradient(135deg,var(--mg-1) 0,var(--mg-2) 62%,#4A268F 100%);
  color:var(--mg-tinta);
  box-shadow:0 24px 50px -28px rgba(var(--mg-rgb),.75);
}
/* Un halo tres doux dans l'angle : il empeche l'aplat violet de se lire
   comme un rectangle imprime. Aucun cout de rendu, aucun mouvement. */
.ini-neg::after{
  content:"";position:absolute;right:-12%;top:-42%;width:62%;padding-bottom:62%;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.22),rgba(255,255,255,0) 70%);
}
.ini-neg > *{position:relative;z-index:1}
.ini-neg-t{
  font-family:var(--f-display);font-size:20px;font-weight:var(--w-semi);
  line-height:1.18;letter-spacing:-.02em;margin:0;color:#fff;
}
.ini-neg-s{margin:10px 0 0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.88)}
.ini-neg-l{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.ini-neg-l li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.94);
}
.ini-neg-l svg{flex:none;margin-top:2px;color:#fff;opacity:.85}
.ini-neg-cta{
  display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;
  padding:13px 22px;border-radius:999px;background:#fff;
  color:var(--mg-2);font-size:15px;font-weight:var(--w-semi);
  text-decoration:none;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.45);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.ini-neg-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(0,0,0,.5)}
.ini-neg-cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ini-neg-cta svg{transition:transform .18s var(--ease)}
.ini-neg-cta:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){
  .ini-neg-cta,.ini-neg-cta svg{transition:none}
  .ini-neg-cta:hover,.ini-neg-cta:hover svg{transform:none}
}

/* ---- TABLETTE ---------------------------------------------------------- */
@media(min-width:721px){
  .ini-cat-rejilla{grid-template-columns:repeat(3,1fr);gap:12px}
  .ini-neg{padding:30px 28px}
  .ini-neg-t{font-size:23px}
}

/* ---- ORDINATEUR -------------------------------------------------------- */
@media(min-width:1024px){
  /* Les deux sections neuves sont des enfants de `.mot-paso`, donc des
     cases de la grille du corps : sans place explicite elles se
     rangeraient dans la colonne 1 a cote du heros. Les lignes sont
     renumerotees en entier ici, parce qu'elles se lisent mieux d'un bloc
     que corrigees une par une ailleurs. */
  #v-inicio .ini-ultimos{grid-column:1 / -1;grid-row:3}
  #v-inicio .ini-cats   {grid-column:1 / -1;grid-row:4}
  #v-inicio .ini-neg    {grid-column:1 / -1;grid-row:5}
  #v-inicio .ini-honesto{grid-column:1 / -1;grid-row:6}
  #v-inicio .ini-salta  {grid-column:1 / -1;grid-row:7}

  #v-inicio .ini-cats{margin-top:clamp(44px,6vh,72px)}
  #v-inicio .ini-cats-s{font-size:14.5px;margin-top:8px}
  #v-inicio .ini-cat-rejilla{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
  #v-inicio .ini-cat{padding:15px 16px;gap:13px;border-radius:20px}
  #v-inicio .ini-cat-em{width:44px;height:44px;border-radius:14px;font-size:22px}
  #v-inicio .ini-cat-t b{font-size:15.5px}
  #v-inicio .ini-cat-t i{font-size:12.5px}

  /* L'encart passe en deux colonnes : le discours d'un cote, le bouton
     de l'autre, centre. En une seule colonne sur 1 240 px, le bouton
     finissait seul en bas a gauche d'un aplat violet de 1 240 x 260,
     c'est-a-dire au point que l'oeil atteint en dernier. */
  #v-inicio .ini-neg{
    margin-top:clamp(44px,6vh,72px);
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;gap:clamp(32px,4vw,64px);
    padding:38px clamp(32px,3.4vw,48px);border-radius:32px;
  }
  #v-inicio .ini-neg-t{font-size:28px;letter-spacing:-.025em}
  #v-inicio .ini-neg-s{font-size:15.5px;max-width:64ch;margin-top:12px}
  #v-inicio .ini-neg-l{
    grid-template-columns:repeat(3,auto);justify-content:start;
    gap:10px clamp(20px,2.4vw,36px);margin-top:20px;
  }
  #v-inicio .ini-neg-l li{font-size:13.5px}
  #v-inicio .ini-neg-cta{margin:0;padding:15px 26px;font-size:15.5px;white-space:nowrap}
}

/* ---- L'ASSISTANT « CUMPLEAÑOS », 10/10/2026 ----------------------------
   Reutilise l'habillage du bouton magique (.mot-*, bloc 16 plus haut) :
   ce qui suit ne sont que les quelques pieces qui n'y existaient pas
   encore (deux champs cote a cote, une case a cocher, l'etat choisi
   d'une tuile, l'erreur, le panneau d'invitation). */
.cu-dos{display:flex;gap:10px;margin-top:12px}
.cu-dos .cu-mini{flex:1}
.cu-mini{display:block;margin-top:14px}
.cu-mini span{display:block;font-size:12.5px;font-weight:var(--w-semi);color:var(--mg-doux);margin-bottom:5px}
.cu-mini input,.cu-mini select{
  width:100%;border:1px solid var(--mg-borde-2);border-radius:var(--r-pill);
  background:var(--mg-vidrio);color:var(--mg-fuerte);font-family:inherit;
  font-size:15px;padding:12px 16px;box-sizing:border-box;
}
.cu-mini input:focus,.cu-mini select:focus{outline:none;border-color:var(--mg-2);box-shadow:0 0 0 3px rgba(var(--mg-2-rgb),.2)}
/* La tuile choisie se distingue, exactement comme une suggestion
   touchee ailleurs dans le moteur : bordure pleine, fond plus dense. */
.mot-carta.on{
  border-color:var(--mg-2);background:linear-gradient(160deg,rgba(var(--mg-3-rgb),.3),rgba(var(--mg-3-rgb),.08));
}
.cu-check{
  display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:14px;
  color:var(--mg-texto);cursor:pointer;
}
.cu-check input{flex:none;width:19px;height:19px;margin-top:1px;accent-color:var(--mg-2)}
.cu-err{min-height:18px;margin:10px 0 0;text-align:center;font-size:13px;font-weight:500;color:#D64550}
.cu-invit{margin-top:22px;padding-top:18px;border-top:1px solid var(--mg-borde)}
.cu-invit h3{margin:0;font-family:var(--f-display);font-size:17px;font-weight:var(--w-semi);color:var(--mg-fuerte)}

/* ---- « REJOIGNEZ-NOUS » : L'ENCART DES PROFESSIONNELS DE L'ACCUEIL (13/10/2026) ----
   Il reprend l'aplat violet de `.ini-neg` (meme fond, meme bouton) et ajoute
   quatre pastilles : tableau de bord, calendrier, courriels directs, logo et
   photos. Aucun prix : le bouton mene a la page des offres. */
.ini-un-rej{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.ini-un-p{
  display:grid;grid-template-columns:42px 1fr;column-gap:12px;row-gap:2px;align-items:start;
  padding:12px 14px;border-radius:16px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
}
.ini-un-ic{
  grid-row:1 / span 2;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:#fff;color:var(--mg-2);
}
.ini-un-p b{font-family:var(--f-display);font-weight:var(--w-semi);font-size:15px;line-height:1.25;color:#fff}
.ini-un-p > span:not(.ini-un-ic){font-size:13px;line-height:1.45;color:rgba(255,255,255,.9)}
.ini-un-nota{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.85);max-width:34ch}
@media(min-width:721px){
  .ini-un-rej{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1024px){
  #v-inicio .ini-un{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  #v-inicio .ini-un .ini-un-rej{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
  #v-inicio .ini-un .ini-un-p{grid-template-columns:1fr;row-gap:8px;padding:16px}
  #v-inicio .ini-un .ini-un-ic{grid-row:auto}
  #v-inicio .ini-un .ini-neg-ir{display:flex;flex-direction:column;align-items:flex-start}
}

/* ---- 15/10/2026, lot « ONE PLACE » : le lien secondaire de l'encart « Rejoignez-nous » (vers la page des offres) ---- */
.ini-un-sec{display:inline-block;margin:14px 0 0 18px;padding:6px 0;font-size:14px;font-weight:var(--w-semi);color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.55)}
.ini-un-sec:hover{border-bottom-color:#fff}
.ini-un-sec:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:720px){ .ini-un-sec{margin-left:0;display:block;width:max-content} }