/* M.A Event V2 — jeu de tokens minimal, inspiré de legacy-v1/design-system.css
   (copie volontaire et independante : legacy-v1/ reste intact et jamais
   importe directement par la V2). Palette uniquement, pas de composants. */

:root {
  /* Signature doree M.A -- source exacte : legacy-v1/design-system.css
     lignes 6-23 (":root", "Signature doree M.A -- metal chaud, jamais
     jaune plat"). Reproduit ici a l'identique, jamais approxime. */
  --ma-gold-deep: #6f4b16;
  --ma-gold-dark: #8b6424;
  --ma-gold-mid: #b88a3c;
  --ma-gold-light: #e2c276;
  --ma-gold-highlight: #f4df9d;
  --ma-gold-gradient: linear-gradient(
    135deg,
    var(--ma-gold-deep) 0%,
    var(--ma-gold-mid) 25%,
    var(--ma-gold-highlight) 50%,
    var(--ma-gold-light) 68%,
    var(--ma-gold-dark) 100%
  );
  --ma-gold-gradient-soft: linear-gradient(
    135deg,
    rgba(111, 75, 22, 0.72) 0%,
    rgba(184, 138, 60, 0.78) 33%,
    rgba(226, 194, 118, 0.88) 58%,
    rgba(139, 100, 36, 0.74) 100%
  );
  /* Texte sur fond dore -- source : design-system.css ligne 196
     (".big-btn.primary { color: #100d08 !important; }"). */
  --ma-text-on-gold: #100d08;

  --ma-bg: #0b0b0c;
  --ma-surface: #171719;
  --ma-text: #f6f2e9;
  --ma-text-soft: #d2cdc3;
  --ma-muted: #8f8b84;
  --ma-line: rgba(226, 194, 118, 0.18);
  --ma-radius-md: 14px;
  --ma-radius-pill: 999px;

  /* Groupe strategique "Design System global" (audit reel, section I) :
     echelle d'espacement -- PUREMENT DECLARATIVE, aucune regle existante
     n'est reecrite pour les consommer (chantier de migration distinct,
     cartographie en fin de mission). Valeurs choisies en observant les
     increments deja utilises de facon largement coherente dans tout le
     fichier (paddings/gaps/margins releves : 4/6/8/10/12/14/16/20/24/32px)
     -- ne cree pas une deuxieme echelle concurrente, documente celle
     deja en usage pour que toute NOUVELLE regle future s'y reference
     directement plutot que de choisir un nouveau nombre au hasard. */
  --ma-space-1: 4px;
  --ma-space-2: 8px;
  --ma-space-3: 12px;
  --ma-space-4: 16px;
  --ma-space-5: 20px;
  --ma-space-6: 24px;
  --ma-space-7: 32px;

  /* Tailles interactives -- deja la norme de facto (44px, cf.
     .ma-btn-compact/.ma-button--sm/.ma-qty-stepper__btn/.ma-filter-tab/
     etc.), documentee ici comme reference explicite. */
  --ma-tap-min: 44px;

  /* MISSION MAITRE FINALE ABSOLUE (section 9) : couleurs SEMANTIQUES,
     discretes/desaturees -- representent un ETAT (valide/info/vigilance/
     erreur), jamais un metier/service attribue en dur. Usage : petit
     badge/point/icone/fine bordure/texte/fond tres pale -- jamais un
     gros panneau plein. Le noir/blanc/dore M.A reste l'identite de
     base ; ces teintes n'apparaissent que ponctuellement, comme accent
     d'etat. */
  --ma-success: #6f9c7d;
  --ma-success-bg: rgba(111, 156, 125, 0.14);
  --ma-info: #7c93b3;
  --ma-info-bg: rgba(124, 147, 179, 0.14);
  --ma-warning: #c9a35b;
  --ma-warning-bg: rgba(201, 163, 91, 0.14);
  --ma-danger: #a5525a;
  --ma-danger-bg: rgba(165, 82, 90, 0.16);
  --ma-neutral: #8f8b84;
  --ma-neutral-bg: rgba(143, 139, 132, 0.14);
}

/* MISSION DE STABILISATION CIBLEE (section 28) : BUG REEL trouve en
   validation mobile (375/390/430px) -- un tableau large (ex. apercu
   d'import avec Email/Téléphone) a l'interieur de .ma-table-scroll
   (overflow-x:auto) restait correctement contenu VISUELLEMENT dans son
   propre conteneur (son propre clientWidth/offsetWidth respectait le
   viewport), mais document.documentElement.scrollWidth depassait le
   viewport (ex. 465px sur 375px) -- la zone de defilement intrinseque
   du tableau "fuyait" jusqu'a html/body (quirk connu des moteurs de
   rendu). Verifie avec un vrai geste tactile (touchstart/touchmove/
   touchend via CDP, pas scrollTo() -- Chromium permet parfois de
   deplacer programmatiquement un element overflow:hidden/clip via JS
   meme quand un geste utilisateur reel en est empeche, un autre quirk
   documente) : SANS ce correctif, un swipe horizontal reel sur le
   tableau deplacait bien la PAGE entiere sur certains viewports selon
   le point de contact, jamais voulu (seul le tableau doit scroller).
   overflow-x:hidden ne suffit pas seul (verifie : un scrollTo()
   programmatique restait possible) -- overflow-x:clip (garanti par la
   specification comme desactivant tout defilement, y compris
   programmatique) sur html ET body bloque reellement le defilement
   racine, sans affecter le defilement interne independant de
   .ma-table-scroll (deja fonctionnel, verifie inchange par geste
   tactile reel positionne directement sur le tableau). */
html {
  overflow-x: clip;
  max-width: 100vw;
}

body {
  background: var(--ma-bg);
  color: var(--ma-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  overflow-x: clip;
  max-width: 100vw;
  /* MISSION MAITRE FINALE ABSOLUE (section 6) : 100vh sur mobile Safari
     mesure la hauteur AVEC la barre d'adresse repliee -- une fois celle-ci
     affichee (etat initial), le contenu centre par flex se retrouve
     visuellement pousse vers le haut avec un vide sous la carte (bug reel
     signale : Connexion/Mes evenements "trop hautes, grand vide en bas").
     100dvh (hauteur de viewport DYNAMIQUE) suit l'etat reel de la barre --
     repli 100vh conserve pour les navigateurs qui ne le supportent pas. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
  box-sizing: border-box;
}

.ma-card {
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius-md);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  /* Element flex (enfant de body) : sans ceci, son min-width automatique
     reste egal au min-content de son contenu (ex. un tableau large sur
     mobile), ce qui peut forcer la carte -- et donc la page -- a deborder
     horizontalement meme si .ma-table-scroll (overflow-x:auto) existe
     deja pour absorber ce debordement en interne. Meme motif deja
     applique ailleurs dans ce fichier (.ma-contact-body). */
  min-width: 0;
}

.ma-title {
  /* Texte en degrade -- source : design-system.css ".title, .gate-wrap h1" */
  background: var(--ma-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 20px rgba(184, 138, 60, 0.08);
  font-size: 20px;
  margin: 0 0 20px;
  text-align: center;
  /* MISSION UX/UI GLOBAL V2 (section 56) : nom d'evenement/organisation
     tres long -- ne doit jamais deborder ni forcer un scroll horizontal
     sur mobile (le titre interpole ${eventTitle} sans limite de longueur
     cote donnees). */
  overflow-wrap: anywhere;
}

/* MISSION DE STABILISATION UI (section 3) : bug reel -- les 3 ecrans
   d'authentification (connexion/inscription/mot de passe oublie)
   n'affichaient AUCUN logo, seulement un titre texte -- le groupe
   "LOGO + M.A Event" que le centrage devait respecter n'existait
   simplement pas. `text-align:center` seul suffit ici a un vrai
   centrage optique : le logo (app/assets/brand/logo-ma.png) est un
   anneau parfaitement symetrique dans son propre canevas (verifie :
   marge de 15px identique sur les 4 cotes), donc centrer son conteneur
   centre reellement l'anneau visible, jamais un decalage residuel du a
   un padding interne asymetrique du fichier source. */
.ma-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.ma-auth-brand__logo {
  width: 64px;
  height: 64px;
  display: block;
}

.ma-auth-brand__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ma-gold-light);
  text-align: center;
}

.ma-field {
  margin-bottom: 16px;
}

.ma-field label {
  display: block;
  font-size: 13px;
  color: var(--ma-text-soft);
  margin-bottom: 6px;
}

/* MISSION UX/UI GLOBAL V2 (section 56) : une valeur affichee en lecture
   seule (ex. email de compte long, sans espace) ne doit jamais deborder
   la carte sur mobile -- aucune regle generique n'existait pour un
   paragraphe simple dans .ma-field (seuls input/select/textarea etaient
   couverts). */
.ma-field p {
  overflow-wrap: anywhere;
}

