/* Feuille de styles de l'application client « Ma commande » (T410, reprise T413).
   Direction visuelle : docs/DESIGN.md, charte relevée sur www.oravis.com. Une maison d'édition plutôt qu'une
   application : un romain classique (Cormorant Garamond) pour nommer et pour les chiffres qui comptent, le texte du
   système pour lire, l'anthracite pour agir, le sable seulement pour marquer. La hiérarchie vient de l'ordre, de
   l'espace et du contraste entre les 2 familles ; aucun cadre, aucune ombre (hors la visionneuse), aucun décor.
   Contraintes de la CSP (style-src 'self', img-src 'self' et le domaine des photos, font-src 'self') : aucun style en
   ligne, aucune image data: ; la coche de l'acompte et le chevron des onglets sont des masques servis depuis
   /croquis/, les positions de la frise et de la jauge des propriétés posées par le CSSOM.
   Polices : une seule police servie par l'application (/polices/, licence OFL jointe), aucune d'un autre domaine. */
@font-face {
  font-family: "ORAVIS Titrage";
  src: url("/polices/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Couleurs, plein jour (tableau 3.1 de docs/DESIGN.md, contrastes calculés) */
  --fond: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F0E9;
  --carte: #FFFFFF;
  --encre: #333333;
  --encre-2: #6B6B6B;
  --sable: #AC957C;
  --sable-clair: #BCAC9E;
  --accent: #7A6654;
  --sur-accent: #FFFFFF;
  --trait: #E4DED5;
  --trait-fort: #CFC7BC;
  --trait-controle: #8C8579;
  --bouton-fond: #333333;
  --bouton-survol: #1F1F1F;
  --bouton-encre: #FFFFFF;
  --inactif-fond: #EEEAE4;
  --inactif-encre: #8A8378;
  --pas-inactif: #8A8378;
  --pas-inactif-trait: #CFC7BC;
  --erreur: #B3261E;
  --erreur-doux: #FBF3F1;
  --alerte-doux: #F7F3EE;
  --focus: #333333;
  --entete-fond: rgba(255, 255, 255, 0.94);
  --voile: rgba(24, 23, 22, 0.40);
  --ombre-dialogue: 0 24px 64px rgba(51, 40, 30, 0.16);
  /* Espaces : grille de 8 px */
  --e-05: 4px;
  --e-1: 8px;
  --e-2: 16px;
  --e-3: 24px;
  --e-4: 32px;
  --e-6: 48px;
  --e-8: 64px;
  --e-12: 96px;
  /* Rayons et hauteurs : angles vifs, comme une page imprimée */
  --rayon-1: 0;
  --rayon-2: 2px;
  --rayon-rond: 50%;
  --h-entete: 60px;
  --h-controle: 48px;
  --h-cible: 44px;
  /* Courbe unique */
  --courbe: cubic-bezier(0.2, 0, 0, 1);
  /* Caractères : le romain de la maison pour nommer et compter, le texte du système pour lire */
  --titrage: "ORAVIS Titrage", "Cormorant Garamond", "Perpetua", Garamond, "Times New Roman", serif;
  --titre-graisse: 300;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", "Poppins", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #181716;
    --surface: #181716;
    --surface-2: #25231F;
    --carte: #1F1D1B;
    --encre: #F2EEE8;
    --encre-2: #A8A29A;
    --sable: #A08B76;
    --sable-clair: #7A6E62;
    --accent: #CDB9A3;
    --sur-accent: #181716;
    --trait: #33302C;
    --trait-fort: #48443E;
    --trait-controle: #8E877E;
    --bouton-fond: #D6CDBF;
    --bouton-survol: #EAE3D8;
    --bouton-encre: #181716;
    --inactif-fond: #2A2825;
    --inactif-encre: #77716A;
    --pas-inactif: #77716A;
    --pas-inactif-trait: #48443E;
    --erreur: #FF8A7A;
    --erreur-doux: #3A2422;
    --alerte-doux: #2B2723;
    --focus: #F2EEE8;
    --entete-fond: rgba(24, 23, 22, 0.94);
    --voile: rgba(0, 0, 0, 0.60);
    --ombre-dialogue: 0 24px 64px rgba(0, 0, 0, 0.50);
    --titre-graisse: 400;
    color-scheme: dark;
  }
}
/* Contraste renforcé : après le bloc sombre, jamais dedans (outils/construire-demo.js lit ce bloc tel quel) */
@media (prefers-contrast: more) {
  :root {
    --encre-2: #4D4D4D;
    --trait: #8C8C8C;
    --trait-fort: #595959;
    --trait-controle: #595959;
    --sable: #7A6654;
    --sable-clair: #9C8B7B;
    --entete-fond: #FFFFFF;
    --titre-graisse: 500;
  }
  .app-entete { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bouton:not(.discret):not(.danger), .champ input.saisie, textarea { border-width: 2px; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --encre-2: #D6D1CA;
    --trait: #8E877E;
    --trait-fort: #ADA69D;
    --trait-controle: #D6D1CA;
    --sable: #CDB9A3;
    --sable-clair: #8A7D70;
    --entete-fond: #181716;
    --titre-graisse: 500;
  }
}

/* ===== Socle ===== */
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* le focus ramené en haut de la fenêtre ne passe jamais sous l'en-tête collant (WCAG 2.4.11) */
  scroll-padding-top: calc(var(--h-entete) + 16px);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  background-color: var(--fond);
  color: var(--encre);
  font: 400 16px/1.55 var(--texte);
  font-kerning: normal;
}
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
svg { overflow: visible; }
strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.insecable { white-space: nowrap; }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== Charpente ===== */
.mise-en-page { display: block; }
.colonne-app { display: block; min-width: 0; }
.app {
  container: app / inline-size;
  position: relative;
  width: 100%;
  max-width: none;
  color: var(--encre);
  overflow-x: clip;
}

