/* DevisPilot - design system « Atelier ».
   Papier, encre et terre cuite. Des filets fins plutot que des cartes
   ombrees, un serif editorial pour tout ce qui se lit, une sans-serif
   humaniste pour tout ce qui se remplit.
   Feuille unique, sans build : ce qui se lit ici est ce qui s'affiche. */

/* ---------------- Polices, servies par l'application ----------------
   Aucun appel a un CDN tiers : ni l'artisan ni son client n'est expose
   a une requete sortante pour afficher une page. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/static/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Signature saisie au clavier. Dancing Script, licence SIL OFL (voir
   OFL-DancingScript.txt) : Brush Script MT est propriétaire et ne peut
   pas être redistribuée. font-display: block et non swap — un nom de
   signataire qui s'affiche d'abord en Karla puis saute en cursive
   donnerait l'impression que la signature a changé. */
@font-face {
  font-family: 'Signature';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('/static/fonts/dancing-script-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Signature';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('/static/fonts/dancing-script-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Papier et encre */
  --papier: #faf7f2;
  --surface: #fffdf9;
  --creux: #f2ece2;
  --encre: #1c1917;
  --encre-moyenne: #44403c;
  --encre-douce: #736c66;  /* 4.83:1 sur le papier : lisible sans crier */
  --filet: #e0d8ca;
  --filet-fort: #a8a29e;

  /* Terre cuite : l'action principale, et elle seule */
  --terre: #a8432b;
  --terre-sombre: #7c3018;
  --terre-pale: #f8ede9;

  /* Ocre : ce qui demande une verification */
  --ocre: #b8862f;
  --ocre-sombre: #8a6d1f;
  --ocre-pale: #fdf6e8;

  /* Sauge : ce qui est acquis */
  --sauge: #4d6b52;
  --sauge-pale: #eef3ee;

  /* Brique : ce qui est refuse ou destructeur */
  --brique: #9c2f2f;
  --brique-pale: #fbeeee;

  --rayon: 2px;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* La gouttiere est reservee meme sans barre de defilement : sinon le
     contenu se decale horizontalement de sa largeur entre une page courte
     et une page longue, ce qui se lit comme un redimensionnement a chaque
     changement d'onglet. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  /* Le pied de page reste en bas de l'ecran meme sur une page courte. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terre); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--terre-sombre); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--terre); outline-offset: 2px; }

h1, h2, h3 { margin: 0 0 .5rem; }
h1 {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
}
h3 { font-size: 1rem; font-weight: 700; line-height: 1.35; }
p { margin: 0 0 1rem; }

.muted { color: var(--encre-douce); }
.small { font-size: .9rem; }
.tiny { font-size: .8125rem; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
/* !important : une utilitaire doit gagner sur le composant, meme quand
   celui-ci est declare plus bas (.champ pose 1.25rem). */
.mb0 { margin-bottom: 0 !important; }
.hidden { display: none !important; }

/* Petite capitale : le libelle qui structure sans crier */
.surtitre,
.champ > label,
.carte-titre .surtitre {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* ---------------- Mise en page ---------------- */
.topbar {
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
}
.logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--encre);
}
.logo:hover { text-decoration: none; color: var(--terre); }

.nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-left: auto; align-items: center; }
/* `:not(.btn)` est indispensable : sans lui, ces regles ecrasent la couleur
   et le remplissage des boutons places dans la navigation. */
.nav a:not(.btn) {
  color: var(--encre-douce);
  font-size: .9375rem;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--encre); text-decoration: none; }
.nav a.actif:not(.btn) { color: var(--encre); font-weight: 700; border-bottom-color: var(--terre); }
.nav .btn { padding-top: .55rem; padding-bottom: .55rem; }

.page { max-width: 1080px; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }

/* Sur telephone, la navigation passe sous le nom : elle ne doit jamais
   deborder de l'ecran ni forcer un defilement horizontal. */