.ma-field input,
.ma-field select,
.ma-field textarea,
select.ma-select-inline,
input.ma-select-inline {
  width: 100%;
  box-sizing: border-box;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 8px;
  color: var(--ma-text);
  padding: 10px 12px;
  /* 16px minimum : en dessous, iOS Safari zoome automatiquement sur le
     champ au focus -- papercut mobile frequent, corrige ici une fois
     pour tous les champs plutot que par ecran. */
  font-size: 16px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* V2.3 -- Section 13 : aucun style de focus n'etait defini jusqu'ici --
   chaque champ retombait sur l'anneau bleu par defaut du navigateur,
   en rupture complete avec la charte noir/blanc/dore (papercut visuel
   frequent, un focus se declenche a chaque interaction). Anneau dore
   discret, jamais retire (accessibilite clavier preservee). */
.ma-field input:focus,
.ma-field select:focus,
.ma-field textarea:focus,
select.ma-select-inline:focus,
input.ma-select-inline:focus {
  outline: none;
  border-color: rgba(226, 194, 118, 0.55);
  box-shadow: 0 0 0 3px rgba(226, 194, 118, 0.14);
}

.ma-field textarea {
  resize: vertical;
  font-family: inherit;
}

/* V2.4 -- Section 3/9 : select natif reste le plus accessible (clavier,
   lecteur d'ecran, picker mobile natif) -- jamais remplace par un
   widget custom (Section 22 : ne pas sacrifier l'accessibilite pour un
   design plus fin). Habille en "dropdown premium" via appearance:none +
   chevron SVG dore fin, coherent avec le reste des champs.
   MISSION UX/UI GLOBAL V2 (audit design system) : regle de choix a
   appliquer pour tout nouveau champ -- select natif (ci-dessous) par
   defaut ; ne passer a createMaSelect() (app/src/ui/maSelect.js) que
   pour une liste longue (au-dela d'une dizaine d'options) ou le picker
   plein ecran natif deviendrait disproportionne (ex. objet Incidents/
   Demandes, role destinataire). Formalise ici une distinction jusque-la
   appliquee au cas par cas sans regle ecrite. */
.ma-field select,
select.ma-select-inline {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 2L6 6.2L10.5 2' stroke='%23b88a3c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  /* BUG REEL corrige (mission de reprise, section 8, trouve en zoomant
     sur le nouveau selecteur Jour du Déroulé) : ce SVG data-URI n'a pas
     de largeur/hauteur intrinseque (seulement un viewBox) -- sans
     background-size explicite, la case "auto" du navigateur l'etire
     pour remplir la zone de positionnement, produisant un chevron
     demesure qui chevauche le texte (constate sur TOUS les select de
     l'app, pas seulement le nouveau, des qu'on zoome dessus). Taille
     fixe, coherente avec le viewBox d'origine (12x8). */
  background-size: 12px 8px;
  padding-right: 32px;
  cursor: pointer;
}

select.ma-select-inline {
  width: auto;
  padding: 6px 26px 6px 8px;
  background-position: right 8px center;
  font-size: 13px;
}

.ma-button {
  /* Bouton CTA principal -- source : design-system.css ".big-btn.primary" */
  width: 100%;
  border: 1px solid rgba(244, 223, 157, 0.42);
  border-radius: var(--ma-radius-pill);
  background: var(--ma-gold-gradient);
  color: var(--ma-text-on-gold);
  box-shadow: 0 10px 28px rgba(184, 138, 60, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 700;
  padding: 12px;
  font-size: 15px;
  cursor: pointer;
}

.ma-button:disabled {
  opacity: 0.6;
  cursor: default;
}

.ma-error {
  color: #e07a7a;
  font-size: 13px;
  min-height: 16px;
  margin-top: 12px;
  text-align: center;
}

.ma-event-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ma-event-item {
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}

.ma-event-item .ma-event-name {
  color: var(--ma-gold-light);
  font-weight: 600;
}

.ma-event-item .ma-event-role {
  color: var(--ma-muted);
  font-size: 13px;
}

.ma-empty {
  color: var(--ma-muted);
  text-align: center;
  font-size: 14px;
}

.ma-card--wide,
.ma-card--hub-wide {
  max-width: 720px;
}

/* Groupe strategique "Design System global" (audit reel, section H) :
   BUG STRUCTUREL confirme sur ~25 ecrans -- .ma-card--wide restait
   plafonnee a 720px quel que soit le viewport, jamais une seule
   exception/override par ecran (grep exhaustif sur les fichiers index.html de app/).
   A 1440px (reference desktop obligatoire de ce chantier), cela laisse
   ~360px de marge vide de chaque cote : le "desktop" n'etait alors
   jamais qu'un layout mobile recentre, jamais une vraie exploitation de
   l'espace disponible -- exactement l'anti-pattern que ce chantier
   demande de corriger en priorite (Section 4 : "desktop = preparation/
   administration/supervision/gestion/densite maitrisee"). Seuil a
   1024px (au-dela du taggette/petit laptop, jamais un simple mobile
   agrandi) ; augmentation moderee (+240px, jamais un plein-largeur
   disproportionne) -- les ecrans dont le contenu reste naturellement
   etroit (formulaires courts) ne sont pas penalises, ceux avec des
   listes/tableaux longs (Invitations, Organisation, Situation, Service
   supervision, Import) gagnent une vraie densite. Mobile (<1024px)
   totalement inchange.
   MISSION CORRECTIVE UX/UI (centrage vertical global, section 10) :
   .ma-card--hub-wide beneficie de la meme largeur desktop que
   .ma-card--wide -- seule la largeur est une preoccupation partagee,
   jamais le comportement mobile (cf. bloc <640px ci-dessous, ou les
   deux classes divergent volontairement). */
@media (min-width: 1024px) {
  .ma-card--wide,
  .ma-card--hub-wide {
    max-width: 960px;
  }
}

/* Audit global post-V2.5 (mission section 4/49) : "grosse carte" mobile
   -- sur un telephone, .ma-card (fond --ma-surface plus clair que le
   fond de page --ma-bg, bordure doree visible, rayon 14px, padding
   32px) rendait litteralement une boite dans une boite dans le
   telephone (padding body 24px + bordure/rayon/padding 32px de la carte
   avant le premier contenu reel) -- signale explicitement par
   l'utilisateur, confirme visuellement (captures Playwright reelles).
   Sous 640px, la carte devient plate/pleine largeur (meme fond que la
   page, aucune bordure/rayon, padding reduit) : plus aucune deuxieme
   surface visible, l'ecran entier EST l'application, dans l'esprit
   "M.A EVENT premium minimal fluide terrain professionnel". Desktop/
   tablette (>640px) conservent la carte centree existante, deja
   coherente en usage bureau/supervision. */
@media (max-width: 640px) {
  body {
    padding: 0;
  }

  /* MISSION MAITRE FINALE ABSOLUE (section 6) : bug reel -- .ma-card
     (ecrans courts type "portail" : Connexion/Mes evenements/Inscription/
     Mot de passe oublie/Invitation) heritait du meme `display:block` +
     `min-height:100vh` que .ma-card--wide (ecrans operationnels a
     contenu long). Sur un formulaire court, cela cree une carte pleine
     hauteur dont le contenu reste colle en haut (aucun display:flex sur
     la carte elle-meme) -- vide gigantesque en dessous, signale
     explicitement par l'utilisateur. Un ecran "portail" doit rester
     EQUILIBRE verticalement (body garde son flex/align-items:center de
     base) ; un ecran operationnel reste plein-hauteur/plein-defilement,
     JAMAIS centre mecaniquement (une longue liste ne doit pas etre
     comprimee au centre de l'ecran).
     body:has(.ma-card--wide) cible uniquement les pages operationnelles
     (:has() supporte par tous les navigateurs evergreen cibles par cette
     PWA, meme generation que dvh/env(safe-area-inset-*) deja utilises).
     MISSION CORRECTIVE UX/UI (centrage vertical global, section 10) :
     BUG REEL confirme sur appareil physique (iPhone) -- Mes evenements
     utilisait .ma-card--wide UNIQUEMENT pour la largeur desktop (cf.
     commentaire dans mes-evenements/index.html, mission section 53),
     jamais parce que son contenu serait "operationnel long". Cette classe
     unique melangeait deux preoccupations independantes (largeur desktop
     VS comportement mobile "plein ecran, jamais centre"), si bien que
     tout ecran-hub court hérite a tort du meme `display:block` que les
     vraies listes longues, avec le meme vide gigantesque signale ici.
     .ma-card--hub-wide decouple les deux : meme largeur desktop que
     .ma-card--wide (regle ci-dessus), mais volontairement ABSENT de
     body:has() et de la regle min-height 100vh/100dvh qui suivent --
     body garde donc son flex/align-items:center de base a toute largeur
     de viewport pour ces ecrans (Mes evenements, Mes organisations,
     Choix d'espace : hubs/selections reellement courts, jamais une liste
     qui grandit sans limite). */
  body:has(.ma-card--wide) {
    display: block;
  }

  .ma-card,
  .ma-card--wide,
  .ma-card--hub-wide {
    background: var(--ma-bg);
    border: none;
    border-radius: 0;
    max-width: 100%;
    padding: 20px 16px;
    box-sizing: border-box;
  }

  .ma-card--wide {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

.ma-success {
  color: #7ac296;
  font-size: 13px;
  min-height: 16px;
  margin-top: 12px;
  text-align: center;
}

/* G3D : conteneur de defilement horizontal pour .ma-table sur viewport
   etroit -- evite qu'une table a 4-6 colonnes ne force toute la page
   (.ma-card) a deborder horizontalement sur smartphone. La table garde
   sa structure existante ; seul ce conteneur scrolle, jamais body. */
.ma-table-scroll {
  overflow-x: auto;
  /* V2.3 -- bug reel trouve en validation visuelle : specifier
     overflow-x sans overflow-y fait implicitement calculer overflow-y a
     "auto" (quirk CSS standard), ce qui rognait verticalement le menu
     d'actions de ligne (.ma-row-actions__menu, position absolute,
     deborde volontairement sous la ligne). overflow-y explicite a
     "visible" desactive ce clipping involontaire sans toucher au
     scroll horizontal voulu. */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.ma-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.ma-table th,
.ma-table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--ma-line);
  font-size: 14px;
}

/* Lot correctif Design System (section 10, Équipe) : bug réel -- un
   member.displayName retombe sur l'email complet dès que l'utilisateur
   n'a jamais défini de displayName Firebase Auth (cf.
   functions/manageEventMember.js, resolvedDisplayName), colonne sans
   largeur bornée -- un email long élargit toute la colonne sur TOUTES
   les lignes, forçant un défilement horizontal disproportionné juste
   pour atteindre rôle/statut/action. Tronque avec ellipsis, valeur
   complète toujours disponible via l'attribut title (au clic long sur
   mobile / survol sur desktop) -- jamais une perte d'information. */
.ma-table-cell-truncate {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-table th {
  color: var(--ma-text-soft);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ma-table tbody tr {
  cursor: default;
}

.ma-table tbody tr.ma-guest-row--editable {
  cursor: pointer;
}

.ma-badge {
  display: inline-block;
  border-radius: var(--ma-radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* MISSION MAITRE FINALE ABSOLUE (section 9) : couleurs semantiques
   normalisees -- .ma-badge--on/--off/--urgent utilisaient des valeurs
   codees en dur (dont un fond ROUGE trompeur sur --off, un badge
   pourtant NEUTRE/inactif dans la quasi-totalite de ses usages reels :
   invite non verifie, canal desactive, statut import "deja present").
   Reutilisent maintenant les tokens semantiques partages ci-dessus --
   memes teintes, mais une seule source de verite pour "valide/neutre/
   urgent" dans toute l'app (invites, import, canaux, service, documents,
   tables, incidents). */
.ma-badge--on {
  background: var(--ma-success-bg);
  color: var(--ma-success);
}

.ma-badge--off {
  background: var(--ma-neutral-bg);
  color: var(--ma-neutral);
}

.ma-back-link {
  display: inline-block;
  color: var(--ma-muted);
  font-size: 13px;
  margin-bottom: 16px;
  text-decoration: none;
}

.ma-back-link:hover {
  color: var(--ma-gold-light);
}

/* MISSION FINALE ABSOLUE (section 17, accessibilite) : masque visuellement
   un libelle tout en le gardant annonce par un lecteur d'ecran -- pour un
   champ dont le contexte visuel (titre de section, badge voisin) rend un
   <label> visible redondant, jamais pour en supprimer purement et
   simplement l'association programmatique. Technique standard (jamais
   display:none, qui retirerait l'element de l'arbre d'accessibilite). */
/* Lot correctif "Documents / Storage reel" : bug reel trouve en
   verifiant visuellement le nouveau depot de fichier a 390px --
   scrollWidth (422px) > clientWidth (390px), invisible a l'oeil
   (html/body ont deja overflow-x:clip) mais un vrai defaut de boite
   sous-jacent. Cause : `.ma-field input { width:100%; ... }` (regle
   generique de tokens.css) a une specificite CSS strictement superieure
   a `.ma-sr-only` (1 classe + 1 element > 1 classe seule) -- des qu'un
   <input type=file class="ma-sr-only"> (cf. fileDropZone.js) se trouve
   ne serait-ce que DESCENDANT d'un `.ma-field` (le motif meme utilise
   par l'outil OCR existant ET par les deux nouveaux depots de fichier
   de ce lot), le width:100% l'emporte quel que soit l'ordre des regles
   dans la feuille, retablissant la largeur pleine de l'input natif
   masque. Un utilitaire "visuellement masque mais accessible" doit
   imperativement s'appliquer dans N'IMPORTE QUEL contexte futur : les
   proprietes de mise en page portent donc `!important`, seul usage
   legitime de ce lot (jamais pour contourner une cascade normale, ici
   pour garantir le contrat d'un utilitaire generique). */
.ma-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* MISSION MAITRE FINALE ABSOLUE (sections 34-41/60) : modale generique
   -- <dialog> natif (focus trap/Echap/backdrop geres par le
   navigateur). Reutilisee par QR invite, scanner, et tout futur besoin
   de dialogue -- jamais une modale specifique par fonctionnalite. */
.ma-modal {
  background: var(--ma-bg);
  color: var(--ma-text);
  border: 1px solid var(--ma-line);
  border-radius: 14px;
  padding: 20px;
  max-width: 360px;
  width: calc(100vw - 32px);
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
  /* Un <dialog> dans la top layer doit etre centre sur le viewport visible,
     independamment de la position de scroll de la page sous-jacente. */
  position: fixed;
  inset: 50% auto auto 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.ma-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

.ma-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ma-gold-light);
  margin: 0 0 14px;
  padding-right: 28px;
}

.ma-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--ma-muted);
  font-size: 16px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 8px;
}

.ma-modal__close:hover {
  color: var(--ma-text);
}

.ma-modal__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

/* Groupe strategique "Design System global" (audit reel, section D/QR) :
   .ma-qr-actions -- le meme bloc de style inline (display:flex;
   flex-wrap:wrap;gap:8px;justify-content:center) etait duplique a
   l'identique dans guestQrPanel.js, tableQrPanel.js et
   invitationQrModal.js (3 fichiers, aucune classe partagee). Regroupe
   ici la ligne d'actions QR (Copier le lien/Copier le code/Partager le
   lien/Telecharger l'image/Partager l'image), commune aux 3 panneaux.
   .ma-qr-action-feedback normalise le message de retour (succes/erreur)
   ecrit par qrCardActions.js, jusqu'ici stylee uniquement via
   feedbackEl.style.* pose en JS a chaque appel (aucune regle CSS
   n'existait). */
.ma-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.ma-qr-action-feedback {
  width: 100%;
  text-align: center;
  margin-top: 4px;
  font-size: 13px;
  min-height: 16px;
}

/* MISSION FINALE ABSOLUE (section 4) : navigation Précédent/Suivant --
   compacte, fleches FINES (jamais un chevron massif), distincte du lien
   "← Mes événements" (action differente : historique reel de
   navigation, pas un raccourci fixe vers la liste des evenements). */
.ma-prev-next-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ma-prev-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--ma-text-soft);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 2px;
  min-height: 36px;
  cursor: pointer;
  max-width: 45%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 150ms ease;
}

.ma-prev-next-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-prev-next-btn:disabled {
  color: var(--ma-muted);
  opacity: 0.35;
  cursor: default;
}

.ma-prev-next-btn:not(:disabled):hover {
  color: var(--ma-gold-light);
}

.ma-prev-next-arrow {
  flex: 0 0 auto;
}

.ma-prev-next-btn--next {
  margin-left: auto;
}

/* MISSION FINALE ABSOLUE (section 7) : ligne de case a cocher generique
   (preferences push) -- cible tactile >= 44px, coherente avec le reste
   du systeme de cases deja existant (checkbox 18px, accent-color or). */
.ma-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
}

.ma-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--ma-gold-mid);
  cursor: pointer;
}

.ma-inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 16px;
}

.ma-inline-form .ma-field {
  margin-bottom: 0;
  flex: 1 1 140px;
}

