/* ESPACE CLIENT AMORCE : la DA d'amorce.dev, portée depuis sa source (~/amorce-generatif/contact.html
   et index.html, 23/09/2026, sur demande de Christopher : « reprend la DA du site amorce.dev »).
   Bi-thème crème / encre (même clé `am-theme` que le site), champ de flux en fond (fond.js), surfaces en
   verre sur le champ, boutons « sélecteur » à coins 7 px, étiquettes mono espacées, titres condensés
   avec le point violet, repères de coupe aux coins des cartes. Violet en touches seulement.
   Les noms de jetons (--c-ink, --c-paper…) restent ceux du châssis : app.css et admin.css les lisent. */

@font-face{font-family:"Barlow";src:url(fonts/barlow-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-cond-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-cond-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jbmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jbmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* --- Jetons : thème crème (défaut du site) ------------------------------------------------------- */
:root{
  --c-ink:    20 20 16;      /* --fg #141410 */
  --c-paper: 241 238 232;    /* --bg #F1EEE8 */
  --c-sheet: 251 250 247;    /* --surface-2 #FBFAF7 */
  --c-body:   51 50 46;      /* --body #33322e */
  --c-muted:  93 92 85;      /* --mut #5d5c55 */
  --c-line:  214 212 206;    /* l'encre à 12 % sur le crème, en opaque */
  --c-accent: 118 79 184;    /* --violet #764FB8 */
  --c-accent-clair: 154 123 208;
  --surface: rgb(247 245 240 / .72);
  --veil: rgb(241 238 232 / .55);
  --ligne: rgb(20 20 16 / .12);
  --ligne-2: rgb(20 20 16 / .07);
  --btn-bg: 20 20 16;
  --btn-fg: 241 238 232;
  --anneau: rgb(118 79 184 / .16);

  /* Six rôles typo (ratio 1.2) */
  --fs-label:   .75rem;
  --fs-small:   .833rem;
  --fs-body:    1rem;
  --fs-h3:      1.2rem;
  --fs-h2:      1.728rem;
  --fs-display: 2.488rem;

  --f-text: "Barlow", system-ui, sans-serif;
  --f-disp: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --r-ctl: 7px;              /* boutons, champs, pastilles : les « sélecteurs » du site */
  --r-carte: 12px;
  --r-grande: 16px;
  --radius: var(--r-ctl);
  --hair: 1px solid var(--ligne);
  --pad: 1rem;
  --control-h: 2.75rem;
  --haut-entete: 4.1rem;     /* hauteur de .top : les colonnes collantes s'accrochent dessous */
  color-scheme: light;
}
@media (min-width:1024px){ :root{ --pad: 1.75rem } }

/* --- Jetons : thème encre ---------------------------------------------------------------------- */
[data-theme="ink"]{
  --c-ink:   241 238 232;
  --c-paper:  20 20 16;
  --c-sheet:  30 30 26;
  --c-body:  201 199 191;
  --c-muted: 143 142 134;
  --c-line:   53 53 48;
  --c-accent: 154 123 208;   /* --acc en encre : le violet clair, lisible sur le noir */
  --surface: rgb(30 30 26 / .72);
  --veil: rgb(20 20 16 / .55);
  --ligne: rgb(241 238 232 / .15);
  --ligne-2: rgb(241 238 232 / .08);
  --btn-bg: 241 238 232;
  --btn-fg: 20 20 16;
  --anneau: rgb(154 123 208 / .22);
  color-scheme: dark;
}

/* --- Socle ------------------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{background:rgb(var(--c-paper))}
body{font-family:var(--f-text);font-weight:300;font-size:var(--fs-body);line-height:1.55;margin:0;
  color:rgb(var(--c-ink));background:transparent;-webkit-font-smoothing:antialiased}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#app{position:relative;z-index:1}
::selection{background:rgb(118 79 184);color:#F1EEE8}
b,strong{font-weight:500}
a{color:inherit}
h1,h2,h3{font-family:var(--f-disp);font-weight:800;letter-spacing:-.01em;line-height:.95;color:rgb(var(--c-ink))}
h1{font-size:var(--fs-h2)}
h2{font-size:var(--fs-h3)}
@media (min-width:1024px){ h1{font-size:var(--fs-display)} }
.dot{color:rgb(118 79 184)}
[data-theme="ink"] .dot{color:rgb(var(--c-accent))}
.mono{font-family:var(--f-mono);font-weight:400}
.disp{font-family:var(--f-disp);font-weight:800;letter-spacing:-.01em;line-height:.9}
.muted{color:rgb(var(--c-muted))}
.fs-label{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.08em}
.fs-small{font-size:var(--fs-small)}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgb(var(--c-accent));outline-offset:3px;border-radius:var(--r-ctl)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Surtitre du site : un filet, un numéro, un mot (« ── 02 · La méthode ») */
.surtitre{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:var(--fs-label);
  letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--c-muted))}