@media (max-width: 720px) {
  .topbar-inner { padding: .85rem 1rem; }
  .logo { font-size: 1.2rem; }
  .nav { width: 100%; margin-left: 0; gap: .35rem .95rem; font-size: .9rem; }
  .page { padding: 1.75rem 1rem 5rem; }
  .carte { padding: 1.25rem; }
}
.page-etroite { max-width: 720px; }
.page-entete {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.page-entete h1 { margin-bottom: .2rem; }
.page-entete .actions { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }

.carte {
  background: var(--surface);
  border: 1px solid var(--filet);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.carte-titre { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.25rem; }
.carte-titre h2 { margin: 0; }

.grille { display: grid; gap: 1.25rem; }
.grille-2 { grid-template-columns: 1fr 1fr; }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .grille-2, .grille-3 { grid-template-columns: 1fr; }
}

/* ---------------- Formulaires ---------------- */
label { display: block; margin-bottom: .35rem; }
.champ { margin-bottom: 1.25rem; }
/* Selecteur nu : « .champ .aide » laissait en corps normal toute aide
   placee hors d'un champ, la ou elle detonne le plus. */
.aide { color: var(--encre-douce); font-size: .8125rem; margin-top: .35rem; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], select, textarea {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  font-family: var(--sans);
  font-size: 16px; /* evite le zoom automatique sur iOS */
  color: var(--encre);
  background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--terre);
  box-shadow: 0 0 0 3px rgba(168, 67, 43, .12);
}
input::placeholder, textarea::placeholder { color: #b3a99b; }
textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2378716c' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2rem;
}
.champ-inline { display: flex; align-items: center; gap: .6rem; }
.champ-inline input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--terre); }
.champ-inline label { margin: 0; font-weight: 400; font-size: .9375rem; text-transform: none; letter-spacing: 0; color: var(--encre); }

/* La demande du client se lit comme une lettre, pas comme un champ. */
#demande {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.65;
  border-top: 3px solid var(--encre);
  padding: 1.15rem 1.25rem;
}

