/* css/espace-client.css — le style de l espace pro, pour les pages HORS espace pro.
   15/10/2026, demande de Helmi : « refais la page de connexion style espace
   pro… continue les autres modules aussi ».

   POUR QUI. La page de connexion, les pages de l equipe (feuille de route de
   l assistant, fiche collaborateur) et celles des couples (espace maries,
   paiement, signature du contrat, fiche technique, avis). Elles ne chargent
   NI admin.css NI le socle de l espace pro : ces feuilles portent la mise en
   page du tableau de bord (barre laterale, regles globales des champs en
   !important) qui n a rien a faire chez un couple.

   CE QUI EST PARTAGE. Les MEMES jetons de couleur que l espace pro (--dw-*,
   valeurs recopiees d admin.css et du socle), le jour comme la nuit, et une
   poignee de composants prefixes « ec- » (bandeau, page, carte, bouton,
   champ, note, etiquette, montant, ligne). Garde : scripts/espace-client.test.mjs
   verifie que chaque jeton vaut exactement celui de l espace pro, et mesure
   les contrastes dans les deux themes.

   LE FOND ET LE THEME — 15/10/2026, Helmi : « n oublie le background ou le
   theme jour ou nuit au choix dans tout avec le bleu degrade complexe ».
   Ces pages gardent l identite du site public : la NAPPE de css/style.css
   (le degrade bleu a bandes, ses deux lueurs d or, le grain, la parallaxe de
   js/fond.js), creme le jour. La nuit est le defaut, le jour un choix, et
   c est LE MEME choix que drimevents.com (cle drim_theme, posee dans le
   <head> de chaque page ; bouton dans le bandeau : js/espace-client.js).
   Le jour garde les jetons de l espace pro ; la nuit passe au bleu du site.
   La nappe porte un voile bleu nuit : sans lui, le pic clair du degrade
   (#3F92F2) ferait tomber un texte clair sous 3:1. La garde le mesure.

   Les cinq formes bannies de DESIGN.md le restent ici. L or sert a l argent,
   a l etat actif et a UNE action principale par ecran. */