.surtitre::before{content:"";width:1.75rem;height:1px;background:currentColor;opacity:.6}

/* --- En-tête : spirale + amorce, givré comme la barre du site ------------------------------------ */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.7rem;padding:.8rem var(--pad);
  background:color-mix(in srgb,rgb(var(--c-paper)) 78%,transparent);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne-2)}
.top svg{width:1.25rem;height:1.25rem;flex:none;color:rgb(var(--c-ink))}
.top .bn{font-family:var(--f-disp);font-weight:800;font-size:var(--fs-h3);letter-spacing:-.01em;text-transform:lowercase}
.top .client{margin-left:auto;text-align:right;line-height:1.25}
.top .tbtn{margin-left:auto}
.top .client + .tbtn{margin-left:.75rem}
.tbtn{display:inline-grid;place-items:center;min-width:2.5rem;height:2.5rem;padding:0 .7rem;border:var(--hair);
  border-radius:var(--r-ctl);background:none;color:rgb(var(--c-ink));font-family:var(--f-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:border-color .35s var(--e-out)}
.tbtn:hover{border-color:rgb(var(--c-accent))}

/* --- Boutons « sélecteur » ----------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:var(--control-h);
  padding:.85rem 1.35rem;border:var(--hair);border-radius:var(--r-ctl);background:none;color:rgb(var(--c-ink));
  font-family:var(--f-disp);font-weight:700;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;
  line-height:1;cursor:pointer;text-decoration:none;
  transition:border-color .35s var(--e-out),box-shadow .35s var(--e-out),background-color .35s var(--e-out)}
.btn:hover{border-color:rgb(var(--c-ink) / .45)}
.btn.plein{background:rgb(var(--btn-bg));color:rgb(var(--btn-fg));border-color:rgb(var(--btn-bg))}
.btn.plein:hover,.btn.violet:hover{border-color:rgb(var(--c-accent));box-shadow:0 0 0 5px var(--anneau)}
.btn.violet{background:rgb(118 79 184);border-color:rgb(118 79 184);color:#F1EEE8}
.btn .ar,.btn.plein::after{color:rgb(var(--c-accent-clair))}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn.petit{min-height:2.25rem;padding:.55rem .9rem}

/* --- Champs : le verre du formulaire de contact -------------------------------------------------- */
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="url"],input[type="tel"],
input[type="search"],input:not([type]),select,textarea{
  font:inherit;font-family:var(--f-text);font-weight:300;font-size:var(--fs-body);color:rgb(var(--c-ink));
  background:var(--veil);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:var(--hair);
  border-radius:var(--r-ctl);padding:.8rem .95rem;min-height:var(--control-h);width:100%;caret-color:rgb(118 79 184);
  transition:border-color .3s var(--e-out),box-shadow .3s var(--e-out)}
textarea{line-height:1.5;resize:vertical}
input::placeholder,textarea::placeholder{color:rgb(var(--c-muted));opacity:.75}
input:focus,select:focus,textarea:focus,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;border-color:rgb(var(--c-accent));box-shadow:0 0 0 3px rgb(118 79 184 / .14)}
select{appearance:none;-webkit-appearance:none;padding-right:2.2rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%,calc(100% - .8rem) 55%;background-size:.3rem .3rem;background-repeat:no-repeat}
input[type="file"]{font-family:var(--f-mono);font-size:var(--fs-label);color:rgb(var(--c-muted))}
input[type="file"]::file-selector-button{font-family:var(--f-disp);font-weight:700;font-size:var(--fs-label);
  letter-spacing:.12em;text-transform:uppercase;border:var(--hair);border-radius:var(--r-ctl);background:none;
  color:rgb(var(--c-ink));padding:.5rem .8rem;margin-right:.7rem;cursor:pointer}
label,.champ-ligne > span,.champ-ligne label{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:rgb(var(--c-muted))}