/* ---------------- Boutons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .7rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: transparent;
  color: var(--encre);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; }
.btn-principal { background: var(--terre); color: var(--surface); border-color: var(--terre); }
.btn-principal:hover { background: var(--terre-sombre); border-color: var(--terre-sombre); color: var(--surface); }
.btn-secondaire { border-color: var(--filet-fort); color: var(--encre); background: var(--surface); }
.btn-secondaire:hover { border-color: var(--encre); background: var(--creux); }
.btn-discret { color: var(--encre-douce); padding: .5rem .6rem; }
.btn-discret:hover { color: var(--terre); }
.btn-danger { color: var(--brique); border-color: var(--filet-fort); background: var(--surface); }
.btn-danger:hover { background: var(--brique-pale); border-color: var(--brique); color: var(--brique); }
.btn-large { padding: 1rem 1.75rem; font-size: 1.0625rem; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
@media (min-width: 560px) { .btn-large { width: auto; } }

/* ---------------- Messages ---------------- */
.message {
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .9375rem;
  border-left: 3px solid var(--filet-fort);
  background: var(--creux);
  color: var(--encre-moyenne);
}
.message-success { background: var(--sauge-pale); border-left-color: var(--sauge); color: #33472f; }
.message-error { background: var(--brique-pale); border-left-color: var(--brique); color: #7a2020; }
.message-info { background: var(--terre-pale); border-left-color: var(--terre); color: var(--terre-sombre); }
.message-warning { background: var(--ocre-pale); border-left-color: var(--ocre); color: var(--ocre-sombre); }

/* ---------------- Etiquettes de statut ----------------
   Pas de pastille coloree : une petite capitale suffit et reste lisible
   a l'impression comme en noir et blanc. */
.etiquette {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  white-space: nowrap;
}
.etiquette-draft { color: var(--encre-douce); }
.etiquette-sent { color: var(--terre); }
.etiquette-accepted { color: var(--sauge); }
.etiquette-refused { color: var(--brique); }
.etiquette-sans_suite { color: var(--encre-douce); }
.etiquette-expired { color: var(--ocre-sombre); }

/* ---------------- Listes ---------------- */
.liste { border-top: 1px solid var(--encre); background: transparent; }
.liste-ligne {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem .25rem;
  border-bottom: 1px solid var(--filet);
  color: inherit;
}
a.liste-ligne:hover { background: var(--creux); text-decoration: none; }
.liste-principal { min-width: 0; flex: 1; }
.liste-principal strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.liste-montant {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vide { text-align: center; padding: 3.5rem 1.5rem; color: var(--encre-douce); }
.vide h2 { color: var(--encre); }

/* ---------------- Editeur de devis ---------------- */
.ligne-devis {
  border-bottom: 1px solid var(--filet);
  padding: 1rem 0;
}
.ligne-devis:first-child { border-top: 2px solid var(--encre); }
.ligne-devis .ligne-entete { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.ligne-devis .ligne-entete input { font-weight: 600; border-color: transparent; background: transparent; padding-left: 0; }
.ligne-devis .ligne-entete input:hover { border-color: var(--filet); background: var(--surface); padding-left: .75rem; }
.ligne-devis .ligne-entete input:focus { border-color: var(--terre); background: var(--surface); padding-left: .75rem; }
.ordre-ligne { display: flex; gap: .1rem; }
.ligne-pied { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.pastille-estime {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ocre-sombre);          /* 4.55:1 sur l'ocre pale */
  background: var(--ocre-pale);
  border: 1px solid var(--ocre);
  border-radius: var(--rayon);
  padding: .1rem .4rem;
  white-space: nowrap;
}
.cataloguer-ligne { margin-left: auto; font-size: .8125rem; white-space: nowrap; }
.deplacer-ligne { padding: .3rem .45rem; font-size: .9375rem; line-height: 1; }
.ligne-chiffres { display: grid; grid-template-columns: 1fr 1fr 1.3fr 1fr auto; gap: .6rem; align-items: end; }
.ligne-chiffres label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: .25rem;
}
.ligne-chiffres input, .ligne-chiffres select { padding: .45rem .55rem; }
.ligne-total {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-bottom: .4rem;
  min-width: 96px;
  text-align: right;
}
@media (max-width: 720px) {
  .ligne-chiffres { grid-template-columns: 1fr 1fr; }
  .ligne-total { grid-column: 1 / -1; text-align: right; }
}

.recap { background: var(--surface); border: 1px solid var(--filet); padding: 1.5rem; }
.recap-ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  font-variant-numeric: tabular-nums;
}
.recap-ligne > span:first-child { color: var(--encre-moyenne); }
.recap-total {
  align-items: baseline;
  border-top: 2px solid var(--encre);
  margin-top: .75rem;
  padding-top: .85rem;
}
.recap-total > span:first-child { font-weight: 700; color: var(--encre); }
.recap-total > span:last-child {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.1;
}

.barre-collante {
  position: sticky;
  bottom: 0;
  background: var(--encre);
  color: var(--papier);
  padding: .9rem 1.25rem;
  margin: 2rem -1.25rem -5rem;
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  z-index: 10;
}
/* Sur telephone, `.page` ne retire plus que 1 rem de chaque cote : la marge
   negative doit suivre, sinon la barre depasse de 8 px et fait glisser toute
   la page lateralement.

   Cette regle DOIT rester apres `.barre-collante` ci-dessus : a specificite
   egale, c'est la derniere declaree qui l'emporte. Placee plus haut dans le
   fichier -- ou elle se trouvait --, elle etait purement decorative. */
@media (max-width: 720px) {
  .barre-collante { margin: 1.5rem -1rem -5rem; padding: .85rem 1rem; }
}

.barre-collante .total { margin-right: auto; font-size: .9375rem; }
.barre-collante .total span {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  margin-left: .35rem;
}
.barre-collante .btn-secondaire {
  background: transparent;
  color: var(--papier);
  border-color: #57534e;
}
.barre-collante .btn-secondaire:hover { background: #292524; border-color: var(--papier); color: var(--papier); }

/* ---------------- Accueil ---------------- */
.hero { padding: 4.5rem 0 3rem; }
.hero .surtitre { display: block; color: var(--terre); margin-bottom: 1.1rem; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 3.9rem);
  max-width: 15ch;
  margin: 0 0 1.35rem;
  text-wrap: balance;
}
.hero p { font-size: 1.15rem; color: var(--encre-moyenne); max-width: 54ch; margin: 0 0 1.9rem; text-wrap: pretty; }
.hero-action { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 3rem; }
.etape .num {
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--terre);
  margin-bottom: .6rem;
}
.etape h3 { margin-bottom: .3rem; }
@media (max-width: 860px) { .etapes { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 480px) { .etapes { grid-template-columns: 1fr; } }

/* ---------------- Statistiques ---------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--encre);
  border-bottom: 1px solid var(--filet);
  margin-bottom: 2.25rem;
}
.stat { padding: 1.35rem 1.5rem; border-right: 1px solid var(--filet); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; padding-right: 0; }
.stat .valeur {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .libelle { color: var(--encre-douce); font-size: .875rem; margin-top: .4rem; }
@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; border-bottom: none; }
  .stat { border-right: none; border-bottom: 1px solid var(--filet); padding: 1.1rem 0; }
  .stat:last-child { border-bottom: none; }
}

/* ---------------- Bandeaux ---------------- */
.bandeau {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .95rem 1.15rem;
  background: var(--ocre-pale);
  border-left: 3px solid var(--ocre);
  color: var(--ocre-sombre);
  margin-bottom: 1.75rem;
  font-size: .9375rem;
}
.bandeau .btn { margin-left: auto; padding: .5rem .9rem; font-size: .875rem; }

/* Le pave « a verifier » : la voix de l'assistant, jamais celle du produit. */
.verification {
  background: var(--ocre-pale);
  border-left: 3px solid var(--ocre);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.75rem;
}
.verification h2 { margin-bottom: .6rem; }
.puces-verif { list-style: none; padding: 0; margin: 0; }
.puces-verif li { padding: .3rem 0 .3rem 1.5rem; position: relative; font-size: .9375rem; }
.verification .tiny { color: var(--ocre-sombre); }
.puces-verif li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ocre);
  font-weight: 700;
}

