/* ------------------------------------------------------------------------
   Maquette palier 1 — feuille de style unique.

   Direction : le produit met en regard un patron anglais (la source) et sa
   traduction française (le livrable). Toute la page reprend ce face-à-face
   « source | résultat ». Motif discret : la grille des diagrammes de points.

   Palette   : encre épicéa profond, rouge garance (teinture laine historique),
               papier chaud, laine écrue pour les panneaux.
   Typo      : Newsreader (titres, éditorial artisanal) + Karla (texte), polices
               libres (SIL OFL) auto-hébergées dans assets/fonts/ — aucun CDN.
   ------------------------------------------------------------------------ */

/* Polices auto-hébergées (SIL OFL, fichiers latin dans assets/fonts/) :
   Newsreader — serif éditoriale à dimension optique, chaude et humaniste ;
   Karla — grotesque humaniste au dessin irrégulier assumé. Six fichiers :
   les trois graisses réellement utilisées (400/500/600) par famille. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/newsreader-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/karla-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/karla-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/karla-latin-600-normal.woff2') format('woff2');
}

:root {
  --papier: #fbfaf8;
  --encre: #16302b;         /* épicéa très profond, sert de « noir » */
  --encre-douce: #5c625a;
  --laine: #ece5d8;         /* laine écrue — panneaux */
  --laine-ligne: #ddd3c0;
  --garance: #a8324a;       /* accent unique */
  --garance-fonce: #7f2338;
  --source: #f0efe9;        /* fond « patron original » */

  --pas: 1.5rem;
  --large: 66rem;
  --rayon: 3px;

  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Karla', 'Segoe UI', Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --papier: #14181a;
    --encre: #eef0ea;
    --encre-douce: #a7ada3;
    --laine: #1e2422;
    --laine-ligne: #2c332f;
    --garance: #e8899a;
    --garance-fonce: #f0a9b6;
    --source: #191f1d;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.65 var(--sans);
  font-feature-settings: 'ss01';
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem); font-weight: 400; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); }
h3 { font-size: 1.2rem; }

/* Pas de max-width ici (retiré) : un plafond en em sur tous les <p> les rendait plus
   étroits que leur conteneur (cartes, encarts, texte d'aide) sur toutes les pages qui
   chargent cette feuille de style. Le texte occupe la largeur de son conteneur. */
p { margin: 0 0 1rem; }
strong { font-weight: 600; }

/* --- ossature ---------------------------------------------------------- */

.enveloppe { max-width: var(--large); margin: 0 auto; padding: 0 var(--pas); }

.bloc { padding: clamp(3rem, 2rem + 6vw, 6rem) 0; }
.bloc + .bloc { border-top: 1px solid var(--laine-ligne); }
/* Bandeaux « laine » : grille fine évoquant un diagramme de points, en surimpression
   discrète de la teinte laine — le motif annoncé en tête de fichier, jamais réalisé
   jusqu'ici. Densité calquée sur une grille de diagramme (une case ~ 1,5rem). */
.bloc--laine {
  background-color: var(--laine);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in srgb, var(--encre) 6%, transparent) 23px 24px),
    repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in srgb, var(--encre) 6%, transparent) 23px 24px);
  border: none;
}

/* --- navigation ------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.25rem var(--pas);
  max-width: var(--large);
  margin: 0 auto;
  border-bottom: 1px solid var(--laine-ligne);
}
.marque {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.02em;
}
.marque b { color: var(--garance); font-weight: 500; }
.site-nav .liens { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a:not(.marque):not(.bouton) {
  text-decoration: none;
  color: var(--encre-douce);
  padding-bottom: 2px;
}
.site-nav a:not(.marque):not(.bouton):hover { color: var(--encre); }
.site-nav a[aria-current] { color: var(--encre); box-shadow: inset 0 -2px var(--garance); }

/* --- boutons --------------------------------------------------------- */

/* `hidden` l'emporte sur tout. Sans cette règle, une classe qui pose un display
   (.bouton, .etapes…) bat l'attribut à spécificité égale, et un élément masqué en HTML
   s'affiche quand même — c'est ainsi que « Modifier ma commande » apparaissait avant la
   moindre commande. */
