/* Thème neutre — habillage provisoire.
 *
 * Il donne au site une mise en page, une hiérarchie typographique et un rythme,
 * sans prendre de parti graphique : une seule famille de caractères, presque
 * pas de couleur, aucune image décorative. Sa fonction est de rendre la
 * structure lisible et de permettre de travailler les contenus, pas de
 * proposer une direction artistique — c'est le travail d'OpenStudio, et son
 * design system remplacera ce fichier entièrement.
 *
 * Rien ici n'est à conserver.
 */

:root {
  --encre: #161616;
  --encre-douce: #5b5b5b;
  --trait: #e2e0dc;
  --trait-fort: #c9c6c0;
  --fond: #fdfcfa;
  --fond-doux: #f5f3ef;
  --accent: #1f4b6e;

  --colonne: 68rem;
  --texte: 42rem;

  --pas: 0.5rem;
  --gouttiere: 2rem;
}

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 17px/1.6 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.ui-largeur { max-width: var(--colonne); margin: 0 auto; padding: 0 var(--gouttiere); }
.ui-texte { max-width: var(--texte); }

/* --- Bandeau d'avertissement ------------------------------------------- */
/* Pour qu'aucune capture d'écran ne circule en se faisant passer pour une
   maquette. Il disparaîtra avec ce thème. */
.ui-avertissement {
  background: var(--encre); color: var(--fond);
  font: 500 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.7rem var(--gouttiere); text-align: center;
}

/* --- En-tête ------------------------------------------------------------ */

.ui-entete { border-bottom: 1px solid var(--trait); background: var(--fond); }
.ui-entete__haut {
  display: flex; align-items: baseline; gap: var(--gouttiere);
  padding: 1.4rem 0 1rem;
}
.ui-marque {
  font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--encre); text-decoration: none; white-space: nowrap;
}
.ui-marque span { color: var(--encre-douce); font-weight: 400; font-size: 0.95rem; }
.ui-entete__actions { margin-left: auto; display: flex; gap: 1rem; align-items: center; }

.ui-recherche { display: flex; gap: calc(var(--pas)); }
.ui-recherche input {
  font: inherit; font-size: 0.9rem; padding: 0.35rem 0.6rem;
  border: 1px solid var(--trait-fort); border-radius: 3px; background: #fff;
  min-width: 14rem;
}
.ui-bouton {
  font: 500 0.85rem/1 ui-sans-serif, system-ui, sans-serif;
  padding: 0.5rem 0.9rem; border: 1px solid var(--trait-fort);
  border-radius: 3px; background: #fff; color: var(--encre);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ui-bouton--plein { background: var(--accent); border-color: var(--accent); color: #fff; }

.ui-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; padding-bottom: 0.9rem; }
.ui-nav a {
  font: 0.95rem/1 ui-sans-serif, system-ui, sans-serif;
  color: var(--encre); text-decoration: none; padding-bottom: 0.3rem;
  border-bottom: 2px solid transparent;
}
.ui-nav a:hover { border-bottom-color: var(--trait-fort); }

/* --- Titres et corps ---------------------------------------------------- */

main { padding: 2.5rem 0 1rem; }

h1 { font-size: 2.1rem; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.6rem; }
h2 { font-size: 1.3rem; line-height: 1.25; margin: 2.4rem 0 0.8rem; }
h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }

.ui-chapo { font-size: 1.15rem; color: var(--encre-douce); margin: 0 0 1.2rem; }
.ui-meta {
  font: 0.82rem/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--encre-douce); margin: 0.3rem 0;
}
.ui-surtitre {
  font: 600 0.75rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 0.6rem;
}

article p { max-width: var(--texte); }
article img { max-width: 100%; height: auto; }

/* --- Listes de contenus ------------------------------------------------- */

.ui-grille {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.ui-carte {
  border: 1px solid var(--trait); border-radius: 4px; background: #fff;
  padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.ui-carte h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.ui-carte h3 a { color: var(--encre); text-decoration: none; }
.ui-carte h3 a:hover { text-decoration: underline; }
.ui-carte .ui-chapo { font-size: 0.95rem; margin: 0; }
.ui-carte__pied { margin-top: auto; padding-top: 0.5rem; }

.ui-liste { list-style: none; margin: 0; padding: 0; }
.ui-liste > li { border-bottom: 1px solid var(--trait); padding: 1rem 0; }
.ui-liste > li:first-child { border-top: 1px solid var(--trait); }

.ui-etiquette {
  display: inline-block;
  font: 600 0.68rem/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--encre-douce); border: 1px solid var(--trait-fort);
  padding: 0.25rem 0.45rem; border-radius: 2px; vertical-align: 0.1em;
}
.ui-etiquette--reserve { color: var(--accent); border-color: var(--accent); }

/* --- Encarts ------------------------------------------------------------ */

.ui-encart {
  border: 1px solid var(--trait-fort); border-left: 3px solid var(--accent);
  background: var(--fond-doux); border-radius: 3px;
  padding: 1rem 1.2rem; margin: 1.8rem 0; max-width: var(--texte);
}
.ui-encart p { margin: 0 0 0.5rem; }
.ui-encart p:last-child { margin-bottom: 0; }
.ui-suite-reservee { composes: ui-encart; }

.ui-champs { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; }
.ui-champs dt { font: 600 0.82rem/1.6 ui-sans-serif, system-ui, sans-serif;
  color: var(--encre-douce); }
.ui-champs dd { margin: 0; }

/* --- Formulaire de recherche autonome ----------------------------------- */

.ui-recherche--large input { min-width: 0; width: 100%; font-size: 1.05rem;
  padding: 0.6rem 0.8rem; }
.ui-recherche--large { max-width: var(--texte); margin: 1.2rem 0 0.5rem; }

/* --- Pied --------------------------------------------------------------- */

.ui-pied {
  border-top: 1px solid var(--trait); background: var(--fond-doux);
  margin-top: 4rem; padding: 2rem 0;
  font: 0.88rem/1.6 ui-sans-serif, system-ui, sans-serif; color: var(--encre-douce);
}
.ui-pied__colonnes { display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ui-pied strong { color: var(--encre); font-weight: 600; display: block;
  margin-bottom: 0.4rem; }
.ui-pied ul { list-style: none; margin: 0; padding: 0; }

@media (max-width: 40rem) {
  :root { --gouttiere: 1.2rem; }
  .ui-entete__haut { flex-wrap: wrap; }
  .ui-entete__actions { width: 100%; margin-left: 0; }
  .ui-recherche input { min-width: 0; flex: 1; }
  h1 { font-size: 1.7rem; }
}