.ma-inline-form .ma-button {
  width: auto;
  flex: 0 0 auto;
}

.ma-search-bar {
  position: sticky;
  top: 0;
  background: var(--ma-surface);
  padding-bottom: 10px;
  margin-bottom: 6px;
  z-index: 1;
}

.ma-table-cell-strong {
  font-weight: 700;
  color: var(--ma-gold-light);
  font-size: 15px;
}

.ma-row-recent {
  background: rgba(226, 194, 118, 0.1);
}

.ma-table td .ma-button {
  width: auto;
  min-height: 44px;
  padding: 8px 14px;
  font-size: 13px;
  box-sizing: border-box;
}

.ma-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.ma-stat-tile {
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

/* Groupe strategique "Design System global" (audit reel, section E) :
   modificateur manquant -- serviceSupervision.js recreait cet etat via
   tile.style.cursor/tile.style.borderColor poses directement en JS
   (aucune classe correspondante), un .ma-stat-tile cliquable/filtrant
   n'avait jamais recu sa propre variante. Meme accent dore discret que
   .ma-filter-tab--active/.ma-location-toggle__btn--active (bordure +
   fond legerement teinte, jamais un aplat plein). */
.ma-stat-tile--clickable {
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.ma-stat-tile--active {
  background: rgba(226, 194, 118, 0.08);
  border-color: rgba(226, 194, 118, 0.6);
}

.ma-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ma-gold-light);
}

.ma-stat-label {
  font-size: 12px;
  color: var(--ma-muted);
  margin-top: 2px;
}

.ma-progress-row {
  margin-bottom: 12px;
}

.ma-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ma-text-soft);
  margin-bottom: 4px;
}

.ma-progress-track {
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius-pill);
  height: 10px;
  overflow: hidden;
}

.ma-progress-fill {
  height: 100%;
  background: var(--ma-gold-gradient);
  border-radius: var(--ma-radius-pill);
}

.ma-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ma-filter-tab {
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius-pill);
  color: var(--ma-text-soft);
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

/* V2.3 -- Section 12 : le dore reste un ACCENT, jamais un aplat plein
   sur un controle de selection (tab/segment) -- bordure + fond
   legerement teinte + texte dore, jamais du texte noir sur fond plein
   qui rivalise avec le vrai CTA principal de l'ecran. */
.ma-filter-tab--active {
  background: rgba(226, 194, 118, 0.1);
  border-color: rgba(226, 194, 118, 0.5);
  color: var(--ma-gold-light);
  font-weight: 600;
}

/* V2.3 -- Section 5 : pastille de decompte sur l'onglet "A servir",
   signal discret (jamais un badge doré plein en plus de l'onglet actif
   deja doré -- reste lisible sur les deux etats actif/inactif). */
.ma-tab-count {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}

/* V2.4 (Section 14) : badge total place dans le <h1 class="ma-title">
   (Centre de communication) -- .ma-title rend son texte via un degrade
   clippe (color:transparent + background-clip:text), herite par tout
   descendant ; sans cette regle le badge devient invisible (texte
   transparent sans propre degrade a clipper, trouve en validation
   visuelle reelle). */
.ma-title .ma-tab-count {
  color: var(--ma-gold-light);
  -webkit-background-clip: initial;
  background-clip: initial;
  background: none;
}

.ma-nav-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

/* Déroulé / run_of_show -- mapping direct des couleurs deja utilisees
   par legacy-v1/deroule/index.html (#f4df9d = --ma-gold-highlight,
   #e2c276 = --ma-gold-light), reproduites via les tokens V2 existants. */
.ma-ros-section-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ma-muted);
  margin: 20px 0 8px;
}

.ma-ros-section-label:first-child {
  margin-top: 0;
}

.ma-ros-now {
  background: linear-gradient(180deg, #191305, var(--ma-bg));
  border: 1.4px solid rgba(226, 194, 118, 0.65);
  border-radius: 16px;
  padding: 16px 18px;
}

.ma-ros-now .ma-ros-time {
  color: var(--ma-gold-highlight);
  font-size: 22px;
  font-weight: 700;
}

.ma-ros-now .ma-ros-label {
  color: var(--ma-text);
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0 0;
}

.ma-ros-tag {
  display: inline-block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ma-text-on-gold);
  background: var(--ma-gold-light);
  padding: 3px 10px;
  border-radius: var(--ma-radius-pill);
  font-weight: 700;
}

/* Passage apres minuit (mission de reprise, section 8) : badge discret,
   affiche uniquement quand une etape a un dayOffset > 0 -- jamais de
   bruit visuel pour le cas courant (evenement sur une seule journee). */
.ma-ros-day-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--ma-muted);
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius-pill);
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

.ma-ros-next {
  background: var(--ma-bg);
  border: 1px solid rgba(226, 194, 118, 0.3);
  border-radius: 14px;
  padding: 14px 16px;
}

.ma-ros-next .ma-ros-time {
  color: var(--ma-gold-light);
  font-size: 16px;
  font-weight: 700;
}

.ma-ros-next .ma-ros-label {
  color: var(--ma-text);
  font-size: 14.5px;
  font-weight: 600;
  margin: 2px 0 0;
}

.ma-ros-upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ma-ros-upcoming-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  padding: 10px 14px;
}

.ma-ros-upcoming-item .ma-ros-time {
  flex: 0 0 auto;
  color: var(--ma-muted);
  font-size: 12.5px;
  min-width: 42px;
}

.ma-ros-upcoming-item .ma-ros-label {
  color: var(--ma-text-soft);
  font-size: 13px;
}

.ma-ros-full-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 4px;
  border-bottom: 1px solid var(--ma-line);
  cursor: default;
}

.ma-ros-full-item--editable {
  cursor: pointer;
}

.ma-ros-full-item .ma-ros-time {
  flex: 0 0 auto;
  color: var(--ma-gold-light);
  font-size: 13px;
  min-width: 42px;
  font-weight: 600;
}

/* Audit global post-V2.5 (mission section 4/44) : ligne surlignee dans
   la liste complete pour l'etape en cours/suivante -- meme information
   que le bloc Maintenant/Ensuite, mais visible aussi en scrollant la
   timeline complete. Jamais une couleur inventee : meme accent or que
   .ma-ros-now/.ma-ros-next. */
.ma-ros-full-item--current {
  background: rgba(226, 194, 118, 0.1);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

.ma-ros-full-item--next {
  background: rgba(226, 194, 118, 0.04);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Zone/responsable : information secondaire, jamais au meme poids
   visuel que le titre de l'etape. */
.ma-ros-meta {
  display: block;
  color: var(--ma-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* Ecran Tables -- grille de cartes, une par table detectee. */
.ma-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.ma-table-tile {
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  min-height: 44px;
}

.ma-table-tile:hover {
  border-color: rgba(226, 194, 118, 0.5);
}

.ma-table-tile--empty-table {
  border-style: dashed;
}

.ma-table-tile-name {
  color: var(--ma-gold-light);
  font-size: 16px;
  font-weight: 700;
  word-break: break-word;
}

.ma-table-tile-count {
  color: var(--ma-muted);
  font-size: 12px;
  margin-top: 4px;
}

.ma-table-tile-capacity {
  color: var(--ma-text-soft);
  font-size: 11.5px;
  margin-top: 4px;
}

/* MISSION MAITRE FINALE ABSOLUE (section 9/52) : etats semantiques --
   "complete/plus de place" = vigilance (ambre), "surcapacite" = danger
   (bordeaux). Le dore reste reserve a la marque/l'accent (section 8),
   jamais un etat operationnel -- corrige ici (la bordure "complete"
   utilisait a tort le dore de marque). */
.ma-table-tile--full {
  border-color: var(--ma-warning);
}

.ma-table-tile--full .ma-table-tile-capacity {
  color: var(--ma-warning);
  font-weight: 600;
}

.ma-table-tile--overflow {
  border-color: var(--ma-danger);
}

.ma-table-tile--overflow .ma-table-tile-capacity {
  color: var(--ma-danger);
  font-weight: 600;
}

.ma-guest-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  min-height: 44px;
}

.ma-guest-result-name {
  color: var(--ma-text);
  font-size: 14px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-guest-result-table {
  color: var(--ma-gold-light);
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 auto;
}

/* Ecran Communication -- reste une fonctionnalite M.A Event (cartes
   sobres, pas de bulles de chat), tokens dores/anthracite existants. */
.ma-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ma-message-item {
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  padding: 12px 14px;
}

.ma-message-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.ma-message-author {
  color: var(--ma-gold-light);
  font-weight: 700;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.ma-message-role {
  color: var(--ma-muted);
  font-size: 12px;
  margin-left: 6px;
}

.ma-message-time {
  color: var(--ma-muted);
  font-size: 12px;
  flex: 0 0 auto;
}

.ma-message-text {
  color: var(--ma-text);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* MISSION MAITRE FINALE ABSOLUE (section 28) : fil de reponses court,
   rattache a un message precis -- jamais un nouveau systeme de
   messagerie parallele, reutilise .ma-message-item/.ma-message-text
   dans une colonne indentee/discrete. Le bouton "Repondre" reste un
   lien texte discret (jamais un CTA dore en pleine largeur pour une
   action secondaire). */
.ma-reply-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--ma-muted);
  font-size: 12.5px;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  /* Section 60 : cible tactile >= 44px, meme si le texte reste discret
     visuellement -- toute la boite (pas seulement le texte) est
     cliquable/tapable. */
  min-height: 44px;
}

.ma-reply-toggle:hover {
  color: var(--ma-gold-light);
}

.ma-reply-thread {
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid var(--ma-line);
}

.ma-reply-item {
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

.ma-reply-item:last-child {
  margin-bottom: 0;
}

.ma-reply-composer {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* MASTER FINAL (audit A-2, section 3) : meme bug que .ma-composer input
   -- aucun style de base herite, rendu natif blanc/gris par defaut. */
.ma-reply-composer input {
  flex: 1 1 auto;
  min-height: 40px;
  font-size: 13px;
  box-sizing: border-box;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 8px;
  color: var(--ma-text);
  padding: 8px 10px;
  font-family: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ma-reply-composer input:focus {
  outline: none;
  border-color: rgba(226, 194, 118, 0.55);
  box-shadow: 0 0 0 3px rgba(226, 194, 118, 0.14);
}

.ma-reply-composer button {
  /* .ma-button impose width:100% -- combine a flex-basis:auto (valeur
     par defaut de "flex: 0 0 auto"), cela reintroduit la largeur pleine
     et casse la mise en page (bug reel trouve en verification visuelle
     Playwright reelle) : override explicite necessaire ici. */
  width: auto;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
}

/* Verification visuelle reelle (captures Playwright) : le composer
   sticky (.ma-composer, bottom:0) n'avait aucun espace reserve sous la
   liste de messages -- des qu'un fil depasse un ecran, le composer
   colle au bas du viewport PAR-DESSUS le dernier message, en masquant
   une partie tant que l'utilisateur n'a pas atteint le tout bas reel de
   la page. padding-bottom ici (>= hauteur du composer) garantit que le
   dernier message peut toujours se degager entierement au-dessus du
   composer avant la fin du scroll. */
#messageListWrap {
  padding-bottom: 76px;
}

.ma-composer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  position: sticky;
  bottom: 0;
  background: var(--ma-surface);
  padding-top: 12px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  margin-top: 4px;
}

/* MASTER FINAL (audit A-2, section 3) : ce champ n'heritait d'aucun
   style de base (contrairement a .ma-field input) -- rendu en blanc/
   bordure grise par defaut du navigateur, en rupture avec la charte
   noir/blanc/dore. Meme jeu de regles que .ma-field input, applique
   directement ici (le composer n'utilise pas le wrapper .ma-field).
   MISSION DE STABILISATION UI (section 18) : bug reel verifie
   visuellement -- le champ message, l'objet et "Envoyer" s'empilaient
   chacun sur sa PROPRE ligne (3 lignes pleine largeur, ~160px de haut
   sur mobile), rendant le composer disproportionne. `order` reorganise
   le champ message en premiere position (c'est l'action principale) ;
   objet + Envoyer partagent la ligne suivante. `flex-basis:200px`
   (jamais 100% fige) laisse le flex-wrap naturel decider : sur mobile
   (espace insuffisant pour les 3 elements), le message passe seul sur
   sa ligne (grow:1 le remplit) et objet+Envoyer partagent la ligne
   suivante (2 lignes, ~108px) ; sur desktop (assez de largeur), les 3
   tiennent sur UNE seule ligne comme avant (~56px) -- verifie
   visuellement aux deux tailles, jamais suppose. */
.ma-composer input {
  order: 1;
  flex: 1 1 200px;
  min-height: 44px;
  box-sizing: border-box;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 8px;
  color: var(--ma-text);
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ma-composer input:focus {
  outline: none;
  border-color: rgba(226, 194, 118, 0.55);
  box-shadow: 0 0 0 3px rgba(226, 194, 118, 0.14);
}

/* MISSION MAITRE FINALE ABSOLUE (section 27) : dropdown "objet" --
   compact, jamais un gros bloc/des chips permanents. Passe sur sa
   propre ligne en dessous si l'espace manque (flex-wrap sur le
   composer), jamais un debordement horizontal. */
.ma-composer select {
  order: 2;
  flex: 1 1 140px;
  max-width: 200px;
  min-height: 44px;
}

/* .ma-composer__objet : mount point du composant JS .ma-select (pas un
   <select> natif, cf. communication.js/createMaSelect) -- meme
   comportement/ordre que .ma-composer select ci-dessus, sur le mount
   point plutot que sur l'element genere. */
.ma-composer__objet {
  order: 2;
  flex: 1 1 140px;
  max-width: 200px;
}

.ma-composer .ma-button {
  order: 3;
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
}

/* Ecran Contacts -- annuaire operationnel, cartes sobres reutilisant
   les tokens M.A existants, pas un carnet d'adresses generique. */
.ma-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.ma-contact-card {
  display: flex;
  gap: 12px;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  padding: 14px;
}

.ma-contact-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(226, 194, 118, 0.1);
  border: 1.2px solid rgba(226, 194, 118, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ma-gold-light);
  font-weight: 700;
  font-size: 14px;
}

.ma-contact-body {
  flex: 1 1 auto;
  min-width: 0;
}

.ma-contact-name {
  color: var(--ma-text);
  font-weight: 700;
  font-size: 15px;
  word-break: break-word;
}

.ma-contact-fonction {
  color: var(--ma-gold-light);
  font-size: 13px;
  margin-top: 1px;
}

.ma-contact-organisation {
  color: var(--ma-text-soft);
  font-size: 12.5px;
  margin-top: 1px;
  word-break: break-word;
}

.ma-contact-note {
  color: var(--ma-muted);
  font-size: 12.5px;
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

.ma-contact-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ma-btn-compact {
  width: auto;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: var(--ma-radius-pill);
  border: 1px solid var(--ma-line);
  background: var(--ma-surface);
  color: var(--ma-text-soft);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* MISSION DE REPRISE ET FINALISATION GLOBALE (section 3.7/7) : plus
   aucun emoji systeme comme icone fonctionnelle -- glyphe SVG inline
   (stroke=currentColor, herite la couleur du bouton/etat), meme
   discipline que .ma-family-nav__toggle-icon. Reutilisable partout
   ou un bouton a besoin d'une icone avant son libelle texte. */
.ma-btn-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.ma-btn-icon svg {
  width: 100%;
  height: 100%;
}

/* MISSION DE REPRISE ET FINALISATION GLOBALE (section 3.1) : bouton
   flottant DISCRET "retour en haut" pour les listes longues (centaines
   d'invites) -- jamais une barre permanente qui mange l'ecran : invisible
   par defaut, apparait seulement au-dela d'un seuil de scroll (cf.
   scrollNav.js). z-index sous les menus/dropdowns/modales (20-60) pour
   ne jamais gener une superposition. Safe-area respectee (encoche/
   home-indicator iOS). */
.ma-fab-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ma-surface);
  border: 1px solid rgba(226, 194, 118, 0.35);
  color: var(--ma-gold-light);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 30;
  cursor: pointer;
}

.ma-fab-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ma-fab-top:focus-visible {
  outline: 2px solid var(--ma-gold-light);
  outline-offset: 2px;
}

.ma-btn-compact:disabled,
.ma-btn-compact.ma-btn-compact--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* MISSION MAITRE FINALE ABSOLUE (section 13) : etat "place" -- couleur
   semantique de succes (jamais un aplat plein), reste un controle
   compact et cliquable pour annuler -- jamais un badge non actionnable
   qui rendrait la correction impossible. */
.ma-place-toggle {
  display: inline-block;
}

.ma-btn-compact--placed {
  background: var(--ma-success-bg);
  border-color: rgba(111, 156, 125, 0.4);
  color: var(--ma-success);
}

.ma-btn-compact--danger {
  border-color: rgba(224, 122, 122, 0.4);
  color: #e07a7a;
}

.ma-contact-form {
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Ecran Tableau de situation -- centre de pilotage simple : blocs
   empiles, separateurs discrets, aucune nouvelle primitive de carte
   (reutilise ma-stat-grid/ma-progress-*/ma-ros-*/ma-message-* tels
   quels). Uniquement l'assemblage (titres de section, liens rapides,
   pastilles de repartition par role) est propre a cet ecran. */
.ma-situation-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ma-line);
}

.ma-situation-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ma-situation-section--compact .ma-stat-grid {
  margin-bottom: 0;
}

/* Audit global post-V2.5 (mission section 4/5) : alertes operationnelles
   du Dashboard -- meme couleur d'alerte que .ma-error, jamais un
   remplissage dore massif (le dore reste un accent, cf. Section 8). */
.ma-alert-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(224, 122, 122, 0.35);
  border-radius: 10px;
  background: rgba(224, 122, 122, 0.06);
  color: var(--ma-text-soft);
  font-size: 13px;
  margin-bottom: 8px;
}

.ma-alert-item:last-child {
  margin-bottom: 0;
}

#alertsBlock {
  margin-bottom: 20px;
}

/* Actions rapides -- pastilles compactes, jamais un gros bouton dore
   par action (le dore reste reserve au CTA principal de chaque ecran
   cible, pas a ce raccourci). */
.ma-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.ma-quick-action {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ma-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ma-text-soft);
  font-size: 13px;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease;
}