[hidden] { display: none !important; }

.bouton {
  display: inline-block;
  font: 500 1rem/1 var(--sans);
  padding: 0.85em 1.4em;
  border-radius: var(--rayon);
  text-decoration: none;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--papier);
  cursor: pointer;
  transition: background 0.12s ease;
}
.bouton:disabled, .bouton[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.bouton:disabled:hover, .bouton[disabled]:hover {
  background: var(--encre);
  border-color: var(--encre);
}
.bouton:hover { background: var(--garance-fonce); border-color: var(--garance-fonce); }
.bouton--vif { background: var(--garance); border-color: var(--garance); }
.bouton--vif:hover { background: var(--garance-fonce); border-color: var(--garance-fonce); }
.bouton--creux { background: transparent; color: var(--encre); }
.bouton--creux:hover { background: var(--laine); color: var(--encre); border-color: var(--encre); }
button.bouton { font-family: var(--sans); }

/* --- la paire bilingue (motif central) ------------------------------ */

.paire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  overflow: hidden;
  font-size: 0.95rem;
}
.paire > div { padding: 1.1rem 1.25rem; }
.paire .en { background: var(--source); border-right: 1px solid var(--laine-ligne); }
.paire .fr { background: var(--papier); }
.paire .etiq {
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--encre-douce);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.paire .en .etiq { color: var(--garance); }
.paire p { margin: 0.3rem 0; max-width: none; }
@media (max-width: 640px) {
  .paire { grid-template-columns: 1fr; }
  .paire .en { border-right: none; border-bottom: 1px solid var(--laine-ligne); }
}

/* --- hero ----------------------------------------------------------- */

.hero { padding-top: clamp(2.5rem, 1.5rem + 5vw, 5rem); }
.hero p.chapo { font-size: 1.2rem; color: var(--encre-douce); }
.hero .actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.8rem 0 1.4rem; }

/* Bandeau de confiance sous les CTA du hero — texte seul, pas de badge/icône,
   cohérent avec la sobriété éditoriale du reste de la page. */
.garanties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.4rem;
  font-size: 0.92rem;
  color: var(--encre-douce);
}
.garanties li { position: relative; padding-left: 1.1rem; }
.garanties li::before { content: '•'; position: absolute; left: 0; color: var(--garance); }

/* --- bio (encart photo + argumentaire personnel) -------------------- */

.bio { display: grid; grid-template-columns: 11rem 1fr; gap: 2rem; align-items: start; }
.bio h2 { margin-top: 0; }
.bio__photo {
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--laine-ligne);
  border-radius: var(--rayon);
  background: var(--laine);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.bio__photo span {
  font-size: 0.8rem;
  color: var(--encre-douce);
}
.bio__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon); }
@media (max-width: 640px) {
  .bio { grid-template-columns: 8rem 1fr; gap: 1.2rem; }
}

/* --- grille de contenu -------------------------------------------- */

.colonnes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem;
}
.etape { border-top: 2px solid var(--encre); padding-top: 0.8rem; }
.etape .n {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--garance);
  line-height: 1;
  display: block;
  margin-bottom: 0.3rem;
}
.etape h3 { margin-bottom: 0.3rem; }
.etape p { color: var(--encre-douce); font-size: 0.98rem; }

/* --- panneaux d'offre / tarifs ---------------------------------- */

/* Grille des 4 fiches de tarifs : forcée sur une seule ligne dès la largeur
   tablette (contrainte produit — jamais deux rangées), cartes resserrées en
   conséquence ; empile en dessous de 720px. */
.colonnes--tarifs { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 720px) {
  .colonnes--tarifs { grid-template-columns: 1fr; }
}