/* En-tête collant, translucide ; un filet très clair le pose sur la page, comme la ligne d'un en-tête de lettre */
.app-entete {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: var(--h-entete);
  display: flex;
  flex-wrap: wrap;
  /* tout se pose sur la ligne de pied des lettres du logo */
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 16px;
  padding-block: 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--entete-fond);
  box-shadow: inset 0 -1px 0 var(--trait);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
}
.app-marque { display: flex; align-items: flex-end; gap: 20px; min-width: 0; }
/* Logo d'ORAVIS (arches et mot), en masque : il prend la couleur de l'encre, en clair comme en sombre. Rapport du
   dessin 1192 / 422 ; le nom reste dans le balisage, masqué visuellement, pour les lecteurs d'écran. */
.marque {
  flex: none;
  width: calc(36px * 1192 / 422);
  height: 36px;
  background-color: var(--encre);
  -webkit-mask: url("/croquis/marque-oravis.svg") center / contain no-repeat;
  mask: url("/croquis/marque-oravis.svg") center / contain no-repeat;
}
.app-espace {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
  color: var(--encre-2);
}
.entete-dossier {
  margin-left: auto;
  margin-bottom: -2px;
  font-size: 13px;
  line-height: 16px;
  color: var(--encre-2);
  text-align: right;
}
.entete-dossier:empty { display: none; }
/* Sous 780 px, l'en-tête ne répète pas ce que l'écran dit déjà : le numéro est dans le surtitre, la date dans le compte
   à rebours de E2 et E8. Masqués visuellement seulement (motif .vh), les morceaux restent lus. */
