/* Focal Pictures — homepage v2 (test sous /new). Spec : wireframes v2.
   Animation d'entrée « à la Kettal » : une seule variable --p (0 → 1, posée par le JS d'après le scroll)
   pilote le logotype, le voile blanc, les marges de l'image, la carte de visite et la nav. */
:root {
  /* Tokens communs (couleurs, polices, espacements, grille --margin / --gutter, --u) : shared/design.css */
  --p: 0;                                   /* progression du scroll, posée en JS */
  --nav-h: 72px;                            /* nav : 72 px (hors méta-grille, c'est un bandeau fixe) */
  --reveal: max(200px, 30svh);              /* hauteur d'image visible au départ */
  --top0: calc(100svh - var(--reveal));     /* haut de l'image au départ (= bas du voile) */
  --top1: calc(var(--u) * 2);               /* haut de l'image à l'arrivée : 2 unités (96 px), soit 24 px sous la nav */
  --img-aspect: 1.5;                        /* JS : ratio réel de l'image du hero (largeur / hauteur) */
  --img0-top: 0px;                          /* JS : haut de l'image à p = 0 (son bas est collé au bas de l'écran) */
  --pin-h: 100svh;                          /* JS */
  --run: 600px;                             /* JS : distance de scroll de l'animation */

  /* Interpolations pilotées par --p */
  --img-top: calc(var(--top0) + (var(--top1) - var(--top0)) * var(--p));
  --img-inset: calc(var(--margin) * var(--p));
  /* L'image n'est JAMAIS recadrée : elle garde son ratio et rétrécit en largeur quand les marges grandissent. */
  --img-w: calc(var(--pin-w, 100vw) - 2 * var(--img-inset));       /* largeur de l'image */
  --img-hh: calc(var(--img-w) / var(--img-aspect));                  /* hauteur de l'image (ratio conservé) */
  --img-top2: calc(var(--img0-top) + (var(--top1) - var(--img0-top)) * var(--p)); /* haut de l'image : du bas de l'écran vers --top1 */
  --img-h: calc(var(--img-top2) + var(--img-hh) - var(--img-top));   /* partie visible sous le voile (bandeau) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--blanc-focal); }
/* Scrollbar toujours visible (même sans rien à défiler) : pas de décalage de 15 px à la fin du chargement.
   Pendant le chargement, le body est limité à l'écran : la piste reste affichée mais on ne peut pas défiler. */
html { overflow-y: scroll; }
html.is-loading body { height: 100svh; overflow: hidden; }

body {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--noir-focal);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 4px; }

/* ===== SCÈNE ÉPINGLÉE ===== */
.stage { position: relative; height: calc(var(--pin-h) + var(--run)); }
.pin {
  position: sticky;
  top: 0;
  height: var(--pin-h);
  background: var(--blanc-focal);
  overflow: hidden;
}

/* Voile blanc : plein écran pendant le chargement, puis suit --p (jusqu'au bas de la nav) */
.veil {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100svh;
  background: var(--blanc-focal);
  transition: height .5s var(--focal-snap);
}
.is-ready .veil { height: var(--img-top); }
.veil { overflow: hidden; } /* le verre garde la taille de la scène ; le voile qui se réduit le rogne par le bas */

/* Verre cannelé : l'image du hero vue en transparence à travers la carte de visite (rendu WebGL, voir fluted-glass.js) */
.glass {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--pin-h); /* même cadre que l'image : width 100 % de la scène × hauteur de la scène */
  display: block;
  opacity: 0;
  transition: opacity .6s var(--focal-snap);
  pointer-events: none;
}
.glass.is-on { opacity: 1; }

/* L'image : bandeau pleine largeur -> image du projet avec marges de grille */
.frame {
  position: absolute;
  display: block;
  top: var(--img-top);
  left: var(--img-inset);
  right: var(--img-inset);
  height: var(--img-h);
  overflow: hidden;
  background: var(--gris-tres-clair);
}
/* L'image est placée dans le bandeau (.frame = fenêtre sous le voile) : pleine largeur du bandeau, hauteur selon son ratio,
   remontée de --img-top2 - --img-top. Le verre cannelé au-dessus place la même image dans le même rectangle (setRect). */
.frame img {
  display: block;
  position: absolute;
  left: 0;
  top: calc(var(--img-top2) - var(--img-top));
  width: 100%;
  height: var(--img-hh);
  max-width: none;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s var(--focal-snap);
}
.frame img.is-set { opacity: 1; }

/* Légende du projet (apparaît à la fin) */
.legend {
  position: absolute;
  left: var(--margin); right: var(--margin);
  top: calc(var(--img-top) + var(--img-h) + 12px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  font-size: 12px;
  color: var(--gris-moyen);
  opacity: clamp(0, calc((var(--p) - .7) / .3), 1);
}
.legend .l-name { grid-column: 1 / 3; color: var(--noir-focal); }
.legend .l-city { grid-column: 3 / 4; }
.legend .l-type { grid-column: 4 / 6; }
.legend .l-year { grid-column: 6 / 7; justify-self: end; }

/* Rangée « carte de visite » : ancrée au bas du voile, s'efface avec le scroll */
.row {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--space-m);
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  font-size: 14px;
  color: var(--gris-moyen);
  transition: color .8s var(--focal-snap);
  opacity: clamp(0, calc(1 - var(--p) / .35), 1);
}
.is-ready .row { color: var(--noir-focal); }
.row-off .row { visibility: hidden; }

.c-baseline { grid-column: 1 / 3; }
.c-city { grid-column: 3 / 4; }
.c-phone { grid-column: 4 / 5; color: var(--gris-moyen); }
.c-contact { grid-column: 5 / 6; grid-row: 1; }
.c-pct {
  grid-column: 6 / 7;
  grid-row: 1;
  justify-self: end;
  color: var(--noir-focal);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Le % de chargement cède la place, une fois chargé, à l'indicateur de scroll : « faire défiler » + flèche Lucide */
.c-pct { transition: opacity .3s var(--focal-snap), visibility 0s; }
.is-ready .c-pct { opacity: 0; visibility: hidden; transition: opacity .3s var(--focal-snap), visibility 0s .3s; }
.c-scroll {
  grid-column: 6 / 7;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--noir-focal);
  opacity: 0;
  transition: opacity .4s var(--focal-snap) .3s;
}
.c-scroll { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; pointer-events: none; } /* bouton : un clic fait défiler jusqu'à la fin de l'animation d'entrée */
.is-ready .c-scroll { opacity: 1; pointer-events: auto; }
.c-scroll i { display: block; font-size: 14px; line-height: 1; } /* icône Lucide arrow-down */
.is-ready .c-scroll i { animation: cueFall 2s infinite; } /* animation de 1 s (0,5 s : la flèche descend en s'effaçant ; 0,5 s : une nouvelle flèche arrive du haut jusqu'à sa place) puis 1 s de pause au repos, en boucle de 2 s */
@keyframes cueFall {
  0% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, 1, 1); }
  25% { transform: translateY(9px); opacity: 0; }
  25.1% { transform: translateY(-9px); opacity: 0; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.c-time { margin-left: var(--space-xs); font-variant-numeric: tabular-nums; }
.c-phone { opacity: 0; pointer-events: none; transition: opacity .6s var(--focal-snap) .3s; }
.is-ready .c-phone { opacity: 1; pointer-events: auto; }
.c-phone[hidden] { display: none; }

/* Barre de progression : filet ocre de 4 px en pied de voile (chargement uniquement) */
.bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--gris-tres-clair);
  transition: opacity .3s var(--focal-snap);
}
.bar-fill {
  height: 100%;
  background: var(--ocre-focal);
  transform-origin: left center;
  transform: scaleX(0);
}
.is-ready .bar { opacity: 0; }


