/* FH Créations — système visuel
   Direction : éditorial cartographique. Papier, encre, et le sienna du bois
   brûlé par le laser. Les courbes de niveau sont la matière, pas un décor
   rapporté : elles viennent du produit lui-même. */

:root {
  /* Palette : un fond dominant, un accent unique */
  --papier:      #f6f2ea;
  --papier-fonce:#ece5d8;
  --encre:       #17140f;
  --encre-douce: #5a5147;
  --encre-tenue: #8c8275;
  --brulure:     #a8562b;   /* la couleur du contreplaqué gravé */
  --brulure-pale:#c98a5e;
  --trait:       #d8cfbe;
  --succes:      #4a6b3a;
  --alerte:      #9c5a1e;

  /* Typographie : serif éditoriale pour la voix, système pour le service.
     Aucune police téléchargée : rien à charger, rendu immédiat sur iPhone. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-micro: .72rem;
  --t-petit: .84rem;
  --t-base:  1rem;
  --t-grand: clamp(1.5rem, 1.1rem + 2vw, 2.1rem);
  --t-titre: clamp(2.1rem, 1.3rem + 4.2vw, 3.6rem);

  /* Rythme : progression nette, pas une échelle linéaire molle */
  --e1: .35rem;  --e2: .7rem;  --e3: 1.2rem;
  --e4: 2rem;    --e5: 3.2rem; --e6: 5rem;

  --rayon: 3px;              /* presque droit : on découpe du bois, pas des bulles */
  --duree: 420ms;
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--papier);
  color: var(--encre);
  font: var(--t-base)/1.6 var(--sans);
  /* Grain discret : le papier n'est jamais parfaitement lisse */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(168,86,43,.045), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(90,81,71,.04), transparent 46%);
  background-attachment: fixed;
}

/* ── Fond cartographique : courbes de niveau, en très discret ─────────────── */
.releve {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
.releve path { fill: none; stroke: var(--trait); stroke-width: .8; }

.page { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto;
        padding: var(--e4) var(--e3) var(--e6); }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.bandeau { display: flex; align-items: baseline; justify-content: space-between;
           gap: var(--e3); margin-bottom: var(--e5); }
.marque { font: 600 var(--t-petit)/1 var(--sans); letter-spacing: .16em;
          text-transform: uppercase; color: var(--encre); text-decoration: none; }
.marque span { color: var(--brulure); }
.bandeau nav { font-size: var(--t-micro); letter-spacing: .08em;
               text-transform: uppercase; }
.bandeau nav a { color: var(--encre-tenue); text-decoration: none; margin-left: var(--e3); }
.bandeau nav a:hover { color: var(--brulure); }

/* ── Titre : composition asymétrique, pas un bloc centré ──────────────────── */
.ouverture { margin-bottom: var(--e5); }
.sur-titre { font: var(--t-micro)/1 var(--sans); letter-spacing: .2em;
             text-transform: uppercase; color: var(--brulure);
             margin: 0 0 var(--e3); display: flex; align-items: center; gap: var(--e2); }
.sur-titre::after { content: ""; flex: 1; height: 1px; background: var(--trait); }
h1 { font: 400 var(--t-titre)/1.04 var(--serif); margin: 0 0 var(--e3);
     letter-spacing: -.02em; max-width: 17ch; }
h1 em { font-style: italic; color: var(--brulure); }
.chapeau { font-size: 1.05rem; color: var(--encre-douce); max-width: 44ch; margin: 0; }

h2 { font: 400 var(--t-grand)/1.15 var(--serif); margin: 0 0 var(--e3);
     letter-spacing: -.01em; }
h3 { font: 600 var(--t-petit)/1.3 var(--sans); letter-spacing: .1em;
     text-transform: uppercase; color: var(--encre-tenue); margin: 0 0 var(--e2); }

/* ── Dépôt du fichier ─────────────────────────────────────────────────────── */
.depot { position: relative; display: block; border: 1.5px dashed var(--trait);
         border-radius: var(--rayon); background: rgba(255,255,255,.55);
         padding: var(--e5) var(--e3); text-align: center; cursor: pointer;
         transition: border-color var(--duree) var(--sortie),
                     background var(--duree) var(--sortie); }
.depot:hover, .depot.survol { border-color: var(--brulure); background: #fff; }
.depot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot-titre { font: 400 1.3rem/1.2 var(--serif); margin-bottom: var(--e1); }
.depot-aide { font-size: var(--t-petit); color: var(--encre-tenue); }
.depot-fichier { font: var(--t-petit)/1.4 var(--mono); color: var(--brulure);
                 margin-top: var(--e2); word-break: break-all; }

/* ── Champs ───────────────────────────────────────────────────────────────── */
.champs { display: grid; gap: var(--e3); margin-top: var(--e4); }
.champ label { display: block; font: 600 var(--t-micro)/1 var(--sans);
               letter-spacing: .1em; text-transform: uppercase;
               color: var(--encre-tenue); margin-bottom: var(--e1); }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: .7rem .8rem; font: var(--t-base) var(--sans);
  color: var(--encre); background: #fff; border: 1px solid var(--trait);
  border-radius: var(--rayon); transition: border-color 160ms ease;
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--brulure);
  box-shadow: 0 0 0 3px rgba(168,86,43,.12);
}
.champ .note { font-size: var(--t-micro); color: var(--encre-tenue); margin-top: var(--e1); }
.duo { display: grid; gap: var(--e3); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .duo { grid-template-columns: 1fr 1fr; } }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.bouton { display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2); padding: .85rem 1.6rem; border: 1px solid var(--encre);
  border-radius: var(--rayon); background: var(--encre); color: var(--papier);
  font: 600 var(--t-petit) var(--sans); letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--sortie), background 200ms ease; }
