/* ════════════════════════════════════════════════════════════════════════
   Espace prestataire — design v4 du site djprestigesound.be (30/09/2026).
   Quentin : « on vient de refaire tout le site avec ce nouveau design, ça pourrait être chouette de le retrouver
   dans l'espace prestataire ». Chargée par partials/head.php seulement quand <html data-theme="v4"> (pages
   /missions…, /mon-compte d'un prestataire, aperçu admin « vue prestataire ») : l'admin et le client ne changent pas.

   Le vocabulaire vient de dps/live/css/src/v4 (01-reglages, 05-composants, 06-accueil, 11-conversion) :
     - trois couleurs : blanc froid #F5F6F8 (le jour), bleu nuit #081027 (la nuit et l'encre ; #0B1633 jusqu'au 30/09/2026, approfondi à la demande de Quentin), or vif #E2B83C
       (la lumière, en SURFACES : jamais de texte or sur blanc, 2:1). L'orange sodium du 26/09 est devenu l'or le
       30/09/2026 (Quentin et son épouse : « plus Prestige »), puis un or vif et brillant (« l'or c'est doré et c'est
       brillant ») : les surfaces dorées portent le reflet --or-metal, comme le billet du site. Un bouton prend le
       reflet par --bouton-image, déclaré à côté de --bouton-fond dans chaque contexte (none le jour). Les noms
       --sodium restent ;
     - Anybody condensée en capitales pour les titres, Schibsted Grotesk pour le texte, Martian Mono pour les
       données et les étiquettes ;
     - angles vifs, pas d'ombre sur ce qui est posé à plat, pastilles carrées, grain sur la nuit ;
     - le billet d'entrée : bords perforés découpés au masque (radial-gradient), jamais peints.
   Les vues gardent leur HTML : on redéfinit les jetons du CRM (--bg, --ink, --gold…) et on habille les classes.
   « Contexte » = le temps de la journée, comme sur le site : jour par défaut, nuit sur .card--dark, l'en-tête,
   la barre d'onglets et l'îlot. --accent suit le contexte (nuit le jour, sodium la nuit).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Polices (copiées de dps/live/fonts/v4, licences OFL à côté) et replis calés du site ── */