.formule {
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  padding: 1.6rem;
  background: var(--papier);
  display: flex;
  flex-direction: column;
}
.colonnes--tarifs .formule { padding: 1.2rem; }
.colonnes--tarifs .formule h3 { font-size: 1.05rem; }
.colonnes--tarifs .formule .prix { font-size: 1.9rem; }
.colonnes--tarifs .formule ul { font-size: 0.88rem; }
.formule--phare { border-color: var(--garance); border-width: 2px; }
.formule .prix { font-family: var(--serif); font-size: 2.4rem; line-height: 1; margin: 0.4rem 0; }
.formule .prix small { font-family: var(--sans); font-size: 0.9rem; color: var(--encre-douce); }
.formule ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; font-size: 0.95rem; }
.formule li { padding: 0.35rem 0 0.35rem 1.4rem; position: relative; border-bottom: 1px solid var(--laine-ligne); }
.formule li::before { content: '·'; position: absolute; left: 0.3rem; color: var(--garance); font-weight: 700; }
.formule .bouton { margin-top: auto; text-align: center; }

.comparatif { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.comparatif th, .comparatif td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--laine-ligne); vertical-align: top; }
.comparatif thead th { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; }
.comparatif tbody th { font-weight: 500; color: var(--encre-douce); }

/* --- encadré rapport --------------------------------------------- */

.rapport-mise-en-avant { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 720px) { .rapport-mise-en-avant { grid-template-columns: 1fr; } }
.faux-rapport {
  background: var(--papier);
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  padding: 1.4rem;
  font-size: 0.9rem;
}
.faux-rapport h4 { font-family: var(--serif); font-weight: 500; margin: 0 0 0.8rem; }
.faux-rapport .item { padding: 0.5rem 0; border-top: 1px solid var(--laine-ligne); }
.faux-rapport .item:first-of-type { border-top: none; }
.faux-rapport .quoi { color: var(--garance); font-weight: 600; }

/* --- FAQ --------------------------------------------------------- */

.faq details {
  border-bottom: 1px solid var(--laine-ligne);
  padding: 1rem 0;
}
.faq summary {
  font-family: var(--serif);
  font-size: 1.1rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--garance); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: 0.7rem; color: var(--encre-douce); }

/* --- pied de page --------------------------------------------- */