.bouton:hover { background: var(--brulure); border-color: var(--brulure);
                transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }
.bouton[disabled] { opacity: .45; pointer-events: none; }
.bouton--creux { background: transparent; color: var(--encre); }
.bouton--creux:hover { color: var(--papier); }
.bouton--large { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }

/* ── Aperçu : le moment où le coureur reconnaît sa course ─────────────────── */
.planche { margin-top: var(--e5); }
.cadre-apercu { background: #fff; border: 1px solid var(--trait);
                border-radius: var(--rayon); padding: var(--e3);
                box-shadow: 0 1px 2px rgba(23,20,15,.04),
                            0 12px 32px -18px rgba(23,20,15,.25); }
.cadre-apercu svg { display: block; width: 100%; height: auto; }

/* Le SVG livré au laser porte un trait de 0,05 mm, soit un dixieme de pixel
   une fois reduit a la largeur d'un telephone : invisible. On epaissit pour
   l'ecran uniquement, le fichier telecharge garde ses cotes machine. */
.cadre-apercu { background: #efe7d8; padding: var(--e2); }
.cadre-apercu svg #GRAVURE_LIGNES { stroke-width: .2;  stroke: #5b4426; }
.cadre-apercu svg #GRAVURE_LIGNES path[stroke-width] { stroke-width: .7; stroke: #3d2c16; }
.cadre-apercu svg #GRAVURE_TEXTE  { stroke-width: .2;  stroke: #4a3418; }
/* Ce qui reste de DECOUPE apres nettoyage : fente de ruban et accroche. */
.cadre-apercu svg #DECOUPE        { stroke-width: .4;  stroke: #7d6038; fill: #cbb189; }
.cadre-apercu svg #CADRE_DECOUPE  { display: none; }   /* les baguettes sont peintes */
.cadre-apercu svg #CADRE_MOULURE  { stroke-width: .35; stroke: #8d6f45; }
.cadre-apercu svg #REPERE_MEDAILLE circle { animation: none !important;
  stroke-dasharray: 2.5 2 !important; stroke-dashoffset: 0 !important; }

/* Le tracé se dessine : un seul moment de mouvement dans toute l'interface */
@media (prefers-reduced-motion: no-preference) {
  .cadre-apercu svg path { stroke-dasharray: 2400; stroke-dashoffset: 2400;
                           animation: tracer 2.4s var(--sortie) forwards; }
  /* Le texte ne se DESSINE pas : un glyphe fait quelques millimetres de
     contour, le trait n'apparaissait qu'a la toute fin de l'animation et le
     bandeau semblait vide pendant plusieurs secondes. Il apparait en fondu. */
  .cadre-apercu svg #GRAVURE_TEXTE path { stroke-dasharray: none;
    stroke-dashoffset: 0; animation: paraitre .5s var(--sortie) .35s both; }
  .cadre-apercu svg #DECOUPE path, .cadre-apercu svg #DECOUPE rect {
    stroke-dasharray: none; stroke-dashoffset: 0;
    animation: paraitre .5s var(--sortie) .2s both; }
  .cadre-apercu svg #CADRE_DECOUPE *, .cadre-apercu svg #CADRE_MOULURE *,
  .cadre-apercu svg #REPERE_MEDAILLE *, .cadre-apercu svg #JETON_POSE *,
  .cadre-apercu svg rect[fill], .cadre-apercu svg path[fill] {
    animation: none !important; stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important; }
  .cadre-apercu svg #CADRE_MOULURE path { stroke-dasharray: none !important; }
}
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes paraitre { from { opacity: 0; } to { opacity: 1; } }

