/* =====================================================================
   valais-nature.ch — feuille de style unique
   =====================================================================
   Direction : le vocabulaire du balisage alpin suisse. Fond blanc froid
   comme le papier des cartes nationales, encre bleu-nuit, bleu glacier
   pour le secondaire, et un seul accent — le rouge des marques
   blanc-rouge-blanc peintes sur les rochers le long des itinéraires.

   Ce trait blanc-rouge-blanc est le motif signature du site : il marque
   les surtitres et les séparations. Il ne décore pas, il signale, comme
   sur le terrain.

   Typo : Archivo à chasse élargie pour les titres, comme les cartouches
   des cartes nationales ; Spline Sans pour le texte courant ; IBM Plex
   Mono pour toute mesure (coordonnées, altitudes) — une donnée doit se
   lire comme une donnée.
   ===================================================================== */

:root {
  --papier:   #f2f4f5;
  --papier2:  #e5eaec;
  --encre:    #13202b;
  --ardoise:  #55697a;
  --glacier:  #8fb6c9;
  --blaze:    #c4302b;

  --pas:      clamp(1rem, 0.6rem + 1.6vw, 1.75rem);
  --marge:    clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --large:    72rem;

  --display: 'Archivo', system-ui, sans-serif;
  --texte:   'Spline Sans', system-ui, sans-serif;
  --mesure:  'IBM Plex Mono', ui-monospace, monospace;
}

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

/* Toute règle `display` l'emporterait sinon sur l'attribut `hidden`, et des
   éléments masqués en JavaScript resteraient visibles — c'est ce qui faisait
   apparaître le bouton de modération aux membres non administrateurs. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Titres ---------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 118;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.25rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h3 { font-size: 1.125rem; font-variation-settings: 'wdth' 108; }

/* Surtitre précédé de la marque de balisage blanc-rouge-blanc. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mesure);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin: 0 0 0.9rem;
}

.eyebrow::before {
  content: '';
  flex: none;
  width: 22px;
  height: 9px;
  background: linear-gradient(
    to bottom,
    #fff 0 33.33%,
    var(--blaze) 33.33% 66.66%,
    #fff 66.66% 100%
  );
  border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent);
}

/* =====================================================================
   Barre de navigation
   ===================================================================== */

.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--pas);
  padding: 0.85rem var(--marge);
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

.marque {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}

.marque span { color: var(--blaze); }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--ardoise);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.menu a:hover { color: var(--encre); }

.menu a[aria-current='page'] {
  color: var(--encre);
  border-bottom-color: var(--blaze);
}

/* =====================================================================
   Accueil — section d'ouverture
   ===================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 0 var(--marge) clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  background: var(--papier2);
}

/* Le relief du Valais en imagerie satellite, rendu en direct et en volume.
   Le sujet du site est le terrain : autant le montrer que le décrire. */
#relief-accueil {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Voile clair. Le haut est volontairement dense : il noie l'horizon et la
   limite des tuiles chargées dans une brume, comme un fond de vallée vu
   depuis un col. Le centre droit reste net, la gauche s'éclaircit pour
   porter le texte. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--papier) 0%,
      color-mix(in srgb, var(--papier) 72%, transparent) 16%,
      color-mix(in srgb, var(--papier) 12%, transparent) 40%,
      color-mix(in srgb, var(--papier) 12%, transparent) 58%,
      color-mix(in srgb, var(--papier) 70%, transparent) 88%,
      var(--papier) 100%),
    linear-gradient(to right,
      color-mix(in srgb, var(--papier) 94%, transparent) 0%,
      color-mix(in srgb, var(--papier) 76%, transparent) 28%,
      color-mix(in srgb, var(--papier) 20%, transparent) 52%,
      transparent 68%);
}

/* Sur écran étroit, le texte occupe toute la largeur : superposé à
   l'imagerie, il devient illisible — les étiquettes de villages traversent
   les lettres. Aucun dégradé ne rattrape ça sans effacer la photo.
   On change donc de disposition : le relief devient un bandeau en haut, le
   texte passe dessous sur fond plein. */
@media (max-width: 52rem) {
  .hero {
    min-height: auto;
    display: block;
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }

  #relief-accueil {
    position: relative;
    inset: auto;
    height: 44svh;
    margin: 0 calc(-1 * var(--marge));   /* pleine largeur malgré le padding */
  }

  /* Le voile ne couvre plus que le bandeau : il éclaircit le haut, que
     l'en-tête fixe recouvre, et fond le bas dans le fond de page. */
  .hero::after {
    inset: 0 0 auto 0;
    height: 44svh;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--papier) 82%, transparent) 0%,
      color-mix(in srgb, var(--papier) 8%, transparent) 24%,
      color-mix(in srgb, var(--papier) 8%, transparent) 62%,
      var(--papier) 100%);
  }

  .hero-contenu { max-width: none; padding-top: 1.5rem; }
}