.ma-quick-action:hover {
  border-color: rgba(226, 194, 118, 0.45);
  color: var(--ma-gold-light);
}

/* MISSION MAITRE FINALE ABSOLUE (section 12) : .ma-situation-section-head
   est maintenant le <summary> natif de chaque <details> famille --
   supprime le marqueur de repli par defaut du navigateur (remplace par
   .ma-situation-chevron, cf. plus bas), reste un flex row (titre + une
   ligne de synthese deja calculee + chevron), jamais un second calcul. */
.ma-situation-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 12px;
  cursor: pointer;
  min-height: 44px;
  list-style: none;
}

.ma-situation-section-head::-webkit-details-marker {
  display: none;
}

.ma-situation-summary-line {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ma-muted);
  font-size: 12.5px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-situation-chevron {
  flex: 0 0 auto;
  color: var(--ma-muted);
  transition: transform 160ms ease, color 160ms ease;
}

details.ma-situation-section[open] > .ma-situation-section-head .ma-situation-chevron {
  transform: rotate(180deg);
  color: var(--ma-gold-light);
}

.ma-situation-section-head:hover .ma-situation-section-title {
  color: var(--ma-gold-highlight);
}

.ma-situation-section-title {
  color: var(--ma-gold-light);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.ma-situation-section-head .ma-back-link {
  margin-bottom: 0;
}

.ma-situation-role-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.ma-situation-role-pill {
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: var(--ma-radius-pill);
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--ma-text-soft);
}

.ma-situation-role-pill strong {
  color: var(--ma-gold-light);
}

/* Ecran Incidents -- reutilise .ma-message-item/.ma-badge existants
   pour les lignes d'incident ; seules ces 2 variantes de badge de
   priorite sont nouvelles, avec les couleurs deja existantes (rouge
   d'alerte deja utilise par .ma-error/.ma-btn-compact--danger, dore
   deja utilise pour l'emphase). Aucune nouvelle couleur introduite. */
.ma-badge--urgent {
  background: var(--ma-danger-bg);
  color: var(--ma-danger);
}

/* MISSION MAITRE FINALE ABSOLUE (section 9) : deux variantes
   supplementaires pour les etats "en attente/vigilance" (ambre) et
   "en cours/info" (bleu ardoise) -- ex. statut d'une demande terrain
   (Nouvelle/Prise en compte/Resolue), jusque-la un texte gris identique
   quel que soit l'etat reel. */
.ma-badge--warning {
  background: var(--ma-warning-bg);
  color: var(--ma-warning);
}

.ma-badge--info {
  background: var(--ma-info-bg);
  color: var(--ma-info);
}

.ma-badge--important {
  background: rgba(226, 194, 118, 0.16);
  color: var(--ma-gold-light);
}

/* G3D : seule regle responsive du fichier, volontairement centralisee
   ici plutot que dispersee. `body`/`.ma-card` avaient un padding fixe
   (24px + 32px) quel que soit le viewport -- sur un smartphone etroit
   (~320-375px), cela ne laissait plus qu'environ 210-260px de largeur
   utile au contenu. Reduit uniquement le padding externe, ne modifie
   aucune structure ni composant. */
@media (max-width: 480px) {
  body {
    padding: 12px;
  }

  .ma-card {
    padding: 20px;
  }
}

/* G8 -- Section 9(A) : leger fondu d'entree du contenu au changement
   d'ecran. Applique globalement a .ma-card (chaque ecran en contient
   exactement une) : aucune modification JS necessaire, jamais bloquant
   (la navigation reelle -- changement d'URL -- n'attend jamais la fin
   de cette animation, purement decorative sur le rendu deja present). */
/* V2.5 (bug reel confirme par test navigateur) : la version precedente
   animait aussi `transform` (translateY). Une animation CSS avec
   fill-mode "both"/"forwards" CONSERVE la valeur de transform du
   dernier keyframe une fois terminee -- meme translateY(0), qui n'est
   pourtant pas "none", cree un nouveau containing block pour tout
   descendant en position:fixed. Consequence concrete : le menu "..."
   de chaque ligne (position:fixed, coordonnees calculees en JS pour
   etre relatives au viewport) se retrouvait positionne relativement a
   .ma-card au lieu du viewport des que l'animation d'entree de la
   carte se terminait (~220ms apres chargement, donc systematiquement
   au moment ou l'utilisateur clique) -- le menu apparaissait tres loin
   a droite du declencheur. Fondu en opacite pure : meme effet
   d'entree premium, sans jamais etablir de containing block parasite. */
@keyframes ma-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ma-card {
  animation: ma-fade-in 220ms ease both;
}

/* Section 9(C) : micro-feedback au clic, deja disponible sur tous les
   .ma-button existants sans modifier leur JS. */
.ma-button {
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.ma-button:active:not(:disabled) {
  transform: scale(0.98);
}

/* Section 9(E) : transition discrete sur tout changement de couleur de
   badge (dont les badges de statut/priorite deja existants -- incidents,
   demandes) -- aucune logique metier touchee, seule la RE-PEINTURE CSS
   d'un badge dont la classe change devient progressive au lieu d'abrupte. */
.ma-badge {
  transition: background-color 200ms ease, color 200ms ease;
}

/* G8 -- Section 4/5/6/7 : navigation groupee par familles fonctionnelles
   (Pilotage/Participants/Equipe/Ressources/Configuration -- cf.
   navigation.js NAV_FAMILIES/buildVisibleFamilies/renderFamilyNav).
   Reutilise le conteneur #roleNav deja present sur chaque ecran (aucun
   nouveau wrapper de page, aucune refonte du paradigme "carte centree"
   existant -- cf. docs/RULES_DECISIONS.md pour la justification de ce
   choix face a une vraie sidebar plein-viewport, disproportionnee ici).
   >=768px (tablette et desktop confondus, cf. Section 6 -- le meme
   traitement "grille compacte" convient aux deux, en evitant une
   sidebar surdimensionnee/ERP) : panneau toujours visible, en grille.
   <768px (smartphone) : bouton bascule + panneau en surimpression legere. */
.ma-family-nav {
  position: relative;
  margin-bottom: 18px;
}

.ma-family-nav__toggle {
  display: none;
}

/* V2.4 -- icone vectorielle (SVG, jamais des barres CSS empilees qui se
   fondent visuellement a petite taille -- signale a repetition). Deux
   SVG superposes (position: relative + absolute), bascule par
   opacite + legere rotation, jamais de reconstruction DOM. */
.ma-family-nav__toggle-icon {
  position: relative;
  width: 18px;
  height: 14px;
  flex: 0 0 auto;
}

.ma-family-nav__toggle-icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 180ms ease, transform 180ms ease;
}

.ma-family-nav__icon-close {
  opacity: 0;
  transform: rotate(-45deg);
}

.ma-family-nav--open .ma-family-nav__icon-lines {
  opacity: 0;
  transform: rotate(45deg);
}

.ma-family-nav--open .ma-family-nav__icon-close {
  opacity: 1;
  transform: rotate(0deg);
}

.ma-family-nav__backdrop {
  display: none;
}

.ma-family-nav__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 16px 22px;
}

/* V2.6 (Section 6) : chaque famille est un accordeon independant --
   bouton pleine largeur (44px minimum tactile) + chevron proportionne
   (10x6, jamais un "V" dore massif), rotation legere a l'ouverture.
   Repliee par defaut sauf la famille de l'ecran courant (cf. navigation.js). */
.ma-family-group__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 6px 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.ma-family-group__title {
  margin: 0;
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ma-muted);
}

.ma-family-group__chevron {
  flex: 0 0 auto;
  color: var(--ma-muted);
  transition: transform 160ms ease, color 160ms ease;
}

