/* =====================================================================
   HolaNinos · ninos-2026.css : LA COUCHE TERMINALE DU 17/10/2026
   ---------------------------------------------------------------------
   Chargee EN DERNIER. Elle ne modifie aucune regle d'origine : elle les
   couvre (meme methode que le « coup de fouet » de CodePur). Un bloc
   terminal se lit et se retire d'un bloc ; retoucher quarante regles
   dispersees dans 400 Ko de CSS aurait casse quelque chose hors de vue.

   CE QU'ELLE CHANGE
     1. les neutres passent au blanc lavande : le violet de la marque reste
        la seule couleur dominante ;
     2. l'en-tete devient opaque (on lisait le contenu au travers) ;
     3. boutons, puces, cartes : un seul langage, un seul focus ;
     4. les deux tableaux de bord : menu blanc a pastille, fond lavande,
        cartes blanches arrondies, courbes lisses, mouvement discret (style
        choisi par Sullivan le 17/10/2026) ;
     5. les composants nouveaux : etat vide, devis, preferences,
        statistiques du professionnel, portail municipal.

   LES REGLES DU SYSTEME HOLA, TENUES ICI
     - blanc sur violet : 5,3 de contraste, autorise ; blanc sur la terre
       cuite d'accent #A9442E : 5,6 ;
     - aucun degrade de fond de page, aucune tache floue, aucun emoji ; un
       seul degrade par ecran, la carte « vedette » (demande du 17/10) ;
     - un seul deplacement au survol (2 px), coupe sous reduced-motion ;
     - `animation-fill-mode: backwards`, jamais `forwards` (un transform qui
       survit cree un bloc conteneur et deplace les elements fixes).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONS
   17/10/2026, CHOIX DE SULLIVAN (capture « PayNow » envoyee le jour meme) :
   « moderne, blanc, futuriste, arrondi, anime ». Fond blanc lavande,
   cartes blanches tres arrondies, ombres douces et larges, menu blanc a
   pastille, courbes lisses, mouvement discret. Le violet de la marque
   reste la seule couleur de surface ; il porte aussi les rares cartes
   « vedette » en degrade (une par ecran au plus).
   ------------------------------------------------------------------ */
:root{
  --n-0:#FFFFFF;
  --n-25:#FBFBFE;
  --n-50:#F5F6FC;
  --n-100:#EDEFF9;
  --n-200:#E3E5F3;
  --n-300:#CED1E6;
  --n-400:#9A9DBB;
  --n-500:#676A8A;   /* 5,4 sur --fond */
  --n-600:#4A4D6B;
  --n-700:#353854;
  --n-800:#24263D;
  --n-900:#17182B;
  --fond:#F3F4FB;
  --fond-2:#EEF0FA;
  --surface:#FFFFFF;
  --surface-2:#F6F7FD;
  --trait:#E6E8F4;
  --trait-fort:#D3D6EA;

  /* Accents : terre cuite pour signaler, mer pour informer. Jamais en surface. */
  --terre:#B3431F;
  --terre-fond:#FDEEE8;
  --terre-trait:#F4D2C5;
  --mer:#1D6E8A;
  --mer-fond:#E7F3F7;

  /* La carte vedette : un degrade de la marque, une par ecran au plus. */
  --vedette:linear-gradient(135deg,#8A63F0 0%,#6A3ACB 55%,#5A2FB0 100%);

  --r-carte:26px;
  --ombre-carte:0 1px 2px rgba(23,24,43,.03), 0 12px 32px -18px rgba(60,52,140,.20);
  --ombre-haute:0 2px 8px rgba(23,24,43,.05), 0 28px 60px -28px rgba(60,52,140,.38);
  --anneau:0 0 0 4px color-mix(in srgb, var(--br-500) 22%, transparent);
  --monte:cubic-bezier(.22,.9,.3,1);
}

body{background:var(--fond);color:var(--encre)}
/* 17/10/2026 (style « blanc, arrondi ») : le fond lavande en degrade de
   l'accueil (etapes.css) devient un fond uni : les cartes blanches portent
   le relief, plus le fond. */
html body,html body[data-view]{background:var(--fond)}
::selection{background:var(--br-100);color:var(--br-ink)}

/* Le focus, partout le meme : visible, a la couleur de la marque. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--br-500);outline-offset:2px;border-radius:6px;
}

/* ---------------------------------------------------------------------
   2. EN-TETE : OPAQUE
   ------------------------------------------------------------------ */
.header{
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--trait);
}