.hero-contenu {
  position: relative;
  z-index: 2;
  max-width: 46ch;
}

.hero p {
  color: var(--ardoise);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  margin: 1.25rem 0 2rem;
  max-width: 46ch;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }


/* =====================================================================
   Boutons
   ===================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.4rem;
  font-family: var(--texte);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--blaze);
  border-radius: 2px;
  background: var(--blaze);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.bouton:hover { background: transparent; color: var(--blaze); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

.bouton.secondaire {
  background: color-mix(in srgb, #fff 70%, transparent);
  color: var(--encre);
  border-color: color-mix(in srgb, var(--encre) 25%, transparent);
}

.bouton.secondaire:hover { background: #fff; border-color: var(--encre); }

/* =====================================================================
   Sections courantes
   ===================================================================== */

.bande {
  padding: clamp(4rem, 10vh, 7.5rem) var(--marge);
  border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

.bande > .dedans { max-width: var(--large); margin: 0 auto; }
.bande p { color: var(--ardoise); max-width: 60ch; }

.duo { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

@media (min-width: 52rem) {
  .duo { grid-template-columns: 1fr 1fr; }
}

/* Schéma de la cellule : dessin au trait, pas d'image à télécharger.
   Contrainte des 10 Mo oblige, mais surtout c'est net à tout zoom. */
.schema { width: 100%; height: auto; color: var(--encre); }
.schema .surlignage { color: var(--blaze); }

.liste-reperes {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--encre) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--encre) 14%, transparent);
}

@media (min-width: 46rem) {
  .liste-reperes { grid-template-columns: repeat(3, 1fr); }
}

.liste-reperes li { background: var(--papier); padding: 1.5rem; }
.liste-reperes h3 { margin-bottom: 0.5rem; }
.liste-reperes p { margin: 0; font-size: 0.95rem; }

/* =====================================================================
   Pied de page
   ===================================================================== */

.pied {
  padding: 2.5rem var(--marge);
  border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
  font-size: 0.85rem;
  color: var(--ardoise);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem var(--pas);
  align-items: center;
}

.pied a { text-decoration: none; }
.pied a:hover { color: var(--encre); }
.pied .droite { margin-left: auto; font-family: var(--mesure); font-size: 0.75rem; }

/* =====================================================================
   Page carte
   ===================================================================== */

body.page-carte { height: 100svh; overflow: hidden; }

#carte { position: fixed; inset: 0; background: var(--papier2); }

/* Voile de connexion : la carte reste visible derrière, floutée. On montre
   le terrain sans en livrer les points. */
.voile {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 5rem var(--marge) var(--marge);
  background: color-mix(in srgb, var(--papier) 72%, transparent);
  backdrop-filter: blur(16px);
  overflow-y: auto;
}

.voile[hidden] { display: none; }

.panneau {
  width: min(26rem, 100%);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--encre) 14%, transparent);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

.panneau h2 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.panneau > p { color: var(--ardoise); font-size: 0.95rem; margin: 0 0 1.5rem; }

.champ { display: block; margin-bottom: 1rem; }

.champ span {
  display: block;
  font-family: var(--mesure);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardoise);
  margin-bottom: 0.4rem;
}

.champ input {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid color-mix(in srgb, var(--encre) 20%, transparent);
  border-radius: 2px;
}

.champ input:focus { border-color: var(--blaze); outline: none; background: #fff; }

.champ-fichier input[type='file'] {
  padding: 0.5rem;
  font-family: var(--texte);
  font-size: 0.85rem;
  background: var(--papier);
}

.champ-fichier input[type='file']::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.4rem 0.8rem;
  font: inherit;
  color: var(--encre);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--encre) 25%, transparent);
  border-radius: 2px;
  cursor: pointer;
}

.champ-fichier em {
  display: block;
  margin-top: 0.4rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ardoise);
}

/* Une coordonnée est une mesure : elle se lit en chasse fixe, comme partout
   ailleurs sur le site. */
.champ input.mesure { font-family: var(--mesure); font-size: 0.9rem; }

.duo-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* --- Recherche d'adresse --------------------------------------------- */