.ma-family-group__toggle--open .ma-family-group__chevron {
  transform: rotate(180deg);
  color: var(--ma-gold-light);
}

.ma-family-group__toggle:hover .ma-family-group__title {
  color: var(--ma-text-soft);
}

.ma-family-group__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: ma-fade-in 160ms ease both;
}

.ma-family-group__links[hidden] {
  display: none;
}

.ma-family-group__link {
  display: block;
  padding: 7px 0;
  color: var(--ma-text-soft);
  font-size: 14px;
  text-decoration: none;
  border-radius: 6px;
  transition: color 150ms ease, background-color 150ms ease;
}

.ma-family-group__link:hover {
  color: var(--ma-gold-light);
}

.ma-family-group__link--current {
  color: var(--ma-gold-light);
  font-weight: 600;
}

@media (max-width: 767px) {
  /* V2.2 -- Lot A2 : le declencheur "Menu" etait aussi massif qu'un CTA
     (fond plein, meme rayon que .ma-card, poids 600) alors qu'il ouvre
     un panneau -- pas une action. Repris plus discret/premium : hauteur
     ramenee au minimum tactile strict (44px, jamais en-dessous), fond
     quasi invisible au repos, bordure fine, poids de police reduit.
     L'etat "ouvert" (ci-dessous, --open) reste le seul moment ou la
     bordure doree apparait, comme accent ponctuel plutot que permanent. */
  .ma-family-nav__toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    height: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 13px;
    background: transparent;
    border: 1px solid var(--ma-line);
    border-radius: 10px;
    color: var(--ma-text-soft);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
  }

  .ma-family-nav__toggle-icon {
    width: 14px;
    height: 10px;
  }

  .ma-family-nav__toggle:hover {
    border-color: rgba(226, 194, 118, 0.35);
    color: var(--ma-text);
  }

  .ma-family-nav--open .ma-family-nav__toggle {
    border-color: rgba(226, 194, 118, 0.45);
    color: var(--ma-gold-light);
  }

  .ma-family-nav--open .ma-family-nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 40;
  }

  .ma-family-nav__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    grid-template-columns: 1fr;
    max-height: 65vh;
    overflow-y: auto;
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-md);
    padding: 16px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .ma-family-nav--open .ma-family-nav__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .ma-family-group + .ma-family-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ma-line);
  }

  .ma-family-group__link {
    min-height: 44px;
    padding: 11px 8px;
    box-sizing: border-box;
  }
}

/* V2.1 Service en salle -- prise de commande terrain. Reutilise
   .ma-message-item comme conteneur de ligne d'article (aucune nouvelle
   carte), ajoute seulement le necessaire : le compteur +/- (aucun
   equivalent existant dans le design system) et le selecteur
   table/zone/aucun (segmented control leger, meme esprit que
   .ma-filter-tabs mais binaire/ternaire, jamais une liste). */
.ma-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Groupe strategique "Design System global" (audit reel, section G) :
   BUG REEL confirme -- contrairement a .ma-guest-card__name (deja
   protege par min-width:0 + ellipsis), le libelle d'article n'avait
   aucun garde-fou : un flex-item sans min-width explicite garde
   min-width:auto par defaut (quirk flexbox standard), qui l'empeche de
   retrecir sous son contenu -- un nom d'article long pouvait deborder
   du conteneur, coincee contre le compteur +/- (.ma-qty-stepper,
   largeur fixe). Le premier enfant de .ma-item-row porte name+category :
   min-width:0 l'autorise a retrecir, ellipsis tronque proprement le nom
   plutot que de deborder. */
.ma-item-row > div:first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.ma-item-row-name {
  color: var(--ma-text);
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-item-row-category {
  color: var(--ma-muted);
  font-size: 12px;
  margin-top: 2px;
}

.ma-qty-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.ma-qty-stepper__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ma-line);
  background: var(--ma-bg);
  color: var(--ma-gold-light);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease;
}

.ma-qty-stepper__btn:active {
  transform: scale(0.94);
  border-color: rgba(226, 194, 118, 0.5);
}

.ma-qty-stepper__value {
  min-width: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--ma-text);
}

.ma-location-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.ma-location-toggle__btn {
  flex: 1 1 0;
  min-height: 44px;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  color: var(--ma-text-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

/* V2.3 -- Section 12 : meme principe que .ma-filter-tab--active --
   accent dore discret (bordure + fond teinte), jamais un aplat plein. */
.ma-location-toggle__btn--active {
  background: rgba(226, 194, 118, 0.1);
  border-color: rgba(226, 194, 118, 0.5);
  color: var(--ma-gold-light);
  font-weight: 600;
}

/* V2.2 -- Lot B5 : recap/CTA sticky de commande (Service en salle).
   Meme motif que .ma-composer (sticky bottom, fond carte) -- CTA jamais
   perdu au milieu d'un long formulaire d'articles, compteur toujours
   visible sans devoir scroller jusqu'en bas. */
/* MISSION DE REPRISE ET FINALISATION GLOBALE (section 4) : BUG REEL
   corrige -- cette barre (sticky, bas d'ecran) empilait sur mobile 3
   lignes pleine largeur (compteur / "Enregistrer pour moi" / "Envoyer
   au service"), chacune >= 44px de haut : elle finissait par occuper
   une part disproportionnee de l'ecran et masquer la liste d'articles
   au-dessus, en particulier sur un petit evenement (peu d'articles,
   peu de contenu a faire defiler au-dessus de la barre collee au bas
   du conteneur). Restructuree en EXACTEMENT 2 lignes quel que soit
   l'ecran : ligne 1 = compteur + action secondaire discrete cote a
   cote (jamais empiles), ligne 2 = CTA principal pleine largeur.
   Jamais de fonctionnalite masquee -- les deux actions restent
   toujours visibles et atteignables, juste compactees. */
.ma-order-cta-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  bottom: 0;
  background: var(--ma-surface);
  border-top: 1px solid var(--ma-line);
  padding: 10px 4px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  margin-top: 4px;
}

.ma-order-cta-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ma-order-cta-bar__count {
  color: var(--ma-text-soft);
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-order-cta-bar__btn {
  width: 100%;
  min-height: 44px;
  padding: 0 22px;
}

/* "Enregistrer pour moi" (Cas A) : jamais un CTA dore qui rivalise avec
   "Envoyer au service" (Cas B) -- action texte pur, discrete par
   nature, tactile 44px via le padding malgre l'absence de fond/bordure. */
.ma-order-cta-bar__secondary {
  background: transparent;
  border: none;
  color: var(--ma-text-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 12px 4px;
  min-height: 44px;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
}

.ma-order-cta-bar__secondary:hover {
  color: var(--ma-gold-light);
}

/* Desktop/tablette : assez de largeur pour revenir a une seule ligne
   (compteur + action secondaire + CTA principal cote a cote) -- jamais
   un bouton pleine largeur "agrandi" sans raison sur un grand ecran. */
@media (min-width: 481px) {
  .ma-order-cta-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .ma-order-cta-bar__row {
    flex: 1 1 auto;
    min-width: 0;
  }
  .ma-order-cta-bar__btn {
    width: auto;
    flex: 0 0 auto;
  }
}

/* V2.2 -- Lot A : hierarchie de boutons PRIMARY/SECONDARY/TERTIARY-GHOST/
   DANGER. .ma-button reste le PRIMARY (gradient dore, inchange -- reste
   la seule action mise en avant par ecran). Les 3 variantes ci-dessous
   NE remplacent aucune classe existante (aucune migration forcee des
   ecrans deja en place) : elles s'ajoutent en modificateurs optionnels,
   utilisees a partir de ce sprint pour toute action secondaire qui
   n'a plus a rivaliser visuellement avec le CTA principal (Section
   A6 -- "eviter que les boutons secondaires bordes noirs ressemblent a
   de gros blocs"). Meme hauteur/rayon/typo de base que .ma-button afin
   de rester une famille coherente, seul le remplissage change. */
.ma-button--secondary,
.ma-button--ghost,
.ma-button--danger {
  width: 100%;
  border-radius: var(--ma-radius-pill);
  font-weight: 600;
  padding: 12px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transition: transform 120ms ease, border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.ma-button--secondary:active:not(:disabled),
.ma-button--ghost:active:not(:disabled),
.ma-button--danger:active:not(:disabled) {
  transform: scale(0.98);
}

/* SECONDARY : bordure discrete, fond a peine distinct du fond de carte
   (jamais un aplat noir plein qui rivalise avec le PRIMARY dore). */
.ma-button--secondary {
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  color: var(--ma-text-soft);
}

.ma-button--secondary:hover {
  border-color: rgba(226, 194, 118, 0.4);
  color: var(--ma-text);
}

/* TERTIARY-GHOST : aucun fond ni bordure au repos, la discretion
   maximale de la hierarchie -- reserve aux actions les moins
   prioritaires d'un ecran (ex. "Modele de liste"). */
.ma-button--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ma-muted);
}

.ma-button--ghost:hover {
  color: var(--ma-gold-light);
  border-color: var(--ma-line);
}

/* DANGER : reutilise exactement la teinte rouge deja existante
   (.ma-error / .ma-btn-compact--danger), jamais une nouvelle couleur. */
.ma-button--danger {
  background: transparent;
  border: 1px solid rgba(224, 122, 122, 0.4);
  color: #e07a7a;
}

.ma-button--danger:hover {
  background: rgba(224, 122, 122, 0.1);
}

.ma-button--secondary:disabled,
.ma-button--ghost:disabled,
.ma-button--danger:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Taille compacte (barre d'outils, actions groupees) : largeur auto,
   hauteur reduite mais jamais sous 44px de zone tactile (padding
   vertical suffisant a 40px de police 13px + 2x11px = 44px reel). */
.ma-button--sm {
  width: auto;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13px;
}

/* Barre d'actions Import/Export (Lot G1/G4) -- generique, reutilisable
   partout ou plusieurs actions secondaires compactes doivent cohabiter
   sans rivaliser avec le CTA principal de l'ecran. */
.ma-io-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* V2.4 -- Section 5 : ecran Espace (accueil d'evenement). Sous-titre
   discret (utilisateur + role), titres de famille identiques au
   panneau de navigation compact (meme grammaire visuelle), grille de
   grandes cartes tactiles -- jamais un gros bloc dore (le dore reste
   reserve a l'etat actif/CTA, cf. Section 1 de la mission). */
.ma-espace-subtitle {
  text-align: center;
  color: var(--ma-muted);
  font-size: 13px;
  margin: -12px 0 20px;
}

.ma-espace-family {
  margin-bottom: 22px;
}

.ma-espace-family:last-child {
  margin-bottom: 0;
}

.ma-espace-family-title {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ma-muted);
}

.ma-espace-grid {
  display: grid;
  /* 128px minimum : garantit 2 colonnes des 375px de large (marge
     verifiee empiriquement -- 150px produisait 1 seule colonne a cette
     largeur, a 1px pres), evite une longue liste mono-colonne pour les
     roles a nombreux modules (ex. admin). */
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 10px;
}

.ma-espace-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 64px;
  padding: 14px 12px;
  box-sizing: border-box;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  color: var(--ma-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.ma-espace-card:hover {
  border-color: rgba(226, 194, 118, 0.5);
  color: var(--ma-gold-light);
}

.ma-espace-card:active {
  transform: scale(0.98);
}

/* V2.3 -- Section 2 : action contextuelle discrete par ligne (Gestion
   invites). Une seule colonne etroite, jamais une colonne "Supprimer"
   pleine largeur. Le declencheur reste compact visuellement (28px) mais
   sa zone tactile reelle atteint 44px via le padding de la cellule. */
.ma-row-actions-cell {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  position: relative;
}

/* Audit global post-V2.5 (D33, section 10/46) : colonne de selection
   multiple, meme discipline etroite que .ma-row-actions-cell. */
.ma-guest-select-cell {
  width: 1%;
  white-space: nowrap;
}

.ma-guest-select-cell input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ma-gold-mid);
  cursor: pointer;
}

.ma-row-actions {
  position: relative;
  display: inline-block;
}

.ma-row-actions__trigger {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--ma-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.ma-row-actions__trigger:hover,
.ma-row-actions--open .ma-row-actions__trigger {
  background: rgba(226, 194, 118, 0.1);
  color: var(--ma-gold-light);
}

/* V2.3 -- position: fixed (coordonnees calculees en JS a l'ouverture,
   cf. evenement.js) plutot qu'absolute : un menu absolute a l'interieur
   de .ma-table-scroll etait rogne verticalement des qu'il debordait de
   ce conteneur (quirk CSS : overflow-x non-visible force implicitement
   overflow-y a se comporter en auto/clip, meme avec overflow-y:visible
   explicite -- trouve en validation visuelle reelle). fixed echappe
   totalement au clipping de tout ancetre scrollable. */
.ma-row-actions__menu {
  position: fixed;
  min-width: 150px;
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 20;
}

.ma-row-actions--open .ma-row-actions__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ma-row-actions__item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--ma-text-soft);
  font-size: 13.5px;
  padding: 10px 12px;
  min-height: 40px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.ma-row-actions__item:hover {
  background: rgba(226, 194, 118, 0.08);
  color: var(--ma-text);
}

.ma-row-actions__item--danger {
  color: #e07a7a;
}

.ma-row-actions__item--danger:hover {
  background: rgba(224, 122, 122, 0.1);
  color: #e07a7a;
}

/* V2.4 (Section 6) : carte invite mobile -- remplace le tableau
   horizontal sous 768px pour Gestion invites/Accueil/Controle d'acces
   (grammaire partagee, cf. app/src/ui/guestCardList.js -- un seul
   composant DOM, chaque ecran fournit juste son contenu propre a sa
   capability). Le tableau existant reste utilise tel quel a partir de
   768px (Section 6 : "garder une presentation desktop/tablette adaptee
   si pertinent"), bascule pilotee ici en CSS pur, aucune duplication de
   logique de chargement/etat. */
.ma-guest-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.ma-guest-cards {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}

@media (max-width: 767px) {
  .ma-guest-table-wrap {
    display: none;
  }
  .ma-guest-cards {
    display: flex;
  }
}

.ma-guest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: 12px;
  padding: 8px 4px 8px 14px;
}

.ma-guest-card--clickable {
  cursor: pointer;
}

/* Reprend le meme accent que .ma-row-recent (tableau) : mise en avant
   discrete d'une arrivee tres recente, jamais un gros badge clignotant. */
.ma-guest-card--recent {
  border-color: var(--ma-gold-mid);
}

.ma-guest-card__checkbox {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  /* Zone tactile >=44px meme si la case elle-meme reste discrete (18px) --
     audit global post-V2.5, coherent avec le reste du design system. */
  min-width: 32px;
  min-height: 44px;
  justify-content: center;
}

.ma-guest-card__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--ma-gold-mid);
  cursor: pointer;
}

