/* Signature Renaissance · interface (22/10/2026).
   Style « fiches » de l'accueil d'Horus (accueil2.html / epure2.html, COPIÉS ici, rien n'est importé d'Horus) :
   jetons canvas/card/wash/line, fiches à barre de couleur k1..k4, rayons 12 px, ombre sh-1 + glow, dégradé bleu → violet → rose.
   Marque Renaissance en tête (logo, rose #EF2880, bleu #1E49A0). Écrans du client (iPad) : texte ≥ 18 px, boutons ≥ 56 px. */
@font-face { font-family: "Inter"; font-weight: 400; src: url(Inter-400.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url(Inter-500.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; src: url(Inter-600.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; src: url(Inter-700.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 700; src: url(SpaceGrotesk-Bold.ttf) format("truetype"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 500; src: url(SpaceGrotesk-Medium.ttf) format("truetype"); font-display: swap; }
:root {
  --canvas: #F7F6FC; --card: #FFFFFF; --wash: #F2F0FA; --hover: #F3F1F8; --line: #E4E1EC; --line-2: #CFCBDC;
  --ink: #16172B; --ink-2: #3A4159; --muted: #5C6079;
  --rose: #EF2880; --rose-t: #C0136A; --bleu: #1E49A0; --bleu-f: #17306E;
  --primary: #1E49A0; --primary-hover: #17306E; --on-primary: #fff; --accent-wash: #EEF2FC;
  --k1: #233CA1; --k1x: #233CA1; --k1t: #F1F3FC; --k2: #9C53EF; --k2x: #7A35D0; --k2t: #F6F0FE;
  --k3: #E91E8C; --k3x: #BF106E; --k3t: #FEEFF7; --k4: #12939E; --k4x: #0B6D76; --k4t: #EAF7F8;
  --ok-t: #067647; --ok-b: #ECFDF3; --att-t: #93370D; --att-b: #FEF6E7; --urg-t: #B42318; --urg-b: #FEF3F2;
  --sh-1: 0 1px 2px rgba(40,20,90,.05), 0 4px 14px rgba(40,20,90,.05); --glow: inset 0 1px 0 rgba(255,255,255,.7);
  --sh-2: 0 8px 24px rgba(22,23,43,.14), 0 0 0 1px rgba(22,23,43,.04);
  --grad: linear-gradient(135deg, #3B82F6, #A855F7 55%, #EC4899);
  --r-2: 8px; --r-3: 12px; --t: 120ms cubic-bezier(.2,.7,.2,1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.5 Inter, system-ui, sans-serif; }
body.client { font-size: 19px; }
a { color: var(--bleu); }
h1, h2, h3 { font-family: "Space Grotesk", Inter, sans-serif; letter-spacing: -.01em; margin: 0 0 8px; }
code { font-size: .85em; overflow-wrap: anywhere; }
.essai { position: sticky; top: 0; z-index: 50; text-align: center; padding: 8px 16px; font: 700 15px/1.3 Inter, sans-serif;
  color: #7A2E00; background: repeating-linear-gradient(135deg, #FFE7A3 0 14px, #FFF1C7 14px 28px); border-bottom: 1px solid #F1D27A; }
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px max(16px, 3vw);
  background: var(--card); border-bottom: 1px solid var(--line); position: relative; }
.entete::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, var(--rose), #8E3AB8 48%, var(--bleu)); }
.marque { display: flex; align-items: center; gap: 12px; }
.marque img { height: 24px; width: auto; }
.produit { font: 700 15px "Space Grotesk", Inter, sans-serif; color: var(--rose-t); letter-spacing: .08em; text-transform: uppercase;
  border-left: 1px solid var(--line-2); padding-left: 12px; }
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a, .nav .lien { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: var(--r-2); color: var(--ink-2);
  font: 600 15px Inter, sans-serif; text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav a:hover, .nav .lien:hover { background: var(--hover); }
.nav form { margin: 0; }
main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 48px; display: flex; flex-direction: column; gap: 16px; }
.pied { text-align: center; color: var(--muted); font-size: 13px; padding: 12px 16px 24px; }
.carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--sh-1), var(--glow); padding: 20px; position: relative; }
.carte.centre { text-align: center; max-width: 720px; margin: 0 auto; width: 100%; }
.sous, .aide { color: var(--muted); }
.aide { font-size: 14px; }
.erreur { color: var(--urg-t); background: var(--urg-b); border-radius: var(--r-2); padding: 10px 12px; font-weight: 600; }
ul.erreur { padding-left: 28px; }
/* ---- phrase d'état (accueil d'Horus) ---- */
.etat { overflow: hidden; }
.etat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad); }
.etat .date { margin: 2px 0 0; font: 700 12px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.phrase { font: 700 30px/1.15 "Space Grotesk", Inter, sans-serif; margin: 6px 0 4px; text-wrap: balance; }
.phrase b { font-weight: 700; } .phrase .hl { color: var(--k3x); }
/* ---- compteurs ---- */
.compteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cpt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 14px 10px; min-height: 92px; border-radius: var(--r-3);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: linear-gradient(180deg, var(--kt, var(--wash)) 0, var(--card) 75%);
  box-shadow: var(--sh-1), var(--glow); overflow: hidden; }
.cpt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--k, var(--line-2)); }
.cpt[data-k="1"] { --k: var(--k1); --kx: var(--k1x); --kt: var(--k1t); } .cpt[data-k="2"] { --k: var(--k2); --kx: var(--k2x); --kt: var(--k2t); }
.cpt[data-k="3"] { --k: var(--k3); --kx: var(--k3x); --kt: var(--k3t); } .cpt[data-k="4"] { --k: var(--k4); --kx: var(--k4x); --kt: var(--k4t); }
.cpt .t { font: 700 12px/1.25 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--kx, var(--muted)); }
.cpt .v { font: 700 30px/1.1 "Space Grotesk", Inter, sans-serif; color: var(--kx, var(--ink-2)); font-variant-numeric: tabular-nums; margin-top: auto; }
.cpt[aria-current="true"] { outline: 2px solid var(--k, var(--bleu)); outline-offset: 1px; }
.cpt:hover { border-color: var(--k, var(--line-2)); }
/* ---- recherche ---- */
.recherche { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.recherche .champ { flex: 1 1 320px; margin: 0; }
/* ---- fiches clients ---- */
.groupe h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin: 8px 0 12px; }
.groupe h2 .n { background: var(--wash); color: var(--ink-2); border-radius: 999px; padding: 1px 10px; font: 600 13px Inter, sans-serif; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.fiche { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: var(--r-3);
  background: linear-gradient(180deg, var(--kt, var(--wash)) 0, var(--card) 70%); box-shadow: var(--sh-1), var(--glow); overflow: hidden; min-width: 0; }
.fiche::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--k, var(--line-2)); }
.fiche[data-k="1"] { --k: var(--k1); --kx: var(--k1x); --kt: var(--k1t); } .fiche[data-k="2"] { --k: var(--k2); --kx: var(--k2x); --kt: var(--k2t); }
.fiche[data-k="3"] { --k: var(--k3); --kx: var(--k3x); --kt: var(--k3t); } .fiche[data-k="4"] { --k: var(--k4); --kx: var(--k4x); --kt: var(--k4t); }
.fiche h3 { font-size: 18px; margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; }
.fiche .t { margin: 2px 0 0; }
.fiche .s { margin: 0; color: var(--muted); font-size: 14px; }
.fiche .v { margin: 6px 0 0; font: 700 26px/1.1 "Space Grotesk", Inter, sans-serif; color: var(--kx, var(--ink)); font-variant-numeric: tabular-nums; }
.fiche .info { margin: 0; font-size: 13px; color: var(--ink-2); border-left: 3px solid var(--k, var(--line-2)); padding-left: 8px; }
.fiche .actions { margin-top: auto; padding-top: 10px; }
.fiche .actions form { margin: 0; }
.fiche .actions .bouton { width: 100%; }
.plus { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font: 600 13px Inter, sans-serif;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--wash); }
.pill[data-s="a_contresigner"] { color: var(--k3x); background: var(--k3t); border-color: #F6C4DD; }
.pill[data-s="contresigne"] { color: var(--ok-t); background: var(--ok-b); border-color: #ABEFC6; }
.pill[data-s="envoye"], .pill[data-s="ouvert"] { color: var(--k2x); background: var(--k2t); border-color: #DDC8FB; }
.pill[data-s="a_faire"] { color: var(--k1x); background: var(--k1t); border-color: #CBD3F5; }
.pill[data-s="retracte"], .pill[data-s="expire"] { color: var(--att-t); background: var(--att-b); border-color: #F7D9A8; }
/* ---- formulaires ---- */
.champ { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; text-align: left; }
.champ .lib { font: 600 14px Inter, sans-serif; color: var(--ink-2); }
.champ input { min-height: 48px; font: 400 17px Inter, sans-serif; padding: 8px 12px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.champ input:focus { outline: 2px solid var(--bleu); outline-offset: 1px; border-color: var(--bleu); }
.champ.grand input { font: 700 26px "Space Grotesk", Inter, sans-serif; color: var(--k3x); }
.ancienne { color: var(--muted); font-size: 13px; }
.grille2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.case { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2);
  margin: 0 0 10px; background: #fff; cursor: pointer; text-align: left; }
.case input { width: 24px; height: 24px; flex: none; margin-top: 2px; accent-color: var(--bleu); }
fieldset.choix { border: 0; padding: 0; margin: 0 0 12px; } fieldset.choix legend { font: 600 14px Inter, sans-serif; color: var(--ink-2); margin-bottom: 6px; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.mode { display: flex; gap: 12px; padding: 16px; border: 2px solid var(--line); border-radius: var(--r-3); cursor: pointer; background: #fff; }
.mode:has(input:checked) { border-color: var(--bleu); background: var(--accent-wash); }
.mode input { width: 24px; height: 24px; accent-color: var(--bleu); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r-2);
  border: 1px solid var(--line-2); background: var(--card); color: var(--bleu); font: 600 16px Inter, sans-serif; text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--hover); }
.bouton.principal { background: var(--primary); color: var(--on-primary); border-color: transparent; min-height: 56px; font-size: 17px; }
.bouton.principal:hover { background: var(--primary-hover); }
.bouton.danger { color: var(--urg-t); border-color: #F5B5AE; }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.barre { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.enligne { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .enligne .champ { margin: 0; }
.etapes { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.etapes li { padding: 6px 12px; border-radius: 999px; background: var(--wash); color: var(--muted); font: 600 14px Inter, sans-serif; }
.etapes li[aria-current="step"] { background: var(--bleu); color: #fff; } .etapes li.fait { color: var(--ok-t); background: var(--ok-b); }
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 12px 0; }
.resume > div { background: var(--wash); border-radius: var(--r-2); padding: 10px 12px; display: flex; flex-direction: column; }
.resume .lib { font: 600 12px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tableau { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
.tableau th { text-align: left; background: var(--wash); padding: 8px; } .tableau td { padding: 8px; border-top: 1px solid var(--line); }
.journal { padding-left: 20px; } .journal time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 8px; }
.apercu { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; }
.lien-essai code { display: block; padding: 12px; background: var(--wash); border-radius: var(--r-2); }
.page-connexion main { max-width: 480px; }
.connexion h1 { font-size: 26px; }
.connexion .bouton.principal { width: 100%; }
.remise h1 { font-size: 28px; }
/* ---- pavé de signature ---- */
.pave { display: block; width: 100%; height: 260px; border: 2px dashed var(--line-2); border-radius: var(--r-3); background: #fff; touch-action: none; cursor: crosshair; }
.nom-sous { text-align: center; font-weight: 600; margin: 6px 0 0; }

/* ======================= écrans du client (tablette / lien) : ≥ 18 px, boutons ≥ 56 px, un bouton principal ======================= */
body.client main { max-width: 860px; }
body.client .carte { padding: 24px; }
body.client .carte.centre { text-align: left; max-width: none; }
body.client h1 { font-size: 30px; line-height: 1.2; }
body.client h2 { font-size: 24px; }
body.client p, body.client li, body.client label { font-size: 19px; }
body.client .bouton { min-height: 56px; font-size: 19px; padding: 0 22px; }
body.client .bouton.principal { min-height: 64px; font-size: 20px; width: 100%; margin-top: 16px; }
body.client .case { font-size: 19px; padding: 14px; } body.client .case input { width: 28px; height: 28px; }
.bandeau-client { background: var(--k1t); color: var(--k1x); border: 1px solid #CBD3F5; border-radius: var(--r-2); padding: 8px 14px; font: 600 16px Inter, sans-serif;
  display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.progression { height: 8px; background: var(--wash); border-radius: 999px; overflow: hidden; margin: 0 0 16px; }
.progression span { display: block; height: 100%; background: var(--grad); }
.etape-n { font: 700 14px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.points { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.points li { position: relative; padding: 16px 16px 14px 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: linear-gradient(180deg, var(--kt) 0, var(--card) 80%); overflow: hidden; }
.points li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--k); }
.points li:nth-child(4n+1) { --k: var(--k1); --kt: var(--k1t); } .points li:nth-child(4n+2) { --k: var(--k3); --kt: var(--k3t); }
.points li:nth-child(4n+3) { --k: var(--k4); --kt: var(--k4t); } .points li:nth-child(4n+4) { --k: var(--k2); --kt: var(--k2t); }
.points b { font-weight: 700; }
.montant { font: 700 40px/1.1 "Space Grotesk", Inter, sans-serif; color: var(--k3x); margin: 8px 0; }
.taille { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-bottom: 8px; }
.taille button { min-width: 56px; min-height: 56px; font: 700 20px Inter, sans-serif; border-radius: var(--r-2); border: 1px solid var(--line-2); background: #fff; color: var(--bleu); cursor: pointer; }
.sommaire { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 8px 0 16px; padding: 0; list-style: none; }
.sommaire a { display: flex; align-items: center; min-height: 56px; padding: 8px 14px; border-radius: var(--r-2); background: var(--wash); text-decoration: none; color: var(--ink); font-weight: 600; }
.contrat-texte { font-size: var(--taille, 19px); line-height: 1.6; }
.contrat-texte p, .contrat-texte li { font-size: var(--taille, 19px); }
.contrat-texte h2 { font-size: calc(var(--taille, 19px) * 1.2); margin-top: 28px; scroll-margin-top: 80px; }
.contrat-texte .article-num { display: block; color: var(--rose-t); font-size: .7em; letter-spacing: .1em; text-transform: uppercase; }
.contrat-texte .a-completer { background: #FFF1B0; padding: 0 4px; border-radius: 4px; }
.contrat-texte .rempli { font-weight: 700; }
.contrat-texte .parties { display: grid; gap: 12px; } .contrat-texte .partie { border: 1px solid var(--line); border-radius: var(--r-2); padding: 12px; }
.contrat-texte .annexe-tete h1 { font-size: calc(var(--taille, 19px) * 1.3); margin-top: 36px; }
.contrat-texte .surtitre { color: var(--rose-t); font-weight: 700; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; }
.contrat-texte table { width: 100%; border-collapse: collapse; } .contrat-texte td, .contrat-texte th { border: 1px solid var(--line); padding: 6px; }
.contrat-texte .signatures, .contrat-texte .bloc-signature .zone { display: none; }
.retour-sommaire { position: sticky; bottom: 12px; display: flex; justify-content: center; margin-top: 12px; }
.retour-sommaire a { background: var(--card); box-shadow: var(--sh-2); }
.code-champ { font: 700 40px/1 "Space Grotesk", monospace; letter-spacing: .4em; text-align: center; width: 100%; max-width: 420px; min-height: 72px;
  border-radius: var(--r-3); border: 2px solid var(--line-2); padding: 8px; }
.code-essai { background: #FFF1C7; border: 1px dashed #E0B44B; border-radius: var(--r-2); padding: 10px 12px; font-weight: 700; }
.fin { text-align: center; }
.coche { width: 96px; height: 96px; border-radius: 50%; background: var(--ok-b); color: var(--ok-t); font: 700 56px/96px Inter, sans-serif; margin: 8px auto 16px; }
.recap { border: 2px solid var(--k3); border-radius: var(--r-3); padding: 14px 16px; background: var(--k3t); }
@media (max-width: 640px) { .phrase { font-size: 24px; } body.client h1 { font-size: 26px; } .montant { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.pages { display: flex; gap: 12px; overflow-x: auto; padding: 8px 2px 12px; scroll-snap-type: x mandatory; }
.pages img { flex: none; width: min(420px, 80vw); height: auto; border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--sh-1); scroll-snap-align: start; background: #fff; }