/* ---------------- Filtres de liste ---------------- */
.filtres {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--filet);
}
.filtre {
  font-size: .875rem;
  font-weight: 600;
  color: var(--encre-douce);
  padding-bottom: .65rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.filtre:hover { color: var(--encre); text-decoration: none; }
.filtre.actif { color: var(--encre); border-bottom-color: var(--terre); }

/* ---------------- Formule mise en avant ---------------- */
.carte-mise-en-avant { border-color: var(--filet-fort); border-top: 3px solid var(--terre); }

/* ---------------- Zone de signature ---------------- */
.label-groupe {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--encre-douce);
  margin-bottom: .4rem;
}
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.onglets-signature {
  display: flex;
  gap: .25rem;
  margin-bottom: .5rem;
}
.onglet-signature {
  font: inherit;
  font-size: .875rem;
  padding: .4rem .85rem;
  background: none;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  color: var(--encre-douce);
  cursor: pointer;
}
.onglet-signature:hover { color: var(--encre); }
.onglet-signature.actif {
  background: var(--surface);
  border-color: var(--terre);
  color: var(--terre);
  font-weight: 600;
}
/* L'apercu ne se dessine pas : le curseur ne doit pas suggerer le contraire. */
.apercu-signature { margin-top: .5rem; }
.apercu-signature canvas { cursor: default; }

.cadre-signature {
  position: relative;
  border: 1px dashed var(--filet-fort);
  background: var(--surface);
  border-radius: var(--rayon);
  overflow: hidden;
}
.cadre-signature canvas {
  display: block;
  width: 100%;
  height: 200px;
  touch-action: none;   /* le doigt trace, il ne fait pas defiler la page */
  cursor: crosshair;
}
.cadre-signature canvas.cadre-vide { background: var(--brique-pale); }
.cadre-signature .effacer-signature {
  position: absolute;
  top: .4rem;
  right: .4rem;
  background: var(--surface);
  border: 1px solid var(--filet);
}
/* Une ligne de signature, comme sur le papier. */
.cadre-signature::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 42px;
  border-bottom: 1px solid var(--filet);
  pointer-events: none;
}

/* ---------------- Champ mot de passe ---------------- */
.champ-mot-de-passe { position: relative; display: flex; align-items: center; }
.champ-mot-de-passe input { padding-right: 5.5rem; }
.reveler {
  position: absolute;
  right: .4rem;
  border: 0;
  background: transparent;
  color: var(--encre-douce);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35rem .5rem;
  cursor: pointer;
}
.reveler:hover { color: var(--terre); }