.site-pied {
  border-top: 1px solid var(--laine-ligne);
  padding: 2.5rem var(--pas);
  max-width: var(--large);
  margin: 0 auto;
  color: var(--encre-douce);
  font-size: 0.9rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-pied a { color: var(--encre-douce); }

/* --- espace designer / vue bilingue -------------------------- */

.entete-espace { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.entete-espace h1 { margin: 0; font-size: 1.9rem; }
/* Ligne de session : à droite, à l'écart des boutons Commander (le bouton de déconnexion
   ne doit pas passer pour une troisième commande). */
.entete-espace [data-connexion] { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 0.6rem; }
.entete-espace [data-connexion][hidden] { display: none; }

.liste-patrons { border-top: 1px solid var(--laine-ligne); }
.liste-patrons .ligne {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0.2rem;
  border-bottom: 1px solid var(--laine-ligne);
}
.liste-patrons .ligne a { text-decoration: none; font-weight: 500; }
.jeton {
  font: 500 0.8rem/1 var(--sans);
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: var(--laine);
  color: var(--encre-douce);
  white-space: nowrap;
}
.jeton--pret { background: var(--garance); color: #fff; }
.jeton--erreur { background: var(--garance-fonce); color: #fff; }

.etapes {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.etapes li {
  flex: 1;
  text-align: center;
  font-size: 0.8rem;
  color: var(--encre-douce);
  padding-top: 0.6rem;
  border-top: 3px solid var(--laine-ligne);
}
.etapes li.faite { border-color: var(--garance); }
.etapes li.en-cours { border-color: var(--garance); color: var(--encre); font-weight: 600; }
@media (max-width: 640px) {
  .etapes { flex-wrap: wrap; gap: 0.8rem 0; }
  .etapes li { flex: 1 1 33%; }
}

.coordonnees-bancaires {
  border-collapse: collapse;
  margin: 0 0 1rem;
}
.coordonnees-bancaires th {
  text-align: left;
  font: 500 0.85rem/1.5 var(--sans);
  color: var(--encre-douce);
  padding: 0.2rem 1.2rem 0.2rem 0;
  vertical-align: top;
  white-space: nowrap;
}
.coordonnees-bancaires td { padding: 0.2rem 0; }
.coordonnees-bancaires code { font-size: 0.95rem; }

.onglets { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--laine-ligne); margin: 1.5rem 0; }
.onglets button {
  font: 500 0.98rem/1 var(--sans);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  color: var(--encre-douce);
}
.onglets button[aria-selected='true'] { color: var(--encre); border-color: var(--garance); }

/* Onglets de l'espace client (Mes commandes / Mes coordonnées) : mêmes repères que les
   onglets ci-dessus, mais ce sont des liens de navigation entre écrans. */
.onglets-espace { margin: 0 0 1.5rem; }
.onglets-espace a {
  font: 500 1.1rem/1 var(--sans);
  border-bottom: 3px solid transparent;
  padding: 0.85rem 1.1rem;
  color: var(--encre-douce);
  text-decoration: none;
}
.onglets-espace a:hover { color: var(--encre); }
.onglets-espace a[aria-current='page'] { color: var(--encre); font-weight: 600; border-color: var(--garance); }

.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--laine-ligne);
  border-top: none;
  font-size: 0.92rem;
}
.segment:first-child { border-top: 1px solid var(--laine-ligne); }
.segment > div { padding: 0.7rem 0.9rem; }
.segment .s-en { background: var(--source); border-right: 1px solid var(--laine-ligne); color: var(--encre-douce); }
.segment .s-fr { background: var(--papier); }
.segment.faible .s-fr { box-shadow: inset 3px 0 var(--garance); }
.segment .s-fr .drapeau { display: block; font-size: 0.75rem; color: var(--garance); margin-top: 0.3rem; }
.rubrique-section {
  font-family: var(--serif);
  font-size: 1.05rem;
  margin: 1.6rem 0 0.4rem;
  color: var(--encre-douce);
}
@media (max-width: 640px) {
  .segment { grid-template-columns: 1fr; }
  .segment .s-en { border-right: none; border-bottom: 1px solid var(--laine-ligne); }
}

/* --- extrait bilingue (aperçu gratuit + vue Texte) -------------- */

.extrait {
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  overflow: hidden;
}
.extrait__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--laine-ligne);
}
.extrait__col {
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.extrait__col--en { background: var(--source); color: var(--garance); border-right: 1px solid var(--laine-ligne); }
.extrait__col--fr { background: var(--papier); color: var(--encre-douce); }
.extrait__seg { display: grid; grid-template-columns: 1fr 1fr; }
.extrait__seg + .extrait__seg { border-top: 1px solid var(--laine-ligne); }
/* V2 : titre de section de la partie « instructions » — chevauche les 2 colonnes. */
.extrait__titre {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.7rem 1rem 0;
  font: 500 1.05rem/1.3 var(--serif);
  border-bottom: 1px dashed var(--laine-ligne);
}
.extrait__en {
  background: var(--source);
  border-right: 1px solid var(--laine-ligne);
  color: var(--encre-douce);
  font-size: 0.92rem;
  padding: 0.8rem 1rem;
}
.extrait__fr { background: var(--papier); padding: 0.8rem 1rem; font-size: 1rem; }
.extrait__en p, .extrait__fr p {
  margin: 0;
  max-width: none;
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
.extrait__suite {
  background: var(--laine);
  border-top: 1px dashed var(--laine-ligne);
  padding: 1.4rem 1.25rem;
}
@media (max-width: 640px) {
  .extrait__cols { display: none; }
  .extrait__seg { grid-template-columns: 1fr; }
  .extrait__en { border-right: none; border-bottom: 1px solid var(--laine-ligne); }
  .extrait__en::before, .extrait__fr::before {
    display: block;
    font: 600 0.72rem/1 var(--sans);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
  }
  .extrait__en::before { content: 'Original'; color: var(--garance); }
  .extrait__fr::before { content: 'Français'; color: var(--encre-douce); }
}

/* --- visionneuse du document traduit ----------------------------- */

.visionneuse__barre {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.visionneuse__fichier { margin: 0; margin-right: auto; font-size: 0.9rem; color: var(--encre-douce); }
.visionneuse__cadre {
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  background: var(--source);
}
.visionneuse__cadre iframe {
  display: block;
  width: 100%;
  border: 0;
  height: clamp(30rem, 75vh, 62rem);
}
.visionneuse--texte-seul { padding: 1.4rem 1.25rem; }

/* --- formulaires ------------------------------------------------ */

label { display: block; font-weight: 500; margin: 1rem 0 0.3rem; }
input[type='text'], input[type='email'], select {
  font: 400 1rem var(--sans);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--encre);
  width: 100%;
  max-width: 24rem;
}
input[type='file'] { font: 400 0.95rem var(--sans); margin-top: 0.3rem; }
/* Convention .champ : tout champ porteur de la classe reçoit le même habillage,
   même quand le sélecteur par type ne le couvre pas (textarea, mot de passe) —
   sans elle, le style navigateur par défaut rend le champ gris sur gris en
   thème sombre. Placeholder et état désactivé explicites, jamais le grisage
   navigateur ; contrastes ≥ 4,5:1 sur --source dans les deux thèmes (texte
   --encre 14,6 sombre / 12,2 clair, placeholder --encre-douce 7,3 / 5,4). */
input.champ, select.champ, textarea.champ {
  font: 400 1rem var(--sans);
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  background: var(--source);
  color: var(--encre);
  width: 100%;
  max-width: 24rem;
}
textarea.champ { max-width: 32rem; resize: vertical; }
input.champ::placeholder, textarea.champ::placeholder { color: var(--encre-douce); opacity: 1; }
input.champ:disabled, select.champ:disabled, textarea.champ:disabled {
  color: var(--encre-douce);
  opacity: 1;
  /* WebKit applique son grisage via -webkit-text-fill-color : à recouvrir aussi. */
  -webkit-text-fill-color: var(--encre-douce);
}
.champ-aide { font-size: 0.85rem; color: var(--encre-douce); margin: 0.3rem 0 0; }

.avis {
  padding: 0.9rem 1.1rem;
  border-radius: var(--rayon);
  background: var(--laine);
  border-left: 3px solid var(--garance);
  font-size: 0.95rem;
  margin: 1rem 0;
}

/* --- carte prix (V2) --------------------------------------------------- */

.carte-prix {
  border: 1px solid var(--laine-ligne);
  border-left: 3px solid var(--garance);
  border-radius: var(--rayon);
  background: var(--source);
  padding: 1.4rem 1.5rem;
  max-width: 30rem;
}
.carte-prix__resume { margin: 0; font: 500 1.1rem/1.4 var(--serif); }
.carte-prix__montant {
  margin: 0.2rem 0 0.6rem;
  font: 600 2.2rem/1.1 var(--serif);
  color: var(--garance);
}
.carte-prix__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 0.9rem 0 0.4rem; }

/* --- backoffice : KPI et traitements ----------------------------------- */

.kpi-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0 1.4rem;
}
.carte-kpi {
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  background: var(--source);
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.carte-kpi strong { font: 600 1.15rem/1.2 var(--sans); }
.carte-kpi span { font-size: 0.78rem; color: var(--encre-douce); }

/* KPIs + légende des badges sur une même rangée ; en dessous de ~48 rem la
   légende passe sous la grille. */
.traitements-haut {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.8rem;
}
.traitements-haut [data-kpis] { flex: 1 1 30rem; min-width: 0; }
.legende {
  flex: 1 1 14rem;
  max-width: 19rem;
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  background: var(--source);
  padding: 0.7rem 0.9rem;
  margin-top: 0.8rem; /* aligne le cadre sur le haut de la grille KPI */
}
.legende h2 {
  margin: 0 0 0.3rem;
  font: 600 0.72rem/1.3 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.legende p { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--encre-douce); }

.table-traitements { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table-traitements th, .table-traitements td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--laine-ligne);
}
.table-traitements .champ-aide { display: block; }
/* n° de job visible et copiable (débogage opérateur : corréler table, data/jobs/<id>
   et journal) — affiché comme une aide, copié au clic avec retour « copié ✓ ». */