/* ---------------------------------------------------------------------
   3. BOUTONS, PUCES, CARTES, CHAMPS
   ------------------------------------------------------------------ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--br-500);color:#fff;border:1px solid transparent;
  border-radius:var(--r-pill);font-weight:var(--w-semi);
  min-height:44px;padding:0 20px;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -10px var(--br-ombre);
  transition:background var(--d-court) var(--ease-doux), transform var(--d-court) var(--ease-doux);
}
.btn-primary:hover{background:var(--br-600)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled],.btn-primary[aria-busy="true"]{opacity:.6;cursor:progress}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--surface);color:var(--encre);border:1px solid var(--trait-fort);
  border-radius:var(--r-pill);min-height:44px;padding:0 18px;font-weight:var(--w-medium);
  transition:border-color var(--d-court) var(--ease-doux), background var(--d-court) var(--ease-doux);
}
.btn-ghost:hover{border-color:var(--br-400);background:var(--br-wash);color:var(--br-ink)}
.chip{border-color:var(--trait);background:var(--surface)}
.chip:hover{border-color:var(--br-400)}
.chip.on{background:var(--br-500);border-color:transparent;color:#fff}

.ocard{
  border-color:var(--trait);box-shadow:var(--ombre-carte);
}
.ochamp input,.ochamp select,.ochamp textarea,.select{
  border-color:var(--trait-fort);background:var(--surface);
}
.ochamp input:focus,.ochamp select:focus,.ochamp textarea:focus,.select:focus{
  border-color:var(--br-500);box-shadow:var(--anneau);outline:none;
}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------
   3 bis. LES PAGES PUBLIQUES DANS LE MEME LANGAGE
   Cartes blanches tres arrondies, ombre large et douce, une montee de 2 px
   au survol ; puces et champs de recherche en pilules blanches.
   ------------------------------------------------------------------ */
.grid .card,.card{
  border:0;border-radius:24px;background:var(--surface);box-shadow:var(--ombre-carte);overflow:hidden;
  transition:transform var(--d-normal) var(--monte), box-shadow var(--d-normal) var(--monte);
}
.grid .card:hover,.card:hover{transform:translateY(var(--leve));box-shadow:var(--ombre-haute)}
.card .thumb{border-radius:0}
.chips .chip,.datechips .chip{border-radius:var(--r-pill);border:1px solid var(--trait);background:var(--surface);box-shadow:0 1px 2px rgba(23,24,43,.03)}
.chips .chip.on{background:var(--br-500);border-color:transparent;color:#fff;box-shadow:0 8px 18px -12px var(--br-ombre)}
#q,.search input,.select{border-radius:var(--r-pill)!important}
.pubtab{border-radius:var(--r-pill)}
@media (prefers-reduced-motion:reduce){ .card,.grid .card{transition:none} .card:hover{transform:none} }

/* ---------------------------------------------------------------------
   4. AGENDA : L'ETAT VIDE QUI AIDE
   ------------------------------------------------------------------ */
.empty{
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-card);
  padding:var(--sp-32) var(--sp-24);box-shadow:var(--ombre-carte);text-align:left;
}
.empty > p{font-family:var(--f-display);font-size:19px;font-weight:var(--w-semi);color:var(--encre);margin:var(--sp-8) 0 0}
.empty .ico-vide{color:var(--br-500)}
.vide-plus{display:flex;flex-direction:column;gap:var(--sp-16);margin-top:var(--sp-16)}
.vide-plus .vp-t{margin:0;color:var(--encre-2);font-size:14.5px}
.vp-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vp-f{
  display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px 0 14px;
  border-radius:var(--r-pill);border:1px solid var(--br-200);background:var(--br-wash);
  color:var(--br-ink);font-weight:var(--w-semi);font-size:14px;cursor:pointer;
}
.vp-f span{font-size:18px;line-height:1;color:var(--br-500)}
.vp-f:hover{background:var(--br-100)}
.vp-tout{background:none;border:0;color:var(--terre);font-weight:var(--w-semi);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;min-height:36px;padding:0 6px}
.vp-props{display:flex;flex-wrap:wrap;gap:8px}
.vp-lieux{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.vp-alerte{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px dashed var(--trait-fort);padding-top:var(--sp-16);
}
.vp-alerte p{margin:0;flex:1 1 260px;color:var(--encre-2)}
.vp-alerte .btn-primary{flex:0 0 auto}
.vp-lieux .ail-i{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--surface-2);border:0;border-radius:16px;padding:12px 14px;cursor:pointer}
.vp-lieux .ail-i span{font-size:12.5px;color:var(--doux)}
.vp-lieux .ail-i:hover{background:var(--br-wash)}
.pin-approche .dot{box-sizing:border-box}

/* ---------------------------------------------------------------------
   5. LES DEUX TABLEAUX DE BORD (famille et professionnel, meme coquille)
   Menu blanc a pastille, fond lavande, cartes blanches arrondies.
   ------------------------------------------------------------------ */