/* ── Les jetons du jour (identiques a admin.css + socle) ─────────────────── */
:root {
  --dw-sol: #F6F3ED; --dw-surface: #FFFFFF; --dw-surface-2: #FCFAF6; --dw-surface-3: #F1EDE4;
  --dw-trait: #E7E1D6; --dw-trait-fort: #D3CABA;
  --dw-encre: #171310; --dw-encre-2: #4A423A; --dw-encre-3: #786F64; --dw-encre-4: #9C9387;
  --dw-or: #96751A; --dw-or-fonce: #7A5E14; --dw-or-vif: #D4AF37; --dw-or-voile: #FBF3DC;
  --dw-nuit: #14110F; --dw-nuit-2: #211C18; --dw-nuit-trait: #322A24; --dw-nuit-texte: #EFE9DE; --dw-nuit-texte-2: #A79C8C;
  --dw-ok: #1F7A4D; --dw-ok-voile: #E9F5EE;
  --dw-attention: #A8630A; --dw-attention-voile: #FCF1E1;
  --dw-alerte: #A82820; --dw-alerte-voile: #FAEAE8;
  --dw-info: #2A5C86; --dw-info-voile: #EAF1F7;
  --dw-ok-vif: #00875A; --dw-ok-sur: #FFFFFF;
  --dw-attention-vif: #B34700; --dw-attention-sur: #FFF4EC;
  --dw-alerte-vif: #C11B33; --dw-alerte-sur: #FFEEF0;
  --dw-info-vif: #1263C4; --dw-info-sur: #EDF5FF;
  --dw-attention-texte: #8F5406;
  --dw-sur-encre: #FFFFFF; --dw-sur-encre-2: #E8E2D6;
  --dw-or-texte: #8A6200;
  --dw-r-s: 8px; --dw-r-m: 12px; --dw-r-l: 18px;
  --dw-ombre-1: 0 1px 2px rgba(35,26,15,0.05), 0 0 0 1px rgba(35,26,15,0.04);
  --dw-ombre-2: 0 6px 20px rgba(35,26,15,0.08), 0 0 0 1px rgba(35,26,15,0.04);
  --dw-ombre-3: 0 24px 60px rgba(35,26,15,0.16), 0 6px 14px rgba(35,26,15,0.07);
  --dw-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --dw-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --dw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* La nappe du jour : celle de css/style.css en theme clair, a l identique. */
  --ec-nappe: linear-gradient(174deg,
    #FDFBF6 0%, #F8F3EA 18%, #F1EADC 40%, #FAF6ED 60%, #EFE7D7 82%, #FCF9F2 100%);
  --ec-nappe-lueur: radial-gradient(60% 38% at 80% 4%, rgba(212, 175, 55, 0.16), transparent 68%);
  --ec-voile: transparent;
  --ec-grain: 0.22;
  /* L or metallise des grands textes : celui de css/style.css en theme clair
     (fonce, lisible sur creme), a l identique. */
  --ec-or-metal: linear-gradient(115deg,
    #6B5214 0%, #96751F 14%, #C9A227 26%, #A8842A 38%, #74591A 50%,
    #B08E27 62%, #D4AF37 72%, #96751F 86%, #6B5214 100%);
}

/* ── Les jetons de la nuit : le bleu du site ────────────────────────────────
   Memes noms que l espace pro, autres valeurs : des cartes bleu nuit sur la
   nappe, l or pour l argent. Chaque paire qui porte du sens est mesuree. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --dw-sol: #071634; --dw-surface: #0D1C3F; --dw-surface-2: #12244C; --dw-surface-3: #1A2F5E;
  --dw-trait: #24396B; --dw-trait-fort: #34508A;
  --dw-encre: #F3EFE7; --dw-encre-2: #C3CCDD; --dw-encre-3: #8E9BB8; --dw-encre-4: #6C7A99;
  --dw-or: #E3C25E; --dw-or-fonce: #D4AF37; --dw-or-vif: #D4AF37; --dw-or-voile: #2B323E;
  --dw-nuit: #040B1E; --dw-nuit-2: #0A1530; --dw-nuit-trait: #1B2A4D;
  --dw-ok: #72CF9C; --dw-ok-voile: #11302E;
  --dw-attention: #EEA95A; --dw-attention-voile: #33291F;
  --dw-alerte: #F58A80; --dw-alerte-voile: #361C2A;
  --dw-info: #8BBCEC; --dw-info-voile: #132A52;
  --dw-ok-vif: #3DB883; --dw-ok-sur: #061029;
  --dw-attention-vif: #E8853A; --dw-attention-sur: #061029;
  --dw-alerte-vif: #EE5A5F; --dw-alerte-sur: #061029;
  --dw-info-vif: #5B9BF0; --dw-info-sur: #061029;
  --dw-attention-texte: #EEA95A;
  --dw-ombre-1: 0 0 0 1px rgba(196, 214, 255, 0.08);
  --dw-ombre-2: 0 10px 28px rgba(1, 6, 20, 0.45), 0 0 0 1px rgba(196, 214, 255, 0.08);
  --dw-ombre-3: 0 24px 60px rgba(1, 6, 20, 0.6), 0 0 0 1px rgba(196, 214, 255, 0.10);
  --dw-sur-encre: #0B1530; --dw-sur-encre-2: #3A4766;
  --dw-or-texte: #E3C25E;
  /* La nappe de la nuit : celle de css/style.css (:root), a l identique. */
  --ec-nappe: linear-gradient(174deg,
    #071634 0%, #0E2A63 11%, #17408F 20%, #17408F 29%, #0F2A5E 38%,
    #081733 48%, #061029 55%, #14459E 68%, #2570DC 79%, #3F92F2 87%,
    #133061 95%, #08152F 100%);
  --ec-nappe-lueur:
    radial-gradient(64% 40% at 24% 2%, rgba(212, 175, 55, 0.20), transparent 70%),
    radial-gradient(52% 34% at 84% 88%, rgba(201, 162, 39, 0.13), transparent 66%);
  --ec-voile: rgba(6, 16, 41, 0.5);
  --ec-grain: 0.34;
  /* L or metallise de la nuit : celui de css/style.css (:root), a l identique. */
  --ec-or-metal: linear-gradient(115deg,
    #8A6A20 0%, #C9A227 14%, #F1DE94 26%, #D9B841 38%, #A8842A 50%,
    #E4C662 62%, #F6E9AE 72%, #C9A227 86%, #8F6E20 100%);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ec {
  margin: 0; min-height: 100vh; background: var(--dw-sol); color: var(--dw-encre);
  font: 400 16px/1.55 var(--dw-sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* La nappe : un calque fixe derriere la page, comme sur le site. Il glisse
   d un tiers d ecran du haut au bas du document (js/fond.js pose --fond-y ;
   rien ne bouge si le visiteur a demande moins d animations). Le voile est
   AU-DESSUS des lueurs : une lueur d or sur le pic clair eclaircirait encore. */
body.ec::before {
  content: ""; position: fixed; top: -20vh; left: -3vw; right: -3vw; bottom: -20vh; z-index: -2; pointer-events: none;
  background: linear-gradient(var(--ec-voile), var(--ec-voile)), var(--ec-nappe-lueur), var(--ec-nappe);
  transform: translate3d(0, var(--fond-y, 0px), 0); will-change: transform;
}
/* Le grain : sans lui, un degrade aussi etendu fait des bandes visibles. */
body.ec::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--ec-grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
/* Les regles de base sont sous :where() : une classe de composant doit
   toujours l emporter. Ecrit « .ec a », le lien battait .ec-btn--or : un
   <a class="ec-btn ec-btn--or"> prenait la couleur du texte (1,9:1 la nuit)
   et un <a class="ec-btn--plein"> la couleur de son propre fond. */
:where(.ec) a { color: inherit; text-underline-offset: 3px; }
.ec a:focus-visible, .ec button:focus-visible, .ec summary:focus-visible { outline: 3px solid var(--dw-info-vif); outline-offset: 2px; border-radius: 6px; }
:where(.ec) :is(h1, h2, h3) { margin: 0; text-wrap: balance; }
:where(.ec) img { max-width: 100%; }
/* Les icones du sprite (assets/icones.svg). */
html svg:where(.ic) { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; pointer-events: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Le bandeau : la meme nuit que la barre de l espace pro, le vrai logo ── */
.ec-bandeau {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--dw-nuit); color: var(--dw-nuit-texte); box-shadow: 0 1px 0 var(--dw-nuit-trait);
}
.ec-bandeau__logo { display: block; flex: none; }
.ec-bandeau__logo img { display: block; height: 28px; width: auto; }
.ec-bandeau__titre { min-width: 0; margin: 0 0 0 auto; font: 600 18px/1.2 var(--dw-serif); color: var(--dw-nuit-texte); text-align: right; }

/* ── Le bouton Jour / Nuit (pose par js/espace-client.js) ────────────────
   Il vit sur le bandeau, sombre dans les deux themes : ses couleurs sont
   celles du bandeau, pas celles du theme. Sur telephone, l icone seule (le
   nom complet reste dit au lecteur d ecran). */
.ec-theme {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; margin-left: 4px; padding: 0 12px;
  border: 1px solid var(--dw-nuit-texte-2); border-radius: 999px; background: transparent;
  color: var(--dw-nuit-texte); font: 600 13px/1 var(--dw-sans); cursor: pointer;
}
.ec-theme:hover { background: var(--dw-nuit-2); }
.ec-theme .ic { width: 18px; height: 18px; }
@media (max-width: 480px) {
  .ec-theme { padding: 0; }
  .ec-theme__mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── La page ────────────────────────────────────────────────────────────── */
.ec-page { max-width: 760px; margin: 0 auto; padding: 24px 16px calc(48px + env(safe-area-inset-bottom)); }
.ec-page--large { max-width: 1040px; }
.ec-entete { margin: 8px 0 20px; }
.ec-entete h1 { font: 700 clamp(24px, 4.6vw, 30px)/1.2 var(--dw-sans); letter-spacing: -0.01em; }
.ec-entete p { margin: 6px 0 0; color: var(--dw-encre-2); }
.ec-pied { max-width: 760px; margin: 0 auto; padding: 8px 16px calc(32px + env(safe-area-inset-bottom)); font-size: 13px; line-height: 1.5; color: var(--dw-encre-2); text-align: center; }

/* ── La carte : on separe par la lumiere, pas par un trait ───────────────── */
.ec-carte { margin: 0 0 16px; padding: 20px; background: var(--dw-surface); border-radius: var(--dw-r-l); box-shadow: var(--dw-ombre-2); }
.ec-carte > h2, .ec-t2 { margin: 0 0 12px; font: 700 18px/1.3 var(--dw-sans); }
.ec-carte--releve { background: var(--dw-surface-2); box-shadow: var(--dw-ombre-1); }
.ec-titre-marque { font-family: var(--dw-serif); font-weight: 600; }

/* ── Les boutons : 48 px, l encre pour l action, l or pour LA principale ─── */
.ec-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--dw-encre-3); border-radius: var(--dw-r-m); background: var(--dw-surface); color: var(--dw-encre);
  font: 700 15px/1.2 var(--dw-sans); text-decoration: none; cursor: pointer;
  transition: background .15s var(--dw-ease), transform .12s var(--dw-ease), filter .15s var(--dw-ease);
}
.ec-btn:hover { background: var(--dw-surface-3); }
.ec-btn:active { transform: scale(.98); }
.ec-btn[disabled], .ec-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
/* hidden cache, quel que soit le composant : sans cette regle, une
   .ec-etiquette ou une .ec-note marquee hidden restait affichee (vu sur la
   signature : l avertissement ESSAI sur tous les contrats). */
:where(.ec) [hidden] { display: none !important; }
.ec-btn--plein { background: var(--dw-encre); border-color: var(--dw-encre); color: var(--dw-sur-encre); }
.ec-btn--plein:hover { background: var(--dw-encre-2); border-color: var(--dw-encre-2); }
.ec-btn--or { background: var(--dw-or-vif); border-color: var(--dw-or-vif); color: var(--dw-nuit); }
.ec-btn--or:hover { background: var(--dw-or-vif); filter: brightness(0.94); }
.ec-btn--bloc { display: flex; width: 100%; }
.ec-btn .ic, .ec-btn svg { width: 18px; height: 18px; flex: none; }
.ec-lien { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 14px; color: var(--dw-encre-2); text-decoration: underline; }

/* ── Les champs : 16 px (sinon l iPhone zoome), 48 px, contour lisible ───── */
.ec-label { display: block; margin: 16px 0 6px; font: 700 12px/1.3 var(--dw-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dw-encre-2); }
.ec-champ {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--dw-encre-3); border-radius: var(--dw-r-m);
  background: var(--dw-surface); color: var(--dw-encre); font: 400 16px/1.4 var(--dw-sans);
}
textarea.ec-champ { min-height: 120px; resize: vertical; }
.ec-champ::placeholder { color: var(--dw-encre-3); opacity: 1; }
.ec-champ:focus { outline: 3px solid var(--dw-info-vif); outline-offset: 1px; border-color: var(--dw-encre-2); }
.ec-champ[aria-invalid="true"] { border-color: var(--dw-alerte-vif); }
.ec-aide { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--dw-encre-2); }

/* ── Les notes : un etat se dit par un mot et une couleur de TEXTE ───────── */
.ec-note { margin: 12px 0; font-size: 14px; line-height: 1.5; color: var(--dw-encre-2); }
.ec-note:empty { display: none; }
.ec-note--att { color: var(--dw-attention-texte); font-weight: 600; }
.ec-note--alerte { color: var(--dw-alerte); font-weight: 600; }
.ec-note--ok { color: var(--dw-ok); font-weight: 600; }

/* ── Les etiquettes : une forme pleine et un mot ─────────────────────────── */
.ec-etiquette {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px; border-radius: 7px;
  font: 700 12px/1.3 var(--dw-sans); white-space: nowrap; background: var(--dw-encre-2); color: var(--dw-sur-encre);
}
.ec-etiquette--ok { background: var(--dw-ok-vif); color: var(--dw-ok-sur); }
.ec-etiquette--att { background: var(--dw-attention-vif); color: var(--dw-attention-sur); }
.ec-etiquette--alerte { background: var(--dw-alerte-vif); color: var(--dw-alerte-sur); }
.ec-etiquette--info { background: var(--dw-info-vif); color: var(--dw-info-sur); }
.ec-etiquette--or { background: var(--dw-or-vif); color: var(--dw-nuit); }

/* ── L or metallise, pour un NOM ou un grand titre (jamais un bouton) ─────
   16/10/2026, Helmi : les prenoms du couple en or anime. Le degrade du site
   est peint dans les lettres, et un reflet les traverse lentement. */
.ec-or {
  background-image: var(--ec-or-metal); background-size: 220% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: ec-or-reflet 9s var(--dw-ease) infinite alternate;
}
@keyframes ec-or-reflet { to { background-position: 100% 50%; } }

/* ── L argent : la typo de la marque, en or lisible ──────────────────────── */
.ec-montant { font-family: var(--dw-serif); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; color: var(--dw-or-texte); }

/* ── Les lignes cle / valeur ─────────────────────────────────────────────── */
.ec-lignes { display: flex; flex-direction: column; }
.ec-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--dw-trait); }
.ec-ligne:first-child { border-top: 0; }
.ec-ligne > span { color: var(--dw-encre-2); }
/* Pas de chiffres tabulaires ici : la valeur est souvent un nom ou une
   reference, et Inter elargit alors le tiret (« DRM - UX2K »). Un nombre a
   aligner prend .ec-montant ou .ec-nombre. */
.ec-ligne > strong { text-align: right; }
.ec-nombre { font-variant-numeric: tabular-nums; }

/* Sur papier : ni nappe ni grain, ni bouton (js/espace-client.js repasse au
   jour avant d imprimer). */
@media print {
  body.ec::before, body.ec::after, .ec-theme { display: none !important; }
  body.ec { background: var(--dw-surface); }
  /* Sur papier, le degrade ne s imprime pas : sans ceci, un texte .ec-or
     serait TRANSPARENT, donc invisible. */
  .ec-or { background: none !important; color: var(--dw-or-texte) !important; -webkit-text-fill-color: currentColor !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-or { animation: none !important; }
  .ec *, .ec *::before, .ec *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}