/* Cedule, site public. Meme identite « L'Acte » que l'administration : velin, encre,
   filets d'un point, petites capitales gravees.

   CONTRASTES MESURES et non juges a l'oeil, tous conformes WCAG 2.2 AA pour du texte :
   encre sur velin 15,63:1, attenue sur velin 7,04:1, accent sur velin 6,43:1, et sur la
   feuille 16,90:1, 7,61:1 et 6,95:1. Ces chiffres sont mesures par script ; les modifier
   a la main sans remesurer les rendrait faux, ce qui est pire que de ne rien annoncer.

   Aucune requete vers un service tiers, aucun cookie : c'est ce que la page promet, donc
   c'est ce que la page fait. Les polices viennent de notre propre CDN. */

@import url('https://cdn.breizhzion.com/fonts/cedule-fonts.css');

:root {
  --velin: #f3ede1;
  --feuille: #faf6ee;
  --encre: #171512;
  --attenue: #554e44;
  --accent: #2f5d50;
  /* Le rouge des gestes destructeurs, repris de `acte.css`. */
  --rubrique: #8f2c1d;
  --trait: rgba(23, 21, 18, 0.16);
  --trait-fort: rgba(23, 21, 18, 0.38);
  --titre: 'IM Fell English SC', Georgia, serif;
  --texte: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --chiffre: 'Fragment Mono', ui-monospace, monospace;
}

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

body {
  margin: 0;
  background-color: var(--velin);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px,
    rgba(23, 21, 18, 0.045) 27px, rgba(23, 21, 18, 0.045) 28px);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.15rem;
  line-height: 1.62;
}

.saut-au-contenu { position: absolute; left: -9999px; background: var(--accent);
  color: var(--feuille); padding: .7rem 1.2rem; }
.saut-au-contenu:focus { left: 1rem; top: 1rem; z-index: 10; }

header, main, footer { max-width: 42rem; margin: 0 auto; padding: 0 1.4rem; }
header { padding-top: 1.6rem; padding-bottom: 1rem; }

/* L'entree de l'administration, en haut a DROITE de la colonne, en bouton discret : elle ne
   s'adresse qu'aux membres, elle ne doit donc pas concurrencer le titre, mais c'est une
   action et pas une note de bas de page. `.bouton.discrete` garde les 44px de hauteur de
   cible tactile du motif commun. */
.acces { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }
main { padding-bottom: 4rem; }

.marque {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
}

/* Le cadran est peint par un masque : il prend ainsi la couleur de l'encre. Un SVG charge
   en balise `img` garderait son noir pur, qui jure sur le velin. */
.cadran {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  background-color: currentColor;
  -webkit-mask: var(--source) center / contain no-repeat;
  mask: var(--source) center / contain no-repeat;
}

.signature {
  font-family: var(--titre);
  font-size: 2.6rem;
  letter-spacing: .05em;
  margin: 0;
  line-height: 1;
}
.signature a { color: inherit; text-decoration: none; }
/* Le double filet suit la marque entiere, logo compris, et non le seul mot. */
.marque + .devise { margin-top: 0; }

header::after {
  content: ''; display: block; margin-top: .8rem; height: 3px;
  border-top: 2px solid var(--encre); border-bottom: 1px solid var(--encre);
}
.devise { font-style: italic; color: var(--attenue); margin: .9rem 0 0; font-size: .95rem; }

h1, h2, h3 { font-family: var(--titre); font-weight: 400; letter-spacing: .035em;
  line-height: 1.2; margin: 2.4rem 0 .9rem; }
h1 { font-size: 2rem; margin-top: 2.8rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.08rem; }

p, li { max-width: 38rem; }
p { margin: 0 0 1.2rem; }
ul { padding-left: 1.2rem; }
li { margin-bottom: .5rem; }

a { color: var(--accent); text-underline-offset: 3px; }
/* --- Actions --------------------------------------------------------------------

   ⚠️ `.bouton` etait REFERENCEE ici par la seule regle `:focus-visible` ci-dessous, sans
   jamais etre definie : la classe avait donc l'air supportee, et le bouton de confirmation
   tombait en realite sur le rendu brut du navigateur, seul element de tout le site a ne pas
   porter l'identite. Une reference partielle est pire qu'une absence, elle laisse croire que
   le style existe.

   Motif TRANSCRIT TEL QUEL depuis `acte.css`, sans retouche a la copie : la divergence entre
   deux feuilles ne vient jamais de la copie, elle vient des retouches faites en copiant. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.55rem 1.4rem;
  font-family: var(--titre);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  color: var(--feuille);
  background: var(--accent);
  border: 1px solid var(--accent);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bouton:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(23, 21, 18, 0.7); }
.bouton:active { transform: none; }
.bouton.discrete { background: transparent; color: var(--accent); }
/* ⚠️ Un geste destructeur ne porte pas la couleur d'un geste ordinaire : annuler un
   rendez-vous se distingue de le confirmer par la couleur ET par le libellé, jamais par
   la seule couleur (WCAG 1.4.1), d'où le « Oui, annuler » explicite du bouton. */
.bouton.rubrique { background: var(--rubrique); border-color: var(--rubrique); }

a:focus-visible, .bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.chapeau { font-size: 1.25rem; }

/* Le numero d'erreur, grave en chiffres. `aria-hidden` dans le gabarit : il double le titre
   pour un lecteur d'ecran, qui entendrait « 404 Page introuvable » sans rien y gagner. */
.code {
  font-family: var(--chiffre);
  font-size: 4.2rem;
  line-height: 1;
  color: var(--trait-fort);
  margin: 3rem 0 0;
}

.encart {
  background: var(--feuille);
  border: 1px solid var(--trait-fort);
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.encart p:last-child { margin-bottom: 0; }

.intitule { font-family: var(--titre); font-size: .78rem; letter-spacing: .14em;
  color: var(--attenue); display: block; margin-bottom: .4rem; }

table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
th { font-family: var(--titre); font-weight: 400; font-size: .78rem; letter-spacing: .12em;
  color: var(--attenue); text-align: left; padding: 0 .6rem .5rem 0;
  border-bottom: 1px solid var(--trait-fort); }
td { padding: .7rem .6rem .7rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }

.chiffre, time { font-family: var(--chiffre); font-variant-numeric: tabular-nums;
  font-size: .95em; }

footer {
  border-top: 1px solid var(--trait-fort);
  margin-top: 3rem;
  padding-top: 1.4rem;
  padding-bottom: 3rem;
  color: var(--attenue);
  font-size: .92rem;
}
footer a { color: var(--attenue); }
footer nav { margin-bottom: .6rem; }
footer nav a { margin-right: 1.2rem; }

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