body[data-dash]{background:var(--fond)}
body[data-dash] main.wrap{max-width:1380px}
body[data-dash] .tb-nav{
  background:var(--surface);border:0;border-radius:var(--r-carte);
  box-shadow:var(--ombre-carte);padding:var(--sp-24) var(--sp-16);
}
.tb-logo .brand{font-size:19px}
.tb-espace{letter-spacing:.08em}
.tb-liens{gap:4px}
.tb-l{
  border-radius:14px;min-height:44px;padding-inline:14px;color:var(--n-500);font-weight:var(--w-medium);
  transition:background var(--d-normal) var(--monte), color var(--d-normal) var(--monte), transform var(--d-normal) var(--monte);
}
.tb-l .ico{color:var(--n-400)}
.tb-l:hover{background:var(--n-50);color:var(--encre);transform:translateX(2px)}
.tb-l:hover .ico{color:var(--br-500)}
.tb-l[aria-current="page"]{
  background:var(--br-wash);color:var(--br-ink);font-weight:var(--w-semi);box-shadow:none;position:relative;
}
.tb-l[aria-current="page"]::before{
  content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:4px;border-radius:0 4px 4px 0;background:var(--br-500);
}
.tb-l[aria-current="page"] .ico{color:var(--br-500)}
.tb-moi{border-top:1px solid var(--trait)}
.tb-autre{border-radius:14px}
.tb-tete{margin-top:var(--sp-24);margin-bottom:var(--sp-12)}
.tb-tete h1{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.03em}

/* 17/10/2026, DEMANDE DE SULLIVAN : « je ne veux pas qu'on voie le header du
   site quand on entre dans le dashboard, ca ne fait pas pro ». Dans un espace
   (famille ou pro), l'en-tete, le pied de page, la barre du bas et le bouton
   flottant du site disparaissent : le menu de gauche est la seule navigation.
   Le logo du menu ramene au site ; la langue se change dans « Mon compte ». */
body[data-dash] > .header,
body[data-dash] > .footer,
body[data-dash] > #nav,
body[data-dash] > #chFab,
body[data-dash] > .hero,
body[data-dash] > #etapesBand{display:none!important}
body[data-dash]{padding-bottom:0!important}
@media (min-width:900px){
  body[data-dash] main.wrap{padding-top:var(--sp-24);padding-bottom:var(--sp-48)}
  body[data-dash] main.wrap > .tb-nav{top:24px;max-height:calc(100vh - 48px);margin-top:0}
  body[data-dash] .tb-tete,body[data-dash] .fh-tete{margin-top:var(--sp-8)}
}
@media (max-width:899px){
  body[data-dash] .tb-barre{top:0;z-index:60;background:rgba(255,255,255,.97)}
}
.tb-site{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--doux);text-decoration:none;padding:0 4px}
.tb-site:hover{color:var(--br-ink)}

/* Les cartes du tableau de bord : blanches, sans bord, tres arrondies. */
body[data-dash] .ocard{border:0;border-radius:var(--r-carte);box-shadow:var(--ombre-carte);padding:var(--sp-24)}

/* Les chiffres : une carte, une icone dans une pastille, un grand nombre. */
.tb-kpis{gap:var(--sp-16)}
.tb-kpi{
  background:var(--surface);border:0;border-radius:22px;box-shadow:var(--ombre-carte);
  padding:var(--sp-24) var(--sp-24) var(--sp-16);
  transition:transform var(--d-normal) var(--monte), box-shadow var(--d-normal) var(--monte);
}
.tb-kpi:hover{transform:translateY(var(--leve));box-shadow:var(--ombre-haute)}
.tb-kpi-i{
  width:44px;height:44px;border-radius:14px;align-items:center;justify-content:center;
  background:var(--br-wash);color:var(--br-500);margin-bottom:14px;
}
.tb-kpi b{font-size:30px;letter-spacing:-.03em}

