/* =====================================================================
   dyafa-core.css — Couche de style PARTAGÉE par les 5 apps DYAFA
   ---------------------------------------------------------------------
   Analogue CSS de dyafa-core.js : le vocabulaire de composants vit ICI,
   une seule fois. Chargé AVANT le <style> propre de chaque app (qui ne
   garde que ses spécificités : topbar, onglets, planning, mode service,
   cuisine, styles d'impression…).

   Règle d'or (cf. CADRAGE-CHANTIER-N4.md §8) : un composant se définit ici
   et NULLE PART AILLEURS. Un style recopié dans une app = future régression.

   v1 (2026-08-06) : EXTRACTION FIDÈLE des tokens/composants déjà présents
   dans gestion.html (mêmes valeurs → drop-in sans changement visuel),
   + 2 briques de charte : sélecteur unique (.dy-segment) et positions
   canoniques en modale (.modal-actions / .modal-actions .danger-slot).
   La MODERNISATION du look se fera ensuite ici, composant par composant,
   guidée par les maquettes — elle s'appliquera alors partout d'un coup.

   v3 (2026-08-26) : MODERNISATION de la charte centrale — palette « Arche au
   couchant » (extraite de la photo de référence), titres en Marcellus,
   boutons redessinés (arrondi 12px, ombres douces diffuses, focus visible),
   logomark et favicon accordés. Aucune structure HTML ni interaction touchée :
   seuls les tokens et l'apparence des composants changent, donc le nouveau
   look se propage à tous les écrans qui utilisent ces classes.
   ===================================================================== */

/* ===== Polices vendorées (hors-ligne — §2.1). Sous-ensemble latin (FR). =====
   Une seule famille : Schibsted Grotesk. Titres et texte courant la partagent
   (choix « simple et minimaliste » — les titres se distinguent par la graisse
   et l'interlettrage serré, pas par une seconde police). */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/schibsted-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/schibsted-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/schibsted-grotesk-600.woff2) format('woff2')}

/* =====================================================================
   Design tokens v3 — « Arche au couchant » (2026-08-26)
   Palette dérivée de la photographie de référence : arche rose dans une mer
   calme, ciel lilas, horizon abricot, sable nacré. Rôles explicites ci-dessous.
   Contrastes vérifiés (WCAG 2.1, sur --bg #FBF4F1 sauf mention) :
     --ink #2B2333        13.9:1  AAA   texte courant
     --ink-soft #443A4B    9.9:1  AAA   texte secondaire
     --muted #6D6275       5.3:1  AA    légendes, libellés
     --clay-d #97453A      6.0:1  AA    liens, texte accentué
     --acc #A94E40         5.0:1  AA    éléments actifs, icônes
     #FFF5F2 sur --acc     5.1:1  AA    texte crème des boutons primaires
     --nav-ink sur --nav-bg #5B3A52  9.0:1 AAA  volet de navigation
   --clay #B3574A (4.4:1 sur --bg) sert aux REMPLISSAGES et aux gros titres,
   jamais au texte courant : pour du texte, utiliser --clay-d.
   ===================================================================== */
:root{
  /* — Fonds — */
  --bg:#FBF4F1;            /* sable nacré : fond général */
  --bg-2:#F5EAE5;          /* sable plus profond (bandes, zones alternées) */
  --panel:#FFFCFB;         /* blanc nacré des cartes */
  --panel-2:#FAF0EC;       /* surface secondaire / encarts */

  /* — Texte (créé pour la lisibilité : la photo ne contient aucun foncé) — */
  --ink:#2B2333;           /* encre prune très foncée — contraste élevé */
  --ink-soft:#443A4B;
  --muted:#6D6275;         /* gris prune lisible (AA) */

  /* — Filets — */
  --line:#F0E2DC;          /* filets */
  --line-2:#E3CFC8;        /* bordure marquée */

  /* — Couleur principale : rose de l'arche, assombri pour l'accessibilité — */
  --clay:#B3574A;          /* rose terre — boutons, éléments actifs */
  --clay-d:#97453A;        /* rose terre foncé — survol, liens */
  --clay-soft:#F9E4DE;     /* teinte rose très claire */
  --clay-l:#D9847A;        /* rose clair intermédiaire (dégradés) */

  /* — Accent secondaire : ciel de fin de journée — */
  --teal:#4F6E9B;          /* bleu crépuscule (ex-vert zellige) */
  --teal-d:#3B5578;
  --teal-soft:#E7EDF7;

  /* — Accent chaud : soleil sur l'horizon — */
  --gold:#C98A3E;          /* abricot doré */
  --gold-soft:#FBEEDC;

  /* — Teintes littérales de la photo — DÉCORATIVES (dégradés, halos, aplats
       larges). Trop claires pour porter du texte : jamais en couleur d'encre. — */
  --coral:#E8998F;         /* rose corail de l'arche, en pleine lumière */
  --coral-d:#C4675A;       /* corail dans l'ombre (utilisable en aplat) */
  --lilac:#B7A8D6;         /* lilas des nuages hauts */
  --sky:#A8BEE0;           /* bleu du ciel zénithal */
  --apricot:#F6C9A4;       /* abricot du soleil au ras de l'eau */
  --pearl:#F7EFE8;         /* sable nacré du premier plan */

  --occf:rgba(43,35,51,.45); /* cadre d'un séjour au planning */
  --ok:#2F7D5E;--warn:#96661F;--danger:#B4473B;  /* rouge terracotta accordé à la palette (amber+prune) */
  --okbg:#E5F1EA;--warnbg:#FBEEDC;--dangerbg:#FAE3E1;

  /* — Ombres douces et diffuses (teintées prune, jamais noires) — */
  --shadow:0 1px 2px rgba(80,42,58,.05),0 8px 22px -10px rgba(80,42,58,.22);
  --shadow-md:0 2px 6px rgba(80,42,58,.06),0 18px 40px -18px rgba(80,42,58,.30);
  --shadow-lg:0 30px 70px -30px rgba(60,30,45,.42);

  --radius:16px;--radius-sm:12px;--radius-lg:22px;--radius-xl:20px;--radius-pill:999px;
  --sidebar-w:272px;      /* largeur du volet de navigation (étalon N4) */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-ui:"Schibsted Grotesk",var(--sans);   /* police UI (vendorée) */
  --font-display:var(--font-ui);               /* titres — même police, graisse 600 */
  --focus:#4F6E9B;
  --tap:44px;             /* zone tactile minimale (iPhone) */
}

/* ===== Base ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,.serif{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;}
::selection{background:var(--clay-soft);color:var(--clay-d)}

/* ===== Focus visible (clavier) — jamais d'info par la seule couleur ===== */
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.btn-primary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--clay-d)}

/* ===== Titres de section + utilitaires génériques (NON redéfinis par la v2) =====
   Les composants (boutons, champs, badges, tableaux, cartes, modale, états vides…)
   vivent dans la section « N4 v2 — COMPOSANTS » en fin de fichier. On ne garde ici
   que ce que la v2 ne couvre pas. (Le CSS v1 redondant a été retiré le 2026-08-11.) */