.champ-position {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--encre) 12%, transparent);
}

/* La liste flotte au-dessus du reste du formulaire : le conteneur porte le
   repère de positionnement, et rien ne doit le rogner. */
.recherche { position: relative; }

.suggestions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--encre) 20%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--encre) 16%, transparent);
}

.suggestions li {
  padding: 0.55rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
  border-top: 1px solid color-mix(in srgb, var(--encre) 8%, transparent);
}

.suggestions li:first-child { border-top: none; }

.suggestions li:hover,
.suggestions li.active { background: color-mix(in srgb, var(--glacier) 28%, transparent); }

.suggestions li.vide {
  color: var(--ardoise);
  cursor: default;
  background: none;
  font-size: 0.85rem;
}

/* Ligne d'état de la position : grise tant que rien n'est acquis, puis en
   chasse fixe avec la marque rouge dès qu'un point est retenu. */
.position-etat {
  margin: 0.6rem 0 0.9rem;
  font-size: 0.85rem;
  color: var(--ardoise);
}

.position-etat.retenue {
  font-family: var(--mesure);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--encre);
  border-left: 2px solid var(--blaze);
  padding-left: 0.65rem;
}

.champ-position .bouton { margin-top: 0; }

/* Le point en cours de choix ne se confond pas avec un spot enregistré :
   creux, cerclé de rouge, et déplaçable à la souris. Comme `.marqueur`, il
   n'a ni `transform` ni transition dessus — MapLibre s'en sert pour le
   positionner. */
.marqueur-choix {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blaze);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 30%, transparent),
              0 3px 10px color-mix(in srgb, var(--encre) 45%, transparent);
  cursor: grab;
}

.marqueur-choix:active { cursor: grabbing; }

.panneau .bouton { width: 100%; justify-content: center; margin-top: 0.5rem; }

.bascule { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--ardoise); }

.bascule button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--blaze);
  cursor: pointer;
  text-decoration: underline;
}

.message {
  margin: 1rem 0 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.9rem;
  border-left: 2px solid var(--glacier);
  background: color-mix(in srgb, var(--glacier) 18%, transparent);
  color: var(--encre);
}

.message[hidden] { display: none; }

.message.erreur {
  border-left-color: var(--blaze);
  background: color-mix(in srgb, var(--blaze) 10%, transparent);
}

/* --- Barre d'outils de la carte --------------------------------------- */

.outils {
  position: fixed;
  z-index: 15;
  top: 4.5rem;
  left: var(--marge);
  right: var(--marge);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  pointer-events: none;
}

.outils > * { pointer-events: auto; }

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  font-family: var(--mesure);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre);
  background: color-mix(in srgb, #fff 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--encre) 18%, transparent);
  backdrop-filter: blur(10px);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--encre) 10%, transparent);
}

.pastille:hover { background: #fff; }

/* Sur téléphone la barre passe à deux lignes : on resserre pour qu'elle
   mange le moins de carte possible. */
@media (max-width: 32rem) {
  .outils { gap: 0.35rem; top: 4rem; }
  .pastille { padding: 0.4rem 0.6rem; font-size: 0.66rem; letter-spacing: 0.05em; }
}

.pastille[aria-pressed='true'] {
  color: #fff;
  background: var(--blaze);
  border-color: var(--blaze);
}

.pastille.info { cursor: default; }

/* Consigne de placement : elle remplace momentanément le panneau, qui est
   effacé pour laisser la carte cliquable. */
.pastille.indice {
  color: #fff;
  background: var(--encre);
  border-color: var(--encre);
}
.pastille .compte { color: var(--blaze); font-weight: 600; }
.pastille[aria-pressed='true'] .compte { color: #fff; }

/* --- Marqueurs -------------------------------------------------------- */

/* ⚠️ Aucune règle `transform` ni `transition: transform` ici.
   MapLibre positionne chaque marqueur en écrivant `style.transform` en ligne
   sur ce même élément, à chaque image du déplacement de la carte. Une
   transition sur `transform` anime donc le repositionnement lui-même : les
   points glissent avec du retard et ne restent plus fixés au terrain. Et un
   `transform: scale()` au survol serait de toute façon sans effet, le style
   en ligne l'emportant sur la feuille. Le survol passe donc par la couleur
   et l'ombre, jamais par la géométrie. */
.marqueur {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  background: var(--blaze);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 35%, transparent),
              0 2px 6px color-mix(in srgb, var(--encre) 45%, transparent);
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s, border-color 0.15s;
}

.marqueur:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 35%, transparent),
              0 0 0 6px color-mix(in srgb, var(--blaze) 30%, transparent),
              0 2px 6px color-mix(in srgb, var(--encre) 45%, transparent);
}