/* La carte vedette : le seul degrade d'un ecran. */
.hn-vedette{
  background:var(--vedette);color:#fff;border-radius:var(--r-carte);padding:var(--sp-24);
  box-shadow:0 24px 48px -26px rgba(90,47,176,.65);position:relative;overflow:hidden;
}
.hn-vedette::after{
  content:"";position:absolute;right:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;
  border:28px solid rgba(255,255,255,.10);pointer-events:none;
}
.hn-vedette h2,.hn-vedette h3{color:#fff;margin:0 0 6px}
.hn-vedette p{color:rgba(255,255,255,.86);margin:0 0 var(--sp-16);max-width:46ch}
.hn-vedette .btn-primary{background:#fff;color:var(--br-ink);box-shadow:none}
.hn-vedette .btn-primary:hover{background:var(--br-wash)}
.pp-vedette{margin-top:var(--sp-16)}
.pp-vedette .pp-lista{color:rgba(255,255,255,.9);margin:0 0 var(--sp-16);position:relative;z-index:1}
.hn-vedette .btn-primary{position:relative;z-index:1}
.hn-vedette .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}

/* L'entree en scene : une montee courte, en cascade, une seule fois. */
@keyframes hn-monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
body[data-dash] .tb-kpi,body[data-dash] .ocard,.rd-tuile,.rd-carte,.dv-item,.dv-offre,.hn-vedette,.fh-bloc{
  animation:hn-monte .5s var(--monte) backwards;
}
body[data-dash] :is(.tb-kpi,.rd-tuile,.dv-item,.dv-offre,.fh-bloc):nth-child(2){animation-delay:.05s}
body[data-dash] :is(.tb-kpi,.rd-tuile,.dv-item,.dv-offre,.fh-bloc):nth-child(3){animation-delay:.10s}
body[data-dash] :is(.tb-kpi,.rd-tuile,.dv-item,.dv-offre,.fh-bloc):nth-child(4){animation-delay:.15s}
body[data-dash] :is(.tb-kpi,.rd-tuile,.dv-item,.dv-offre,.fh-bloc):nth-child(n+5){animation-delay:.2s}

/* ---------------------------------------------------------------------
   6. SQUELETTES, DIALOGUES, PASTILLES D'ETAT
   ------------------------------------------------------------------ */
.dv-squelette{display:grid;gap:12px;margin-top:var(--sp-24)}
.dv-sq{height:76px;border-radius:16px;background:linear-gradient(90deg,var(--n-100),var(--n-50),var(--n-100));
  background-size:200% 100%;animation:hn-reflet 1.4s linear infinite}
@keyframes hn-reflet{from{background-position:200% 0}to{background-position:-200% 0}}

.dv-dialog{
  border:0;border-radius:22px;padding:var(--sp-24);max-width:min(460px, calc(100vw - 32px));
  box-shadow:var(--ombre-haute);color:var(--encre);
}
.dv-dialog::backdrop{background:rgba(27,21,36,.42)}
.dv-dialog h2{font-size:20px;margin:0 0 8px}
.dv-dialog p{margin:0 0 var(--sp-24);color:var(--encre-2)}
.dv-dialog-b{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}

.dv-etat{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:4px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:var(--w-semi);
  border:1px solid var(--trait);background:var(--surface-2);color:var(--encre-2);
}
.dv-etat::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.dv-etat-borrador{color:var(--n-600)}
.dv-etat-enviada,.dv-etat-vista,.dv-etat-en_espera{background:var(--mer-fond);border-color:#C6E1EA;color:var(--mer)}
.dv-etat-respondida,.dv-etat-nueva{background:var(--terre-fond);border-color:var(--terre-trait);color:var(--terre)}
.dv-etat-aceptada,.dv-etat-confirmada{background:var(--ok-fond);border-color:var(--ok-trait);color:var(--ok)}
.dv-etat-rechazada,.dv-etat-declinada,.dv-etat-cancelada,.dv-etat-anulada,.dv-etat-no_retenida{color:var(--n-500)}

/* ---------------------------------------------------------------------
   7. DEVIS
   ------------------------------------------------------------------ */
.dv-barre{display:flex;justify-content:flex-end;margin:var(--sp-16) 0}
.dv-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dv-item{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--trait);border-radius:18px;
  padding:14px 16px;color:var(--encre);text-decoration:none;box-shadow:var(--ombre-carte);
  transition:border-color var(--d-court) var(--ease-doux), transform var(--d-court) var(--ease-doux);
}
.dv-item:hover{border-color:var(--br-200);transform:translateY(var(--leve))}
.dv-item > .ico:last-child{color:var(--pale);flex:none}
.dv-item-ico{width:42px;height:42px;border-radius:14px;background:var(--br-wash);color:var(--br-500);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.dv-item-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.dv-item-t b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis}
.dv-item-t span{font-size:13.5px;color:var(--doux)}
.dv-n{display:inline-flex;min-width:24px;height:24px;padding:0 7px;border-radius:12px;align-items:center;justify-content:center;
  background:var(--br-100);color:var(--br-ink);font-size:13px;margin-left:6px;vertical-align:2px}

.dv-vide{
  text-align:center;background:var(--surface);border:1px solid var(--trait);border-radius:24px;
  padding:var(--sp-48) var(--sp-24);box-shadow:var(--ombre-carte);margin-top:var(--sp-24);
}
.dv-vide > .ico{color:var(--br-500)}
.dv-vide h2{font-size:22px;margin:12px 0 8px}
.dv-vide p{color:var(--encre-2);max-width:52ch;margin:0 auto var(--sp-16)}
.dv-vide-s{padding:var(--sp-24);text-align:left;margin-top:0;box-shadow:none;background:var(--surface-2)}
.dv-vide-s p{margin:0}
.dv-pasos{counter-reset:p;list-style:none;padding:0;margin:0 auto var(--sp-24);display:grid;gap:8px;max-width:420px;text-align:left}
.dv-pasos li{counter-increment:p;display:flex;gap:12px;align-items:flex-start;color:var(--encre-2)}
.dv-pasos li::before{content:counter(p);flex:none;width:26px;height:26px;border-radius:50%;background:var(--br-100);
  color:var(--br-ink);font-weight:var(--w-semi);display:inline-flex;align-items:center;justify-content:center;font-size:13px}

.dv-retour{margin-top:var(--sp-16)}
.dv-retour a{display:inline-flex;align-items:center;gap:6px;color:var(--encre-2);font-weight:var(--w-medium);text-decoration:none}
.dv-retour a:hover{color:var(--br-ink)}
.dv-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap;margin:var(--sp-12) 0 var(--sp-16)}
.dv-tete h1{font-size:clamp(22px,2.2vw,30px);margin:2px 0 0;line-height:1.2}
.dv-sur{margin:0;color:var(--terre);font-weight:var(--w-semi);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.dv-puces{list-style:none;padding:0;margin:0 0 var(--sp-16);display:flex;flex-wrap:wrap;gap:6px}
.dv-puces li{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-pill);padding:5px 12px;font-size:13.5px;color:var(--encre-2)}
.dv-det{background:var(--surface-2);border-radius:14px;padding:12px 16px;color:var(--encre-2);margin:0 0 var(--sp-16);white-space:pre-wrap}
.dv-aide{color:var(--doux);font-size:13.5px;line-height:1.5}
.dv-prive{display:flex;gap:8px;align-items:center;background:var(--mer-fond);color:var(--mer);border-radius:12px;padding:10px 14px}