.id-job {
  display: block;
  margin: 0.15rem 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--encre-douce);
  font: 0.85rem ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
  text-align: left;
  cursor: copy;
  overflow-wrap: anywhere;
}
.id-job:hover { color: var(--encre); text-decoration: underline dotted; }
.id-job--copie { color: var(--garance); }
/* Sous-étapes locales du tronc payé (décomposition, traduction, reconstruction) :
   lignes en retrait sous l'étape « Contenu complet », atténuées — lecture
   secondaire du même tableau, les jetons d'état gardent leur contraste propre. */
.table-traitements tr.sous-etape td {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  color: var(--encre-douce);
  font-size: 0.82rem;
}
.table-traitements tr.sous-etape td:first-child { padding-left: 1.6rem; }
.badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  border-radius: var(--rayon);
  font: 600 0.7rem/1.4 var(--sans);
  background: var(--laine);
  color: var(--encre);
}
.badge--attention { background: var(--garance); color: #fff; }

/* Profils de résolveur : une ligne par profil mémorisé — nom, badge d'état,
   résumé compact et actions alignés sur une même rangée lisible. */
.profil-resolveur {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--laine-ligne);
}
.profil-resolveur .champ-aide { margin: 0; }

/* Page résolveur (onglet LLM) : bloc lecture seule en grille terme/valeur —
   les URL (apiUrlBase) et commandes passent à la ligne sans casser la mise en
   page. Cible l'attribut data-params-lecture posé par gabaritResolveur. */