@container app (max-width: 779.98px) {
  .entete-dossier > .insecable:first-child,
  .app:has(.haut-commande) .entete-dossier {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Écran : colonne de 1120 px au plus, alignée sur l'en-tête */
.ecran {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-content: start;
  min-width: 0;
  max-width: 1200px;
  margin-inline: auto;
  padding-top: 40px;
  padding-bottom: 72px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.ecran:focus { outline: none; }
@container app (min-width: 780px) {
  .app-entete { min-height: 84px; padding-block: 16px; padding-inline: max(40px, (100% - 1120px) / 2); }
  .marque { width: calc(52px * 1192 / 422); height: 52px; }
  /* le mot de l'espace se pose sur la ligne de pied des lettres du logo, après un filet */
  .app-espace { position: static; width: auto; height: auto; margin: 0 0 -1px; padding-left: 20px; overflow: visible; clip-path: none; border-left: 1px solid var(--trait-fort); line-height: 14px; }
  .ecran { gap: 88px; padding: 80px 40px 120px; }
  /* E1, E3, E5, E6, E7 : colonne de lecture de 760 px, alignée à gauche */
  .ecran:not(:has(.haut-commande, .rayon, .onglets)) > * { max-width: 760px; }
  .ecran:not(:has(.haut-commande, .rayon, .onglets)) > .entete-ecran { max-width: none; }
}
@media (min-width: 780px) { :root { --h-entete: 84px; } }

/* ===== Entête d'écran ===== */
.entete-ecran { display: grid; justify-items: start; }
.entete-ecran > * { min-width: 0; max-width: 100%; }
.bloc > * { min-width: 0; }
/* Le seul libellé en capitales espacées de l'écran, avec la marque et le titre */
.surtitre {
  font: 500 12px/1.3 var(--texte);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.titre-ecran {
  margin-top: 12px;
  font: 400 30px/1.12 var(--titrage);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--encre);
  scroll-margin-top: calc(var(--h-entete) + 24px);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.titre-ecran:focus { outline: none; }
.sous-titre {
  margin-top: 20px;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
/* Titres de section : capitales romaines espacées, comme la Perpetua Titling de la charte ; le titre d'écran garde
   la grande taille, la section se signale par l'espace et le corps */
.titre-bloc {
  margin-bottom: 8px;
  font: 500 19px/1.3 var(--titrage);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
  overflow-wrap: anywhere;
  hyphens: auto;
}
.bloc { display: grid; gap: 16px; min-width: 0; }
.bloc > p:not([class]), .aide, .detail { max-width: 64ch; }
.aide { font-size: 14px; line-height: 1.55; color: var(--encre-2); }
@container app (min-width: 780px) {
  .titre-ecran { font-size: 46px; font-weight: var(--titre-graisse); line-height: 1.06; letter-spacing: 0.06em; }
  .titre-bloc { font-size: 22px; margin-bottom: 12px; }
}

/* ===== Boutons ===== */
.actions { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.actions.pile { display: grid; gap: 12px; }
.actions.pile .bouton.discret, .actions.pile .bouton.danger { justify-self: start; }
/* Libellés en bas de casse : les plus longs (« Valider ma nouvelle commande avec obligation de paiement ») se lisent
   d'un trait, ce que des capitales espacées ne permettent pas */
.bouton,
.formulaire button[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--h-controle);
  padding: 10px 28px;
  border: 1px solid var(--encre);
  border-radius: var(--rayon-1);
  background: transparent;
  color: var(--encre);
  font: 500 15px/1.3 var(--texte);
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
}
.bouton.principal,
.formulaire button[type="submit"] {
  border-color: var(--bouton-fond);
  background: var(--bouton-fond);
  color: var(--bouton-encre);
}
/* Un seul principal par écran : si la carte du lien en porte un, l'envoi du formulaire reste secondaire */
.ecran:has(.carte-lien .principal) .formulaire button[type="submit"] {
  border-color: var(--encre);
  background: transparent;
  color: var(--encre);
}
.bouton.principal:disabled {
  border-color: var(--inactif-fond);
  background: var(--inactif-fond);
  color: var(--inactif-encre);
  transform: none;
}
.bouton:disabled:not(.principal) { opacity: 0.4; }
.bouton.large { width: 100%; min-height: 56px; }
.formulaire button[type="submit"] { width: 100%; }
/* Gestes secondaires : un lien souligné d'un filet sable, plus net qu'un libellé gris sans soulignement */
.bouton.discret,
.bouton.danger {
  min-height: var(--h-cible);
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--encre);
  font-weight: 400;
  text-decoration-line: underline;
  text-decoration-color: var(--sable);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.bouton.danger { color: var(--erreur); text-decoration-color: currentColor; }
.bouton.en-cours { opacity: 0.6; cursor: progress; }
@container app (min-width: 600px) {
  .actions.pile { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
  .bouton.large, .formulaire button[type="submit"] { width: auto; min-width: 0; padding-inline: 40px; }
  .formulaire button[type="submit"] { justify-self: start; }
}
@media (hover: hover) {
  .bouton:hover:not(:disabled) { background: var(--surface-2); }
  .bouton.principal:hover:not(:disabled), .formulaire button[type="submit"]:hover { border-color: var(--bouton-survol); background: var(--bouton-survol); }
  .ecran:has(.carte-lien .principal) .formulaire button[type="submit"]:hover { border-color: var(--encre); background: var(--surface-2); }
  .bouton.discret:hover:not(:disabled), .bouton.danger:hover:not(:disabled) { background: transparent; text-decoration-color: currentColor; }
}

/* ===== Messages ===== */
.message {
  --m: var(--encre-2);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: start;
  max-width: 64ch;
  padding: 0;
  border-radius: var(--rayon-1);
  font-size: 15px;
  line-height: 1.55;
  color: var(--encre);
}
.message > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--m); fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; grid-row: 1; }
.message > p, .message > ul { grid-column: 2; }
.message ul, .etape-texte ul { margin: 4px 0 0; padding-left: 20px; }
.message li + li { margin-top: 6px; }
.message li::marker { color: var(--sable); }
.message.ok { --m: var(--encre); }
.message.info { --m: var(--encre-2); grid-template-columns: minmax(0, 1fr); }
.message.info > svg { display: none; }
.message.info > p, .message.info > ul { grid-column: 1; }
.message.alerte { --m: var(--accent); padding: 18px 20px; background: var(--alerte-doux); }
.message.erreur { --m: var(--erreur); padding: 18px 20px; background: var(--erreur-doux); }
.message .attente, .message .precision { font-weight: 500; }
.code-erreur { margin-top: 4px; font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.erreur-ligne {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--erreur);
}
.erreur-ligne svg { width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ===== E1 : lien personnel ===== */
.carte-lien { background: none; border: 0; }
.formulaire { display: grid; gap: 28px; max-width: 480px; min-width: 0; }
.champ input.saisie {
  width: 100%;
  max-width: 480px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--trait-controle);
  border-radius: var(--rayon-1);
  background: var(--carte);
  color: var(--encre);
  font-size: 17px;
  line-height: 1.4;
}
.champ input.saisie:focus-visible { outline-offset: 2px; }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-color: var(--erreur); }
.champ .erreur-ligne { margin-top: 0; max-width: 480px; }

/* ===== E2 : haut de la commande, compte à rebours ===== */
.haut-commande { display: grid; gap: 40px; min-width: 0; }
.haut-texte { display: grid; gap: 24px; align-content: start; min-width: 0; }
/* Le compte à rebours se lit comme une phrase : le nombre en romain, l'unité et les dates à côté, sur une ligne de
   pied commune. Placé sous le titre, il ne lui dispute plus la page. */
.invitation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  align-items: end;
  justify-items: start;
  min-width: 0;
  padding-top: 28px;
  border-top: 1px solid var(--trait);
}
.compte-libelle {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--encre-2);
  font-variant-numeric: tabular-nums;
}
.compte { display: contents; }
.compte-chiffre {
  display: block;
  grid-column: 1;
  font: var(--titre-graisse) 96px/0.8 var(--titrage);
  letter-spacing: -0.01em;
  margin-left: -0.04em;
  color: var(--encre);
  font-variant-numeric: lining-nums tabular-nums;
}
/* le blanc entre le nombre et l'unité n'est pas rendu par la grille : redonné ici, pour la lecture « 224 jours » */
.compte-chiffre::after { content: "\00a0"; }
.compte-unite { display: block; grid-column: 2; padding-bottom: 2px; font: 400 22px/1.2 var(--titrage); color: var(--encre); }
.compte-dates { grid-column: 1 / -1; margin-top: 20px; font-size: 16px; line-height: 1.6; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.action-modifier { justify-items: stretch; }
@container app (min-width: 780px) {
  .haut-commande { gap: 48px; }
  /* le nombre à gauche ; à sa droite, l'unité en romain puis les dates, sur la ligne de pied du nombre */
  .invitation { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; max-width: 760px; padding-top: 40px; }
  .compte-chiffre { grid-row: 2 / span 2; font-size: 124px; }
  .compte-unite { grid-row: 2; align-self: end; padding-bottom: 0; font-size: 28px; }
  .compte-dates { grid-column: 2; grid-row: 3; align-self: end; margin-top: 8px; padding-bottom: 2px; font-size: 16px; }
}

/* ===== E2 : frise des dates limites ===== */
/* 24 px de retrait à gauche : la graduation du jour, centrée sur son cran, ne sort jamais de la colonne */
.ruban { position: relative; padding-top: 36px; padding-left: 24px; }
.ruban-piste { position: relative; height: 2px; margin-right: 16px; background: var(--trait-fort); }
/* Cran de fin, sous le J */
.ruban-piste::after { content: ""; position: absolute; top: -4px; right: 0; width: 1px; height: 10px; background: var(--encre-2); }
/* Aujourd'hui avant la frise : le 1er segment s'interrompt, l'échelle est comprimée */
.ruban.compresse .ruban-piste::before { content: ""; position: absolute; z-index: 1; top: -2px; bottom: -2px; left: 16px; width: 8px; background: var(--fond); }
.ruban-seg { position: absolute; top: 0; bottom: 0; left: var(--d); width: calc(var(--f) - var(--d)); background: var(--c); }
.seg-tout { --c: var(--encre); }
.seg-ajouts { --c: var(--sable); }
.seg-lecture { --c: var(--sable-clair); }
/* Les segments se lisent aussi par l'épaisseur (3, 2 et 1 px), pas seulement par la teinte */
.ruban-seg.seg-tout { top: -1px; bottom: 0; }
.ruban-seg.seg-lecture { top: 1px; bottom: 0; }
.ruban-passe { position: absolute; top: 0; bottom: 0; left: 0; width: var(--f); background: var(--fond); opacity: 0.7; }
.cran { position: absolute; top: -4px; left: var(--x); width: 1px; height: 10px; background: var(--encre-2); }
.epingle { position: absolute; left: var(--x); top: -8px; width: 1px; height: 18px; background: var(--accent); }
.epingle-etiquette {
  position: absolute;
  left: var(--x);
  top: -30px;
  transform: none;
  font: 500 13px/1 var(--texte);
  color: var(--accent);
  white-space: nowrap;
}
.epingle-etiquette.a-gauche { transform: translateX(calc(-100% + 1px)); }
.graduations { position: relative; height: 13px; height: 1lh; margin: 14px 16px 0 0; font: 400 13px/1 var(--texte); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.graduations span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
/* J-8 et J-7 se touchaient sous le même cran : J-7 reste dit par la légende (« dès le … (J-7) ») */
.graduations .avant { transform: translateX(-50%); }
.graduations .apres { display: none; }
.graduations .jour-j { left: 100%; color: var(--encre); transform: translateX(-50%); }
.cotes { position: relative; height: 16px; height: max(16px, 1lh); margin: 10px 16px 0 0; font-size: 13px; line-height: 1; }
.cote { position: absolute; top: 0; bottom: 0; left: var(--d); width: calc(var(--f) - var(--d)); display: flex; align-items: center; justify-content: center; }
.cote-val { font: 400 13px/1 var(--texte); color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cote.etroite .cote-val { display: none; }
.legende-ruban { display: grid; gap: 18px; padding: 0; margin: 32px 0 0; list-style: none; font-variant-numeric: tabular-nums; }
.legende-ruban li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 14px; align-items: start; }
.legende-ruban .puce-ruban { grid-row: span 2; width: 16px; height: 2px; margin-top: 10px; background: var(--c); }
.legende-ruban .puce-ruban.tout { height: 3px; margin-top: 9.5px; }
.legende-ruban .puce-ruban.lecture { height: 1px; margin-top: 10.5px; }
.legende-ruban .puce-epingle { grid-row: span 2; width: 1px; height: 14px; margin: 4px 0 0 0; background: var(--accent); }
.legende-ruban .t, .legende-ruban .v { grid-column: 2; }
.legende-ruban .t { font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.legende-ruban .v { font-size: 16px; font-weight: 400; line-height: 1.45; }
.legende-ruban span.ouvert { color: var(--encre); font-weight: 600; }
.legende-ruban span.ferme { color: var(--encre-2); font-weight: 400; }
.puce-ruban.tout { --c: var(--encre); }
.puce-ruban.ajouts { --c: var(--sable); }
.puce-ruban.lecture { --c: var(--sable-clair); }
@container app (min-width: 980px) {
  .legende-ruban { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 0 32px; }
  /* sous-grille : un intitulé de 2 lignes ne décale plus sa valeur, les 4 valeurs partent de la même ligne */
  .legende-ruban li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 2px; }
  .legende-ruban .t { align-self: end; }
  /* la puce suit son intitulé, en bas de la 1re rangée */
  .legende-ruban .puce-ruban, .legende-ruban .puce-epingle { grid-row: 1; align-self: end; margin-top: 0; }
  .legende-ruban .puce-ruban { margin-bottom: 10px; }
  .legende-ruban .puce-ruban.tout { margin-bottom: 9.5px; }
  .legende-ruban .puce-ruban.lecture { margin-bottom: 10.5px; }
  .legende-ruban .puce-epingle { margin-bottom: 4px; }
}

/* ===== Photos et croquis ===== */
.photo-bloc { display: grid; gap: 8px; align-content: start; margin: 0; min-width: 0; }
.photo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 5 / 4;
  padding: 0;
  border: 0;
  border-radius: var(--rayon-1);
  overflow: hidden;
  background: none;
  color: var(--encre-2);
}
button.photo { cursor: zoom-in; }
button.photo:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tirage { position: absolute; inset: 0; display: grid; place-items: center; background: var(--surface-2); }
.tirage > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tirage > img.chargee { background: var(--surface-2); }
.tirage .croquis { width: auto; height: 36%; aspect-ratio: 1; }
.photo-legende {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.croquis { width: 48px; height: 48px; color: var(--encre-2); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Sans photo, le croquis repose sur le lin de la maison : une place gardée, jamais une image cassée */
.croquis-seul { display: grid; place-items: center; width: 100%; aspect-ratio: 5 / 4; border-radius: var(--rayon-1); background: var(--surface-2); color: var(--encre-2); }
.croquis-seul .croquis { width: auto; height: 40%; aspect-ratio: 1; }
.photo-bloc.f-ligne, .croquis-seul.f-ligne { width: 64px; }
.photo-bloc.f-ligne .croquis, .croquis-seul.f-ligne .croquis { width: 30px; height: 30px; stroke-width: 1.5; }
.photo-bloc.f-table, .croquis-seul.f-table { width: 56px; }
.photo-bloc.f-table .croquis, .croquis-seul.f-table .croquis { width: 26px; height: 26px; stroke-width: 1.7; }
.photo-bloc.f-recap, .croquis-seul.f-recap { width: 56px; }
.photo-bloc.f-recap .croquis, .croquis-seul.f-recap .croquis { width: 26px; height: 26px; stroke-width: 1.7; }
.photo-bloc.f-ajout, .croquis-seul.f-ajout { width: 56px; }
.photo-bloc.f-ajout .croquis, .croquis-seul.f-ajout .croquis { width: 30px; height: 30px; stroke-width: 1.5; }
.photo-bloc.f-carte { width: 100%; }
.photo-bloc.f-carte .croquis { stroke-width: 0.5; }
.croquis-seul.f-carte { aspect-ratio: 3 / 2; min-height: 0; }
.croquis-seul.f-carte .croquis { width: 76px; height: 76px; stroke-width: 0.7; }
.photo-bloc.f-grand { width: 100%; max-width: 640px; }
.photo-bloc.f-grand .croquis, .croquis-seul.f-grand .croquis { stroke-width: 0.36; }
.photo-bloc.f-grand .tirage > img { object-fit: contain; }
.photo-bloc.f-grand .photo-legende {
  position: static;
  width: auto; height: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  font-size: 13px;
  color: var(--encre-2);
}

/* ===== E2 : lignes de la commande ===== */
.corps-commande { display: grid; gap: 56px; min-width: 0; }
.lignes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 16px; padding-block: 18px; align-items: start; }
.ligne:first-child { padding-top: 12px; }
.ligne + .ligne { border-top: 1px solid var(--trait); }
.ligne-corps { display: grid; gap: 2px; min-width: 0; }
.ligne-nom { font-size: 16px; font-weight: 500; line-height: 1.4; }
.ligne-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.etiquette {
  display: inline-flex;
  align-items: center;
  font: 400 13px/1.4 var(--texte);
  color: var(--encre-2);
}
.etiquette.offerte, .etiquette.extra, .etiquette.ajout { color: var(--accent); font-weight: 500; }
.ligne-calcul { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin-top: 6px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ligne-qte { color: var(--encre-2); white-space: nowrap; }
.points { flex: 1 1 auto; min-width: 8px; }
.ligne-total { margin-left: auto; font-weight: 500; white-space: nowrap; color: var(--encre); }
.ligne-remise { font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.lignes-table { display: none; }
.b-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.b-table th,
.recap th {
  font: 400 13px/1.3 var(--texte);
  color: var(--encre-2);
  text-align: left;
  padding: 0 24px 14px 0;
  border-bottom: 1px solid var(--trait-fort);
  white-space: nowrap;
}
.b-table td { padding: 18px 24px 18px 0; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.b-table .m, .recap .m { text-align: right; white-space: nowrap; }
.b-table th:last-child, .b-table td:last-child, .recap th:last-child, .recap td:last-child { padding-right: 0; }
.b-table .art { align-items: center; gap: 16px; }
.b-table .total { font-weight: 500; }
.b-table small { display: block; margin-top: 2px; font-size: 13px; color: var(--encre-2); }
@container app (min-width: 620px) {
  .lignes { display: none; }
  .lignes-table { display: block; }
}

/* ===== Montants ===== */
.totaux { display: grid; gap: 14px; font-variant-numeric: tabular-nums; }
.totaux > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.totaux dt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; color: var(--encre-2); }
.totaux dd { margin-left: auto; font-size: 15px; font-weight: 500; color: var(--encre); text-align: right; white-space: nowrap; }
.totaux .regle-ok dt::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background-color: var(--accent);
  -webkit-mask: url("/croquis/coche-acompte.svg") center / 12px no-repeat;
  mask: url("/croquis/coche-acompte.svg") center / 12px no-repeat;
}
/* Reste dû : le chiffre qui compte, en romain, comme le total d'une facture de maison */
.totaux .reste { align-items: last baseline; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--encre); }
.totaux .reste dt { font-size: 15px; font-weight: 500; color: var(--encre); }
.totaux .reste dd { font: 400 38px/1 var(--titrage); letter-spacing: -0.005em; color: var(--encre); font-variant-numeric: lining-nums tabular-nums; }
.cote-commande { display: grid; gap: 16px; align-content: start; min-width: 0; }
@container app (min-width: 780px) {
  .totaux .reste dd { font-size: 44px; }
  .totaux .regle-ok dt { margin-left: -20px; }
}
@container app (min-width: 980px) {
  .corps-commande { grid-template-columns: minmax(0, 1fr) 320px; gap: 80px; align-items: start; }
  .cote-commande { position: sticky; top: calc(var(--h-entete) + 32px); }
}
/* avant barré, comme dans le tableau au-dessus : une seule grammaire ; « puis » reste lu, masqué visuellement */
.montants .totaux dd .avant { font-size: 13px; font-weight: 400; color: var(--encre-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.montants .totaux dd .puis { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.montants .totaux dd .apres { display: block; font-weight: 500; color: var(--encre); }
.montants .totaux .ecart { align-items: first baseline; padding-block: 14px; border-block: 1px solid var(--trait); }
.montants .totaux .ecart dt { color: var(--encre); }
.montants .totaux .ecart dd { font: 400 30px/1.1 var(--titrage); letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.montants .totaux .ecart dd small { display: block; margin-top: 4px; font: 400 13px/1.3 var(--texte); color: var(--encre-2); }

/* ===== E3 : quantités, articles ajoutés, demande écrite ===== */
.liste-lignes { display: grid; }
.ligne-edit { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px 16px; padding-block: 18px; align-items: start; }
.ligne-edit:first-child { padding-top: 12px; }
.ligne-edit + .ligne-edit { border-top: 1px solid var(--trait); }
.ligne-edit.modifiee::before { content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 2px; background: var(--sable); }
.ligne-edit.modifiee:first-child::before { top: 12px; }
.ligne-edit.modifiee .stepper output { color: var(--accent); font-weight: 600; }
.ligne-edit-corps { display: grid; gap: 2px; min-width: 0; }
.ligne-edit-gestes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; }
.detail { font-size: 15px; line-height: 1.5; color: var(--encre-2); }
.ligne-edit.fixe .raison { color: var(--encre-2); }
@container app (min-width: 560px) { .ligne-edit-gestes { grid-column: 2; justify-content: flex-start; } }
@container app (min-width: 720px) {
  .ligne-edit { grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; }
  .ligne-edit-gestes { grid-column: 3; }
}
.ajouts-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.ajout-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; padding-block: 18px; align-items: center; }
.ajout-item:first-child { padding-top: 12px; }
.ajout-item + .ajout-item { border-top: 1px solid var(--trait); }
.ajout-item > .bouton.discret { justify-self: end; }
.ajout-texte { display: grid; gap: 4px; min-width: 0; font-variant-numeric: tabular-nums; }
.ecrite-reprise { font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.vide { display: grid; justify-items: start; gap: 20px; padding-block: 8px 0; font-size: 15px; color: var(--encre-2); }
.champ { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.champ > label, .champ > legend { padding: 0; font-size: 15px; font-weight: 500; color: var(--encre); }
.champ > legend { margin-bottom: 8px; }
.choix { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.choix-item { display: inline-flex; align-items: center; gap: 12px; min-height: var(--h-cible); cursor: pointer; font-size: 16px; font-weight: 400; }
.choix-item input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--trait-controle);
  border-radius: var(--rayon-rond);
  background: var(--carte);
  cursor: pointer;
}
.choix-item input:checked { border-color: var(--encre); background: radial-gradient(circle, var(--encre) 0 4px, var(--carte) 4.5px); }
.choix-item:has(input:checked) { font-weight: 500; }
textarea {
  display: block;
  width: 100%;
  min-height: 168px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid var(--trait-controle);
  border-radius: var(--rayon-1);
  background: var(--carte);
  color: var(--encre);
  font-size: 17px;
  line-height: 1.55;
}
textarea:focus-visible { outline-offset: 2px; }

/* Pas de quantité : 2 boutons ronds et le chiffre */
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button {
  appearance: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: var(--rayon-rond);
  border: 1px solid var(--trait-controle);
  background: transparent;
  color: var(--encre);
}
.stepper button:disabled { color: var(--pas-inactif); border-color: var(--pas-inactif-trait); }
.stepper svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; fill: none; }
/* chiffre du système, pas du romain : le 0 étroit de Cormorant se lirait comme des parenthèses */
.stepper output { display: inline-block; min-width: 40px; text-align: center; font: 400 20px/1 var(--texte); color: var(--encre); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .stepper button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--encre); } }

/* ===== E4 : catalogue libre-service ===== */
/* Les rayons en sommaire : une rangée de renvois, chacun sous son filet */
.onglets ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 32px; }
.onglets li { display: grid; }
.onglet {
  appearance: none;
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  color: var(--encre);
  font: 400 16px/1.3 var(--texte);
}
.onglet .croquis { width: 24px; height: 24px; stroke-width: 1.8; }
.onglet-n { font-size: 14px; font-weight: 400; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.onglet::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--encre-2);
  -webkit-mask: url("/croquis/chevron.svg") center / 12px no-repeat;
  mask: url("/croquis/chevron.svg") center / 12px no-repeat;
}
@media (hover: hover) {
  .onglet:hover .onglet-nom { text-decoration: underline; text-decoration-color: var(--sable); text-decoration-thickness: 1px; text-underline-offset: 5px; }
}
.rayon { display: grid; gap: 28px; min-width: 0; }
.titre-rayon { display: flex; align-items: center; gap: 14px; margin-bottom: 0; scroll-margin-top: calc(var(--h-entete) + 24px); }
.titre-rayon:focus { outline: none; }
.titre-rayon .croquis { display: none; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 56px 32px; }
.carte-produit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.carte-produit > .photo-bloc, .carte-produit > .croquis-seul { margin-bottom: 18px; }
/* Carte choisie : un filet anthracite sous l'image, là où se pose le regard ; aucun fond */
.carte-produit > .photo-bloc, .carte-produit > .croquis-seul { box-shadow: 0 2px 0 transparent; }
.carte-produit.choisie > .photo-bloc, .carte-produit.choisie > .croquis-seul { box-shadow: 0 2px 0 var(--encre); }
.nom-produit { font: 500 17px/1.35 var(--texte); letter-spacing: -0.004em; color: var(--encre); }
.description { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.carte-pied { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 16px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); }
.prix { font: 500 17px/1.3 var(--texte); font-variant-numeric: tabular-nums; }
.prix small { display: block; margin-top: 4px; font: 400 13px/1.3 var(--texte); color: var(--encre-2); }
.dispo { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.carte-pied .erreur-ligne { grid-column: 1 / -1; margin-top: 0; }
.pastilles { display: flex; gap: 2px; width: 72px; }
.pastilles i { flex: 1; height: 2px; background: var(--trait-fort); }
.pastilles i.pris { background: var(--encre); }
.jauge { position: relative; display: block; width: 72px; height: 2px; background: var(--trait-fort); }
.jauge i { position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--encre); }
.carte-produit.indispo .photo-bloc, .carte-produit.indispo .croquis-seul { opacity: 0.5; }
.carte-produit.indispo .nom-produit { color: var(--encre-2); }
.carte-produit.indispo .dispo { color: var(--encre); font-weight: 500; }
/* Dès 980 px, les rayons courent sur une même grille de 3 colonnes : un rayon d'1 carte prend 1 colonne, de 2 cartes
   2 colonnes, de 3 et plus toute la largeur ; l'ordre du document est gardé */
@container app (min-width: 980px) {
  .ecran:has(.rayon) { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .ecran:has(.rayon) > * { grid-column: 1 / -1; }
  .ecran:has(.rayon) > .rayon { grid-column: auto / span 1; }
  .ecran:has(.rayon) > .rayon:has(.carte-produit:nth-child(2)) { grid-column: auto / span 2; }
  .ecran:has(.rayon) > .rayon:has(.carte-produit:nth-child(3)) { grid-column: 1 / -1; }
  .ecran:has(.rayon) .cartes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 40px; }
  /* un titre de rayon sur 2 lignes ne décale plus les images de sa rangée : tous gardent la place de 2 lignes */
  .ecran:has(.rayon) .titre-rayon { min-height: 2.6em; align-items: flex-end; }
}
.indispo-marque { width: 16px; height: 16px; flex: none; stroke: var(--encre-2); fill: none; stroke-width: 1.3; }

/* ===== E5 et E7 : récapitulatif ===== */
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 12 px de plus à gauche : le filet des lignes changées se trace dans la gouttière sans être rogné par le défilement */
.defile:has(.recap) { margin-left: -12px; padding-left: 12px; }
.recap { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.recap th { padding-right: 16px; }
.recap td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.recap tr.change td:first-child, .recap tr.ajout td:first-child { position: relative; }
.recap tr.change td:first-child::before, .recap tr.ajout td:first-child::before { content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 2px; background: var(--sable); }
.art { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.art > .photo-bloc, .art > .croquis-seul { flex: none; }
.art-texte { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.art-nom { font-weight: 500; line-height: 1.4; }
.art-meta { font-size: 13px; line-height: 1.45; color: var(--encre-2); }
.art-meta .regle { text-transform: lowercase; }
.recap s { font-size: 13px; color: var(--encre-2); text-decoration-thickness: 1px; text-decoration-color: var(--encre-2); }
.recap .apres { display: block; font-weight: 600; color: var(--encre); }
.conditions p { font-size: 15px; line-height: 1.6; }
.avenant { padding: 20px 24px; border-radius: var(--rayon-1); background: var(--surface-2); font-size: 15px; line-height: 1.65; }
.conditions p.avenant { font-size: 15px; }
.recap-ecrite p { font-size: 16px; }
/* Sous 620 px, le tableau avant et après se lit en liste, comme les lignes de la commande : l'article en haut, puis la
   quantité et le montant. L'en-tête du tableau est masqué visuellement et reste lu. */
@container app (max-width: 619.98px) {
  .recap, .recap tbody { display: block; }
  .recap thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .recap tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px 16px; padding-block: 18px; border-bottom: 1px solid var(--trait); }
  .recap td { display: block; padding: 0; border-bottom: 0; }
  .recap td:first-child { grid-column: 1 / -1; }
  .recap td:nth-child(2) { padding-left: 70px; text-align: left; color: var(--encre-2); }
  .recap td.m s, .recap td.m .apres { display: inline; }
  .recap td.m .apres { margin-left: 8px; }
  .recap tr.change td:first-child::before, .recap tr.ajout td:first-child::before { display: none; }
  .recap tr.change::before, .recap tr.ajout::before { content: ""; position: absolute; left: -12px; top: 18px; bottom: 18px; width: 2px; background: var(--sable); }
  .defile:has(.recap) { overflow-x: visible; }
}
@supports (content: "x" / "") {
  @container app (max-width: 619.98px) {
    .recap td:nth-child(2)::before { content: "Qté\00a0" / ""; }
  }
}

/* Accord : la case, le code à 6 chiffres et le bouton */
.accord { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin: 0; padding-top: 40px; border-top: 1px solid var(--encre); }
.accord > .titre-bloc { margin-bottom: 0; }
.case { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 16px; align-items: start; min-height: var(--h-cible); cursor: pointer; font-size: 16px; font-weight: 500; line-height: 1.5; }
.case input { appearance: none; -webkit-appearance: none; grid-area: 1 / 1; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--encre); border-radius: var(--rayon-1); background: var(--carte); cursor: pointer; }
.case input:checked { background: var(--bouton-fond); border-color: var(--bouton-fond); }
.case .coche { grid-area: 1 / 1; width: 24px; height: 24px; pointer-events: none; fill: none; stroke: var(--bouton-encre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.case .coche path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.case input:checked + .coche path { stroke-dashoffset: 0; }
#bouton-accord { justify-self: stretch; }
@container app (min-width: 600px) { #bouton-accord { justify-self: start; } }
/* 6 cases de lin, un filet sous chacune : on y reconnaît un champ, sans cadre */
.code {
  --espace: 0.82em;
  --pas: calc(1ch + var(--espace));
  --marge-case: calc(var(--pas) * 0.08);
  --long: calc(var(--pas) - 2 * var(--marge-case));
  --code-trait: var(--encre-2);
  --code-case: var(--surface-2);
  width: calc(6 * var(--pas) + var(--espace) / 2 + 3px);
  max-width: 100%;
  min-height: 56px;
  padding: 10px 0 10px calc(var(--espace) / 2);
  border: 0;
  border-radius: 0;
  font: 500 28px/1.1 var(--texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--espace);
  color: var(--encre);
  caret-color: var(--encre);
  background-color: transparent;
  background-image:
    linear-gradient(var(--code-trait), var(--code-trait)), linear-gradient(var(--code-trait), var(--code-trait)), linear-gradient(var(--code-trait), var(--code-trait)),
    linear-gradient(var(--code-trait), var(--code-trait)), linear-gradient(var(--code-trait), var(--code-trait)), linear-gradient(var(--code-trait), var(--code-trait)),
    linear-gradient(var(--code-case), var(--code-case)), linear-gradient(var(--code-case), var(--code-case)), linear-gradient(var(--code-case), var(--code-case)),
    linear-gradient(var(--code-case), var(--code-case)), linear-gradient(var(--code-case), var(--code-case)), linear-gradient(var(--code-case), var(--code-case));
  background-repeat: no-repeat;
  background-size: var(--long) 1px, var(--long) 1px, var(--long) 1px, var(--long) 1px, var(--long) 1px, var(--long) 1px,
    var(--long) 100%, var(--long) 100%, var(--long) 100%, var(--long) 100%, var(--long) 100%, var(--long) 100%;
  background-position:
    calc(var(--marge-case)) 100%, calc(var(--pas) + var(--marge-case)) 100%, calc(2 * var(--pas) + var(--marge-case)) 100%,
    calc(3 * var(--pas) + var(--marge-case)) 100%, calc(4 * var(--pas) + var(--marge-case)) 100%, calc(5 * var(--pas) + var(--marge-case)) 100%,
    calc(var(--marge-case)) 0, calc(var(--pas) + var(--marge-case)) 0, calc(2 * var(--pas) + var(--marge-case)) 0,
    calc(3 * var(--pas) + var(--marge-case)) 0, calc(4 * var(--pas) + var(--marge-case)) 0, calc(5 * var(--pas) + var(--marge-case)) 0;
}
.code:focus { --code-trait: var(--encre); }
.code:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }

/* ===== E6 : récapitulatif accepté, suivi ===== */
.scelle { margin-top: 0; padding-top: 32px; border-top: 1px solid var(--encre); }
.scelle .titre-bloc { margin-bottom: 0; }
.scelle .totaux { margin-top: 20px; }
.suivi-entete { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.suivi-entete .titre-bloc { margin-bottom: 0; }
/* État de la demande : un mot, dans la couleur de son sens, sans pastille */
.etat {
  --e: var(--encre-2);
  display: inline-block;
  min-height: auto;
  padding: 0;
  font: 500 14px/1.3 var(--texte);
  color: var(--e);
  white-space: nowrap;
}
.etat-Envoyee, .etat-Ajustee, .etat-Appliquee { --e: var(--encre); }
.etat-A_valider, .etat-Brouillon { --e: var(--accent); }
.etat-Refusee { --e: var(--erreur); }
.suivi-entete { margin-bottom: 12px; }
.etapes { list-style: none; padding: 0; margin: 0; display: grid; }
.etape { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 18px; padding-bottom: 28px; }
.etape:last-child { padding-bottom: 0; }
.etape::before { content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 4px; width: 1px; background: var(--trait-fort); }
.etape:last-child::before { display: none; }
.etape.fait::before { background: var(--encre); }
.marque-etape {
  grid-row: span 2;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--rayon-rond);
  border: 1px solid var(--trait-fort);
  background: var(--fond);
}
.marque-etape svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.etape.fait .marque-etape { background: var(--bouton-fond); border-color: var(--bouton-fond); color: var(--bouton-encre); }
.etape.encours .marque-etape { border: 1.5px solid var(--etape-c, var(--encre)); }
.etape.encours .marque-etape::after { content: ""; width: 8px; height: 8px; border-radius: var(--rayon-rond); background: var(--etape-c, var(--encre)); }
.etape.encours.attente { --etape-c: var(--accent); }
.etape.refus .marque-etape { border: 1.5px solid var(--erreur); color: var(--erreur); }
.etape.clos .marque-etape { border: 1.5px solid var(--encre-2); color: var(--encre-2); }
.etape-titre { padding-top: 1px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.etape-texte { display: grid; gap: 10px; max-width: 64ch; margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--encre-2); }
.etape.encours .etape-texte, .etape.refus .etape-texte, .etape.clos .etape-texte, .etape:last-child.fait .etape-texte { color: var(--encre); }
.etape .actions { margin-top: 10px; }

/* ===== Grand format de la photo ===== */
.visionneuse {
  width: min(720px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--rayon-2);
  background: var(--carte);
  color: var(--encre);
  box-shadow: var(--ombre-dialogue);
}
.visionneuse::backdrop { background: var(--voile); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.visionneuse-carte { display: grid; gap: 16px; padding: 28px; }
.visionneuse-titre { font: 400 24px/1.15 var(--titrage); letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre); }
.visionneuse .actions { justify-content: flex-end; }
@media (min-width: 780px) { .visionneuse-titre { font-size: 28px; } }

/* Appel en cours vers le serveur : les gestes attendent la réponse */
.ecran[aria-busy="true"] button { cursor: progress; }

/* ===== Mouvement : retour à l'appui, couleurs au survol, coche ; rien au chargement ===== */
@media (prefers-reduced-motion: no-preference) {
  .bouton, .formulaire button[type="submit"], .onglet, button.photo {
    transition: transform 100ms var(--courbe), background-color 150ms var(--courbe), border-color 150ms var(--courbe), color 150ms var(--courbe), text-decoration-color 150ms var(--courbe);
  }
  .stepper button { transition: transform 100ms var(--courbe), background-color 150ms var(--courbe), border-color 150ms var(--courbe); }
  .bouton:active:not(:disabled), .formulaire button[type="submit"]:active, .onglet:active, button.photo:active { transform: scale(0.98); }
  .stepper button:active:not(:disabled) { transform: scale(0.92); }
  .case input { transition: background-color 150ms var(--courbe), border-color 150ms var(--courbe); }
  .case .coche path { transition: stroke-dashoffset 150ms var(--courbe); }
  .carte-produit > .photo-bloc, .carte-produit > .croquis-seul { transition: box-shadow 150ms var(--courbe); }
  .stepper output.bouge { animation: bouge 120ms ease-out; }
}
@keyframes bouge {
  from { opacity: 0.4; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===== Transparence réduite, couleurs forcées ===== */
@media (prefers-reduced-transparency: reduce) {
  .app-entete { background: var(--fond); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .visionneuse::backdrop { background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .bouton, .formulaire button[type="submit"], .stepper button, .case input, .choix-item input { border: 1px solid CanvasText; }
  .app-entete { border-bottom: 1px solid CanvasText; }
  .ruban-seg, .ruban-piste, .puce-ruban, .pastilles i, .jauge, .jauge i { background: CanvasText; }
  .totaux .regle-ok dt::before, .onglet::after, .marque { background-color: CanvasText; }
  .ligne-edit.modifiee::before, .recap tr.change td:first-child::before, .recap tr.ajout td:first-child::before,
  .recap tr.change::before, .recap tr.ajout::before, .ruban-piste::after { background: CanvasText; }
  .ruban.compresse .ruban-piste::before { background: Canvas; }
  .croquis-seul, .tirage { border: 1px solid CanvasText; }
  .carte-produit.choisie > .photo-bloc, .carte-produit.choisie > .croquis-seul { border-bottom: 3px solid Highlight; }
  .code { border-bottom: 1px solid CanvasText; }
  /* repères dessinés en fond, que ce mode efface : redonnés */
  .cran, .epingle, .puce-epingle, .etape::before, .etape.encours .marque-etape::after { background: CanvasText; }
  .etape.fait .marque-etape { forced-color-adjust: none; background: CanvasText; color: Canvas; }
  .choix-item input { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .choix-item input:checked { border-color: Highlight; background: radial-gradient(circle, Highlight 0 4px, Canvas 4.5px); }
  .case input:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  .case .coche { forced-color-adjust: none; stroke: HighlightText; }
  .pastilles i:not(.pris), .jauge { background: GrayText; }
  .bouton:disabled, .stepper button:disabled { color: GrayText; border-color: GrayText; }
}