.wm {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-size: 9px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* Une fois la révélation terminée, le scroll pilote tout directement : pas de transition qui ferait traîner */
.is-settled .veil { transition: none; }
html.is-instant * { transition: none !important; }

/* ===== GALERIE « RÉALISATIONS » (3.4) ===== */
.works { position: relative; margin: 0 var(--margin); padding: var(--u) 0 calc(var(--u) * 2); scroll-margin-top: var(--nav-h); }
.works[hidden] { display: none; }
.works-grid { position: relative; }

.tile { position: absolute; display: block; }
/* Bloc de texte de la galerie : même emprise qu'une image (format de la grille), cadre à ombre intérieure (même ombre que le logotype du pied de page),
   contenu centré verticalement dans son vide, ferré à gauche. */
.tile-textbox { box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; text-align: left; overflow: hidden; padding: var(--space-m); box-shadow: inset 1px 2px 48px rgba(20, 18, 16, .1); }
.tx-label { display: block; font-size: 14px; line-height: 24px; color: var(--gris-moyen); }
.tx-title { margin: 0; text-align: left; font-weight: 300; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.2; text-wrap: balance; letter-spacing: -0.01em; color: var(--noir-focal); }
.tx-sign { display: block; margin-top: var(--space-s); font-size: 14px; line-height: 24px; color: var(--gris-moyen); }
.tx-body { margin: var(--space-s) 0 0; font-size: 15px; line-height: 24px; color: var(--noir-focal); }
.tx-link { margin-top: var(--space-m); } /* bouton CTA standard (.fp-btn, shared/design.css) */
.tile-img { position: relative; overflow: hidden; background: var(--gris-tres-clair); }
.tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s var(--focal-snap); }
.tile-img img.is-loaded { opacity: 1; }
.tile-img img.tile-alt { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s var(--focal-snap); }
@media (hover: hover) and (min-width: 768px) { .tile:hover .tile-alt.is-loaded, .tile:focus-visible .tile-alt.is-loaded { opacity: 1; } }
.tile-cap { display: block; margin-top: 12px; height: 36px; font-size: 12px; line-height: 18px; opacity: 0; transition: opacity .6s var(--focal-snap); }
.tile.is-in .tile-cap { opacity: 1; }
.t-top { display: flex; justify-content: space-between; gap: var(--space-s); }
.t-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--noir-focal); }
.t-year { flex: none; margin-left: auto; color: var(--gris-moyen); }
.t-meta { display: flex; justify-content: space-between; gap: var(--space-s); color: var(--gris-moyen); }
.t-loc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-prod { flex: none; margin-left: auto; text-align: right; }
/* survol d'une tuile : son nom (c'est un lien) est souligné, les images des autres tuiles passent à .6 */
.tile-img, .frame { transition: opacity .15s linear; }
.t-name { text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color .15s linear; }
@media (hover: hover) {
  .tile:hover .t-name, .tile:focus-visible .t-name { text-decoration-color: currentColor; }
  .works-grid:has(a.tile:hover) a.tile:not(:hover) .tile-img,
  .works-grid:has(a.tile:focus-visible) a.tile:not(:focus-visible) .tile-img { opacity: .6; }
  body:has(#realisations a.tile:hover) .frame, body:has(#realisations a.tile:focus-visible) .frame { opacity: .6; } /* l'image du hero aussi */
}

/* Mobile : 1 colonne, ordre conservé, sans décalage */
.works-grid.is-stack { display: flex; flex-direction: column; gap: var(--u); }
.works-grid.is-stack .tile { position: static; width: 100%; }
.works-grid.is-stack .tile-img { height: auto; aspect-ratio: var(--ar); }
.works-grid.is-stack .tile-textbox { height: auto; }

/* Outil de dev : ?grid ou touche G affiche la méta-grille verticale (lignes toutes les --u). Jamais visible en prod. */
.show-grid body { position: relative; }
.show-grid body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background-image: linear-gradient(to bottom, rgba(196, 144, 58, .45) 1px, transparent 1px);
  background-size: 100% var(--u);
}

/* ===== INDEX (3.6) : lignes de 1 unité de méta-grille ; la vignette se cale verticalement sur les lignes ===== */
.platform::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gris-tres-clair); }

/* ===== FOCAL REVIEW (ex-Plateforme) : section épinglée, le scroll fait avancer les 7 étapes (colonne 1) et l'écran de la fenêtre Focal Review (colonnes 2 → 6) ===== */
/* Par défaut (mobile, écran trop bas) : mise en page à plat (titre, phrase, liste des étapes, lien), pas de fenêtre. new.js ajoute .is-pinned
   quand l'écran est assez haut : la section devient haute (--pf-h + --pf-run) et son contenu reste collé pendant que le scroll change l'étape. */
.platform { position: relative; margin: 0 var(--margin); padding: var(--u) 0 calc(var(--u) * 2); scroll-margin-top: var(--nav-h); }
.pf-pin { display: block; }
.pf-label { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--gris-moyen); margin: 0 0 var(--space-xs); } /* sur-titre : petit, gris */
.pf-side { display: block; }
.pf-lead { font-weight: 400; font-size: var(--text-lg); line-height: 1.22; letter-spacing: -0.01em; color: var(--noir-focal); margin: 0 0 var(--space-m); text-wrap: balance; } /* la punchline : plus grosse, en noir */

/* Étapes : rail vertical, points, numéro, nom */
.pf-steps { list-style: none; margin: 0 0 var(--u); position: relative; }
.pf-step button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: auto auto auto; width: 100%; cursor: pointer; padding: 6px 0; }
.pf-step button:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 2px; }
.pf-dot { grid-row: 1 / 3; grid-column: 1; margin-top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--gris-clair); box-sizing: border-box; position: relative; z-index: 1; }
.pf-n { grid-column: 2; font-size: 11px; line-height: 16px; color: var(--gris-moyen); }
.pf-sname { grid-column: 2; font-size: 14px; line-height: 20px; color: var(--gris-moyen); }
.pf-sub { grid-column: 2; font-size: 13px; line-height: 20px; color: var(--gris-moyen); }
.pf-step.is-done .pf-dot { background: var(--noir-focal); }
.pf-step.is-active .pf-dot { background: var(--blanc-focal); box-shadow: inset 0 0 0 2px var(--noir-focal); }
.pf-step.is-active .pf-sname { color: var(--noir-focal); }
.pf-step:hover .pf-sname { color: var(--noir-focal); }

.pf-cta { display: inline-flex; align-items: center; gap: var(--space-xs); width: fit-content; padding: 4px 0 3px; font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; } /* soulignement en bordure : couvre aussi la flèche */

.pf-win { display: none; }

@media (min-width: 768px) {
  .platform.is-pinned { height: calc(var(--pf-h) + var(--pf-run)); padding: 0; }
  .platform.is-pinned .pf-pin {
    position: sticky; top: 0; height: var(--pf-h); padding: calc(var(--u) * 2) 0 var(--u);
    background: var(--blanc-focal);
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter);
    grid-template-rows: minmax(0, 1fr);
  }
  .platform.is-pinned .pf-side { grid-column: 1 / 2; grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; min-height: 0; padding-right: var(--space-s); }
  .platform.is-pinned .pf-steps { margin: 0; }
  .platform.is-pinned .pf-win { grid-column: 2 / 7; grid-row: 1; display: flex; flex-direction: column; min-height: 0; background: var(--blanc-focal); border: 1px solid var(--gris-tres-clair); box-shadow: 0 8px 32px rgba(20, 18, 16, .08); translate: 0 var(--pf-par, 0px); will-change: translate; }
  .platform.is-pinned .pf-sub { display: none; }
  /* rail : gris sur toute la hauteur, noir jusqu'à l'étape en cours (--pf-fill, continu) ; 56 px par étape */
  .platform.is-pinned .pf-step button { height: 56px; }
  .platform.is-pinned .pf-steps::before, .platform.is-pinned .pf-steps::after { content: ""; position: absolute; left: 3px; top: 12px; width: 2px; height: calc(56px * 6); background: var(--gris-clair); }
  .platform.is-pinned .pf-steps::after { background: var(--noir-focal); height: calc(56px * 6 * var(--pf-fill, 0)); }
}