.section-title{display:flex;align-items:center;gap:10px;margin:4px 0 16px;flex-wrap:wrap}
.section-title h2{margin:0;font-size:23px;line-height:1.2}
.row{display:flex;gap:18px;flex-wrap:wrap}
.muted{color:var(--muted)}
input:disabled{background:#F3EAE6;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.field-row{display:flex;gap:14px}.field-row>div{flex:1}
.warn-box{background:var(--dangerbg);color:var(--danger);padding:11px 14px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:600;margin-bottom:13px;border:1px solid #EDCFCE}
/* Overlay de modale (la v2 stylise .modal / .modal-actions) */
.overlay{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;
  /* voile « couchant » : lueur lilas (haut-gauche) + abricot (bas-droite) sur base plum translucide */
  background:
    radial-gradient(1100px 640px at 12% -6%,rgba(122,90,144,.42),rgba(122,90,144,0) 58%),
    radial-gradient(1200px 700px at 92% 106%,rgba(206,120,68,.44),rgba(206,120,68,0) 60%),
    linear-gradient(150deg,rgba(68,50,72,.46),rgba(92,56,60,.42));
  padding:28px 14px;z-index:100;overflow-y:auto;backdrop-filter:blur(3px) saturate(1.06);-webkit-backdrop-filter:blur(3px) saturate(1.06);
  padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom))}
.modal strong{display:inline-block;margin-top:6px}
/* Liste de paiements */
.pay-list{margin:6px 0}
.pay-list .pay{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.pay-list .pay:last-child{border-bottom:none}
/* Barres d'outils, liens, gros pictogramme d'état vide, utilitaires */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
a.link{color:var(--clay-d);cursor:pointer;text-decoration:none;font-weight:600;border-radius:4px}
a.link:hover{text-decoration:underline;text-underline-offset:2px}
.empty .big{font-size:46px;margin-bottom:10px;line-height:1}
.hide{display:none!important}
details summary{cursor:pointer;color:var(--clay-d);font-weight:600;padding:4px 0}
details[open] summary{margin-bottom:6px}
/* Sélecteur d'emoji (partagé gestion/service) */
.emoji-pick{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.emoji-pick button{font-size:22px;padding:7px 10px;border:1.5px solid var(--line-2);border-radius:10px;background:#fff;cursor:pointer;min-height:var(--tap);min-width:var(--tap)}
.emoji-pick button:hover{border-color:var(--clay)}
.emoji-pick button.sel{border-color:var(--clay);background:var(--clay-soft)}
/* Préférences système */
@media(pointer:coarse){ .btn,nav.tabs button{min-height:var(--tap)} }
@media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* =====================================================================
   N4 — COQUILLE D'APPLICATION (étalon « Menu Dyafa », proposition 2a)
   Fidèle à la maquette Claude Design : volet terre cuite PLEIN + texte crème,
   arche décorative en bas, rétractation par une FLÈCHE (jamais un hamburger).
   Le volet court sur toute la hauteur ; la barre du haut commence à sa droite,
   y compris sur mobile (rail toujours visible, l'ouverture est en surimpression).
   Composants PARTAGÉS → préfixe dy- (décision D7).
   Polices de la maquette (Schibsted Grotesk / Instrument Serif = Google Fonts) :
   à VENDORER en local pour rester hors-ligne (§2.1) — repli --sans / --serif
   en attendant (décision à prendre avec le propriétaire).
   ===================================================================== */
:root{
  --nav-bg:#5B3A52;           /* prune crépusculaire du volet */
  --nav-glow:#B2718A;         /* halo rose (dégradé radial) */
  --nav-accent:#F0BE7C;       /* abricot (icône établissement) */
  --nav-arch:#C98098;         /* arche rose */
  --nav-ink:#FFF5F2;          /* texte crème sur le volet */
  --nav-active-bg:#FFF5F2;    /* pastille active */
  --nav-active-ink:#5B3A52;   /* texte de la pastille active */
  --shell-canvas:#FCFAF9;     /* fond de la zone de contenu — blanc à peine cassé */
  --shell-topbar:#FFFCFB;     /* fond de la barre du haut */
  --shell-line:#EDE7E4;       /* filet de la barre du haut */
  --shell-card:#FFFCFB;       /* carte de contenu */
  --shell-card-line:#ECE6E3;
  --rail-w:72px;              /* volet replié (icônes) */
}

.dy-app{display:flex;min-height:100vh;min-height:100dvh;background:var(--shell-canvas);font-family:var(--font-ui)}

/* ---------- Volet ---------- */
.dy-sidebar{position:sticky;top:0;height:100vh;height:100dvh;flex:0 0 var(--sidebar-w);width:var(--sidebar-w);
  display:flex;flex-direction:column;overflow:hidden;border-radius:0 16px 16px 0;color:var(--nav-ink);z-index:2;
  background:var(--nav-bg) radial-gradient(150% 60% at 50% 100%, var(--nav-glow) 0%, var(--nav-bg) 66%);
  box-shadow:6px 0 28px -18px rgba(0,0,0,.6);transition:flex-basis .18s,width .18s;
  padding-top:max(0px,env(safe-area-inset-top));padding-bottom:max(0px,env(safe-area-inset-bottom));padding-left:max(0px,env(safe-area-inset-left))}
.dy-arch{position:absolute;left:0;bottom:0;width:100%;height:160px;z-index:0;pointer-events:none}
.dy-sidebar>*:not(.dy-arch):not(.dy-collapse){position:relative;z-index:1}

/* Flèche de rétractation (bord supérieur du volet) — pas de hamburger */
.dy-collapse{position:absolute;top:6px;inset-inline-end:8px;z-index:3;width:32px;height:32px;display:flex;
  align-items:center;justify-content:center;border:none;background:transparent;color:var(--nav-ink);opacity:.85;
  cursor:pointer;transition:opacity .16s,transform .16s}
.dy-collapse svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));transition:transform .18s}
.dy-collapse:hover{opacity:1;transform:translateX(-2px)}

/* Marque */
.dy-brand{display:flex;align-items:center;gap:12px;padding:12px 16px 12px;height:63px}
/* Logo = logomark de PRODUCTION (SVG inline « n ») : carré terracotta, intérieur crème, n terracotta */
/* Logomark « négatif » (variante 6) : pastille crème, arche pleine en accent */
.dy-logo{width:36px;height:36px;border-radius:12px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:none;padding:0;background:var(--nav-ink);
  box-shadow:0 2px 6px rgba(80,42,58,.22),0 10px 22px -14px rgba(40,20,30,.55),inset 0 -1px 0 rgba(80,42,58,.1)}
.dy-logo svg{width:24px;height:24px;background:transparent;color:var(--clay-d);border-radius:0;padding:2px;box-sizing:content-box}
.dy-logo:hover{filter:none}
.dy-logo:hover{filter:brightness(1.04)}
.dy-brand__text{display:flex;flex-direction:column;min-width:0}
.dy-eyebrow{font-size:9px;letter-spacing:.3em;font-weight:600;color:rgba(255,240,236,.66)}
.dy-brand__name{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--nav-ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sélecteur d'établissement */
.dy-estab{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);height:54px;margin:0 16px 10px;padding:10px 12px;
  border:none;border-radius:12px;background:rgba(0,0,0,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:var(--nav-ink);cursor:pointer;text-align:left;font:inherit}
.dy-estab:hover{background:rgba(0,0,0,.26)}
.dy-estab .ic{width:24px;height:24px;border-radius:8px;background:rgba(255,255,255,.14);display:flex;
  align-items:center;justify-content:center;flex:0 0 auto;color:var(--nav-accent)}
.dy-estab__text{display:flex;flex-direction:column;min-width:0;flex:1}
.dy-estab__label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,240,236,.6)}
.dy-estab__name{font-size:13.5px;font-weight:600;color:var(--nav-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dy-estab .chev{color:rgba(255,240,236,.72);flex:0 0 auto}

/* Recherche */
.dy-search{margin:0 16px 12px;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:10px;
  background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.dy-search .ic{color:rgba(255,240,236,.7);flex:0 0 auto;display:flex}
.dy-search input{all:unset;flex:1;min-width:0;font-size:13px;color:var(--nav-ink)}
.dy-search input::placeholder{color:rgba(255,240,236,.7)}
.dy-kbd{font-size:10px;color:rgba(255,240,236,.62);border:1px solid rgba(255,255,255,.2);border-radius:5px;padding:1px 5px;flex:0 0 auto}

/* Navigation */
.dy-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:0 12px;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;-ms-overflow-style:none}
.dy-nav::-webkit-scrollbar{width:0;height:0;display:none}
.dy-navsection{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,240,236,.45);padding:6px 14px 4px}
.dy-navsection.mt{padding-top:12px}
.dy-navitem{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;border-radius:12px;flex:0 0 auto;
  color:rgba(255,246,238,.8);font:500 14px var(--font-ui);text-decoration:none;cursor:pointer;transition:background .12s,color .12s}
.dy-navitem .ic{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.dy-navitem:hover{background:rgba(0,0,0,.18);color:var(--nav-ink)}
.dy-navitem.active{background:var(--nav-active-bg);color:var(--nav-active-ink);font-weight:600;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}

/* Pied : synchro */
.dy-sync{display:flex;flex-direction:column;gap:8px;padding:10px 16px 14px}
.dy-sync__sep{height:1px;background:rgba(255,255,255,.14)}
.dy-sync__row{display:flex;align-items:center;gap:10px;font-size:11.5px;color:rgba(255,240,236,.62)}
.dy-sync__dot{width:7px;height:7px;border-radius:50%;background:#4E9E72;flex:0 0 auto}

/* ---------- Colonne principale ---------- */
.dy-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--shell-canvas)}
.dy-topbar{height:64px;flex:none;display:flex;align-items:center;gap:14px;padding:0 22px;
  background:var(--shell-topbar);border-bottom:1px solid var(--shell-line);position:sticky;top:0;z-index:1;
  padding-right:max(22px,env(safe-area-inset-right))}

/* ⚠️ LE CONTENU DE PAGE VIT DANS SA PROPRE COUCHE (corrigé le 2026-09-15).
   Sans cette règle, tout ce que dessine une page joue dans le MÊME empilement
   que le shell, et lui passe devant dès qu'il monte plus haut. C'est ce qui
   arrivait au planning : `.roomcol` est en `z-index:3` et les en-têtes de jours
   en `z-index:1`, contre `z-index:1` pour la barre du haut — la colonne des
   chambres passait devant, et les jours aussi (égalité tranchée par l'ordre du
   DOM, où le planning vient après la barre). La barre se faisait recouvrir.

   La tentation est de remonter la barre à 50. Ça marcherait — jusqu'au
   prochain composant qui monterait à 60, et l'on recommencerait. `isolation`
   traite la cause : `#app` devient un contexte d'empilement à part, posé au
   niveau 0. TOUT `z-index` écrit à l'intérieur d'une page, si haut soit-il,
   reste désormais confiné DANS cette couche, donc sous la barre (1) et sous le
   volet (2). Une page ne peut plus recouvrir le shell, jamais.

   ⚠️ Les modales ne sont PAS concernées, et c'est ce qui rend la règle sûre :
   `openModal()` fait `document.body.appendChild(o)` — l'overlay vit hors du
   shell, donc hors de cette couche, et continue de tout recouvrir.
   ⚠️ Ne pas ajouter ici de `transform`, `filter` ni `perspective` : ceux-là
   changeraient le référentiel des enfants en `position:fixed`. `isolation` et
   `z-index`, eux, ne touchent qu'à l'ordre de peinture. */
.dy-main > #app{position:relative;z-index:0;isolation:isolate}
.dy-pagetitle{font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0;color:var(--ink)}
/* Bouton menu (☰) : masqué par défaut, visible seulement en tiroir mobile (≤620px) */
.dy-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 auto;padding:0;
  border:1px solid var(--shell-line);background:var(--shell-topbar);border-radius:11px;color:var(--ink);cursor:pointer}