.ma-guest-card__main {
  min-width: 0;
  flex: 1 1 auto;
}

.ma-guest-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ma-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ma-guest-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ma-guest-card__table {
  font-size: 12px;
  font-weight: 600;
  color: var(--ma-gold-light);
}

.ma-guest-card__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* V2.3 -- Section 15 : outils secondaires (Import/Export/Modele) repliés
   derriere un disclosure discret, pour ne plus concurrencer la liste
   principale. Meme esprit que .ma-family-nav (declencheur fin + panneau
   qui apparait), volontairement plus petit/local (pas plein-largeur). */
.ma-tools-disclosure {
  margin-bottom: 14px;
}

.ma-tools-disclosure__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  color: var(--ma-text-soft);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

.ma-tools-disclosure__trigger:hover {
  border-color: rgba(226, 194, 118, 0.35);
  color: var(--ma-text);
}

.ma-tools-disclosure--open .ma-tools-disclosure__trigger {
  border-color: rgba(226, 194, 118, 0.45);
  color: var(--ma-gold-light);
}

.ma-tools-disclosure__icon {
  width: 12px;
  height: 12px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
}

.ma-tools-disclosure__icon::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 2px;
  width: 1.4px;
  height: 5px;
  background: currentColor;
}

.ma-tools-disclosure__panel {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ma-line);
}

.ma-tools-disclosure--open .ma-tools-disclosure__panel {
  display: flex;
}

/* V2.3 -- Section 13 : meme logique de focus dore discret pour les
   controles interactifs non-champ (boutons/liens/tabs/chips) --
   :focus-visible uniquement (jamais au simple clic souris/tactile,
   seulement au clavier), coherent avec le reste de la charte. */
.ma-button:focus-visible,
.ma-button--secondary:focus-visible,
.ma-button--ghost:focus-visible,
.ma-button--danger:focus-visible,
.ma-btn-compact:focus-visible,
.ma-filter-tab:focus-visible,
.ma-location-toggle__btn:focus-visible,
.ma-row-actions__trigger:focus-visible,
.ma-row-actions__item:focus-visible,
.ma-order-cta-bar__secondary:focus-visible,
.ma-tools-disclosure__trigger:focus-visible,
.ma-family-nav__toggle:focus-visible,
.ma-family-group__link:focus-visible,
.ma-back-link:focus-visible,
.ma-prev-next-btn:focus-visible,
.ma-checkbox-row input:focus-visible,
.ma-modal__close:focus-visible {
  outline: 2px solid rgba(226, 194, 118, 0.55);
  outline-offset: 2px;
}

/* MISSION DE REPRISE ET FINALISATION GLOBALE (section 5) : "M.A
   Select" -- remplace un <select> natif a liste moyenne/longue quand
   le picker plein ecran de l'OS est disproportionne pour un champ de
   formulaire secondaire (ex. Objet du message, 12+ options). Panneau
   ancre (jamais plein ecran), clampe au viewport par
   popoverPosition.js. Meme base visuelle qu'un champ de formulaire
   standard (.ma-field select) pour rester previsible. */
.ma-select {
  position: relative;
}

.ma-select__trigger {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--ma-bg);
  border: 1px solid var(--ma-line);
  border-radius: 8px;
  color: var(--ma-text);
  padding: 10px 12px;
  min-height: 44px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ma-select__trigger:focus-visible {
  outline: none;
  border-color: rgba(226, 194, 118, 0.55);
  box-shadow: 0 0 0 3px rgba(226, 194, 118, 0.14);
}

.ma-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ma-select__value--placeholder {
  color: var(--ma-muted);
}