/* Fenêtre Focal Review */
/* Barre d'onglets façon Chrome en squelette (feux, onglet actif juste à droite, nouvel onglet), sans barre d'adresse ; formes grises .sk, aucun texte ni icône */
.pf-win-tabs { display: flex; align-items: flex-end; gap: 12px; height: 36px; padding: 0 12px; flex: none; background: var(--gris-tres-clair); }
.pf-win-dots { display: flex; align-items: center; gap: 6px; height: 100%; }
.pf-win-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--gris-clair); }
.pf-win-tab { display: flex; align-items: center; justify-content: flex-start; gap: 10px; height: 28px; padding: 0 12px; width: 190px; background: var(--blanc-focal); border-radius: 8px 8px 0 0; }
.pf-win-new { align-self: flex-end; margin-bottom: 9px; } /* centré sur la même ligne que le contenu de l'onglet (onglet de 28 px collé en bas, pastille de 10 px) */
.sk { display: block; flex: none; background: var(--gris-clair); } /* même gris que les 3 points de fenêtre ; formes rondes uniquement */
.sk-dot { width: 10px; height: 10px; border-radius: 50%; }
.sk-bar { width: 90px; height: 6px; border-radius: 3px; flex: none; }
.pf-win-tab .sk-bar { flex: 1 1 auto; width: auto; max-width: 110px; }
.pf-win-body { position: relative; flex: 1 1 auto; min-height: 0; }

/* façade dessinée (symbole SVG défini par new.js), les couleurs viennent des variables du conteneur */
.pf-art-wrap { --pf-s: #141210; --pf-sh: transparent; position: relative; overflow: hidden; }
.pf-art-wrap.is-line { --pf-g: #fff; --pf-n: #ECEAE7; --pf-b: #F4F3F1; --pf-r: #D4D0CB; --pf-w: #D4D0CB; background: #fff; }
.pf-art-wrap.is-vol { --pf-g: #E9E7E3; --pf-n: #D8D5D0; --pf-b: #E7E4DF; --pf-r: #C7C3BC; --pf-w: #C7C3BC; --pf-s: #A19C94; --pf-sh: rgba(60, 56, 50, .10); background: #F2F1EF; }
.pf-art-wrap.is-color { --pf-g: #D1CBC0; --pf-n: #CDC5B8; --pf-b: #E4DAC8; --pf-r: #6F7378; --pf-w: #7F8A94; --pf-s: #8A8070; --pf-sh: rgba(120, 100, 70, .18); background: #DCE0E3; }
.pf-art-wrap.is-color2 { --pf-g: #D1CBC0; --pf-n: #D3CCC0; --pf-b: #EADFCB; --pf-r: #62666B; --pf-w: #B4C3CE; --pf-s: #8A8070; --pf-sh: rgba(120, 100, 70, .14); background: #E3E7EA; }
.pf-art { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===== DÉMO INTERACTIVE (new/pfdemo.js) : une mini-app calquée sur les vrais écrans de /app (Accueil, Devis & cadrages, Focal Review) + une Livraison ===== */
.pf-win-body { overflow: hidden; }
.pa { position: absolute; inset: 0; display: grid; grid-template-columns: 176px minmax(0, 1fr); background: var(--blanc-focal); color: var(--noir-focal); font-size: 12px; line-height: 16px; }
:where(.pa) button { font: inherit; color: inherit; cursor: pointer; }
.pa button:focus-visible, .pa input:focus-visible, .pa textarea:focus-visible, .pa [role="button"]:focus-visible, .pa [role="checkbox"]:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 1px; }
.pa i[class^="icon-"] { font-size: 14px; line-height: 1; }
:where(.pa) :is(p, h1, h2, h3, h4, h5, dl, dd, dt, ul, ol) { margin: 0; padding: 0; }
:where(.pa) :is(ul, ol) { list-style: none; }

/* barre latérale */
.pa-side { display: flex; flex-direction: column; gap: 12px; padding: 14px 10px; border-right: 1px solid var(--gris-tres-clair); min-height: 0; overflow: hidden; }
.pa-logo-sk { display: block; width: 84px; height: 10px; margin: 6px 4px 8px; border-radius: 5px; background: var(--gris-tres-clair); }
.pa-account { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.pa-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gris-tres-clair); color: transparent; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 500; }
.pa-account h4, .pa-account p { width: fit-content; border-radius: 4px; background: var(--gris-tres-clair); color: transparent; user-select: none; }
.pa-account h4 { font-size: 12px; font-weight: 500; line-height: 14px; margin-bottom: 4px; }
.pa-account p { font-size: 11px; line-height: 12px; }
.pa-pages { display: flex; flex-direction: column; gap: 2px; }
.pa-pages hr { border: 0; height: 1px; background: var(--gris-tres-clair); margin: 6px 4px; }
.pa-dash { display: flex; align-items: center; gap: 8px; padding: 7px 8px; color: transparent; user-select: none; }
.pa-dash i, .pa-dash span { background: var(--gris-tres-clair); border-radius: 4px; color: transparent; }
.pa-dash i { width: 14px; height: 14px; border-radius: 50%; }
.pa-pname { width: fit-content; max-width: calc(100% - 16px); margin: 2px 8px 6px; font-size: 11px; font-weight: 500; color: transparent; background: var(--gris-tres-clair); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; }
.pa-nav { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: default; color: var(--noir-focal); transition: background-color .15s var(--focal-snap); }
.pa-nav.is-on { background: var(--gris-tres-clair); }
.pa-nav span { display: flex; flex-direction: column; min-width: 0; }
.pa-nav b { font-weight: 400; align-self: flex-start; }
.pa-nav:not(.is-on) { user-select: none; }
.pa-avatar { user-select: none; }
.pa-nav:not(.is-on) b, .pa-nav:not(.is-on) em { color: transparent; background: var(--gris-tres-clair); border-radius: 4px; }
.pa-nav:not(.is-on) i { color: transparent; width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--gris-tres-clair); }
.pa-nav.is-on b { font-weight: 500; }
.pa-nav em { font-style: normal; font-size: 10px; line-height: 12px; color: var(--gris-moyen); align-self: flex-start; margin-top: 2px; }
.pa-nav[data-dead] { cursor: default; }
.pa-nav[data-dead]:hover { background: none; }

/* haut de page et zone de contenu */
.pa-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pa-top { position: relative; flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--gris-tres-clair); }
.pa-top-l, .pa-top-r { display: flex; align-items: center; gap: 8px; }
.pa-title { font-size: 14px; font-weight: 400; line-height: 20px; }
.pa-chip { padding: 1px 6px; border: 1px solid var(--gris-clair); border-radius: 10px; font-size: 11px; line-height: 16px; color: var(--gris-moyen); }
.pa-act { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; background: var(--blanc-focal); border: 1px solid var(--gris-clair); border-radius: 4px; color: var(--ocre-focal); font-size: 12px; transition: border-color .15s var(--focal-snap); }
.pa-act:hover:not(:disabled) { border-color: var(--ocre-focal); }
.pa-act:disabled { color: var(--gris-moyen); cursor: default; }
.pa-act[hidden] { display: none; }
.pa-count { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #B8863B; color: #fff; font-size: 10px; font-weight: 500; line-height: 16px; text-align: center; }
.pa-count[hidden] { display: none; }
.pa-views { position: relative; flex: 1 1 auto; min-height: 0; }
.pa-view { position: absolute; inset: 0; padding: 0; opacity: 0; pointer-events: none; overflow: hidden; transition: opacity .3s var(--focal-snap); }
.pa-view.is-on { opacity: 1; pointer-events: auto; }

/* éléments communs */
.pa-h { font-size: 13px; font-weight: 500; line-height: 18px; }
.pa-p, .pa-note { font-size: 11px; line-height: 15px; color: var(--gris-moyen); }
.pa-note:empty { display: none; }
.pa-fl { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--gris-moyen); min-width: 0; }
.pa-row { display: flex; gap: 10px; }
.pa-row > * { flex: 1; min-width: 0; }
.pa-in { box-sizing: border-box; width: 100%; height: 32px; padding: 0 10px; font: inherit; font-size: 12px; color: var(--noir-focal); background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: 4px; outline: none; }
.pa-in:focus { border-color: var(--noir-focal); }
.pa-in:disabled { background: var(--gris-tres-clair); color: var(--gris-moyen); }
.pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; padding: 0 12px; background: var(--noir-focal); color: var(--blanc-focal); border: 0; border-radius: 4px; font-size: 12px; font-weight: 500; }
.pa-btn:disabled { background: var(--gris-clair); color: var(--gris-moyen); cursor: default; }
.pa-btn-s { flex: none; }
.pa-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.pa-seg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: 4px; font-size: 11px; color: var(--gris-moyen); transition: border-color .15s var(--focal-snap), color .15s var(--focal-snap); }
.pa-seg button:hover { border-color: var(--noir-focal); color: var(--noir-focal); }
.pa-seg button.is-on { border-color: var(--noir-focal); color: var(--noir-focal); background: var(--blanc-focal); }