.dv-fil{list-style:none;display:flex;gap:0;padding:0;margin:0 0 var(--sp-16);counter-reset:f;overflow-x:auto}
.dv-fil li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--doux);white-space:nowrap;padding-right:28px;position:relative}
.dv-fil li:not(:last-child)::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:1px;background:var(--trait-fort)}
.dv-fil li span{width:24px;height:24px;border-radius:50%;border:1px solid var(--trait-fort);display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:var(--surface)}
.dv-fil li.fait span{background:var(--br-100);border-color:var(--br-200);color:var(--br-ink)}
.dv-fil li.ici{color:var(--encre);font-weight:var(--w-semi)}
.dv-fil li.ici span{background:var(--br-500);border-color:var(--br-500);color:#fff}

.dv-sec{margin-top:var(--sp-32)}
.dv-sec > h2{font-size:19px;margin:0 0 6px;display:flex;align-items:center;gap:6px}
.dv-comp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-16);margin-top:var(--sp-12)}
.dv-offre{
  background:var(--surface);border:1px solid var(--trait);border-radius:20px;padding:var(--sp-16) var(--sp-16) var(--sp-16);
  box-shadow:var(--ombre-carte);display:flex;flex-direction:column;
}
.dv-offre header{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.dv-offre header h3{margin:0;font-size:17px}
.dv-offre header span{font-size:13px;color:var(--doux)}
.dv-offre header .dv-etat{align-self:flex-start;margin-top:6px}
.dv-prix{font-family:var(--f-display);font-size:24px;font-weight:var(--w-semi);letter-spacing:-.02em;margin:0 0 12px;color:var(--encre)}
.dv-offre dl{margin:0;display:grid;gap:8px;flex:1}
.dv-offre dt{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--doux)}
.dv-offre dd{margin:0;font-size:14px;color:var(--encre-2)}
.dv-offre-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:var(--sp-16)}
.dv-offre-b > *{flex:1 1 140px}
.dv-o-aceptada,.dv-o-confirmada{border-color:var(--ok-trait);box-shadow:0 0 0 3px var(--ok-fond)}
.dv-o-rechazada,.dv-o-no_retenida,.dv-o-anulada{opacity:.6}
.dv-dispo{font-weight:var(--w-semi)}
.dv-disp_declarada{color:var(--alerte)}
.dv-disp_a_confirmar{color:var(--mer)}
.dv-disp_no{color:var(--refus)}
.dv-disp_confirmada{color:var(--ok)}

.dv-env{list-style:none;padding:0;margin:var(--sp-8) 0 0;display:grid;gap:6px}
.dv-env li{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:10px 14px}
.dv-env li span{color:var(--doux);font-size:13.5px}

.dv-accepte{background:var(--ok-fond);border:1px solid var(--ok-trait);border-radius:20px;padding:var(--sp-16) var(--sp-24);margin:var(--sp-16) 0}
.dv-accepte h2{display:flex;align-items:center;gap:8px;font-size:18px;margin:0 0 6px;color:var(--ok)}
.dv-accepte p{margin:6px 0;color:var(--encre-2)}
.dv-contact{list-style:none;padding:0;margin:10px 0;display:flex;flex-wrap:wrap;gap:8px}
.dv-contact a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--ok-trait);color:var(--encre);font-weight:var(--w-semi);text-decoration:none}

.dv-cand{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin:var(--sp-12) 0}
.dv-cand-i{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:12px 14px;cursor:pointer}
.dv-cand-i:has(input:checked){border-color:var(--br-500);box-shadow:var(--anneau)}
.dv-cand-i:has(input:disabled){opacity:.55;cursor:not-allowed}
.dv-cand-i input{margin-top:3px;width:18px;height:18px;accent-color:var(--br-500)}
.dv-cand-i > span{display:flex;flex-direction:column;gap:2px}
.dv-cand-i > span span{font-size:13px;color:var(--doux)}
.dv-equipo{margin:var(--sp-8) 0}

