/* ── Identité BAO ─────────────────────────────────────────────────────────
   Surcharge de main.css, repris tel quel du portail Veuzain pour ne pas
   entretenir deux feuilles de style. Seule la palette change : les deux
   portails ne doivent pas se ressembler au point qu'on croie être dans l'un
   quand on est dans l'autre. Veuzain est teal, la BAO est terre cuite.       */
:root {
  --blue-dark:  #241F1B;   /* charcoal chaud */
  --blue:       #C2703D;   /* terre cuite — couleur primaire BAO */
  --blue-light: #FBEDE2;
}

.header-wordmark {
  font-family: var(--font-display), Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.header-wordmark small {
  font-family: var(--font);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .65;
}

/* Tuile d'un module pas encore déménagé : présente, mais visiblement inerte. */
.app-card-soon { opacity: .55; }

/* `.nav-role` n'a pas de couleur propre dans main.css : elle vient d'un
   modificateur par rôle (`.nav-role-mairie`, etc.), et la BAO n'a plus de
   rôles. Sans cette règle, le nom de l'utilisateur s'affiche en texte sombre
   sur l'en-tête sombre — invisible. */
.nav-role {
  background: var(--blue-light);
  color: var(--blue-dark);
}

/* ── Tampon PDF ───────────────────────────────────────────────────────────
   La scène de placement est une page à l'échelle : le logo y occupe la
   proportion exacte qu'il occupera sur le PDF. Ce qu'on voit est ce qu'on
   obtient — c'est tout l'intérêt de placer à la souris plutôt que de choisir
   dans une liste.                                                           */
#tampon-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 26px;
  align-items: start;
}
.tampon-scene { min-width: 0; text-align: center; }

/* Le cadre épouse l'image de la page : il ne lui impose pas ses dimensions.
   La version précédente faisait le contraire — `aspect-ratio` sur le cadre,
   `width: 100%` et `max-height` — et dès que la hauteur butait sur la limite,
   le rapport était rompu et `object-fit: fill` écrasait la page pour la faire
   entrer. Le PDF produit était juste, l'aperçu mentait. */
.tampon-zone {
  position: relative;
  display: inline-block;
  line-height: 0;              /* pas d'espace fantôme sous l'image */
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  box-shadow: var(--shadow);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  max-width: 100%;
}
.tampon-fond {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;            /* l'image se réduit en gardant SON rapport */
  pointer-events: none;
}
.tampon-logo {
  position: absolute;
  height: auto;
  transform: translate(-50%, -50%);   /* les coordonnées désignent le centre */
  cursor: grab;
  touch-action: none;
  outline: 1px dashed transparent;
  outline-offset: 4px;
}
.tampon-logo:hover,
.tampon-logo:focus-visible { outline-color: var(--blue); }
.tampon-logo--saisi { cursor: grabbing; outline-color: var(--blue); }
.tampon-lecture {
  margin-top: 8px;
  font-size: .78rem;
  color: #666;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Les neuf raccourcis, dessinés comme une page en réduction. */
.tampon-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 132px;
  aspect-ratio: 210 / 297;
  padding: 5px;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  background: var(--white);
}
.tampon-case {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--gray-100);
  cursor: pointer;
  transition: background .12s;
}
.tampon-case:hover { background: var(--blue-light); }
.tampon-marque {
  width: 62%;
  height: 34%;
  border-radius: 2px;
  background: var(--gray-400);
  opacity: .45;
}
.tampon-case:hover .tampon-marque { background: var(--blue); opacity: 1; }

.tampon-curseur { display: flex; align-items: center; gap: 10px; }
.tampon-curseur input[type="range"] { flex: 1; accent-color: var(--blue); }
.tampon-curseur output {
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .85rem;
}

.tampon-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 900px) {
  #tampon-form { grid-template-columns: 1fr; }
}