/* message */
.pa-toast { position: absolute; right: 16px; top: 12px; z-index: 9; padding: 6px 10px; background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: 4px; font-size: 11px; line-height: 16px; opacity: 0; translate: 0 -6px; pointer-events: none; transition: opacity .2s var(--focal-snap), translate .2s var(--focal-snap); }
.pa-toast.is-on { opacity: 1; translate: 0 0; }
.pa-toast.is-ok { border-color: var(--vert-validation); }

/* ---------- Accueil : les mêmes blocs que le tableau de bord de /app ---------- */
.pa-home { display: flex; gap: 24px; height: 100%; box-sizing: border-box; padding: 16px 20px; overflow-y: auto; scrollbar-width: thin; }
.pa-hcol { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pa-sec > h4 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; color: var(--gris-moyen); }
.pa-info { padding: 12px; background: var(--gris-tres-clair); border-radius: 4px; }
.pa-info p { font-size: 12px; line-height: 17px; }
.pa-info[hidden] { display: none; }
.pa-plist { display: flex; flex-direction: column; }
.pa-prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; min-height: 32px; box-sizing: border-box; }
.pa-pl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pa-pl p { font-size: 12px; white-space: nowrap; }
.pa-ic, .pa-ic2 { flex: none; font-size: 15px !important; color: var(--gris-moyen); }
.pa-pr { flex: none; font-size: 12px; color: var(--gris-moyen); }
.pa-chipbtn { display: none; align-items: center; gap: 6px; height: 22px; padding: 0 8px; background: transparent; border: 1px solid currentColor; border-radius: 11px; font-size: 11px; opacity: .9; }
.pa-chipbtn i { font-size: 12px !important; }
.pa-chipbtn:hover { opacity: 1; }
.pa-prow.ping, .pa-prow.validated { font-weight: 500; }
.pa-prow.ping .pa-pl, .pa-prow.ping .pa-pr, .pa-prow.ping .pa-ic { color: var(--bleu-info); }
.pa-prow.validated .pa-pl, .pa-prow.validated .pa-pr, .pa-prow.validated .pa-ic { color: var(--vert-validation); }
.pa-prow.ping .pa-chipbtn, .pa-prow.validated .pa-chipbtn { display: inline-flex; }
.pa-prow.ping .pa-pl p, .pa-prow.validated .pa-pl p { font-weight: 500; }
.pa-mbc { padding: 12px; background: var(--blanc); border: 1px solid var(--gris-tres-clair); border-radius: 4px; display: flex; flex-direction: column; gap: 10px; }
.pa-mbc > h4 { margin: 0; }
.pa-link { all: unset; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 400; text-transform: none; color: var(--noir-focal); cursor: pointer; border-bottom: 1px solid currentColor; }
.pa-link:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 2px; }
.pa-mbt { font-size: 11px; line-height: 15px; color: var(--gris-moyen); }
.pa-strip7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pa-sq { all: unset; box-sizing: border-box; position: relative; aspect-ratio: 1; border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: var(--gris-tres-clair); color: var(--gris-moyen); font-size: 12px; transition: opacity .15s var(--focal-snap); }
.pa-sq:hover { opacity: .85; }
.pa-sq:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 1px; }
.pa-sq-add, .pa-sq-more { border: 1px dashed var(--gris-clair); background: transparent; }
.pa-sq-add:hover, .pa-sq-more:hover { border-color: var(--noir-focal); color: var(--noir-focal); }
.pa-add { display: flex; gap: 6px; }