/* ---------------- Zone dangereuse ---------------- */
.zone-danger {
  background: var(--brique-pale);
  border: 1px solid #e6c3c3;
  border-left: 3px solid var(--brique);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.zone-danger h2 { color: #7a2020; margin-bottom: .5rem; }
.liste-effacee { margin: .75rem 0 0; padding-left: 1.1rem; }
.liste-effacee li { padding: .15rem 0; font-size: .9375rem; }

/* ---------------- Logo ---------------- */
.logo-actuel {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1rem;
  background: var(--creux);
  border: 1px solid var(--filet);
}
.logo-actuel img { max-width: 180px; max-height: 80px; display: block; }
.logo-entete { max-height: 40px; max-width: 150px; display: block; }

/* ---------------- Tableaux (import, formats) ---------------- */
.tableau-apercu, .tableau-format {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}
.tableau-apercu th, .tableau-format th {
  text-align: left;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-douce);
  padding: 0 .75rem .6rem 0;
  border-bottom: 2px solid var(--encre);
}
.tableau-apercu td, .tableau-format td {
  padding: .7rem .75rem .7rem 0;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
.tableau-apercu th.right, .tableau-apercu td.right { text-align: right; padding-right: 0; }
.tableau-apercu tr:last-child td, .tableau-format tr:last-child td { border-bottom: none; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
  background: var(--creux);
  padding: .1rem .3rem;
}
input[type=file] {
  width: 100%;
  padding: .6rem .75rem;
  border: 1px dashed var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--creux);
  font-family: var(--sans);
  font-size: .9375rem;
}
input[type=file]:focus { outline: none; border-color: var(--terre); border-style: solid; }

/* ---------------- Dialogue de confirmation ---------------- */
.dialogue {
  border: 1px solid var(--filet-fort);
  border-top: 3px solid var(--brique);
  background: var(--surface);
  color: var(--encre);
  padding: 1.75rem;
  max-width: 26rem;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 40px rgba(28, 25, 23, .18);
}
.dialogue::backdrop { background: rgba(28, 25, 23, .45); }
.dialogue-titre { font-family: var(--serif); font-size: 1.35rem; margin: 0 0 .6rem; }
.dialogue-texte { margin: 0 0 1.5rem; color: var(--encre-moyenne); }
.dialogue-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* ---------------- Apercu PDF ---------------- */
.apercu { width: 100%; height: 78vh; border: 1px solid var(--filet-fort); background: var(--surface); }

/* ---------------- Divers ---------------- */
.separateur { height: 1px; background: var(--filet); margin: 1.75rem 0; border: 0; }
details > summary { cursor: pointer; font-weight: 700; }
details > summary:hover { color: var(--terre); }
.chargement {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 253, 249, .4);
  border-top-color: #fffdf9;
  border-radius: 50%;
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------- Lien de la page client ---------------- */
.lien-client {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}
.lien-client input {
  flex: 1 1 320px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem;
  background: var(--papier);
  color: var(--encre-douce);
}
.lien-client input:focus { color: var(--encre); }

/* ---------------- Pied de carte : l'action, a droite ---------------- */
.pied-de-carte {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.25rem;
}
.pied-de-carte > p { flex: 1 1 240px; }
/* Le bouton reste a droite meme quand la ligne se replie sur mobile. */
.pied-de-carte > .btn { margin-left: auto; }

/* ---------------- Tableaux explicatifs ---------------- */
/* Deux tableaux qui se suivent sans respirer se lisent comme un seul :
   chacun porte donc son intitule, et l'ecart est franc. */
.intitule-tableau {
  margin: 2rem 0 .5rem;
  font-weight: 650;
  color: var(--encre);
}
.tableau-defilant { overflow-x: auto; }
.tableau-defilant + .intitule-tableau { margin-top: 2.25rem; }

/* ---------------- Choix d'une liste type ---------------- */
.choix-metier {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 1rem;
}
.choix-metier .champ { flex: 1 1 300px; max-width: 380px; }
/* Cale a droite comme « Lire le fichier » : les deux boutons de la page
   tombent alors sur la meme verticale. */
.choix-metier > .btn { margin-left: auto; }

/* ---------------- Devis figé ---------------- */
/* <fieldset disabled> verrouille tout le formulaire d'un coup, lignes
   ajoutees dynamiquement comprises -- sans avoir a marquer chaque champ,
   donc sans risque d'en oublier un. */
.sans-cadre { border: 0; padding: 0; margin: 0; min-width: 0; }

/* pointer-events: none laisse le clic traverser jusqu'au conteneur, qui
   peut alors expliquer pourquoi rien ne repond. Un champ desactive
   n'emet aucun evenement : sans cela, le clic serait avale en silence. */
.zone-verrouillee[data-verrouille] { cursor: not-allowed; }
.zone-verrouillee[data-verrouille] fieldset[disabled] { pointer-events: none; }
.zone-verrouillee[data-verrouille] .champ { opacity: .72; }

/* ---------------- Section repliable ---------------- */
/* <details> plutot qu'un bascule en JavaScript : cela fonctionne sans
   script, reste accessible au clavier, et la recherche du navigateur
   (Ctrl+F) sait deplier le contenu pour y trouver un mot. */
.repli {
  border-top: 1px solid var(--filet);
  margin-top: 1.75rem;
}
.repli > summary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: .9rem 0 .1rem;
  cursor: pointer;
  color: var(--encre-douce);
  font-weight: 650;
  font-size: .9375rem;
  list-style: none;          /* Firefox */
  text-align: center;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary:hover,
.repli > summary:focus-visible { color: var(--terre); }

/* Le chevron : dirige vers le bas quand c'est replie, vers le haut sinon. */
.repli > summary::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.repli[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

/* ---------------- Carte repliable ---------------- */
/* Meme mecanique que .repli, mais pour une carte entiere : le titre reste
   lisible comme un titre, et le chevron dit qu'on peut le deplier. */
.carte-repliable > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  /* Meme allure que le <h2> des autres cartes : un titre reste un titre,
     qu'il soit repliable ou non. */
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--encre);
  list-style: none;          /* Firefox */
}
.carte-repliable > summary::-webkit-details-marker { display: none; }
.carte-repliable > summary:hover,
.carte-repliable > summary:focus-visible { color: var(--terre); }
.carte-repliable > summary::after {
  content: "";
  width: .45rem;
  height: .45rem;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.carte-repliable[open] > summary::after { transform: translateY(2px) rotate(-135deg); }

/* ---------------- Pied de page ---------------- */
/* `width: 100%` est indispensable : `.page` porte `margin: 0 auto`, et une
   marge automatique sur l'axe transversal d'un conteneur flex annule
   l'etirement par defaut. Sans cette largeur, la page se retracte a la taille
   de son contenu et change de largeur d'un ecran a l'autre. */
main.page { flex: 1 0 auto; width: 100%; }
.pied {
  flex-shrink: 0;
  border-top: 1px solid var(--filet);
  background: var(--surface);
  padding: 1.5rem 1.25rem;
  font-size: .8125rem;
  color: var(--encre-douce);
}
.pied-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: .5rem 1.25rem;
  align-items: center;
  flex-wrap: wrap;
}
.pied-liens { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pied a { color: var(--encre-douce); }
.pied a:hover { color: var(--terre); text-decoration: underline; }
.pied-contact { margin-left: auto; font-weight: 700; }

/* Hors du cadre fixe -- telephone, ou pages sans zone defilante -- c'est le
   document qui defile et la barre du navigateur fait le travail : l'indicateur
   n'a rien a indiquer et ne doit pas trainer dans le flux. */
.indicateur-defilement { display: none; }

/* Cadre fixe : l'entete de page ne defile pas du tout.

   `position: sticky` ne suffisait pas : un element colle parcourt d'abord la
   distance qui le separe de son point d'ancrage avant de se figer, si bien
   que le titre remontait de quelques dizaines de pixels au premier coup de
   molette. Ici l'entete est simplement PLACE HORS de la zone qui defile : il
   ne peut pas bouger.

   Le prix a payer est un conteneur de defilement interne. Il est assume :
   `tabindex` rend la zone atteignable au clavier, et le cadre ne s'applique
   qu'au-dessus du point de rupture -- sur telephone la hauteur de fenetre
   varie quand la barre d'adresse se replie, ce qui rend l'exercice hasardeux
   pour un benefice nul sans molette. */
@media (min-width: 721px) {
  body.cadre-fixe { height: 100vh; overflow: hidden; }

  .cadre-fixe main.page {
    display: flex;
    flex-direction: column;
    /* `min-height: 0` est indispensable : un element flex refuse par defaut
       de devenir plus court que son contenu, et la zone interne ne pourrait
       jamais defiler. */
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    padding-bottom: 0;
    /* Ancre l'indicateur de defilement, place en absolu. */
    position: relative;
  }

  .cadre-fixe .entete-fige { flex: 0 0 auto; }

  /* Le trait noir delimite l'en-tete fige et la liste. Il appartient a
     `.liste`, donc il defilerait avec les lignes et la separation
     disparaitrait au premier coup de molette : on le remonte sur l'en-tete,
     ou il reste visible en permanence. */
  .cadre-fixe .entete-listee { border-bottom: 1px solid var(--encre); }
  .cadre-fixe .zone-defilante > .liste { border-top: none; }

  .cadre-fixe .zone-defilante {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Ecart au texte : l'indicateur flotte au-dessus de la zone, rien ne le
       repousserait sinon et le texte viendrait le toucher. */
    padding-right: 2.25rem;
    padding-bottom: 2rem;
  }

  /* La barre native est masquee : ni la taille de sa pastille ni la hauteur
     de sa piste ne se reglent. Un indicateur dessine la remplace, pilote par
     defilement.js. Le defilement lui-meme reste natif. */
  .cadre-fixe .zone-defilante { scrollbar-width: none; }
  .cadre-fixe .zone-defilante::-webkit-scrollbar { width: 0; height: 0; }

  .indicateur-defilement {
    display: block;
    position: absolute;
    right: .5rem;
    width: 14px;
    z-index: 5;
  }
  .indicateur-defilement.hors-service { display: none; }

  .piste-defilement {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: var(--filet);
    border-radius: 1px;
    cursor: pointer;
  }

  /* Diametre CONSTANT : c'est tout l'interet de l'indicateur dessine. */
  .pastille-defilement {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--filet-fort);
    cursor: grab;
    transition: background-color .15s;
  }
  .pastille-defilement:hover { background: var(--encre-douce); }
  .indicateur-defilement.en-saisie .pastille-defilement {
    background: var(--encre-douce);
    cursor: grabbing;
  }

  /* La zone recoit le focus pour le defilement au clavier : le contour par
     defaut ceinturerait alors la moitie de l'ecran. */
  .cadre-fixe .zone-defilante:focus { outline: none; }
  .cadre-fixe .zone-defilante:focus-visible {
    outline: 2px solid var(--terre);
    outline-offset: -2px;
  }
}