/* ── Relevé de mesures : lecture tabulaire, pas des cartes empilées ───────── */
.mesures { margin: var(--e4) 0 0; border-top: 1px solid var(--trait); }
.mesures div { display: flex; justify-content: space-between; align-items: baseline;
               gap: var(--e3); padding: .55rem 0; border-bottom: 1px solid var(--trait); }
.mesures dt { font-size: var(--t-petit); color: var(--encre-tenue); }
.mesures dd { margin: 0; font: 500 var(--t-base) var(--mono); color: var(--encre); }
.mesures dd small { font-family: var(--sans); color: var(--encre-tenue);
                    font-weight: 400; }

/* ── Messages ─────────────────────────────────────────────────────────────── */
.mot { padding: var(--e3); border-radius: var(--rayon); font-size: var(--t-petit);
       border-left: 2px solid; }
.mot--alerte { background: rgba(156,90,30,.07); border-color: var(--alerte);
               color: #6d400f; }
.mot--erreur { background: rgba(168,86,43,.08); border-color: var(--brulure);
               color: #7a3c1b; }
.mot--ok { background: rgba(74,107,58,.08); border-color: var(--succes); color: #33501f; }
.mot p { margin: 0 0 var(--e1); }
.mot p:last-child { margin: 0; }
.mot code { font: var(--t-micro) var(--mono); opacity: .75; }

/* ── Attente ──────────────────────────────────────────────────────────────── */
/* L'indicateur est porte par le FORMULAIRE : avec hx-indicator, htmx pose la
   classe sur la cible elle-meme, et un selecteur descendant ne matche jamais. */
.htmx-indicator { display: none; }
form.htmx-request .htmx-indicator { display: flex; }
form.htmx-request .masque-pendant { display: none; }

.patience { align-items: center; gap: var(--e3); justify-content: center;
            padding: var(--e4) var(--e3); color: var(--encre-douce);
            font-size: var(--t-petit); border: 1px solid var(--trait);
            border-radius: var(--rayon); background: rgba(255,255,255,.6);
            margin-top: var(--e4); }
.rouet { flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 2px solid var(--trait); border-top-color: var(--brulure);
  animation: tourne .75s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Les etapes defilent : la premiere generation interroge l'IGN et dure une
   dizaine de secondes, une roue muette laisse croire a un blocage. */
.etapes { position: relative; display: block; min-height: 1.5em; flex: 1; }
.etapes b { position: absolute; inset: 0; font-weight: 500; opacity: 0;
            transform: translateY(.35em); animation: etape 12s var(--sortie) infinite; }
.etapes b[data-etape="1"] { animation-delay: 2.2s; }
.etapes b[data-etape="2"] { animation-delay: 5.2s; }
.etapes b[data-etape="3"] { animation-delay: 8.2s; }
@keyframes etape {
  0%, 2%   { opacity: 0; transform: translateY(.35em); }
  5%, 22%  { opacity: 1; transform: translateY(0); }
  26%,100% { opacity: 0; transform: translateY(-.35em); }
}
@media (prefers-reduced-motion: reduce) {
  .etapes b { animation: none; opacity: 0; }
  .etapes b[data-etape="0"] { opacity: 1; }
}

/* ── Tableau d'administration ─────────────────────────────────────────────── */
.filtres { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e4); }
.filtres a { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
             padding: .35rem .8rem; border: 1px solid var(--trait);
             border-radius: 99px; color: var(--encre-douce); text-decoration: none; }
.filtres a.actif { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.commande { border: 1px solid var(--trait); border-radius: var(--rayon);
            background: #fff; padding: var(--e3); margin-bottom: var(--e2); }
.commande header { display: flex; justify-content: space-between; align-items: baseline;
                   gap: var(--e2); margin-bottom: var(--e2); flex-wrap: wrap; }
.commande .qui { font: 500 var(--t-base) var(--sans); }
.commande .quand { font-size: var(--t-micro); color: var(--encre-tenue); }
.commande .detail { font-size: var(--t-petit); color: var(--encre-douce); }
.commande .detail a { color: var(--brulure); }
.etiquette { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase;
             padding: .18rem .55rem; border-radius: 99px; border: 1px solid var(--trait);
             color: var(--encre-douce); }
.etiquette--nouvelle { background: var(--brulure); color: #fff; border-color: var(--brulure); }

.pied { margin-top: var(--e6); padding-top: var(--e3); border-top: 1px solid var(--trait);
        font-size: var(--t-micro); color: var(--encre-tenue);
        display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.pied a { color: var(--encre-tenue); }

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