/* le brief : une feuille qui se superpose à l'écran */
.pa-sheet { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: rgba(248, 246, 243, .72); backdrop-filter: blur(2px); }
.pa-sheet[hidden] { display: none; }
.pa-sh { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 24px); overflow: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: 4px; box-shadow: 0 8px 32px rgba(20, 18, 16, .12); }
.pa-sh header { display: flex; align-items: center; justify-content: space-between; }
.pa-sh footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pa-x { all: unset; width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pa-x:hover { background: var(--gris-tres-clair); }
.pa-x:focus-visible { outline: 1px solid var(--noir-focal); }
.pa-drop { display: flex; align-items: center; justify-content: center; gap: 8px; height: 32px; background: transparent; border: 1px dashed var(--gris-clair); border-radius: 4px; color: var(--gris-moyen); font-size: 11px; transition: border-color .15s var(--focal-snap); }
.pa-drop:hover { border-color: var(--noir-focal); color: var(--noir-focal); }
.pa-files { display: flex; flex-wrap: wrap; gap: 4px; }
.pa-files li { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; background: var(--blanc-focal); border: 1px solid var(--gris-tres-clair); border-radius: 12px; }
.pa-files li button { all: unset; display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; cursor: pointer; color: var(--gris-moyen); margin-right: -4px; }

/* ---------- Devis & cadrages : mêmes blocs que le vrai écran (catégories par module, cartes, récapitulatif) ---------- */
.pa-dv { display: flex; gap: 20px; height: 100%; box-sizing: border-box; padding: 16px 20px; }
.pa-dvc { flex: 1 1 auto; min-width: 0; overflow-y: auto; scrollbar-width: thin; }
.pa-dvh h1 { font-weight: 400; font-size: 20px; line-height: 1.2; margin-bottom: 10px; }
.pa-facts { display: flex; gap: 24px; padding-top: 8px; margin-bottom: 8px; border-top: 1px solid var(--gris-clair); }
.pa-facts dt { font-size: 10px; color: var(--gris-moyen); margin-bottom: 2px; }
.pa-facts dd { font-size: 12px; }
.pa-intro { font-size: 11px; line-height: 16px; color: var(--gris-moyen); max-width: 440px; margin-bottom: 14px; }
.pa-cat { padding-bottom: 12px; }
.pa-cath { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 8px; margin-bottom: 10px; border-top: 1px solid var(--noir-focal); }
.pa-cat.is-rest .pa-cath { border-top-color: var(--gris-clair); }
.pa-cath h2 { font-weight: 500; font-size: 14px; line-height: 18px; margin-bottom: 1px; }
.pa-cath p { font-size: 11px; color: var(--gris-moyen); }
.pa-catt { font-weight: 500; font-size: 12px; white-space: nowrap; }
.pa-qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pa-qc { padding: 6px; }
.pa-qc.is-selected { background: var(--gris-tres-clair); }
.pa-qpick { display: block; cursor: pointer; }
.pa-qth { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--gris-clair); overflow: hidden; }
.pa-qwm { position: absolute; right: 6px; bottom: 5px; z-index: 2; font-size: 8px; color: #fff; }
.pa-qc:not(.is-selected) .pa-qth .pf-art, .pa-qc:not(.is-selected) .pa-qth .pf-img { opacity: .75; }
.pa-qrow { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12px; }
.pa-cb { flex: none; position: relative; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--gris-moyen); background: var(--blanc); }
.pa-cb.is-on { background: var(--noir-focal); border-color: var(--noir-focal); }
.pa-cb.is-on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 3px; height: 7px; border: solid var(--blanc-focal); border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
.pa-qn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-qp { flex: none; font-weight: 500; color: var(--gris-moyen); }
.pa-qc.is-selected .pa-qp { color: var(--noir-focal); }
.pa-qm { display: block; margin: 2px 0 0 21px; font-size: 10px; line-height: 14px; color: var(--gris-moyen); }
.pa-qseg { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; height: 26px; border: 1px solid var(--gris-clair); }
.pa-qseg button { border: 0; border-radius: 0; padding: 0; background: var(--blanc-focal); color: var(--noir-focal); font-size: 11px; }
.pa-qseg button[aria-pressed="true"] { background: var(--noir-focal); color: var(--blanc-focal); }
.pa-qseg button:disabled { opacity: .6; cursor: default; }
.pa-recap { flex: none; width: 232px; align-self: flex-start; max-height: 100%; overflow-y: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--blanc); scrollbar-width: thin; }
.pa-recap-top { display: flex; justify-content: space-between; align-items: baseline; }
.pa-recap-top h2 { font-weight: 500; font-size: 13px; }
.pa-rcount { font-size: 11px; color: var(--gris-moyen); }
.pa-lines { display: flex; flex-direction: column; gap: 10px; }
.pa-line { display: flex; justify-content: space-between; gap: 10px; }
.pa-line p { font-size: 12px; }
.pa-line span { display: block; font-size: 11px; color: var(--gris-moyen); margin-top: 1px; }
.pa-line em { font-style: normal; font-size: 12px; white-space: nowrap; }
.pa-line.is-empty p, .pa-line.is-empty em { color: var(--gris-moyen); }
.pa-sub { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--gris-clair); font-size: 12px; }
.pa-sub > div { display: flex; justify-content: space-between; }
.pa-sub span { color: var(--gris-moyen); }
.pa-sub em { font-style: normal; }
.pa-sub em.is-ok { color: var(--vert-validation); }
.pa-total { padding-top: 10px; border-top: 1px solid var(--noir-focal); }
.pa-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; }
.pa-total-row strong { font-weight: 500; font-size: 22px; line-height: 1.1; }
.pa-dep { margin-top: 6px; font-size: 11px; color: var(--gris-moyen); min-height: 14px; }
.pa-cta { width: 100%; height: 36px; border: 0; border-radius: 0; cursor: pointer; font-size: 12px; font-weight: 500; background: var(--ocre-focal); color: #fff; }
.pa-cta:disabled { cursor: not-allowed; background: var(--gris-clair); color: var(--gris-moyen); }
.pa-msg { font-size: 11px; line-height: 15px; color: var(--gris-moyen); }
.pa-msg:empty { display: none; }

/* devis simplifié : quatre cartes qui remplissent l'écran + un récapitulatif court, aucun défilement */
.pa-dv2 { overflow: hidden; }
.pa-vgrid2 { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pa-dq { min-height: 0; padding: 6px; display: flex; flex-direction: column; gap: 6px; transition: background-color .15s var(--focal-snap); }
.pa-dq.is-selected { background: var(--gris-tres-clair); }
.pa-dq .pa-qpick { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pa-dq .pa-qth { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.pa-dq .pa-qrow { flex: none; }
/* grosse case à cocher : c'est la seule action de l'écran */
.pa-dq .pa-qrow { gap: 9px; margin-top: 8px; font-size: 13px; }
.pa-dq .pa-cb { width: 18px; height: 18px; }
.pa-dq .pa-cb.is-on::after { left: 6px; top: 2px; width: 4px; height: 9px; border-width: 0 1.5px 1.5px 0; }
.pa-recap2 .pa-total-row strong { font-size: 28px; }
.pa-recap2 .pa-cta { height: 40px; }
.pa-dq:not(.is-selected) .pa-qth .pf-art, .pa-dq:not(.is-selected) .pa-qth .pf-img { opacity: .75; }
.pa-recap2 { overflow: hidden; max-height: none; align-self: stretch; }
.pa-recap2 .pa-cta { margin-top: auto; }

/* ---------- Focal Review ---------- */
.pa-rv { display: flex; height: 100%; min-height: 0; }
.pa-tools { flex: none; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px 0 0 10px; padding: 6px 4px; background: var(--blanc); border: 1px solid var(--gris-tres-clair); border-radius: 20px; z-index: 3; }
.pa-tools button { all: unset; box-sizing: border-box; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--noir-focal); transition: background-color .15s var(--focal-snap); }
.pa-tools button:hover:not(:disabled) { background: var(--gris-tres-clair); }
.pa-tools button:focus-visible { outline: 1px solid var(--noir-focal); }
.pa-tools button i { font-size: 16px !important; }
.pa-tools button.is-on { background: var(--ocre-focal); color: #fff; }
.pa-tools button[data-t="star"].is-on { background: none; color: #F5B800; }
.pa-tools button:disabled { color: var(--gris-clair); cursor: default; }
.pa-tools hr { width: 18px; border: 0; height: 1px; background: var(--gris-tres-clair); margin: 2px 0; }
.pa-rvm { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; }
.pa-strip { flex: none; display: flex; gap: 6px; }
.pa-th { all: unset; position: relative; box-sizing: border-box; width: 64px; height: 38px; border: 1px solid var(--gris-tres-clair); border-radius: 3px; overflow: hidden; cursor: pointer; opacity: .7; transition: opacity .15s var(--focal-snap), border-color .15s var(--focal-snap); }
.pa-th:hover, .pa-th.is-on { opacity: 1; }
.pa-th.is-on { border-color: var(--noir-focal); }
.pa-th:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 1px; }
.pa-thi { position: absolute; inset: 0; }
.pa-th b { position: absolute; left: 3px; bottom: 2px; font-size: 9px; font-weight: 500; line-height: 12px; padding: 0 3px; background: rgba(255, 255, 255, .85); border-radius: 6px; z-index: 2; }
.pa-ths { position: absolute; right: 3px; top: 3px; font-size: 11px !important; color: #F5B800; opacity: 0; z-index: 2; }
.pa-th.is-star .pa-ths { opacity: 1; }
.pa-cv { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 3px; overflow: hidden; touch-action: pan-y; }
.pa-cv.is-flag { cursor: crosshair; }
.pa-cv-base, .pa-cv-old { position: absolute; inset: 0; }
.pa-cv-old { display: none; clip-path: inset(0 calc(100% - var(--sx, 50%)) 0 0); }
.pa-cv.is-v2 .pa-cv-old { display: block; }
.pa-split { position: absolute; top: 0; bottom: 0; left: var(--sx, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 18, 16, .12); display: none; z-index: 2; }
.pa-split i { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(20, 18, 16, .14); }
.pa-cv.is-v2 .pa-split { display: block; }
.pa-cvp { position: absolute; top: 8px; z-index: 3; padding: 1px 7px; background: rgba(255, 255, 255, .92); border-radius: 10px; font-size: 10px; line-height: 16px; display: none; }
.pa-cvp-l { left: 8px; } .pa-cvp-r { right: 8px; }
.pa-cv.is-v2 .pa-cvp { display: block; }
.pa-cv .wm { z-index: 3; right: 8px; bottom: 6px; }
.pa-mks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pa-mk { all: unset; box-sizing: border-box; position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blanc); color: #B8863B; font-size: 11px; font-weight: 500; box-shadow: 0 0 0 1.5px var(--ocre-focal); cursor: pointer; pointer-events: auto; }
.pa-mk.is-new { animation: paPop .25s var(--focal-snap) both; }
.pa-mk.is-sel { background: var(--ocre-focal); color: #fff; }
.pa-mk.is-done { background: var(--vert-validation); color: #fff; box-shadow: 0 0 0 1.5px #fff; }
.pa-mk i { font-size: 12px !important; }
@keyframes paPop { from { scale: .4; opacity: 0; } }
.pa-crop { position: absolute; left: 6%; top: 8%; right: 6%; bottom: 8%; z-index: 3; display: none; border: 1px solid var(--ocre-focal); box-shadow: 0 0 0 999px rgba(248, 246, 243, .5); pointer-events: none; }
.pa-cv.has-crop .pa-crop { display: block; }
.pa-crop i { position: absolute; background: rgba(255, 255, 255, .7); }
.pa-crop i:nth-child(1), .pa-crop i:nth-child(2) { top: 0; bottom: 0; width: 1px; }
.pa-crop i:nth-child(3), .pa-crop i:nth-child(4) { left: 0; right: 0; height: 1px; }
.pa-crop i:nth-child(1) { left: 33.3%; } .pa-crop i:nth-child(2) { left: 66.6%; } .pa-crop i:nth-child(3) { top: 33.3%; } .pa-crop i:nth-child(4) { top: 66.6%; }
.pa-crop span { position: absolute; left: 0; top: -18px; font-size: 10px; color: var(--ocre-focal); }

.pa-rvp { flex: none; width: 236px; display: flex; flex-direction: column; min-height: 0; margin: 12px 12px 12px 0; background: var(--blanc-focal); border: 1px solid var(--gris-clair); border-radius: 4px; overflow: hidden; }
.pa-tabs { flex: none; display: flex; align-items: center; gap: 2px; padding: 4px; border-bottom: 1px solid var(--gris-clair); }
.pa-tabs button { all: unset; box-sizing: border-box; height: 30px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border-radius: 4px; cursor: pointer; color: var(--noir-focal); transition: background-color .15s var(--focal-snap); }
.pa-tabs button:hover { background: var(--gris-tres-clair); }
.pa-tabs button:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: -2px; }
.pa-tabs button span { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-weight: 500; transition: max-width .24s var(--focal-snap), opacity .18s ease; }
.pa-tabs button.is-on { background: var(--gris-tres-clair); padding: 0 var(--space-s); }
.pa-tabs button.is-on span { max-width: 100px; opacity: 1; }
.pa-tabs button.is-on i { color: #B8863B; }
.pa-tabs button i { font-size: 16px !important; }
.pa-panes { flex: 1 1 auto; min-height: 0; position: relative; }
.pa-pane { position: absolute; inset: 0; padding: 10px; overflow-y: auto; scrollbar-width: thin; opacity: 0; pointer-events: none; transition: opacity .2s var(--focal-snap); }
.pa-pane.is-on { opacity: 1; pointer-events: auto; }
.pa-cards, .pa-vers { display: flex; flex-direction: column; gap: 8px; }
.pa-card:where(li) { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 4px; cursor: pointer; transition: border-color .15s var(--focal-snap); }
li.pa-card.is-sel { border-color: var(--ocre-focal); }
.pa-card-h { display: flex; align-items: center; gap: 8px; }
.pa-pill { flex: none; width: 22px; height: 22px; box-sizing: border-box; border: 1.5px solid var(--ocre-focal); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: #B8863B; }
li.pa-card.is-sel .pa-pill { background: var(--ocre-focal); color: #fff; }
.pa-tag { padding: 2px 8px; background: var(--gris-tres-clair); border-radius: 12px; font-size: 11px; color: var(--gris-moyen); }
.pa-cs { flex: 1; font-size: 11px; color: var(--gris-moyen); }
.pa-cs.is-ok { color: var(--vert-validation); }
.pa-trash { all: unset; width: 22px; height: 22px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .15s var(--focal-snap), background-color .15s var(--focal-snap); }
li.pa-card:hover .pa-trash, .pa-trash:focus-visible { opacity: 1; }
.pa-trash:hover { background: var(--gris-tres-clair); }
@media (hover: none) { .pa-trash { opacity: 1; } }
.pa-ct { font-size: 12px; line-height: 16px; word-break: break-word; }
.pa-ci { box-sizing: border-box; width: 100%; resize: none; padding: 0; font: inherit; font-size: 12px; line-height: 16px; color: var(--noir-focal); background: transparent; border: 0; outline: none; }
.pa-cref { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pa-cref-t { flex: none; width: 24px; height: 24px; border-radius: 2px; }
.pa-unref { all: unset; margin-left: auto; color: var(--gris-moyen); text-decoration: underline; cursor: pointer; font-size: 11px; }
.pa-rgrid { display: flex; gap: 6px; align-items: flex-start; }
.pa-rcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pa-rg { position: relative; width: 100%; border-radius: 3px; overflow: hidden; cursor: pointer; }
.pa-rg.is-ro { cursor: default; }
.pa-rg:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 1px; }
.pa-rglab { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; background: rgba(255, 255, 255, .92); border-radius: 8px; font-size: 10px; line-height: 14px; opacity: 0; transition: opacity .15s var(--focal-snap); }
.pa-rg:hover .pa-rglab, .pa-rg:focus-visible .pa-rglab { opacity: 1; }
.pa-ver { display: flex; align-items: center; gap: 10px; padding: 8px; background: #fff; border: 1px solid var(--gris-clair); border-radius: 4px; }
.pa-ver.is-cur { border-color: var(--noir-focal); }
.pa-ver b { display: block; font-weight: 500; }
.pa-ver span { font-size: 11px; color: var(--gris-moyen); }
.pa-vth { flex: none; width: 56px; height: 38px; border-radius: 2px; }
.pa-vnote { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gris-moyen); padding: 4px 2px; }
.pa-foot { flex: none; display: none; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; background: var(--blanc-focal); border-top: 1px solid var(--gris-clair); transition: background-color .15s var(--focal-snap); }
.pa-foot.is-on { display: flex; }
.pa-foot:focus-within { background: #fff; }
.pa-foot .pa-in { height: 30px; padding: 0; border: 0; background: transparent; }
.pa-go { all: unset; flex: none; box-sizing: border-box; width: 28px; height: 28px; border-radius: 4px; background: var(--gris-tres-clair); color: var(--gris-moyen); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s var(--focal-snap), color .15s var(--focal-snap); }
.pa-go:hover { background: var(--noir-focal); color: var(--blanc-focal); }
.pa-go:focus-visible { outline: 1px solid var(--noir-focal); outline-offset: 1px; }

/* ---------- Livraison ---------- */
.pa-dlb { all: unset; flex: none; width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .15s var(--focal-snap); }
.pa-dlb:hover { background: var(--blanc); }
.pa-dlb:focus-visible { outline: 1px solid var(--noir-focal); }
.pa-dl.is-got .pa-dlb { color: var(--vert-validation); }
.pa-dl.is-busy .pa-dlb i { animation: paSpin .9s linear infinite; }
@keyframes paSpin { to { rotate: 360deg; } }
.pa-dgrid { margin-top: 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pa-dgrid .pa-qth { aspect-ratio: 4 / 3; }
.pa-dgrid .pa-qm { margin-left: 0; }
.pa-qseg-f { margin-top: 0; }
.pa-bar { height: 3px; background: var(--gris-tres-clair); border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .2s var(--focal-snap); }
.pa-bar.is-on { opacity: 1; }
.pa-bar i { display: block; width: 0; height: 100%; background: var(--ocre-focal); }

/* images réelles du site (V1 = « avant » un peu terne) ; bloc gris tant qu'elles chargent */
.pf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
.pf-img.is-old { filter: saturate(.35) contrast(.88) brightness(.95); }
.pa-imgsk { position: absolute; inset: 0; background: var(--gris-tres-clair); }

/* squelette : tout ce qui n'est pas essentiel à l'étape en cours devient une forme grise, sans interaction (new/pfdemo.js : data-ess = étapes où l'élément compte) */
.pa .is-sk { position: relative; color: transparent !important; background: var(--gris-tres-clair) !important; border-color: transparent !important; box-shadow: none !important; border-radius: 4px; pointer-events: none; user-select: none; transition: background-color .3s var(--focal-snap), color .3s var(--focal-snap); }
.pa .is-sk * { color: transparent !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; transition: color .3s var(--focal-snap); }
.pa .is-sk img, .pa .is-sk svg, .pa .is-sk .pa-sq, .pa .is-sk .pf-art-wrap { visibility: hidden; }
.pa .is-sk .pa-chipbtn, .pa .is-sk .pa-btn, .pa .is-sk input, .pa .is-sk textarea { visibility: hidden; }
.pa .pa-prow.is-sk { margin: 3px 0; min-height: 26px; }
.pa .pa-prow.is-sk .pa-pr { background: transparent !important; }
.pa .pa-sec > h4.is-sk { width: fit-content; background: var(--gris-tres-clair) !important; }
.pa .pa-tools.is-sk { background: var(--gris-tres-clair) !important; border-radius: 20px; }
.pa .pa-foot.is-sk { border-top-color: transparent !important; }
.pa .pa-facts.is-sk { border-top-color: transparent !important; width: fit-content; }
.pa .pa-sub > div.is-sk { margin: 1px 0; }

@media (prefers-reduced-motion: reduce) {
  .pa *, .pa *::before { animation: none !important; transition: none !important; }
}
/* écran bas : on resserre */
@media (max-height: 700px) {
  .pa { grid-template-columns: 156px minmax(0, 1fr); }
  .pa-home, .pa-dv { padding: 12px 16px; }
  .pa-rvp { width: 220px; }
}
@media (max-width: 1100px) {
  .pa { grid-template-columns: 56px minmax(0, 1fr); }
  .pa-account div, .pa-nav span, .pa-dash span, .pa-pname, .pa-logo { display: none; }
  .pa-side { padding: 14px 8px; align-items: center; }
  .pa-rvp { width: 200px; }
  .pa-recap { width: 200px; }
}

/* ===== VOTRE PROJET : brief intégré (new/brief.js). Label 1 → 2, titre 3 → 6, formulaire 3 → 4, carte projet 5 → 6 (collante) ===== */
.brief { position: relative; margin: 0 var(--margin); padding: var(--u) 0 calc(var(--u) * 2); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.brief::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gris-tres-clair); }
/* en-tête de la section : sur-titre gris + punchline, exactement comme la section Focal Review (.pf-label / .pf-lead), au-dessus du formulaire */
.br-head { grid-column: 4 / 6; grid-row: 1; margin: 0 0 var(--u); }
.br-label { display: block; margin: 0 0 var(--space-xs); font-size: 12px; line-height: 16px; font-weight: 400; color: var(--gris-moyen); }
.br-lead { margin: 0; font-weight: 400; font-size: var(--text-lg); line-height: 1.22; letter-spacing: -0.01em; color: var(--noir-focal); text-wrap: balance; }
.br-form { grid-column: 4 / 6; grid-row: 2; display: flex; flex-direction: column; gap: var(--space-m); min-width: 0; }
.br-card { grid-column: 2 / 4; grid-row: 1 / 3; margin-right: var(--space-m); position: sticky; top: calc(var(--nav-h) + var(--space-m)); background: var(--blanc); border: 1px solid var(--gris-tres-clair); }

.br-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); }
.br-row .br-input, .br-field .br-input { width: 100%; min-width: 0; } /* nom et localisation sur la même ligne */
.br-field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.br-field:not(.fp-float) > label { font-size: 12px; line-height: 16px; color: var(--gris-moyen); } /* le curseur garde son libellé au-dessus ; les champs texte : étiquette flottante (design.css) */
.br-input { height: 48px; padding: 0 var(--space-s); font: inherit; font-size: 14px; color: var(--noir-focal); background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: 0; outline: none; appearance: none; -webkit-appearance: none; }
/* autofill Chrome : pas de fond bleu */
.br-input:-webkit-autofill, .br-input:-webkit-autofill:hover, .br-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 100px var(--blanc) inset; -webkit-text-fill-color: var(--noir-focal); caret-color: var(--noir-focal); transition: background-color 9999s; }
.br-select { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23141210' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.br-select:invalid { color: var(--gris-moyen); }
.br-input::placeholder { color: var(--gris-moyen); opacity: .7; }
.br-input:hover { border-color: var(--gris-moyen); }
.br-input:focus-visible { outline: 2px solid var(--noir-focal); outline-offset: 4px; }
.br-input.is-invalid { border-color: var(--rouge-alerte); }
.br-err { margin: 0; font-size: 12px; line-height: 16px; color: var(--rouge-alerte); }
.br-hint { margin: 0; font-size: 12px; line-height: 16px; color: var(--gris-moyen); }
.br-err[hidden] { display: none; }

/* liste de villes (combobox) */
.br-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--blanc); border: 1px solid var(--noir-focal); }
.br-list[hidden] { display: none; }
.br-list li { padding: 10px var(--space-s); font-size: 14px; cursor: pointer; }
.br-list li[aria-selected="true"], .br-list li:hover { background: var(--gris-tres-clair); }

/* niveau des documents : curseur à 3 crans (Croquis / Plans 2D / Modélisation précise), sans arrondi ; tant qu'il n'est pas touché, il n'a pas de valeur (poignée masquée) */
.br-slider { display: flex; flex-direction: column; gap: 2px; } /* icônes proches de la piste */
.br-range { position: relative; z-index: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.br-range:focus-visible { outline: 2px solid var(--noir-focal); outline-offset: 4px; }
.br-range::-webkit-slider-runnable-track { height: 2px; background: var(--gris-clair); }
.br-range::-moz-range-track { height: 2px; background: var(--gris-clair); }
/* poignée : rond noir avec un centre Blanc Focal ; tant que le curseur n'est pas touché, l'anneau est gris */
.br-range::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 16px; height: 16px; margin-top: -7px; background: var(--blanc-focal); border: 4px solid var(--noir-focal); border-radius: 50%; }
.br-range::-moz-range-thumb { box-sizing: border-box; width: 16px; height: 16px; background: var(--blanc-focal); border: 4px solid var(--noir-focal); border-radius: 50%; }
.br-range.is-unset::-webkit-slider-thumb { border-color: var(--gris-moyen); }
.br-range.is-unset::-moz-range-thumb { border-color: var(--gris-moyen); }
/* 4 crans sur la piste, aux positions exactes de la poignée (0, 1/3, 2/3, 1), sous le curseur */
.br-slider { position: relative; }
.br-marks i { position: absolute; top: 5px; width: 1px; height: 14px; margin-left: -.5px; background: var(--gris-clair); pointer-events: none; }
.br-marks i:nth-child(1) { left: 8px; }
.br-marks i:nth-child(2) { left: calc(8px + (100% - 16px) / 3); }
.br-marks i:nth-child(3) { left: calc(8px + (100% - 16px) * 2 / 3); }
.br-marks i:nth-child(4) { left: calc(100% - 8px); }
.br-ticks { list-style: none; margin: 0; padding: 0; position: relative; height: 18px; font-size: 13px; line-height: 18px; color: var(--gris-moyen); }
/* chaque libellé est posé sous son cran (0, 1/3, 2/3, 1 de la piste) */
.br-ticks li { position: absolute; top: 0; white-space: nowrap; }
.br-ticks li[data-v="0"] { left: 0; }
.br-ticks li[data-v="1"] { left: calc(8px + (100% - 16px) / 3); transform: translateX(-50%); }
.br-ticks li[data-v="2"] { left: calc(8px + (100% - 16px) * 2 / 3); transform: translateX(-50%); }
.br-ticks li[data-v="3"] { right: 0; }
.br-ticks li { cursor: pointer; }
.br-ticks li i { margin-right: var(--space-xs); font-size: 15px; vertical-align: -2px; }
.br-flag { width: 18px; height: 13px; margin-right: 8px; vertical-align: -1px; object-fit: cover; }
.br-ticks li.is-on { color: var(--noir-focal); }
.br-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* bouton d'envoi : noir plein (jamais d'ocre dans cette section), pas d'arrondi */
.br-submit { height: 48px; padding: 0 var(--space-m); align-self: flex-start; font: inherit; font-size: 14px; font-weight: 500; color: #fff; background: var(--noir-focal); border: 1px solid var(--noir-focal); border-radius: 0; cursor: pointer; transition: opacity .12s var(--focal-snap); }
.br-submit:hover:not(:disabled) { opacity: .85; }
.br-submit:focus-visible { outline: 2px solid var(--noir-focal); outline-offset: 4px; }
.br-submit i { margin-left: 6px; vertical-align: -2px; }
.br-submit i.br-spin { margin: 0 8px 0 0; display: inline-block; animation: brSpin .9s linear infinite; }
@keyframes brSpin { to { transform: rotate(360deg); } }
.br-submit.is-sending:disabled { background: var(--noir-focal); border-color: var(--noir-focal); color: #fff; cursor: progress; } /* en cours : reste noir, pas d'état « désactivé » */
.br-submit.is-sent:disabled { background: var(--noir-focal); border-color: var(--noir-focal); color: #fff; cursor: default; } /* envoyé : le bouton reste noir (satisfaction, pas état désactivé) */
.br-submit:disabled { background: var(--gris-clair); border-color: var(--gris-clair); color: var(--gris-moyen); cursor: not-allowed; }
/* bouton + message de confirmation / d'erreur sur la même ligne, message ferré à gauche à droite du bouton */
.br-actions { display: flex; align-items: center; gap: var(--space-m); }
.br-actions .br-status { flex: 1; min-width: 0; text-align: left; }
.br-status { margin: 0; min-height: 20px; font-size: 14px; line-height: 20px; }
.br-status.is-err { color: var(--rouge-alerte); }
.br-legal { margin: 0; font-size: 12px; line-height: 16px; color: var(--gris-moyen); }
.br-legal a { color: var(--noir-focal); text-decoration: underline; text-underline-offset: 3px; }

/* carte projet */
.br-card-img { position: relative; height: 200px; background: var(--gris-tres-clair); }
/* carte OpenStreetMap (tuiles posées à la main, sans bibliothèque), en gris pour rester dans la charte */
.br-card-img { overflow: hidden; }
.br-map { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--focal-snap); }
.br-map.is-on { opacity: 1; }
.br-map img { position: absolute; width: 256px; height: 256px; max-width: none; filter: grayscale(1) contrast(.92) brightness(1.04); }
.br-map::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--noir-focal); box-shadow: 0 0 0 3px var(--blanc-focal); border-radius: 50%; }
.br-map-attr { position: absolute; right: 8px; bottom: 8px; z-index: 1; font-size: 10px; line-height: 14px; background: rgba(248, 246, 243, .85); padding: 1px 5px; }
.br-map-attr a { color: var(--gris-moyen); text-decoration: none; }
.br-card-ph { position: absolute; left: 12px; top: 12px; font-size: 12px; color: var(--gris-moyen); }
.br-card-body { padding: var(--space-m); display: flex; flex-direction: column; align-items: flex-start; }
.br-card-name { margin: 0; font-weight: 300; font-size: 28px; line-height: 36px; min-height: 36px; width: 100%; }
.br-card-name.is-empty { height: 28px; min-height: 28px; width: 60%; background: var(--gris-tres-clair); margin: 4px 0; }
.br-card-loc { margin: 4px 0 0; font-size: 14px; color: var(--gris-moyen); }
.br-card-kv { align-self: stretch; margin: var(--space-m) 0 var(--space-s); }
.br-card-kv > div { display: grid; grid-template-columns: 28% 1fr; gap: 8px; padding: 12px 0; box-shadow: inset 0 1px 0 var(--gris-tres-clair); font-size: 13px; line-height: 18px; }
.br-card-kv dt { color: var(--gris-moyen); font-size: 12px; }
.br-card-kv dd { margin: 0; overflow-wrap: anywhere; }
/* badge de statut : rectangle à filet noir, texte noir (charte : ni couleur ni arrondi, le statut se lit par le texte) */
.br-badge { display: inline-block; padding: 2px 8px; font-size: 11px; line-height: 16px; color: var(--noir-focal); background: transparent; border: 1px solid var(--noir-focal); border-radius: 0; }

@media (max-width: 760px) {
  .brief { display: flex; flex-direction: column; align-items: stretch; row-gap: var(--space-m); padding-bottom: var(--u); } /* stretch : champs, curseur et e-mail sur toute la largeur de la section */
  .br-head { margin-bottom: 0; }
  .br-form { display: contents; }
  .br-row { gap: var(--gutter); } /* nom et localisation restent sur la même ligne */
  /* curseur : l'icône passe au-dessus du libellé (4 libellés ne tiennent pas côte à côte à 390 px) */
  .br-ticks { height: 48px; }
  .br-ticks li { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } /* l'icône respire au-dessus du libellé */
  .br-ticks li i { margin: 0; vertical-align: 0; }
  .br-ticks li[data-v="0"] { align-items: flex-start; }
  .br-ticks li[data-v="3"] { align-items: flex-end; }
  .br-row, .br-field, .br-trap { order: 1; }
  .br-card { order: 2; position: static; width: 100%; margin-right: 0; }
  .br-actions, .br-legal { order: 3; }
  .br-actions { flex-direction: column; align-items: stretch; gap: var(--space-s); }
  .br-submit { align-self: stretch; }
  /* mobile : pas de fiche pendant la saisie ; après un envoi réussi la fiche REMPLACE le formulaire (JS : .brief.is-done) */
  .br-card { display: none; }
  .brief.is-done .br-card { display: block; order: 2; }
  .brief.is-done .br-form { display: none; }
  .brief.is-done .br-card-ph, .brief.is-done .br-card-img.is-none { display: none; }
  .brief.is-done .br-card-img { height: 160px; }
  .brief.is-done .br-card-kv > div[hidden] { display: none; }
  .br-done-msg { order: 3; margin: 0; font-size: 14px; line-height: 20px; }
  .br-done-msg[hidden] { display: none; }
}

/* ===== MOBILE (proposition §6) ===== */
@media (max-width: 767px) {
  :root { --margin: 20px; --gutter: 8px; --nav-h: calc(72px + env(safe-area-inset-top, 0px)); --top1: calc(96px + env(safe-area-inset-top, 0px)); } /* pastille de 48 px à 12 px du haut (sous la zone d'état iOS) : l'image du projet démarre 36 px dessous */
  .wordmark { width: calc(100% - 2 * var(--margin)); left: calc(var(--margin) + var(--space-s) * var(--p)); top: calc(24px + (1px + env(safe-area-inset-top, 0px)) * var(--p)); } /* p = 1 : dans la pastille */
  .stage, .pin { transition: height .5s var(--focal-snap); } /* la scène passe de plein écran (chargement) à la hauteur de son contenu */
  .row { bottom: calc(var(--space-s) + env(safe-area-inset-bottom, 0px)); row-gap: var(--space-xs); }
  .c-baseline { grid-column: 1 / 5; grid-row: 1; }
  .c-city, .c-contact, .c-phone { display: none; } /* mobile : seulement « Visualisation architecturale » et le pourcentage, sur une ligne */
  .c-pct, .c-scroll { grid-column: 5 / 7; grid-row: 1; }
  .legend .l-name { grid-column: 1 / 5; }
  .legend .l-city { grid-column: 1 / 4; grid-row: 2; }
  .legend .l-type { grid-column: 4 / 7; grid-row: 2; justify-self: end; text-align: right; white-space: nowrap; } /* produit sous l'année, à droite, sur 50 % de la largeur de la section : pas de saut de ligne */
  .legend .l-year { grid-column: 5 / 7; grid-row: 1; }
  .i-client, .i-city, .i-type { display: none; } /* index : Projet + Année seulement */
  .i-name { grid-column: 1 / 5; }
  .i-year { grid-column: 5 / 7; }
}

@media (prefers-reduced-motion: reduce) {
  .veil, .frame img, .row, .c-phone, .c-scroll, .tile-cap, .tile-img img { transition-duration: .01s; transition-delay: 0s; }
  .is-ready .c-scroll i { animation: none; }
}