/* Une proposition en attente se distingue au premier coup d'œil :
   pastille creuse, pas encore pleine. */
.marqueur.en-attente { background: #fff; border-color: var(--blaze); }

/* Une proposition écartée sort du rouge : elle n'appelle plus d'action.
   Visible du seul administrateur et de son auteur. */
.marqueur.refusee {
  background: var(--ardoise);
  border-color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 25%, transparent);
  opacity: 0.75;
}

/* --- Fiche du spot ---------------------------------------------------- */

.fiche {
  position: fixed;
  z-index: 18;
  inset: auto 0 0 0;
  max-height: 72svh;
  overflow-y: auto;
  background: #fff;
  border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  box-shadow: 0 -10px 40px color-mix(in srgb, var(--encre) 15%, transparent);
  padding: clamp(1.25rem, 3vw, 2rem);
  transform: translateY(100%);
  transition: transform 0.28s ease;
}

.fiche.ouverte { transform: none; }

@media (min-width: 52rem) {
  .fiche {
    /* Pas de `bottom` : la fiche s'arrête à son contenu au lieu de
       s'étirer sur toute la hauteur de l'écran. */
    inset: 4rem auto auto var(--marge);
    width: 26rem;
    max-height: calc(100svh - 6rem);
    border: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--encre) 18%, transparent);
    transform: translateX(calc(-100% - var(--marge)));
  }
  .fiche.ouverte { transform: none; }
}

.fiche-fermer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--ardoise);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}

.fiche-fermer:hover { color: var(--encre); border-color: color-mix(in srgb, var(--encre) 25%, transparent); }

.fiche h2 { font-size: 1.5rem; padding-right: 2rem; }

.fiche .coordonnees {
  font-family: var(--mesure);
  font-size: 0.8rem;
  color: var(--blaze);
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.fiche .coordonnees a { color: var(--ardoise); }
.fiche .description { color: var(--ardoise); font-size: 0.95rem; }

.fiche dl {
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.9rem;
}

.fiche dt {
  font-family: var(--mesure);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardoise);
  padding-top: 0.15rem;
}

.fiche dd { margin: 0; }

.galerie { display: grid; gap: 0.5rem; margin-top: 1.5rem; }
.galerie img { width: 100%; border: 1px solid color-mix(in srgb, var(--encre) 12%, transparent); }
.galerie figure { margin: 0; }
.galerie figcaption { font-size: 0.8rem; color: var(--ardoise); margin-top: 0.35rem; }

/* --- Bandeau de modération ------------------------------------------- */

.moderation {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--encre) 15%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.moderation .bouton {
  flex: 1 1 7rem;
  justify-content: center;
  font-size: 0.85rem;
  padding: 0.6rem 0.9rem;
}

/* La suppression est irréversible : elle ne doit pas se confondre avec les
   deux autres actions, qui elles se rattrapent. */
.bouton.danger {
  background: transparent;
  color: var(--blaze);
  border-color: color-mix(in srgb, var(--blaze) 45%, transparent);
}

.bouton.danger:hover { background: var(--blaze); color: #fff; border-color: var(--blaze); }

.moderation-saisie { width: 100%; }
.moderation-saisie .champ { margin-bottom: 0.75rem; }

.avertissement {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--encre);
}

.etat-attente {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--mesure);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blaze);
  border: 1px solid var(--blaze);
}

.etat-attente.refusee {
  color: var(--ardoise);
  border-color: color-mix(in srgb, var(--ardoise) 50%, transparent);
}

.fiche .motif {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--ardoise);
  border-left: 2px solid color-mix(in srgb, var(--ardoise) 40%, transparent);
  padding-left: 0.7rem;
}

/* =====================================================================
   Page À propos
   ===================================================================== */

.page-texte { padding-top: 8rem; }
.page-texte .dedans { max-width: 42rem; margin: 0 auto; }
.page-texte h2 { margin-top: 3rem; }
.page-texte h2:first-of-type { margin-top: 2rem; }
.page-texte p + p { margin-top: 1rem; }

.page-texte dl { margin: 2rem 0 0; }

.page-texte dt {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108;
  font-weight: 600;
  margin-top: 1.5rem;
}

.page-texte dd { margin: 0.35rem 0 0; color: var(--ardoise); }