/* ============================================================================
   LES MODÈLES À TÉLÉCHARGER : le bloc sous l'acte, le catalogue, et la fenêtre qui
   demande les coordonnées avant le premier fichier.

   Seules les pages qui proposent des fichiers chargent cette feuille : les autres n'ont
   rien à y prendre.
   ============================================================================ */

/* Sous l'acte qu'il reproduit, le bloc se lit comme une pièce jointe : un cadre blanc, une
   ligne par acte, les formats alignés à droite dès que la largeur le permet. Le catalogue
   de la page des modèles reprend exactement les mêmes lignes, une situation après l'autre. */
.modele,
.catalogue {
  background: #fff;
  border: 1px solid var(--color-gray-border);
  border-radius: 18px;
  padding: 22px 24px;
  margin: 0 0 40px;
}
.modele h2,
.catalogue h2 { margin-top: 0; font-size: 1.2rem; }
.modele p,
.catalogue > p { font-size: .95rem; color: var(--color-gray-text); }
.modele__note { margin-bottom: 0; }
.modele__fichiers { list-style: none; margin: 0 0 14px; padding: 0; }
.modele__fichiers li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--color-gray-border);
}
.modele__acte { font-weight: 600; flex: 1 1 12rem; }
.modele__fichiers a { font-weight: 600; font-size: .92rem; }
.catalogue__liste { list-style: none; margin: 0; padding: 0; }
.catalogue__entree { margin-top: 18px; }
.catalogue__situation { display: inline-block; font-family: var(--font-heading); font-weight: 600; margin-bottom: 4px; }
.catalogue .modele__fichiers { margin-bottom: 0; }

/* ── La fenêtre des coordonnées ───────────────────────────────────────────── */

/* Une fenêtre étroite, qui tient sur un téléphone sans défilement horizontal : le
   formulaire en haut, puis, à part, ce qu'on obtient sans rien laisser. Sur un petit
   écran elle défile en elle-même plutôt que de déborder. */
.coordonnees {
  width: calc(100% - 32px);
  max-width: 30rem;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 0;
  border-radius: 20px;
  padding: 28px 26px 24px;
  background: #fff;
  color: var(--color-dark);
  box-shadow: 0 30px 80px -24px rgb(0 0 0 / .45);
}
.coordonnees::backdrop { background: rgb(17 17 17 / .45); }
.coordonnees h2 { margin: 0 40px 6px 0; font-size: 1.3rem; }
.coordonnees p { font-size: .95rem; }
.coordonnees .coordonnees__modele { margin-bottom: 18px; color: var(--color-gray-text); font-size: .85rem; }
.coordonnees__fermer {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--color-gray-bg);
  color: var(--color-dark);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.coordonnees__formulaire { display: grid; gap: 6px; }
.coordonnees__formulaire p { margin: 0 0 8px; }
.coordonnees label { font-weight: 600; font-size: .9rem; margin-top: 6px; }
/* 16 pixels au moins : en dessous, un iPhone agrandit la page à la saisie. */
.coordonnees input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgb(0 0 0 / .16);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  background: #fff;
}
/* Le focus des champs est celui du formulaire de démonstration de la vitrine : un contour
   rouge plein ressemblerait à une erreur sur un champ encore vide. */
.coordonnees input::placeholder { color: #aeb2b8; }
.coordonnees input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-10); }
.coordonnees button:focus-visible,
.coordonnees a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Le piège à robots : présent dans le formulaire, invisible et hors d'atteinte du clavier. */
.coordonnees__piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.coordonnees .coordonnees__erreur { margin: 4px 0 0; color: #b00020; font-weight: 600; }
.coordonnees .bouton { margin-top: 12px; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: center; }
.coordonnees .bouton:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
.coordonnees .coordonnees__mention { margin: 10px 0 0; font-size: .78rem; line-height: 1.5; color: var(--color-gray-text); }

/* Ce qu'on obtient sans rien laisser : le même cadre que les appels des pages, pour qu'on
   le lise comme une vraie proposition et non comme une note en bas de formulaire. */
.coordonnees__sans {
  margin-top: 20px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background: linear-gradient(150deg, rgb(255 0 55 / .07), rgb(242 179 39 / .04));
  border: 1px solid var(--color-primary-10);
}
.coordonnees__sans p { margin: 0 0 12px; }
.coordonnees__sans .bouton { display: block; text-align: center; }
.bouton--clair {
  background: #fff;
  color: var(--color-dark);
  box-shadow: inset 0 0 0 1px var(--color-gray-border);
}
.bouton--clair:hover { color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }