/* =============================================================
   Eloic Foucart — les panneaux du menu

   À propos, Services, Projets, Journal, Contact. Ils s'ouvrent par-dessus la
   page où l'on se trouve — le défilement de l'accueil, mais aussi un article
   ou la page d'un projet. Un seul habillage pour les deux : l'accueil le
   charge avec style.css, les pages de lecture avec pages.css.

   Un panneau est une surface à lui — un voile sombre, du texte clair — et ne
   dépend donc ni du papier de la page ni de son thème. Il porte ici les seuls
   jetons dont il se sert, pour tenir debout avec l'une ou l'autre feuille.
   ============================================================= */
.page-panel, #app.panel-open {
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --braise:       #D96B2B;   /* l'orange de Matea : sur le voile sombre, il tient */
  --text-xs:  12px;
  /* L'espacement vit dans assets/css/echelle.css. */
  --radius-sm:   6px;
  --radius-pill: 999px;
  /* Le tempo du site vit dans tempo.css, sur :root — un panneau en herite. */
  --sat: env(safe-area-inset-top, 0px);
}

/* La colonne des panneaux. L'accueil la donne aussi (style.css) ; les pages
   de lecture ont la leur, plus étroite, qui n'a pas à s'appliquer ici — un
   panneau se lit en pleine largeur. */
.page-panel .wrap {
  max-width: min(max(1480px, 88vw), 2280px);
  margin: 0 auto;
  padding-left:  max(clamp(20px, 3.4vw, 48px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(20px, 3.4vw, 48px), env(safe-area-inset-right, 0px));
}
.page-panel img { display: block; max-width: 100%; }
.page-panel a { color: inherit; }
/* La page dessous ne défile plus tant qu'un panneau est ouvert. */
body.panneau-ouvert { overflow: hidden; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================
   PANELS — About & Services sur fond portfolio
   ============================================================= */
.page-panel {
  position: fixed;
  inset: 0;
  z-index: 72;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(8, 11, 12, .72);
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-enter) var(--ease-out);
  color: #fff;
}
.page-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* Geler le scroller + masquer dots/hint quand panel ouvert */
#app.panel-open #scroller { overflow: hidden; }
#app.panel-open .dots, #app.panel-open .scroll-hint { opacity: 0; pointer-events: none; }
.panel-body {
  padding-top:    max(clamp(100px, 16vh, 160px), calc(var(--sat) + 90px));
  padding-bottom: clamp(80px, 14vh, 140px);
}
/* ---- Kicker ---- */
.panel-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 0 var(--space-6);
}
.panel-kicker-dot { opacity: 0.35; }
/* ---- Heading (about + services) ---- */
.panel-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 9vw, 130px);
  letter-spacing: -0.035em;
  line-height: 0.92;
  margin: 0 0 clamp(52px, 9vh, 110px);
  color: rgba(255,255,255,.92);
}
/* ---- About content ---- */
.panel-content { max-width: 660px; }
.panel-lead {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.52;
  color: rgba(255,255,255,.88);
  margin: 0 0 clamp(18px, 3vh, 28px);
}
.panel-text p {
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.85;
  color: rgba(255,255,255,.48);
  margin: 0 0 1.5em;
}
.panel-text p:last-of-type { margin-bottom: 0; }
.panel-text em { color: rgba(255,255,255,.26); font-style: italic; }
/* ---- Services list ---- */
.panel-svc-list {
  list-style: none;
  margin: 0; padding: 0;
}
.panel-svc-item {
  border-top: 1px solid rgba(255,255,255,.10);
  transition: background var(--dur-ui) var(--ease-out);
}
.panel-svc-item:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
@media (hover: hover) {

.panel-svc-item:hover { background: rgba(255,255,255,.04); }
.panel-svc-item:hover .panel-svc-name { letter-spacing: -0.01em; }
}

.panel-svc-inner {
  display: grid;
  grid-template-columns: 2ch 1fr;
  gap: clamp(28px, 5vw, 80px);
  padding: clamp(28px, 4.5vh, 52px) 0;
  align-items: start;
}
.panel-svc-num {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em;
  color: rgba(255,255,255,.24);
  padding-top: .75em;
}
.panel-svc-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 68px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: rgba(255,255,255,.88);
  margin: 0 0 .4em;
  transition: letter-spacing var(--dur-ui) var(--ease-out);
}
.panel-svc-desc {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.72;
  color: rgba(255,255,255,.38);
  margin: 0;
  max-width: 58ch;
}
/* ---- CTA panel ---- */
.panel-cta {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: clamp(44px, 7vh, 72px);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,.88); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
  padding-bottom: 3px;
  transition: opacity var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {

.panel-cta:hover { opacity: 0.45; }
}