/* --- Carte en verre, repères de coupe aux coins (la .card du site) ------------------------------- */
.carte{position:relative;background:var(--surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:var(--hair);border-radius:var(--r-carte)}
.carte::before,.carte::after{content:"";position:absolute;width:12px;height:12px;border:1px solid rgb(var(--c-ink));
  opacity:.22;pointer-events:none;transition:border-color .6s var(--e-out),opacity .6s var(--e-out)}
.carte::before{top:-1px;left:-1px;border-right:none;border-bottom:none;border-top-left-radius:3px}
.carte::after{bottom:-1px;right:-1px;border-left:none;border-top:none;border-bottom-right-radius:3px}
.carte:hover::before,.carte:hover::after,.carte.vive::before,.carte.vive::after{border-color:rgb(118 79 184);opacity:.75}

/* --- États d'un bon. La main se lit AUSSI en texte, jamais par la seule couleur ------------------ */
.etat{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-mono);font-size:var(--fs-label);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:rgb(var(--c-body))}
.etat::before{content:"";width:.45rem;height:.45rem;border-radius:50%;flex:none;box-sizing:border-box}
.etat[data-e="signer"]{color:rgb(var(--c-accent))}
.etat[data-e="signer"]::before{background:rgb(var(--c-accent));box-shadow:0 0 0 4px var(--anneau)}
.etat[data-e="preciser"]::before,.etat[data-e="confirmer"]::before{background:rgb(var(--c-ink))}
.etat[data-e="amorce"]::before{border:1px solid rgb(var(--c-ink))}
.etat[data-e="ligne"]{color:rgb(var(--c-muted))}
.etat[data-e="ligne"]::before{background:rgb(var(--c-muted) / .5)}

/* --- Repères de coupe autour d'une épreuve (motif Amorce) ---------------------------------------- */
.coupe{--m:1.1rem;--t:1px;padding:var(--m);color:rgb(var(--c-ink) / .45);border-radius:var(--r-carte);
  background:
   linear-gradient(currentColor 0 0) 0 var(--m)/calc(var(--m)*.7) var(--t),
   linear-gradient(currentColor 0 0) var(--m) 0/var(--t) calc(var(--m)*.7),
   linear-gradient(currentColor 0 0) 100% var(--m)/calc(var(--m)*.7) var(--t),
   linear-gradient(currentColor 0 0) calc(100% - var(--m)) 0/var(--t) calc(var(--m)*.7),
   linear-gradient(currentColor 0 0) 0 calc(100% - var(--m))/calc(var(--m)*.7) var(--t),
   linear-gradient(currentColor 0 0) var(--m) 100%/var(--t) calc(var(--m)*.7),
   linear-gradient(currentColor 0 0) 100% calc(100% - var(--m))/calc(var(--m)*.7) var(--t),
   linear-gradient(currentColor 0 0) calc(100% - var(--m)) 100%/var(--t) calc(var(--m)*.7),
   var(--surface);
  background-repeat:no-repeat;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.coupe img{border-radius:3px}
.feuille{background:rgb(var(--c-sheet));color:rgb(var(--c-ink));border:var(--hair);border-radius:var(--r-carte)}

/* --- La marque de correction --------------------------------------------------------------------- */
.marque{position:relative;outline:2px solid rgb(118 79 184);outline-offset:4px;border-radius:3px}
.marque > .renvoi{position:absolute;top:-.6rem;right:-.6rem;background:rgb(118 79 184);color:#F1EEE8;
  font-family:var(--f-mono);font-size:var(--fs-label);padding:.1rem .4rem;letter-spacing:.04em;border-radius:var(--r-ctl)}

/* --- Le bon à tirer : la carte du pic, violet assumé --------------------------------------------- */
.bat{position:relative;display:grid;gap:.7rem;padding:1.1rem;border:1px solid rgb(118 79 184 / .55);
  border-radius:var(--r-carte);background:var(--surface);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 5px var(--anneau)}
.bat .titre{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--c-accent))}
.bat .signature{border-bottom:1px dashed rgb(var(--c-ink) / .4);height:1.6rem}

/* --- Le champ où l'on dit la chose ---------------------------------------------------------------- */
.dire{display:flex;align-items:stretch;border:var(--hair);border-radius:var(--r-carte);background:var(--veil);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:hidden;
  transition:border-color .3s var(--e-out),box-shadow .3s var(--e-out)}
.dire:focus-within{border-color:rgb(var(--c-accent));box-shadow:0 0 0 3px rgb(118 79 184 / .14)}
.dire .champ{flex:1;padding:.75rem;color:rgb(var(--c-muted));min-height:var(--control-h);display:flex;align-items:center}
.dire .outil{border-left:1px solid var(--ligne-2);display:grid;place-items:center;padding:0 .9rem;font-family:var(--f-mono);
  font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.1em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0ms !important;animation-duration:0ms !important}
}