.dv-form{margin-top:var(--sp-16);display:grid;gap:var(--sp-16)}
.dv-form fieldset{border:1px solid var(--trait);background:var(--surface);border-radius:20px;padding:var(--sp-16) var(--sp-24) var(--sp-24);margin:0;box-shadow:var(--ombre-carte);display:grid;gap:var(--sp-12);min-width:0}
.dv-form legend{font-family:var(--f-display);font-weight:var(--w-semi);font-size:16px;padding:0 6px;color:var(--encre)}
.dv-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12)}
.dv-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}
.dv-cases{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.dv-case{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--trait-fort);border-radius:var(--r-pill);background:var(--surface);cursor:pointer;font-size:14px}
.dv-case input{width:16px;height:16px;accent-color:var(--br-500);margin:0}
.dv-case:has(input:checked){background:var(--br-wash);border-color:var(--br-400);color:var(--br-ink);font-weight:var(--w-semi)}
.dv-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--encre-2)}
.dv-consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--br-500)}
.dv-err{margin:0;color:var(--refus);font-size:13.5px;font-weight:var(--w-medium)}
.dv-err-g{background:var(--refus-fond);border:1px solid var(--refus-trait);border-radius:12px;padding:10px 14px}
.dv-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.dv-actions-bas{margin-top:var(--sp-32);padding-top:var(--sp-16);border-top:1px solid var(--trait)}
.dv-danger{color:var(--refus)}
.dv-danger:hover{border-color:var(--refus-trait);background:var(--refus-fond);color:var(--refus)}

@media (max-width:760px){
  .dv-2,.dv-3{grid-template-columns:1fr}
  .dv-form fieldset{padding:var(--sp-12) var(--sp-16) var(--sp-16)}
  .dv-actions > *{flex:1 1 auto}
  .dv-item{padding:12px}
  .dv-item .dv-etat{display:none}
}

/* ---------------------------------------------------------------------
   8. LES RESULTATS DU PROFESSIONNEL (rendimiento.js)
   ------------------------------------------------------------------ */
.rd-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:var(--sp-8) 0 var(--sp-16)}
.rd-filtres .chip{min-height:38px;border-radius:var(--r-pill);padding:0 16px}
.rd-desde{margin-left:auto;font-size:13px;color:var(--doux)}
.rd-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16)}
.rd-tuile{
  background:var(--surface);border-radius:22px;box-shadow:var(--ombre-carte);padding:var(--sp-24) var(--sp-24) var(--sp-16);
  display:flex;flex-direction:column;gap:4px;min-width:0;
  transition:transform var(--d-normal) var(--monte), box-shadow var(--d-normal) var(--monte);
}
.rd-tuile:hover{transform:translateY(var(--leve));box-shadow:var(--ombre-haute)}
.rd-tuile-i{width:44px;height:44px;border-radius:14px;background:var(--br-wash);color:var(--br-500);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px}
.rd-tuile-l{font-size:13.5px;color:var(--doux)}
.rd-tuile-v{font-family:var(--f-display);font-size:32px;line-height:1.1;letter-spacing:-.03em;color:var(--encre)}
.rd-delta{font-size:12.5px;color:var(--doux)}
.rd-delta.up{color:var(--ok)}
.rd-delta.down{color:var(--terre)}
.rd-nat{display:inline-flex;align-self:flex-start;gap:6px;align-items:center;font-size:11.5px;letter-spacing:.02em;
  color:var(--n-500);margin:8px 0 0}
.rd-nat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--n-300)}
.rd-nat-navegador::before{background:#C9B8F6}
.rd-nat-servidor::before{background:var(--br-500)}
.rd-nat-calculado::before{background:var(--terre)}
p.rd-nat{display:flex}

.rd-grille2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-16);margin-top:var(--sp-16)}
.rd-carte{background:var(--surface);border-radius:var(--r-carte);box-shadow:var(--ombre-carte);padding:var(--sp-24);min-width:0}
.rd-carte + .rd-carte{margin-top:0}
section.rd-carte:not(.rd-grille2 > *){margin-top:var(--sp-16)}
.rd-carte > h2{display:flex;align-items:center;gap:8px;font-size:17px;margin:0 0 var(--sp-16)}
.rd-carte > h2 .ico{color:var(--br-500)}

.rd-courbe{margin:0 0 var(--sp-16)}
.rd-courbe figcaption{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--doux);margin-bottom:4px}
.rd-courbe figcaption b{font-family:var(--f-display);font-size:20px;color:var(--encre)}
.rd-plot{position:relative;border-radius:14px;outline-offset:4px}
.rd-plot svg{display:block;width:100%;height:170px;overflow:visible}
.rd-grille{stroke:var(--n-100);stroke-width:1;vector-effect:non-scaling-stroke}
.rd-axe{font-size:11px;fill:var(--n-400);font-family:var(--f-text)}
.rd-ligne{fill:none;stroke:#7C4DE0;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:0;animation:rd-trace 1.1s var(--monte) backwards}
@keyframes rd-trace{from{stroke-dashoffset:1}}
.rd-aire{animation:hn-apparait .9s ease .2s backwards}
@keyframes hn-apparait{from{opacity:0}}
.rd-reticule{stroke:var(--br-400);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.rd-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#7C4DE0;
  box-shadow:0 0 0 4px #fff, 0 4px 12px rgba(90,47,176,.45);pointer-events:none}
.rd-bulle{position:absolute;top:-6px;min-width:150px;background:var(--n-900);color:#fff;border-radius:12px;padding:8px 12px;
  display:flex;flex-direction:column;gap:2px;pointer-events:none;box-shadow:var(--ombre-haute);transform:translateY(-100%)}
.rd-bulle[hidden],.rd-dot[hidden]{display:none}
.rd-bulle b{font-size:16px}
.rd-bulle span{font-size:12px;color:rgba(255,255,255,.72)}
.rd-table summary{cursor:pointer;font-size:13px;color:var(--br-ink);margin-top:6px}
.rd-table table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.rd-table th,.rd-table td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--trait)}
.rd-table td:last-child,.rd-table th:last-child{text-align:right}