.ma-select__chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 2L6 6.2L10.5 2' stroke='%23b88a3c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.ma-select__menu {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: min(50vh, 320px);
  overflow-y: auto;
  background: var(--ma-surface);
  border: 1px solid var(--ma-line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 60;
}

.ma-select__option {
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  color: var(--ma-text-soft);
  font-size: 14px;
  cursor: pointer;
}

.ma-select__option[aria-selected="true"] {
  color: var(--ma-gold-light);
  font-weight: 600;
}

.ma-select__option--highlighted {
  background: rgba(226, 194, 118, 0.1);
}

/* MISSION MAITRE UNIQUE (sections 16/24) : zone de depot de fichier
   uniforme M.A -- remplace tout <input type="file"> visible nativement
   (bouton "Choisir un fichier" du systeme, en rupture avec la charte).
   L'input reel reste dans le DOM (.ma-sr-only, cf. fileDropZone.js),
   seul cet habillage est visible/cliquable. */
.ma-drop-zone {
  border: 1.5px dashed var(--ma-line);
  border-radius: 10px;
  background: var(--ma-bg);
  transition: border-color 150ms ease, background 150ms ease;
}

.ma-drop-zone--dragover {
  border-color: rgba(226, 194, 118, 0.7);
  background: rgba(226, 194, 118, 0.06);
}

.ma-drop-zone__prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.ma-drop-zone__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(226, 194, 118, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b88a3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M12 4L7 9M12 4l5 5'/%3E%3Cpath d='M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

.ma-drop-zone__text {
  font-size: 13.5px;
  color: var(--ma-text);
  line-height: 1.4;
}

.ma-drop-zone__hint {
  font-size: 12px;
  color: var(--ma-muted);
}

.ma-drop-zone__selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
}

.ma-drop-zone__filename {
  font-size: 13px;
  color: var(--ma-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Section 10 : accessibilite -- aucune information ni fonction ne depend
   d'une animation. Reduit toute transition/animation a une duree quasi
   nulle, sans rien masquer ni deplacer definitivement (le panneau mobile
   reste pilote par .ma-family-nav--open, seule la transition disparait). */
@media (prefers-reduced-motion: reduce) {
  .ma-card,
  .ma-button,
  .ma-badge,
  .ma-family-nav__toggle-icon svg,
  .ma-family-group__link,
  .ma-family-nav__panel,
  .ma-qty-stepper__btn,
  .ma-location-toggle__btn,
  .ma-button--secondary,
  .ma-button--ghost,
  .ma-button--danger,
  .ma-row-actions__trigger,
  .ma-row-actions__menu,
  .ma-row-actions__item,
  .ma-tools-disclosure__trigger,
  .ma-tools-disclosure__panel,
  .ma-order-cta-bar__secondary,
  .ma-espace-card,
  .ma-drop-zone,
  .ma-fab-top,
  .ma-guest-card,
  .ma-select__menu,
  .ma-select__option,
  .ma-family-group__links,
  .ma-tile--lux,
  .ma-tile--interactive,
  .ma-section--lux,
  .ma-button--lux,
  .ma-btn-compact--lux,
  .ma-filter-tab--lux,
  .ma-fade-up-lux {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* ma-fade-up-lux utilise `both` (etat final applique avant meme le
     debut theorique de l'animation) -- avec une duree quasi nulle
     ci-dessus, le contenu reste neanmoins visible immediatement dans
     son etat final (opacity:1), jamais bloque a opacity:0. */
  .ma-fade-up-lux {
    animation-delay: 0ms !important;
  }
}

/* MISSION COMMUNICATION & NOTIFICATIONS (section 12) : mise en evidence
   partagee de l'objet cible d'un deep-link notification (commande,
   incident, demande, etape du deroule) -- une seule regle reutilisee
   partout ou une notification peut renvoyer, jamais une variante par
   ecran. */
.ma-deep-link-highlight {
  outline: 2px solid var(--ma-gold-light, #e2c276);
  outline-offset: 2px;
  background: rgba(226, 194, 118, 0.08);
}

/* MISSION UX/UI GLOBAL V2 (audit terrain, section 43) : sur le Déroulé,
   l'étape ciblée par un deep-link peut déjà porter --current/--next
   (teinte de fond proche, 0.10/0.04) -- cumuler les deux fonds rendait
   le surlignage quasi invisible dans le cas le plus probable (une
   notification de changement d'horaire pointant justement vers l'étape
   "maintenant"). Le contour doré reste alors le seul signal, toujours
   net par lui-meme. */
.ma-ros-full-item--current.ma-deep-link-highlight,
.ma-ros-full-item--next.ma-deep-link-highlight {
  background: rgba(226, 194, 118, 0.1);
}

/* ============================================================
   OPERATIONAL LUXURY V2 -- FOUNDATION (Phase 1, perimetre prototype)
   ============================================================
   Additif uniquement : aucune regle existante ci-dessus n'est
   modifiee ni supprimee. Toute classe ci-dessous porte le suffixe
   "--lux" et s'AJOUTE a une classe deja existante sur le meme
   element (ex. class="ma-stat-tile ma-tile--lux"), jamais a sa
   place -- un ecran qui n'ajoute pas ces classes reste visuellement
   identique a avant ce lot. Applique pour l'instant uniquement a 4
   ecrans prototypes (Mes evenements, Jour J, Situation, Ma mission),
   cf. docs/ui-ux-v2/.

   Direction : "Luxury through control, not decoration" -- le relief
   vient de tokens (ombre/rayon/typo/mouvement) consommes par un
   petit nombre de primitives reutilisables, jamais d'un empilement
   decoratif ecran par ecran. Le dore reste un ACCENT (deja la regle
   du fichier ci-dessus) : aucune des regles suivantes n'entoure une
   tuile d'un cadre dore plein. */

:root {
  /* Rayon -- complete l'echelle existante (--ma-radius-md/-pill). */
  --ma-radius-sm: 8px;
  --ma-radius-lg: 20px;

  /* Ombre / elevation -- toujours teintee chaude (noir + une pointe
     de dore en liseret superieur), jamais un gris generique plat.
     3 niveaux + un niveau modale, pense pour remplacer a terme les 3
     valeurs de menu flottant divergentes releves a l'audit (0.35/
     0.45/0.5) -- non applique aux regles existantes dans ce lot
     (hors perimetre prototype), seulement disponible pour toute
     nouvelle regle. */
  --ma-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 16px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(226, 194, 118, 0.05);
  --ma-shadow-card-elevated: 0 4px 10px rgba(0, 0, 0, 0.3), 0 14px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(226, 194, 118, 0.08);
  --ma-shadow-floating: 0 16px 40px rgba(0, 0, 0, 0.4);
  --ma-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.48);

  /* Mouvement -- duree/courbe partagees par toute micro-interaction
     lux, jamais une valeur choisie au hasard par ecran. Respecte
     prefers-reduced-motion (bloc dedie existant complete plus bas). */
  --ma-motion-fast: 120ms;
  --ma-motion-standard: 200ms;
  --ma-motion-emphasis: 320ms;
  --ma-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ma-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typographie -- formalise l'echelle deja en usage de facto dans ce
     fichier (titres de section 16px, KPI 22px, labels/meta 12px,
     etc.), avec une seule vraie evolution : le KPI passe a 26px pour
     plus de presence (mission section 3/6). AUCUNE police web n'est
     chargee ici : verifie factuellement dans ce depot (grep complet)
     que Playfair Display, Montserrat et Libre Baskerville ne sont
     charges nulle part (ni @font-face, ni lien Google Fonts) -- la
     V2 utilise uniquement la pile systeme depuis l'origine (cf.
     `body { font-family: ... }` en tete de fichier). --ma-font-serif
     reutilise EXACTEMENT la police "premium" deja validee par
     legacy-v1/design-system.css (Georgia/Times New Roman) pour les
     rares moments editoriaux, sans ajouter de dependance reseau --
     jamais une police non chargee, silencieusement invisible. */
  --ma-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ma-font-serif: Georgia, "Times New Roman", serif;
  --ma-fs-display: 28px;
  --ma-fs-page-title: 20px;
  --ma-fs-section-title: 16px;
  --ma-fs-card-title: 15px;
  --ma-fs-body: 14px;
  --ma-fs-label: 12px;
  --ma-fs-meta: 12px;
  --ma-fs-kpi: 26px;
  --ma-fs-button: 15px;
  --ma-ls-label: 0.06em;
}

/* ---- Tuiles operationnelles ("vraie famille de cards", section 6) ----
   Base .ma-tile--lux + modificateurs, composee AVEC les classes deja
   existantes (.ma-stat-tile/.ma-message-item/.ma-event-item/etc.),
   jamais en remplacement -- ces dernieres restent seules responsables
   du fond/bordure/rayon de base, .ma-tile--lux n'ajoute que le
   relief et le mouvement. */
.ma-tile--lux {
  /* Surface elevee (plus claire que --ma-bg, le fond de page) -- donne
     un vrai relief aux tuiles qui reutilisaient jusqu'ici le meme fond
     que la page (.ma-stat-tile/.ma-message-item/.ma-ros-*/.ma-event-item
     : background: var(--ma-bg) ou aucun fond du tout), cause principale
     de l'effet "plat" releve par l'audit. Remplace intentionnellement
     leur fond -- seulement la ou cette classe est explicitement ajoutee. */
  background: var(--ma-surface);
  box-shadow: var(--ma-shadow-card);
  /* Phase 1C (section 1/12) : les classes de base (.ma-stat-tile/
     .ma-message-item/.ma-event-item/.ma-ros-upcoming-item) declarent
     chacune la meme bordure doree a 18% (--ma-line) -- correct comme
     separateur neutre generique du design system, mais ici cumulee
     avec l'ombre de .ma-tile--lux cela sur-signale "le dore est
     partout". Neutralisee au repos ; le dore ne revient qu'au hover
     (etat actif, cf. regle plus bas) -- jamais au repos. */
  border-color: var(--ma-hairline);
  transition: transform var(--ma-motion-standard) var(--ma-ease-standard),
    box-shadow var(--ma-motion-standard) var(--ma-ease-standard),
    border-color var(--ma-motion-standard) var(--ma-ease-standard);
}

.ma-tile--interactive {
  cursor: pointer;
}

@media (hover: hover) {
  .ma-tile--interactive:hover {
    transform: translateY(-2px);
    /* Phase 1C (section 1) : le hover devient une vraie surface
       "elevee" (un cran plus clair que --ma-surface), pas seulement une
       ombre plus forte -- l'etat actif se lit meme sans mouvement
       (capture d'ecran, reduced-motion). */
    background: var(--ma-surface-elevated);
    box-shadow: var(--ma-shadow-card-elevated);
    border-color: rgba(226, 194, 118, 0.32);
  }
}

.ma-tile--interactive:active {
  transform: scale(0.98) translateY(0);
  box-shadow: var(--ma-shadow-card);
}

/* Consolide en un seul endroit la meme intention "selection" repetee
   7 fois avec des opacites divergentes ailleurs dans ce fichier (cf.
   audit) -- reference commune pour toute NOUVELLE selection, sans
   toucher aux regles existantes deja en production. */
.ma-tile--selected {
  background: rgba(226, 194, 118, 0.08);
  border-color: rgba(226, 194, 118, 0.55);
}

.ma-tile--urgent {
  border-left: 3px solid var(--ma-danger);
  background: var(--ma-danger-bg);
}

.ma-tile--kpi {
  text-align: center;
  padding: var(--ma-space-4) var(--ma-space-3);
}

.ma-tile--kpi .ma-stat-value {
  font-size: var(--ma-fs-kpi);
}

/* Phase 1C (section 2/3) : le chiffre (26px, gras, dore) et son label
   restaient trop proches en poids visuel (2px d'ecart seulement,
   aucune casse) -- le label devient une vraie etiquette (majuscules,
   letrage, taille reduite), jamais une seconde donnee. Scope a
   .ma-tile--kpi (Situation) uniquement, jamais la regle de base
   .ma-stat-label partagee par 5 autres ecrans. */
.ma-tile--kpi .ma-stat-label {
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
}

/* ---- Sections operationnelles (Situation) -- transforme chaque
   accordeon en une vraie surface, plutot qu'un simple trait separateur
   (.ma-situation-section existant reste intact, .ma-section--lux
   s'ajoute a cote). Source CSS plus bas dans le fichier = priorite
   naturelle sur margin/padding/border en cas de propriete partagee,
   aucun !important necessaire. */
.ma-section--lux {
  background: var(--ma-surface);
  /* Phase 1C (section 1/12) : hairline neutre plutot que --ma-line
     (dore a 18%) -- le dore reste reserve a l'action active/l'etat
     important/le temps critique/la selection, jamais un separateur
     universel. Le relief vient de la difference de surface + l'ombre,
     pas de la bordure. */
  border: 1px solid var(--ma-hairline);
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-card);
  padding: var(--ma-space-5) var(--ma-space-5) var(--ma-space-4);
  margin-bottom: var(--ma-space-5);
}

.ma-section--lux:last-child {
  margin-bottom: 0;
}

/* ---- Badges -- affinement (poids/letrage/anneau interne discret),
   toujours pose EN PLUS d'une couleur .ma-badge--on/--off/etc deja
   presente, jamais un remplacement de palette semantique. ---- */
.ma-badge--lux {
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* ---- Boutons -- lift/press affines, en plus des regles .ma-button/
   .ma-btn-compact/.ma-filter-tab deja existantes (jamais un remplacement
   de leurs couleurs/formes). ---- */
.ma-button--lux {
  box-shadow: var(--ma-shadow-card-elevated), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform var(--ma-motion-fast) var(--ma-ease-standard),
    box-shadow var(--ma-motion-standard) var(--ma-ease-standard);
}

@media (hover: hover) {
  .ma-button--lux:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--ma-shadow-floating), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

.ma-btn-compact--lux {
  box-shadow: var(--ma-shadow-card);
  transition: transform var(--ma-motion-fast) var(--ma-ease-standard),
    box-shadow var(--ma-motion-standard) var(--ma-ease-standard),
    border-color var(--ma-motion-standard) var(--ma-ease-standard);
}

@media (hover: hover) {
  .ma-btn-compact--lux:not(:disabled):hover {
    border-color: rgba(226, 194, 118, 0.4);
    box-shadow: var(--ma-shadow-card-elevated);
  }
}

.ma-btn-compact--lux:active:not(:disabled) {
  transform: scale(0.96);
}

.ma-filter-tab--lux {
  transition: border-color var(--ma-motion-standard) var(--ma-ease-standard),
    color var(--ma-motion-standard) var(--ma-ease-standard),
    background-color var(--ma-motion-standard) var(--ma-ease-standard),
    transform var(--ma-motion-fast) var(--ma-ease-standard);
}

.ma-filter-tab--lux:active {
  transform: scale(0.96);
}

/* ---- Etiquette de categorie (Ma mission) -- hierarchie label reelle
   au lieu d'un texte simplement plus petit/muet (audit section I,
   mission section 3 : "labels" nommes explicitement comme cible
   d'amelioration typographique). ---- */
.ma-label--lux {
  text-transform: uppercase;
  letter-spacing: var(--ma-ls-label);
  font-weight: 700;
  font-size: 11px;
  color: var(--ma-muted);
}

/* ---- Entree progressive (apparition card/tile) -- rapide, discrete,
   jamais un rebond/scale exagere, jamais bloquante (section 8). ---- */
@keyframes ma-fade-up-lux {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ma-fade-up-lux {
  animation: ma-fade-up-lux var(--ma-motion-emphasis) var(--ma-ease-emphasis) both;
}

/* Decalage discret pour une liste (ex. Mes evenements, Deroule) --
   plafonne a 6 elements decales : au-dela, la difference devient
   imperceptible et retarderait inutilement la lecture des lignes
   suivantes (terrain = rapidite avant tout, section 9). */
.ma-fade-up-lux:nth-child(2) { animation-delay: 30ms; }
.ma-fade-up-lux:nth-child(3) { animation-delay: 60ms; }
.ma-fade-up-lux:nth-child(4) { animation-delay: 90ms; }
.ma-fade-up-lux:nth-child(5) { animation-delay: 120ms; }
.ma-fade-up-lux:nth-child(n + 6) { animation-delay: 150ms; }

/* ============================================================
   OPERATIONAL LUXURY V2 -- PHASE 1B (refinement moodboard reel)
   ============================================================
   Additif uniquement, meme discipline que le bloc Phase 1 ci-dessus :
   toute classe porte le suffixe "--lux", s'ajoute a une classe/structure
   deja existante, jamais un remplacement. Toujours scope aux 4 memes
   ecrans prototypes. Principes retenus du moodboard reel documente dans
   docs/ui-ux-v2/UI_UX_V2_REFERENCE_ANALYSIS.md : badge de date compact,
   ligne de liste composee, surface unique a sous-blocs separes, rail de
   timeline minimaliste, grille desktop 2 colonnes -- jamais une couleur
   ni un asset image emprunte aux references. */

/* ---- Conteneur desktop -- ecran par ecran, jamais la classe .ma-card--wide
   partagee par ~25 autres ecrans hors perimetre de ce chantier. Seuil
   1280px (au-dela du seuil existant 1024px/960px) : un vrai grand
   ecran, pas un simple laptop -- evite de re-litiger la largeur deja
   choisie pour les autres ecrans. ---- */
@media (min-width: 1280px) {
  .ma-card--wide-lux {
    max-width: 1120px;
  }
}

/* ---- Mes evenements -- vraie card evenement (section 4) ----
   Hierarchie : badge date > nom+chevron > type/date lisible > role+statut.
   Le badge de date est purement textuel (jour/mois extraits de
   event.eventDate, deja au format ISO) -- jamais une image/photo
   evenementielle inventee (aucun asset metier reel disponible). */
.ma-event-card--lux {
  display: flex;
  align-items: flex-start;
  gap: var(--ma-space-4);
}

.ma-event-date-badge--lux {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border-radius: var(--ma-radius-sm);
  /* Phase 1C (section 1/12) : "puits" en sous-surface plutot qu'un
     encadre dore -- une bordure n'apportait rien ici, la difference de
     surface suffit a distinguer le repere du reste de la carte. */
  background: var(--ma-surface-sunken);
  border: none;
}

.ma-event-date-badge__day--lux {
  font-size: 17px;
  font-weight: 700;
  color: var(--ma-gold-light);
  line-height: 1.1;
}

.ma-event-date-badge__month--lux {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ma-muted);
}

.ma-event-card-main--lux {
  flex: 1 1 auto;
  min-width: 0;
}

.ma-event-card-head--lux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ma-space-2);
}

.ma-event-card-head--lux .ma-event-name {
  /* Phase 1C (section 4, stress test titre long) : correctif reel --
     un enfant flex garde min-width:auto par defaut, ce qui empechait
     l'ellipsis de jamais s'appliquer (le nom debordait/poussait le
     chevron au lieu d'etre tronque). flex+min-width:0 laisse enfin le
     texte se contracter avant de tronquer. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ma-fs-card-title);
  font-weight: 700;
}

.ma-event-chevron--lux {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  color: var(--ma-muted);
}

.ma-event-card-meta--lux {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ma-muted);
}

.ma-event-card-foot--lux {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ma-space-2);
  flex-wrap: wrap;
}

.ma-event-role-chip--lux {
  display: inline-block;
  font-size: 11.5px;
  color: var(--ma-text-soft);
  background: var(--ma-surface-sunken);
  border: none;
  border-radius: var(--ma-radius-pill);
  padding: 2px 10px;
  /* Phase 1C (section 4, stress test role long) : sans ceci, un role
     tres long forcait le pied de carte a deborder horizontalement sur
     mobile (largeur intrinseque du chip jamais contrainte par le
     parent flex). Tronque proprement au lieu de casser le layout. */
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* ---- Jour J -- differencie une action metier (Marquer reel maintenant,
   Enregistrer) d'un simple filtre (section 5) : poids de texte + teinte
   de bordure/fond discrete, jamais un aplat dore plein qui rivaliserait
   avec .ma-button (CTA principal de l'ecran). ---- */
.ma-btn-compact--primary-lux {
  font-weight: 600;
  border-color: rgba(226, 194, 118, 0.35);
  background: rgba(226, 194, 118, 0.06);
  color: var(--ma-gold-light);
}

/* ---- Jour J -- rail de timeline minimaliste pour "A venir" (section 5) ----
   Jamais un calendrier construit -- uniquement une ligne + des points,
   discrets, pour narrer la succession Maintenant -> Ensuite -> A venir
   deja portee par les 3 blocs existants. */
.ma-ros-timeline--lux {
  position: relative;
  padding-left: 16px;
}

.ma-ros-timeline--lux::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  /* Phase 2 Lot 2 : hairline neutre plutot que --ma-line (dore a 18%) --
     meme correctif de fond que Phase 1C, applique ici car le rail est
     desormais reutilise par Journal (section suivante), pas seulement
     Jour J. */
  background: var(--ma-hairline);
}

/* Phase 2 Lot 2 (section 7, Journal) : generalise le rail a tout
   .ma-tile--lux enfant, pas seulement .ma-ros-upcoming-item -- rend le
   pattern reellement reutilisable (Journal l'utilise sur des
   .ma-message-item, jamais un deuxieme rail redefini). */
.ma-ros-timeline--lux .ma-ros-upcoming-item,
.ma-ros-timeline--lux .ma-tile--lux {
  position: relative;
}

.ma-ros-timeline--lux .ma-ros-upcoming-item::before,
.ma-ros-timeline--lux .ma-tile--lux::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ma-gold-light);
  box-shadow: 0 0 0 3px var(--ma-surface);
}