@font-face {
  font-family: "Anybody";
  src: url("/assets/fonts/v4/anybody-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/v4/schibsted-grotesk-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/assets/fonts/v4/martian-mono-latin-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Replis calés : tant que les polices ci-dessus arrivent, le texte s'écrit dans une police système réglée à leur
   largeur (size-adjust) et à leurs jambages, pour que les lignes se coupent aux mêmes endroits et que rien ne bouge
   à leur arrivée. Sans eux, le billet d'entrée perdait 44 px de haut et se recentrait (CLS 0,29 avec les polices
   retardées de 1,5 s, le 27/09/2026). Valeurs imprimées par _dev/refonte-2026-09/polices-repli.py ; Android n'ayant
   que Roboto (et Droid Sans Mono), il a ses propres replis, placés après ceux d'Arial dans les piles. */
@font-face { font-family: "Anybody repli"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 100 900; size-adjust: 80.30%; ascent-override: 99.00%; descent-override: 29.89%; line-gap-override: 0.00%; }
@font-face { font-family: "Anybody repli large"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 65.84%; ascent-override: 120.74%; descent-override: 36.45%; line-gap-override: 0.00%; }
@font-face { font-family: "Schibsted Grotesk repli"; src: local("Arial"), local("ArialMT"); font-weight: 400 549; size-adjust: 103.89%; ascent-override: 94.00%; descent-override: 24.81%; line-gap-override: 0.00%; }
@font-face { font-family: "Schibsted Grotesk repli"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 100.46%; ascent-override: 97.21%; descent-override: 25.66%; line-gap-override: 0.00%; }
@font-face { font-family: "Martian Mono repli"; src: local("Menlo Regular"), local("Menlo-Regular"); font-weight: 100 800; size-adjust: 116.27%; ascent-override: 86.01%; descent-override: 17.20%; line-gap-override: 0.00%; }
@font-face { font-family: "Martian Mono repli Courier"; src: local("Courier New"), local("CourierNewPSMT"), local("Droid Sans Mono"), local("DroidSansMono"); font-weight: 100 800; size-adjust: 116.65%; ascent-override: 85.73%; descent-override: 17.15%; line-gap-override: 0.00%; }
@font-face { font-family: "Anybody repli Android"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 100 900; size-adjust: 71.28%; ascent-override: 111.54%; descent-override: 33.67%; line-gap-override: 0.00%; }
@font-face { font-family: "Schibsted Grotesk repli Android"; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); font-weight: 400 549; size-adjust: 104.48%; ascent-override: 93.47%; descent-override: 24.68%; line-gap-override: 0.00%; }
@font-face { font-family: "Schibsted Grotesk repli Android"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"); font-weight: 550 900; size-adjust: 106.91%; ascent-override: 91.34%; descent-override: 24.11%; line-gap-override: 0.00%; }

/* ── Jetons : le jour ── */
html[data-theme="v4"] {
  --blanc: #F5F6F8;
  --nuit: #081027;
  --nuit-claire: #121E44;
  --sodium: #E2B83C;             /* l'or vif (nom repris du site ; orange #FF8C1A jusqu'au 30/09/2026) */
  --sodium-clair: #F0CF6A;
  /* L'or brillant, copié de dps/live/css/src/v4/01-reglages.css : ombre bronze, lumière presque blanche au tiers */
  --or-metal: linear-gradient(118deg, #C9982E 0%, #E7BD48 16%, #F6D97E 32%, #FFF1BE 43%, #F0CB5E 55%, #DDAF3B 72%, #F3D47A 88%, #CB9B31 100%);
  --or-metal-texte: linear-gradient(100deg, #E0B43C 0%, #F7DA80 28%, #FFF3C8 42%, #F2CC5C 58%, #E3B53E 100%);
  --gris-jour: #525C7C;
  --gris-nuit: #A6AEC6;
  --filet-jour: rgb(8 16 39 / .16);
  --filet-nuit: rgb(245 246 248 / .18);
  --filet-champ-jour: rgb(8 16 39 / .55);
  --filet-champ-nuit: rgb(245 246 248 / .5);
  --halo-champ: rgb(226 184 60 / .42);
  --f-affiche: "Anybody", "Anybody repli", "Anybody repli large", "Anybody repli Android", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --f-texte: "Schibsted Grotesk", "Schibsted Grotesk repli", "Schibsted Grotesk repli Android", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-donnee: "Martian Mono", "Martian Mono repli", "Martian Mono repli Courier", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --trou-net: calc(100% - .6px);

  /* Jetons du CRM redéfinis (app.css) */
  --bg: var(--blanc);
  --surface: #FFFFFF;
  --surface-2: var(--blanc);
  --ink: var(--nuit);
  --muted: var(--gris-jour);
  --faint: #626B89;               /* 5,2:1 sur blanc : lisible, jamais décoratif seulement */
  --border: var(--filet-jour);
  --border-soft: rgb(8 16 39 / .09);
  --accent: var(--nuit);
  --gold: var(--sodium);          /* surfaces et texte sur nuit seulement */
  --gold-hover: var(--sodium-clair);
  --gold-soft: rgb(226 184 60 / .14);
  --gold-bg: rgb(226 184 60 / .2);
  --gold-line: rgb(226 184 60 / .55);
  --dark: var(--nuit);
  --dark-2: var(--nuit-claire);
  --dark-line: var(--filet-nuit);
  --dark-text: var(--blanc);
  --dark-muted: var(--gris-nuit);
  --success: var(--nuit);         /* la v4 n'a que trois couleurs : « fait » = l'encre nuit, pleine */
  --success-bg: var(--nuit);
  --success-line: var(--nuit);
  --warn: var(--nuit);            /* « en attente » = une surface sodium, texte nuit */
  --warn-bg: var(--sodium);
  --warn-line: var(--sodium);
  --danger: #B42318;              /* seule couleur hors charte : l'alerte (restriction, erreur, désistement) */
  --danger-bg: rgb(180 35 24 / .09);
  --danger-line: rgb(180 35 24 / .4);
  --font-display: var(--f-affiche);
  --font-body: var(--f-texte);
  --radius-s: 0; --radius-m: 0; --radius-l: 0;
  --shadow-card: none;
  --btn-hover: var(--nuit-claire);
  --link-hover: var(--nuit);
  /* Boutons, par contexte (comme --bouton-fond du site) */
  --bouton-fond: var(--nuit); --bouton-image: none;
  --bouton-texte: var(--blanc);
  --bouton-survol: var(--nuit-claire);
  --grain-opacite: .05;
  color-scheme: light;
}

/* ── Jetons : la nuit ── */
html[data-theme="v4"] :is(.card--dark, .presta__head, .presta__tabbar, .ilot) {
  --bg: var(--nuit);
  --surface: var(--nuit-claire);
  --ink: var(--blanc);
  --muted: var(--gris-nuit);
  --faint: var(--gris-nuit);
  --border: var(--filet-nuit);
  --accent: var(--sodium);
  --success: var(--blanc);
  --bouton-fond: var(--sodium); --bouton-image: var(--or-metal);
  --bouton-texte: var(--nuit);
  --bouton-survol: var(--sodium-clair);
  --grain-opacite: .1;
  color-scheme: dark;
}

/* ── Généralités ── */
html[data-theme="v4"] body {
  background: var(--blanc);
  color: var(--nuit);
  font-family: var(--f-texte);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="v4"] ::selection { background: var(--sodium); color: var(--nuit); }
html[data-theme="v4"] :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
html[data-theme="v4"] strong, html[data-theme="v4"] b { font-weight: 650; }
html[data-theme="v4"] a:hover { color: inherit; }

/* Titres : l'affiche du site (Anybody condensée, capitales) */
html[data-theme="v4"] :is(h1, h2, h3, .affiche, .card__title, .pg-album__titre) {
  font-family: var(--f-affiche);
  font-weight: 800;
  font-stretch: 72%;
  text-transform: uppercase;
  letter-spacing: .004em;
  line-height: .98;
  text-wrap: balance;
}
html[data-theme="v4"] .affiche { line-height: 1 !important; }

/* Étiquettes et surtitres : Martian Mono en capitales */
html[data-theme="v4"] :is(.surtitre, .mission-tile__label, .field label, .event-row__dow, .cal__entete, .puce) {
  font-family: var(--f-donnee);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
}
html[data-theme="v4"] .surtitre { color: var(--accent) !important; font-size: 11px !important; }

/* Données : dates, heures, montants, numéros */
/* :is() prend la spécificité de son argument le plus fort : rien que des classes simples ici, pour que
   .mission-tile__value--texte (plus bas) puisse reprendre la main. */
html[data-theme="v4"] :is(.donnee, .mission-tile__value, .msg-bulle__meta) {
  font-family: var(--f-donnee);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
html[data-theme="v4"] .mission-tile__value { font-weight: 500; }
html[data-theme="v4"] .mission-tile__value--texte { font-family: var(--f-texte); font-weight: 600; letter-spacing: 0; line-height: 1.35;
  font-variant-numeric: normal; /* tnum élargit aussi la virgule et le point de Schibsted : « pas , dis-le » */ }
/* Les grands nombres (compteurs) : en affiche, comme les chiffres du site ; la mono est réservée aux données courantes */
html[data-theme="v4"] .chiffre { font: 800 clamp(16px, 5.2vw, 28px)/1 var(--f-affiche) !important; font-stretch: 72% !important; white-space: nowrap; margin-top: 4px; }
html[data-theme="v4"] .etiquette { font: 500 .625rem/1.4 var(--f-donnee) !important; letter-spacing: .08em !important; color: var(--muted); }

/* ── Boutons : angles vifs, jetons du contexte ── */
html[data-theme="v4"] .btn {
  border-radius: 0;
  background: var(--bouton-image) var(--bouton-fond);
  color: var(--bouton-texte);
  border: 1px solid var(--bouton-fond);
  font-family: var(--f-texte);
  font-weight: 650;
  letter-spacing: 0;
  transition: background-color .2s, border-color .2s, color .2s;
}
html[data-theme="v4"] .btn:hover { background: var(--bouton-survol); border-color: var(--bouton-survol); color: var(--bouton-texte); }
/* Le bouton or : or brillant, encre nuit (9,5:1 ; 6,8:1 sur l'arrêt le plus sombre du reflet), le jour comme la nuit */
html[data-theme="v4"] .btn--gold { background: var(--or-metal) var(--sodium); border-color: var(--sodium); color: var(--nuit); }
html[data-theme="v4"] .btn--gold:hover { background: var(--sodium-clair); border-color: var(--sodium-clair); color: var(--nuit); }
html[data-theme="v4"] .btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
html[data-theme="v4"] .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
html[data-theme="v4"] .btn--sm { height: 38px; }

/* ── Cartes : papier blanc, filet, à plat ── */
html[data-theme="v4"] .card { border-radius: 0; box-shadow: none; border: 1px solid var(--filet-jour); }
html[data-theme="v4"] .card--dark {
  position: relative;
  isolation: isolate;
  background: var(--nuit);
  color: var(--blanc);
  border: 0;
}
/* Le grain de la nuit, comme les .v4-bloc du site */
html[data-theme="v4"] :is(.card--dark, .presta__head)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grain) 0 0 / 220px;
  opacity: var(--grain-opacite);
}
html[data-theme="v4"] .card__head { border-bottom: 1px solid var(--filet-jour); padding-bottom: 12px; }
html[data-theme="v4"] details.card > summary { list-style-position: outside; }

/* ── Badges : étiquettes carrées en mono ── */
html[data-theme="v4"] .badge {
  border-radius: 0;
  padding: .3rem .55rem .26rem;
  font: 500 .6875rem/1.2 var(--f-donnee) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border);
}
html[data-theme="v4"] .badge--success { background: var(--nuit); color: var(--blanc); box-shadow: none; }
html[data-theme="v4"] .badge--warn { background: var(--or-metal) var(--sodium); color: var(--nuit); box-shadow: none; }
html[data-theme="v4"] .badge--danger { background: var(--danger-bg); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line); }
html[data-theme="v4"] .badge--gold { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px currentColor; }
/* Sur la nuit, « fait » s'inverse : blanc plein, encre nuit */
html[data-theme="v4"] .card--dark .badge--success { background: var(--blanc); color: var(--nuit); }
/* Les messages de confirmation pleine largeur (« Merci, c'est noté ») : un encadré, pas une puce */
html[data-theme="v4"] .badge[style*="padding: 1"] { font: 600 .875rem/1.4 var(--f-texte) !important; text-transform: none; letter-spacing: 0; }