/* ---------------- Pages legales ---------------- */
/* Page de reglages : meme cadre que les listes (largeur, marges, position du
   titre), mais les champs de saisie sont plafonnes. Etire sur toute la carte,
   un champ depasse 980 px : l'oeil perd le debut de la ligne en y revenant.
   La carte, elle, occupe la page comme les tableaux des autres onglets. */
.page-reglages .champ > input,
.page-reglages .champ > select,
.page-reglages .champ > textarea { max-width: 42rem; }

.page-legale { max-width: 760px; }
.page-legale h2 { margin-top: 2.25rem; }
.page-legale h3 { margin-top: 1.5rem; font-size: 1rem; }
.page-legale li { margin-bottom: .35rem; }
.page-legale dt { font-weight: 700; margin-top: .75rem; }
.page-legale dd { margin: 0 0 .35rem; }
.a-completer {
  background: var(--ocre-pale);
  border: 1px dashed var(--ocre);
  border-radius: var(--rayon);
  padding: .05rem .35rem;
  color: var(--ocre-sombre);      /* 4.55:1 sur l'ocre pale */
  font-weight: 700;
  white-space: nowrap;
}
.avertissement-legal {
  border-left: 3px solid var(--ocre);
  background: var(--ocre-pale);
  padding: .9rem 1.1rem;
  margin-bottom: 2rem;
  border-radius: var(--rayon);
}
.avertissement-legal p { margin: 0 0 .5rem; }
.avertissement-legal p:last-child { margin-bottom: 0; }