/* ---- Situation -- grille desktop 2 colonnes (section 6/9) ----
   Les 10 accordeons restent des <details> independants (aucun changement
   de comportement/architecture) -- seule leur disposition change au-dela
   de 1024px, pour ne plus empiler des blocs courts sur toute la hauteur
   d'un grand ecran alors que la largeur est disponible. align-items:start
   + grid-auto-rows:min-content evitent tout etirement artificiel d'un
   bloc court a la hauteur de son voisin. */
@media (min-width: 1024px) {
  .ma-situation-grid--lux {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
    align-items: start;
    gap: var(--ma-space-5);
  }

  .ma-situation-grid--lux .ma-section--lux {
    margin-bottom: 0;
  }
}

/* ---- Ma mission -- Mission Card unique (section 7, priorite forte) ----
   Remplace N tuiles juxtaposees (Fonction/Zone/Horaires/Referent, chacune
   sa propre surface/ombre) par UNE surface avec des lignes internes
   separees par un hairline discret -- jamais un nouveau cadre dore par
   ligne. Mobile : empilement vertical (lecture rapide). Desktop (>=1024px) :
   libelle en colonne fixe + valeur alignee a droite, plus horizontal,
   sans jamais transformer la lecture en formulaire (aucun champ, aucune
   bordure de saisie). */
.ma-mission-card--lux {
  background: var(--ma-surface);
  /* Phase 1C : le commentaire ci-dessus annoncait deja "jamais un
     cadre dore" -- --ma-line (dore a 18%) etait pourtant utilise par
     erreur en Phase 1B. Corrige vers le hairline neutre reellement
     voulu. */
  border: 1px solid var(--ma-hairline);
  border-radius: var(--ma-radius-lg);
  box-shadow: var(--ma-shadow-card);
  overflow: hidden;
}

.ma-mission-card__row--lux {
  padding: var(--ma-space-4) var(--ma-space-5);
  border-bottom: 1px solid var(--ma-hairline);
}

.ma-mission-card__row--lux:last-child {
  border-bottom: none;
}

.ma-mission-card__row--lux .ma-item-row-category {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .ma-mission-card__row--lux {
    display: flex;
    align-items: baseline;
    gap: var(--ma-space-4);
  }

  .ma-mission-card__row--lux .ma-item-row-category {
    flex: 0 0 220px;
  }

  .ma-mission-card__row--lux .ma-message-text {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* P0 AUTH/FORM POLISH — navigateur autofill
   L'autofill reste autorisé (autocomplete/password manager inchangés),
   mais son fond natif bleu doit respecter la surface noire M.A. Le texte
   et le caret restent lisibles. */
.ma-field input:-webkit-autofill,
.ma-field input:-webkit-autofill:hover,
.ma-field input:-webkit-autofill:focus,
.ma-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ma-text);
  caret-color: var(--ma-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ma-bg) inset;
  box-shadow: 0 0 0 1000px var(--ma-bg) inset;
  transition: background-color 99999s ease-out;
}

/* ============================================================
   OPERATIONAL LUXURY V2 -- PHASE 1C (polish final, memes 4 ecrans)
   ============================================================
   Additif + quelques edits minimaux des regles Phase 1B ci-dessus
   (jamais des regles de base partagees par d'autres ecrans). Objectif
   unique : profondeur/hierarchie/densite/etats interactifs/robustesse
   donnees reelles -- aucune nouvelle architecture, aucun nouvel ecran. */

:root {
  /* Hierarchie de surface complementaire a --ma-bg/--ma-surface
     (section 1) : un cran au-dessus pour un relief "actif/hover" sans
     recourir au dore, un cran en-dessous pour un "puits" discret
     (badge de date, chip de role) -- jamais une nouvelle palette de
     couleur, seulement 2 nuances de gris supplementaires. */
  --ma-surface-elevated: #1d1d20;
  --ma-surface-sunken: #101012;

  /* Hairline neutre (section 1/12) : separateur qui n'est PAS le dore
     a 18% (--ma-line, reserve au design system de base) -- utilise
     uniquement par les composants --lux ci-dessus, jamais par une
     regle de base partagee avec d'autres ecrans. Le dore reste reserve
     a l'action active/l'information prioritaire/le temps critique/la
     selection (cf. .ma-tile--interactive:hover, .ma-tile--selected,
     .ma-ros-now/.ma-ros-next, .ma-filter-tab--active, .ma-ros-tag). */
  --ma-hairline: rgba(255, 255, 255, 0.08);
}

/* ---- Situation -- meme neutralisation de bordure que .ma-tile--lux,
   scopee a la barre de progression a l'interieur d'une section lux
   (jamais .ma-progress-track de base, partagee avec Coordination). ---- */
.ma-section--lux .ma-progress-track {
  border-color: var(--ma-hairline);
}

/* ---- Accessibilite (section 8/10) : Mes evenements rend chaque carte
   focusable au clavier (role=button + tabindex, cf. mesEvenements.js)
   -- l'anneau de focus doit rester visible sur la surface elevee
   .ma-tile--lux, jamais uniquement une bordure doree fine facilement
   manquee. Meme anneau que les boutons/onglets existants
   (.ma-btn-compact:focus-visible), juste applique ici a une tuile. */
.ma-tile--interactive:focus-visible {
  outline: 2px solid var(--ma-gold-light);
  outline-offset: 2px;
}

/* ============================================================
   OPERATIONAL LUXURY V2 -- PHASE 2, LOT 1 (terrain critique)
   ============================================================
   Additif uniquement, meme discipline que les blocs precedents :
   reutilise a 100% les primitives gelees en Phase 1C (.ma-tile--lux/
   --kpi/--interactive, .ma-section--lux, .ma-badge--lux,
   .ma-btn-compact--lux, .ma-filter-tab--lux, --ma-hairline,
   --ma-shadow-floating) -- seuls 3 nouveaux modificateurs generiques
   sont introduits ici, documentes et reutilisables partout ou le
   meme besoin se represente (Lot 2+). Applique a Accueil, Controle
   d'acces, Service en salle, Supervision Service en salle,
   Coordination. */

/* ---- "Dense List V2" (section 4 du cadrage Lot 1) -- table dense
   desktop utilisee par Accueil/Controle d'acces/Coordination.
   .ma-table est une classe de base partagee par ~8 autres ecrans hors
   perimetre de ce lot (Equipe, Import, Organisation...) -- jamais
   modifiee directement. .ma-table--lux ne change que la couleur de
   hairline (dore a 18% -> neutre) et differencie legerement l'entete,
   jamais la structure. ---- */
.ma-table--lux th,
.ma-table--lux td {
  border-color: var(--ma-hairline);
}

.ma-table--lux thead th {
  background: var(--ma-surface-sunken);
}

/* ---- Barre de recherche sticky (Accueil/Controle d'acces/
   Coordination/Service) -- separateur neutre discret quand elle reste
   collee en haut pendant le defilement de la liste, jamais une
   bordure doree. ---- */
.ma-search-bar--lux {
  border-bottom: 1px solid var(--ma-hairline);
}

/* ---- Barre d'action flottante (Service en salle, "Envoyer au
   service") -- c'est litteralement l'element flottant pour lequel
   --ma-shadow-floating a ete cree en Phase 1C (jusqu'ici seulement
   consomme par le hover de .ma-button--lux) : premiere vraie
   utilisation en repos plutot qu'en etat transitoire. Hairline neutre
   au lieu du --ma-line dore herite de la regle de base. ---- */
.ma-order-cta-bar--lux {
  box-shadow: var(--ma-shadow-floating);
  border-top-color: var(--ma-hairline);
}

/* ---- Segmented control (Table/Zone/Aucun, Service en salle) -- meme
   traitement press/transition que .ma-filter-tab--lux, jamais un
   remplacement de couleur/forme. ---- */
.ma-location-toggle__btn--lux {
  transition: border-color var(--ma-motion-standard) var(--ma-ease-standard),
    color var(--ma-motion-standard) var(--ma-ease-standard),
    background-color var(--ma-motion-standard) var(--ma-ease-standard),
    transform var(--ma-motion-fast) var(--ma-ease-standard);
}

.ma-location-toggle__btn--lux:active {
  transform: scale(0.97);
}

/* ============================================================
   OPERATIONAL LUXURY V2 -- PHASE 2, LOT 2 (dense screens)
   ============================================================
   Additif uniquement. Applique a Gestion des invites, Equipe, Tables,
   Demandes, Incidents, Journal, Invitations. Reutilise integralement
   .ma-tile--lux/--interactive/--urgent, .ma-badge--lux, .ma-table--lux,
   .ma-btn-compact--lux/.ma-button--lux (deja generiques) -- 2 nouveaux
   modificateurs seulement, tous deux directement demandes par le
   cadrage ("name prominence", menu d'actions de ligne). */

/* ---- "Dense List V2" (section 3, name prominence) -- premiere/nom
   d'un invite ou libelle d'un membre doivent se distinguer des colonnes
   secondaires (table/role/statut) au meme titre qu'un titre de card,
   jamais un texte de meme poids que le reste de la ligne. Scope aux
   cellules explicitement marquees -- jamais .ma-table td de base,
   partagee par ~8 ecrans. ---- */
.ma-table-cell-name--lux {
  font-weight: 600;
  color: var(--ma-text);
}

/* ---- Menu d'actions de ligne ("⋯", Gestion des invites) -- meme
   neutralisation de bordure + meme ombre flottante que le reste de la
   foundation (remplace l'ombre codee en dur 0 16px 32px rgba(0,0,0,.45)
   posee en Phase V2.3, jamais coherente avec --ma-shadow-floating). ---- */
.ma-row-actions__menu--lux {
  border-color: var(--ma-hairline);
  box-shadow: var(--ma-shadow-floating);
}

/* ---- Tables -- regression reelle trouvee en revue : .ma-tile--lux
   neutralise border-color au repos, ce qui ecraserait silencieusement
   les etats semantiques "complete" (ambre) / "surcapacite" (rouge) de
   .ma-table-tile--full/--overflow (meme specificite, .ma-tile--lux
   arrive plus tard dans le fichier). Restaure explicitement la couleur
   semantique quand les deux classes coexistent -- l'etat metier reste
   toujours visuellement prioritaire sur le neutre esthetique. ---- */
.ma-table-tile--full.ma-tile--lux {
  border-color: var(--ma-warning);
}

.ma-table-tile--overflow.ma-tile--lux {
  border-color: var(--ma-danger);
}

@media (hover: hover) {
  .ma-table-tile--full.ma-tile--interactive:hover {
    border-color: var(--ma-warning);
  }

  .ma-table-tile--overflow.ma-tile--interactive:hover {
    border-color: var(--ma-danger);
  }
}

/* ============================================================
   OPERATIONAL LUXURY V2 -- PHASE 2 LOT 5 (Ecran public V2)
   ============================================================
   Connexion / Inscription / Mot de passe oublie / Invitation / /q/ --
   memes primitives que le reste de l'application (.ma-card, .ma-badge,
   .ma-button, .ma-tile--lux), jamais un second systeme visuel : ajoute
   seulement la meme profondeur de surface (hairline + ombre) deja
   utilisee par .ma-tile--lux/.ma-section--lux, et une largeur desktop
   moderement elargie pour que ces ecrans ne se sentent plus comme un
   petit formulaire flottant dans un grand vide -- sans devenir des
   ecrans operationnels pleine largeur (ce sont des formulaires courts
   ou une fiche courte, jamais une liste). */
.ma-card--auth-lux {
  border-color: var(--ma-hairline);
  box-shadow: var(--ma-shadow-card-elevated);
}

@media (min-width: 640px) {
  .ma-card--auth-lux {
    max-width: 440px;
  }
}