.dy-burger:active{transform:translateY(1px)}
.dy-topbar__spacer{flex:1}
.dy-userchip{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;border-radius:999px;
  border:1px solid var(--shell-line);background:#fff;cursor:pointer;color:var(--ink)}
.dy-userchip:hover{border-color:#E3CFC8;background:#FFF8F5}
.dy-avatar{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--nav-bg);color:var(--nav-ink);font-size:12px;font-weight:600}
.dy-userchip__text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.dy-userchip__name{font-size:13px;font-weight:600}
.dy-userchip__role{font-size:10.5px;color:#9C93A2}
.dy-userchip .chev{color:#9C93A2;flex:0 0 auto}
.dy-divider{width:1px;height:24px;background:var(--shell-line);flex:0 0 auto}
.dy-iconbtn{position:relative;width:36px;height:36px;border-radius:11px;border:none;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;color:#6D6275;cursor:pointer;text-decoration:none}
.dy-iconbtn:hover{background:#F8EFEB;color:#A94E40}
.dy-iconbtn .dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#B23A3A;box-shadow:0 0 0 2px var(--shell-topbar)}

/* Contenu (grille — squelettes tant que « Accueil » n'est pas dessiné) */
.dy-content{flex:1;padding:24px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:min-content;
  gap:16px;align-content:start;padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px))}
.dy-statcard{height:104px;border-radius:14px;background:var(--shell-card);border:1px solid var(--shell-card-line);
  padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.dy-panel{border-radius:14px;background:var(--shell-card);border:1px solid var(--shell-card-line);min-height:270px}
.dy-panel.wide{grid-column:span 3}
.dy-skel{background:#EDE2DE;border-radius:5px}
.dy-skel.a{width:60%;height:9px}
.dy-skel.b{width:45%;height:22px;border-radius:6px;background:#E5D9D5}

/* ---------- États repliés (bureau .dy-collapsed / rail mobile .dy-rail) ----------
   On RÉTRÉCIT + on masque les libellés SANS toucher aux hauteurs de ligne :
   les icônes gardent la même position verticale ET la même taille dans les 2 états. */
.dy-app.dy-collapsed .dy-sidebar,
.dy-app.dy-rail .dy-sidebar{flex-basis:var(--rail-w);width:var(--rail-w);align-items:center;cursor:pointer;
  background:var(--nav-bg) radial-gradient(220% 48% at 50% 100%, var(--nav-glow) 0%, var(--nav-bg) 62%)}
.dy-app.dy-collapsed .dy-navitem,.dy-app.dy-rail .dy-navitem{cursor:pointer}
.dy-app.dy-collapsed .dy-arch,.dy-app.dy-rail .dy-arch{display:none}
.dy-app.dy-collapsed .dy-collapse,.dy-app.dy-rail .dy-collapse{display:none}   /* pas de flèche — clic logo pour déplier */
/* masquer UNIQUEMENT les libellés (pas la ligne : hauteur inchangée) */
.dy-app.dy-collapsed .dy-brand__text,.dy-app.dy-collapsed .dy-estab__text,.dy-app.dy-collapsed .dy-estab .chev,
.dy-app.dy-collapsed .dy-search input,.dy-app.dy-collapsed .dy-kbd,.dy-app.dy-collapsed .dy-navitem span:not(.ic),
.dy-app.dy-collapsed .dy-sync__row span:not(.dy-sync__dot),.dy-app.dy-collapsed .dy-sync__sep,
.dy-app.dy-rail .dy-brand__text,.dy-app.dy-rail .dy-estab__text,.dy-app.dy-rail .dy-estab .chev,
.dy-app.dy-rail .dy-search input,.dy-app.dy-rail .dy-kbd,.dy-app.dy-rail .dy-navitem span:not(.ic),
.dy-app.dy-rail .dy-sync__row span:not(.dy-sync__dot),.dy-app.dy-rail .dy-sync__sep{display:none}
/* libellés de groupe : hauteur conservée (alignement), texte masqué */
.dy-app.dy-collapsed .dy-navsection,.dy-app.dy-rail .dy-navsection{visibility:hidden}
/* narrow + centrage horizontal, hauteurs inchangées */
.dy-app.dy-collapsed .dy-brand,.dy-app.dy-rail .dy-brand{justify-content:center;padding-inline:0}
.dy-app.dy-collapsed .dy-estab,.dy-app.dy-rail .dy-estab{width:46px;margin-inline:auto;padding-inline:0;justify-content:center}
.dy-app.dy-collapsed .dy-search,.dy-app.dy-rail .dy-search{width:46px;margin-inline:auto;padding-inline:0;justify-content:center}
.dy-app.dy-collapsed .dy-nav,.dy-app.dy-rail .dy-nav{align-items:center}
.dy-app.dy-collapsed .dy-navitem,.dy-app.dy-rail .dy-navitem{width:46px;padding-inline:0;justify-content:center}
.dy-app.dy-collapsed .dy-sync,.dy-app.dy-rail .dy-sync{align-items:center}
.dy-app.dy-collapsed .dy-sync__row,.dy-app.dy-rail .dy-sync__row{justify-content:center}

/* ---------- Réactif (mobile) : rail 56 toujours visible (classe .dy-rail posée par JS) ;
   l'ouverture (.dy-open) affiche le panneau plein en surimpression ---------- */
@media(max-width:820px){
  .dy-content{grid-template-columns:repeat(2,1fr)}
  .dy-panel.wide{grid-column:span 2}
  .dy-app.dy-rail{--rail-w:56px}
  /* ouverture : panneau plein en surimpression (les libellés reviennent via les styles de base) */
  .dy-app.dy-open .dy-sidebar{position:fixed;left:0;top:0;flex-basis:236px;width:236px;box-shadow:0 0 40px rgba(80,42,58,.45)}
  /* barre du haut allégée : avatar seul */
  .dy-userchip{border:none;background:transparent;padding:0}
  .dy-userchip:hover{background:transparent}
  .dy-userchip__text,.dy-userchip .chev,.dy-divider{display:none}
  /* voile */
  .dy-scrim{position:fixed;inset:0;background:rgba(80,42,58,.34);z-index:1;opacity:0;pointer-events:none;transition:opacity .18s}
  .dy-app.dy-open .dy-scrim{opacity:1;pointer-events:auto}
}
@media(max-width:520px){ .dy-content{grid-template-columns:1fr} .dy-panel.wide{grid-column:span 1} }

/* ---------- Téléphone (≤620px) : le volet quitte le flux et devient un tiroir
   hors-écran ; le contenu occupe alors 100% de la largeur. Ouverture par le ☰. ---------- */
@media(max-width:620px){
  .dy-app.dy-rail .dy-sidebar,
  .dy-app .dy-sidebar{
    position:fixed;top:0;left:0;height:100vh;height:100dvh;
    flex-basis:min(84vw,300px);width:min(84vw,300px);
    transform:translateX(-100%);transition:transform .22s ease;
    z-index:60;border-radius:0 18px 18px 0}
  .dy-app.dy-open .dy-sidebar{transform:none;flex-basis:min(84vw,300px);width:min(84vw,300px)}
  .dy-scrim{z-index:55}
  .dy-burger{display:inline-flex}
  .dy-topbar{gap:8px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .dy-pagetitle{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  /* Barre du haut : pastille profil réduite à l'avatar (le texte à styles inline
     débordait et créait une barre de défilement horizontale) ; icône Messages
     (à venir) masquée pour gagner de la place. */
  #profilBtn{padding:3px!important;gap:0!important;border-color:transparent!important;background:transparent!important}
  #profilBtn>span:nth-child(2),#profilBtn>svg{display:none!important}
  .dy-topbar .dy-iconbtn:not([id]){display:none}
  .dy-topbar #profilSlot{flex:0 0 auto;min-width:0}
  /* RTL (app Service en arabe) : le tiroir vient de la droite */
  [dir=rtl] .dy-app.dy-rail .dy-sidebar,
  [dir=rtl] .dy-app .dy-sidebar{left:auto;right:0;transform:translateX(100%);border-radius:18px 0 0 18px}
  [dir=rtl] .dy-app.dy-open .dy-sidebar{transform:none}
}

/* ===== RTL (app Service en arabe) ===== */
[dir=rtl]{text-align:right}
[dir=rtl] .dy-brand,[dir=rtl] .dy-estab,[dir=rtl] .dy-navitem,[dir=rtl] .dy-userchip__text{text-align:right}
[dir=rtl] .dy-collapse:hover{transform:translateX(2px)}
[dir=rtl] .dy-iconbtn .dot{right:auto;left:8px}
[dir=rtl] .dy-sidebar{box-shadow:-6px 0 28px -18px rgba(0,0,0,.6)}
@media(max-width:820px){ [dir=rtl] .dy-app.dy-open .dy-sidebar{left:auto;right:0} }

/* =====================================================================
   N4 v2 — COMPOSANTS (design « Showcase Dyafa », 2026-08-08)
   Redéfinit les composants du catalogue avec le look validé (dégradés,
   ombres douces, coins anguleux). Placé après les défs v1 → il les surcharge.
   Valeurs transcrites fidèlement depuis la maquette Claude Design.
   ===================================================================== */
:root{
  --dy-r:12px;                /* rayon boutons / champs — arrondi modéré */
  --dy-r-sm:9px;              /* rayon compact (roomtag, petits boutons) */
  --dy-r-card:16px;           /* rayon des cartes */
  --line-soft:#EFE1DB;        /* bordure douce */
  --ink-strong:#2B2333;--ink-2:#443A4B;--ink-3:#574C5E;--muted-a:#6D6275;--muted-b:#877C8E;--muted-c:#9C93A2;
  --acc:#A94E40;              /* rose terre accent (focus, actif, liens) */
  --acc-2:#C98A3E;            /* abricot doré (mises en avant) */
  --acc-ink:#FFF5F2;          /* crème posée sur --acc (4.9:1) */
  /* Boutons : dégradé très court + ombre douce diffuse (aucun liseré dur) */
  --btn-grad:linear-gradient(180deg,#BC6151 0%,#A94E40 100%);
  --btn-grad-h:linear-gradient(180deg,#B0523F 0%,#94402F 100%);
  --btn-shadow:0 1px 2px rgba(80,42,58,.10),0 10px 24px -12px rgba(169,78,64,.55);
  --btn-shadow-h:0 2px 5px rgba(80,42,58,.12),0 18px 34px -14px rgba(169,78,64,.62);
  --btn-ring:0 0 0 4px rgba(169,78,64,.22);   /* anneau de focus */
  --card-shadow:0 1px 2px rgba(80,42,58,.04),0 22px 48px -34px rgba(80,42,58,.55);
}

/* ---- Boutons (5 rôles) — arrondi modéré, ombre douce, états visibles ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--dy-r);
  border:1px solid var(--line-soft);background:#FFFCFB;color:var(--ink-2);
  font:500 14.5px/1 var(--font-ui);white-space:nowrap;cursor:pointer;min-height:0;
  box-shadow:0 1px 2px rgba(80,42,58,.06),0 8px 18px -14px rgba(80,42,58,.45);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease}
.btn:hover{border-color:var(--line-2);background:#FFF8F5;color:var(--ink-strong);
  box-shadow:0 2px 4px rgba(80,42,58,.07),0 14px 26px -16px rgba(80,42,58,.5);transform:translateY(-1px)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(80,42,58,.08)}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;box-shadow:var(--btn-ring)}
.btn:disabled{border-color:#F1E6E2;background:#F3EAE6;color:#A79CA8;box-shadow:none;cursor:not-allowed;transform:none}

.btn-primary{border:1px solid transparent;background:var(--btn-grad);color:var(--acc-ink);font-weight:600;box-shadow:var(--btn-shadow)}
.btn-primary:hover{background:var(--btn-grad-h);color:var(--acc-ink);border-color:transparent;box-shadow:var(--btn-shadow-h);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(80,42,58,.2)}
.btn-primary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;box-shadow:var(--btn-shadow),var(--btn-ring)}

.btn-secondary{border:1px solid rgba(169,78,64,.34);background:var(--clay-soft);color:var(--clay-d);font-weight:600;
  box-shadow:0 1px 2px rgba(80,42,58,.05),0 10px 22px -16px rgba(169,78,64,.5)}
.btn-secondary:hover{border-color:rgba(169,78,64,.5);background:#F6DAD3;color:var(--clay-d);
  box-shadow:0 2px 5px rgba(80,42,58,.07),0 16px 28px -16px rgba(169,78,64,.55);transform:translateY(-1px)}

.btn-ghost{border:1px solid transparent;background:transparent;color:var(--acc);box-shadow:none}
.btn-ghost:hover{background:rgba(169,78,64,.09);color:var(--clay-d);box-shadow:none;transform:none}
.btn-ghost:focus-visible{outline:2px solid var(--acc);outline-offset:2px;box-shadow:none}

.btn-danger{border:1px solid rgba(178,58,58,.26);background:#FBECEB;color:#9B2F2F;font-weight:600;
  box-shadow:0 1px 2px rgba(80,42,58,.05),0 10px 22px -16px rgba(178,58,58,.5)}
.btn-danger:hover{background:linear-gradient(180deg,#C24949,#B23A3A);color:#FFF5F2;border-color:transparent;transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(80,42,58,.12),0 16px 30px -14px rgba(178,58,58,.6)}
.btn-danger:focus-visible{outline:2px solid #B23A3A;outline-offset:2px;box-shadow:0 0 0 4px rgba(178,58,58,.2)}

.btn-sm{height:34px;padding:0 14px;font-size:13px;border-radius:var(--dy-r-sm)}

/* ---- Onglets soulignés (navigation de section) ---- */
.dy-tabs{display:flex;gap:6px;align-items:flex-end;border-bottom:1px solid #EDDFD9}
.dy-tabs button{position:relative;height:38px;padding:0 12px;border:none;background:transparent;color:var(--muted-b);
  font:500 14px/1 var(--font-ui);white-space:nowrap;cursor:pointer;transition:color .16s}
.dy-tabs button:hover{color:var(--ink-strong)}
.dy-tabs button[aria-selected="true"]{color:var(--ink-strong);font-weight:600}
.dy-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--acc)}

/* ---- Chips segmentés (filtres, langue) ---- */
.dy-chips{display:inline-flex;gap:4px;align-items:center;padding:4px;border-radius:999px;background:#F2E6E1;
  box-shadow:inset 0 2px 3px rgba(80,42,58,.14),inset 0 0 0 1px rgba(80,42,58,.06),0 1px 0 rgba(255,255,255,.9)}
.dy-chips button{height:30px;padding:0 15px;border:none;border-radius:999px;background:transparent;color:var(--muted-a);
  font:500 13px/1 var(--font-ui);white-space:nowrap;cursor:pointer;transition:background .16s,color .16s}
.dy-chips button:hover:not(.sel):not([aria-selected="true"]){background:rgba(255,255,255,.6);color:var(--ink-2)}
.dy-chips button.sel,.dy-chips button[aria-selected="true"]{background:var(--btn-grad);color:#FFF5F2;font-weight:600;box-shadow:var(--btn-shadow)}

/* ---- Recherche (ancrée dans une page + palette flottante ⌘K) ---- */
.dy-searchbar{position:relative;display:flex;align-items:center}
.dy-searchbar svg{position:absolute;inset-inline-start:14px;pointer-events:none}
.dy-searchbar input{width:100%;box-sizing:border-box;height:46px;padding:0 14px 0 41px;border:1px solid var(--line-soft);
  border-radius:var(--dy-r);background:#fff;box-shadow:inset 0 1px 2px rgba(80,42,58,.055);font:16px var(--font-ui);color:var(--ink-strong);
  transition:box-shadow .16s,border-color .16s}
[dir=rtl] .dy-searchbar input{padding:0 41px 0 14px}
.dy-searchbar input:hover{border-color:#E3CFC8}
.dy-searchbar input:focus{outline:none;border-color:var(--acc);box-shadow:inset 0 1px 2px rgba(80,42,58,.03),0 0 0 3px rgba(169,78,64,.16)}
.dy-palette{display:flex;align-items:center;gap:10px;height:52px;padding:0 8px 0 18px;border:1px solid rgba(80,42,58,.06);
  border-radius:999px;background:#fff;box-shadow:0 2px 4px rgba(80,42,58,.06),0 18px 34px -18px rgba(80,42,58,.45)}
.dy-palette .ph{flex:1;font-size:16px;color:#A297A6}
.dy-kbd2{font-size:11px;font-weight:600;color:var(--muted-b);border:1px solid var(--line-soft);border-radius:6px;padding:2px 7px}
.dy-palette .go{width:36px;height:36px;flex:none;border-radius:999px;background:#F8EFEB;display:flex;align-items:center;justify-content:center}

/* ---- Alertes (icône + texte, jamais la couleur seule) ---- */
.dy-alert{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--dy-r);font-size:14.5px}
.dy-alert svg{flex:none}.dy-alert__msg{flex:1}
.dy-alert--warn{border:1px solid var(--line-soft);background:linear-gradient(180deg,#FFFFFF,#FDF6F3);color:var(--ink-2);box-shadow:0 1px 2px rgba(80,42,58,.06),0 10px 22px -16px rgba(80,42,58,.5)}
.dy-alert--danger{border:1px solid rgba(178,58,58,.22);background:linear-gradient(180deg,#FBEBE9,#F8E0DE);color:#7D2A2A;box-shadow:0 1px 2px rgba(178,58,58,.08),0 10px 22px -16px rgba(178,58,58,.55)}
.dy-alert--info{border:1px solid var(--line-soft);background:#F8EFEB;color:var(--ink-3);box-shadow:inset 0 1px 2px rgba(80,42,58,.05)}
.dy-alert--ok{border:1px solid rgba(78,158,114,.28);background:rgba(78,158,114,.12);color:#27543E}

/* ---- Champs de formulaire ---- */
.field{margin:0}
.field label,label.field{display:flex;flex-direction:column;gap:6px}
.field label>span:first-child,.dy-lbl{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--muted-a);text-transform:none}
input,select,textarea{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border:1px solid var(--line-soft);border-radius:var(--dy-r);
  background:#fff;box-shadow:inset 0 1px 2px rgba(80,42,58,.055);font:16px var(--font-ui);color:var(--ink-strong);min-height:0;
  transition:box-shadow .16s,border-color .16s}
input:hover,select:hover,textarea:hover{border-color:#E3CFC8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:inset 0 1px 2px rgba(80,42,58,.03),0 0 0 3px rgba(169,78,64,.16)}
textarea{height:auto;min-height:84px;padding:12px 14px;line-height:1.5;resize:vertical}
.inline-check{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);font-weight:400;cursor:pointer;text-transform:none;letter-spacing:0}
.inline-check input{width:18px;height:18px;min-height:0;flex:none;accent-color:var(--acc)}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236D6275' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-inline-end:36px}
[dir=rtl] select{background-position:left 14px center;padding-inline-start:36px;padding-inline-end:14px}

/* ---- Badges & étiquettes ---- */
.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--dy-r);white-space:nowrap;font:600 12.5px/1 var(--font-ui)}
.b-ok{color:#2E6B4F;background:rgba(78,158,114,.16);box-shadow:inset 0 0 0 1px rgba(78,158,114,.3)}
.b-danger{color:#B23A3A;background:rgba(178,58,58,.1);box-shadow:inset 0 0 0 1px rgba(178,58,58,.26)}
.b-warn{color:#8A5F1C;background:rgba(240,190,124,.28);box-shadow:inset 0 0 0 1px rgba(198,143,58,.36)}
.b-grey{color:var(--muted-a);background:#F1E6E2;box-shadow:inset 0 0 0 1px #E4D6D0}
.b-gift{color:var(--acc);background:rgba(169,78,64,.12);box-shadow:inset 0 0 0 1px rgba(169,78,64,.26)}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:var(--dy-r);margin:0;
  font-size:13px;color:var(--ink-2);background:linear-gradient(180deg,#FFFFFF,#FDF6F3);border:1px solid var(--line-soft);box-shadow:0 1px 2px rgba(80,42,58,.06)}
.roomtag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:var(--dy-r-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;letter-spacing:.08em;color:#FFF5F2;background:var(--acc);text-align:left}

/* ---- Tableau (en-têtes triables) ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
thead tr{background:#FAF1ED}
th{padding:0;border-bottom:1px solid #F0E4DF;text-transform:none;letter-spacing:0;color:inherit}
th .th-sort{width:100%;display:flex;align-items:center;gap:7px;height:44px;padding:0 16px;border:none;background:transparent;
  font:600 11.5px/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-a);white-space:nowrap;cursor:pointer;transition:background .16s,color .16s}
th .th-sort.end{justify-content:flex-end}
th .th-sort:hover{background:rgba(80,42,58,.05);color:var(--ink-2)}
td{padding:14px 16px;border-bottom:1px solid #F4E9E4;vertical-align:middle}
tbody tr:hover{background:#FDF6F3}
tr:last-child td{border-bottom:1px solid #F4E9E4}
.num{text-align:end;font-variant-numeric:tabular-nums;font-weight:600}
td.ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--muted-a)}

/* ---- Cartes ---- */
.card{background:#FFFCFB;border:1px solid #F0E4DF;border-radius:var(--dy-r-card);padding:20px;box-shadow:var(--card-shadow)}

/* ---- Récapitulatif de prix ---- */
.computed{background:#FFFCFB;border:1px solid #F0E4DF;border-radius:var(--dy-r-card);padding:6px 18px 14px;margin:0;box-shadow:var(--card-shadow);font-size:14.5px}
.computed .line{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #F4E9E4}
.computed .line>span{color:var(--ink-3)}
.computed .line strong{font-variant-numeric:tabular-nums;font-weight:600}
.computed .muted-line{color:var(--muted-b)}.computed .muted-line strong{font-weight:500}
.computed .total{border-bottom:none;align-items:baseline;padding:16px 0 8px}
.computed .total>span{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-a)}
.computed .total strong{font-family:var(--font-display);font-size:25px;font-weight:600;letter-spacing:-.02em;color:var(--acc)}

/* ---- Overlay & modale ---- */
.modal{background:#FFFCFB;border:1px solid #F0E4DF;border-radius:var(--dy-r-card);padding:22px;box-shadow:0 34px 70px -40px rgba(80,42,58,.75)}
.modal h2{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--ink-strong);margin:0 0 4px}
.modal-actions{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:18px;border-top:1px solid #F4E9E4;flex-wrap:wrap}
.modal-actions .danger-slot{margin-inline-end:auto}

/* ---- État vide ---- */
.empty{background:#FFFCFB;border:1px solid #F0E4DF;border-radius:var(--dy-r-card);padding:52px 24px;display:flex;flex-direction:column;
  align-items:center;gap:10px;text-align:center;box-shadow:var(--card-shadow)}
.empty h2{font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:-.015em;color:var(--ink-strong);margin:4px 0 0}
.empty p{margin:0;font-size:14.5px;color:var(--muted-a)}

/* ---- En-tête de section du catalogue ---- */
.dy-sec{display:flex;flex-direction:column;gap:14px}
.dy-sec__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid #EDDFD9}
.dy-sec__mark{width:6px;height:18px;border-radius:0 0 999px 999px;background:var(--acc);flex:none}
.dy-sec__head h2{margin:0;font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.dy-sec__tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#2E6B4F;background:rgba(78,158,114,.16);border-radius:6px;padding:3px 9px}
.dy-sec__note{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted-a);max-width:760px}
.dy-sublabel{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-c)}

/* ---- Bouton scindé (split button) : action par défaut + menu d'alternatives ---- */
.dy-split{position:relative;display:inline-flex;vertical-align:middle}
.dy-split>button{height:42px;border:none;font:600 14px/1 var(--font-ui);color:#FFF5F2;background:var(--btn-grad);
  cursor:pointer;box-shadow:var(--btn-shadow);transition:background .18s,box-shadow .18s,transform .18s}
.dy-split__main{padding:0 18px;border-radius:var(--dy-r) 0 0 var(--dy-r);white-space:nowrap}
.dy-split__toggle{width:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 var(--dy-r) var(--dy-r) 0;
  box-shadow:var(--btn-shadow),inset 1px 0 0 rgba(255,255,255,.3)}   /* liseré séparateur */
.dy-split:hover>button{background:var(--btn-grad-h)}
.dy-split>button:active{transform:translateY(1px)}
.dy-split__toggle svg{transition:transform .18s}
.dy-split.open .dy-split__toggle svg{transform:rotate(180deg)}
/* variante neutre */
.dy-split--neutral>button{background:linear-gradient(180deg,#FFFFFF,#FDF6F3);color:var(--ink-2);border:1px solid var(--line-soft);
  box-shadow:inset 0 1px 0 #FFFFFF,0 1px 2px rgba(80,42,58,.07),0 6px 14px -10px rgba(80,42,58,.45)}
.dy-split--neutral .dy-split__main{border-right:none}
.dy-split--neutral .dy-split__toggle{border-left:1px solid var(--line-soft)}
.dy-split--neutral:hover>button{background:linear-gradient(180deg,#FFFFFF,#FDF6F3);border-color:#E3CFC8;color:var(--ink-2)}
/* menu déroulant */
.dy-split__menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:220px;z-index:50;display:none;flex-direction:column;gap:2px;
  background:#FFFCFB;border:1px solid #F0E4DF;border-radius:var(--dy-r-card);padding:6px;
  box-shadow:0 18px 40px -20px rgba(80,42,58,.55),0 2px 6px rgba(80,42,58,.08)}
[dir=rtl] .dy-split__menu{inset-inline-start:auto;inset-inline-end:0}
.dy-split.open .dy-split__menu{display:flex}
.dy-split__menu button{display:flex;align-items:center;gap:10px;width:100%;height:38px;padding:0 12px;border:none;border-radius:var(--dy-r-sm);
  background:transparent;color:var(--ink-2);font:500 14px/1 var(--font-ui);text-align:start;white-space:nowrap;cursor:pointer;transition:background .14s}
.dy-split__menu button svg{flex:none;color:var(--muted-a)}
.dy-split__menu button:hover{background:#F8EFEB}
.dy-split__menu button.danger{color:#B23A3A}
.dy-split__menu button.danger svg{color:#B23A3A}
.dy-split__menu button.danger:hover{background:rgba(178,58,58,.08)}
.dy-split__menu .sep{height:1px;background:#F4E9E4;margin:4px 6px}

/* ---- En-têtes de tableau triables (moteur makeTablesSortable de dyafa-core.js) ---- */
th.dy-th-sort{cursor:pointer;user-select:none;-webkit-user-select:none;white-space:nowrap;transition:background .14s,color .14s}
th.dy-th-sort:hover{background:rgba(80,42,58,.05);color:var(--ink-2)}
th.dy-th-sort::after{content:"↕";margin-inline-start:6px;opacity:.35;font-weight:400}
th.dy-th-sort[data-sort="asc"]::after{content:"↑";opacity:1;color:var(--acc)}
th.dy-th-sort[data-sort="desc"]::after{content:"↓";opacity:1;color:var(--acc)}


/* =====================================================================
   N4 v4 — RÉGLAGES VALIDÉS (2026-08-27, régénéré)
   Traduction en CSS statique des tweaks retenus sur la maquette « Séjours » :
   accent abricot, boutons pleins 43px/8px, bordures presque effacées,
   surfaces en verre 82 %, fond « Couchant », volet lilas nuit.
   Bloc placé en DERNIER : il surcharge les défs v1/v2/v3 sans les modifier —
   le supprimer suffit pour revenir à la charte v3 nue.

   RÈGLE DE CONTRASTE de cet accent : l'abricot #C98A3E est CLAIR.
   En aplat il porte du texte FONCÉ (#2B2333 → 5,2:1). Le texte couleur
   (liens, icônes, chiffres) utilise l'ambre profond --acc #8A5F1C (5,2:1).
   ===================================================================== */
:root{
  /* — Accent : abricot du soleil — */
  --fill:#C98A3E;            /* aplats (boutons, étiquettes, pastilles) — or d'origine */
  --fill-h:#BC7C2F;          /* aplat au survol */
  --fill-ink:#FFF6F3;        /* texte posé sur l'aplat — BLANC (calé sur la maquette) ⚠ contraste ~2,9:1 */
  --acc:#8A5F1C;             /* texte, icônes, liens — 5,2:1 sur le fond */
  --clay:#C98A3E;
  --clay-d:#8A5F1C;
  --clay-soft:#FBEEDC;
  --acc-ink:#2B2333;

  /* — Volet : lilas nuit, halo lilas montant du bord bas — */
  --nav-bg:#4A4470;
  --nav-glow:#B7A8D6;
  --nav-arch:#B7A8D6;
  --nav-accent:#F0BE7C;
  --nav-active-ink:#4A4470;

  /* — Formes — */
  --dy-r:8px;
  --dy-r-sm:6px;
  --dy-r-card:28px;
  --radius:28px;
  --radius-sm:8px;

  /* — Bordures presque effacées : l'ombre et le fond font la séparation — */
  --line:rgba(107,74,88,.09);
  --line-2:rgba(107,74,88,.15);
  --line-soft:rgba(107,74,88,.09);
  --shell-line:rgba(107,74,88,.09);
  --shell-card-line:rgba(107,74,88,.09);

  /* — Ombres douces : diffusion 0,9× / opacité 0,85× — */
  --shadow:0 6px 22px -9px rgba(80,42,58,.15),0 18px 48px -20px rgba(80,42,58,.10);
  --shadow-md:0 9px 28px -11px rgba(80,42,58,.18),0 28px 66px -28px rgba(80,42,58,.12);
  --card-shadow:0 12px 41px -17px rgba(80,42,58,.13),0 36px 86px -36px rgba(80,42,58,.09);
  --btn-shadow:0 8px 22px -9px rgba(122,83,22,.34),0 22px 50px -22px rgba(122,83,22,.20);
  --btn-shadow-h:0 12px 32px -12px rgba(122,83,22,.38),0 32px 68px -30px rgba(122,83,22,.22);

  /* — Surfaces en verre — */
  --surface:rgba(255,252,251,.82);
  --surface-blur:blur(16px) saturate(1.1);
}
::selection{background:#FBEEDC;color:#7A5316}

/* Fond de contenu : dégradé « Couchant » (lilas en haut à gauche, abricot en
   bas à droite), fixe — il ne défile pas. */
.dy-app,.dy-main{
  background:
    radial-gradient(900px 460px at 8% -10%,#F0EAF7 0%,rgba(240,234,247,0) 60%),
    radial-gradient(1000px 520px at 96% 108%,#FCE6D2 0%,rgba(252,230,210,0) 62%),
    linear-gradient(180deg,#FDFAF9 0%,#FBF3EE 100%);
  background-attachment:fixed;
}
.dy-topbar{background:rgba(255,252,251,.9);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1)}

/* Filigrane du volet : logomark centré au-dessus de la barre de synchro */
.dy-arch{width:196px;height:auto;left:50%;bottom:62px;transform:translateX(-50%);opacity:.34;overflow:visible}
.dy-sync{padding-bottom:16px}

/* Logomark : tuile dégradé ambre, arche pleine crème (unifié favicon/connexion) */
.dy-logo{background:linear-gradient(150deg,#D9A45C,#C98A3E 52%,#8A5F1C);box-shadow:0 2px 6px rgba(80,42,58,.2),0 10px 24px -14px rgba(40,20,30,.5)}
.dy-logo svg{color:#FFF5F2}

/* Surfaces en verre */
.card,.computed,.modal,.empty,.dy-panel,.dy-statcard{
  background:var(--surface);backdrop-filter:var(--surface-blur);-webkit-backdrop-filter:var(--surface-blur);
  border:1px solid transparent;box-shadow:var(--card-shadow)}
/* La fenêtre modale reste plus OPAQUE que les cartes (lisibilité sur le scrim couchant),
   tout en gardant un léger effet verre. */
.modal{background:rgba(255,252,251,.96);backdrop-filter:blur(20px) saturate(1.15);-webkit-backdrop-filter:blur(20px) saturate(1.15)}

/* ---- Boutons : aplat abricot, texte foncé, 43px de haut, rayon 8 ---- */
.btn{height:43px;border-radius:8px;background:var(--surface);color:var(--ink);
  backdrop-filter:var(--surface-blur);-webkit-backdrop-filter:var(--surface-blur);
  border:1px solid transparent;
  box-shadow:0 6px 20px -9px rgba(80,42,58,.14),0 16px 44px -20px rgba(80,42,58,.10)}
.btn:hover{background:rgba(255,255,255,.92);border-color:transparent;color:var(--ink);
  box-shadow:0 9px 27px -11px rgba(80,42,58,.18),0 24px 56px -24px rgba(80,42,58,.12)}
.btn:focus-visible{outline:2px solid var(--acc);outline-offset:2px;box-shadow:0 0 0 4px rgba(201,138,62,.28)}
.btn-sm{height:34px;border-radius:6px}

.btn-primary{background:var(--fill);color:var(--fill-ink);border:1px solid transparent;font-weight:600;box-shadow:var(--btn-shadow)}
.btn-primary:hover{background:var(--fill-h);color:var(--fill-ink);border-color:transparent;box-shadow:var(--btn-shadow-h)}
.btn-primary:focus-visible{outline:2px solid #7A5316;outline-offset:3px;box-shadow:var(--btn-shadow),0 0 0 4px rgba(201,138,62,.3)}

.btn-secondary{background:rgba(201,138,62,.16);color:#7A5316;border:1px solid rgba(201,138,62,.3);
  box-shadow:0 6px 20px -10px rgba(122,83,22,.24)}
.btn-secondary:hover{background:rgba(201,138,62,.26);color:#6B4712;border-color:rgba(201,138,62,.44)}

.btn-ghost{color:var(--acc);border-color:transparent;background:transparent;box-shadow:none}
.btn-ghost:hover{background:rgba(201,138,62,.14);color:#7A5316}

.dy-split>button{height:43px;background:var(--fill);color:var(--fill-ink);box-shadow:var(--btn-shadow)}
.dy-split__main{border-radius:8px 0 0 8px;border-inline-end:1px solid rgba(43,35,51,.16)}
.dy-split__toggle{border-radius:0 8px 8px 0;box-shadow:var(--btn-shadow)}
.dy-split:hover>button{background:var(--fill-h)}

/* ---- Aplats de l'accent : toujours du texte foncé ---- */
.roomtag{background:var(--fill);color:var(--fill-ink)}
.dy-chips button.sel,.dy-chips button[aria-selected="true"]{background:var(--fill);color:var(--fill-ink);box-shadow:0 6px 16px -8px rgba(122,83,22,.4)}
.dy-sec__mark{background:var(--fill)}
.dy-tabs button[aria-selected="true"]::after{background:var(--fill)}
.b-gift{color:#7A5316;background:rgba(201,138,62,.18);box-shadow:inset 0 0 0 1px rgba(201,138,62,.34)}
nav.tabs button.active{background:var(--fill);color:var(--fill-ink)}

/* ---- Champs (zone de contenu — le volet garde ses champs sur mesure) ---- */
.dy-main input,.dy-main select,.dy-main textarea{background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:8px}
.dy-main input:focus,.dy-main select:focus,.dy-main textarea:focus{border-color:rgba(201,138,62,.6);box-shadow:0 0 0 4px rgba(201,138,62,.2)}
.dy-main .dy-searchbar input{box-shadow:0 8px 26px -11px rgba(80,42,58,.18),0 20px 56px -24px rgba(80,42,58,.12),inset 0 1px 2px rgba(80,42,58,.05)}
.dy-main .dy-searchbar input:hover{box-shadow:0 11px 33px -13px rgba(80,42,58,.22),0 26px 66px -28px rgba(80,42,58,.14)}
.inline-check input{accent-color:#B87F30}

/* ---- Tableau : lignes aérées, filets presque absents ---- */
td{padding:19px 20px;border-bottom:1px solid rgba(107,74,88,.07)}
thead tr{background:rgba(201,138,62,.08)}
tbody tr:hover{background:rgba(201,138,62,.07)}
th .th-sort:hover{color:#7A5316}
th.dy-th-sort[data-sort="asc"]::after,th.dy-th-sort[data-sort="desc"]::after{color:var(--acc)}

/* ---- Divers hérités des écrans existants ---- */
a.link,details summary{color:var(--acc)}
.computed .total strong{color:#7A5316}
.dy-iconbtn:hover{background:rgba(201,138,62,.14);color:#7A5316}
.emoji-pick button.sel{border-color:#C98A3E;background:rgba(201,138,62,.16)}