.rd-barres{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rd-barres li{display:grid;grid-template-columns:minmax(90px,140px) 1fr auto;align-items:center;gap:12px}
.rd-b-l{font-size:14px;color:var(--encre-2)}
.rd-b-piste{height:10px;border-radius:var(--r-pill);background:var(--n-50);overflow:hidden}
.rd-b-v{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,#A88BF2,#7C4DE0);
  transform-origin:left;animation:rd-pousse .8s var(--monte) backwards}
@keyframes rd-pousse{from{transform:scaleX(0)}}
.rd-b-n{font-size:14px;min-width:32px;text-align:right;color:var(--encre)}
.rd-b-n small{color:var(--doux);font-weight:400}
.rd-calc{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:var(--sp-16) 0 0;padding-top:var(--sp-16);border-top:1px dashed var(--trait-fort)}
.rd-calc dt{color:var(--doux);font-size:14px}
.rd-calc dd{margin:0;font-weight:var(--w-semi);text-align:right}
.rd-declare{margin-top:var(--sp-16);background:var(--surface-2);border-radius:16px;padding:14px 16px;display:grid;gap:2px}
.rd-declare span{font-size:13px;color:var(--doux)}
.rd-declare b{font-family:var(--f-display);font-size:22px}
.rd-declare small{font-size:12px;color:var(--doux)}

.rd-occ{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rd-occ li{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,1.4fr) auto;gap:14px;align-items:center}
.rd-occ-t{display:flex;flex-direction:column;min-width:0}
.rd-occ-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-occ-t span{font-size:12.5px;color:var(--doux)}
.rd-occ-m{height:12px;border-radius:var(--r-pill);background:var(--n-50);display:flex;overflow:hidden}
.rd-occ-m .c{background:#7C4DE0}
.rd-occ-m .r{background:#C9B8F6}
.rd-occ-n{font-size:13px;color:var(--encre-2);white-space:nowrap}
.rd-debut{margin-top:var(--sp-16)}
.rd-aide{margin-top:var(--sp-24);background:var(--surface);border-radius:20px;padding:14px 20px;box-shadow:var(--ombre-carte)}
.rd-aide summary{cursor:pointer;font-weight:var(--w-semi)}
.rd-aide ul{margin:10px 0 0;padding-left:18px;color:var(--encre-2);display:grid;gap:6px;font-size:14px}

@media (max-width:1100px){ .rd-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))} .rd-grille2{grid-template-columns:1fr} }
@media (max-width:560px){
  .rd-tuiles{gap:10px}
  .rd-tuile{padding:var(--sp-16)}
  .rd-tuile-v{font-size:26px}
  .rd-occ li{grid-template-columns:1fr;gap:6px}
  .rd-barres li{grid-template-columns:96px 1fr auto}
  .rd-desde{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){ .rd-ligne,.rd-aire,.rd-b-v{animation:none} }

/* ---------------------------------------------------------------------
   8 bis. L'ACCUEIL DE LA FAMILLE (familia-inicio.js)
   ------------------------------------------------------------------ */
.fh-tete{margin:var(--sp-24) 0 var(--sp-16)}
.fh-tete h1{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.035em;margin:2px 0 6px}
.fh-tete p{margin:0;color:var(--doux);max-width:60ch}
.fh-sur{margin:0;color:var(--br-500);font-weight:var(--w-semi);font-size:13px}
.fh-sur::first-letter,.fh-sur-v::first-letter{text-transform:uppercase}
.fh-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.fh-grille{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-16);margin-top:var(--sp-16);align-items:start}
.fh-col{display:grid;gap:var(--sp-16);min-width:0}
.fh-col > .ocard{margin:0}
.fh-finde{padding:var(--sp-32) var(--sp-32) var(--sp-24)}
.fh-finde h2{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.fh-sur-v{margin:0 0 8px;font-size:13px;font-weight:var(--w-semi);color:rgba(255,255,255,.8)}
.fh-finde-l{list-style:none;margin:0 0 var(--sp-16);padding:0;display:grid;gap:8px;position:relative;z-index:1}
.fh-finde-l button{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;border-radius:16px;padding:12px 16px;
  transition:background var(--d-normal) var(--monte), transform var(--d-normal) var(--monte)}
.fh-finde-l button:hover{background:rgba(255,255,255,.22);transform:translateX(3px)}
.fh-finde-l b{font-size:15px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fh-finde-l span{font-size:12.5px;color:rgba(255,255,255,.8)}
.fh-v-b{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}
.fh-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fh-sortie{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  background:transparent;border:0;border-radius:16px;padding:10px 8px;color:var(--encre);
  transition:background var(--d-normal) var(--monte);
}
.fh-sortie:hover{background:var(--surface-2)}
.fh-sortie > .ico{color:var(--pale);flex:none}
.fh-date{flex:none;width:50px;height:54px;border-radius:14px;background:var(--br-wash);color:var(--br-ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.fh-date b{font-family:var(--f-display);font-size:20px}
.fh-date span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-top:3px}
.fh-sortie-t{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.fh-sortie-t > b{font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fh-sortie-t > span{font-size:12.5px;color:var(--doux)}
.fh-raisons{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.fh-raisons i{font-style:normal;font-size:11.5px;font-weight:var(--w-semi);color:var(--br-ink);background:var(--br-wash);border-radius:var(--r-pill);padding:2px 8px}
.fh-recos-t{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fh-recos-t .ocard-t{margin:0}
.fh-recos-t .btn-ghost{min-height:36px;padding:0 14px;font-size:13.5px}
.fh-sous{margin:var(--sp-12) 0 4px;font-size:12.5px;font-weight:var(--w-semi);color:var(--doux);text-transform:uppercase;letter-spacing:.05em}
.fh-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fh-act{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;cursor:pointer;
  background:var(--surface-2);border:0;border-radius:18px;padding:16px;color:var(--encre);font-weight:var(--w-semi);font-size:14px;
  transition:background var(--d-normal) var(--monte), transform var(--d-normal) var(--monte);
}
.fh-act .ico{color:var(--br-500);background:#fff;border-radius:12px;padding:8px;width:40px;height:40px;box-shadow:var(--ombre-carte)}
.fh-act:hover{background:var(--br-wash);transform:translateY(var(--leve))}
@media (max-width:1100px){ .fh-grille{grid-template-columns:1fr} .fh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){
  .fh-finde{padding:var(--sp-24) var(--sp-16)}
  /* Regle de Sullivan (10/10) : l'essentiel sans defiler. Sur telephone les
     quatre chiffres tiennent en deux lignes basses, la carte du week-end
     arrive dans le premier ecran. */
  .fh-tete{margin:var(--sp-12) 0}
  .fh-tete h1{font-size:26px}
  .fh-tete > div > p:last-child{display:none}
  .fh-kpis{gap:8px}
  body[data-dash] .tb-kpis .tb-kpi{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;padding:10px 12px;border-radius:16px}
  body[data-dash] .tb-kpis .tb-kpi-i{grid-row:span 2;width:34px;height:34px;margin:0;border-radius:11px}
  body[data-dash] .tb-kpis .tb-kpi b{font-size:20px;line-height:1.1}
  body[data-dash] .tb-kpis .tb-kpi-l{font-size:11.5px;line-height:1.25}
  .rd-tuile{padding:12px 14px}
  .rd-tuile-i{width:34px;height:34px;margin-bottom:4px}
}
@media (prefers-reduced-motion:reduce){ .fh-finde-l button,.fh-act{transition:none} .fh-finde-l button:hover,.fh-act:hover{transform:none} }

/* ---------------------------------------------------------------------
   8 ter. PORTAIL MUNICIPAL ET MENTION « OFICIAL »
   ------------------------------------------------------------------ */
.oficial{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;font-weight:var(--w-semi);
  color:var(--mer);background:var(--mer-fond);border-radius:var(--r-pill);padding:3px 10px}
.mu-item{display:grid;gap:8px}
.mu-ev{cursor:default}
.mu-ev:hover{transform:none}
.mu-acc{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.dv-barre > *,.mu-acc > *,.dv-actions > *{width:auto}
.mu-etat-attente_mairie{background:var(--terre-fond);border-color:var(--terre-trait);color:var(--terre)}
.mu-etat-attente{background:var(--mer-fond);border-color:#C6E1EA;color:var(--mer)}
.mu-etat-publiee{background:var(--ok-fond);border-color:var(--ok-trait);color:var(--ok)}
.mu-etat-refusee{color:var(--n-500)}
.mu-puntos{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--encre-2)}
body[data-dash] #v-municipio{min-height:60vh}

/* ---------------------------------------------------------------------
   9. MOUVEMENT
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .dv-sq{animation:none}
  body[data-dash] .tb-kpi,body[data-dash] .ocard,.rd-tuile,.rd-carte,.dv-item,.dv-offre,.hn-vedette,.fh-bloc,.rd-ligne{animation:none!important}
  .tb-l,.tb-kpi{transition:none}
  .tb-l:hover,.tb-kpi:hover{transform:none}
  .dv-item,.btn-primary,.btn-ghost{transition:none}
  .dv-item:hover{transform:none}
}
.dv-fil{scrollbar-width:none}