.panel-kicker, .panel-heading, .panel-content, .panel-svc-item, .panel-cta-wrap { opacity: 0; }
.page-panel.is-open .panel-kicker { animation: panel-in 540ms  80ms var(--ease-out) both; }
.page-panel.is-open .panel-heading { animation: panel-in 580ms 160ms var(--ease-out) both; }
.page-panel.is-open .panel-content { animation: panel-in 520ms 260ms var(--ease-out) both; }
.page-panel.is-open .panel-svc-item { animation: panel-in 500ms calc(220ms + var(--i, 0) * 55ms) var(--ease-out) both; }
.page-panel.is-open .panel-cta-wrap { animation: panel-in 500ms 460ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {

.page-panel { transition: none; }
.panel-svc-item, .panel-svc-name { transition: none; }
.panel-kicker, .panel-heading, .panel-content, .panel-svc-item, .panel-cta-wrap {
    opacity: 1; animation: none;
  }
}

/* =============================================================
   GRILLE TOUS LES PROJETS
   ============================================================= */
.panel-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 32vw, 360px), 1fr));
  gap: clamp(14px, 2.2vw, 26px);
  margin-top: clamp(32px, 5vh, 52px);
}
.proj-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 16/10;
  cursor: pointer; text-decoration: none; color: inherit;
  background: rgba(255,255,255,.06);
}
.proj-card-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.05);
  transition: transform var(--dur-enter) var(--ease-out);
}
@media (hover: hover) {

.proj-card:hover .proj-card-bg { transform: scale(1); }
.proj-card:hover .proj-card-info { opacity: 1; }
}

.proj-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,11,12,.7) 0%, transparent 55%);
}
.proj-card-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: clamp(14px, 2.2vw, 22px);
  transition: opacity var(--dur-ui) var(--ease-out);
}
.proj-card-cat {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 5px;
}
.proj-card-title {
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 26px);
  font-weight: 400; letter-spacing: -0.02em;
  color: rgba(255,255,255,.92); margin: 0;
}
.page-panel.is-open .panel-projects-grid { animation: panel-in 520ms 280ms var(--ease-out) both; }
/* =============================================================
   FORMULAIRE DE CONTACT
   ============================================================= */
.contact-form { margin-top: clamp(28px, 4vh, 44px); max-width: 640px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 20px); }
@media (max-width: 560px) {

.cf-row { grid-template-columns: 1fr; }
}

.cf-field { display: block; margin-bottom: clamp(14px, 2vh, 20px); }
.cf-field > span {
  display: block; margin-bottom: 7px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-sm);
  padding: 12px 14px; color: #fff;
  font-family: var(--font-body); font-size: 15px;
  transition: border-color var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
/* Le champ de date : Safari sur iPhone lui impose une largeur minimale et son
   propre style, qui le rendaient plus large que les autres champs. On lui
   retire l'apparence système, on le laisse rétrécir, et on garde la hauteur
   des autres champs (le texte de la date reste aligné à gauche). */
.contact-form input[type="date"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%;
  height: 46px; line-height: 20px; color-scheme: dark;
}
.contact-form input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08);
}
/* Le menu déroulant reprend le champ, chevron compris : sans cela le navigateur
   impose sa flèche système, claire sur fond sombre. Le fond des options, lui,
   reste celui du système — aucun navigateur ne laisse le styler. */