/* ── Champs : blanc, filet de champ, halo or au focus ── */
html[data-theme="v4"] :is(.field input, .field select, .field textarea, .msg-form input, select, textarea) {
  border-radius: 0;
  background: #fff;
  border: 1px solid var(--filet-champ-jour);
  color: var(--nuit);
  font-family: var(--f-texte);
  transition: border-color .2s, box-shadow .2s;
}
html[data-theme="v4"] :is(.field input, .field select, .field textarea, .msg-form input, select, textarea):hover { border-color: var(--nuit); }
html[data-theme="v4"] :is(.field input, .field select, .field textarea, .msg-form input, select, textarea):focus {
  outline: none;
  border-color: var(--nuit);
  box-shadow: inset 0 -3px 0 var(--nuit), 0 0 0 4px var(--halo-champ);
}
/* Listes déroulantes : sans l'habillage du système (Safari sur Mac les arrondit et y pose ses deux flèches), avec un
   chevron nuit. Même poids que la règle des champs ci-dessus, posée après : son `background` remettrait l'image à zéro. */
html[data-theme="v4"] :is(.field select, select) {
  -webkit-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23081027' stroke-width='1.8'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
html[data-theme="v4"] .field label { font-size: .6875rem; color: var(--nuit); }

/* ── La coquille : en-tête nuit, corps blanc, barre d'onglets nuit ── */
html[data-theme="v4"] .presta { max-width: 560px; background: var(--blanc); }
html[data-theme="v4"] .presta__head {
  position: relative;
  isolation: isolate;
  background: var(--nuit);
  color: var(--blanc);
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px;
  gap: 12px;
}
html[data-theme="v4"] .presta__marque { display: flex; align-items: center; gap: 10px; color: var(--blanc); text-decoration: none; min-width: 0; }
html[data-theme="v4"] .presta__monogramme {
  width: 30px; aspect-ratio: 1; flex: none; background: currentColor;
  -webkit-mask: url("/assets/img/v4/monogramme.svg") center / contain no-repeat;
  mask: url("/assets/img/v4/monogramme.svg") center / contain no-repeat;
}
html[data-theme="v4"] .presta__nom {
  font: 800 .95rem/1 var(--f-affiche);
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="v4"] .presta__outils { display: flex; align-items: center; gap: 12px; flex: none; }
html[data-theme="v4"] .presta__langues { display: flex; gap: 8px; }
html[data-theme="v4"] .presta__langues a {
  font: 500 .6875rem/1 var(--f-donnee);
  letter-spacing: .08em;
  color: var(--gris-nuit);
  text-decoration: none;
  padding: 6px 0;
}
html[data-theme="v4"] .presta__langues a[aria-current] { color: var(--sodium); box-shadow: inset 0 -2px 0 var(--sodium); }
html[data-theme="v4"] .presta__role { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
@media (max-width: 380px) { html[data-theme="v4"] .presta__role { display: none; } }
html[data-theme="v4"] .presta__body { padding-top: 18px; gap: 14px; }

html[data-theme="v4"] .presta__tabbar {
  background: var(--nuit);
  border-top: 0;
  padding: 0 6px calc(8px + env(safe-area-inset-bottom));
}
html[data-theme="v4"] .presta__tab {
  color: var(--gris-nuit);
  font: 500 .625rem/1.2 var(--f-donnee);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: 10px;
  text-decoration: none;
  min-width: 0;
  text-align: center;
}
/* L'onglet choisi : la tuile choisie du site (encoche or en haut) */
@media (max-width: 359px) {
  html[data-theme="v4"] .presta__tab { font: 600 .625rem/1.2 var(--f-texte); text-transform: none; letter-spacing: 0; }
}
html[data-theme="v4"] .presta__tab.is-active { color: var(--sodium); font-weight: 600; box-shadow: inset 0 3px 0 var(--sodium); }

/* ── Le billet : la prochaine mission et le haut de la fiche ── */
html[data-theme="v4"] .mission-hero {
  --coin: .75rem; --trou: 4px; --pas: 14px;
  border-radius: 0;
  padding: 24px 20px 22px;
  /* Bord du haut perforé, coins du bas creusés : découpe au masque, comme le talon du site sur téléphone */
  -webkit-mask:
    radial-gradient(circle var(--coin) at 0 100%, #0000 var(--trou-net), #000),
    radial-gradient(circle var(--coin) at 100% 100%, #0000 var(--trou-net), #000),
    radial-gradient(circle var(--trou) at 50% 0, #0000 var(--trou-net), #000) 50% 0 / var(--pas) 100% repeat-x;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--coin) at 0 100%, #0000 var(--trou-net), #000),
    radial-gradient(circle var(--coin) at 100% 100%, #0000 var(--trou-net), #000),
    radial-gradient(circle var(--trou) at 50% 0, #0000 var(--trou-net), #000) 50% 0 / var(--pas) 100% repeat-x;
  mask-composite: intersect;
}
html[data-theme="v4"] .mission-hero .affiche { font-size: 30px !important; }
/* Le titre du billet en dorure : le reflet découpé dans les lettres, comme les mots dorés des titres du site.
   Le reflet ne peint que dans la boîte du bloc : .1em de plus en haut et en bas pour les accents des capitales. */
html[data-theme="v4"] .mission-hero .affiche {
  padding-block: .1em; margin-block: -.1em;
  background-image: var(--or-metal-texte);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active) {
  html[data-theme="v4"] .mission-hero .affiche { background-image: none; -webkit-text-fill-color: currentColor; }
}
/* La ligne de perforation entre l'événement et ses détails */
html[data-theme="v4"] .mission-hero__tiles { padding-top: 16px; border-top: 1px dashed var(--filet-nuit); gap: 8px; }
html[data-theme="v4"] .mission-tile { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--filet-nuit); padding: 12px; }
html[data-theme="v4"] .mission-tile__label { font-size: .625rem; color: var(--gris-nuit); }
html[data-theme="v4"] .mission-tile__value { font-size: 14px; }
html[data-theme="v4"] .mission-tile__note { color: var(--sodium); }
html[data-theme="v4"] .mission-hero .puce { background: transparent !important; box-shadow: inset 0 0 0 1px var(--filet-nuit); color: var(--sodium) !important; font-size: 11px !important; }
html[data-theme="v4"] .mission-hero .btn:not(.btn--gold) { border-color: var(--filet-champ-nuit) !important; }

/* ── Listes de missions ── */
html[data-theme="v4"] .event-row { border-bottom-color: var(--filet-jour); }
html[data-theme="v4"] .event-row__dow { font-size: .625rem; color: var(--gris-jour); }
html[data-theme="v4"] .event-row__day { font: 800 30px/1 var(--f-affiche); font-stretch: 72%; }
html[data-theme="v4"] .event-row__title { font-weight: 650; }
/* La flèche de survol de l'admin (a.event-row::after) doublait le chevron des lignes et leur prenait 24 px */
html[data-theme="v4"] a.event-row::after { display: none; }

/* ── Titres de section avec icône ── */
html[data-theme="v4"] .presta-titre .ico { color: var(--nuit); }
html[data-theme="v4"] .card--dark .presta-titre .ico { color: var(--sodium); }

/* ── Agenda (calendrier) : cases carrées ── */
html[data-theme="v4"] :is(.cal__jour, .cal__vide, .cal__nav a) { border-radius: 0; }
html[data-theme="v4"] .cal__jour.is-today span { border-radius: 0; border-color: var(--nuit); }
html[data-theme="v4"] .cal__jour.has-mission::after { border-radius: 0; background: var(--sodium); }
html[data-theme="v4"] .cal__jour.has-mission.is-option { border-color: var(--sodium); }
html[data-theme="v4"] .cal__jour.has-mission i { color: var(--sodium); }
html[data-theme="v4"] .cal__jour { font-family: var(--f-donnee); font-size: 13px; }
html[data-theme="v4"] .cal__point, html[data-theme="v4"] .cal__hachure { border-radius: 0; }

/* ── Messagerie : bulles à angles vifs ── */
html[data-theme="v4"] .msg-bulle { border-radius: 0; }
html[data-theme="v4"] .msg-bulle--moi { background: var(--nuit); color: var(--blanc); }
html[data-theme="v4"] .msg-bulle--moi .msg-bulle__meta a { color: var(--blanc); }
html[data-theme="v4"] .msg-bulle--eux { background: #fff; border-color: var(--filet-jour); }
html[data-theme="v4"] .msg-bulle__meta { font-size: 10px; }

/* ── Galerie et extraits ── */
html[data-theme="v4"] :is(.pg-drop, .pg-drop__btn, .pg-album__btn, .pg-album__heure, .pg-tile, .pg-tile__suppr) { border-radius: 0; }
html[data-theme="v4"] .pg-drop { border: 1px dashed var(--filet-champ-jour); background: #fff; }
html[data-theme="v4"] .pg-drop.is-dragging { background: var(--gold-soft); border-color: var(--sodium); }
html[data-theme="v4"] .pg-drop__btn { background: var(--or-metal) var(--sodium); color: var(--nuit); font-weight: 650; }
html[data-theme="v4"] .pg-album__heure { font-family: var(--f-donnee); font-weight: 500; }
html[data-theme="v4"] .pg-tile__video { background: var(--nuit); }
html[data-theme="v4"] .ex-lien:hover { border-color: var(--nuit); }

/* ── L'îlot d'activité : une étiquette nuit, carrée ── */
html[data-theme="v4"] .ilot__pilule { background: var(--nuit); color: var(--blanc); border-radius: 0; border-color: var(--filet-nuit); box-shadow: 0 24px 60px -18px rgb(5 10 26 / .55); }
html[data-theme="v4"] .ilot__point, html[data-theme="v4"] .ilot__compte { border-radius: 0; background: var(--or-metal) var(--sodium); color: var(--nuit); }
html[data-theme="v4"] .ilot__texte strong { color: var(--sodium); }
html[data-theme="v4"] .ilot__fil { background: var(--nuit); border-radius: 0; border-color: var(--filet-nuit); }
html[data-theme="v4"] .ilot__item { color: var(--blanc); }
html[data-theme="v4"] .ilot__item-quand { color: var(--sodium); font-family: var(--f-donnee); }
html[data-theme="v4"] .ilot__item-ok { border-radius: 0; }

/* ── Mon compte (mise en page commune aux trois rôles) ── */
html[data-theme="v4"] .ceremonie { background: var(--blanc); }
html[data-theme="v4"] .ceremonie__top {
  --accent: var(--sodium); --ink: var(--blanc);
  background: var(--nuit); color: var(--blanc); border-bottom: 0;
  padding-top: calc(14px + env(safe-area-inset-top));
}
html[data-theme="v4"] .ceremonie__marque span { font: 800 1rem/1 var(--f-affiche); font-stretch: 118%; text-transform: uppercase; letter-spacing: .02em; }
html[data-theme="v4"] .ceremonie__top a { color: var(--blanc); }
html[data-theme="v4"] .ceremonie__main .card .affiche { font-size: 26px !important; overflow-wrap: anywhere; }
html[data-theme="v4"] :is(.avatar, img.avatar) { border-radius: 0; }

/* ── Messages avec Quentin (30/09/2026) : une conversation par mission ── */
/* La bulle : sa photo, comme la bulle de chat du site, au-dessus de la barre d'onglets. */
html[data-theme="v4"] .presta__body { padding-bottom: 160px; }
html[data-theme="v4"] .bulle-quentin {
  position: fixed;
  z-index: 50;
  right: max(16px, calc((100vw - 560px) / 2 + 16px));
  bottom: calc(78px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; padding: 2px;
  border-radius: 50%;
  background: var(--or-metal) var(--sodium);
  box-shadow: 0 14px 30px -10px rgb(5 10 26 / .6);
}
html[data-theme="v4"] .bulle-quentin img { display: block; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
html[data-theme="v4"] .bulle-quentin__n {
  position: absolute; top: -5px; right: -5px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--or-metal) var(--sodium); color: var(--nuit);
  font: 600 .6875rem/1 var(--f-donnee);
}
html[data-theme="v4"] .conv__apercu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="v4"] .conv__apercu--nouveau { color: var(--nuit); font-weight: 650; }

/* La conversation : plein écran, en-tête nuit, bulles à angles vifs, saisie collée en bas. */
html[data-theme="v4"] .chat { max-width: 560px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--blanc); }
html[data-theme="v4"] .chat__entete {
  --accent: var(--sodium);
  position: sticky; top: 0; z-index: 10; isolation: isolate;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 12px 6px;
  background: var(--nuit); color: var(--blanc);
}
html[data-theme="v4"] .chat__entete::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grain) 0 0 / 220px; opacity: .1;
}
html[data-theme="v4"] .chat__retour { width: 40px; height: 44px; display: grid; place-items: center; color: var(--blanc); flex: none; }
html[data-theme="v4"] .chat__photo { width: 48px; height: 48px; padding: 2px; border-radius: 50%; object-fit: cover; flex: none; background: var(--or-metal) var(--sodium); }
html[data-theme="v4"] .chat__qui { flex: 1; min-width: 0; }
html[data-theme="v4"] .chat__nom { font: 800 1.05rem/1.05 var(--f-affiche); font-stretch: 90%; text-transform: uppercase; letter-spacing: .02em; }
html[data-theme="v4"] .chat__sujet {
  margin-top: 3px;
  font: 500 .625rem/1.3 var(--f-donnee); letter-spacing: .06em; color: var(--sodium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="v4"] .chat__wa {
  flex: none; padding: 9px 10px;
  font: 500 .625rem/1 var(--f-donnee); letter-spacing: .08em; text-transform: uppercase;
  color: var(--blanc); text-decoration: none; box-shadow: inset 0 0 0 1px var(--filet-nuit);
}
html[data-theme="v4"] .chat__wa:hover { color: var(--nuit); background: var(--or-metal) var(--sodium); box-shadow: none; }
html[data-theme="v4"] .chat__fil { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px 16px; }
html[data-theme="v4"] .chat__jour { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; color: var(--gris-jour);
  font: 500 .625rem/1 var(--f-donnee); letter-spacing: .08em; text-transform: uppercase; }
html[data-theme="v4"] .chat__jour::before, html[data-theme="v4"] .chat__jour::after { content: ""; flex: 1; height: 1px; background: var(--filet-jour); }
html[data-theme="v4"] .chat__bulle { max-width: 84%; padding: 10px 13px 8px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
html[data-theme="v4"] .chat__texte { white-space: pre-wrap; }
html[data-theme="v4"] .chat__bulle--eux { align-self: flex-start; background: #fff; color: var(--nuit); box-shadow: inset 0 0 0 1px var(--filet-jour); }
html[data-theme="v4"] .chat__bulle--moi { align-self: flex-end; background: var(--nuit); color: var(--blanc); }
/* Réponse du répondeur du Studio : jamais présentée comme écrite par Quentin (mention IA) */
html[data-theme="v4"] .chat__bulle--auto { align-self: flex-start; background: #fff; color: var(--nuit); outline: 1px dashed var(--filet-champ-jour); outline-offset: -1px; }
html[data-theme="v4"] .chat__auto { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--gris-jour);
  font: 500 .5625rem/1.3 var(--f-donnee); letter-spacing: .06em; text-transform: uppercase; }
html[data-theme="v4"] .chat__auto::before { content: ""; width: .45rem; height: .45rem; background: var(--sodium); flex: none; }
html[data-theme="v4"] .chat__heure { margin-top: 4px; text-align: right; font: 400 .625rem/1 var(--f-donnee); opacity: .7; font-variant-numeric: tabular-nums; }
html[data-theme="v4"] .chat__vide { margin: auto 0; padding: 30px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
html[data-theme="v4"] .chat__vide img { width: 76px; height: 76px; padding: 2px; border-radius: 50%; object-fit: cover; background: var(--or-metal) var(--sodium); margin-bottom: 6px; }
html[data-theme="v4"] .chat__vide-titre { margin: 0; max-width: 28ch; font: 800 1.35rem/1.05 var(--f-affiche); font-stretch: 72%; text-transform: uppercase; text-wrap: balance; }
html[data-theme="v4"] .chat__saisie {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--blanc); border-top: 1px solid var(--filet-jour);
}
html[data-theme="v4"] .chat__saisie textarea {
  flex: 1; min-width: 0; min-height: 46px; max-height: 150px; resize: none;
  padding: 12px 14px; font: 400 16px/1.35 var(--f-texte); /* 16 px : iOS ne zoome pas au focus */
}
html[data-theme="v4"] .chat__saisie button {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--or-metal) var(--sodium); color: var(--nuit); border: 0; cursor: pointer;
}
html[data-theme="v4"] .chat__saisie button:hover { background: var(--sodium-clair); }
html[data-theme="v4"] .chat__saisie button:disabled { opacity: .5; }

/* ── Tablette et fenêtre étroite (700 à 1023 px) : la même colonne, plus large ── */
@media (min-width: 700px) and (max-width: 1023.98px) {
  html[data-theme="v4"] :is(.presta, .presta__tabbar, .chat) { max-width: 720px; }
  html[data-theme="v4"] .bulle-quentin { right: max(16px, calc((100vw - 720px) / 2 + 16px)); }
  html[data-theme="v4"] .pg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ── Ordinateur (dès 1024 px) : bandeau pleine largeur, onglets en haut, contenu sur 1120 px ──
   Vally, 02/10/2026 : elle dépose ses galeries depuis un ordinateur et voyait une colonne de téléphone.
   Les vues ne changent pas : la barre d'onglets, dernier enfant de .presta, remonte par `order` et se pose
   sur le bandeau (marge négative de sa hauteur). Chaque page porte .presta--<page> pour sa grille. */
@media (min-width: 1024px) {
  html[data-theme="v4"] .presta {
    --bandeau: 64px;
    --marge: max(32px, calc((100% - 1120px) / 2));
    max-width: none;
  }
  html[data-theme="v4"] .presta__head {
    position: sticky; top: 0; z-index: 40;
    min-height: var(--bandeau);
    padding: 0 var(--marge);
  }
  html[data-theme="v4"] .presta__role { max-width: 150px; }

  html[data-theme="v4"] .presta__tabbar {
    order: 1;
    position: sticky; top: 0; bottom: auto; left: auto; right: auto; z-index: 41;
    align-self: center;
    width: max-content; max-width: none;
    height: var(--bandeau);
    margin: calc(-1 * var(--bandeau)) 0 0;
    padding: 0;
    background: none;
    gap: 2px;
  }
  html[data-theme="v4"] .presta__tab {
    flex: none; flex-direction: row; gap: 8px;
    min-height: 0; height: var(--bandeau);
    padding: 0 16px;
    font-size: .6875rem; letter-spacing: .08em;
  }
  html[data-theme="v4"] .presta__tab svg { display: none; }
  html[data-theme="v4"] .presta__tab:hover { color: var(--blanc); }
  html[data-theme="v4"] .presta__tab.is-active { box-shadow: inset 0 -3px 0 var(--sodium); }
  html[data-theme="v4"] .presta__tab.is-active:hover { color: var(--sodium); }

  html[data-theme="v4"] .presta__body {
    order: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px; row-gap: 0;
    align-content: start; align-items: start;
    padding: 36px var(--marge) 112px;
  }
  /* L'espacement vertical passe par une marge : une colonne qui couvre plusieurs rangées n'ajoute alors aucun vide. */
  html[data-theme="v4"] .presta__body > * { grid-column: 1 / -1; margin-bottom: 20px; }
  html[data-theme="v4"] .bulle-quentin { right: 32px; bottom: 32px; }
  /* L'îlot d'activité se posait sur les onglets : il descend en bas à gauche, en face de la bulle, et s'ouvre vers le haut. */
  html[data-theme="v4"] body:has(> .presta) > .ilot {
    top: auto; bottom: 32px; left: 32px; transform: none;
    flex-direction: column-reverse; align-items: flex-start;
  }
  html[data-theme="v4"] body:has(> .presta) > .ilot .ilot__fil { margin: 0 0 8px; transform-origin: bottom left; }

  /* Mes missions : le billet de la prochaine à gauche, les suivantes à droite */
  html[data-theme="v4"] .presta--liste .presta__body > .mission-hero { grid-column: 1 / span 5; }
  html[data-theme="v4"] .presta--liste .presta__body > .mission-hero + section { grid-column: 6 / -1; }

  /* Une colonne qui reste à l'écran (billet, calendrier), le détail qui défile à côté.
     Ce qui précède la colonne (retour, rappel de notifications) garde toute la largeur. */
  html[data-theme="v4"] :is(.presta--fiche, .presta--extraits) .presta__body > * { grid-column: 6 / -1; }
  html[data-theme="v4"] :is(.presta--fiche, .presta--extraits) .presta__body > :has(~ .mission-hero) { grid-column: 1 / -1; }
  html[data-theme="v4"] :is(.presta--fiche, .presta--extraits) .presta__body > .mission-hero {
    grid-column: 1 / span 5; grid-row: span 40;
    position: sticky; top: calc(var(--bandeau) + 24px);
  }
  /* Les cartes de l'agenda portent une marge haute en ligne (colonne du téléphone) : sans objet dans la grille. */
  html[data-theme="v4"] .presta--agenda .presta__body > section { margin-top: 0 !important; }
  html[data-theme="v4"] .presta--agenda .presta__body > * { grid-column: 8 / -1; }
  html[data-theme="v4"] .presta--agenda .presta__body > :has(~ .cal) { grid-column: 1 / -1; }
  html[data-theme="v4"] .presta--agenda .presta__body > .cal {
    grid-column: 1 / span 7; grid-row: span 12;
    position: sticky; top: calc(var(--bandeau) + 24px);
  }

  /* Galeries : le dossier et son état à gauche, les albums à droite, des vignettes plus nombreuses */
  html[data-theme="v4"] .presta--galeries .presta__body:has(> #pg) > * { grid-column: 1 / span 4; }
  html[data-theme="v4"] .presta--galeries .presta__body > #pg { grid-column: 5 / -1; grid-row: 1 / span 12; }
  html[data-theme="v4"] .presta--galeries .presta__body:not(:has(> #pg)) > * { grid-column: 3 / span 8; }
  html[data-theme="v4"] .pg-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }

  /* Messages : une liste lisible, pas étirée sur toute la largeur */
  html[data-theme="v4"] .presta--messages .presta__body > * { grid-column: 1 / span 8; }
  html[data-theme="v4"] .chat { max-width: 760px; border-inline: 1px solid var(--filet-jour); }
}
@media (min-width: 1200px) {
  html[data-theme="v4"] .presta__tab svg { display: block; width: 16px; height: 16px; }
}

/* Mouvement réduit : rien ne glisse */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="v4"] * { transition: none !important; }
}