[data-params-lecture] dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1.2rem;
  margin: 0.6rem 0 0;
}
[data-params-lecture] dt { font-weight: 500; }
[data-params-lecture] dd { margin: 0; word-break: break-all; }
@media (max-width: 640px) {
  [data-params-lecture] dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  [data-params-lecture] dd { margin: 0 0 0.5rem; }
}

/* Fiche profil (onglet Profils) : cerne le bloc api du formulaire — la bordure
   gauche marque le périmètre de la configuration API saisie. (Le bloc harnais,
   jumeau d'avant le débranchement, n'existe plus.) */
[data-bloc-api] {
  border-left: 3px solid var(--laine-ligne);
  padding-left: 1rem;
  margin: 0.8rem 0 0;
}

/* Journal de debug brut (sortie du harnais) : couleurs du thème, lisibles
   en clair comme en sombre — jamais de fond codé en dur. */
.journal {
  max-height: 24rem;
  overflow: auto;
  margin: 0;
  padding: 0.75rem;
  background: var(--laine);
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 0.85rem/1.5 ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
}

/* Chemins d'artefacts cliquables (backoffice) : `a { color: inherit }` les rendrait
   indiscernables du texte — l'accent du thème suit les deux fonds, clair comme sombre. */
.journal a {
  color: var(--garance);
  text-decoration: underline;
}

/* Panneau latéral qui héberge le journal (front + backoffice) : pleine hauteur
   à droite, sans voile — la page reste utilisable pendant la lecture. */
.panneau-journal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: min(48rem, 94vw);
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border-left: 1px solid var(--laine-ligne);
  box-shadow: -0.5rem 0 1.5rem rgb(0 0 0 / 0.18);
  transform: translateX(102%);
  transition: transform 0.25s ease;
}
.panneau-journal--ouvert { transform: translateX(0); }
.panneau-journal__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.panneau-journal__tete h3 { margin: 0; font-family: var(--serif); overflow-wrap: anywhere; }
.panneau-journal .journal { flex: 1; max-height: none; }

/* Jumeau du panneau journal, pour la fiche profil (backoffice) : même coulissement
   pleine hauteur à droite, sans voile — plus étroit, un formulaire tient dans
   30 rem et le corps défile seul. */
.panneau-fiche {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: min(30rem, 94vw);
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border-left: 1px solid var(--laine-ligne);
  box-shadow: -0.5rem 0 1.5rem rgb(0 0 0 / 0.18);
  transform: translateX(102%);
  transition: transform 0.25s ease;
}
.panneau-fiche--ouvert { transform: translateX(0); }
.panneau-fiche__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.panneau-fiche__tete h3 { margin: 0; font-family: var(--serif); overflow-wrap: anywhere; }
.panneau-fiche__corps { flex: 1; overflow: auto; }