.contact-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 38px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
  background-position: calc(100% - 19px) center, calc(100% - 13px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.contact-form select option { background: #161a13; color: #fff; }
/* Même hauteur que les champs de saisie.
   « appearance: none » retire aussi la hauteur imposée par le système, et le
   menu tombait à 44 px contre 46 : deux pixels invisibles seuls, francs dès que
   le menu se retrouve à côté d'un champ. */
.contact-form select { line-height: 20px; height: 46px; }
/* Le champ masqué ne doit pas occuper sa colonne : sans cela, la galerie
   injoignable laisserait une case vide à droite de l'email. */
.cf-row .cf-field[hidden] { display: none; }
.cf-row:has(.cf-field[hidden]) { grid-template-columns: 1fr; }
.cf-foot { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: 6px; }
.cf-submit {
  background: #fff; color: #11140f; border: none;
  border-radius: var(--radius-pill); padding: 13px 30px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  cursor: pointer; min-height: 48px;
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {

.cf-submit:hover { transform: translateY(-1px); }
}

.cf-submit[disabled] { opacity: .5; cursor: default; transform: none; }

.cf-status { margin-top: 16px; font-size: 14px; min-height: 20px; }
/* Le calendrier natif du champ date suit le fond sombre du panneau. */
.contact-form input[type="date"] { color-scheme: dark; }
/* L'avertissement sous la date : une information, pas une erreur — il
   n'empêche pas d'envoyer. */
.cf-hint { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: #e9c98f; }
.cf-hint[hidden] { display: none; }
.cf-status.ok { color: #9fd3b0; }
.cf-status.bad { color: #e3a79a; }
/* ═══════════════════════════════════════════════════════════════════════════
   LES CIBLES TACTILES

   Un doigt n'est pas un curseur. La norme d'accessibilité demande 24 px de
   côté au minimum ; mesuré sur téléphone, les liens du site tombaient entre
   12 et 20 px de haut — « Prendre contact », « Réserver un appel », l'adresse
   email du menu, les mentions légales. On les rate, ou l'on attrape le voisin.

   Du remplissage, et rien d'autre : changer le mode d'affichage d'un lien
   pour l'agrandir décale ce qui l'entoure. Essayé ailleurs, cela avait fait
   déborder trois pages — ici la boîte grandit sans que la ligne bouge.
   ═══════════════════════════════════════════════════════════════════════════ */
.panel-cta { padding-block: 4px; }
/* ---- Accroche serif (À propos) ---- */
.panel-accroche {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,.92);
  margin: 0 0 clamp(18px, 3vh, 28px);
}
/* ---- Chiffres (À propos) ---- */
.panel-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin: clamp(36px, 6vh, 56px) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,.10);
}
.panel-stats div { display: flex; flex-direction: column-reverse; gap: var(--space-2); }
.panel-stats dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1;
  color: rgba(255,255,255,.92);
}
.panel-stats dt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,.48);
}
@media (max-width: 560px) {

.panel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Services : prix et univers terrain ---- */
.panel-svc-prix {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: var(--space-4) 0 0;
}
.panel-svc-item[data-univers="terrain"] .panel-svc-num, .panel-svc-item[data-univers="terrain"] .panel-svc-prix { color: var(--braise); }
.panel-svc-note {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
  margin-top: var(--space-6); margin-bottom: 0;
}
/* ---- Filtres de la grille Projets ---- */
.proj-filtres {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: calc(-1 * clamp(24px, 5vh, 70px));
}
.proj-filtre {
  font: inherit;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  padding: 8px 14px; min-height: 36px;
  cursor: pointer;
  transition: color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {

.proj-filtre:hover { color: #fff; border-color: rgba(255,255,255,.45); }
}

.proj-filtre[aria-pressed="true"] { color: #0d1113; background: #fff; border-color: #fff; }
/* encre fixe : --paper-ink devient clair en mode sombre, le fond reste blanc */
.proj-filtre[data-filtre="terrain"][aria-pressed="true"] { color: #0d1113; background: var(--braise); border-color: var(--braise); }
/* encre sur braise : 5,4:1 ; le blanc n'y tiendrait que 3,4:1 */
.proj-filtre:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.panel-projects-grid[data-filtre="terrain"]   .proj-card:not([data-univers="terrain"]), .panel-projects-grid[data-filtre="commandes"] .proj-card:not([data-univers="commandes"]) { display: none; }
.proj-card[data-univers="terrain"] .proj-card-cat { color: var(--braise); }
/* ---- Journal ---- */
.journal-list { list-style: none; margin: 0; padding: 0; }
.journal-item {
  display: grid;
  grid-template-columns: minmax(120px, 280px) 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding: clamp(24px, 4vh, 40px) 0;
  border-top: 1px solid rgba(255,255,255,.10);
  opacity: 0;
}
.journal-item:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
.page-panel.is-open .journal-item {
  animation: panel-in 540ms calc(240ms + var(--i, 0) * 60ms) var(--ease-out) both;
}
.journal-img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.06);
}
.journal-meta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin: 0 0 var(--space-3);
}
.journal-cat { color: var(--braise); }
.journal-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.02em; line-height: 1.08;
  color: rgba(255,255,255,.92);
  margin: 0 0 var(--space-3);
}
.journal-excerpt {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45;
  color: rgba(255,255,255,.66);
  margin: 0; max-width: 60ch;
}
@media (max-width: 640px) {

.journal-item { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {

.page-panel.is-open .journal-item { animation: none; opacity: 1; }
}

.panel-proj-actions .panel-cta { margin-top: 0; }
.panel-plus { margin: clamp(28px, 5vh, 48px) 0 0; }
.panel-plus .panel-cta { margin-top: 0; }
.journal-img-lien { display: block; }
.journal-title a { color: inherit; text-decoration: none; }
@media (hover: hover) {

.journal-title a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
}

/* ---- À propos : le portrait déposé dans Site → Identité ---- */
.panel-content--portrait { max-width: 860px; }
.panel-portrait {
  float: right; width: min(38%, 300px); aspect-ratio: 4/5; object-fit: cover;
  margin: 0 0 var(--space-6) var(--space-8); border-radius: var(--radius-sm);
}
@media (max-width: 640px) {

.panel-portrait { float: none; width: 100%; max-width: 360px; margin: 0 0 var(--space-6); }
}

.panel-stats { clear: both; }
/* ---- Formulaire : les pots de miel hors de vue ---- */
.cf-pieges { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.proj-card[data-univers="terrain"] .proj-card-scrim {
  background:
    repeating-linear-gradient(45deg, rgba(245,239,228,.05) 0 1px, transparent 1px 22px),
    linear-gradient(to top, rgba(8,11,12,.7) 0%, transparent 55%);
}
/* ---- Vue grille ou liste (Matea : pj-view-toggle) ---- */
.proj-vues { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.proj-vue {
  font: inherit; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  color: rgba(255,255,255,.55); background: transparent;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-pill);
  padding: 7px 12px; min-height: 32px;
}
.proj-vue[aria-pressed="true"] { color: #fff; border-color: rgba(255,255,255,.55); }
.proj-vue:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.panel-projects-grid.en-liste { grid-template-columns: 1fr; gap: 0; }
.panel-projects-grid.en-liste .proj-card {
  aspect-ratio: auto; border-radius: 0; background: transparent;
  display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: clamp(14px, 2vw, 24px);
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.10);
}
.panel-projects-grid.en-liste .proj-card:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
.panel-projects-grid.en-liste .proj-card-bg { position: relative; inset: auto; aspect-ratio: 16 / 10; transform: none; border-radius: var(--radius-sm); }
.panel-projects-grid.en-liste .proj-card-scrim { display: none; }
.panel-projects-grid.en-liste .proj-card-info { position: static; padding: 0; opacity: 1; }
@media (hover: hover) {

.panel-projects-grid.en-liste .proj-card:hover .proj-card-bg { transform: none; }
}

.panel-heading {
  font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: .92;
}
.proj-card-title {
  font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.panel-svc-name, .journal-title, .panel-stats dd { font-weight: 500; letter-spacing: -.01em; }
@media (min-width: 1800px) {

.panel-content { max-width: 820px; }
.panel-content--portrait { max-width: 1060px; }
.panel-lead { font-size: 27px; }
.panel-svc-desc { font-size: 17px; }
.contact-form { max-width: 780px; }
}

@media (min-width: 2400px) {

.panel-content { max-width: 940px; }
.panel-lead { font-size: 30px; }
}

/* Les prochains week-ends libres, sous le champ de date du formulaire. */
.cf-dispos { display: block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.55); }
/* La phrase d'accueil de la page Services, et le bouton de demande sous
   chaque formule (Le site → Services → Affichage). */
.panel-svc-intro { max-width: 56ch; margin-top: 14px; opacity: .78; line-height: 1.6; }
.panel-svc-demander {
  display: inline-block; margin-top: 12px; padding-bottom: 3px;
  font-size: .9em; color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; opacity: .85;
}
.panel-svc-demander:hover, .panel-svc-demander:focus-visible { opacity: 1; }

/* ═══ Display P3 — généré par bin/couleurs-p3.php, ne pas modifier à la main ═══ */
@supports (color: color(display-p3 0 0 0)) {
  @media (color-gamut: p3) {
    .page-panel, #app.panel-open {
      --braise: color(display-p3 0.7958 0.4432 0.2334);
    }
  }
}
/* ═══ fin du bloc Display P3 ═══ */