/* --- accessibilité -------------------------------------------- */

:focus-visible { outline: 2px solid var(--garance); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- backoffice, panneau Traitements : filtres d'état, pagination,
       ligne cliquable ouvrant le détail Étapes ----------------------- */

.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.8rem;
}
.barre-pagination {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0 0;
}
.table-traitements tbody tr[data-voir-etapes] { cursor: pointer; }
.table-traitements tbody tr[data-voir-etapes]:hover { background: var(--laine); }

/* --- backoffice : pleine largeur --------------------------------
   Le site public reste calé sur --large ; le backoffice exploite
   toute la largeur de l'écran (grille KPIs, tableaux de traitements). */
body[data-page='admin'] .site-nav,
body[data-page='admin'] .enveloppe,
body[data-page='admin'] .site-pied { max-width: none; }

/* --- backoffice : écrans Commandes, Clients et devis -----------------
   Ces écrans sont des outils de travail, pas de la lecture : ils prennent la
   largeur disponible. Sans ces règles, .tableau n'a aucun style et le tableau
   se rétracte à son contenu, tassé contre le bord gauche. */

.tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tableau th, .tableau td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--laine-ligne);
}
.tableau th { font: 600 0.8rem/1.3 var(--sans); color: var(--encre-douce); }
.tableau tbody tr:hover { background: var(--laine); }

/* Barre de filtres : une ligne, pas une colonne de champs empilés. */
.filtres-commandes {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1.25rem;
}
.filtres-commandes label { display: grid; gap: 0.25rem; font-size: 0.85rem; }
.filtres-commandes .champ { margin: 0; }

/* Fiches (clientes, demandes de devis) : des cartes côte à côte tant que la
   largeur le permet, plutôt qu'une colonne étroite sur un écran large. */
.fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.fiche-client, .fiche-devis {
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  padding: 1rem 1.15rem;
  background: var(--papier);
}
.fiche-client h3, .fiche-devis h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.fiche-client ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.fiche-devis label { display: inline-grid; gap: 0.2rem; font-size: 0.85rem; }

/* La fiche d'une commande, ouverte sous la liste : deux colonnes sur grand
   écran — l'état et les coordonnées à gauche, les actions à droite. */
.detail-commande {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--encre);
}
@media (min-width: 60rem) {
  .detail-commande { columns: 2; column-gap: 2.5rem; }
  .detail-commande > * { break-inside: avoid; }
  /* Un titre ne part pas seul en bas de colonne, séparé de ce qu'il annonce. */
  .detail-commande h3 { break-after: avoid; }
}

/* --- récapitulatif avant paiement -----------------------------------
   Ce qu'on paie, lisible d'un coup d'œil : la cliente doit reconnaître SON
   patron et le montant exact avant de valider. */
.recap-paiement {
  border: 1px solid var(--laine-ligne);
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem;
  background: var(--laine);
  max-width: 34rem;
  margin: 1.5rem 0;
}
.recap-paiement h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.recap-paiement__lignes { margin: 0; }
.recap-paiement__lignes > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--laine-ligne);
}
.recap-paiement__lignes dt { color: var(--encre-douce); font-size: 0.9rem; }
.recap-paiement__lignes dd { margin: 0; text-align: right; }
.recap-paiement__du {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin: 0.9rem 0 0.35rem;
}
.recap-paiement__du strong { font-size: 1.6rem; }

/* Le mot de la fin, après le règlement du solde : remerciement et garantie de
   correction. Posé à part du suivi de commande, qui reste factuel. */
.merci {
  border-left: 3px solid var(--garance);
  padding: 0.25rem 0 0.25rem 1.1rem;
  margin: 1.5rem 0 0;
  max-width: 40rem;
}
.merci p { margin: 0 0 0.6rem; }
.merci p:last-child { margin-bottom: 0; }